/* Custom font for headers below. Google font for body called in */ @font-face { font-family: 'gc_gambioregular'; src: url('/wp-content/themes/evolut-starter/assets/fonts/gc_gambio_sans-webfont.woff2') format('woff2'), url('/wp-content/themes/evolut-starter/assets/fonts/gc_gambio_sans-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } html { scroll-behavior: smooth; } /* So scroll-to targets don't hide under sticky header */ :target { scroll-margin-top: 55px; /* Height of mobile header */ } @media screen and (min-width: 1024px){ :target { scroll-margin-top: 66px; /* Height of desktop header nav */ } } body, html { overflow-x: clip; } body { background-color: white; } body.has-header-open { overflow: hidden; height: 100vh; } img { max-width: 100%; height: auto; } iframe { max-width: 100%; } :target:before { content: ""; display: block; height: 100px; margin: -100px 0 0; } iframe[src^="https://www.youtube.com/"] { --iframe-width: calc(100vw - var(--padding-width)*2); --iframe-height: calc(var(--iframe-width) * 9/16); width: var(--iframe-width); height: var(--iframe-height); } /* Fix theme's assumption all videos are full width of screen */ .container iframe[src^="https://www.youtube.com/"] { --iframe-width: 100%; width: var(--iframe-width); aspect-ratio: 16 / 9; height: auto; } /* Pipedrive forms */ .pipedriveWebForms iframe { display: block; margin-left: auto; margin-right: auto; } /* ======================================*/ /* Visibility Helpers /* ======================================*/ @media (max-width: 767px) { .hide-mobile { display: none!important; } } @media (min-width: 768px) and (max-width: 1023px) { .hide-tablet { display: none!important; } } @media (min-width: 1024px) { .hide-desktop { display: none!important; } } /* ======================================*/ /* Align Helpers /* ======================================*/ .text-left { text-align: left !important; } .text-right { text-align: right !important; } .text-center { text-align: center !important; } .text-justify { text-align: justify !important; } @media (max-width: 781px) { .text-center--mobile { text-align: center;} .text-left--mobile { text-align: left;} .text-right--mobile { text-align: right;} .text-justify--mobile { text-align: justify;} } /* ======================================*/ /* Blocks Helpers /* ======================================*/ .image-columns.gap-0 .image-columns__container { gap: 0; } /* Z index helpers */ .z-index--6 { z-index: 6; } /* Block visibility helpers */ .hide-block { display: none !important; } /* Image helpers */ .img--wide { height: 0; padding-bottom: 56%; position: relative; } .img--wide img { position: absolute; left: 0; right: 0; top: 0; bottom: 0; height: 100%; width: 100%; object-fit: cover; } /* Sticky helpers */ .jc-sticky--bottom { position: sticky; bottom: 0; z-index: 5; transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; } .jc-sticky--bottom-unstick { transform: translateY(100%); opacity: 0; pointer-events: none; animation: bottom-unstick 0.3s ease-in-out forwards; animation-delay: 0.3s; } @keyframes bottom-unstick { 100% { position: absolute; } } /* Responsive tables */ .wp-block-table th { font-family: var(--brand-overline--font-family); font-weight: var(--brand-overline--font-weight); text-transform: var(--brand-overline--text-transform); letter-spacing: var(--brand-overline--letter-spacing); line-height: var(--brand-overline--line-height); font-size: var(--brand-overline--font-size-1); } .wp-block-table thead { border-bottom: 2px solid rgba(var(--brand-color-black-rgb), 0.2); } .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: rgba(var(--brand-color-black-rgb), 0.05); } @media (max-width: 768px) { .jc-table-mobile-stacked table, .jc-table-mobile-stacked thead, .jc-table-mobile-stacked tbody, .jc-table-mobile-stacked th, .jc-table-mobile-stacked td, .jc-table-mobile-stacked tr { display: block; } .jc-table-mobile-stacked thead { display: none; } .jc-table-mobile-stacked tr { border-bottom: 2px solid rgba(var(--brand-color-black-rgb), 0.2) !important; } .jc-table-mobile-stacked td { display: grid; grid-template-columns: minmax(150px, 50%) 1fr; gap: 0.75rem; padding: 0.5rem; border-bottom: 1px solid rgba(var(--brand-color-black-rgb), 0.1) !important; } .jc-table-mobile-stacked td::before { content: attr(data-label); font-family: var(--brand-overline--font-family); font-weight: var(--brand-overline--font-weight); text-transform: var(--brand-overline--text-transform); letter-spacing: var(--brand-overline--letter-spacing); line-height: var(--brand-overline--line-height); font-size: var(--brand-overline--font-size-2); } } /* Brand colour helpers */ .brand-color--black-900 { color: var(--brand-color-black-900); } .brand-color--black-800 { color: var(--brand-color-black-800); } .brand-color--black-700 { color: var(--brand-color-black-700); } .brand-color--black-600 { color: var(--brand-color-black-600); } .brand-color--black-500 { color: var(--brand-color-black-500); } .brand-color--black-400 { color: var(--brand-color-black-400); } .brand-color--black-300 { color: var(--brand-color-black-300); } .brand-color--black-200 { color: var(--brand-color-black-200); } .brand-color--black-100 { color: var(--brand-color-black-100); } .brand-color--black-50 { color: var(--brand-color-black-50); } .brand-color--black-25 { color: var(--brand-color-black-25); } .brand-color--black\/80 { color: rgba(var(--brand-color-black-rgb), 0.8); } .brand-color--black\/60 { color: rgba(var(--brand-color-black-rgb), 0.6); } .brand-color--white\/95, .brand-color--white\/95.has-white-color, .brand-color--white\/95.has-white-color a { color: rgba(var(--brand-color-white-rgb), 0.95) !important; } .brand-color--white\/90, .brand-color--white\/90.has-white-color, .brand-color--white\/90.has-white-color a { color: rgba(var(--brand-color-white-rgb), 0.9) !important; } .brand-color--white\/80, .brand-color--white\/80.has-white-color, .brand-color--white\/80.has-white-color a { color: rgba(var(--brand-color-white-rgb), 0.8) !important; } :root { --primary-yellow-color: #FFB510; --primary-orange-color: #F48120; --primary-dark-grey-color: #262629; --primary-red-color: #ED1C24; --secondary-mid-grey-color: #6F6D6C; --secondary-beige-color: #EFEDE8; --primary-gradient: linear-gradient(94.44deg, #FFB510 18.14%, #F48120 90.57%); /* New Brand */ --anim-delay: 150ms; --anim-v-shift: 20px; --anim-h-shift: 10px; --anim--opacity--duration: 650ms; --anim--opacity--timing-function: linear; --anim--transform--duration: 500ms; --anim--transform--timing-function: ease; --brand-color-primary: #FF4E16; --brand-color-secondary: #FEB022; --brand-color-tertiary: #C7FF33; --brand-color-quaternary: #AEAEAE; --brand-color-white: #FFF; --brand-color-black: #272727; --brand-color-black-25: #F4F4F4; --brand-color-black-50: #E9E9E9; --brand-color-black-100: #D4D4D4; --brand-color-black-200: #BEBEBE; --brand-color-black-400: #939393; --brand-color-black-300: #A9A9A9; --brand-color-black-500: #737373; --brand-color-black-600: #5D5D5D; --brand-color-black-700: #525252; --brand-color-black-800: #474747; --brand-color-black-900: #3D3D3D; --brand-color-primary-5: #FFF6F3; --brand-gradient: linear-gradient(94.44deg, var(--brand-color-primary) 18.14%, var(--brand-color-secondary) 90.57%); --brand-color-error: #ED1C24; --brand-color-success: #10B981; --brand-color-primary-rgb: 255, 78, 22; --brand-color-secondary-rgb: 254, 176, 34; --brand-color-tertiary-rgb: 199, 255, 51; --brand-color-quaternary-rgb: 174, 174, 174; --brand-color-black-rgb: 39, 39, 39; --brand-color-white-rgb: 255, 255, 255; --brand-btn-font-weight: 500; --brand-btn-border-radius: 100px; --brand-btn-line-height: 1; --brand-btn-outline-border-width: 1px; --brand-btn-padding-xl-v: 12px; --brand-btn-padding-xl-h: 24px; --brand-btn-padding-xl: var(--brand-btn-padding-xl-v) var(--brand-btn-padding-xl-h); --brand-btn-gap-xl: 12px; --brand-btn-font-size-xl: 18px; --brand-btn-border-radius-xl: var(--brand-btn-border-radius); --brand-btn-padding-lg-v: 12px; --brand-btn-padding-lg-h: 24px; --brand-btn-padding-lg: var(--brand-btn-padding-lg-v) var(--brand-btn-padding-lg-h); --brand-btn-gap-lg: 12px; --brand-btn-font-size-lg: 16px; --brand-btn-border-radius-lg: var(--brand-btn-border-radius); --brand-btn-padding-md-v: 12px; --brand-btn-padding-md-h: 20px; --brand-btn-padding-md: var(--brand-btn-padding-md-v) var(--brand-btn-padding-md-h); --brand-btn-gap-md: 8px; --brand-btn-font-size-md: 14px; --brand-btn-border-radius-md: var(--brand-btn-border-radius); --brand-btn-padding-sm-v: 8px; --brand-btn-padding-sm-h: 12px; --brand-btn-padding-sm: var(--brand-btn-padding-sm-v) var(--brand-btn-padding-sm-h); --brand-btn-gap-sm: 8px; --brand-btn-font-size-sm: 14px; --brand-btn-border-radius-sm: var(--brand-btn-border-radius); --brand-btn-color--orange--bg: var(--brand-color-primary); --brand-btn-color--orange--text: var(--brand-color-white); --brand-btn-color--yellow--bg: var(--brand-color-secondary); --brand-btn-color--yellow--text: var(--brand-color-black); --brand-btn-color--green--bg: var(--brand-color-tertiary); --brand-btn-color--green--text: var(--brand-color-black); --brand-btn-color--white--bg: var(--brand-color-white); --brand-btn-color--white--text: var(--brand-color-black); --brand-btn-color--black--bg: var(--brand-color-black); --brand-btn-color--black--text: var(--brand-color-white); --brand-btn--icon-size: 20px; --brand-btn--transistion-length: 0.3s; --brand-heading--font-size--display: 54px; --brand-heading--font-size--h1: 54px; --brand-heading--font-size--h2: 48px; --brand-heading--font-size--h3: 40px; --brand-heading--font-size--h4: 32px; --brand-heading--font-size--h5: 24px; --brand-heading--font-size--h6: 20px; --brand-heading--font-size--h7: 16px; --brand-heading--font-family: "gc_gambioregular", sans-serif; --brand-heading--font-weight: 400; --brand-heading--line-height: 1.16; --brand-heading--letter-spacing: -0.02em; --brand-heading--margin-top: 0; --brand-heading--margin-bottom: 0; --brand-body-text--font-size-1: 24px; --brand-body-text--font-size-2: 20px; --brand-body-text--font-size-3: 18px; --brand-body-text--font-size-4: 16px; --brand-body-text--font-size-5: 14px; --brand-body-text--font-size-6: 12px; --brand-body-text--font-family: "Figtree", sans-serif; --brand-body-text--font-weight: 400; --brand-body-text--line-height: 1.5; --brand-body-text--letter-spacing: -0.01em; --brand-subtitle--font-family: var(--brand-body-text--font-family); --brand-subtitle--font-weight: 400; --brand-subtitle--letter-spacing: -0.02em; --brand-subtitle--line-height: 1.4; --brand-subtitle--text-transform: none; --brand-subtitle--font-size-1: 20px; --brand-subtitle--font-size-2: 18px; --brand-subtitle--font-size-3: 16px; --brand-subtitle--font-size-4: 14px; --brand-overline--font-family: var(--brand-body-text--font-family); --brand-overline--font-weight: 600; --brand-overline--text-transform: uppercase; --brand-overline--letter-spacing: 0.08em; --brand-overline--line-height: 1; --brand-overline--font-size-1: 14px; --brand-overline--font-size-2: 12px; --brand-icon-svg--arrow--white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E"); --brand-icon-svg--arrow--grey: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23AEAEAE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E"); --brand-icon-svg--tick--white: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_100_4248)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.05746 7.50032L6.50027 12.9431L14.9431 4.50032L13.2933 2.85052L6.50026 9.64306L2.70724 5.85054L1.05746 7.50032Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_100_4248'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); --brand-icon-svg--tick--orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FF4E16' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important; --brand-icon-svg--arrow--orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FF4E16' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-right'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E") !important; --brand-icon-svg--tick-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 1.5a10.5 10.5 0 1 1 0 21 10.5 10.5 0 0 1 0-21zm0 1.5a9 9 0 1 0 0 18A9 9 0 0 0 12 3zm5.25 6.31-6.75 6.75-3.75-3.75 1.06-1.06 2.69 2.69 5.69-5.69 1.06 1.06z'/%3E%3C/svg%3E"); --brand-form--field--bg-color: var(--brand-color-white); --brand-form--field--text-color: var(--brand-color-black); --brand-form--field--border-color: var(--brand-color-black-50); --brand-form--field--border: 1px solid var(--brand-form--field--border-color); --brand-form--field--bg-color-disabled: var(--brand-color-black-25); --brand-form--field--text-color-disabled: var(--brand-color-black-100); --brand-form--field--border-color-disabled: var(--brand-color-black-100); --brand-form--field--border-radius: 2px; --brand-form--field--padding: 12px; --brand-form--field--line-height: 1.5; --brand-form--field--label-font-weight: 400; --brand-form--check-radio--border-color: var(--brand-color-black-300); --brand-form--check-radio--bg-color: var(--brand-form--field--bg-color); --brand-form--check-radio--active-color: var(--brand-color-primary); --brand-form--check-border-radius: 4px; --brand-block-gap-xl: 40px; --brand-block-gap-lg: 30px; --brand-block-gap-md: 20px; --brand-block-gap-sm: 10px; --brand-block-gap: var(--brand-block-gap-md); /* Overrides for wordpress variables */ --wp--preset--font-size--small: 12px; --wp--preset--font-size--medium: 14px; --wp--preset--font-size--large: 18px; --wp--preset--font-size--x-large: 24px; --wp--style--gallery-gap-default: 20px; } @media (max-width: 1023px) { :root { --brand-heading--font-size--display: 32px; --brand-heading--font-size--h1: 32px; --brand-heading--font-size--h2: 28px; --brand-heading--font-size--h3: 26px; --brand-heading--font-size--h4: 24px; --brand-heading--font-size--h5: 22px; --brand-heading--font-size--h6: 20px; --brand-heading--font-size--h7: 16px; --wp--preset--font-size--small: 12px; --wp--preset--font-size--medium: 14px; --wp--preset--font-size--large: 16px; --wp--preset--font-size--x-large: 20px; --brand-block-gap-xl: 28px; --brand-block-gap-lg: 28px; --brand-block-gap: 20px; --brand-block-gap-sm: 10px; } } :root { --container-max-width: 1320px; --padding-width: 60px; --section-gap-base: 30px; } /* INDEX CSS VARIABLES */ *:nth-child(1) { --nth-child-idx: 1; } *:nth-child(2) { --nth-child-idx: 2; } *:nth-child(3) { --nth-child-idx: 3; } *:nth-child(4) { --nth-child-idx: 4; } *:nth-child(5) { --nth-child-idx: 5; } *:nth-child(6) { --nth-child-idx: 6; } *:nth-child(7) { --nth-child-idx: 7; } *:nth-child(8) { --nth-child-idx: 8; } *:nth-child(9) { --nth-child-idx: 9; } *:nth-child(10) { --nth-child-idx: 10; } .container { box-sizing: border-box; max-width: var(--container-max-width); width: calc(100% - var(--padding-width) * 2); margin: 0 auto; } .container .container { width: unset; } .padded-container { padding: 0 var(--section-gap-base); } .section { --section-gap-multiplier: 4; --section-gap-size: calc(var(--section-gap-base) * var(--section-gap-multiplier)); /* x4 - 120px */ margin-top: var(--section-gap-size); margin-bottom: var(--section-gap-size); } .padded-content, .padded-content-lg { --section-padding-gap-multiplier: 4; --section-gap-size: calc(var(--section-gap-base) * var(--section-padding-gap-multiplier)); --padded-content-x: var(--section-gap-size); --padded-content-y: var(--section-gap-size); padding: var(--padded-content-y) var(--padded-content-x); } .padded-content-lg { --section-padding-gap-multiplier: 5; } .section--space-top-x0 { margin-top: 0; } .section--space-x0 { --section-gap-multiplier: 0; } .section--space-x1\/2 { --section-gap-multiplier: 0.5; } .section--space-x1 { --section-gap-multiplier: 1; } .section--space-x2 { --section-gap-multiplier: 2; } .section--space-x3 { --section-gap-multiplier: 3; } .section--space-x4 { --section-gap-multiplier: 4; } .section--space-x5 { --section-gap-multiplier: 5; } .section--space-x6 { --section-gap-multiplier: 6; } .section--space-x7 { --section-gap-multiplier: 7; } .section--space-x8 { --section-gap-multiplier: 8; } .section--space-x9 { --section-gap-multiplier: 9; } .section--space-x10 { --section-gap-multiplier: 10; } .section--padding-gap { --section-padding-gap-multiplier: 4; --section-padding-gap-size: calc(var(--section-gap-base) * var(--section-padding-gap-multiplier)); /* x4 - 120px */ padding-top: var(--section-padding-gap-size); padding-bottom: var(--section-padding-gap-size); } .section--padding-x0 { --section-padding-gap-multiplier: 0; } .section--padding-x1\/2 { --section-padding-gap-multiplier: 0.5; } .section--padding-x1 { --section-padding-gap-multiplier: 1; } .section--padding-x1\.5 { --section-padding-gap-multiplier: 1.5; } .section--padding-x2 { --section-padding-gap-multiplier: 2; } .section--padding-x2\.5 { --section-padding-gap-multiplier: 2.5; } .section--padding-x3 { --section-padding-gap-multiplier: 3; } .section--padding-x4 { --section-padding-gap-multiplier: 4; } .section--padding-x5 { --section-padding-gap-multiplier: 5; } .section--padding-x6 { --section-padding-gap-multiplier: 6; } .section--padding-x7 { --section-padding-gap-multiplier: 7; } .section--padding-x8 { --section-padding-gap-multiplier: 8; } .section--padding-x9 { --section-padding-gap-multiplier: 9; } .section--padding-x10 { --section-padding-gap-multiplier: 10; } .section--no-space { margin-top: 0; margin-bottom: 0; } .section--no-top-space { margin-top: 0; } .section--no-bottom-space { margin-bottom: 0; } .section:first-child { margin-top: 0; } .section + .section { margin-top: 0; } .breakout-columns { margin: 0 calc(50% - 50vw + 10px); padding: 0 var(--padding-width); } .breakout-columns .container { max-width: 100%; width: 100%; } @media (max-width: 1329px) { :root { --padding-width: 60px; } } @media (max-width: 1129px) { :root { --padding-width: 40px; } } @media (max-width: 1023px) { :root { --padding-width: 20px; --section-gap-base: 15px; } .section--padding-x1\/2 { --section-padding-gap-multiplier: 0.75; } .section--space-x1\/2 { --section-gap-multiplier: 0.75; } } /* Helper classes */ .jc-padding-width-sm { --padding-width: 5px; } .container--sm { --container-max-width: 1000px; } .p-0 { padding: 0 !important; } .px-0 { padding-left: 0 !important; padding-right: 0 !important; } .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .pt-0 { padding-top: 0 !important; } .pr-0 { padding-right: 0 !important; } .pb-0 { padding-bottom: 0 !important; } .pl-0 { padding-left: 0 !important; } .px-2 { --section-x-padding-gap-multiplier: 2; --section-x-padding-gap-size: calc(var(--section-gap-base) * var(--section-x-padding-gap-multiplier)); padding-left: var(--section-x-padding-gap-size) !important; padding-right: var(--section-x-padding-gap-size) !important; } .border-t-0 { border-top: 0 !important; } .m-0 { margin: 0 !important; } .mx-0 { margin-right: 0 !important; margin-left: 0 !important; } .my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .mt-0 { margin-top: 0 !important; } .mr-0 { margin-right: 0 !important; } .mb-0 { margin-bottom: 0 !important; } .ml-0 { margin-left: 0 !important; } .mt-4 { margin-top: 20px; } .mb-4 { margin-bottom: 20px; } .pl-content-edge { --padding-width-max: max(var(--padding-width), calc((100vw - var(--container-max-width)) / 2 - (var(--scrollbar-width, 0px) / 2))); padding-left: var(--padding-width-max) !important; } .pr-content-edge { --padding-width-max: max(var(--padding-width), calc((100vw - var(--container-max-width)) / 2 - (var(--scrollbar-width, 0px) / 2))); padding-right: var(--padding-width-max) !important; } .w-full { width: 100% !important; } @media (max-width: 781px) { .mobile--p-0 { padding: 0 !important; } .mobile--px-0 { padding-left: 0 !important; padding-right: 0 !important; } .mobile--py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .mobile--pt-0 { padding-top: 0 !important; } .mobile--pr-0 { padding-right: 0 !important; } .mobile--pb-0 { padding-bottom: 0 !important; } .mobile--pl-0 { padding-left: 0 !important; } .mobile--m-0 { margin: 0 !important; } .mobile--mx-0 { margin-right: 0 !important; margin-left: 0 !important; } .mobile--my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .mobile--mt-0 { margin-top: 0 !important; } .mobile--mr-0 { margin-right: 0 !important; } .mobile--mb-0 { margin-bottom: 0 !important; } .mobile--ml-0 { margin-left: 0 !important; } .mobile--flex-row { flex-direction: row !important; } .mobile--flex-column { flex-direction: column !important; } .mobile--flex-items-start { align-items: flex-start !important; } .mobile--flex-items-center { align-items: center !important; } .mobile--flex-items-end { align-items: flex-end !important; } .mobile--flex-justify-start { align-items: flex-start !important; } .mobile--flex-justify-center { align-items: center !important; } .mobile--flex-justify-end { align-items: flex-end !important; } .mobile--flex-justify-between { justify-content: space-between !important; } .mobile--flex-justify-around { justify-content: space-around !important; } .mobile--flex-justify-evenly { justify-content: space-evenly !important; } } @media (min-width: 782px) { .desktop--p-0 { padding: 0 !important; } .desktop--px-0 { padding-left: 0 !important; padding-right: 0 !important; } .desktop--py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .desktop--pt-0 { padding-top: 0 !important; } .desktop--pr-0 { padding-right: 0 !important; } .desktop--pb-0 { padding-bottom: 0 !important; } .desktop--pl-0 { padding-left: 0 !important; } .desktop--m-0 { margin: 0 !important; } .desktop--mx-0 { margin-right: 0 !important; margin-left: 0 !important; } .desktop--my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .desktop--mt-0 { margin-top: 0 !important; } .desktop--mr-0 { margin-right: 0 !important; } .desktop--mb-0 { margin-bottom: 0 !important; } .desktop--ml-0 { margin-left: 0 !important; } } @media (max-width: 768px) { .mb-sm-10 { margin-bottom: 10px; } } /* Layout helpers for columns */ .has-background .wp-block-columns:last-child { margin-bottom: 0; } .wp-block-columns.columns--no-gap { gap: 0; } .wp-block-columns.columns--even-height { align-items: stretch !important; } .wp-block-columns.columns--even-height .wp-block-column > .wp-block-cover { height: 100%; } .jc-img-row { --jc-img-row-height: 360px; min-height: var(--jc-img-row-height); } .jc-img-row--lg { --jc-img-row-height: 700px; } @media (max-width: 781px) { .padded-content { /*--padded-content-y: 130px;*/ } .jc-img-row { --jc-img-row-height: 200px; } .jc-img-row--lg { --jc-img-row-height: 320px; } } @media (max-width: 767px) { .mobile-remove-break br { display: none; } } .no-scrollbar { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .no-scrollbar::-webkit-scrollbar { display: none; } /* Draggable Scrollbar */ @media (hover: hover) { .desktop-scrollbar { scrollbar-width: thin; scrollbar-color: rgba(var(--brand-color-black-rgb), 0.15) transparent; } .desktop-scrollbar::-webkit-scrollbar { height: 4px; } .desktop-scrollbar::-webkit-scrollbar-track { background: transparent; } .desktop-scrollbar::-webkit-scrollbar-thumb { background: rgba(var(--brand-color-black-rgb), 0.15); border-radius: 2px; } } .draggable-content__container.desktop-scrollbar { --scrollbar-allowance: 15px; padding-bottom: var(--scrollbar-allowance); margin-bottom: calc(var(--loading-shift) - var(--scrollbar-allowance)); } .sr-only { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .section--has-draggable.has-background { padding-left: 0; padding-right: 0; } /* ======================================*/ /* Typography /* ======================================*/ :root { /* General font styling */ font-family: var(--brand-body-text--font-family, sans-serif); font-optical-sizing: auto; letter-spacing: var(--brand-body-text--letter-spacing); line-height: var(--brand-body-text--line-height); font-weight: var(--brand-body-text--font-weight); font-size: var(--brand-body-text--font-size-4); color: var(--brand-color-black-800); } a { color: var(--brand-color-black-800); } p:first-child, ul:first-child, ol:first-child { margin-top: 0; } p:last-child, p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; } h1, .heading--h1, h2, .heading--h2, h3, .heading--h3, h4, .heading--h4, h5, .heading--h5, h6, .heading--h6, .heading--h7 { font-family: var(--brand-heading--font-family, sans-serif); font-weight: var(--brand-heading--font-weight); font-feature-settings: 'liga' off; line-height: var(--brand-heading--line-height); letter-spacing: var(--brand-heading--letter-spacing); color: var(--brand-color-black); } h1, h2, h3, h4, h5, h6 { margin-block-start: var(--brand-heading--margin-top); margin-block-end: var(--brand-heading--margin-bottom); } h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child { margin-block-end: 0; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; text-decoration: none; } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { text-decoration: underline; } :root :where(.wp-block-cover h1:not(.has-text-color)), :root :where(.wp-block-cover h2:not(.has-text-color)), :root :where(.wp-block-cover h3:not(.has-text-color)), :root :where(.wp-block-cover h4:not(.has-text-color)), :root :where(.wp-block-cover h5:not(.has-text-color)), :root :where(.wp-block-cover h6:not(.has-text-color)), :root :where(.has-text-color h1:not(.has-text-color)), :root :where(.has-text-color h2:not(.has-text-color)), :root :where(.has-text-color h3:not(.has-text-color)), :root :where(.has-text-color h4:not(.has-text-color)), :root :where(.has-text-color h5:not(.has-text-color)), :root :where(.has-text-color h6:not(.has-text-color)) { color: inherit; } h1, .heading--h1 { --brand-heading--line-height: 1.28; font-size: var(--brand-heading--font-size--h1); --wp--preset--font-size--small: var(--brand-heading--font-size--h4); --wp--preset--font-size--medium: var(--brand-heading--font-size--h3); --wp--preset--font-size--large: var(--brand-heading--font-size--h2); --wp--preset--font-size--x-large: var(--brand-heading--font-size--h1); } h2, .heading--h2 { --brand-heading--line-height: 1.28; font-size: var(--brand-heading--font-size--h2); --wp--preset--font-size--small: var(--brand-heading--font-size--h5); --wp--preset--font-size--medium: var(--brand-heading--font-size--h4); --wp--preset--font-size--large: var(--brand-heading--font-size--h3); --wp--preset--font-size--x-large: var(--brand-heading--font-size--h2); } h3, .heading--h3 { --brand-heading--line-height: 1.28; font-size: var(--brand-heading--font-size--h3); --wp--preset--font-size--small: var(--brand-heading--font-size--h6); --wp--preset--font-size--medium: var(--brand-heading--font-size--h5); --wp--preset--font-size--large: var(--brand-heading--font-size--h4); --wp--preset--font-size--x-large: var(--brand-heading--font-size--h3); } h4, .heading--h4 { font-size: var(--brand-heading--font-size--h4); --wp--preset--font-size--small: var(--brand-body-text--font-size-4); --wp--preset--font-size--medium: var(--brand-heading--font-size--h6); --wp--preset--font-size--large: var(--brand-heading--font-size--h5); --wp--preset--font-size--x-large: var(--brand-heading--font-size--h4); } h5, .heading--h5 { font-size: var(--brand-heading--font-size--h5); --wp--preset--font-size--small: var(--brand-body-text--font-size-5); --wp--preset--font-size--medium: var(--brand-body-text--font-size-4); --wp--preset--font-size--large: var(--brand-heading--font-size--h6); --wp--preset--font-size--x-large: var(--brand-heading--font-size--h5); } h6, .heading--h6 { font-size: var(--brand-heading--font-size--h6); --wp--preset--font-size--small: var(--brand-body-text--font-size-6); --wp--preset--font-size--medium: var(--brand-body-text--font-size-5); --wp--preset--font-size--large: var(--brand-body-text--font-size-4); --wp--preset--font-size--x-large: var(--brand-heading--font-size--h6); } .heading--h7 { font-size: var(--brand-heading--font-size--h7); } h1 strong, .heading--h1 strong, h1 b, .heading--h1 b, h2 strong, .heading--h2 strong, h2 b, .heading--h2 b, h3 strong, .heading--h3 strong, h3 b, .heading--h3 b, h4 strong, .heading--h4 strong, h4 b, .heading--h4 b, h5 strong, .heading--h5 strong, h5 b, .heading--h5 b, h6 strong, .heading--h6 strong, h6 b, .heading--h6 b { font-weight: var(--brand-heading--font-weight); } .header--display { font-size: var(--brand-heading--font-size--display); line-height: 1.02; } .jc-heading-line-height--128 { line-height: 1.28; } .jc-heading-line-height--140 { line-height: 1.4; } .jc-heading-line-height--150 { line-height: 1.5; } .text-base--1, .text-base--2, .text-base--3, .text-base--4, .text-base--5, .text-base--6, .text-base, .text--base, .text--base-font { font-family: var(--brand-body-text--font-family); line-height: var(--brand-body-text--line-height); letter-spacing: var(--brand-body-text--letter-spacing); } .text-base--1 { font-size: var(--brand-body-text--font-size-1); } .text-base--2 { font-size: var(--brand-body-text--font-size-2); } .text-base--3 { font-size: var(--brand-body-text--font-size-3); } .text-base--4 { font-size: var(--brand-body-text--font-size-4); } .text-base--5 { font-size: var(--brand-body-text--font-size-5); } .text-base--6 { font-size: var(--brand-body-text--font-size-6); } .text-base, .text--base { font-size: var(--brand-body-text--font-size-4); } .text--caps12 { font-weight: bold; font-size: 12px; line-height: 1.58; letter-spacing: 0.04em; text-transform: uppercase; } .text--intro, .subtitle--1, .subtitle--2, .subtitle--3, .subtitle--4 { font-family: var(--brand-subtitle--font-family); font-weight: var(--brand-subtitle--font-weight); line-height: var(--brand-subtitle--line-height); text-transform: var(--brand-subtitle--text-transform); letter-spacing: var(--brand-subtitle--letter-spacing); } .subtitle--1{ font-size: var(--brand-subtitle--font-size-1); } .subtitle--2, .text--intro { font-size: var(--brand-subtitle--font-size-2); } .subtitle--3 { font-size: var(--brand-subtitle--font-size-3); } .subtitle--4 { font-size: var(--brand-subtitle--font-size-4); } .overline--1, .overline--2 { font-family: var(--brand-overline--font-family); font-weight: var(--brand-overline--font-weight); line-height: var(--brand-overline--line-height); text-transform: var(--brand-overline--text-transform); letter-spacing: var(--brand-overline--letter-spacing); } .overline--1 { font-size: var(--brand-overline--font-size-1); } .overline--2 { font-size: var(--brand-overline--font-size-2); } .text-color--primary, .text-color--orange { color: var(--brand-color-primary); } .text-color--secondary, .text-color--yellow { color: var(--brand-color-secondary); } .text-color--tertiary, .text-color--green { color: var(--brand-color-tertiary); } .text-color--quaternary, .text-color--grey { color: var(--brand-color-quaternary); } .text-color--black { color: var(--brand-color-black); } .text-color--white { color: var(--brand-color-white); } .heading--spacing, .heading--spacing-sm { margin-bottom: var(--brand-heading--margin-bottom); } .heading--spacing { --brand-heading--margin-bottom: 60px; } .heading--spacing-sm { --brand-heading--margin-bottom: 40px; } @media (max-width: 781px) { .heading--spacing { --brand-heading--margin-bottom: 30px; } .heading--spacing-sm { --brand-heading--margin-bottom: 20px; } } /* Assumes bg colour is set in the editor */ .text--circle { border-radius: 100%; width: 2.5em; height: 2.5em; padding: 0; display: flex; align-items: center; justify-content: center; } /*@media (max-width: 1023px) {*/ /* .mobile--heading--h1,*/ /* .mobile--heading--h2,*/ /* .mobile--heading--h3,*/ /* .mobile--heading--h4,*/ /* .mobile--heading--h5,*/ /* .mobile--heading--h6,*/ /* .mobile--heading--h7 {*/ /* --brand-heading--font-size--display: 54px;*/ /* --brand-heading--font-size--h1: 54px;*/ /* --brand-heading--font-size--h2: 48px;*/ /* --brand-heading--font-size--h3: 40px;*/ /* --brand-heading--font-size--h4: 32px;*/ /* --brand-heading--font-size--h5: 24px;*/ /* --brand-heading--font-size--h6: 20px;*/ /* --brand-heading--font-size--h7: 16px;*/ /* }*/ /* .mobile--heading--h1 { font-size: var(--brand-heading--font-size--h1); }*/ /* .mobile--heading--h2 { font-size: var(--brand-heading--font-size--h2); }*/ /* .mobile--heading--h3 { font-size: var(--brand-heading--font-size--h3); }*/ /* .mobile--heading--h4 { font-size: var(--brand-heading--font-size--h4); }*/ /* .mobile--heading--h5 { font-size: var(--brand-heading--font-size--h5); }*/ /* .mobile--heading--h6 { font-size: var(--brand-heading--font-size--h6); }*/ /* .mobile--heading--h7 { font-size: var(--brand-heading--font-size--h7); }*/ /* .mobile--text-base--1,*/ /* .mobile--text-base--2,*/ /* .mobile--text-base--3,*/ /* .mobile--text-base--4,*/ /* .mobile--text-base--5,*/ /* .mobile--text-base--6 {*/ /* --brand-body-text--font-size-1: 24px;*/ /* --brand-body-text--font-size-2: 20px;*/ /* --brand-body-text--font-size-3: 18px;*/ /* --brand-body-text--font-size-4: 16px;*/ /* --brand-body-text--font-size-5: 14px;*/ /* --brand-body-text--font-size-6: 12px;*/ /* }*/ /* .mobile--text-base--1 { font-size: var(--brand-body-text--font-size-1); }*/ /* .mobile--text-base--2 { font-size: var(--brand-body-text--font-size-2); }*/ /* .mobile--text-base--3 { font-size: var(--brand-body-text--font-size-3); }*/ /* .mobile--text-base--4 { font-size: var(--brand-body-text--font-size-4); }*/ /* .mobile--text-base--5 { font-size: var(--brand-body-text--font-size-5); }*/ /* .mobile--text-base--6 { font-size: var(--brand-body-text--font-size-6); }*/ /*}*/ /* /Typography ======================================*/ /* ======================================*/ /* Grid system /* ======================================*/ .grid { display: grid; --grid-size: 12; --grid-column-gap: 24px; grid-template-columns: repeat(var(--grid-size), 1fr); grid-column-gap: var(--grid-column-gap); } .grid--1col { --grid-size: 1; } .grid--2col { --grid-size: 2; } .grid--3col { --grid-size: 3; } .grid--4col { --grid-size: 4; } .grid--5col { --grid-size: 5; } .grid--6col { --grid-size: 6; } .grid--7col { --grid-size: 7; } .grid--8col { --grid-size: 8; } .grid--9col { --grid-size: 9; } .grid--10col { --grid-size: 10; } .grid--11col { --grid-size: 11; } /* ==== FOR DEBUG ONLY ==== .grid__col { min-height: 50px; background-color: rgb(0, 191, 255, 0.5); } */ .grid__col--vcentered { align-self: center; } .grid__col--span2 { grid-column-end: span 2; } .grid__col--span3 { grid-column-end: span 3; } .grid__col--span4 { grid-column-end: span 4; } .grid__col--span5 { grid-column-end: span 5; } .grid__col--span6 { grid-column-end: span 6; } .grid__col--span7 { grid-column-end: span 7; } .grid__col--span8 { grid-column-end: span 8; } .grid__col--span9 { grid-column-end: span 9; } .grid__col--span10 { grid-column-end: span 10; } .grid__col--span11 { grid-column-end: span 11; } .grid__col--span12 { grid-column-end: span 12; } .grid__col--offset1 { grid-column-start: 1; } .grid__col--offset2 { grid-column-start: 2; } .grid__col--offset3 { grid-column-start: 3; } .grid__col--offset4 { grid-column-start: 4; } .grid__col--offset5 { grid-column-start: 5; } .grid__col--offset6 { grid-column-start: 6; } .grid__col--offset7 { grid-column-start: 7; } .grid__col--offset8 { grid-column-start: 8; } .grid__col--offset9 { grid-column-start: 9; } .grid__col--offset10 { grid-column-start: 10; } .grid__col--offset11 { grid-column-start: 11; } .grid__col--offset12 { grid-column-start: 12; } @media (max-width: 767px) { .grid--1col, .grid--2col, .grid--3col, .grid--4col, .grid--5col, .grid--6col, .grid--7col, .grid--8col, .grid--9col, .grid--10col, .grid--11col, .grid--12col { --grid-size: 12; } .grid__col, .grid__col--span2, .grid__col--span3, .grid__col--span4, .grid__col--span5, .grid__col--span6, .grid__col--span7, .grid__col--span8, .grid__col--span9, .grid__col--span10, .grid__col--span11, .grid__col--span12 { grid-column-end: span var(--grid-size); } .grid__col--mobile-2 { grid-column-end: span 2; } .grid__col--mobile-span3 { grid-column-end: span 3; } .grid__col--mobile-span4 { grid-column-end: span 4; } .grid__col--mobile-span5 { grid-column-end: span 5; } .grid__col--mobile-span6 { grid-column-end: span 6; } .grid__col--mobile-span7 { grid-column-end: span 7; } .grid__col--mobile-span8 { grid-column-end: span 8; } .grid__col--mobile-span9 { grid-column-end: span 9; } .grid__col--mobile-span10 { grid-column-end: span 10; } .grid__col--mobile-span11 { grid-column-end: span 11; } .grid__col--mobile-span12 { grid-column-end: span 12; } .grid__col--mobile-offset1 { grid-column-start: 1; } .grid__col--mobile-offset2 { grid-column-start: 2; } .grid__col--mobile-offset3 { grid-column-start: 3; } .grid__col--mobile-offset4 { grid-column-start: 4; } .grid__col--mobile-offset5 { grid-column-start: 5; } .grid__col--mobile-offset6 { grid-column-start: 6; } .grid__col--mobile-offset7 { grid-column-start: 7; } .grid__col--mobile-offset8 { grid-column-start: 8; } .grid__col--mobile-offset9 { grid-column-start: 9; } .grid__col--mobile-offset10 { grid-column-start: 10; } .grid__col--mobile-offset11 { grid-column-start: 11; } .grid__col--mobile-offset12 { grid-column-start: 12; } } /* Flex grid */ .flex-grid { display: flex; flex-wrap: wrap; margin: -20px; align-items: flex-start; box-sizing: border-box; } .flex-grid--left { justify-content: flex-start; } .flex-grid--center { justify-content: center; } .flex-grid--right { justify-content: flex-end; } .flex-grid--no-wrap { flex-wrap: nowrap; justify-content: flex-start; overflow: auto; } .flex-grid--no-wrap.draggable-content__items { overflow: visible; } [class*="flex-grid__col"] { padding: 10px; flex: 0 1 100%; box-sizing: border-box; } .flex-grid__col--1\/1 { flex-basis: 100%; } .flex-grid__col--1\/2 { flex-basis: 50%; } .flex-grid__col--1\/3 { flex-basis: 33.333%; } .flex-grid__col--2\/3 { flex-basis: 66.666%; } .flex-grid__col--1\/4 { flex-basis: 25%; } .flex-grid__col--2\/4 { flex-basis: 50%; } .flex-grid__col--3\/4 { flex-basis: 75%; } .flex-grid__col--1\/5 { flex-basis: 20%; } .flex-grid__col--2\/5 { flex-basis: 40%; } .flex-grid__col--3\/5 { flex-basis: 60%; } .flex-grid__col--4\/5 { flex-basis: 80%; } /* No wrap grid */ .flex-grid--no-wrap .flex-grid__col--1\/1 { min-width: 100%; } .flex-grid--no-wrap .flex-grid__col--1\/2 { min-width: 50%; } .flex-grid--no-wrap .flex-grid__col--1\/3 { min-width: 33.333%; } .flex-grid--no-wrap .flex-grid__col--2\/3 { min-width: 66.666%; } .flex-grid--no-wrap .flex-grid__col--1\/4 { min-width: 25%; } .flex-grid--no-wrap .flex-grid__col--2\/4 { min-width: 50%; } .flex-grid--no-wrap .flex-grid__col--3\/4 { min-width: 75%; } .flex-grid--no-wrap .flex-grid__col--1\/5 { min-width: 20%; } .flex-grid--no-wrap .flex-grid__col--2\/5 { min-width: 40%; } .flex-grid--no-wrap .flex-grid__col--3\/5 { min-width: 60%; } .flex-grid--no-wrap .flex-grid__col--4\/5 { min-width: 80%; } /* Adjust no wrap columns to show some of offscreen */ .flex-grid--no-wrap.flex-grid--adjust-widths .flex-grid__col--1\/1 { min-width: 66%; } .flex-grid--no-wrap.flex-grid--adjust-widths .flex-grid__col--1\/2 { min-width: 40%; } @media (min-width: 768px) { .flex-grid__col--md-1\/1 { flex-basis: 100%; } .flex-grid__col--md-1\/2 { flex-basis: 50%; } .flex-grid__col--md-1\/3 { flex-basis: 33.333%; } .flex-grid__col--md-2\/3 { flex-basis: 33.333%; } .flex-grid__col--md-1\/4 { flex-basis: 25%; } .flex-grid__col--md-2\/4 { flex-basis: 50%; } .flex-grid__col--md-3\/4 { flex-basis: 75%; } .flex-grid__col--md-1\/5 { flex-basis: 20%; } .flex-grid__col--md-2\/5 { flex-basis: 40%; } .flex-grid__col--md-3\/5 { flex-basis: 60%; } .flex-grid__col--md-4\/5 { flex-basis: 80%; } /* No wrap grid */ .flex-grid--no-wrap .flex-grid__col--md-1\/1 { min-width: 100%; } .flex-grid--no-wrap .flex-grid__col--md-1\/2 { min-width: 50%; } .flex-grid--no-wrap .flex-grid__col--md-1\/3 { min-width: 33.333%; } .flex-grid--no-wrap .flex-grid__col--md-2\/3 { min-width: 66.666%; } .flex-grid--no-wrap .flex-grid__col--md-1\/4 { min-width: 25%; } .flex-grid--no-wrap .flex-grid__col--md-2\/4 { min-width: 50%; } .flex-grid--no-wrap .flex-grid__col--md-3\/4 { min-width: 75%; } .flex-grid--no-wrap .flex-grid__col--md-1\/5 { min-width: 20%; } .flex-grid--no-wrap .flex-grid__col--md-2\/5 { min-width: 40%; } .flex-grid--no-wrap .flex-grid__col--md-3\/5 { min-width: 60%; } .flex-grid--no-wrap .flex-grid__col--md-4\/5 { min-width: 80%; } /* Adjust no wrap columns to show some of offscreen */ .flex-grid--no-wrap.flex-grid--adjust-widths .flex-grid__col--md-1\/1 { min-width: 66%; } .flex-grid--no-wrap.flex-grid--adjust-widths .flex-grid__col--md-1\/2 { min-width: 40%; } .flex-grid--no-wrap.flex-grid--adjust-widths .flex-grid__col--md-1\/3 { min-width: 28.5%; } .flex-grid--no-wrap.flex-grid--adjust-widths .flex-grid__col--md-1\/4 { min-width: 22.25%; } } @media (min-width: 1130px) { .flex-grid--no-wrap.flex-grid--adjust-widths { --col-width-adjust: 1; } .flex-grid__col--lg-1\/1 { flex-basis: 100%; } .flex-grid__col--lg-1\/2 { flex-basis: 50%; } .flex-grid__col--lg-1\/3 { flex-basis: 33.333%; } .flex-grid__col--lg-2\/3 { flex-basis: 33.333%; } .flex-grid__col--lg-1\/4 { flex-basis: 25%; } .flex-grid__col--lg-2\/4 { flex-basis: 50%; } .flex-grid__col--lg-3\/4 { flex-basis: 75%; } .flex-grid__col--lg-1\/5 { flex-basis: 20%; } .flex-grid__col--lg-2\/5 { flex-basis: 40%; } .flex-grid__col--lg-3\/5 { flex-basis: 60%; } .flex-grid__col--lg-4\/5 { flex-basis: 80%; } /* No wrap grid */ .flex-grid--no-wrap .flex-grid__col--lg-1\/1 { min-width: 100%; } .flex-grid--no-wrap .flex-grid__col--lg-1\/2 { min-width: 50%; } .flex-grid--no-wrap .flex-grid__col--lg-1\/3 { min-width: 33.333%; } .flex-grid--no-wrap .flex-grid__col--lg-2\/3 { min-width: 33.333%; } .flex-grid--no-wrap .flex-grid__col--lg-1\/4 { min-width: 25%; } .flex-grid--no-wrap .flex-grid__col--lg-2\/4 { min-width: 50%; } .flex-grid--no-wrap .flex-grid__col--lg-3\/4 { min-width: 75%; } .flex-grid--no-wrap .flex-grid__col--lg-1\/5 { min-width: 20%; } .flex-grid--no-wrap .flex-grid__col--lg-2\/5 { min-width: 40%; } .flex-grid--no-wrap .flex-grid__col--lg-3\/5 { min-width: 60%; } .flex-grid--no-wrap .flex-grid__col--lg-4\/5 { min-width: 80%; } /* Adjust no wrap columns to show some of offscreen */ .flex-grid--no-wrap.flex-grid--adjust-widths .flex-grid__col--lg-1\/1 { min-width: 100%; } .flex-grid--no-wrap.flex-grid--adjust-widths .flex-grid__col--lg-1\/2 { min-width: 50%; } .flex-grid--no-wrap.flex-grid--adjust-widths .flex-grid__col--lg-1\/3 { min-width: 33.333%; } .flex-grid--no-wrap.flex-grid--adjust-widths .flex-grid__col--lg-1\/4 { min-width: 25%; } .flex-grid--no-wrap.flex-grid--adjust-widths .flex-grid__col--lg-1\/5 { min-width: 20%; } } /* WP Columns helpers */ .wp-block-columns.is-layout-flex.flex-items-center { align-items:center !important; } .jc-bordered-column { border: var(--brand-form--field--border); } .jc-rounded-column { border-radius: var(--brand-form--field--border-radius); } .jc-padded-column { padding: 28px; } @media (max-width: 1024px) { .wp-block-columns.tablet--flex-column { flex-wrap: wrap !important; flex-direction: column !important; } } @media (max-width: 781px) { .wp-block-columns.mobile--flex-column { flex-wrap: wrap !important; flex-direction: column !important; } } .wp-block-columns.columns--has-custom-widths { flex-wrap: wrap !important; } /* Custom column widths */ .wp-block-columns.columns--has-custom-widths > .wp-block-column[class*="flex-grid__col--"] { flex-basis: calc(var(--custom-col-width, auto) - var(--brand-block-gap)); flex-grow: 0; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--1\/1 { --custom-col-width: 100%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--1\/2 { --custom-col-width: 50%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--1\/3 { --custom-col-width: 33.333%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--2\/3 { --custom-col-width: 66.666%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--1\/4 { --custom-col-width: 25%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--2\/4 { --custom-col-width: 50%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--3\/4 { --custom-col-width: 75%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--1\/5 { --custom-col-width: 20%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--2\/5 { --custom-col-width: 40%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--3\/5 { --custom-col-width: 60%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--4\/5 { --custom-col-width: 80%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--1\/12 { --custom-col-width: 8.333%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--2\/12 { --custom-col-width: 16.666%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--3\/12 { --custom-col-width: 25%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--4\/12 { --custom-col-width: 33.333%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--5\/12 { --custom-col-width: 41.666%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--6\/12 { --custom-col-width: 50%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--7\/12 { --custom-col-width: 58.333%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--8\/12 { --custom-col-width: 66.666%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--9\/12 { --custom-col-width: 75%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--10\/12 { --custom-col-width: 83.333%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--11\/12 { --custom-col-width: 91.666%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--auto { --custom-col-width: auto; } @media (min-width: 768px) { .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--md-1\/1 { --custom-col-width: 100%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--md-1\/2 { --custom-col-width: 50%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--md-1\/3 { --custom-col-width: 33.333%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--md-2\/3 { --custom-col-width: 66.666%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--md-1\/4 { --custom-col-width: 25%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--md-2\/4 { --custom-col-width: 50%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--md-3\/4 { --custom-col-width: 75%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--md-1\/5 { --custom-col-width: 20%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--md-2\/5 { --custom-col-width: 40%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--md-3\/5 { --custom-col-width: 60%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--md-4\/5 { --custom-col-width: 80%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--md-1\/12 { --custom-col-width: 8.333%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--md-2\/12 { --custom-col-width: 16.666%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--md-3\/12 { --custom-col-width: 25%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--md-4\/12 { --custom-col-width: 33.333%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--md-5\/12 { --custom-col-width: 41.666%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--md-6\/12 { --custom-col-width: 50%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--md-7\/12 { --custom-col-width: 58.333%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--md-8\/12 { --custom-col-width: 66.666%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--md-9\/12 { --custom-col-width: 75%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--md-10\/12 { --custom-col-width: 83.333%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--md-11\/12 { --custom-col-width: 91.666%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--md-auto { --custom-col-width: auto; } } @media (min-width: 1130px) { .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--lg-1\/1 { --custom-col-width: 100%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--lg-1\/2 { --custom-col-width: 50%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--lg-1\/3 { --custom-col-width: 33.333%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--lg-2\/3 { --custom-col-width: 66.666%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--lg-1\/4 { --custom-col-width: 25%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--lg-2\/4 { --custom-col-width: 50%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--lg-3\/4 { --custom-col-width: 75%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--lg-1\/5 { --custom-col-width: 20%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--lg-2\/5 { --custom-col-width: 40%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--lg-3\/5 { --custom-col-width: 60%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--lg-4\/5 { --custom-col-width: 80%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--lg-1\/12 { --custom-col-width: 8.333%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--lg-2\/12 { --custom-col-width: 16.666%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--lg-3\/12 { --custom-col-width: 25%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--lg-4\/12 { --custom-col-width: 33.333%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--lg-5\/12 { --custom-col-width: 41.666%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--lg-6\/12 { --custom-col-width: 50%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--lg-7\/12 { --custom-col-width: 58.333%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--lg-8\/12 { --custom-col-width: 66.666%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--lg-9\/12 { --custom-col-width: 75%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--lg-10\/12 { --custom-col-width: 83.333%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--lg-11\/12 { --custom-col-width: 91.666%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--lg-auto { --custom-col-width: auto; } } @media (min-width: 1300px) { .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--xl-1\/1 { --custom-col-width: 100%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--xl-1\/2 { --custom-col-width: 50%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--xl-1\/3 { --custom-col-width: 33.333%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--xl-2\/3 { --custom-col-width: 66.666%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--xl-1\/4 { --custom-col-width: 25%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--xl-2\/4 { --custom-col-width: 50%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--xl-3\/4 { --custom-col-width: 75%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--xl-1\/5 { --custom-col-width: 20%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--xl-2\/5 { --custom-col-width: 40%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--xl-3\/5 { --custom-col-width: 60%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--xl-4\/5 { --custom-col-width: 80%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--xl-1\/12 { --custom-col-width: 8.333%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--xl-2\/12 { --custom-col-width: 16.666%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--xl-3\/12 { --custom-col-width: 25%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--xl-4\/12 { --custom-col-width: 33.333%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--xl-5\/12 { --custom-col-width: 41.666%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--xl-6\/12 { --custom-col-width: 50%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--xl-7\/12 { --custom-col-width: 58.333%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--xl-8\/12 { --custom-col-width: 66.666%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--xl-9\/12 { --custom-col-width: 75%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--xl-10\/12 { --custom-col-width: 83.333%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--xl-11\/12 { --custom-col-width: 91.666%; } .wp-block-columns.columns--has-custom-widths > .wp-block-column.flex-grid__col--xl-auto { --custom-col-width: auto; } } /* /Grid system ======================================*/ .anim--fade-up, .anim--fade-right, .anim--fade-left { opacity: 0; transition: opacity var(--anim--opacity--duration) var(--anim--opacity--timing-function), transform var(--anim--transform--duration) var(--anim--transform--timing-function); transition-delay: var(--anim-delay); } .anim--fade-up { transform: translateY(var(--anim-v-shift)); } body.wp-admin .anim--fade-up, .visible-tag--visible .anim--fade-up, .visible-tag--visible.anim--fade-up, .acf-block-preview body.wp-admin .anim--fade-up, .acf-block-preview .anim--fade-up, .acf-block-preview .anim--fade-up { opacity: 1; transform: translateY(0); } .anim--fade-right { transform: translateX(calc(-1 * var(--anim-h-shift))); } body.wp-admin .anim--fade-right, .visible-tag--visible .anim--fade-right, .visible-tag--visible.anim--fade-right, .acf-block-preview body.wp-admin .anim--fade-right, .acf-block-preview .anim--fade-right, .acf-block-preview .anim--fade-right { opacity: 1; transform: translateX(0); } .anim--fade-left { transform: translateX(var(--anim-h-shift)); } body.wp-admin .anim--fade-left, .visible-tag--visible .anim--fade-left, .visible-tag--visible.anim--fade-left, .acf-block-preview body.wp-admin .anim--fade-left, .acf-block-preview .anim--fade-left, .acf-block-preview .anim--fade-left { opacity: 1; transform: translateX(0); } .anim--index-delay { transition-delay: calc(var(--anim-delay) * (var(--nth-child-idx) - 1)); } .slider { position: relative; } .slider__items, .slider__item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .slider--relative .slider__items { display: flex; position: relative; height: auto; } .slider__item { opacity: 0; pointer-events: none; transition: opacity 300ms ease; } .slider--relative .slider__item { flex-shrink: 0; margin-right: -100%; position: relative; height: auto; } .slider[data-slide="1"] .slider__item:nth-child(1), .slider[data-slide="2"] .slider__item:nth-child(2), .slider[data-slide="3"] .slider__item:nth-child(3), .slider[data-slide="4"] .slider__item:nth-child(4), .slider[data-slide="5"] .slider__item:nth-child(5), .slider[data-slide="6"] .slider__item:nth-child(6), .slider[data-slide="7"] .slider__item:nth-child(7), .slider[data-slide="8"] .slider__item:nth-child(8), .slider[data-slide="9"] .slider__item:nth-child(9), .slider[data-slide="10"] .slider__item:nth-child(10) { opacity: 1; pointer-events: initial; } .slider__nav { display: flex; align-items: center; } .slider__nav-item { --width: 20px; --height: 18px; --background-color: transparent; --shape-border-colour: rgba(var(--brand-color-white-rgb), 0.6); --shape-border-width: 2px; --shape-color: transparent; --active-width: 20px; --active-height: 18px; --active-background-color: transparent; --active-shape-border-colour: var(--brand-color-tertiary); --active-shape-border-width: 2px; --active-shape-color: var(--brand-color-tertiary); width: var(--width); height: var(--height); background-color: var(--background-color); border: 0; padding: 0; cursor: pointer; } .slider__nav--dark .slider__nav-item { --shape-border-colour: rgba(var(--brand-color-black-rgb), 0.6); --active-background-color: transparent; --active-shape-border-colour: var(--brand-color-primary); --active-shape-color: var(--brand-color-primary); } .slider__nav-item svg { width: 100%; height: 100%; } .slider__nav-item svg path { width: var(--width); height: var(--height); fill: var(--shape-color); stroke: var(--shape-border-colour); stroke-width: var(--shape-border-width); } .slider__nav-item:not(:last-child) { margin-right: 15px; } .slider[data-slide="1"] .slider__nav-item:nth-child(1), .slider[data-slide="2"] .slider__nav-item:nth-child(2), .slider[data-slide="3"] .slider__nav-item:nth-child(3), .slider[data-slide="4"] .slider__nav-item:nth-child(4), .slider[data-slide="5"] .slider__nav-item:nth-child(5), .slider[data-slide="6"] .slider__nav-item:nth-child(6), .slider[data-slide="7"] .slider__nav-item:nth-child(7), .slider[data-slide="8"] .slider__nav-item:nth-child(8), .slider[data-slide="9"] .slider__nav-item:nth-child(9), .slider[data-slide="10"] .slider__nav-item:nth-child(10) { width: var(--active-width); height: var(--active-height); background-color: var(--active-background-color); color: var(--brand-color-primary); } .slider[data-slide="1"] .slider__nav-item:nth-child(1) svg path, .slider[data-slide="2"] .slider__nav-item:nth-child(2) svg path, .slider[data-slide="3"] .slider__nav-item:nth-child(3) svg path, .slider[data-slide="4"] .slider__nav-item:nth-child(4) svg path, .slider[data-slide="5"] .slider__nav-item:nth-child(5) svg path, .slider[data-slide="6"] .slider__nav-item:nth-child(6) svg path, .slider[data-slide="7"] .slider__nav-item:nth-child(7) svg path, .slider[data-slide="8"] .slider__nav-item:nth-child(8) svg path, .slider[data-slide="9"] .slider__nav-item:nth-child(9) svg path, .slider[data-slide="10"] .slider__nav-item:nth-child(10) svg path { width: var(--active-width); height: var(--active-height); fill: var(--active-shape-color); stroke: var(--active-shape-border-colour); stroke-width: var(--active-shape-border-width); } .draggable-content__container { display: flex; position: relative; overflow-x: scroll; overflow-y: hidden; --item-gap: 20px; } .draggable-content__items, .draggable-content__items.flex-grid { --item-width: 25.81vw; --item-max-width: 413px; --item-min-width: 280px; --padding-width-max: var(--padding-width); display: flex; flex-wrap: nowrap; height: 100%; padding: 0 var(--item-gap) 0 max(var(--padding-width-max), 50vw - ((var(--items-count) * clamp(var(--item-min-width), var(--item-width), var(--item-max-width)) + (var(--items-count) - 1) * var(--item-gap)) / 2)); flex-shrink: 0; } .draggable-content--align-left-content .draggable-content__items, .draggable-content--align-left-content .draggable-content__items.flex-grid { --padding-width-max: max(var(--padding-width), calc((100vw - var(--container-max-width)) / 2 - (var(--scrollbar-width, 0px) / 2))); padding-left: var(--padding-width-max); } .draggable-content--align-left-edge .draggable-content__items, .draggable-content--align-left-edge .draggable-content__items.flex-grid { padding-left: var(--padding-width); } .draggable-content__item { width: var(--item-width); max-width: var(--item-max-width); min-width: var(--item-min-width); flex-shrink: 0; } .draggable-content__item:not(:last-child) { margin-right: var(--item-gap); } @media (max-width: 1023px) { .draggable-content__items { padding: 0 0 0 var(--padding-width); } .draggable-content__items::after { content: ''; display: block; flex-shrink: 0; width: var(--padding-width); } } /* Desktop only: switch to grid */ @media (min-width: 1024px) { .draggable-content--desktop-stacked { --columns: 3; } .draggable-content--desktop-stacked .draggable-content__container { overflow-x: unset; overflow-y: unset; max-width: var(--container-max-width); width: calc(100% - var(--padding-width) * 2); margin: 0 auto; height: unset; } .container .draggable-content__container { width: 100%; } .draggable-content--desktop-stacked .draggable-content__items, .draggable-content--desktop-stacked .draggable-content__items.flex-grid { display: grid; grid-template-columns: repeat(var(--columns), 1fr); grid-auto-rows: auto; gap: var(--item-gap); flex-wrap: unset; height: unset; padding: 0; width: 100%; } .draggable-content--desktop-stacked .draggable-content__item { width: unset; max-width: unset; min-width: unset; } .draggable-content--desktop-stacked .draggable-content__item:not(:last-child) { margin-right: 0; } } /* GForms ================================== */ .theme-jetcharge .gform_wrapper.gravity-theme .gfield_label { font-weight: var(--brand-form--field--label-font-weight); } .theme-jetcharge .gfield.gfield--type-name.field_sublabel_above .gform-field-label.gform-field-label--type-sub { font-weight: var(--brand-form--field--label-font-weight); } .gform_footer__comment { margin-left: 24px; display: inline-block; color: var(--brand-color-error); font-size: 14px; line-height: 21px; } .gform--no-footer .gform_footer { display: none; } .gform_wrapper.gravity-theme .gchoice { margin-bottom: 10px; } .gform_footer { position: relative; z-index: 1; } /* Form footer with back / prev buttons */ .gform_page_footer { display: flex; justify-content: space-between; align-items: center; } .theme-jetcharge .gform_wrapper.gravity-theme .gform_page_footer .gform_previous_button { order: 1; margin-right: auto; margin-bottom: 0; } .theme-jetcharge .gform_wrapper.gravity-theme .gform_page_footer .gform_next_button, .theme-jetcharge .gform_wrapper.gravity-theme .gform_page_footer .gform_button[type="submit"] { order: 3; margin-left: auto; margin-bottom: 0; } .gform_page_footer .gform_ajax_spinner { order: 2; margin-left: auto; } .gform_page_footer .gform_previous_button ~ .gform_ajax_spinner { margin: 0 auto; } .theme-jetcharge .gform_wrapper.gravity-theme .gsection .gsection_title { margin-bottom: 0; font-family: var(--brand-heading--font-family); font-weight: var(--brand-heading--font-weight); letter-spacing: var(--brand-heading--letter-spacing); line-height: var(--brand-heading--line-height); font-size: var(--brand-subtitle--font-size-1); color: var(--brand-color-black); } /* Steps */ .theme-jetcharge .gform_wrapper.gravity-theme .gf_page_steps, .theme-jetcharge .gform_wrapper.gravity-theme .gsection { border-color: var(--brand-form--field--border-color); } .theme-jetcharge .gform_wrapper.gravity-theme .gsection.no-border { border: 0; } .theme-jetcharge .gform_wrapper.gravity-theme .gsection.no-margin { margin: 0 !important; padding: 0 !important; } .theme-jetcharge .gform_wrapper.gravity-theme .gf_page_steps { --step-number-bg: var(--brand-color-secondary); --step-number-border: var(--brand-color-secondary); --step-number-text: var(--brand-color-black); --step-number-bg--complete: var(--brand-color-primary); --step-number-border--complete: var(--brand-color-primary); --step-number-text--complete: var(--brand-color-white); } .theme-jetcharge .gform_wrapper.gravity-theme .gf_step_number { border-color: var(--step-number-border); font-weight: 700; } .theme-jetcharge .gform_wrapper.gravity-theme .gf_step_label { font-weight: 400; } .theme-jetcharge .gform_wrapper.gravity-theme .gf_step_active .gf_step_label { font-weight: 700; } .theme-jetcharge .gform_wrapper.gravity-theme .gf_step_active .gf_step_number { background-color: var(--step-number-bg); color: var(--step-number-text); } .theme-jetcharge .gform_wrapper.gravity-theme .gf_step_completed .gf_step_label { font-weight: 400; color: var(--step-number-text--complete); /*opacity: 0.5;*/ } .theme-jetcharge .gform_wrapper.gravity-theme .gf_step_completed .gf_step_number { font-weight: 400; } .theme-jetcharge .gform_wrapper.gravity-theme .gf_step_completed .gf_step_number:before { border-color: var(--step-number-border--complete); background-color: var(--step-number-bg--complete); border-radius: 100%; width: 100%; height: 100%; } .theme-jetcharge .gform_wrapper.gravity-theme .gf_step_completed .gf_step_number:after { width: 100%; height: 100%; color: var(--step-number-text--complete); } /* Radio / Checkbox columns */ [class*="form-group--checkRadioCol--"] { --gform-radio-checkbox-gutter: 20px; } [class*="form-group--checkRadioCol--"] .gfield_checkbox, [class*="form-group--checkRadioCol--"] .gfield_radio { display: flex; flex-direction: row; flex-wrap: wrap; margin-left: calc(var(--gform-radio-checkbox-gutter) * -0.5); margin-right: calc(var(--gform-radio-checkbox-gutter) * -0.5); row-gap: var(--gform-radio-checkbox-gutter); } [class*="form-group--checkRadioCol--"] .gfield_checkbox .gchoice, [class*="form-group--checkRadioCol--"] .gfield_radio .gchoice { width: 100%; padding-left: calc(var(--gform-radio-checkbox-gutter) * 0.5) !important; padding-right: calc(var(--gform-radio-checkbox-gutter) * 0.5) !important; margin-bottom: 0 !important; } .form-group--checkRadioCol--1 .gfield_checkbox .gchoice, .form-group--checkRadioCol--1 .gfield_radio .gchoice { width: 100%; } .form-group--checkRadioCol--2 .gfield_checkbox .gchoice, .form-group--checkRadioCol--2 .gfield_radio .gchoice { width: calc(100% / 2); } .form-group--checkRadioCol--3 .gfield_checkbox .gchoice, .form-group--checkRadioCol--3 .gfield_radio .gchoice { width: calc(100% / 3); } .form-group--checkRadioCol--4 .gfield_checkbox .gchoice, .form-group--checkRadioCol--4 .gfield_radio .gchoice { width: calc(100% / 4); } .form-group--checkRadioCol--5 .gfield_checkbox .gchoice, .form-group--checkRadioCol--5 .gfield_radio .gchoice { width: calc(100% / 5); } /*@media (max-width: 991px) {*/ @media (max-width: 767px) { .form-group--checkRadioColTablet--1 .gfield_checkbox .gchoice, .form-group--checkRadioColTablet--1 .gfield_radio .gchoice { width: 100%; } .form-group--checkRadioColTablet--2 .gfield_checkbox .gchoice, .form-group--checkRadioColTablet--2 .gfield_radio .gchoice { width: calc(100% / 2); } .form-group--checkRadioColTablet--3 .gfield_checkbox .gchoice, .form-group--checkRadioColTablet--3 .gfield_radio .gchoice { width: calc(100% / 3); } } /*@media (max-width: 767px) {*/ @media (max-width: 639px) { .form-group--checkRadioColMobile--1 .gfield_checkbox .gchoice, .form-group--checkRadioColMobile--1 .gfield_radio .gchoice { width: 100%; } .form-group--checkRadioColMobile--2 .gfield_checkbox .gchoice, .form-group--checkRadioColMobile--2 .gfield_radio .gchoice { width: calc(100% / 2); } } /* Changing some layout styling for image choices */ .gform_wrapper.gravity-theme .gfield--type-choice.image-choices-field.ic-theme--simple.form-group--checkRadioStyle--boxed .gfield_radio, .gform_wrapper.gravity-theme .gfield--type-choice.image-choices-field.ic-theme--simple.form-group--checkRadioStyle--boxed .gfield_checkbox, .gform_wrapper.gravity-theme .gfield--type-choice.image-choices-field.ic-theme--float-card.form-group--checkRadioStyle--boxed .gfield_radio, .gform_wrapper.gravity-theme .gfield--type-choice.image-choices-field.ic-theme--float-card.form-group--checkRadioStyle--boxed .gfield_checkbox, .gform_wrapper.gravity-theme .gfield--type-choice.image-choices-field.ic-theme--porthole.form-group--checkRadioStyle--boxed .gfield_radio, .gform_wrapper.gravity-theme .gfield--type-choice.image-choices-field.ic-theme--porthole.form-group--checkRadioStyle--boxed .gfield_checkbox, .gform_wrapper.gravity-theme .gfield--type-choice.image-choices-field.ic-theme--circle.form-group--checkRadioStyle--boxed .gfield_radio, .gform_wrapper.gravity-theme .gfield--type-choice.image-choices-field.ic-theme--circle.form-group--checkRadioStyle--boxed .gfield_checkbox, .gform_wrapper.gravity-theme .gfield--type-choice.image-choices-field.ic-theme--polaroid .gfield_radio, .gform_wrapper.gravity-theme .gfield--type-choice.image-choices-field.ic-theme--polaroid .gfield_checkbox { align-items: stretch; } .gform_wrapper.gravity-theme .gfield--type-choice.image-choices-field.ic-theme--polaroid .image-choices-choice label, .gform_wrapper.gravity-theme .gfield--type-choice.image-choices-field.ic-theme--float-card.form-group--checkRadioStyle--boxed .image-choices-choice label, .gform_wrapper.gravity-theme .gfield--type-choice.image-choices-field.ic-theme--porthole.form-group--checkRadioStyle--boxed .image-choices-choice label, .gform_wrapper.gravity-theme .gfield--type-choice.image-choices-field.ic-theme--circle.form-group--checkRadioStyle--boxed .image-choices-choice label, .gform_wrapper.gravity-theme .gfield--type-choice.image-choices-field.ic-theme--simple.form-group--checkRadioStyle--boxed .image-choices-choice label { height: 100%; justify-content: flex-start; } /* Override some image choice defaults */ .image-choices-field { --ic-text-color: inherit; --ic-image-background-color: transparent; } /* Override default Image Choice styling */ .gform_wrapper.gravity-theme .ic-theme--polaroid .image-choices-choice-image-wrap, .gform_wrapper.gravity-theme .ic-theme--simple .image-choices-choice-image-wrap, .gform_wrapper.gravity-theme .ic-theme--simple .image-choices-choice-image-wrap:after { border-radius: var(--gform-radio-checkbox-border-radius); } .gform_wrapper.gravity-theme .ic-theme--simple .image-choices-choice-image-wrap img { border-radius: var(--gform-radio-checkbox-border-radius); } .gfield.image-choices-field .gfield_checkbox, .gfield.image-choices-field .gfield_radio, .gform_legacy_markup_wrapper .gfield.image-choices-field .gfield_checkbox, .gform_legacy_markup_wrapper .gfield.image-choices-field .gfield_radio, .gform_wrapper.gform-theme--framework .gfield--type-choice.image-choices-field .gfield_checkbox, .gform_wrapper.gform-theme--framework .gfield--type-choice.image-choices-field .gfield_radio, .gform_wrapper.gravity-theme .gfield--type-choice.image-choices-field .gfield_checkbox, .gform_wrapper.gravity-theme .gfield--type-choice.image-choices-field .gfield_radio { margin-right: calc(-1 * var(--ic-column-spacing)); width: calc(100% + var(--ic-column-spacing)); } /* Boxed style */ .jc-single-product, .form-group--checkRadioStyle--boxed { --gform-radio-checkbox-border-radius: var(--brand-form--field--border-radius); --gform-radio-checkbox-padding: 20px; --gform-radio-checkbox-extra-img-margin: 30px; --gform-radio-checkbox-border-color: var(--brand-form--field--border-color); --gform-radio-checkbox-bg-color: transparent; --gform-radio-checkbox-text-color: inherit; --gform-radio-checkbox-border-color-selected: var(--brand-color-primary); --gform-radio-checkbox-bg-color-selected: transparent; --gform-radio-checkbox-text-color-selected: inherit; } .gform_wrapper.gravity-theme .jc-single-product, .form-group--checkRadioStyle--boxed .gfield_checkbox .gchoice label, .form-group--checkRadioStyle--boxed .gfield_radio .gchoice label { padding: var(--gform-radio-checkbox-padding); border: 1px solid var(--gform-radio-checkbox-border-color); border-radius: var(--gform-radio-checkbox-border-radius); background-color: var(--gform-radio-checkbox-bg-color); color: var(--gform-radio-checkbox-text-color); transition: all 0.2s ease-out; cursor: pointer; } .form-group--checkRadioStyle--boxed .gfield_checkbox .gchoice label > div, .form-group--checkRadioStyle--boxed .gfield_radio .gchoice label > div { width: 100%; } .form-group--checkRadioStyle--boxed .gfield-choice-input.gfield-choice-input { position: absolute; visibility: hidden; display: none !important; left: -9999px; } .gform_wrapper.gravity-theme .jc-single-product.jc-single-product--selected, .form-group--checkRadioStyle--boxed .gfield-choice-input.gfield-choice-input:checked + label { border-color: var(--gform-radio-checkbox-border-color-selected); box-shadow: inset 0 0 0 2px var(--gform-radio-checkbox-border-color-selected); background-color: var(--gform-radio-checkbox-bg-color-selected); color: var(--gform-radio-checkbox-text-color-selected); } .gform_wrapper.gravity-theme .gfield.gf_list_1col .gfield_radio .gchoice label, .gform_wrapper.gravity-theme .gfield.gf_list_1col .gfield_checkbox .gchoice label, .gform_wrapper.gravity-theme .gfield.gf_list_2col .gfield_radio .gchoice label, .gform_wrapper.gravity-theme .gfield.gf_list_2col .gfield_checkbox .gchoice label, .gform_wrapper.gravity-theme .gfield.gf_list_3col .gfield_radio .gchoice label, .gform_wrapper.gravity-theme .gfield.gf_list_3col .gfield_checkbox .gchoice label, .gform_wrapper.gravity-theme .gfield.gf_list_4col .gfield_radio .gchoice label, .gform_wrapper.gravity-theme .gfield.gf_list_4col .gfield_checkbox .gchoice label, .gform_wrapper.gravity-theme .gfield.gf_list_5col .gfield_radio .gchoice label, .gform_wrapper.gravity-theme .gfield.gf_list_5col .gfield_checkbox .gchoice label, [class*="form-group--checkRadioCol"].form-group--checkRadioStyle--boxed .gfield_radio .gchoice label, [class*="form-group--checkRadioCol"].form-group--checkRadioStyle--boxed .gfield_checkbox .gchoice label { width: 100%; height: 100%; max-width: 100%; display: flex; flex-direction: column; } .form-group--checkRadioStyle--boxed.form-group--checkRadioContentAlign--left .gchoice label, .form-group--checkRadioStyle--boxed.form-group--checkRadioContentAlign--left .image-choices-choice-text { text-align: left; align-items: flex-start; } .form-group--checkRadioStyle--boxed.form-group--checkRadioContentAlign--center .gchoice label, .form-group--checkRadioStyle--boxed.form-group--checkRadioContentAlign--center .image-choices-choice-text { text-align: center; align-items: center; } .form-group--checkRadioStyle--boxed.form-group--checkRadioContentAlign--right .gchoice label, .form-group--checkRadioStyle--boxed.form-group--checkRadioContentAlign--right .image-choices-choice-text { text-align: right; align-items: flex-end; } [class*="form-group--checkRadioCol"].form-group--checkRadioStyle--boxed.form-group--checkRadioContentVerticalAlign--top .gfield_radio .gchoice label, [class*="form-group--checkRadioCol"].form-group--checkRadioStyle--boxed.form-group--checkRadioContentVerticalAlign--top .gfield_checkbox .gchoice label { justify-content: flex-start; } [class*="form-group--checkRadioCol"].form-group--checkRadioStyle--boxed.form-group--checkRadioContentVerticalAlign--middle .gfield_radio .gchoice label, [class*="form-group--checkRadioCol"].form-group--checkRadioStyle--boxed.form-group--checkRadioContentVerticalAlign--middle .gfield_checkbox .gchoice label { justify-content: center; } [class*="form-group--checkRadioCol"].form-group--checkRadioStyle--boxed.form-group--checkRadioContentVerticalAlign--bottom .gfield_radio .gchoice label, [class*="form-group--checkRadioCol"].form-group--checkRadioStyle--boxed.form-group--checkRadioContentVerticalAlign--bottom .gfield_checkbox .gchoice label { justify-content: flex-end; } .form-group--checkRadioStyle--boxed.form-group--checkRadioContentVerticalAlign--top.form-group--checkRadioImagePosition--left .gfield_radio .gchoice label > div, .form-group--checkRadioStyle--boxed.form-group--checkRadioContentVerticalAlign--top.form-group--checkRadioImagePosition--left .gfield_checkbox .gchoice label > div, .form-group--checkRadioStyle--boxed.form-group--checkRadioContentVerticalAlign--top.form-group--checkRadioImagePosition--right .gfield_radio .gchoice label > div, .form-group--checkRadioStyle--boxed.form-group--checkRadioContentVerticalAlign--top.form-group--checkRadioImagePosition--right .gfield_checkbox .gchoice label > div { align-items: flex-start; } .form-group--checkRadioStyle--boxed.form-group--checkRadioContentVerticalAlign--middle.form-group--checkRadioImagePosition--left .gfield_radio .gchoice label > div, .form-group--checkRadioStyle--boxed.form-group--checkRadioContentVerticalAlign--middle.form-group--checkRadioImagePosition--left .gfield_checkbox .gchoice label > div, .form-group--checkRadioStyle--boxed.form-group--checkRadioContentVerticalAlign--middle.form-group--checkRadioImagePosition--right .gfield_radio .gchoice label > div, .form-group--checkRadioStyle--boxed.form-group--checkRadioContentVerticalAlign--middle.form-group--checkRadioImagePosition--right .gfield_checkbox .gchoice label > div { align-items: center; } .form-group--checkRadioStyle--boxed.form-group--checkRadioContentVerticalAlign--bottom.form-group--checkRadioImagePosition--left .gfield_radio .gchoice label > div, .form-group--checkRadioStyle--boxed.form-group--checkRadioContentVerticalAlign--bottom.form-group--checkRadioImagePosition--left .gfield_checkbox .gchoice label > div, .form-group--checkRadioStyle--boxed.form-group--checkRadioContentVerticalAlign--bottom.form-group--checkRadioImagePosition--right .gfield_radio .gchoice label > div, .form-group--checkRadioStyle--boxed.form-group--checkRadioContentVerticalAlign--bottom.form-group--checkRadioImagePosition--right .gfield_checkbox .gchoice label > div { align-items: flex-end; } /* Box styling with Image Choices */ .ic-theme--simple.form-group--checkRadioStyle--boxed.image-choices-use-images, .ic-theme--polaroid.form-group--checkRadioStyle--boxed.image-choices-use-images, .ic-theme--float-card.form-group--checkRadioStyle--boxed.image-choices-use-images { --gform-radio-checkbox-padding: 10px; } .ic-theme--simple.form-group--checkRadioStyle--boxed.image-choices-use-images .image-choices-choice-text, .ic-theme--polaroid.form-group--checkRadioStyle--boxed.image-choices-use-images .image-choices-choice-text, .ic-theme--float-card.form-group--checkRadioStyle--boxed.image-choices-use-images .image-choices-choice-text { padding: 0 var(--gform-radio-checkbox-padding); } /* Simple theme - no image border on selection */ .gform_wrapper.gravity-theme .ic-theme--simple.form-group--checkRadioStyle--boxed .image-choices-choice-image-wrap:after { display: none; } /* Polaroid theme - selected shadow includes its default shadow */ .ic-theme--float-card.form-group--checkRadioStyle--boxed .image-choices-choice .gfield-choice-input.gfield-choice-input:checked + .gform-field-label, .ic-theme--polaroid.form-group--checkRadioStyle--boxed .image-choices-choice .gfield-choice-input.gfield-choice-input:checked + .gform-field-label { box-shadow: 10px 20px 50px rgba(7,30,87,.2), inset 0 0 0 2px var(--gform-radio-checkbox-border-color-selected); } /* Polaroid theme - default to white background colors */ .ic-theme--polaroid.form-group--checkRadioStyle--boxed { --gform-radio-checkbox-bg-color: var(--brand-color-white); --gform-radio-checkbox-bg-color-selected: var(--brand-color-white); } /* Porthole theme - fix positioning for porthole elements */ .ic-theme--porthole.form-group--checkRadioStyle--boxed .image-choices-choice .gform-field-label:before { top: var(--gform-radio-checkbox-padding); } .ic-theme--porthole.form-group--checkRadioStyle--boxed .image-choices-choice .image-choices-choice-image-wrap { margin: 16px auto 20px; /* @TODO: Do calc function here */ } .ic-theme--porthole.form-group--checkRadioStyle--boxed .image-choices-choice .gform-field-label:after { top: calc((var(--ic-height) / 2) + var(--gform-radio-checkbox-padding)); } /* Circle theme - fix positioning for porthole elements */ .ic-theme--circle.form-group--checkRadioStyle--boxed .image-choices-choice .image-choices-choice-image-wrap { margin: 0 auto var(--gform-radio-checkbox-extra-img-margin); } .ic-theme--circle.form-group--checkRadioStyle--boxed .image-choices-choice .gform-field-label:after { top: calc((var(--ic-height) / 2) + var(--gform-radio-checkbox-padding)); } /* Global styling */ .image-choices-field[class*=ic-theme--].form-group--checkRadioStyle--boxed .image-choices-choice-text { border-color: var(--gform-radio-checkbox-border-color); background-color: var(--gform-radio-checkbox-bg-color); color: var(--gform-radio-checkbox-text-color); } .image-choices-field[class*=ic-theme--].form-group--checkRadioStyle--boxed .image-choices-choice-selected .image-choices-choice-text { border-color: var(--gform-radio-checkbox-border-color-selected); background-color: var(--gform-radio-checkbox-bg-color-selected); color: var(--gform-radio-checkbox-text-color-selected); } /* Image positions */ .form-group--checkRadioImagePosition--right .image-choices-choice-image-wrap, .form-group--checkRadioImagePosition--bottom .image-choices-choice-image-wrap { order: 2; } .image-choices-field[class*=ic-theme--].form-group--checkRadioImagePosition--left label, .image-choices-field[class*=ic-theme--].form-group--checkRadioImagePosition--left label > div, .image-choices-field[class*=ic-theme--].form-group--checkRadioImagePosition--right label, .image-choices-field[class*=ic-theme--].form-group--checkRadioImagePosition--right label > div { display: flex; flex-direction: row; align-items: center; gap: var(--gform-radio-checkbox-padding, var(--ic-padding)); } .image-choices-field[class*=ic-theme--].form-group--checkRadioImagePosition--right label, .image-choices-field[class*=ic-theme--].form-group--checkRadioImagePosition--right label > div { justify-content: space-between; } .image-choices-field[class*=ic-theme--].form-group--checkRadioImagePosition--bottom label > div { display: flex; flex-direction: column; gap: var(--gform-radio-checkbox-padding, var(--ic-padding)); width: 100%; height: 100%; } .image-choices-field[class*=ic-theme--].form-group--checkRadioImagePosition--bottom .gfield_radio, .image-choices-field[class*=ic-theme--].form-group--checkRadioImagePosition--bottom .gfield_checkbox { align-items: stretch !important; } .image-choices-field[class*=ic-theme--].form-group--checkRadioImagePosition--bottom label { height: 100%; } .image-choices-field[class*=ic-theme--].form-group--checkRadioImagePosition--bottom .image-choices-choice-text { flex-grow: 1; } .image-choices-field[class*=ic-theme--].form-group--checkRadioImagePosition--left .image-choices-choice-image-wrap, .image-choices-field[class*=ic-theme--].form-group--checkRadioImagePosition--right .image-choices-choice-image-wrap { flex: 0 0 auto; margin: 0; } .image-choices-field[class*=ic-theme--].form-group--checkRadioImagePosition--left .image-choices-choice-image-wrap, .image-choices-field[class*=ic-theme--].form-group--checkRadioImagePosition--bottom .image-choices-choice-image-wrap { margin-bottom: 0; } @media (max-width: 639px) { .image-choices-field[class*=ic-theme--].form-group--checkRadioImagePosition--stackMobile label, .image-choices-field[class*=ic-theme--].form-group--checkRadioImagePosition--stackMobile label > div { flex-direction: column; } .image-choices-field[class*=ic-theme--].form-group--checkRadioImagePosition--stackMobile .image-choices-choice-image-wrap img { margin-left: auto; margin-right: auto; } } /* Simple theme - image widths and position check mark */ .image-choices-field.ic-theme--simple.form-group--checkRadioImagePosition--left .image-choices-choice-image-wrap, .image-choices-field.ic-theme--simple.form-group--checkRadioImagePosition--left.image-choices-choice-image-wrap:after, .image-choices-field.ic-theme--simple.form-group--checkRadioImagePosition--right .image-choices-choice-image-wrap, .image-choices-field.ic-theme--simple.form-group--checkRadioImagePosition--right.image-choices-choice-image-wrap:after{ width: var(--ic-width); } /* Polaroid / Float card theme - image widths and position check mark */ .image-choices-field.ic-theme--polaroid.form-group--checkRadioImagePosition--left .image-choices-choice-image-wrap, .image-choices-field.ic-theme--polaroid.form-group--checkRadioImagePosition--right .image-choices-choice-image-wrap, .image-choices-field.ic-theme--float-card.form-group--checkRadioImagePosition--left .image-choices-choice-image-wrap, .image-choices-field.ic-theme--float-card.form-group--checkRadioImagePosition--right .image-choices-choice-image-wrap { width: var(--ic-width); } .ic-theme--polaroid.form-group--checkRadioImagePosition--left .image-choices-choice .gform-field-label:after, .ic-theme--polaroid.form-group--checkRadioImagePosition--right .image-choices-choice .gform-field-label:after, .ic-theme--float-card.form-group--checkRadioImagePosition--left .image-choices-choice .gform-field-label:after, .ic-theme--float-card.form-group--checkRadioImagePosition--right .image-choices-choice .gform-field-label:after { right: auto; left: calc(var(--ic-padding) * 2); top: calc(50% + (var(--ic-height) / 2)); } .ic-theme--polaroid.form-group--checkRadioImagePosition--right .image-choices-choice .gform-field-label:after, .ic-theme--float-card.form-group--checkRadioImagePosition--right .image-choices-choice .gform-field-label:after { right: calc(var(--ic-padding) * 2); left: auto; } .ic-theme--polaroid.form-group--checkRadioImagePosition--bottom .image-choices-choice .gform-field-label:after, .ic-theme--float-card.form-group--checkRadioImagePosition--bottom .image-choices-choice .gform-field-label:after { bottom: calc(var(--ic-height) + var(--ic-padding)); top: auto; transform: translateY(50%); } .ic-theme--polaroid.form-group--checkRadioImagePosition--bottom .image-choices-choice:not(.image-choices-choice-selected) .gform-field-label:after, .ic-theme--float-card.form-group--checkRadioImagePosition--bottom .image-choices-choice:not(.image-choices-choice-selected) .gform-field-label:after { transform: translateY(50%) scale(.8); } /* Circle theme - position check mark */ .image-choices-field[class*=ic-theme--].ic-theme--circle.form-group--checkRadioImagePosition--left .image-choices-choice .gform-field-label:after { left: calc(var(--ic-width) / 2); top: 50%; } .image-choices-field[class*=ic-theme--].ic-theme--circle.form-group--checkRadioImagePosition--left.form-group--checkRadioStyle--boxed .image-choices-choice .gform-field-label:after { left: calc(var(--ic-width) / 2 + var(--gform-radio-checkbox-padding)); } .image-choices-field[class*=ic-theme--].ic-theme--circle.form-group--checkRadioImagePosition--right .image-choices-choice .gform-field-label:after { left: auto; right: calc(var(--ic-width) / 2); top: 50%; transform: translate(50%, -50%); } .image-choices-field[class*=ic-theme--].ic-theme--circle.form-group--checkRadioImagePosition--right.form-group--checkRadioStyle--boxed .image-choices-choice .gform-field-label:after { right: calc(var(--ic-width) / 2 + var(--gform-radio-checkbox-padding)); } .image-choices-field[class*=ic-theme--].ic-theme--circle.form-group--checkRadioImagePosition--bottom .image-choices-choice .gform-field-label:after { bottom: calc(var(--ic-height) / 2 + 12px); top: auto; transform: translate(-50%, 50%); } .image-choices-field[class*=ic-theme--].ic-theme--circle.form-group--checkRadioImagePosition--bottom.form-group--checkRadioStyle--boxed .image-choices-choice .gform-field-label:after { bottom: calc((var(--ic-height) / 2) + var(--gform-radio-checkbox-extra-img-margin) + var(--gform-radio-checkbox-padding)); } /* Porthole theme - position check mark & shadow box */ .image-choices-field[class*=ic-theme--].ic-theme--porthole.form-group--checkRadioImagePosition--left .image-choices-choice .gform-field-label, .image-choices-field[class*=ic-theme--].ic-theme--porthole.form-group--checkRadioImagePosition--right .image-choices-choice .gform-field-label { gap: calc(var(--ic-width) - (calc(var(--ic-height) - var(--ic-padding)* 2))); } .image-choices-field[class*=ic-theme--].ic-theme--porthole.form-group--checkRadioImagePosition--left .image-choices-choice .gform-field-label:before { left: 0; top: calc(50% + (var(--ic-padding) / 2)); transform: translate(0%, -50%); } .image-choices-field[class*=ic-theme--].ic-theme--porthole.form-group--checkRadioImagePosition--left.form-group--checkRadioStyle--boxed .image-choices-choice .gform-field-label:before { left: var(--gform-radio-checkbox-padding); top: calc(50% + (var(--ic-padding) / 2) - 10px); } .image-choices-field[class*=ic-theme--].ic-theme--porthole.form-group--checkRadioImagePosition--left.form-group--checkRadioStyle--boxed .image-choices-choice-image-wrap { margin-left: calc((var(--ic-width) - (calc(var(--ic-height) - var(--ic-padding)* 2))) / 2); margin-right: var(--gform-radio-checkbox-padding); } .image-choices-field[class*=ic-theme--].ic-theme--porthole.form-group--checkRadioImagePosition--left .image-choices-choice .gform-field-label:after { left: calc(var(--ic-width) / 2); top: calc(50% + var(--ic-padding) / 2); } .image-choices-field[class*=ic-theme--].ic-theme--porthole.form-group--checkRadioImagePosition--left.form-group--checkRadioStyle--boxed .image-choices-choice .gform-field-label:after { left: calc((var(--ic-width) / 2) + var(--gform-radio-checkbox-padding)); top: calc(50%); } .image-choices-field[class*=ic-theme--].ic-theme--porthole.form-group--checkRadioImagePosition--right .image-choices-choice .gform-field-label:before { right: 0; left: auto; top: calc(50% + (var(--ic-padding) / 2)); transform: translate(0%, -50%); } .image-choices-field[class*=ic-theme--].ic-theme--porthole.form-group--checkRadioImagePosition--right.form-group--checkRadioStyle--boxed .image-choices-choice .gform-field-label:before { left: auto; right: var(--gform-radio-checkbox-padding); top: calc(50% + (var(--ic-padding) / 2) - 10px); } .image-choices-field[class*=ic-theme--].ic-theme--porthole.form-group--checkRadioImagePosition--right.form-group--checkRadioStyle--boxed .image-choices-choice-image-wrap { margin-right: calc((var(--ic-width) - (calc(var(--ic-height) - var(--ic-padding)* 2))) / 2); margin-left: var(--gform-radio-checkbox-padding); } .image-choices-field[class*=ic-theme--].ic-theme--porthole.form-group--checkRadioImagePosition--right .image-choices-choice .gform-field-label:after { left: auto; right: calc(var(--ic-width) / 2); top: calc(50% + var(--ic-padding) / 2); transform: translate(50%, -50%); } .image-choices-field[class*=ic-theme--].ic-theme--porthole.form-group--checkRadioImagePosition--right.form-group--checkRadioStyle--boxed .image-choices-choice .gform-field-label:after { left: auto; right: calc((var(--ic-width) / 2) + var(--gform-radio-checkbox-padding)); top: calc(50%); } .image-choices-field[class*=ic-theme--].ic-theme--porthole.form-group--checkRadioImagePosition--bottom .image-choices-choice .gform-field-label:before { top: auto; bottom: 0; } .image-choices-field[class*=ic-theme--].ic-theme--porthole.form-group--checkRadioImagePosition--bottom .image-choices-choice-image-wrap { margin-top: var(--ic-padding); margin-bottom: calc(((var(--ic-width) - (calc(var(--ic-height) - var(--ic-padding)* 2))) / 2)); } .image-choices-field[class*=ic-theme--].ic-theme--porthole.form-group--checkRadioImagePosition--bottom.form-group--checkRadioStyle--boxed .image-choices-choice .gform-field-label:before { top: auto; bottom: calc(var(--gform-radio-checkbox-padding) + var(--gform-radio-checkbox-extra-img-margin)); } .image-choices-field[class*=ic-theme--].ic-theme--porthole.form-group--checkRadioImagePosition--bottom.form-group--checkRadioStyle--boxed .image-choices-choice-image-wrap { margin-bottom: calc(((var(--ic-width) - (calc(var(--ic-height) - var(--ic-padding)* 2))) / 2) + var(--gform-radio-checkbox-extra-img-margin)); } .image-choices-field[class*=ic-theme--].ic-theme--porthole.form-group--checkRadioImagePosition--bottom .image-choices-choice .gform-field-label:after { top: auto; bottom: calc(var(--ic-height) / 2); transform: translate(-50%, 50%); } .image-choices-field[class*=ic-theme--].ic-theme--porthole.form-group--checkRadioImagePosition--bottom.form-group--checkRadioStyle--boxed .image-choices-choice .gform-field-label:after { bottom: calc((var(--ic-height) / 2) + var(--gform-radio-checkbox-padding) + var(--gform-radio-checkbox-extra-img-margin)); } .image-choices-field.ic-theme--simple.form-group--checkRadioImageWidthOverride:not(.form-group--checkRadioImagePosition--left):not(.form-group--checkRadioImagePosition--right) .image-choices-choice-image-wrap, .image-choices-field.ic-theme--polaroid.form-group--checkRadioImageWidthOverride:not(.form-group--checkRadioImagePosition--left):not(.form-group--checkRadioImagePosition--right) .image-choices-choice-image-wrap, .image-choices-field.ic-theme--float-card.form-group--checkRadioImageWidthOverride:not(.form-group--checkRadioImagePosition--left):not(.form-group--checkRadioImagePosition--right) .image-choices-choice-image-wrap { width: var(--ic-width); margin-left: auto; margin-right: auto; } /* Image width overrides */ .image-choices-field[class*="ic-theme--"].form-group--checkRadioImageWidthOverride { --gform-radio-checkbox-img-width: 150px; --gform-radio-checkbox-img-width-tablet: var(--gform-radio-checkbox-img-width); --gform-radio-checkbox-img-width-mobile: var(--gform-radio-checkbox-img-width-tablet, var(--gform-radio-checkbox-img-width)); --ic-width: var(--gform-radio-checkbox-img-width); } @media (max-width: 767px) { .image-choices-field[class*="ic-theme--"].form-group--checkRadioImageWidthOverride { --ic-width: var(--gform-radio-checkbox-img-width-tablet); } } @media (max-width: 639px) { .image-choices-field[class*="ic-theme--"].form-group--checkRadioImageWidthOverride { --ic-width: var(--gform-radio-checkbox-img-width-mobile); } } .image-choices-choice-text .image-choices-choice-price { margin-top: 1em; } /* Scrolling paginated forms */ .theme-jetcharge .gform_wrapper.gravity-theme [data-jc-pages-scrolling="true"] .gform_page { display: block !important; } /* Sticky section */ .theme-jetcharge .gform_wrapper.gravity-theme .gfield--type-section.jc-section--with-previous { position: relative; padding-right: 90px; } .theme-jetcharge .gform_wrapper.gravity-theme .gfield--type-section.jc-section--sticky { position: sticky; background: var(--brand-color-white); top: calc(var(--topbar-height) + var(--header-height)); z-index: 5; padding-top: 8px; } .admin-bar.theme-jetcharge .gform_wrapper.gravity-theme .gfield--type-section.jc-section--sticky { top: calc(var(--wp-admin--admin-bar--height) + var(--topbar-height) + var(--header-height)); } /* Section previous link */ .theme-jetcharge .gform_wrapper.gravity-theme .gfield--type-section.jc-section--with-previous .jc-section-previous-link { position: absolute; top: 50%; right: 0; transform: translateY(-50%); color: inherit; border: none; background: none; appearance: none; text-decoration: underline; cursor: pointer; } /*.jc-section-previous-link {*/ /* display: none; !* hide it unless it's in the page 2 and onwards *!*/ /*}*/ /*.gform_page:not(:first-child) .jc-section-previous-link {*/ /* display: inline;*/ /*}*/ img.gform_ajax_spinner { background-repeat: no-repeat; width: 20px; height: 20px; background-size: 20px; background-image: url('/wp-content/themes/evolut-starter/assets/spinner.svg?v2'); } [data-jc-loader-cover="true"] img.gform_ajax_spinner { position: fixed; z-index: 999999; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(var(--brand-color-white-rgb), 0.5); background-image: url('/wp-content/themes/evolut-starter/assets/spinner.svg?v2'); background-repeat: no-repeat; background-size: 36px; background-position: center center; animation: loaderBackgroundFade 300ms forwards; } @keyframes loaderBackgroundFade { from { background-color: rgba(var(--brand-color-white-rgb), 0); /* Transparent */ } to { background-color: rgba(var(--brand-color-white-rgb), 0.5); /* 50% white */ } } [data-jc-loader-cover="true"] .gform_page[style*="none"] img.gform_ajax_spinner { display: none; } .theme-jetcharge .gform_wrapper.gravity-theme .jc-field-spacing--large .gfield { margin: 0 0 30px; } .theme-jetcharge .gform_wrapper.gravity-theme .jc-submit--right .gform_footer { justify-content: flex-end; } .theme-jetcharge .gform_wrapper.gravity-theme .jc-option--hide-price .ginput_price, .theme-jetcharge .gform_wrapper.gravity-theme .jc-option--hide-price .image-choices-choice-price { display: none; } .gform_wrapper.gravity-theme .jc-single-product .gfield_description .jc-single-product__img-wrap, .theme-jetcharge .gform_wrapper.gravity-theme .jc-image-choice--force-square .image-choices-choice-image-wrap { position: relative; height: auto !important; } .gform_wrapper.gravity-theme .jc-single-product .gfield_description .jc-single-product__img-wrap, .theme-jetcharge .gform_wrapper.gravity-theme .jc-image-choice--force-square .image-choices-choice-image-wrap:before { content: ""; display: block; width: 100%; padding-bottom: 100%; } .gform_wrapper.gravity-theme .jc-single-product .gfield_description .jc-single-product__img-wrap img, .theme-jetcharge .gform_wrapper.gravity-theme .jc-image-choice--force-square .image-choices-choice-image-wrap img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: unset; object-fit: cover; } .theme-jetcharge .gform_wrapper.gravity-theme .jc-option-w-footer label { flex-direction: column; justify-content: space-between !important; } /* @TODO: up to here */ .jc-option-footer { border-top: 1px solid var(--brand-form--field--border-color); margin-top: 10px; padding:10px 0 0 5px; display: flex; flex-direction: row !important; align-items: center !important; justify-content: space-between; } .jc-option-footer .button { cursor: pointer; white-space: nowrap; display: inline-flex; flex-direction: row; gap: var(--brand-btn-gap-md); box-sizing: border-box; justify-content: center; align-items: center; padding: var(--brand-btn-padding-md); border-radius: var(--brand-btn-border-radius-md); font-size: var(--brand-btn-font-size-md); line-height: var(--brand-btn-line-height); font-weight: var(--brand-btn-font-weight); transition: color ease-out 0.4s, background-color ease-out 0.4s, border-color ease-out 0.4s; color: var(--brand-color-black); border: var(--brand-btn-outline-border-width) solid var(--brand-color-black); background-color: transparent; } .gform_wrapper.gravity-theme .jc-single-product.jc-single-product--selected .jc-option-footer .button, .gfield-choice-input:checked + label .jc-option-footer .button { background-color: var(--brand-btn-color--orange--bg); border-color: var(--brand-btn-color--orange--bg); color: var(--brand-btn-color--orange--text); } .gform_wrapper.gravity-theme .jc-single-product.jc-single-product--selected .jc-option-footer .button:before, .gfield-choice-input:checked + label .jc-option-footer .button:before { content: "✔"; display: inline-block; } /* Form summary */ .gf-summary-header { font-family: var(--brand-overline--font-family); font-size: var(--brand-overline--font-size-1); font-weight: var(--brand-overline--font-weight); text-transform: var(--brand-overline--text-transform); letter-spacing: var(--brand-overline--letter-spacing); line-height: var(--brand-overline--line-height); color: var(--brand-color-black); margin-bottom: 20px; } .gf-summary-inner-row, .gf-summary-row-content { display: flex; align-items: center; justify-content: space-between; gap: 20px; } @media screen and (max-width: 639px) { .gf-summary-inner-row, .gf-summary-row-content { flex-wrap: wrap; } } .gf-summary-row-content { border-bottom: 1px solid var(--brand-form--field--border-color); margin: 0 20px 20px; padding-bottom: 20px; } .gf-summary-inner-row { margin-bottom: 20px; } .gf-summary-inner-row--top { align-items: flex-start; } .gf-summary-inner-row--start { justify-content: flex-start; } .gf-summary-row-img { width: 100px; height: 100px; } .gf-summary-row-img img { width: 100px; height: 100px; object-fit: cover; object-position: center; border-radius: var(--brand-form--field--border-radius); border: 1px solid var(--brand-form--field--border-color); } @media screen and (max-width: 639px) { .gf-summary-row-img, .gf-summary-row-img img { width: 70px; height: 70px; } } .gf-summary-row-img img[src=""] { background-color: var(--brand-color-black-25); display: inline-block; width: 100px; height: 100px; border: 1px solid var(--brand-form--field--border-color); } .gf-summary-row-img img[src=""]:before { content: ""; display: flex; justify-content: center; align-items: center; height: 100%; } .gf-summary-row-value { flex-grow: 1; } .gf-summary-row-value p { margin-top: 0; } .gf-summary-row-btn a { cursor: pointer; white-space: nowrap; display: inline-flex; flex-direction: row; gap: var(--brand-btn-gap-md); box-sizing: border-box; justify-content: center; align-items: center; padding: var(--brand-btn-padding-md); border-radius: var(--brand-btn-border-radius-md); font-size: var(--brand-btn-font-size-md); line-height: var(--brand-btn-line-height); font-weight: var(--brand-btn-font-weight); transition: color ease-out 0.4s, background-color ease-out 0.4s, border-color ease-out 0.4s; color: var(--brand-btn-color--orange--bg); border: var(--brand-btn-outline-border-width) solid var(--brand-btn-color--orange--bg); background-color: transparent; text-decoration: none; } .gf-summary-row-btn a:hover { background-color: var(--brand-btn-color--orange--bg); color: var(--brand-btn-color--orange--text); } @media screen and (max-width: 639px) { .gf-summary-row-img img[src=""] { width: 70px; height: 70px; } } @media (max-width: 550px) { .gf-summary-row-btn { flex: 0 0 100%; text-align: left; } .gf-summary-row-btn a { display: inline-block; } } .gform_wrapper.gravity-theme .gfield.text-right { text-align: right; } .gform_wrapper.gravity-theme .gfield.text-right .ginput_total { text-align: right; padding-right: 0; border: 0; } .gform_wrapper.gravity-theme .jc-total-large .ginput_total { color: var(--brand-color-black); font-size: 20px; border: 0; } /* Fix state field next to suburb field alignment */ @media (min-width: 641px) { .gform_wrapper.gravity-theme .ginput_container_address span:not(.ginput_full):not(:last-of-type):not(:nth-last-of-type(2)) + .address_state { margin-bottom: 8px; } } .jc-hide-required-legend_wrapper .gform_required_legend { display: none; } .gform_wrapper.gravity-theme .jc-form-footer-py-0 .gform_footer { padding-top: 0; padding-bottom: 0; } /* Single product to look like multi-select */ .gform_wrapper.gravity-theme .jc-single-product { --gform-radio-checkbox-padding: 10px; display: grid; grid-template-areas: "description" "qty" "error"; grid-template-rows: 1fr auto auto; /* Adjust row height as needed */ grid-template-columns: 1fr; /* 1 column */ } .gform_wrapper.gravity-theme .jc-single-product .gfield_description { grid-area: description; padding-top: 0; gap: var(--gform-radio-checkbox-padding, var(--ic-padding)); display: grid; grid-template-areas: "image" "title" "description" "footer"; grid-template-rows: auto auto 1fr auto; /* Adjust row height as needed */ grid-template-columns: 1fr; /* 2 columns */ height: 100%; } .gform_wrapper.gravity-theme .jc-single-product .gfield_description.gfield_validation_message { grid-area: error; display: block; height: auto; padding-top: 13px; } .gform_wrapper.gravity-theme .jc-single-product .gfield_description .jc-single-product__img { grid-area: image; } .gform_wrapper.gravity-theme .jc-single-product .gfield_description .jc-single-product__title { grid-area: title; padding: 0 var(--gform-radio-checkbox-padding, var(--ic-padding)); align-self: center; } .gform_wrapper.gravity-theme .jc-single-product .gfield_description .jc-single-product__img img { border-radius: var(--brand-form--field--border-radius); } .gform_wrapper.gravity-theme .jc-single-product .gfield_description .jc-single-product__desc { grid-area: description; padding: 0 var(--gform-radio-checkbox-padding, var(--ic-padding)); } .gform_wrapper.gravity-theme .jc-single-product .gfield_description .jc-single-product__desc p { margin-top: -10px; } .gform_wrapper.gravity-theme .jc-single-product .gfield_description .jc-single-product__footer { grid-area: footer; } @media screen and (min-width: 768px) { .gform_wrapper.gravity-theme .jc-single-product .gfield_description { display: grid; grid-template-areas: "image title" "description description" "footer footer"; grid-template-rows: auto 1fr auto; /* Adjust row height as needed */ grid-template-columns: 1fr 1fr; /* 2 columns */ height: 100%; } .gform_wrapper.gravity-theme .jc-single-product .gfield_description .jc-single-product__desc p { margin-top: 18px; } } @media screen and (min-width: 920px) { .gform_wrapper.gravity-theme .jc-single-product .gfield_description { display: grid; grid-template-areas: "image title" "image description" "footer footer"; } .gform_wrapper.gravity-theme .jc-single-product .gfield_description .jc-single-product__desc p { margin-top: -10px; } } .gform_wrapper.gravity-theme .jc-single-product .ginput_container_singleproduct { grid-area: qty; padding: 0 var(--gform-radio-checkbox-padding); margin: var(--gform-radio-checkbox-padding) calc(var(--gform-radio-checkbox-padding) * -1) calc(var(--gform-radio-checkbox-padding) * -1); background-color: rgba(var(--brand-color-primary-rgb), 0.05); text-align: right; overflow: hidden; max-height: 0; transition: max-height 0.2s ease-out, padding 0.2s ease-out; } .gform_wrapper.gravity-theme .jc-single-product.jc-single-product--selected .ginput_container_singleproduct { padding: var(--gform-radio-checkbox-padding) var(--gform-radio-checkbox-padding); max-height: 100px; } .gform_wrapper.gravity-theme .jc-single-product .ginput_container_singleproduct .ginput_product_price_wrapper { display: none; } .gform_wrapper.gravity-theme .jc-field-margin--sm { margin-bottom: 10px !important; } .jc-gchoice-inline .gchoice { display: flex; align-items: flex-start; } .jc-gchoice-inline .gchoice .gfield-choice-input { flex: 0 0 auto; } /* Nested forms */ .theme-jetcharge .gpnf-modal .gpnf-modal-header { font-family: var(--brand-heading--font-family, sans-serif); font-weight: var(--brand-heading--font-weight); font-feature-settings: 'liga' off; letter-spacing: var(--brand-heading--letter-spacing); color: var(--brand-color-white); background: var(--brand-gradient); } .theme-jetcharge .gpnf-nested-entries th, .theme-jetcharge .tingle-modal-box__footer { background: var(--brand-color-primary-5); font-family: var(--brand-overline--font-family); font-weight: var(--brand-overline--font-weight); line-height: var(--brand-overline--line-height); text-transform: var(--brand-overline--text-transform); letter-spacing: var(--brand-overline--letter-spacing); font-size: var(--brand-overline--font-size-2); color: var(--brand-color-black); } .theme-jetcharge .gpnf-nested-entries, .theme-jetcharge .gpnf-nested-entries td, .theme-jetcharge .gpnf-nested-entries th { border-color: var(--brand-form--field--border-color); } /* Placeholder emulating label */ .jc-placeholder-label { position: relative; } .jc-placeholder-label ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ opacity: 0; } .jc-placeholder-label ::-moz-placeholder { /* Firefox 19+ */ opacity: 0; } .jc-placeholder-label :-ms-input-placeholder { /* IE 10+ */ opacity: 0; } .jc-placeholder-label :-moz-placeholder { /* Firefox 18- */ opacity: 0; } .jc-placeholder-label .gfield_label { position: absolute; z-index: 2; left: 8px; top: 50%; transform: translateY(-50%); font-weight: 400 !important; color: var(--brand-form--field--text-color-disabled); pointer-events: none; } .jc-placeholder-label.gfield--type-select .gfield_label, .jc-placeholder-label.gfield--type-multiselect .gfield_label { left: 15px; } .theme-jetcharge .gform_wrapper.gravity-theme .gfield_required .gfield_required_text { color: var(--brand-color-primary); } .theme-jetcharge .gform_wrapper.gravity-theme .jc-placeholder-label .gfield_required { color: var(--brand-form--field--text-color-disabled); } .theme-jetcharge .gform_wrapper.gravity-theme .jc-placeholder-label--filled .gfield_label { display: none; } .gfield.gfield--type-name.field_sublabel_above .gform-field-label.gform-field-label--type-sub { font-weight: bold; } @media (min-width: 641px) { .gfield.gfield--type-address.jc-address-2-rows .ginput_container .ginput_address_line_1 { flex-basis: 66.666%; } .gfield.gfield--type-address.jc-address-2-rows .ginput_container .ginput_address_line_2 { flex-basis: 33.333%; order: -1; } .gfield.gfield--type-address.jc-address-2-rows .ginput_container .ginput_address_city, .gfield.gfield--type-address.jc-address-2-rows .ginput_container .ginput_address_state, .gfield.gfield--type-address.jc-address-2-rows .ginput_container .ginput_address_zip { flex-basis: 33.333%; margin-bottom: 8px; } } /* Force hidden fields in GF to no display as block when conditions include it */ .gfield--input-type-hidden { display: none !important; } /* Hide the Partial Entry warnings */ .partial_entry_warning { display: none; } /* /GForms ================================== */ .password-form { display: flex; flex-direction: column; align-items: center; } .password-form__inputs { display: flex; } .password-form__input { margin-right: 20px; } .newsletter-form { box-sizing: border-box; background-color: var(--brand-color-primary-5); border-top: var(--brand-form--field--border); padding: 40px 0; } .newsletter-form__title { display: flex; align-items: center; color: var(--primary-dark-grey-color); } .newsletter-form__field, .newsletter-form__btn { box-sizing: border-box; width: 100%; } @media (max-width: 1023px) { .newsletter-form { padding-bottom: 60px; } .newsletter-form__title { margin-bottom: 40px } .newsletter-form__field { margin-bottom: 20px; } } .jetcharge-wp-section { font-family: "proxima-nova", sans-serif; } .jetcharge-wp-section[data-section-name="header"] { /*position: sticky;*/ /*top: 0; !* LIZ: Changed from 52px to 0 *!*/ /*z-index: 20;*/ display: contents; /* LIZ: Added so sticky elements within a parent will be sticky. To support non-sticky announcement above. */ } /* LIZ: Added for styling of search field in header for Shopify */ /* Scoping this style so it doesn't mess with other styles for the field on WP. */ .jetcharge-wp-section[data-section-name="header"] .algolia-header-search input { height: 40px; padding: 0px 10px; background-color: #EFEDE8; border: 0px solid white; border-radius: 4px; width: calc(100% - 5px); } .Heading { line-height: inherit; } .Header__CartCountContainer { display: none; } .jetcharge-wp-section .Header__CartCountContainer { display: inline; } .top-announcement { --announcementBg: var(--brand-color-black); --announcementText: var(--brand-color-white); background-color: var(--announcementBg); color: var(--announcementText); text-align: center; } .top-announcement__link { color: var(--announcementText); text-decoration: none; padding: 10px 20px; display: flex; align-items: center; justify-content: center; column-gap: 20px; row-gap: 10px; } .top-announcement__text { flex: 0 1 auto; } .top-announcement__text p:first-child { margin-top: 0; } .top-announcement__text p:last-child { margin-bottom: 0; } .top-announcement__btn { z-index: 2; height: 30px; min-width: 50px; flex: 0 0 auto; white-space: nowrap; padding: 0 10px; font-size: 14px; } .top-announcement__btn > span { position: relative; z-index: 3; } @media screen and (max-width: 768px) { .top-announcement__link { flex-direction: column; } .top-announcement { font-size: 14px; } .top-announcement__btn { font-size: 12px; } } /* ======================= */ /* Logo carousel */ /* ======================= */ .wp-block-lcb-logo-carousel a.alcb__logo-image { display: block; } /* B&W images */ .wp-block-lcb-logo-carousel.bw-images img:not(:hover) { filter: grayscale(1); } /* Handling bug in rendering when in a group block */ .is-layout-flex .wp-block-lcb-logo-carousel { max-width: 100%; } /* Floating CTA ====================================== */ .floating-wrapper { position: relative; } .floating { position: relative; transition: transform 0.3s, bottom 0.3s, right 0.3s; } .floating.floating--bottom-left.is-sticky, .floating.floating--bottom-right.is-sticky { position: fixed; bottom: 0; animation: floatingslideIn 0.3s forwards; z-index: 6; max-width: 100vw; } .floating.floating--bottom-right.is-sticky { right: 0; } .floating.floating--bottom-left.is-sticky { left: 0; } .floating.floating--bottom-right.floating--gap.is-sticky { bottom: 10px; right: 10px; max-width: calc(100vw - 20px); } .floating.floating--bottom-left.floating--gap.is-sticky { bottom: 10px; left: 10px; } .floating.floating--second-btn.floating--bottom-right.is-sticky, .floating.floating--second-btn.floating--bottom-left.is-sticky { bottom: 49px; } .floating.floating--second-btn.floating--bottom-right.floating--gap.is-sticky, .floating.floating--second-btn.floating--bottom-left.floating--gap.is-sticky { bottom: 69px; } @media screen and (max-width: 767px) { .floating--sm-full { width: 100%; } } .floating--shadow.is-sticky { box-shadow: 0 2px 20px rgba(0, 0, 0, .2); } .wp-block-button.floating--shadow, .wp-block-htr-block-modal-builder-block.floating--shadow { border-radius: var(--brand-btn-border-radius); } .floating--hidden:not(.is-sticky) { display: none; } @keyframes floatingslideIn { from { transform: translateY(120%); } to { transform: translateY(0); } } /* /Floating CTA ====================================== */ /* Tooltip ====================================== */ [data-tooltip] { position: relative; display: inline-block; cursor: pointer; } [data-tooltip-content] { --jcToolTipTranslateOffset: 0px; --jcTooltipArrowSize: 7px; position: absolute; /*display: none;*/ left: 50%; bottom: 100%; transform: translateX(calc(-50% - var(--jcToolTipTranslateOffset))); background-color: var(--brand-color-black); color: var(--brand-color-white); min-width: 200px; width: auto; max-width: 300px; border-radius: 4px; padding: 5px 10px; margin-bottom: calc(var(--jcTooltipArrowSize) / 2); z-index: 1000; box-shadow: 0 3px 10px rgba(0,0,0,0.25); transform-origin: 50% 100%; opacity: 0; visibility: hidden; } [data-tooltip-content]:after { content: ""; position: absolute; top: 100%; /* Align the arrow with the tooltip */ left: 50%; transform: translateX(calc(-50% - (var(--jcToolTipTranslateOffset) * -1))); margin-left: calc(var(--jcTooltipArrowSize) * -1); border-width: var(--jcTooltipArrowSize); border-style: solid; border-color: var(--brand-color-black) transparent transparent transparent; } [data-tooltip].open [data-tooltip-content] { display: block; animation: tooltip-pop 0.3s ease-in-out both; opacity: 1; visibility: visible; } @keyframes tooltip-pop { 0% { opacity: 0; transform: translateX(calc(-50% - var(--jcToolTipTranslateOffset))) scale(0); } 60% { opacity: 1; transform: translateX(calc(-50% - var(--jcToolTipTranslateOffset))) scale(1.1); } 100% { transform: translateX(calc(-50% - var(--jcToolTipTranslateOffset))) scale(1); } } /* /Tooltip ====================================== */ .wp-block-cover.jc-banner { padding: 0 0 75% 0; } .wp-block-cover.jc-banner .jc-banner__content { background: url('/wp-content/themes/evolut-starter/assets/brand-gradient-2.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; padding: var(--padding-width); } .wp-block-cover.jc-banner .jc-banner__content > * { position: relative; z-index:2; } .wp-block-cover.jc-banner .jc-banner__title { font-size: 24px; } .wp-block-cover.jc-banner .jc-banner__text { font-size: 18px; } /* Auto make button black */ .wp-block-cover.jc-banner .jc-banner__content .wp-block-button__link { background-color: var(--brand-btn-color--black--bg); color: var(--brand-btn-color--black--text); } .wp-block-cover.jc-banner .jc-banner__content .wp-block-button:not(.is-style-outline) .wp-block-button__link:before { display: none; } .wp-block-cover.jc-banner .jc-banner__content .wp-block-button__link:hover { background-color: var(--brand-btn-color--yellow--bg); color: var(--brand-btn-color--yellow--text); } @media (min-width: 580px) { .wp-block-cover.jc-banner { padding: 0 40% 0 0; } .wp-block-cover.jc-banner:before { width: 75%; height: 100%; } } @media (min-width: 768px) { .wp-block-cover.jc-banner { padding: 0 50% 0 0; } .wp-block-cover.jc-banner:before { right: calc(-1 * var(--padding-width) - 0%); width: 50%; } } /* ================================= */ /* Breadcrumbs */ /* ================================= */ .jc-breadcrumbs { position: relative; z-index: 2; } .jc-breadcrumbs .container { --jc-breadcrumbs-container-padding: calc(20px - ((var(--brand-body-text--line-height) * var(--brand-overline--font-size-2)) / 2)); padding-top: var(--jc-breadcrumbs-container-padding); padding-bottom: var(--jc-breadcrumbs-container-padding); font-family: var(--brand-overline--font-family); font-weight: var(--brand-overline--font-weight); line-height: var(--brand-body-text--line-height); text-transform: var(--brand-overline--text-transform); letter-spacing: var(--brand-overline--letter-spacing); font-size: var(--brand-overline--font-size-2); } .jc-breadcrumbs .breadcrumb_separator { margin: 0 5px; display: inline-block; } .jc-breadcrumbs a { text-decoration: none; } .jc-breadcrumbs a:hover { text-decoration: underline; } /* Breadcrumb bar */ /* --------------------------- */ .jc-breadcrumbs--bar { background-color: var(--brand-color-white); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07); } .jc-breadcrumbs--bar .container { padding-top: 10px; padding-bottom: 10px; } /* Posts breadcrumbs */ /* --------------------------- */ .post-header__description.post-header__description--w-breadcrumbs { padding-top: 0; } .post-header__description .jc-breadcrumbs--over .container { padding-bottom: 43px; } @media (max-width: 1023px) { .post-header__description.post-header__description--w-breadcrumbs { padding-bottom: 120px; } .post-header__description .jc-breadcrumbs--over .container { padding-bottom: 30px; } } /* EV Model breadcrumbs */ /* --------------------------- */ .ev-item-header__content .jc-breadcrumbs { position: absolute; top: 0; left: 0; right: 0; } /* Persona Header breadcrumbs */ /* --------------------------- */ .persona-header.persona-header--w-breadcrumbs { position: relative; flex-direction: column; justify-content: space-between; align-items: flex-start; padding-top: 0; } .persona-header .jc-breadcrumbs { width: 100%; } @media (max-width: 1023px) { /*.persona-header .jc-breadcrumb-spacer {*/ /* height: 40px;*/ /*}*/ } /* Content only page breadcrumbs */ /* --------------------------- */ .page-template-content-only .js-breadcrumbs__over-content-wrapper { position: relative; } .page-template-content-only.jc-has-header-overlay .jc-breadcrumbs--bar, .page-template-content-only .jc-breadcrumbs--over { position: absolute; left: 0; right: 0; top: 0; z-index: 2; } .page-template-content-only.jc-has-header-overlay .jc-breadcrumbs--bar, .page-template-content-only.jc-has-header-overlay .jc-breadcrumbs--over { top: calc(var(--header-height) + var(--header-top-offset) + var(--topbar-height)); } /* Dark */ .jc-breadcrumbs--theme-dark { color: var(--brand-color-black); } .jc-breadcrumbs--theme-dark a { color: var(--brand-color-black); } /* Light */ .jc-breadcrumbs--theme-light { color: rgba(var(--brand-color-white-rgb), 0.5); } .jc-breadcrumbs--theme-light a { color: rgba(var(--brand-color-white-rgb), 0.5); } .jc-breadcrumbs--theme-light a:hover { color: rgba(var(--brand-color-white-rgb), 0.75); } .jc-breadcrumbs--theme-light .breadcrumb_separator { color: rgba(var(--brand-color-white-rgb), 0.2); } /* Popup maker popup customisations */ .pum-theme-16851 .pum-container, .pum-theme-jet-charge-slide-in-orange .pum-container, .pum-theme-jet-charge-orange .pum-container { background: url('/wp-content/themes/evolut-starter/assets/brand-gradient-1.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; } .jc-inline-newsletter-form .gfield--type-submit .gform-button { min-width: 0; } @media (min-width: 641px) { .jc-inline-newsletter-form .gfield--type-submit { -ms-grid-column-span: 2 !important; grid-column: span 2 !important; } } /* e select custom class for option positioning */ .el-select__options--above .el-select__options { top: auto; bottom: calc(var(--select-height) - 1px); } /* ------------------------------*/ /* Newsletter popup form on scroll. * Always use stacked fields. /* ------------------------------*/ .pum-theme-21706 .gform_wrapper.gravity-theme .gfield.gfield--width-half { grid-column: 1/-1; } .pum-theme-21706 .gform_wrapper.gravity-theme .gform_footer { margin-top: 16px } /** * Country Selector * Scoped entirely under .jc-country-selector — safe to enqueue * site-wide with no risk of leaking into other components. */ .jc-country-selector { --jc-country-selector-toggle-padding: 0px 12px; --jc-country-select-globe-color: var(--brand-color-black-500); --jc-country-select-globe-hover-color: var(--brand-color-primary); --jc-country-select-globe-size: 20px; --jc-country-select-text-color: var(--brand-color-black); --jc-country-select-text-color-hover: var(--brand-color-black); --jc-country-select-text-code-display: block; --jc-country-select-text-label-display: none; --jc-country-select-chevron-color: var(--brand-color-black-500); --jc-country-select-chevron-color-hover: var(--brand-color-black-500); --jc-country-select-chevron-size: 16px; --jc-country-select-dropdown-bg-color: var(--brand-color-white); --jc-country-select-dropdown-border: 1px solid rgba(var(--brand-color-black-rgb), 0.05); --jc-country-select-dropdown-border-radius: 8px; --jc-country-select-dropdown-padding: 8px 0; --jc-country-select-dropdown-item-text: var(--brand-color-black); --jc-country-select-dropdown-item-text-hover: var(--brand-color-white); --jc-country-select-dropdown-item-text-current: var(--brand-color-black); --jc-country-select-dropdown-item-bg-color: var(--brand-color-white); --jc-country-select-dropdown-item-bg-color-hover: var(--brand-color-primary); --jc-country-select-dropdown-item-bg-padding: 8px 16px; position: relative; display: block; font-family: inherit; } .header.header--overlay:not(.header--open) .jc-country-selector { --jc-country-select-globe-color: rgba(var(--brand-color-white-rgb), 0.6); --jc-country-select-text-color: var(--brand-color-white); --jc-country-select-text-color-hover: var(--brand-color-white); --jc-country-select-chevron-color: rgba(var(--brand-color-white-rgb), 0.75); --jc-country-select-chevron-color-hover: rgba(var(--brand-color-white-rgb), 0.75); } .footer .jc-country-selector { --jc-country-selector-toggle-padding: 0px 0px 0px 12px; --jc-country-select-globe-color: var(--brand-color-black-600); --jc-country-select-chevron-color: var(--brand-color-black-600); --jc-country-select-text-color: var(--brand-color-black-200); --jc-country-select-text-color-hover: var(--brand-color-black-200); --jc-country-select-text-code-display: none; --jc-country-select-text-label-display: block; } .jc-country-selector__toggle { background: transparent; border: none; display: flex; flex-direction: row; gap: 6px; box-sizing: border-box; justify-content: center; align-items: center; height: auto; padding: var(--jc-country-selector-toggle-padding); cursor: pointer; color: var(--jc-country-select-text-color); } .jc-country-selector__toggle:hover, .jc-country-selector__toggle:focus-visible, .jc-country-selector.is-open .jc-country-selector__toggle { color: var(--jc-country-select-text-color-hover); } .jc-country-selector__code, .jc-country-selector__label { line-height: 1; } .jc-country-selector__label { display: var(--jc-country-select-text-label-display); } .jc-country-selector__code { display: var(--jc-country-select-text-code-display); } .jc-country-selector__icon--globe { color: var(--jc-country-select-globe-color); margin-right: -2px; /* Brings the globe icon a little closer */ } .jc-country-selector__icon--globe svg { width: var(--jc-country-select-globe-size); height: var(--jc-country-select-globe-size); stroke: currentColor; transition: color 0.3s ease; display: block; } .jc-country-selector__toggle:hover .jc-country-selector__icon--globe, .jc-country-selector__toggle:focus-visible .jc-country-selector__icon--globe, .jc-country-selector.is-open .jc-country-selector__toggle .jc-country-selector__icon--globe { color: var(--jc-country-select-globe-hover-color); } .jc-country-selector__icon--chevron { color: var(--jc-country-select-chevron-color); } .jc-country-selector__icon--chevron svg { width: var(--jc-country-select-chevron-size); height: var(--jc-country-select-chevron-size); display: block; } .jc-country-selector__toggle:hover .jc-country-selector__icon--chevron, .jc-country-selector__toggle:focus-visible .jc-country-selector__icon--chevron, .jc-country-selector.is-open .jc-country-selector__toggle .jc-country-selector__icon--chevron { color: var(--jc-country-select-chevron-color-hover); } .jc-country-selector__menu { position: absolute; top: 100%; left: 0; z-index: 20; min-width: 160px; background: var(--jc-country-select-dropdown-bg-color); border-radius: var(--jc-country-select-dropdown-border-radius); border: var(--jc-country-select-dropdown-border); box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); overflow: hidden; padding: var(--jc-country-select-dropdown-padding); } .footer .jc-country-selector__menu { left: auto; right: 0; } .header__menu-mobile-footer-actions .jc-country-selector__menu { left: auto; right: 0; top: auto; bottom: 100%; } .jc-country-selector__menu[hidden] { display: none; } .jc-country-selector__item { display: block; padding: var(--jc-country-select-dropdown-item-bg-padding); text-decoration: none; background-color: var(--jc-country-select-dropdown-item-bg-color); color: var(--jc-country-select-dropdown-item-text); font-size: 13px; transition: color 0.3s ease, background-color 0.3s ease; } a.jc-country-selector__item:hover, a.jc-country-selector__item:focus-visible { background-color: var(--jc-country-select-dropdown-item-bg-color-hover); color: var(--jc-country-select-dropdown-item-text-hover); outline: none; } .jc-country-selector__item--current { color: var(--jc-country-select-dropdown-item-text-current); cursor: default; } /* ======================================*/ /* Buttons /* ======================================*/ /* Primary / Base */ .btn, .btn--orange:not(.wp-block-button), .btn--orange.wp-block-button .wp-block-button__link, .gform-button, .gform_button, .gform_next_button, .theme-jetcharge .tingle-btn.tingle-btn--primary, .wp-block-button .wp-block-button__link, /* Secondary selectors */ .btn--secondary:not(.wp-block-button), .btn--secondary.wp-block-button .wp-block-button__link, .jc-form-on-orange .gform_button, .theme-jetcharge .gform_wrapper.gravity-theme .gform_previous_button.button, /* Needed for specificity to override gravity forms default theme styling */ .theme-jetcharge .gform_wrapper.gravity-theme .gpnf-add-entry, /* Needed for specificity to override gravity forms default theme styling */ .theme-jetcharge .tingle-btn.tingle-btn--default, .theme-jetcharge .tingle-btn.tingle-btn--default, .theme-jetcharge .gform_previous_button, .theme-jetcharge .gform_save_link.button, .theme-jetcharge .gform_wrapper.gravity-theme .gform_save_link.button, .theme-jetcharge .gform-theme-button--secondary.button, .theme-jetcharge .gform_wrapper.gravity-theme .gform-theme-button--secondary.button { position: relative; overflow: hidden; display: inline-flex; flex-direction: row; gap: var(--brand-btn-gap-md); box-sizing: border-box; justify-content: center; align-items: center; height: auto; padding: var(--brand-btn-padding-md); min-width: 0; min-height: calc(var(--brand-btn--icon-size) + var(--brand-btn-padding-md-v) * 2); background-color: transparent; border-radius: var(--brand-btn-border-radius-md); text-decoration: none; font-size: var(--brand-btn-font-size-md); line-height: var(--brand-btn-line-height); font-weight: var(--brand-btn-font-weight); cursor: pointer; transition: color ease-out var(--brand-btn--transistion-length), background-color ease-out var(--brand-btn--transistion-length), border-color ease-out var(--brand-btn--transistion-length), padding ease-out var(--brand-btn--transistion-length); z-index: 1; border: var(--brand-btn-outline-border-width) solid transparent; } .btn, .btn--orange .wp-block-button__link, .gform-button, .gform_button, .gform_next_button, .theme-jetcharge .tingle-btn--primary, .wp-block-button .wp-block-button__link { color: var(--brand-color-white); } .btn::before, .gform-button::before, .gform_button::before, .gform_next_button::before, .theme-jetcharge .tingle-btn--primary::before, .wp-block-button .wp-block-button__link:before { content: ''; position: absolute; top: 0; left: -100%; display: block; width: 200%; height: 100%; background-color: var(--brand-btn-color--orange--bg); background-image: url('/wp-content/themes/evolut-starter/assets/brand-btn-gradient.png'); background-size: cover; background-position: 0% 50%; z-index: -1; transform: translateX(0%); transition: transform ease-out var(--brand-btn--transistion-length); } .btn:hover::before, .gform-button:hover::before, .gform_button:hover::before, .gform_next_button:hover::before, .theme-jetcharge .tingle-btn--primary:hover::before, .wp-block-button .wp-block-button__link:hover::before { transform: translateX(50%); } /* Filled with custom background */ .btn--secondary:not(.wp-block-button):before, .btn.btn--outline:not(.wp-block-button):before, .btn--outline.wp-block-button .wp-block-button__link:before, .btn--secondary.wp-block-button .wp-block-button__link:before, .wp-block-button.is-style-outline .wp-block-button__link:before, /* Needed for specificity to override gravity forms default theme styling */ .theme-jetcharge .gform_wrapper.gravity-theme .gform_previous_button.button:before, .theme-jetcharge .tingle-btn--default:before, .theme-jetcharge .gform_previous_button:before, .theme-jetcharge .gform_save_link.button:before, .theme-jetcharge .gform_wrapper.gravity-theme .gform_save_link.button:before, .theme-jetcharge .gform-theme-button--secondary.button:before, .theme-jetcharge .gform_wrapper.gravity-theme .gform-theme-button--secondary.button:before, .btn--link:not(.wp-block-button):before, .btn--link.wp-block-button .wp-block-button__link:before, .btn--outline:not(.wp-block-button):before, .btn--outline.wp-block-button .wp-block-button__link:before, .btn--yellow:not(.wp-block-button):before, .btn--yellow.wp-block-button .wp-block-button__link:before, .btn--green:not(.wp-block-button):before, .btn--green.wp-block-button .wp-block-button__link:before, .btn--black:not(.wp-block-button):before, .btn--black.wp-block-button .wp-block-button__link:before, .btn--white:not(.wp-block-button):before, .btn--white.wp-block-button .wp-block-button__link:before, .wp-block-button .wp-block-button__link.has-background:before, .jc-form-on-orange .gform_button:before { display: none; } /* Yellow */ .btn--yellow:not(.wp-block-button), .btn--yellow.wp-block-button .wp-block-button__link { background-color: var(--brand-btn-color--yellow--bg); color: var(--brand-btn-color--yellow--text); } .btn--yellow:not(.wp-block-button):hover, .btn--yellow.wp-block-button .wp-block-button__link:hover { background-color: var(--brand-btn-color--orange--bg); color: var(--brand-btn-color--orange--text); } /* Green */ .btn--green:not(.wp-block-button), .btn--green.wp-block-button .wp-block-button__link { background-color: var(--brand-btn-color--green--bg); color: var(--brand-btn-color--green--text); } .btn--green:not(.wp-block-button):hover, .btn--green.wp-block-button .wp-block-button__link:hover { background-color: var(--brand-btn-color--white--bg); color: var(--brand-btn-color--white--text); } /* Black */ .jc-form-on-orange .gform_button, .btn--black:not(.wp-block-button), .btn--black.wp-block-button .wp-block-button__link { background-color: var(--brand-btn-color--black--bg); color: var(--brand-btn-color--black--text); } .jc-form-on-orange .gform_button:hover, .btn--black:not(.wp-block-button):hover, .btn--black.wp-block-button .wp-block-button__link:hover { background-color: var(--brand-btn-color--yellow--bg); color: var(--brand-btn-color--yellow--text); } /* White */ .btn--white:not(.wp-block-button), .btn--white.wp-block-button .wp-block-button__link { background-color: var(--brand-btn-color--white--bg); color: var(--brand-btn-color--white--text); } .btn--white:not(.wp-block-button):hover, .btn--white.wp-block-button .wp-block-button__link:hover { background-color: var(--brand-btn-color--black--bg); color: var(--brand-btn-color--black--text); } /* Base Outline */ .btn--secondary:not(.wp-block-button), .btn.btn--outline:not(.wp-block-button), .btn--outline.wp-block-button .wp-block-button__link, .btn--secondary.wp-block-button .wp-block-button__link, .wp-block-button.is-style-outline .wp-block-button__link, /* Needed for specificity to override gravity forms default theme styling */ .theme-jetcharge .gform_wrapper.gravity-theme .gform_previous_button.button, .theme-jetcharge .tingle-btn--default, .theme-jetcharge .gform_previous_button, .theme-jetcharge .gform_save_link.button, .theme-jetcharge .gform_wrapper.gravity-theme .gform_save_link.button, .theme-jetcharge .gform-theme-button--secondary.button, .theme-jetcharge .gform_wrapper.gravity-theme .gform-theme-button--secondary.button { color: var(--brand-color-black); border: var(--brand-btn-outline-border-width) solid var(--brand-color-black); background-color: transparent; } .btn.btn--outline:not(.wp-block-button):hover, .btn--outline.wp-block-button .wp-block-button__link:hover, .btn--secondary:not(.wp-block-button):hover, .btn--secondary.wp-block-button .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:hover, /* Needed for specificity to override gravity forms default theme styling */ .theme-jetcharge .gform_wrapper.gravity-theme .gform_previous_button.button:hover, .theme-jetcharge .tingle-btn--default:hover, .theme-jetcharge .gform_previous_button:hover, .theme-jetcharge .gform_save_link.button:hover, .theme-jetcharge .gform_wrapper.gravity-theme .gform_save_link.button:hover, .theme-jetcharge .gform-theme-button--secondary.button:hover, .theme-jetcharge .gform_wrapper.gravity-theme .gform-theme-button--secondary.button:hover { color: var(--brand-color-black); border-color: var(--brand-color-secondary); background-color: var(--brand-color-secondary); } /* Orange Outline */ .theme-jetcharge .gform_wrapper.gravity-theme .gpnf-add-entry, .btn.btn--outline.btn--orange:not(.wp-block-button), .wp-block-button.btn--orange.is-style-outline .wp-block-button__link, .wp-block-button.btn--orange.btn--outline .wp-block-button__link { border-color: var(--brand-btn-color--orange--bg); color: var(--brand-btn-color--orange--bg); } .theme-jetcharge .gform_wrapper.gravity-theme .gpnf-add-entry:hover, .btn.btn--outline.btn--orange:not(.wp-block-button):hover, .wp-block-button.btn--orange.is-style-outline .wp-block-button__link:hover, .wp-block-button.btn--orange.btn--outline .wp-block-button__link:hover { border-color: var(--brand-btn-color--orange--bg); background-color: var(--brand-btn-color--orange--bg); color: var(--brand-btn-color--orange--text); } /* Yellow Outline */ .btn.btn--outline.btn--yellow:not(.wp-block-button), .wp-block-button.btn--yellow.is-style-outline .wp-block-button__link, .wp-block-button.btn--yellow.btn--outline.wp-block-button .wp-block-button__link { border-color: var(--brand-btn-color--yellow--bg); color: var(--brand-btn-color--yellow--bg); } .btn.btn--outline.btn--yellow:not(.wp-block-button):hover, .wp-block-button.btn--yellow.is-style-outline .wp-block-button__link:hover, .wp-block-button.btn--yellow.btn--outline.wp-block-button .wp-block-button__link:hover { border-color: var(--brand-btn-color--yellow--bg); background-color: var(--brand-btn-color--yellow--bg); color: var(--brand-btn-color--yellow--text); } /* Green Outline */ .btn.btn--outline.btn--green:not(.wp-block-button), .wp-block-button.btn--green.is-style-outline .wp-block-button__link, .wp-block-button.btn--green.btn--outline .wp-block-button__link { border-color: var(--brand-btn-color--green--bg); color: var(--brand-btn-color--green--bg); } .btn.btn--outline.btn--green:not(.wp-block-button):hover, .wp-block-button.btn--green.is-style-outline .wp-block-button__link:hover, .wp-block-button.btn--green.btn--outline .wp-block-button__link:hover { border-color: var(--brand-btn-color--green--bg); background-color: var(--brand-btn-color--green--bg); color: var(--brand-btn-color--green--text); } /* Black Outline */ .btn.btn--outline.btn--black:not(.wp-block-button), .btn--black.is-style-outline .wp-block-button__link, .btn--black.btn--outline .wp-block-button__link { border-color: var(--brand-btn-color--black--bg); color: var(--brand-btn-color--black--bg); } .btn.btn--outline.btn--black:not(.wp-block-button):hover, .btn--black.is-style-outline .wp-block-button__link:hover, .btn--black.btn--outline .wp-block-button__link:hover { border-color: var(--brand-btn-color--black--bg); background-color: var(--brand-btn-color--black--bg); color: var(--brand-btn-color--black--text); } /* White Outline*/ .btn.btn--outline.btn--white:not(.wp-block-button), .btn--white.is-style-outline .wp-block-button__link, .btn--white.btn--outline .wp-block-button__link { border-color: var(--brand-btn-color--white--bg); color: var(--brand-btn-color--white--bg); } .btn.btn--outline.btn--white:not(.wp-block-button):hover, .btn--white.is-style-outline .wp-block-button__link:hover, .btn--white.btn--outline .wp-block-button__link:hover { border-color: var(--brand-btn-color--white--bg); background-color: var(--brand-btn-color--white--bg); color: var(--brand-btn-color--white--text); } /* Btn link style */ .btn.btn--link:not(.wp-block-button), .btn--link .wp-block-button__link, .wp-block-button.btn--link .wp-block-button__link { background-color: transparent; border: none; color: var(--brand-btn-color--black--bg); } .btn.btn--link:not(.wp-block-button):hover, .btn--link .wp-block-button__link:hover, .wp-block-button.btn--link .wp-block-button__link:hover { background-color: var(--brand-btn-color--yellow--bg); color: var(--brand-btn-color--yellow--text); border: none; } .btn.btn--link:not(.wp-block-button):not(:hover), .btn--link .wp-block-button__link:not(:hover), .wp-block-button.btn--link .wp-block-button__link:not(:hover) { padding-left: 0; padding-right: 0; } /* Orange Link */ .btn.btn--link.btn--orange:not(.wp-block-button), .btn--orange.btn--link .wp-block-button__link { border-color: var(--brand-btn-color--orange--bg); color: var(--brand-btn-color--orange--bg); } .theme-jetcharge .gform_wrapper.gravity-theme .gpnf-add-entry:hover, .btn.btn--link.btn--orange:not(.wp-block-button):hover, .btn--orange.btn--link .wp-block-button__link:hover { border-color: var(--brand-btn-color--orange--bg); background-color: var(--brand-btn-color--orange--bg); color: var(--brand-btn-color--orange--text); } /* Yellow Link */ .btn.btn--link.btn--yellow:not(.wp-block-button), .btn--yellow.btn--link .wp-block-button__link { border-color: var(--brand-btn-color--yellow--bg); color: var(--brand-btn-color--yellow--bg); } .btn.btn--link.btn--yellow:not(.wp-block-button):hover, .btn--yellow.btn--link .wp-block-button__link:hover { border-color: var(--brand-btn-color--yellow--bg); background-color: var(--brand-btn-color--yellow--bg); color: var(--brand-btn-color--yellow--text); } /* Green Link */ .btn.btn--link.btn--green:not(.wp-block-button), .btn--green.btn--link .wp-block-button__link { border-color: var(--brand-btn-color--green--bg); color: var(--brand-btn-color--green--bg); } .btn.btn--link.btn--green:not(.wp-block-button):hover, .btn--green.btn--link .wp-block-button__link:hover { border-color: var(--brand-btn-color--green--bg); background-color: var(--brand-btn-color--green--bg); color: var(--brand-btn-color--green--text); } /* Black Link */ .btn.btn--link.btn--black:not(.wp-block-button), .btn--black.btn--link .wp-block-button__link { border-color: var(--brand-btn-color--black--bg); color: var(--brand-btn-color--black--bg); } .btn.btn--link.btn--black:not(.wp-block-button):hover, .btn--black.btn--link .wp-block-button__link:hover { border-color: var(--brand-btn-color--black--bg); background-color: var(--brand-btn-color--black--bg); color: var(--brand-btn-color--black--text); } /* White Link*/ .btn.btn--link.btn--white:not(.wp-block-button), .btn--white.btn--link .wp-block-button__link { border-color: var(--brand-btn-color--white--bg); color: var(--brand-btn-color--white--bg); } .btn.btn--link.btn--white:not(.wp-block-button):hover, .btn--white.btn--link .wp-block-button__link:hover { border-color: var(--brand-btn-color--white--bg); background-color: var(--brand-btn-color--white--bg); color: var(--brand-btn-color--white--text); } /* Button block sizes */ .btn--tiny:not(.wp-block-button), .wp-block-button__link.has-small-font-size.has-custom-font-size, .wp-block-button.has-small-font-size .wp-block-button__link { --brand-btn--icon-size: 16px; padding: var(--brand-btn-padding-sm); font-size: var(--brand-btn-font-size-sm) !important; border-radius: var(--brand-btn-border-radius-sm); gap: var(--brand-btn-gap-sm); min-height: calc(var(--brand-btn--icon-size) + var(--brand-btn-padding-sm-v) * 2); } .btn--small:not(.wp-block-button), .wp-block-button__link.has-medium-font-size.has-custom-font-size, .wp-block-button.has-medium-font-size .wp-block-button__link { --brand-btn--icon-size: 20px; padding: var(--brand-btn-padding-md); font-size: var(--brand-btn-font-size-md) !important; border-radius: var(--brand-btn-border-radius-md); gap: var(--brand-btn-gap-md); min-height: calc(var(--brand-btn--icon-size) + var(--brand-btn-padding-md-v) * 2); } .btn--large:not(.wp-block-button), .wp-block-button__link.has-large-font-size.has-custom-font-size, .wp-block-button.has-large-font-size .wp-block-button__link { --brand-btn--icon-size: 24px; padding: var(--brand-btn-padding-lg); font-size: var(--brand-btn-font-size-lg) !important; border-radius: var(--brand-btn-border-radius-lg); gap: var(--brand-btn-gap-lg); min-height: calc(var(--brand-btn--icon-size) + var(--brand-btn-padding-lg-v) * 2); } .btn--x-large, .wp-block-button__link.has-x-large-font-size.has-custom-font-size, .wp-block-button.has-x-large-font-size .wp-block-button__link { --brand-btn--icon-size: 26px; padding: var(--brand-btn-padding-xl); font-size: var(--brand-btn-font-size-xl) !important; border-radius: var(--brand-btn-border-radius-xl); gap: var(--brand-btn-gap-xl); min-height: calc(var(--brand-btn--icon-size) + var(--brand-btn-padding-xl-v) * 2); } /* Gforms save button */ .gform_button.button + .gform_save_link.button, .gform_button.button + .theme-jetcharge .gform_wrapper.gravity-theme .gform_save_link.button { margin-left: 10px; } .gform_save_link.button svg, .theme-jetcharge .gform_wrapper.gravity-theme .gform_save_link.button svg { flex-shrink: 0; } .theme-jetcharge .gform_wrapper.gravity-theme .gpnf-add-entry { height: auto; padding: var(--brand-btn-padding-sm); min-width: 0; } /* Nested forms buttons */ .theme-jetcharge .tingle-btn.gpnf-spinner { background-color: var(--brand-color-primary); } .theme-jetcharge .tingle-btn.gpnf-spinner:before { top: 50%; left: 50%; width: 1rem; height: 1rem; background: transparent; z-index: 2; transform: unset; } .theme-jetcharge .tingle-modal-box__footer .gpnf-btn-cancel-mobile { display: none; } @media (max-width: 712px) { .theme-jetcharge .tingle-modal-box__footer .tingle-btn { display: block; width: 100%; min-width: 100%; } .theme-jetcharge .tingle-modal-box__footer .gpnf-btn-cancel, .theme-jetcharge .tingle-modal-box__footer .gpnf-btn-delete { display: none; } .theme-jetcharge .tingle-modal-box__footer .gpnf-btn-cancel-mobile { display: block; } } /* Force nested form buttons to always take on JET Charge styling, and ignore settings */ .theme-jetcharge .tingle-modal-box__footer .tingle-btn--default { color: var(--brand-color-black) !important; border: var(--brand-btn-outline-border-width) solid var(--brand-color-black) !important; background-color: transparent !important; height: auto; } .theme-jetcharge .tingle-modal-box__footer .tingle-btn--default:hover { color: var(--brand-color-black) !important; border-color: var(--brand-color-secondary) !important; background-color: var(--brand-color-secondary) !important; } .theme-jetcharge .gpnf-btn-cancel { height: auto; padding: var(--brand-btn-padding-md); border-radius: var(--brand-btn-border-radius-md) !important; } .theme-jetcharge .tingle-btn--danger { background-color: var(--brand-color-error) !important; } /* Specific for inline gravity form submit button */ #field_submit[data-field-position="inline"] { align-items: flex-end; } .btn-group { --button-spacing: 10px; display: flex; } .btn-group > .btn { width: 100%; } .btn-group > .btn:not(:last-child) { margin-right: var(--button-spacing); } .btn__icon, .btn .feather, .wp-block-button__link .feather { width: var(--brand-btn--icon-size); height: var(--brand-btn--icon-size); } .btn__icon--right { margin-left: 7px; } /* ======================================*/ /* Button Helpers /* ======================================*/ .btn-holder { position: relative; z-index: 0; } @media (max-width: 1023px) { .wp-block-buttons.buttons--mobile-center { justify-content: center !important; } } /* /Buttons ======================================*/ .input, .theme-jetcharge .gform_wrapper.gravity-theme .gfield input, .theme-jetcharge .gform_wrapper.gravity-theme .gfield select { height: auto; line-height: var(--brand-form--field--line-height); padding: var(--brand-form--field--padding); background-color: var(--brand-form--field--bg-color); border: var(--brand-form--field--border); border-radius: var(--brand-form--field--border-radius); color: var(--brand-form--field--text-color); } .input--file, .theme-jetcharge .gform_wrapper.gravity-theme .gfield input[type="file"] { border: 0; padding: 0; } .textarea, .theme-jetcharge .gform_wrapper.gravity-theme .gfield textarea { height: auto; line-height: var(--brand-form--field--line-height); padding: var(--brand-form--field--padding); background-color: var(--brand-form--field--bg-color); border: var(--brand-form--field--border); border-radius: var(--brand-form--field--border-radius); color: var(--brand-form--field--text-color); } @media (min-width: 641px) { .gfield.gfield--type-address.jc-address-2-rows .ginput_container .ginput_address_line_1 { flex-basis: 66.666%; } .gfield.gfield--type-address.jc-address-2-rows .ginput_container .ginput_address_line_2 { flex-basis: 33.333%; order: -1; } .gfield.gfield--type-address.jc-address-2-rows .ginput_container .ginput_address_city, .gfield.gfield--type-address.jc-address-2-rows .ginput_container .ginput_address_state, .gfield.gfield--type-address.jc-address-2-rows .ginput_container .ginput_address_zip { flex-basis: 33.333%; margin-bottom: 8px; } } .option-button { display: inline-block; padding: 12px 24px; margin: 10px 0; background-color: #FF8200; /* JET Charge orange */ color: white; text-decoration: none; border-radius: 6px; font-weight: 600; font-size: 16px; transition: all 0.2s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.1); cursor: pointer; } .option-button:hover { background-color: #e06f00; /* slightly darker on hover */ box-shadow: 0 4px 8px rgba(0,0,0,0.15); } .option-button:active { transform: scale(0.97); } .form-padding-wide { padding-left: 100px; padding-right: 100px; padding-top: 50px; padding-bottom: 50px; max-width: 1200px; margin: 0 auto; } .el-select__options--above .el-select__options { top: auto; bottom: calc(var(--select-height) - 1px); } .pagination { display: flex; justify-content: center; margin-bottom: 120px; } .pagination .nav-links { display: flex; } .pagination .page-numbers { box-sizing: border-box; display: flex; justify-content: center; align-items: center; width: 42px; height: 42px; margin: 0 3px; border: 2px solid transparent; border-radius: var(--brand-btn-border-radius); color: var(--primary-dark-grey-color); text-decoration: none; font-size: 18px; line-height: 18px; } .pagination .page-numbers.current { border-color: var(--brand-color-primary); } .input--select { padding: 0 var(--brand-form--field--padding); } .input--select--hidden { display: none !important; } .el-select { --select-height: 3.032em; --side-padding: var(--brand-form--field--padding); --background-color: var(--brand-form--field--bg-color); position: relative; width: 350px; max-width: 100%; display: block; padding: 0; background: none; border: none; font-size: 16px; } .el-select__options--above .el-select__options { top: auto; bottom: calc(var(--select-height) - 1px); } .gfield__select--full .el-select { width: 100%; } .el-select button { cursor: pointer; background-color: transparent; border: none; height: var(--select-height); width: 100%; } .el-select::before { content: attr(selected-text); display: block; box-sizing: border-box; height: var(--select-height); line-height: var(--select-height); border: var(--brand-form--field--border); border-radius: var(--brand-form--field--border-radius); background-color: var(--background-color); padding: 0 var(--side-padding); color: var(--brand-form--field--text-color); } .el-select::before, .el-select button { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .el-select--disabled::before { background-color: var(--brand-form--field--bg-color-disabled); border-color: var(--brand-form--field--border-color-disabled); color: var(--brand-form--field--text-color-disabled); } .el-select::after { content: ''; width: 0; height: 0; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--brand-color-black); pointer-events: none; } .el-select.el-select--active::after { border-top: none; border-bottom: 5px solid var(--brand-color-black); } .el-select[value=""]::before { color: var(--brand-form--field--text-color-disabled); } .el-select__trigger { position: absolute; top: 0; left: 0; } .el-select__search { box-sizing: border-box; width: 100%; height: 100%; border: 0; background-color: transparent; padding: 0 var(--side-padding); } .el-select__search:focus { background-color: var(--background-color); } .el-select__options { position: absolute; display: none; top: calc(var(--select-height) + 8px); left: 0; min-width: 100%; border-radius: var(--brand-form--field--border-radius); background-color: var(--brand-form--field--bg-color); box-shadow: 0 5px 16px rgba(0,0,0, 0.1); max-height: 200px; overflow-y: scroll; } .el-select.el-select--active .el-select__options { display: block; z-index: 6; } .el-select__option { display: block; box-sizing: border-box; line-height: var(--select-height); padding: 0 20px; text-align: left; } .el-select__option--hidden { display: none; } .el-select__option:hover { background-color: var(--brand-color-primary-5); } .el-select__option:empty { height: 1.25em; line-height: 1.25em; pointer-events: none; } .el-select__option:empty::before { content: '---'; } .el-select:not(.el-select--multi) .el-select__option.el-select__option--selected { background-color: var(--brand-color-primary); color: var(--brand-color-white); } .el-select--multi .el-select__option { display: flex; align-items: center; } .el-select--multi .el-select__option:before { content: ""; display: inline-block; width: 24px; height: 24px; flex: 0 0 24px; padding: 0; border-radius: 50%; border: 2px solid var(--brand-color-primary); margin-right: 15px; } .el-select--multi .el-select__option--selected:before { background-color: var(--brand-color-primary); box-shadow: inset 0 0 0 3px var(--brand-color-white); } :root { --jc-radio-circle-size: 24px; --jc-radio-circle-space: 15px; --jc-radio-border-width: 2px; } /* double .gfield-choice-input increases specificity */ .theme-jetcharge .gform_wrapper.gravity-theme .gfield--type-consent [type="checkbox"] + label, .theme-jetcharge .gform_wrapper.gravity-theme .gfield--type-choice:not(.form-group--checkRadioStyle--boxed) .gfield-choice-input.gfield-choice-input + label { max-width: calc(100% - (var(--jc-radio-circle-size) + var(--jc-radio-circle-space) + (3 * var(--jc-radio-border-width)))); } .theme-jetcharge .gform_wrapper.gravity-theme .gfield--type-consent [type="checkbox"] { display: inline-block; margin-top: 0; top: 0; vertical-align: middle; } .theme-jetcharge .gform_wrapper.gravity-theme .gfield--type-consent [type="checkbox"] + label { margin-bottom: 0; vertical-align: middle; display: inline-block; } .input--radio, .theme-jetcharge .gform_wrapper.gravity-theme .gfield--type-consent [type="checkbox"], .theme-jetcharge .gform_wrapper.gravity-theme .gfield-choice-input.gfield-choice-input { appearance: none; -webkit-appearance: none; width: var(--jc-radio-circle-size); height: var(--jc-radio-circle-size); padding: 0; border-radius: 50%; border: var(--jc-radio-border-width) solid var(--brand-form--check-radio--border-color); margin-right: var(--jc-radio-circle-space); } .theme-jetcharge .gform_wrapper.gravity-theme .gfield--type-consent [type="checkbox"], .theme-jetcharge .gform_wrapper.gravity-theme .gfield-choice-input.gfield-choice-input[type="checkbox"] { border-radius: var(--brand-form--check-border-radius); } .input--radio:checked, .theme-jetcharge .gform_wrapper.gravity-theme .gfield--type-consent [type="checkbox"]:checked, .theme-jetcharge .gform_wrapper.gravity-theme .gfield-choice-input.gfield-choice-input:checked { background-color: var(--brand-form--check-radio--active-color); border-color: var(--brand-form--check-radio--active-color); /*box-shadow: inset 0 0 0 3px white;*/ } .theme-jetcharge .gform_wrapper.gravity-theme .gfield--type-consent [type="checkbox"]:checked, .theme-jetcharge .gform_wrapper.gravity-theme .gfield-choice-input.gfield-choice-input[type="checkbox"]:checked, .theme-jetcharge .gform_wrapper.gravity-theme .gfield-choice-input.gfield-choice-input[type="radio"]:checked { background-image: var(--brand-icon-svg--tick--white); background-repeat: no-repeat; background-size: calc(var(--jc-radio-circle-size) - 10px); background-position: center center; } .search-form { position: relative; width: 490px; max-width: 100%; } .search-form__input { box-sizing: border-box; height: 50px; width: 100%; line-height: 50px; border: 1px solid #ccc; border-radius: 50px; padding: 0 20px 0 45px; } .search-form__btn { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 45px; height: 100%; background: transparent; border: 0; color: #999; cursor: pointer; } .search-form__btn svg { width: 21px; height: 21px; } /* Google Reviews */ .reviews-holder--gradient > .wp-block-column, .reviews-holder--grey > .wp-block-column { --reviewRowPadding: 50px; padding-top: var(--reviewRowPadding); padding-bottom: var(--reviewRowPadding); } @media (min-width: 993px) { .reviews-holder--gradient > .wp-block-column, .reviews-holder--grey > .wp-block-column { --reviewRowPadding: 70px; } } .reviews-holder--gradient { background: url('/wp-content/themes/evolut-starter/assets/brand-gradient-1.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; } .reviews-holder--grey { background: var(--brand-color-black-25); } /* Slide holding the number of reviews specified in template settings */ [class*="reviews-holder"] .wprev-slider .wprs_unslider-wrap > li { display: flex; } @media (min-width: 993px) { /* Wrapper within the slide holding the individual review columns */ [class*="reviews-holder"] .wprev-slider .wprs_unslider-wrap > li > div { display: flex; } /* The review column element */ [class*="reviews-holder"] .wprev-slider .wprs_unslider-wrap > li > div > div { display: flex; flex-direction: column; } /* The review bubble */ [class*="reviews-holder"] .wprev-slider .wprs_unslider-wrap > li > div > div > div:first-child { flex-grow: 1; } /* The review bubble stars, verified and content */ [class*="reviews-holder"] .wprev-slider .wprs_unslider-wrap > li > div > div > div:first-child > p:first-child { overflow: hidden; text-overflow: ellipsis; display: -webkit-box !important; -webkit-line-clamp: 6; -webkit-box-orient: vertical; } } /* The review bubble stars, verified and content */ [class*="reviews-holder"] .wprevpro_star_imgs span.svgicons { background: var(--brand-color-primary); } [class*="reviews-holder"] .wprev-slider .wprs_rd_more { white-space: nowrap; } [class*="reviews-holder"] .wprs_unslider-arrow { background-color: var(--brand-color-black); opacity: 1; } [class*="reviews-holder"] .wprs_unslider-nav ol li{ border-color: var(--brand-color-black); } [class*="reviews-holder"] .wprs_unslider-nav ol li.wprs_unslider-active { background-color: var(--brand-color-black); } .sqs-image-shape-container-element.has-aspect-ratio { padding-bottom: 0!important; } .algolia-header-search input { height:40px; padding: 0px 10px; background-color: #EFEDE8; border: 0px solid white; border-radius: 4px; width:calc(100% - 5px); } .header--overlay:not(.header--open) .algolia-header-search input { background-color: rgba(239, 237, 232, 0.2); color: white; } .header--overlay:not(.header--open) .algolia-header-search input::placeholder { color: rgba(255,255,255,0.5); } .algolia-header-search input:focus { outline: none; } .algolia-autocomplete{ box-shadow: 0 5px 16px rgb(0,0,0,0.1); background: white; border-radius: 4px !important; } .algolia-autocomplete a{ font-family: proxima-nova !important; font-size: 14px; } .aa-dropdown-menu .suggestion-post-title{ font-weight: normal !important; } .aa-suggestions{ padding: 10px 0px; } .aa-dropdown-menu .autocomplete-header, .aa-dropdown-menu .suggestion-post-content{ display: none !important; } .aa-dropdown-menu em{ color: #000 !important; background: transparent !important; font-weight: normal !important; } .aa-dropdown-menu .aa-suggestion:hover{ color: #000 !important; background: #EFEDE8 !important; font-weight: normal !important; } input[type="search" i]::-webkit-search-cancel-button { filter: grayscale(1); } /* LIZ ADDED: Algolia search suggestions extension on larger screens */ @media screen and (min-width: 1024px){ .algolia-autocomplete { width: auto !important; left: 50vw !important; right: var(--padding-width); } .algolia-autocomplete .aa-dropdown-menu { border-radius: 4px 0 4px 4px !important; } } @media screen and (min-width: 1600px){ .algolia-autocomplete { right: calc(50vw - (var(--container-max-width) / 2)); } } /* LIZ: Added for styling of search field in header for Shopify */ /* Scoping this style so it doesn't mess with other styles for the field on WP. */ .jetcharge-wp-section[data-section-name="header"] .algolia-header-search input { height: 40px; padding: 0 10px; background-color: #EFEDE8; border: 0 solid white; border-radius: 4px; width: calc(100% - 5px); } .text-with-image__title { margin-bottom: 80px; color: var(--brand-color-black); } .text-with-image__title--center { text-align: center; } .text-with-image__title--right { text-align: right; } .text-with-image__sub-title { margin-bottom: 20px; } .text-with-image__text { column-gap: 56px; } .text-with-image__text p:first-child { margin-top: 0; } .text-with-image__text p:last-child { margin-bottom: 0; } .text-with-image__btn { margin-top: 30px; } .text-with-image__image-container { position: relative; overflow: hidden; line-height: 0; } .text-with-image__image { width: 100%; } .text-with-image__image-col--cover { position: relative; } .text-with-image__image-col--cover .text-with-image__image-container { position: absolute; width: 100%; height: 100%; } .text-with-image--reverse .text-with-image__image-container::after { right: auto; left: 0; transform-origin: center left; } .text-with-image__image-col--cover .text-with-image__image { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 767px) { .text-with-image__title { margin-bottom: 30px; } .text-with-image__image-col { order: -1; margin-bottom: 30px; } /*.text-with-image__image-col ~ */ .text-with-image__gap-col { display: none; } .text-with-image__image-col--cover { height: 190px; } } .text-with-image.items-center .grid { align-items: center; } @media (min-width: 768px) and (max-width: 1023px) { .text-with-image.items-center .text-with-image__image-col { margin-bottom: 0; } } .hero-banner-with-list { --section-height: 100vh; --min-section-height: 560px; position: relative; display: flex; height: var(--section-height); min-height: var(--min-section-height); background-size: cover; background-position: center; } .hero-banner-with-list--shadow-overlay { background-color: var(--brand-color-black); } .hero-banner-with-list__grid { position: relative; height: 100%; z-index: 2; } .hero-banner-with-list__container { display: flex; height: 100%; flex-direction: column; justify-content: center; color: var(--brand-color-white); } .hero-banner-with-list--content-vertical-align-middle .hero-banner-with-list__container { justify-content: center; } .hero-banner-with-list--content-vertical-align-bottom .hero-banner-with-list__container { justify-content: flex-end; } .hero-banner-with-list--content-vertical-align-bottom .hero-banner-with-list__grid { padding-bottom: calc(var(--padding-width) * 1.25); } .block-editor__container .hero-banner-with-list__bg-image, .hero-banner-with-list__bg-image, .block-editor__container .hero-banner-with-list__video, .hero-banner-with-list__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .hero-banner-with-list--shadow-overlay .hero-banner-with-list__bg-image, .hero-banner-with-list--shadow-overlay .hero-banner-with-list__video { opacity: 0.5; } .hero-banner-with-list__title { margin-bottom: 20px; color: inherit; } .hero-banner-with-list__text { font-size: 26px; line-height: 36px; margin-bottom: 30px; } .hero-banner-with-list__list { display: flex; flex-direction: column; } .hero-banner-with-list__list-item { position: relative; display: flex; align-items: center; box-sizing: border-box; width: 100%; padding-right: 50px; min-height: 47px; font-size: 18px; line-height: 27px; font-weight: bold; text-decoration: none; } .hero-banner-with-list__list-item.btn { justify-content: space-between; padding-left: 25px; line-height: 1.2; padding-top: 10px; padding-bottom: 10px; height: auto; min-height: 49px; } .hero-banner-with-list__list-item:not(.btn) { color: white; } .hero-banner-with-list__list-item:not(.btn):hover { color: var(--brand-color-secondary); } .hero-banner-with-list__list-item:not(.btn):not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.3); } .hero-banner-with-list__list-item.btn + .hero-banner-with-list__list-item, .hero-banner-with-list__list-item:not(.btn) + .hero-banner-with-list__list-item.btn { margin-top: 15px; } .hero-banner-with-list__list-icon { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); } .hero-banner-with-list__corner { position: absolute; left: 0; bottom: 67px; transform: translateY(50%); z-index: 1; max-width: var(--padding-width); } .hero-banner-with-list__btn { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; width: 56px; height: 56px; background-color: rgba(255, 255, 255, 0.2); border-radius: 50%; color: white; } @media (max-width: 1023px) { .hero-banner-with-list__corner { display: none; } } .hero-banner { --section-height: 522px; --min-section-height: 0; position: relative; height: var(--section-height); min-height: var(--min-section-height); background-size: cover; background-position: center; color: white; } .hero-banner:last-child { margin-bottom: 0; } .hero-banner::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); z-index: 2; } .block-editor__container .hero-banner__image, .hero-banner__image { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; object-fit: cover; object-position: center; } .hero-banner__container { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; text-align: center; } .hero-banner--content-horizontal-align-left .hero-banner__container { align-items: flex-start; text-align: left; } .hero-banner--content-horizontal-align-center .hero-banner__container { align-items: center; text-align: center; } .hero-banner--content-horizontal-align-right .hero-banner__container { align-items: flex-end; text-align: right; } .hero-banner--content-vertical-align-top .hero-banner__container { justify-content: flex-start; padding-top: var(--padding-width); } .hero-banner--content-vertical-align-middle .hero-banner__container { justify-content: center; } .hero-banner--content-vertical-align-bottom .hero-banner__container { justify-content: flex-end; padding-bottom: var(--padding-width); } .hero-banner__title { margin-bottom: 12px; color: inherit; } .hero-banner__text { margin-bottom: 32px; } /* Specific for use within in columns - store collection link option */ .wp-block-column .hero-banner .hero-banner__container { width: calc(100% - 60px); } .image-showcase { --visible-items: 5; --items-gap: 20px; --current-item: 1; text-align: center; } .image-showcase__container { position: relative; } .image-showcase__title { color: var(--brand-color-black); margin-bottom: 10px; } /* only work when container goes right after title and there is no text */ .image-showcase__title + .image-showcase__container { margin-top: 50px; } .image-showcase__text { margin-bottom: 40px; } .image-showcase__images { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; overflow: hidden; } .image-showcase:not(.image-showcase--scrollable) .image-showcase__images { gap: 40px; } @media (max-width: 1023px) { .image-showcase:not(.image-showcase--scrollable) .image-showcase__images { gap: 20px; } } .image-showcase__image-container { text-decoration: none; color: inherit; } .image-showcase__image:not(:hover) { filter: grayscale(1); } .image-showcase__image-description { margin-top: 15px; box-sizing: border-box; position: absolute; width: 240px; padding: 10px; background-color: var(--brand-color-white); box-shadow: 0px 15px 50px rgb(0 0 0 / 15%); border-radius: 4px; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 300ms ease-out; } .image-showcase__image-container:hover .image-showcase__image-description { opacity: 1; } .image-showcase__image-container:last-child .image-showcase__image-description { right: 0; } .image-showcase__navs { display: none; /* flex */ position: absolute; top: 50%; transform: translateY(-50%); justify-content: space-between; width: 100%; pointer-events: none; } .image-showcase__nav { border: 0; background: transparent; padding: 0; color: var(--brand-color-black); cursor: pointer; pointer-events: initial; } .image-showcase__nav svg { width: 48px; height: 48px; } @media (min-width: 1024px) { .image-showcase__image-container:not(:first-child):not(:last-child) { position: relative; } .image-showcase__image-container:not(:first-child):not(:last-child) .image-showcase__image-description { left: 50%; transform: translateX(-50%); } .image-showcase--scrollable .image-showcase__images { width: calc(100% - 100px * 2); margin: 0 auto; } .image-showcase--scrollable .image-showcase__image-container { width: calc((100% - var(--items-gap) * (var(--visible-items) - 1)) / var(--visible-items)); flex-shrink: 0; margin-right: var(--items-gap); transition: transform 300ms ease; transform: translateX(calc(-1 * (100% + var(--items-gap)) * (var(--current-item) - 1))); } .image-showcase--scrollable .image-showcase__navs { display: flex; } } @media (max-width: 1023px) { .image-showcase { --visible-items: 4 !important; --items-gap: 10px !important; } /*.image-showcase--scrollable .image-showcase__images { width: calc(100% - 20px * 2); }*/ .image-showcase__nav svg { width: 24px; } .image-showcase .image-showcase__images { overflow-x: auto; padding-bottom: 20px; } .image-showcase .image-showcase__image-container { height: 60px; flex-shrink: 0; } .image-showcase .image-showcase__image-container { margin: 0 10px; } .image-showcase .image-showcase__image { /*width: calc(50% - var(--item-gap) / 2);*/ height: 100%; object-fit: contain; width: unset; } .image-showcase__image-description { left: 50%; transform: translateX(-50%); } } .image-showcase:not(.image-showcase--scrollable) .image-showcase__images { gap: 40px; } @media (max-width: 1023px) { .image-showcase:not(image-showcase--scrollable) .image-showcase__images { gap: 20px; } } .image-slider { --slider-height: calc(100vh - var(--topbar-height) - var(--header-height) - var(--header-top-offset)); display: flex; align-items: flex-end; height: var(--slider-height); --slider-padding: calc(var(--padding-width) * 1.25); } .image-slider__item { background-size: cover; background-position: center; } .image-slider__item:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(var(--brand-color-black-rgb), 0.4); z-index: 2; } .image-slider__item--text-white:before { background: rgba(var(--brand-color-black-rgb), 0.4); } .image-slider__item--text-black:before { background: rgba(var(--brand-color-white-rgb), 0.6); } .block-editor__container .image-slider__img, .acf-block-preview .image-slider__img, .image-slider__img { width: 100%; height: 100%; object-fit: cover; position: absolute; z-index: 1; left: 0; top: 0; } .image-slider__item-container { position: relative; z-index: 3; box-sizing: border-box; display: flex; height: 100%; padding: var(--slider-padding) 0; flex-direction: column; justify-content: flex-end; align-items: flex-start; color: var(--brand-color-white); } .image-slider__item-title { margin-bottom: 20px; } .image-slider__item-title--white { color: var(--brand-color-white); } .image-slider__item-title--black { color: var(--brand-color-black); } .image-slider__item-sub-title { margin-bottom: 20px; } .image-slider__item-title + .image-slider__item-sub-title { margin-top: -20px; } .image-slider__item-sub-title--black { color: var(--brand-color-black); } .image-slider__item-sub-title--white { color: var(--brand-color-white); } .image-slider__item-text { font-size: var(--brand-body-text--font-size-3); max-width: 748px; margin-bottom: 30px; } .image-slider__item-text--black { color: var(--brand-color-black); } .image-slider__item-text--white { color: var(--brand-color-white); } .image-slider__item-btn { margin-top: 10px; } .image-slider__nav { position: relative; margin-bottom: var(--slider-padding); justify-content: flex-end; pointer-events: none; z-index: 4; } .image-slider__nav-item { pointer-events: initial; } @media (max-width: 1023px) { .image-slider { --slider-padding: 80px; } .image-slider__item-container { padding-bottom: calc(var(--slider-padding) + 20px); } .image-slider__nav { justify-content: flex-start; transform: translateY(100%); } } /* =================================== */ /* Image columns */ /* =================================== */ .image-columns { --imageColumnsPreTitleSize: var(--brand-body-text--font-size-4); --imageColumnsTitleSize: var(--brand-body-text--font-size-2); --imageColumnsTextSize: var(--brand-body-text--font-size-5); --imageColumnsBorder: var(--brand-form--field--border-color); --imageColumnsBackground: var(--brand-color-primary-5); --imageColumnsBorderRadius: var(--brand-form--field--border-radius); --item-max-width: 300px; } .image-columns__container.draggable-content__items { --item-max-width: 300px; } .image-columns__container { row-gap: 40px; } .image-columns__item.draggable-content__item { margin-right: 0; } .image-columns__item-image-container { display: flex; justify-content: flex-start; margin-bottom: 20px; } .image-columns__item-image { max-height: 100px; width: unset; } .image-columns__item-image-link, .image-columns__item-image-link .image-columns__item-image { display: block; } .image-columns__item-pre-title { font-size: var(--imageColumnsPreTitleSize); margin-bottom: 12px; } .image-columns__item-title { font-size: var(--imageColumnsTitleSize); margin-bottom: 24px; } .image-columns__item-title-link { text-decoration: none; color: inherit; } .image-columns__item-title-link:hover { text-decoration: underline; } .image-columns__item-text { font-size: var(--imageColumnsTextSize); line-height: 1.3; } .image-columns__item-content > a:not(:last-child) .image-columns__item-title, .image-columns__item-content > .image-columns__item-title:not(:last-child) { margin-bottom: max(0.65em, 10px); } .image-columns__container--w-background .image-columns__item, .image-columns__container--w-borders .image-columns__item, .image-columns__item--w-btn { align-self: stretch; display: flex; flex-direction: column; } .image-columns__item--w-btn .image-columns__item-content { flex-grow: 1; display: flex; flex-direction: column; } .image-columns__item-button-container { margin-top: 15px; flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; } .image-columns__item-button.btn--link { padding-left: 0; } .image-columns__item-button.btn--link:hover { padding: var(--brand-btn-padding-md); } /* @TODO: Apply button styles - but check content that uses it first */ .image-columns__item--w-btn a:hover .image-columns__item-button.btn--link { /*padding: var(--brand-btn-padding-md);*/ } @media (max-width: 1023px) { .image-columns__item-image { max-height: 70px; } } .image-columns__container--w-borders { align-items: stretch; } .image-columns__item-border-wrapper { display: flex; flex-direction: column; height: 100%; } .image-columns__item-border-wrapper:not(.image-columns__item-border-wrapper--no-border) { border: 1px solid var(--imageColumnsBorder); } .image-columns__item-border-wrapper--w-background { background: var(--imageColumnsBackground); color: var(--imageColumnsText, inherit); --primary-gradient-start: var(--brand-color-secondary); --primary-gradient-stop-1-2: #FF7D1C; --primary-gradient-stop-1-3: #FF8E1E; --primary-gradient-stop-2-3: #FE6E1A; --primary-gradient-stop-1-4: #FF961F; --primary-gradient-stop-2-4: #FF7E1D; --primary-gradient-stop-3-4: #FF6619; --primary-gradient-stop-1-5: #FF9C20; --primary-gradient-stop-2-5: #FE871D; --primary-gradient-stop-3-5: #FE731B; --primary-gradient-stop-4-5: #FF6119; --primary-gradient-end: var(--brand-color-primary); } /* Image columns colors */ .image-columns--background-theme-white { --imageColumnsBackground: var(--brand-color-white); --imageColumnsText: var(--brand-color-black); } .image-columns--background-theme-transparent-black { --imageColumnsBackground: rgba(var(--brand-color-black-rgb), 0.2); --imageColumnsText: var(--brand-color-white); } .image-columns--background-theme-blue { --imageColumnsBackground: var(--brand-color-black-25); --imageColumnsText: var(--brand-color-black); } .image-columns--background-theme-beige { --imageColumnsBackground: var(--brand-color-primary-5); --imageColumnsText: var(--brand-color-black); } .image-columns--background-theme-grey { --imageColumnsBackground: var(--brand-color-quaternary); --imageColumnsText: var(--brand-color-black); } .image-columns--background-theme-yellow { --imageColumnsBackground: var(--brand-color-secondary); --imageColumnsText: var(--brand-color-black); } .image-columns--background-theme-orange { --imageColumnsBackground: var(--brand-color-primary); --imageColumnsText: var(--brand-color-white); } .image-columns--background-theme-gradient-orange { --imageColumnsBackground: url('/wp-content/themes/evolut-starter/assets/brand-gradient-1.jpg') center center no-repeat; background-size: cover; --imageColumnsText: var(--brand-color-white); } .image-columns--background-theme-gradient-orange[data-cols-display-desktop="1"] .image-columns__item-border-wrapper { --imageColumnsBackground: linear-gradient(90deg, var(--primary-gradient-start) 10%, var(--primary-gradient-end) 90%); } .image-columns--background-theme-gradient-orange[data-cols-display-desktop="2"] .image-columns__item:nth-child(1) .image-columns__item-border-wrapper { --imageColumnsBackground: linear-gradient(90deg, var(--primary-gradient-start) 10%, var(--primary-gradient-stop-1-2) 90%); } .image-columns--background-theme-gradient-orange[data-cols-display-desktop="2"] .image-columns__item:nth-child(n + 2) .image-columns__item-border-wrapper { --imageColumnsBackground: linear-gradient(90deg, var(--primary-gradient-stop-1-2) 10%, var(--primary-gradient-end) 90%); } .image-columns--background-theme-gradient-orange[data-cols-display-desktop="3"] .image-columns__item:nth-child(1) .image-columns__item-border-wrapper { --imageColumnsBackground: linear-gradient(90deg, var(--primary-gradient-start) 10%, var(--primary-gradient-stop-1-3) 90%); } .image-columns--background-theme-gradient-orange[data-cols-display-desktop="3"] .image-columns__item:nth-child(2) .image-columns__item-border-wrapper { --imageColumnsBackground: linear-gradient(90deg, var(--primary-gradient-stop-1-3) 10%, var(--primary-gradient-stop-2-3) 90%); } .image-columns--background-theme-gradient-orange[data-cols-display-desktop="3"] .image-columns__item:nth-child(n + 3) .image-columns__item-border-wrapper { --imageColumnsBackground: linear-gradient(90deg, var(--primary-gradient-stop-2-3) 10%, var(--primary-gradient-end) 90%); } .image-columns--background-theme-gradient-orange[data-cols-display-desktop="4"] .image-columns__item:nth-child(1) .image-columns__item-border-wrapper { --imageColumnsBackground: linear-gradient(90deg, var(--primary-gradient-start) 10%, var(--primary-gradient-stop-1-4) 90%); } .image-columns--background-theme-gradient-orange[data-cols-display-desktop="4"] .image-columns__item:nth-child(2) .image-columns__item-border-wrapper { --imageColumnsBackground: linear-gradient(90deg, var(--primary-gradient-stop-1-4) 10%, var(--primary-gradient-stop-2-4) 90%); } .image-columns--background-theme-gradient-orange[data-cols-display-desktop="4"] .image-columns__item:nth-child(3) .image-columns__item-border-wrapper { --imageColumnsBackground: linear-gradient(90deg, var(--primary-gradient-stop-2-4) 10%, var(--primary-gradient-stop-3-4) 90%); } .image-columns--background-theme-gradient-orange[data-cols-display-desktop="4"] .image-columns__item:nth-child(n + 4) .image-columns__item-border-wrapper { --imageColumnsBackground: linear-gradient(90deg, var(--primary-gradient-stop-3-4) 10%, var(--primary-gradient-end) 90%); } .image-columns--background-theme-gradient-orange[data-cols-display-desktop="5"] .image-columns__item:nth-child(1) .image-columns__item-border-wrapper { --imageColumnsBackground: linear-gradient(90deg, var(--primary-gradient-start) 10%, var(--primary-gradient-stop-1-5) 90%); } .image-columns--background-theme-gradient-orange[data-cols-display-desktop="5"] .image-columns__item:nth-child(2) .image-columns__item-border-wrapper { --imageColumnsBackground: linear-gradient(90deg, var(--primary-gradient-stop-1-5) 10%, var(--primary-gradient-stop-2-5) 90%); } .image-columns--background-theme-gradient-orange[data-cols-display-desktop="5"] .image-columns__item:nth-child(3) .image-columns__item-border-wrapper { --imageColumnsBackground: linear-gradient(90deg, var(--primary-gradient-stop-2-5) 10%, var(--primary-gradient-stop-3-5) 90%); } .image-columns--background-theme-gradient-orange[data-cols-display-desktop="5"] .image-columns__item:nth-child(4) .image-columns__item-border-wrapper { --imageColumnsBackground: linear-gradient(90deg, var(--primary-gradient-stop-3-5) 10%, var(--primary-gradient-stop-4-5) 90%); } .image-columns--background-theme-gradient-orange[data-cols-display-desktop="5"] .image-columns__item:nth-child(n + 5) .image-columns__item-border-wrapper { --imageColumnsBackground: linear-gradient(90deg, var(--primary-gradient-stop-4-5) 10%, var(--primary-gradient-end) 90%); } a.image-columns__item-border-wrapper { text-decoration: none; color: #333; } .image-columns__item-border-wrapper--rounded { border-radius: var(--imageColumnsBorderRadius); } /* Center align content */ .image-columns--content-align-center { text-align: center; } .image-columns--content-align-center .image-columns__item-image-container { justify-content: center; } /* Right align content */ .image-columns--content-align-right { text-align: right; } .image-columns--content-align-right .image-columns__item-image-container { justify-content: flex-end; } .image-columns__item-border-wrapper .image-columns__item-image-container { padding: var(--imageColumnsPaddingTop, 0) var(--imageColumnsImgPaddingRight, 0) 0 var(--imageColumnsImgPaddingLeft, 0); } .image-columns__item-border-wrapper .image-columns__item-content { padding: 0 var(--imageColumnsPaddingRight, 36px) var(--imageColumnsPaddingBottom, 36px) var(--imageColumnsPaddingLeft, 36px); } .image-columns__item-border-wrapper .image-columns__item-content:first-child { padding-top: var(--imageColumnsPaddingTop, 0); } .image-columns--img-ratio--square .image-columns__item-image-container, .image-columns--img-ratio--landscape .image-columns__item-image-container, .image-columns--img-ratio--widescreen .image-columns__item-image-container, .image-columns--img-ratio--portrait .image-columns__item-image-container { width: 100%; position: relative; box-sizing: border-box; } .image-columns--img-ratio--square .image-columns__item-image, .image-columns--img-ratio--landscape .image-columns__item-image, .image-columns--img-ratio--widescreen .image-columns__item-image, .image-columns--img-ratio--portrait .image-columns__item-image { position: absolute; left: 0; right: 0; top: 0; bottom: 0; object-fit: cover; object-position: center; max-height: unset; max-width: unset; width: 100%; height: 100%; } .image-columns--img-ratio--square .image-columns__item-image-container:before, .image-columns--img-ratio--landscape .image-columns__item-image-container:before, .image-columns--img-ratio--widescreen .image-columns__item-image-container:before, .image-columns--img-ratio--portrait .image-columns__item-image-container:before { content: ""; display: block; width: 100%; } .image-columns--img-ratio--square .image-columns__item-image-container:before { padding-bottom: 100%; } .image-columns--img-ratio--landscape .image-columns__item-image-container:before { padding-bottom: 75%; } .image-columns--img-ratio--widescreen .image-columns__item-image-container:before { padding-bottom: 56.25%; } .image-columns--img-ratio--portrait .image-columns__item-image-container:before { padding-bottom: 150%; } /* /Image columns =================================== */ .review-slider { background-color: var(--brand-color-primary-5); } .review-slider__container { height: 656px; overflow: hidden; } .review-slider__grid { width: 100%; } .review-slider__item-container { position: relative; display: flex; align-items: center; height: 100%; } .review-slider__item-title { color: var(--brand-color-black); margin-bottom: 20px; } .review-slider__item-text { font-size: 18px; line-height: 28px; margin-bottom: 20px; } .review-slider__item-name { font-size: 18px; line-height: 27px; font-weight: bold; margin-bottom: 30px; } .review-slider__img-container { --page-side-space: calc((100vw - 100%) / 2); position: absolute; top: 0; right: calc(var(--page-side-space) * -1); height: 100%; width: calc(var(--page-side-space) + 32.18%); /*background-size: cover; background-position: center;*/ } .review-slider__img { position: absolute; top: 0; left: 1px; width: 100%; height: 100%; object-fit: cover; } .review-slider__img-container::after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(/wp-content/themes/evolut-starter/src/images/hex-overlay.svg); background-size: auto 100%; background-position: 0 0; background-repeat: no-repeat; z-index: 1; } .review-slider__nav--shared { display: none; } @media (min-width: 1024px) { .review-slider__title { display: none; } } @media (max-width: 1023px) { .review-slider { padding-top: 20px; } .review-slider__title { text-align: center; margin-bottom: 10px; } .review-slider__item { text-align: center; } .review-slider__item-container { padding-bottom: 60px; } .review-slider__item-title { font-size: 20px; line-height: 30px; } .review-slider__img-container { display: none; } .review-slider__nav { justify-content: center; position: absolute; width: 100%; bottom: 80px; } .review-slider__nav { display: none; } .review-slider__nav--shared { display: flex; } } .post-cards { --loading-shift: var(--anim-v-shift); margin-bottom: calc(var(--section-gap-size) - var(--loading-shift)); } /*.post-cards__container {*/ /* height: 545px;*/ /*}*/ .post-cards__title { text-align: center; margin-bottom: 50px; color: var(--brand-color-black); } .post-cards__item { display: flex; flex-direction: column; user-select: none; height: 100%; } .post-cards__item-image { display: block; height: 282px; flex-shrink: 0; background-size: cover; background-position: center; font-size: 0; } .block-editor__container .post-cards__item-image-element, .post-cards__item-image-element { width: 100%; height: 100%; object-fit: cover; } .post-cards__item-content { box-sizing: border-box; display: flex; flex-direction: column; height: 100%; padding: 24px 0 0; flex: 1; min-height: 0; } .post-cards__item-title { margin-bottom: 8px; color: var(--brand-color-black); } .post-cards__item-text { margin-bottom: auto; } .post-cards__item-link { margin-top: 10px; display: flex; text-decoration: none; color: var(--brand-color-black); } .post-cards__item-link svg { width: 48px; height: 48px; } @media (max-width: 1023px) { /*.post-cards__container {*/ /* height: 510px;*/ /*}*/ .post-cards__item-image { height: 226px; } } ul.post-cards__categories-list { padding: 0; margin: 0 0 12px 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; } .post-cards__category-link { text-decoration: none; } .post-cards__category-link:hover { text-decoration: underline; } .link-cards-slider { --loading-shift: var(--anim-v-shift); --item-height: 480px; margin-bottom: calc(var(--section-gap-size) - var(--loading-shift)); } .link-cards-slider__title { color: var(--brand-color-black); margin-bottom: 50px; } .link-cards-slider__title--center { text-align: center; } .link-cards-slider__title--right { text-align: right; } .link-cards-slider__container { height: var(--item-height); } .link-cards-slider__item { --item-min-width: 320px; position: relative; display: flex; flex-direction: column; justify-content: flex-end; box-sizing: border-box; padding: 32px; background-color: var(--brand-color-black); color: var(--brand-color-white); user-select: none; text-decoration: none; -webkit-user-drag: none; opacity: 0; transform: translateY(var(--loading-shift)); } .link-cards-slider__item > * { position: relative; z-index: 2; } /*.visible-tag--visible .link-cards-slider__item {*/ /* opacity: 1;*/ /* transform: translateY(0);*/ /*}*/ .link-cards-slider__item.draggable-content__item--dragged, .link-cards-slider__item:hover { background-color: var(--brand-color-primary); color: white; transition: background-color 100ms ease-in-out; transition-delay: 0; } .link-cards-slider__item-icon { position: absolute; top: 32px; right: 32px; width: 38px; height: 38px; color: var(--brand-color-tertiary); } .link-cards-slider__item-title { color: inherit; } .link-cards-slider__item-text { padding-top: 20px; } @media (max-width: 1023px) { .link-cards-slider__item { padding: 28px; } .link-cards-slider__container { --item-height: 400px; } .link-cards-slider__item-icon { top: 28px; right: 28px; width: 32px; height: 32px; } } .link-cards-slider__item-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .link-cards-slider__item-img:before, .link-cards-slider__item-img:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; background-color: rgba(0,0,0,.2); } .link-cards-slider__item-img:after { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 75%); opacity: 0.3; } .acf-block-preview .link-cards-slider__item-img-element, .link-cards-slider__item-img-element { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } @media (hover: hover) { .link-cards-slider__item-text-wrapper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; } .link-cards-slider--text-on-hover .link-cards-slider__item-text { overflow: hidden; padding-top: 0; transition: padding 0.3s ease; } .link-cards-slider--text-on-hover .link-cards-slider__item:hover .link-cards-slider__item-text-wrapper { grid-template-rows: 1fr; } .link-cards-slider--text-on-hover .link-cards-slider__item:hover .link-cards-slider__item-text { padding-top: 20px; } } @media (min-width: 1024px) { .draggable-content--desktop-stacked .link-cards-slider__item { height: var(--item-height); } } /* Large variant - used for case studies */ .link-cards-slider--type-large { --item-height: 660px; } .link-cards-slider--type-large .draggable-content__items, .link-cards-slider--type-large .draggable-content__items.flex-grid { --item-width: 85vw; } .link-cards-slider--type-large .link-cards-slider__item { --item-max-width: 1096px; --item-min-width: 0; align-items: flex-start; } .link-cards-slider__item-tags { flex-grow: 1; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: flex-start; } .link-cards-slider__item-logo { height: 28px; margin-bottom: 24px; } .link-cards-slider__item-logo img { width: auto; height: 100%; } .link-cards-slider__item-link-label { margin-top: 24px; } .link-cards-slider__item-link-label:not(:hover) { padding-left: 0; } .separator-line { height: 2px; background-color: var(--brand-form--field--border-color); } .wp-block-separator { color: var(--brand-form--field--border-color); border-color: currentColor; } .wp-block-group.is-vertical > .wp-block-separator { width: 100%; } .map-locations__title { color: var(--brand-color-black); margin-bottom: 30px; } .map-locations__item-map { height: 429px; background-color: var(--brand-color-black-25); margin-bottom: 30px; } .map-locations__item:nth-child(n + 3) { margin-top: 20px; } .map-locations__item-name { color: var(--brand-color-black); margin-bottom: 10px; } .map-locations__item-address { color: #666; letter-spacing: -0.002em; max-width: 227px; } @media (max-width: 1023px) { .map-locations__item { margin-bottom: 60px; } } .contact-form__details-title { color: var(--brand-color-black); margin-bottom: 30px; } .contact-form__contact { margin-bottom: 20px; } .contact-form__contact-name, .contact-form__hours-label { color: var(--brand-color-black); margin-bottom: 10px; } .contact-form__contact-value { color: var(--brand-color-black); text-decoration: none; } .contact-form__hours-value { color: #666; letter-spacing: -0.002em; } @media (max-width: 1023px) { .contact-form__details { margin-bottom: 55px; } } .reusable-modules { margin-bottom: 45px; } .reusable-modules--no-top-space { margin-top: -25px; } .reusable-modules__title { margin-bottom: 30px; } .reusable-modules__image-column { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 40px 44px; color: white; text-decoration: none; background-size: cover; background-position: center; } .reusable-modules__image-column > * { position: relative; } .reusable-modules__image { position: absolute; top: 0; left: 0; width: 100%; /* Cover the container width */ height: 100%; /* Cover the container height */ object-fit: cover; /* Ensure the image scales like a background image */ z-index: 1; /* Place it behind other content */ } .reusable-modules__image-column::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--brand-color-black); opacity: 0.8; z-index: 2; } /* Text/content inside the image column */ .reusable-modules__image-column .reusable-modules__image-subtitle, .reusable-modules__image-column .reusable-modules__image-title, .reusable-modules__image-column .reusable-modules__image-text { position: relative; z-index: 3; } .reusable-modules__image-subtitle:not(:last-child), .reusable-modules__image-title:not(:last-child), .reusable-modules__image-text:not(:last-child) { margin-bottom: 10px; } .reusable-modules__modules { row-gap: 20px; } .reusable-modules__module { box-sizing: border-box; display: block; background-color: var(--brand-color-primary-5); padding: 30px; min-height: 255px; color: var(--brand-color-black); text-decoration: none; } .reusable-modules__module-subtitle { margin-bottom: 20px; } .reusable-modules__module-title { display: block; margin-bottom: 10px; } .reusable-modules__module-text { color: #666; } .shopify-collection__title { color: var(--brand-color-black); margin-bottom: 50px; text-align: center; } .image-with-text-slider { --arrow-space: 80px; } .image-with-text-slider__container { position: relative; } .image-with-text-slider__items { width: calc(100% - var(--arrow-space) * 2); margin: 0 auto; } .image-with-text-slider__item-title { color: var(--brand-color-black); margin-bottom: 20px; padding: 0 20px; font-size: 20px; line-height: 24px; } .image-with-text-slider__item-sub-title { display: block; color: var(--brand-color-black); margin-bottom: 10px; padding: 0 20px; } .image-with-text-slider__item-text { color: #666; padding: 0 20px; } .image-with-text-slider__image { width: unset; height: unset; } .image-with-text-slider__arrows { display: flex; justify-content: space-between; position: absolute; top: 50%; left: 0; width: 100%; } .image-with-text-slider__arrow { background: transparent; padding: 0; border: 0; color: var(--brand-color-black); cursor: pointer; } .image-with-text-slider__arrow svg { width: 48px; height: 48px; } .image-with-text-slider__nav { justify-content: center; margin-top: 20px; } @media (max-width: 1023px) { .image-with-text-slider { --arrow-space: 16px; } .image-with-text-slider__arrows { left: calc(var(--padding-width) * -1); width: 100vw; } .image-with-text-slider__arrow svg { width: 32px; height: 32px; } } .model-search__title { color: var(--brand-color-black); text-align: center; margin-bottom: 30px; } .model-search__select { width: 100%; margin-bottom: 40px; --background-color: var(--brand-color-black-25); } .model-search__select::before { border: 0; } .model-search__select::after { display: block; background-image: url(/wp-content/themes/evolut-starter/src/images/dropdown-arrow.svg); background-position: center; background-size: auto; background-repeat: no-repeat; border: 0; width: 23px; height: 23px; line-height: 0; right: 10px; transform: translateX(-50%) translateY(-50%); } .model-search__select.el-select--active::after { background-image: url(/wp-content/themes/evolut-starter/src/images/dropdown-cross.svg); border-bottom: 0; } @media (max-width: 1023px) { .model-search__select { margin-bottom: 20px; } .model-search__btn { width: 100%; } } .jetcharge-graph { display: flex; flex-direction: column; height: 100vh; justify-content: center; } .jetcharge-graph--h-auto { height: auto; } .jetcharge-graph__title-col { } .jetcharge-graph__title, .jetcharge-graph__title:last-child { text-align: center; margin-bottom: 40px; } /* Menu */ .jetcharge-graph__menu-col { display: flex; align-items: flex-start; min-width: 180px; } .jetcharge-graph__menu { /*counter-reset: graph;*/ } .jetcharge-graph__menu-item { display: block; background: transparent; border: 0; padding: 0; color: var(--brand-color-black); font-size: 20px; line-height: 50px; cursor: pointer; } .jetcharge-graph__menu-item::before { display: inline-block; width: 32px; margin-right: 11px; counter-increment: graph; content: "0" attr(data-target);/*counter(graph);*/ font-weight: 700; } .jetcharge-graph[data-active-item="1"] .jetcharge-graph__menu-item:nth-child(1), .jetcharge-graph[data-active-item="2"] .jetcharge-graph__menu-item:nth-child(2), .jetcharge-graph[data-active-item="3"] .jetcharge-graph__menu-item:nth-child(3), .jetcharge-graph[data-active-item="4"] .jetcharge-graph__menu-item:nth-child(4), .jetcharge-graph[data-active-item="5"] .jetcharge-graph__menu-item:nth-child(5), .jetcharge-graph[data-active-item="6"] .jetcharge-graph__menu-item:nth-child(6), .jetcharge-graph[data-active-item="7"] .jetcharge-graph__menu-item:nth-child(7), .jetcharge-graph[data-active-item="8"] .jetcharge-graph__menu-item:nth-child(8), .jetcharge-graph[data-active-item="9"] .jetcharge-graph__menu-item:nth-child(9), .jetcharge-graph__menu-item:hover { display: block; color: var(--brand-color-primary); } .jetcharge-graph__navs { display: none; } /* Description */ .jetcharge-graph__desc-col { display: flex; overflow: hidden; min-width: 235px; } .jetcharge-graph__desc-item { display: flex; flex-direction: column; align-items: flex-end; text-align: right; width: 100%; flex-shrink: 0; opacity: 0; pointer-events: none; transition: opacity 300ms ease; } .jetcharge-graph__desc-item:not(:nth-child(1)) { margin-left: -100%; } .jetcharge-graph__desc-item-title { margin-bottom: 20px; } .jetcharge-graph__desc-item-text { max-width: 234px; font-weight: bold; } .jetcharge-graph__desc-item-btn { margin-top: 40px; } .jetcharge-graph[data-active-item="1"] .jetcharge-graph__desc-item:nth-child(1), .jetcharge-graph[data-active-item="2"] .jetcharge-graph__desc-item:nth-child(2), .jetcharge-graph[data-active-item="3"] .jetcharge-graph__desc-item:nth-child(3), .jetcharge-graph[data-active-item="4"] .jetcharge-graph__desc-item:nth-child(4), .jetcharge-graph[data-active-item="5"] .jetcharge-graph__desc-item:nth-child(5), .jetcharge-graph[data-active-item="6"] .jetcharge-graph__desc-item:nth-child(6), .jetcharge-graph[data-active-item="7"] .jetcharge-graph__desc-item:nth-child(7), .jetcharge-graph[data-active-item="8"] .jetcharge-graph__desc-item:nth-child(8), .jetcharge-graph[data-active-item="9"] .jetcharge-graph__desc-item:nth-child(9) { opacity: 1; pointer-events: initial; } /* Graph */ .jetcharge-graph__graph-col { display: flex; align-items: flex-start; } .jetcharge-graph__graph { position: relative; width: 100%; } .jetcharge-graph__graph::before { display: block; content: ''; padding-top: 63.7%; } .jetcharge-graph__graph-item { position: absolute; background: transparent; border: 0; padding: 0; cursor: pointer; transition: transform 300ms ease; line-height: 0; --item-active: 0; opacity: calc(0.3 * (1 - var(--item-active)) + var(--item-active)); } .jetcharge-graph__img { width: 100%; opacity: calc(1 - var(--item-active)); /*transition: opacity 300ms ease;*/ } .jetcharge-graph__img--active { position: absolute; top: 0; left: 0; opacity: calc(var(--item-active)); } .jetcharge-graph[data-active-item="1"] .jetcharge-graph__graph-item:nth-child(1), .jetcharge-graph[data-active-item="2"] .jetcharge-graph__graph-item:nth-child(2), .jetcharge-graph[data-active-item="3"] .jetcharge-graph__graph-item:nth-child(3), .jetcharge-graph[data-active-item="4"] .jetcharge-graph__graph-item:nth-child(4), .jetcharge-graph[data-active-item="5"] .jetcharge-graph__graph-item:nth-child(5), .jetcharge-graph[data-active-item="6"] .jetcharge-graph__graph-item:nth-child(6), .jetcharge-graph[data-active-item="7"] .jetcharge-graph__graph-item:nth-child(7), .jetcharge-graph[data-active-item="8"] .jetcharge-graph__graph-item:nth-child(8), .jetcharge-graph[data-active-item="9"] .jetcharge-graph__graph-item:nth-child(9), .jetcharge-graph__graph-item:hover { --item-active: 1; } .jetcharge-graph[data-active-item="1"] .jetcharge-graph__graph-item:nth-child(1), .jetcharge-graph[data-active-item="2"] .jetcharge-graph__graph-item:nth-child(2), .jetcharge-graph[data-active-item="3"] .jetcharge-graph__graph-item:nth-child(3), .jetcharge-graph[data-active-item="4"] .jetcharge-graph__graph-item:nth-child(4), .jetcharge-graph[data-active-item="5"] .jetcharge-graph__graph-item:nth-child(5), .jetcharge-graph[data-active-item="6"] .jetcharge-graph__graph-item:nth-child(6), .jetcharge-graph[data-active-item="7"] .jetcharge-graph__graph-item:nth-child(7), .jetcharge-graph[data-active-item="8"] .jetcharge-graph__graph-item:nth-child(8), .jetcharge-graph[data-active-item="9"] .jetcharge-graph__graph-item:nth-child(9) { transform: scale(1.1); } @media (max-width: 1023px) { .jetcharge-graph { height: auto; padding: 60px 0; } .jetcharge-graph__title { margin-bottom: 20px; } .jetcharge-graph__title-col { margin-bottom: 5px; } .jetcharge-graph__menu-col { position: relative; margin-bottom: 30px; padding-top: 0; } .jetcharge-graph__menu { display: flex; width: 100%; justify-content: center; } .jetcharge-graph__menu-item { display: none; } .jetcharge-graph__navs { position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: flex; width: 100%; justify-content: space-between; touch-action: manipulation; } .jetcharge-graph__nav { padding: 0; border: 0; background-color: transparent; line-height: 0; } .jetcharge-graph__nav svg { width: 48px; height: 48px; } .jetcharge-graph__graph-col { margin-bottom: 20px; } .jetcharge-graph__desc-item { align-items: flex-start; text-align: left; } .jetcharge-graph__desc-item-text { max-width: none; } .jetcharge-graph__desc-item-btn { margin-top: 20px; width: 100%; } } .wp-block-yoast-faq-block .schema-faq-section { border: solid var(--brand-form--field--border-color); border-width: 1px 0; background-color: var(--brand-color-white); margin-bottom: -1px; } .wp-block-yoast-faq-block .schema-faq-section:last-child { margin-bottom: 20px; } .wp-block-yoast-faq-block .schema-faq-question { font-size: var(--brand-body-text--font-size-3) !important; } .wp-block-yoast-faq-block .schema-faq-question.faq-q-open { border-bottom: none; } .schema-faq .schema-faq-question { padding-left: 0; font-weight: var(--brand-body-text--font-weight); } .wp-block-yoast-faq-block p.schema-faq-answer { margin: 0; padding: 0 0 20px; font-size: unset !important; line-height: unset !important; border-bottom: none; } .wp-block-yoast-faq-block .schema-faq-question:after { right: 0; color: var(--brand-color-primary); font-weight: var(--brand-body-text--font-weight); } /* ======================================*/ /* Plethora Tab + Accordion /* ======================================*/ /* Accordion Block style helpers */ .jc-accordion-on-color { --pds-tabs-color-background: transparent; --pds-tabs-padding: 0; } .jc-accordion-white { --pds-tabs-accordion-header-background-basic: var(--brand-color-white); --pds-tabs-accordion-header-text-color-basic: var(--brand-color-black); --pds-tabs-acc-header-gap-basic: 0; } .jc-accordion-white .pds-accordion__item{ margin-bottom: 20px; } .jc-accordion-white .pds-accordion__content { background: var(--brand-color-white); } .jc-accordion-bordered .pds-accordion__title, .jc-accordion-bordered .pds-accordion__content { border: 1px solid var(--brand-form--field--border-color); } .jc-accordion-bordered .active .pds-accordion__title, .jc-accordion-bordered .is-open .pds-accordion__title { border-bottom: 0; } .jc-accordion-bordered .active .pds-accordion__content, .jc-accordion-bordered .is-open .pds-accordion__content { border-top: 0; } .jc-accordion-rounded .pds-accordion__title, .jc-accordion-rounded .pds-accordion__content { border-radius: var(--brand-form--field--border-radius); } .jc-accordion-rounded .active .pds-accordion__title, .jc-accordion-rounded .is-open .pds-accordion__title { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .jc-accordion-rounded .active .pds-accordion__content, .jc-accordion-rounded .is-open .pds-accordion__content { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; } .jc-accordion-title-lg .pds-accordion__title { --pds-tabs-acc-header-font-size: var(--brand-subtitle--font-size-1); --pds-tabs-acc-header-font-weight: var(--brand-subtitle--font-weight); line-height: var(--brand-subtitle--line-height); } @media (max-width: 781px) { .jc-accordion-title-lg .pds-accordion__title { --pds-tabs-acc-header-font-size: var(--brand-subtitle--font-size-2); } } /* Other accordion helpers */ .jc-accordion-header { color: inherit; } .has-white-color .jc-accordion-item { border-bottom-color: rgba(255,255,255,0.5) !important; } /* Side tabs */ .jc-side-tabs { --pds-tabs-color-background: transparent; --pds-tabs-padding: 0; --pds-tabs-margin: 0; --pds-tabs-v-tab-gap-basic: 0; --pds-tabs-v-tab-line-color-active: var(--brand-color-primary); --pds-tabs-v-tab-line-color: var(--brand-color-black-100); --pds-tabs-active-tab-text-color: var(--brand-color-black); --pds-tabs-tab-text-color: var(--brand-color-black-500); } .jc-side-tabs .wp-block-columns { gap: 60px; } @media (max-width: 781px) { [data-pds-tabs--mobile-breakpoint-forced].jc-side-tabs { flex-direction: column; gap: 30px; } .jc-side-tabs .wp-block-columns { gap: 28px; } } .jc-side-tabs--on-light { --pds-tabs-v-tab-line-color-active: var(--brand-color-primary); --pds-tabs-v-tab-line-color: var(--brand-color-black-100); --pds-tabs-active-tab-text-color: var(--brand-color-black); --pds-tabs-tab-text-color: var(--brand-color-black-500); } .jc-side-tabs--on-dark { --pds-tabs-v-tab-line-color-active: var(--brand-color-tertiary); --pds-tabs-v-tab-line-color: var(--brand-color-black-900); --pds-tabs-active-tab-text-color: var(--brand-color-white); --pds-tabs-tab-text-color: var(--brand-color-black-200); } /* /Plethora Tab + Accordion ======================================*/ .smartrecruiter_listings { display: grid; width: 100%; grid-template-columns: auto auto auto auto; align-items: center; justify-items: stretch; row-gap: 1rem; } .smartrecruiter_listings > div { text-align: center; } .smartrecruiter_listings > div:nth-child(-n + 4) { height: 100%; font-family: var(--brand-overline--font-family); font-weight: var(--brand-overline--font-weight); line-height: var(--brand-overline--line-height); text-transform: var(--brand-overline--text-transform); letter-spacing: var(--brand-overline--letter-spacing); font-size: var(--brand-overline--font-size-2); background: var(--brand-color-primary-5); color: var(--brand-color-black); } .smartrecruiter_listings > div:nth-child(-n + 4) > div { padding: 1rem; color: var(--brand-color-black) !important; } .smartrecruiter_listings > div:nth-child(4n + 1) { font-weight: var(--brand-overline--font-weight); color: var(--brand-color-black); } @media screen and (max-width: 600px) { .smartrecruiter_listings { grid-template-columns: auto auto; row-gap: .5rem; justify-items: stretch; } .smartrecruiter_listings > div { text-align: start; } .smartrecruiter_listings > div:nth-child(-n + 4) { display: none; } .smartrecruiter_listings > div:nth-child(1) { display: block; grid-column-start: 1; grid-column-end: span 2; height: 1rem; } .smartrecruiter_listings > div:nth-child(1) > div { display: none; } .smartrecruiter_listings > div:nth-child(4n + 1) { grid-column-end: span 2; padding-top: .5rem; } .smartrecruiter_listings > div:nth-child(4n + 3) { justify-self: flex-end; } .smartrecruiter_listings > div:nth-child(4n + 4) { grid-column-end: span 2; padding-bottom: 1.5rem; border-bottom: 2px solid var(--brand-form--field--border-color); } .smartrecruiter_listings > div:nth-child(4n + 4) .btn { width: 100%; } } :root { --header-height: 66px; --mobile-header-space: var(--header-height); --header-top-offset: 0px; --topbar-height: 0px; /* There is no more topbar */ --jc-header-dropdown-item-padding-v: 8px; --jc-header-dropdown-item-padding-h: 8px; --jc-header-dropdown-list-item-spacing: 4px; } body.admin-bar { --header-top-offset: 32px; } .header { height: var(--header-height); background-color: var(--brand-color-white); box-shadow: 0 1px 2px rgba(0,0,0, 0.07); z-index: 10; } .header--sticky { position: sticky; top: calc(var(--header-top-offset) + var(--topbar-height)); } .header--fixed { position: fixed; width: 100%; top: calc(var(--header-top-offset) + var(--topbar-height)); animation: headerSlideInFromTop 0.2s ease-out; } @keyframes headerSlideInFromTop { from { transform: translateY(-100%); /* Slide in from above */ } to { transform: translateY(0); /* Into visible position */ } } .header--overlay:not(.header--open) { position: absolute; top: calc(var(--header-top-offset) + var(--topbar-height)); width: 100%; z-index: 10; background-color: transparent; box-shadow: none; } .header__container { position: relative; display: flex; height: 100%; justify-content: space-between; align-items: center; gap: 8px; } .header__logo { margin-right: 20px; max-width: 185px; display: block; width: 100%; flex: 1 1 185px; } .header__logo .jc-logo { width: 100%; height: auto; display: block; } .header__logo .jc-logo__text { fill: var(--brand-color-black); } .header__cta { white-space: nowrap; } .header--overlay:not(.header--open) .header__logo .jc-logo__text { fill: var(--brand-color-white); } .header__menu { display: flex; margin: 0 auto; justify-content: center; } .header__menu-list { list-style: none; display: flex; margin: 0; padding: 0; align-items: center; gap: 20px; } .header__menu-list li { list-style: none; margin: 0; padding: 0; } .header__menu-item { font-family: var(--brand-subtitle--font-family); font-weight: var(--brand-subtitle--font-weight); line-height: var(--brand-subtitle--line-height); text-transform: var(--brand-subtitle--text-transform); letter-spacing: var(--brand-subtitle--letter-spacing); font-size: var(--brand-subtitle--font-size-4); color: var(--brand-color-black); text-decoration: none; position: relative; display: inline-flex; align-items: center; box-sizing: border-box; padding: 10px 0; } .header__menu-item::after { content: ''; position: absolute; left: 0; bottom: 10px; width: 100%; height: 2px; transform: scaleX(0); transform-origin: right; background-color: var(--brand-color-primary); transition: transform .4s ease-in-out; } .header__menu-item:hover::after, .header__menu-item--active::after { transform: scaleX(1); transform-origin: left; } .header--overlay .header__menu-item { color: white; } .header__trigger-btn { display: none; width: 44px; height: 44px; color: var(--brand-color-black); background: rgba(var(--brand-color-black-rgb), 0.08); border: 0; padding: 0; line-height: 0; border-radius: 50%; flex: 0 0 44px; cursor: pointer; } .header__trigger-icon--open { display: none; } @media (max-width: 1129px) { .header__logo { margin-right: 20px; } } @media (max-width: 1023px) { :root { --header-height: 55px; } .header .jc-country-selector, .header__menu { display: none; } .header__logo { margin-right: auto; } .header__trigger-btn { display: block; } .header__cta { margin-left: 15px; } } /* Dropdown menu Item */ .jc-menu-dropdown__item-link { text-decoration: none; padding: var(--jc-header-dropdown-item-padding-v) var(--jc-header-dropdown-item-padding-h); display: grid; grid-template-columns: min-content 1fr; grid-template-rows: auto auto auto; column-gap: 8px; row-gap: 0px; } .jc-menu-dropdown__item-link:hover { background-color: var(--brand-color-primary-5); } .jc-menu-dropdown__item-icon { display: block; grid-row: 1 / 4; grid-column: 1; min-width: 40px; height: 100%; object-fit: contain; object-position: top center; } .jc-menu-dropdown__item-pretext { display: block; grid-column: 2; grid-row: 1; line-height: var(--brand-subtitle--line-height); font-weight: var(--brand-btn-font-weight); } .jc-menu-dropdown__item-title { display: block; font-size: var(--brand-body-text--font-size-4); font-weight: var(--brand-btn-font-weight); color: var(--brand-color-black); grid-column: 2; grid-row: 2; margin: 0; line-height: var(--brand-subtitle--line-height); } .jc-menu-dropdown__item-subtext { grid-column: 2; grid-row: 3; line-height: var(--brand-subtitle--line-height); } .jc-menu-dropdown__list { display: flex; flex-direction: column; gap: var(--jc-header-dropdown-list-item-spacing); list-style: none; margin: 0; padding: 0; width: 300px; flex-grow: 1; } .jc-menu-dropdown__item { display: block; position: relative; } /* Desktop dropdowns / Mega menu */ @media (min-width: 1024px) { .header__menu-list { display: flex; list-style: none; margin: 0 auto; padding: 0; justify-content: center; } .header__menu-item-wrap { position: relative; /* anchors simple dropdowns */ } /* Dropdown visibility — hover + keyboard focus */ .jc-menu-dropdown { visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 200ms ease; z-index: 20; } .header__menu-item-wrap:hover .jc-menu-dropdown, .header__menu-item-wrap:focus-within .jc-menu-dropdown { visibility: visible; opacity: 1; pointer-events: auto; } .jc-menu-dropdown__container { background-color: var(--brand-color-white); box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15); } .jc-menu-dropdown__mobile-header { display: none; } /* SIMPLE: left-aligned under its own parent item */ .jc-menu-dropdown--simple { position: absolute; top: 100%; left: 0; min-width: 260px; } .jc-menu-dropdown__list-col { flex: 1; padding: 16px; display: flex; flex-direction: column; align-items: flex-start; } /* MEGA: centered under the nav, ignores its
  • 's position */ .jc-menu-dropdown--mega { position: absolute; top: 100%; left: 50%; /*transform: translateX(-50%);*/ transform: translateX(-30%); width: auto; max-width: calc(100vw - (var(--padding-width) * 2)); margin: 0 auto; padding: 0; } .jc-menu-dropdown--mega .jc-menu-dropdown__container { display: flex; } .jc-menu-dropdown--mega .jc-menu-dropdown__list-col { padding: 20px; } .jc-menu-dropdown__mega-col { width: 260px; flex-shrink: 0; background-color: var(--brand-color-black-50); padding: 24px; } .jc-menu-dropdown__mega-image { width: 100%; margin-bottom: 20px; } .jc-menu-dropdown__mega-blurb { margin: 12px 0 20px; flex-grow: 1; } /* Shared dropdown elements */ .jc-menu-dropdown__top-title { padding-left: var(--jc-header-dropdown-item-padding-h); margin-bottom: 12px; color: rgba(var(--brand-color-black-rgb), 0.4); } [data-borders-between="true"] .jc-menu-dropdown__list { gap: 0; } [data-borders-between="true"] .jc-menu-dropdown__item:not(:last-child) { border-bottom: 1px solid var(--brand-color-black-50); } .jc-menu-dropdown__view-all { display: inline-flex; align-items: center; margin-top: 8px; } .jc-menu-dropdown__back { display: none; } .header__menu-mobile-footer-actions { display: none; } } @media (min-width: 1350px) { .jc-menu-dropdown--mega { transform: translateX(-50%); } .jc-menu-dropdown__list { width: 400px; } } /* Mobile Slide menus */ @media (max-width: 1023px) { .header__menu { display: none; } .header--open { position: fixed; width: 100%; top: 0; z-index: 11; } .admin-bar .header--open { top: var(--header-top-offset); } .header--open .header__trigger-icon--closed { display: none; } .header--open .header__trigger-icon--open { display: initial; } .header--overlay:not(.header--open) .header__trigger-btn { background: var(--brand-color-white); } .header--open .header__menu { display: block; position: fixed; top: var(--mobile-header-space); left: 0; width: 100%; height: calc(100% - var(--mobile-header-space)); overflow: visible; /* CRITICAL: Allows child dropdowns to break out cleanly */ background: var(--brand-color-white); } /* Main tier menu list style */ .header__menu-list { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; list-style: none; margin: 0; padding: 24px; z-index: 12; background: var(--brand-color-white); box-sizing: border-box; flex-direction: column; align-items: stretch; gap: 0; /* FIX: Completely remove the transition/transform loop context from the parent container */ transform: none !important; transition: left 300ms ease; } .header__menu-list--slid { left: -100%; /* Slide parent away using left property to prevent breaking position: fixed */ } /* Submenus: Forced viewport locking */ .jc-menu-dropdown { position: fixed; /* Binds directly to browser screen edges */ top: var(--mobile-header-space); left: 100%; /* Position off-screen right */ width: 100%; height: calc(100% - var(--mobile-header-space)); overflow-y: auto; list-style: none; margin: 0; padding: 24px; z-index: 99; /* Place completely over the parent scrolling thread list layout layer */ background: var(--brand-color-white); box-sizing: border-box; /* Slide child panel smoothly into viewpoint box space */ transition: transform 300ms ease; transform: translateX(0); visibility: hidden; } .jc-menu-dropdown--open { visibility: visible; transform: translateX(-100%); /* Slide forward */ } .header--overlay .header__menu-item, .header__menu-item { display: flex; align-items: center; justify-content: space-between; padding: 24px 0; width: 100%; box-sizing: border-box; border-top: 1px solid var(--brand-color-black-50); border-bottom: 1px solid var(--brand-color-black-50); color: var(--brand-color-black); font-size: var(--brand-heading--font-size--h5); font-weight: var(--brand-btn-font-weight); } .header__menu-item-wrap + .header__menu-item-wrap { margin: -1px; } .header__menu-item-wrap--dropdown .header__menu-item:after { --icon-size: 24px; content: ""; display: block; width: var(--icon-size); height: var(--icon-size); background: var(--brand-icon-svg--arrow--grey) center center no-repeat; flex: 0 0 var(--icon-size); position: static; transform: none; } .header__menu-item:hover, .header__menu-item:active { background-color: var(--brand-color-primary-5); } .jc-menu-dropdown__mega-col { display: none; /* mega image panel never shows on mobile */ } .jc-menu-dropdown__back { display: flex; align-items: center; margin-bottom: 16px; cursor: pointer; } .jc-menu-dropdown__back svg { color: var(--brand-color-quaternary); } .jc-menu-item-wrap--dropdown > .header__menu-item { display: flex; justify-content: space-between; } .jc-menu-dropdown__mobile-header { font-size: var(--brand-heading--font-size--h4); font-weight: var(--brand-overline--font-weight); } .jc-menu-dropdown__list { gap: 0; width: 100%; } .jc-menu-dropdown__item { border-top: 1px solid var(--brand-color-black-50); border-bottom: 1px solid var(--brand-color-black-50); } .jc-menu-dropdown__item:first-child, .jc-menu-dropdown__item + .jc-menu-dropdown__item { border-top: 0 } .jc-menu-dropdown__item-link { padding: 20px 0; } .jc-menu-dropdown__top-title { display: none; } .jc-menu-dropdown__list-col { display: grid; grid-template-areas: "title title viewall" "menu menu menu"; grid-template-columns:1fr 1fr auto; grid-template-rows: auto auto auto; } .jc-menu-dropdown__mobile-header { grid-area: title; } .jc-menu-dropdown__view-all { grid-area: viewall; } .jc-menu-dropdown__list { grid-area: menu; padding-top: 4px; margin-top: 24px; border-top: 3px solid var(--brand-color-quaternary); } li.header__menu-mobile-footer-actions { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; gap: 8px; margin-top: auto; } .header__menu-mobile-footer-actions .header__cta { flex: 1 1 100%; margin: 0; } .header__menu-mobile-footer-actions .jc-country-selector { flex: 0 0 auto; display: flex; flex-direction: row; gap: var(--brand-btn-gap-md); box-sizing: border-box; justify-content: center; align-items: center; height: auto; padding: 12px 6px; min-width: 0; min-height: calc(var(--brand-btn--icon-size) + var(--brand-btn-padding-md-v) * 2); background-color: var(--brand-color-black-25); border-radius: var(--brand-btn-border-radius-md); } } .persona-header { display: flex; align-items: flex-end; min-height: 400px; background-color: var(--brand-color-primary-5); padding: var(--padding-width) 0; } .jc-breadcrumbs.jc-breadcrumbs--bar + .persona-header { margin-top: 0; } .persona-header.wp-block-columns.has-background, .persona-header.wp-block-columns.has-background { padding-left: 0; padding-right: 0; } .persona-header.wp-block-columns { align-items: center !important; padding-left: 0; padding-right: 0; } .persona-header__sub-title, .persona-header__title, .persona-header__text { margin-top: 20px; } .persona-header__text { color: var(--brand-color-black-900); } .persona-header__buttons { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 30px; } @media (max-width: 1023px) { .persona-header { min-height: 300px; } } .archive-header { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; background-color: var(--brand-color-primary-5); min-height: 730px; padding: 50px 0; margin-bottom: calc(var(--section-gap-base) * 4); /* x4 - 120px */ } .archive-header--resource { min-height: 330px; } .archive-header__title { margin-bottom: 60px; } .blog-post-item__text { color: var(--brand-color-black-900); } .archive-header--resource .blog-post-item { display: none; } @media (max-width: 1023px) { .archive-header { min-height: auto; } .archive-header__title { margin-bottom: 30px; } } .ev-item-header { position: relative; background-size: cover; background-position: center; } .ev-item-header__title { text-align: center; color: var(--brand-color-white); } .ev-item-header__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .ev-item-header__content { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 558px; color: var(--brand-color-white); background-color: rgba(var(--brand-color-black-rgb), 0.8); } .ev-item-header__text { text-align: center; max-width: 616px; } @media (max-width: 1023px) { .ev-item-header__content { justify-content: flex-end; align-items: flex-start; padding-bottom: 50px; } .ev-item-header__text { text-align: left; } } .ev-archive-header { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 558px; color: white; } .ev-archive-header::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--primary-dark-grey-color); opacity: 0.8; } .ev-archive-header__title { position: relative; margin-bottom: 30px; text-align: center; } .ev-archive-header__filters { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 955px; z-index: 1; } .ev-archive-header__filter { width: calc((82% - 20px * 2) / 2); } .ev-archive-header__filter-name { font-weight: bold; margin-bottom: -10px; } .ev-archive-header__btn { margin: 40px auto 0; } .ev-archive-header__select::before { background-color: transparent; border: 0; border-radius: 0; border-bottom: 3px solid var(--brand-color-secondary); padding: 0; font-size: 40px; font-weight: bold; color: white; --select-height: 70px; } .ev-archive-header__select::after { border-top-color: white; } .ev-archive-header__select.el-select--active::after { border-bottom-color: white; } @media (max-width: 1023px) { .ev-archive-header { height: auto; padding: 80px 0; } .ev-archive-header__filters { flex-direction: column; } .ev-archive-header__filter { width: 100%; margin-bottom: 20px; } .ev-archive-header__btn { margin-top: 20px; width: 100%; } } .post-header { margin-bottom: 60px; } .post-header__description { box-sizing: border-box; background-color: var(--brand-color-primary-5); height: 558px; padding: 90px 0; } .post-header__posted { text-align: right; } .post-header__posted-label { margin-bottom: 10px; } .post-header__image { margin-top: -264px; height: 667px; background-size: cover; background-position: center; } @media (max-width: 1023px) { .post-header { margin-bottom: 40px; } .post-header__description { padding-top: 50px; box-sizing: border-box; height: auto; min-height: 375px; padding-bottom: 92px } .post-header__posted { text-align: left; order: -1; margin-bottom: 30px; } .post-header__posted-label { margin-bottom: 10px; } .post-header__image { margin-top: -92px; height: 184px; } } .blog-post-item__container:not(:last-child) { padding-bottom: 80px; border-bottom: 1px solid var(--brand-form--field--border-color); margin-bottom: 80px; } .blog-post-item__details { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; } .blog-post-item__date { margin-bottom: 20px; } .blog-post-item__title { margin-bottom: 20px; } .blog-post-item__text { margin-bottom: 20px; } .blog-post-item__link:not(:hover) { padding-left: 0; } @media (max-width: 1023px) { .blog-post-item__container:not(:last-child) { border: 0; padding-bottom: 30px; margin-bottom: 30px; } .blog-post-item__image { margin-bottom: 30px; } .blog-post-item__date { margin-bottom: 20px; } .blog-post-item__text { margin-bottom: 20px; } } .footer { padding-top: 80px; padding-bottom: 40px; background-color: var(--brand-color-black); } .jc-footer-nav a, .footer a { color: inherit; } .jc-footer-nav a, .footer a:not(:hover) { text-decoration: none; } .jc-footer-heading { margin-bottom: 12px; } .jc-footer-columns { justify-content: space-between; } @media (min-width: 1130px) { .jc-footer-columns .jc-footer-columns { gap: calc(min(100vw - (var(--padding-width) * 12), var(--container-max-width)) / 12); } } .footer__copyright { --jc-footer-copyright-padding: 28px 0; --jc-footer-copyright-margin: 100px 0 80px; padding: var(--jc-footer-copyright-padding); margin: var(--jc-footer-copyright-margin); border-top: 1px solid var(--brand-color-black-900); border-bottom: 1px solid var(--brand-color-black-900); display: grid; gap: 20px; align-items: center; justify-content: space-between; /* Desktop: 4 columns, 1 row */ grid-template-columns: auto auto 1fr auto; grid-template-areas: "one two three four"; } .footer__copyright-text { color: var(--brand-color-black-400); grid-area: one; } .footer__copyright-separator { color: var(--brand-color-black-900); grid-area: two; } .footer__legal-nav { grid-area: three; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 20px; } .footer__legal-nav a { font-size: var(--brand-body-text--font-size-6); color: var(--brand-color-black-500); } .footer__copyright-location-selector { grid-area: four; } .footer__a-power-move { --footer-gradient-color-1: var(--brand-color-secondary); --footer-gradient-color-2: var(--brand-color-primary); --footer-gradient-color-3: var(--brand-color-primary); --footer-gradient-color-4: #D47F65; width: 100%; background-color: var(--brand-color-black); } .footer__a-power-move svg { display: block; } .footer__a-power-move svg text { transition: fill 0.6s ease; } .footer__a-power-move svg stop { transition: offset 0.6s ease, stop-color 0.6s ease; } .footer__a-power-move:hover { --footer-gradient-color-1: var(--brand-color-primary); --footer-gradient-color-2: var(--brand-color-primary); --footer-gradient-color-3: var(--brand-color-secondary); --footer-gradient-color-4: var(--brand-color-tertiary); } .footer__a-power-move:hover svg text { fill: url(#footerTextGradientHover); } @media (max-width: 1023px) { .footer { padding-top: 60px; padding-bottom: 40px; } .footer__copyright { --jc-footer-copyright-padding: 20px 0; --jc-footer-copyright-margin: 40px 0; grid-template-columns: 1fr 1fr; grid-template-areas: "one four" "three three"; } .footer__copyright-separator { display: none; } .footer__legal-nav { justify-self: stretch; } .footer__copyright-location-selector { justify-self: flex-end; } } .archive-posts-list { margin-bottom: 120px; } .archive-filter-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 62px; } .archive-filter-bar__title { margin-right: 60px; } .archive-filter-bar__topics { display: flex; flex-wrap: wrap; row-gap: 10px; margin-right: auto; box-sizing: border-box; } .archive-filter-bar__topic { box-sizing: border-box; display: flex; align-items: center; height: 40px; padding: 0 30px; color: var(--brand-color-black); border: 1px solid var(--brand-form--field--border-color); border-radius: var(--brand-btn-border-radius); text-decoration: none; font-size: 14px; font-weight: bold; } .archive-filter-bar__topic:not(:last-child) { margin-right: 10px; } .archive-filter-bar__topic--active { background-color: var(--brand-color-primary); border-color: var(--brand-color-primary); color: var(--brand-color-white); } .archive-filter-bar__order-select { font-size: 14px; line-height: 21px; --select-height: 40px; width: 230px; } @media (max-width: 1023px) { .archive-filter-bar { flex-direction: column; align-items: flex-start; } .archive-filter-bar__title { margin-bottom: 20px; } .archive-filter-bar__topics { flex-wrap: nowrap; overflow-x: auto; margin-bottom: 20px; width: calc(100% + var(--padding-width)); padding-right: var(--padding-width); } .archive-filter-bar__topic { flex-shrink: 0; } .archive-filter-bar__order, .archive-filter-bar__order-select { width: 100%; } .archive-posts-list { margin-bottom: 60px; } } .post__content { color: #333; } .post__content p:first-child { color: var(--brand-color-black); font-family: var(--brand-subtitle--font-family); font-weight: var(--brand-subtitle--font-weight); line-height: var(--brand-subtitle--line-height); text-transform: var(--brand-subtitle--text-transform); letter-spacing: var(--brand-subtitle--letter-spacing); font-size: var(--brand-subtitle--font-size-1); } .page-404 { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } .page-404__logo { display: flex; } .page-404__logo-image { width: 378px; margin-bottom: 20px; } .page-404__title { font-size: 120px; line-height: 1em; margin-bottom: 10px; } .page-404__text { color: #333; margin-bottom: 30px; } .page-404__button { margin-top: 40px; } .ev-vehicle__stats { background-color: var(--brand-color-primary-5); padding: 60px 0; } .ev-vehicle__prime-stats { display: flex; justify-content: center; } .ev-vehicle-prime-stat { text-align: center; padding: 5px 80px; } .ev-vehicle-prime-stat:not(:last-child) { border-right: 1px solid var(--brand-form--field--border-color); } .ev-vehicle__table-stats { background-color: var(--brand-color-white); width: 100%; text-align: center; border-collapse: collapse; border: 1px solid var(--brand-form--field--border-color); } .ev-vehicle__table-stats td { width: 50%; height: 40px; border: 1px solid var(--brand-form--field--border-color); } .ev-vehicle__level { box-sizing: border-box; min-height: 410px; height: 100%; padding: 60px 40px; background-color: var(--brand-color-primary-5); /*color: var(--primary-dark-grey-color);*/ } .ev-vehicle__level:not(.slider__item) { position: relative; } .ev-vehicle__level-label { position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 73px; height: 31px; color: var(--brand-color-white); background-color: var(--brand-color-primary); font-size: 14px; line-height: 21px; font-weight: bold; } .ev-vehicle__level-title { margin-bottom: 10px; } .ev-vehicle__level--preferable .ev-vehicle__level-title { /*color: var(--primary-yellow-color);*/ } .ev-vehicle__level-text { min-height: 48px; margin-bottom: 20px; } .ev-vehicle__level-stat:not(:last-child) { margin-bottom: 20px; } .ev-vehicle__levels-notice { margin-top: 40px; color: #999; } .ev-vehicle__level-nav { position: absolute; bottom: 47px; left: 50%; transform: translateX(-50%); display: flex; } .ev-vehicle__level-nav-item { position: relative; width: 30px; height: 3px; border: 0; background-color: #ccc; font-size: 0; --active-width: 30px; --active-height: 3px; --active-background-color: var(--brand-color-primary); } .ev-vehicle__level-nav-item::before { content: ''; display: block; width: 100%; height: 20px; position: absolute; top: 50%; left: 0; transform: translateY(-50%); background-color: transparent; } .ev-vehicle__level-nav-item:hover { background-color: var(--brand-color-primary); } .ev-vehicle__level-nav-item:not(:last-child) { margin-right: 3px; } .ev-vehicle__home-charging-text { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 70px; text-align: center; letter-spacing: -0.002em; color: white; background-color: var(--brand-color-primary); /*margin-bottom: 22px;*/ } .ev-vehicle__home-charging-title { margin-bottom: 20px; } .ev-vehicle__home-charging-img { height: 100%; min-height: 490px; object-fit: cover; } .ev-vehicle__home-charging-gap { height: 20px; } .ev-vehicle__next-steps { padding: 120px 0; color: var(--brand-color-black); letter-spacing: -0.002em; background-color: var(--brand-color-primary-5); } .ev-vehicle__next-steps-list { margin-top: 40px; list-style: none; padding-left: 0; counter-reset: next-steps; } .ev-vehicle__next-steps-list-item { position: relative; counter-increment: next-steps; padding-left: 66px; margin-bottom: 30px; } .ev-vehicle__next-steps-list-item::before { content: counter(next-steps); position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 46px; height: 46px; border-radius: 50%; background-color: var(--brand-color-secondary); color: var(--brand-color-black); font-weight: bold; font-size: 18px; line-height: 27px; } @media (max-width: 1023px) { .ev-vehicle__stats { padding-top: 10px; padding-bottom: 10px; } .ev-vehicle__prime-stats { flex-direction: column; /*margin-bottom: 10px;*/ } .ev-vehicle-prime-stat { padding: 20px 0; } .ev-vehicle-prime-stat:not(:last-child) { border-right: 0; border-bottom: 1px solid var(--brand-form--field--border-color); } .ev-vehicle__table-stats { border: 0; } .ev-vehicle__table-stats tr { display: flex; flex-direction: column; border: 1px solid var(--brand-form--field--border-color); } .ev-vehicle__table-stats tr:not(:last-child) { border-bottom: 0; } .ev-vehicle__table-stats td { width: 100%; padding: 0; border: 0; height: 33px; } .ev-vehicle__table-stats td:first-child { display: flex; justify-content: center; align-items: flex-end; } .ev-vehicle__level-container { margin-bottom: 20px; } .ev-vehicle__home-charging-text { padding: 60px 33px; margin-bottom: 20px; } .ev-vehicle__home-charging-img { width: 100%; min-height: auto; height: 218px; margin-bottom: 10px; } .ev-vehicle__home-charging-gap { display: none; } } .ev-vehicles__list { margin-top: 60px; } .ev-vehicles__list-title { margin-bottom: 40px; } .ev-vehicles__list-item { margin-bottom: 40px; } .ev-vehicles__list-link { display: block; position: relative; font-size: 0; margin-bottom: 20px; } .ev-vehicles__list-link::before { content: ''; display: block; padding-top: 100%; } .ev-vehicles__list-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .ev-vehicles__list-item-title { margin-bottom: 10px; } .ev-vehicles__list-item-stats { list-style: none; padding-left: 0; color: #666; } @media (max-width: 1023px) { .ev-vehicles__list-title { margin-bottom: 30px; } } /* ====================================== */ /* Case studies page /* ====================================== */ .wp-block-columns.has-background.px-0, .case-studies-content.wp-block-columns.has-background, .case-studies-header.wp-block-columns.has-background { padding-left: 0; padding-right: 0; } .case-studies-header__sub-title { font-size: 20px; margin: 0; line-height: 1.5; font-weight: 600; } .case-studies-__heading, .case-studies-__sub-heading, .case-studies-header__title { font-weight: 700; font-size: 64px; line-height: 1.1; margin-top: 0.25em; } .case-studies-__heading { margin-bottom: 0.5em; } .case-studies-__sub-heading { font-size: 40px; } .case-studies-header__text { font-size: 24px; line-height: 1.5; margin: 0.35em 0 0; font-weight: 600; } .case-studies-header__location-icon.wp-block-image .alignleft { margin-right: 10px; } .case-studies-header__location-title { margin: 0.5em 0 0; font-weight: 600; } .case-studies__larger-text { font-size: 32px; line-height: 1.4; } /* Cover block with text in a ribbon over img */ .wp-block-cover.case-studies-text-over-img { padding: 0; } .wp-block-cover.case-studies-text-over-img .wp-block-column:nth-child(1) { padding: 100px 50px; max-width: 50%; } .case-studies-img-max-height img { max-height: 800px; object-fit: cover; } .case-studies-img-top-center img { object-position: top center; } @media screen and (max-width: 1023px) { .case-studies-header__sub-title { margin-top: 1em; font-size: 18px; } .case-studies-__heading, .case-studies-header__title { font-size: 44px; } .case-studies-header__text { font-size: 20px; } .case-studies__larger-text { font-size: 24px; } .case-studies-__sub-heading { font-size: 32px; } .wp-block-cover.case-studies-text-over-img .wp-block-column:nth-child(1) { padding: 50px 35px; } } @media screen and (max-width: 768px) { .wp-block-cover.case-studies-text-over-img .wp-block-column:nth-child(1) { max-width: 100%; margin-top: 75%; margin-bottom: var(--padding-width); padding: var(--padding-width); } .case-studies-__heading { font-size: 38px; } .case-studies-__sub-heading { font-size: 30px; } } .padded-popup .htr-modal-content-wrap { padding: 20px; } .sm-popup .htr-modal-content-wrap { max-width: 500px; width: 100%; } .md-popup .htr-modal-content-wrap { max-width: 800px; width: 100%; } .htr-modal-content-close-btn { overflow: hidden; text-indent: -9999px; background-color: var(--brand-color-black); transition: all .3s; } .htr-modal-content-close-btn:hover { background-color:var(--brand-color-white); color: var(--brand-color-black); } .htr-modal-content-close-btn:after { content: '×'; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); line-height: 1; text-indent: 0; font-size: 1.3em; } /* /Case studies page ====================================== */ /* ======================================*/ /* CaaS page /* ======================================*/ /* Caas - Hero area */ .caas-hero { --section-gap-multiplier: 4; --section-gap-size: calc(var(--section-gap-base) * var(--section-gap-multiplier)); padding-top: var(--section-gap-size); padding-bottom: var(--section-gap-size); } .caas-hero .wp-block-column { display: flex; flex-direction: column; gap: 20px; max-width: 620px; } .caas-hero h1, .caas-hero h2 { line-height: 1.1; } .caas-hero p { line-height: 1.4; margin: 0 0 10px; } .caas-form-holder .gform_button:not(:hover), .caas-text-image .btn:not(:hover) { background-color: var(--brand-color-primary); } @media screen and (max-width: 768px) { .caas-hero { min-height: 450px !important; } .caas-hero h1 { font-size: 19px !important; } .caas-hero h2 { font-size: 40px !important; } .caas-hero p { font-size: 16px !important; } .caas-hero:not(.porche-hero):not(.employee-home-hero):not(.home-charging-hero) .wp-block-cover__image-background { object-fit: fill; } } /* Caas - Text with image */ .caas-text-image .text-width-image__text-col, .caas-text-image .text-with-image__image-col { align-self: center; } @media (max-width: 1023px) { .caas-text-image .text-with-image__image-col { order: 3; margin-bottom: 0; margin-top: 30px; } } /* CaaS - Charging Full width section */ .caas-charging-hero { --section-gap-multiplier: 4; --section-gap-size: calc(var(--section-gap-base) * var(--section-gap-multiplier)); padding-top: var(--section-gap-size); padding-bottom: var(--section-gap-size); } .caas-charging-hero .wp-block-columns, .caas-charging-hero .wp-block-columns p:last-child { margin-bottom: 0; } .caas-charging-hero h2 { line-height: 1.1; margin-bottom: 40px; } /* Quick fix for image showcase (used for row of logos) */ .image-showcase:not(.image-showcase--scrollable) .image-showcase__images { gap: 40px; } @media (max-width: 1023px) { .image-showcase:not(image-showcase--scrollable) .image-showcase__images { gap: 20px; } } .case-studies-header__sub-title { font-size: 20px; margin: 0; line-height: 1.5; font-weight: 600; } .case-studies-__heading, .case-studies-__sub-heading, .case-studies-header__title { font-weight: 700; font-size: 64px; line-height: 1.1; margin-top: 0.25em; } .case-studies-__heading { margin-bottom: 0.5em; } .case-studies-__sub-heading { font-size: 40px; } .case-studies-header__text { font-size: 24px; line-height: 1.5; margin: 0.35em 0 0; font-weight: 600; } .case-studies-header__location-icon.wp-block-image .alignleft { margin-right: 10px; } .case-studies-header__location-title { margin: 0.5em 0 0; font-weight: 600; } .case-studies__larger-text { font-size: 32px; line-height: 1.4; } /* Cover block with text in a ribbon over img */ .wp-block-cover.case-studies-text-over-img { padding: 0; } .wp-block-cover.case-studies-text-over-img .wp-block-column:nth-child(1) { padding: 100px 50px; max-width: 50%; } .case-studies-img-max-height img { max-height: 800px; object-fit: cover; } .case-studies-img-top-center img { object-position: top center; } @media screen and (max-width: 1023px) { .case-studies-header__sub-title { margin-top: 1em; font-size: 18px; } .case-studies-__heading, .case-studies-header__title { font-size: 44px; } .case-studies-header__text { font-size: 20px; } .case-studies__larger-text { font-size: 24px; } .case-studies-__sub-heading { font-size: 32px; } .wp-block-cover.case-studies-text-over-img .wp-block-column:nth-child(1) { padding: 50px 35px; } } @media screen and (max-width: 768px) { .wp-block-cover.case-studies-text-over-img .wp-block-column:nth-child(1) { max-width: 100%; margin-top: 75%; margin-bottom: var(--padding-width); padding: var(--padding-width); } .case-studies-__heading { font-size: 38px; } .case-studies-__sub-heading { font-size: 30px; } } .padded-popup .htr-modal-content-wrap { padding: 20px; } .sm-popup .htr-modal-content-wrap { max-width: 500px; width: 100%; } .md-popup .htr-modal-content-wrap { max-width: 800px; width: 100%; } .htr-modal-content-close-btn { overflow: hidden; text-indent: -9999px; background-color: var(--brand-color-black); transition: all .3s; } .htr-modal-content-close-btn:hover { background-color: #fff; color: var(--brand-color-black); } .htr-modal-content-close-btn:after { content: '×'; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); line-height: 1; text-indent: 0; font-size: 1.3em; } .jc-caas-quote { font-size: 24px; font-weight: 600; margin: 0; } .jc-caas-quote cite { font-size: 16px; font-style: normal; } .jc-caas-quote cite span:nth-child(1) { color: var(--brand-color-black-700); } .jc-caas-quote cite span:last-child { font-size: 20px; } @media (max-width: 781px) { .jc-caas-quote { font-size: 20px; } .jc-caas-quote cite { font-size: 14px; } .jc-caas-quote cite span:last-child { font-size: 16px; } } .jc-caas-numbered-columns { position: relative; padding-top: 20px; margin-top: 20px; margin-bottom: 0; } .jc-caas-numbered-columns:before { content: ""; background: var(--brand-color-secondary); display: block; width: 100%; height: 10px; border-radius: 20px; position: absolute; top: 0; } .jc-caas-numbered-columns .wp-block-column { --jc-num-size: 24px; position: relative; padding-left: calc(var(--jc-num-size) + 10px); } .jc-caas-numbered-columns .wp-block-heading { font-weight: 600; display: flex; align-items: center; margin-left: calc(-1 * (var(--jc-num-size) + 10px)); column-gap: 10px; } .jc-caas-numbered-columns .wp-block-heading .number { display: inline-block; width: var(--jc-num-size); height: var(--jc-num-size); background: var(--brand-color-secondary); line-height: var(--jc-num-size); text-align: center; font-size: 14px; font-weight: 600; border-radius: 100%; } @media (max-width: 781px) { .jc-caas-numbered-columns { padding-top: 0; margin-top: 0; padding-left: 20px; } .jc-caas-numbered-columns:before { width: 10px; height: 100%; left: 0; } } .wp-block-heading.jc-caas-title { font-size: 42px; line-height: 1.2; } @media (max-width: 781px) { .wp-block-heading.jc-caas-title { font-size: 32px; } } .jc-caas-icon-columns .wp-block-heading, .wp-block-heading.jc-caas-small-title { font-size: 24px; } .jc-caas-icon-columns .wp-block-heading + p { margin-top: 0; } .wp-block-heading.jc-caas-body-title { font-size: 16px; } /* /CaaS page ====================================== */ /* ======================================*/ /* Home Charging page /* ======================================*/ /* Home charging - Hero area */ /* Hero on home charging page uses the caas-charging-hero class as well as this one */ .home-charging-hero { position: relative; } @media screen and (max-width: 768px) { .home-charging-hero .wp-block-cover__image-background { object-fit: cover; } } @media (min-width: 1024px) { .home-charging-hero:after { display: none; } } /* Home Charging - logos */ /* ------------------------------*/ .home-charging-logos-section { padding: 0; } .image-showcase.home-charging-logos img { max-height: 40px; width: auto; } @media (max-width: 1023px) { .image-showcase.home-charging-logos .image-showcase__image-container { height: auto; } } @media (min-width: 1024px) { .image-showcase.home-charging-logos { margin-bottom: 20px; } .image-showcase.home-charging-logos img { max-height: 80px; width: auto; } } .home-charging-logos-container .wp-block-lcb-logo-carousel { padding: 0 15px !important; } @media (max-width: 1023px) { .home-charging-logos-container { width: 100%; } } .home-charging-logos-section.hide { display: none !important; } /* Home Charging - bordered icons and text */ /* ----------------------------------------*/ .home-charging-border-column { border: 1px solid var(--brand-form--field--border-color); padding: 20px; } .home-charging-border-column .wp-block-image { margin-bottom: 30px; } .home-charging-border-column p { margin: 15px 0 0; } .home-charging-icon-image { min-height: 48px; display: flex; align-items: center; justify-content: center; } @media (max-width: 781px) { .home-charging-bordered-columns { gap: 10px } .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column.home-charging-border-column { flex: 0 1 calc(50% - 23px) !important; padding: 16px 8px; } .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column.home-charging-small-column { flex: 0 1 calc(50% - 16px) !important; } .home-charging-borderd-column__title { font-size: 24px !important; } .home-charging-borderd-column__title + p { font-size: 14px !important; margin-top: 5px; line-height: 1.2; } } /* Home Charging - grey section */ /* ------------------------------*/ .home-charging-grey-section { --header-footer-space: 30px; padding-left: 0; padding-right: 0; border-top: 3px solid var(--brand-form--field--border-color); margin-bottom: 0; } .home-charging-grey-section__header-row { margin-bottom: var(--header-footer-space); } .home-charging-grey-section__footer-row { margin-top: var(--header-footer-space); } @media (min-width: 1024px) { .home-charging-grey-section { --header-footer-space: 46px; } .home-charging-grey-section__2cols { gap: 80px; } } /* Home Charging - tabs */ /* ------------------------------*/ .home-charging-tabs { --pds-tabs-color-background: transparent; --pds-tabs-padding: 0; --pds-tabs-active-tab-text-color: var(--brand-color-primary); --pds-tabs-active-tab-text-color-basic: var(--brand-color-primary); --pds-tabs-h-tab-line-width-basic: 2px; } .home-charging-tabs.plethoraplugins-tabs-container--horizontal.plethoraplugins-theme__minimal.plethoraplugins-theme__basic .pds-tab__tab-button, .home-charging-tabs.plethoraplugins-tabs-container--horizontal.plethoraplugins-theme__minimal.plethoraplugins-theme__basic .plethoraplugins-tabs a { font-weight: 500; } @media (min-width: 782px) { .home-charging-tabs--min-height .plethoraplugins-tabs--content { min-height: 465px; } .home-charging-tabs--min-height-lg .plethoraplugins-tabs--content { min-height: 560px; } } @media (min-width: 1024px) { .home-charging-tabs--min-height .plethoraplugins-tabs--content { min-height: 450px; } .home-charging-tabs--min-height-lg .plethoraplugins-tabs--content { min-height: 650px; } } @media (max-width: 767px) { .home-charging-tabs.plethoraplugins-tabs-container--horizontal.plethoraplugins-theme__minimal.plethoraplugins-theme__basic .pds-tab__tab-button, .home-charging-tabs.plethoraplugins-tabs-container--horizontal.plethoraplugins-theme__minimal.plethoraplugins-theme__basic .plethoraplugins-tabs a { font-size: 16px; } } /* Home Charging - checklist ticks */ /* ---------------------------------*/ .home-charging-larger-text { font-size:16px; line-height: 1.4; } @media (min-width: 768px) { .home-charging-larger-text { font-size:20px; } } @media (min-width: 1024px) { .home-charging-larger-text { font-size:25px; } } /* Apply the styling to the bullet list */ .home-charging-checklist { list-style: none; padding: 0; } .home-charging-checklist li { position: relative; padding-left: 30px; margin-bottom: 10px; } .home-charging-checklist li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background-image: var(--brand-icon-svg--tick--orange); background-size: cover; } /* Home Charging - products */ /* ------------------------------*/ .home-charging-products { width: 100%; margin: 0; } .home-charging-products .image-columns__item-title-link { text-decoration: none; color: var(--brand-color-black); } .home-charging-products a.image-columns__item-button.btn.btn--gradient { background: transparent; border: 1px solid var(--brand-color-black); color: var(--brand-color-black); } .home-charging-products a.image-columns__item-button.btn.btn--gradient:hover { background: var(--brand-color-black); color: #fff; border: 1px solid var(--brand-color-black); } .home-charging-products a.image-columns__item-button.btn.btn--gradient:before { display: none; } @media (max-width: 1129px) { .home-charging-products { width: calc(100% + (var(--padding-width) * 2)); margin: calc(var(--padding-width) * -1); overflow: hidden; padding-bottom: 2px; } .home-charging-products .image-columns__container { padding: 0 var(--padding-width); } } /* Home Charging - Steps */ /* ------------------------------*/ .home-charging-steps .image-columns__item-image-container { justify-content: center; } .home-charging-steps .image-columns__item-content { text-align: center; } .home-charging-steps .image-columns__item { position: relative; } .home-charging-steps .image-columns__item:not(:first-child):before { content: ""; display: block; background: var(--brand-icon-svg--arrow--orange) no-repeat center; width: 20px; height: 20px; position: absolute; right: calc(100% - 10px); top: 130px; } .has-white-color .home-charging-steps .image-columns__item:not(:first-child):before {; background-image: var(--brand-icon-svg--arrow--white); } .home-charging-steps .image-columns__item-image { min-height: 70px; } @media (min-width: 1024px) { .home-charging-steps .image-columns__item:not(:first-child):before { top: 160px; } .home-charging-steps .image-columns__item-image { min-height: 70px; } } @media (min-width: 768px) { .home-charging-steps--center .flex-grid { justify-content: center; } } /* Home Charging - Incentives */ /* ------------------------------*/ .home-charging-incentives { padding: 48px 15px; background: #F48320; } @media (min-width: 1024px) { .home-charging-incentives { padding: 80px; } } .home-charging-incentives .wp-block-cover__image-background { mix-blend-mode: color-dodge; } .home-charging-incentives .wp-block-heading { line-height: 1.1; } .home-charging-incentives .blurb { line-height: 1.4; } @media (max-width: 767px) { .home-charging-incentives .wp-block-heading { font-size: 30px !important; } .home-charging-incentives .blurb { font-size: 16px !important; } } .home-charging-incentives .wp-block-columns { margin-bottom: 0; } @media (min-width: 768px) { .home-charging-incentives .wp-block-columns { align-items: center !important; } } /* Home Charging - Australia map */ /* ------------------------------*/ .australia-map { width: 100%; height: auto; max-height: 60vh; } .australia-map .state:hover path { fill: var(--brand-color-black); } /* Home Charging - State list */ /* ------------------------------*/ .home-charging-incentives .state-list { list-style: none; padding: 0; } .home-charging-incentives .state-list li { text-align: center; } .home-charging-incentives .state-list li a { color: var(--brand-color-white); text-decoration: none; padding: 10px; display: block; } .home-charging-incentives .state-list li a:hover { background: rgba(var(--brand-color-white-rgb),.25) } .home-charging-incentives .state-list li:first-child { border-top: 1px solid var(--brand-color-white); } .home-charging-incentives .state-list li { border-bottom: 1px solid var(--brand-color-white); } /* Home Charging - Reviews */ /* ------------------------------*/ .home-charging-reviews .wp-block-columns { margin-bottom: 0; } @media (min-width: 1024px) { .home-charging-reviews { } } /* Home Charging - FAQ */ /* ------------------------------*/ .home-charging-faq a.schema-faq-question { color: var(--brand-color-black); font-size: 20px !important; } .home-charging-faq .schema-faq-section { margin-bottom: 16px; border: 1px solid var(--brand-form--field--border-color); } .home-charging-faq .schema-faq-question:before { content: "+"; background: none; transform: translate(50%, -50%); line-height: 30px; font-weight: 900; font-size: 30px; width: auto; height: auto; } .home-charging-faq .schema-faq-question.faq-q-open:before { content: "-"; transform: translate(50%, -50%); } .home-charging-faq .schema-faq-question:after { display: none; } /* Home Charging - Form */ /* ------------------------------*/ .home-charging-form-holder { padding: 0; } .home-charging-form-holder .wp-block-heading { line-height: 1.2; } @media (min-width: 641px) { .home-charging-form-holder .ginput_address_state { margin-bottom: 8px; } } @media (max-width: 767px) { .home-charging-form-holder .wp-block-heading { font-size: 30px !important; } } /* ================================== */ /* Everything electric page */ /* ================================== */ .everything-electric-hero { margin-bottom: 0; } /* ================================== */ /* Emplolyee Home page */ /* ================================== */ .employee-home-hero { background-color: var(--brand-color-primary-5); text-shadow: 1px 1px 1px rgba(var(--brand-color-white-rgb),.7); } .employee-home-hero .btn { text-shadow: none; } .employee-home-included { background-color: var(--brand-color-primary-5); } @media (max-width: 781px) { .employee-home-hero .wp-block-cover__image-background { object-fit: scale-down; object-position: bottom right !important; } .employee-home-hero .wp-block-columns { width: 50%; margin: 0 auto 0 24px; } } @media (max-width: 460px) { .employee-home-hero .wp-block-columns { width: 100%; margin: 0; } } /* Employee Home - Included graphic */ /* ------------------------------*/ .employee-home-included .wp-block-image { margin-bottom: 0; } @media (max-width: 768px) { .employee-home-included .wp-block-image { overflow: hidden; } .employee-home-included .wp-block-image img { width: 200%; max-width: 200%; position: relative; left: -100%; } } /* Employee home - border columns */ /* ------------------------------*/ .employee-home-bordered-columns { } @media (max-width: 781px) { .wp-block-columns:not(.is-not-stacked-on-mobile).employee-home-bordered-columns>.wp-block-column.home-charging-border-column { flex: 1 1 100% !important; } } .case-studies-img-force-full-width > figure { width: 100%; } .case-studies-img-force-full-width img { max-width: unset; width: 100%; } .case-studies-img-bottom-center img { object-position: bottom center; } /* ------------------------------*/ /* JET Charge Assist table image /* ------------------------------*/ @media (max-width: 780px) { .jc-image-table-container { width: 100%; padding-left: 0; padding-right: 0; overflow: scroll; } .jc-image-table-container .wp-block-image { min-width: 700px; padding-left: 2.375em; padding-right: 2.375em; } } .jc-padding-width-sm { --padding-width: 5px; } /* Helper styles for patterns created with block editor */ :where(.wp-block-columns.is-layout-flex), :where(.is-layout-flex) { gap: var(--brand-block-gap); } .flex-gap--xl { --brand-block-gap: var(--brand-block-gap-xl); } .flex-gap--lg { --brand-block-gap: var(--brand-block-gap-lg); } .flex-gap--md { --brand-block-gap: var(--brand-block-gap-md); } .flex-gap--sm { --brand-block-gap: var(--brand-block-gap-sm); } .flex-gap--none { --brand-block-gap: 0px; } /* Page hero =======================================*/ .wp-block-cover.jc-hero { --jc-hero-min-height: 720px; --jc-her-padding-modifier: 1.5; min-height: var(--jc-hero-min-height); align-items: flex-end; padding: calc(var(--padding-width) * var(--jc-her-padding-modifier)) 0; } .wp-block-cover.jc-hero .is-layout-flex:not(.is-vertical) { align-items: flex-end; } .page-template-content-only.jc-has-header-overlay .js-breadcrumbs__over-content-wrapper ~ .wp-block-cover.jc-hero { --jc-breadcrumbs-height: 55px; /* ~ approx breadcrumb height */ padding-top: calc(var(--padding-width) * var(--jc-her-padding-modifier) + var(--jc-breadcrumbs-height)); } .wp-block-cover.jc-hero .wp-block-buttons { margin-top: 20px; } .wp-block-cover.jc-hero--lg { --jc-hero-min-height: 868px; } .wp-block-cover.jc-hero--overlay--full .wp-block-cover__background[class*="has-black-background-color"] { opacity: 1; --wp--preset--color--black: rgba(0,0,0,0.2); background-color: rgba(0,0,0,0.2); } .wp-block-cover__background[class*="has-black-background-color"]:before, .wp-block-cover.jc-hero--overly--left-gradient .wp-block-cover__background[class*="has-black-background-color"]:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(244.66deg, rgba(0, 0, 0, 0) 57.97%, rgba(0, 0, 0, 0.15) 99.63%); opacity: 0.6; } .wp-block-cover.jc-hero--overly--top-gradient:not(.wp-block-cover.jc-hero--overlay--full) .wp-block-cover__background[class*="has-black-background-color"] { opacity: 1; --wp--preset--color--black: rgba(0,0,0,0); background-color: rgba(0,0,0,0); } .wp-block-cover.jc-hero--overly--top-gradient .wp-block-cover__background[class*="has-black-background-color"]:before { height: 50%; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 20%, rgba(0, 0, 0, 0) 100%); opacity: 1; } @media (max-width: 1023px) { .wp-block-cover.jc-hero { --jc-hero-min-height: 600px; --jc-her-padding-modifier: 3; } .wp-block-cover.jc-hero--lg { --jc-hero-min-height: 680px; } .wp-block-cover.jc-hero--w-bolt .wp-block-group { flex-direction: column-reverse; align-items: flex-start !important; justify-content: flex-end !important; } .wp-block-cover.jc-hero--w-bolt .wp-block-group .wp-block-image { max-height: 160px; } .wp-block-cover.jc-hero--w-bolt .wp-block-group .wp-block-image img { width: auto; max-height: 160px; } } /* Half cover overlay pattern */ .wp-block-cover.jc-section-part-cover > .wp-block-cover__image-background { width: 66.66666%; left: auto; } .wp-block-cover.jc-section-part-cover .jc-section-part-cover__col-left, .wp-block-cover.jc-section-part-cover .jc-section-part-cover__col-right { flex-basis: 50%; } @media (max-width: 781px) { .wp-block-cover.jc-section-part-cover > .wp-block-cover__image-background { width: 100%; } .wp-block-cover.jc-section-part-cover .jc-section-part-cover__col-left, .wp-block-cover.jc-section-part-cover .jc-section-part-cover__col-right { flex-basis: 100%; } .wp-block-cover.jc-section-part-cover .jc-section-part-cover__col-left { padding: 0; order: 100; } } /* Bolt overlay column */ .wp-block-cover.jc-bolt-overlay { position: relative; overflow: visible; height: 100%; width: 100%; padding: 0; } .wp-block-cover.jc-bolt-overlay .wp-block-cover__inner-container { height: 100%; width: 100%; } .wp-block-cover.jc-bolt-overlay .jc-bolt-overlay__bolt-img { position: absolute; z-index: 2; top: -10%; left: 50%; width: 100%; height: 120%; transform: translateX(-50%); } .wp-block-cover.jc-bolt-overlay .jc-bolt-overlay__bolt-img img { width: 100%; height: 100%; object-fit: contain; } /* Half half vertical bg colours */ .jc-half-bg:before, .jc-half-bg:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 50%; z-index: 1; } .editor-styles-wrapper .jc-half-bg:before, .editor-styles-wrapper .jc-half-bg:after { z-index: -1; } .jc-half-bg:after { top: auto; bottom: 0; } .jc-half-bg > * { position: relative; z-index: 2; } .jc-half-bg--top-white:before, .jc-half-bg--bottom-white:after { background-color: var(--brand-color-white); } .jc-half-bg--top-grey:before, .jc-half-bg--bottom-grey:after { background-color: var(--brand-color-quaternary); } .jc-half-bg--top-black:before, .jc-half-bg--bottom-black:after { background-color: var(--brand-color-black); } .jc-check-list { list-style: none; padding-left: 0; } .jc-check-list li { padding-left: calc(1.5em + 8px); position: relative; margin-bottom: 1em; } .jc-check-list li::before { content: ''; position: absolute; left: 0; top: calc((var(--brand-body-text--line-height) - var(--brand-body-text--font-size-4)) / 2); width: 1.5em; height: 1.5em; mask-image: var(--brand-icon-svg--tick-circle); -webkit-mask-image: var(--brand-icon-svg--tick-circle); mask-repeat: no-repeat; mask-size: contain; } .jc-check-list--white li::before { background-color: var(--brand-color-white); } .jc-check-list--green li::before { background-color: var(--brand-color-tertiary); } .jc-check-list--none { padding-left: 0; list-style: none; } .jc-check-list--none li::before { display: none; padding-left: 0; } .jc-check-list--borders li { --jc-check-list-border-color: var(--brand-color-black-900); padding-top: 1em; padding-bottom: 1em; margin-bottom: 0; border-bottom: 1px solid var(--jc-check-list-border-color); } .jc-check-list--borders li:first-child { border-top: 1px solid var(--jc-check-list-border-color); } .has-brand-color-white-color .jc-check-list--borders li { --jc-check-list-border-color: var(--brand-color-black-900); } .has-brand-color-black-color .jc-check-list--borders li { --jc-check-list-border-color: var(--brand-color-quaternary); } .jc-check-list--borders--light li { --jc-check-list-border-color: var(--brand-color-black-100); } /* Read more for lists */ .jc-list-read-more li { display: none; transition: grid-template-rows .3s ease, padding .3s ease, opacity .3s ease; } /* Show only the first N items (set inline via JS based on data-items-to-show) */ .jc-list-read-more li.jc-visible { display: list-item; } .jc-list-read-more__inner { overflow: hidden; } .jc-list-read-more:not(.is-expanded) li:not(.jc-visible) { padding: 0; border: none; overflow: hidden; display: grid; grid-template-rows: 0fr; opacity: 0; } .jc-list-read-more:not(.is-expanded) li:not(.jc-visible) .jc-list-read-more__inner { overflow: hidden; } .jc-list-read-more.is-expanded li { display: list-item; grid-template-rows: 1fr; opacity: 1; } .jc-list-read-more-toggle { --brand-btn--icon-size: 16px; } .jc-list-read-more-toggle, .jc-list-read-more-toggle:hover { padding: 0 !important; background: none !important; } .jc-list-read-more-toggle:hover { text-decoration: underline; } .jc-list-read-more-toggle__chevron { color: var(--brand-color-primary); } .jc-list-read-more.is-expanded + .jc-list-read-more-toggle .jc-list-read-more-toggle__chevron, .jc-list-read-more-toggle.is-expanded .jc-list-read-more-toggle__chevron { transform: rotate(180deg); } /* Footer nav links */ .jc-check-list--link-list, .jc-check-list--link-list li { padding-left: 0; margin: 0 0 10px 0; } .jc-check-list--link-list li a { color: inherit; } .jc-check-list--link-list li a:not(:hover) { text-decoration: none; } /* Image with caption */ .wp-block-image.jc-caption-overlay { position: relative; } .jc-caption-overlay .wp-element-caption { position: absolute; bottom: 0; left: 0; right: 0; top: 0; padding: 10px 15px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 85.58%, rgba(0, 0, 0, 0.4) 100%); color: var(--brand-color-white); z-index: 2; box-sizing: border-box; display: flex; align-items: flex-end; margin: 0; } .text-tag--sm, .text-tag--md, .text-tag--lg { --brand-text-tag--line-height: 1; --brand-text-tag--padding: 10px 8px; --brand-text-tag--font-size: 0.875rem; --brand-text-tag--font-weight: 400; --brand-text-tag--color: var(--brand-color-white); --brand-text-tag--background-color: var(--brand-color-black); --brand-text-tag--border-radius: 4px; --brand-text-tag--border: 1px solid var(--brand-text-tag--background-color); padding: var(--brand-text-tag--padding); font-size: var(--brand-text-tag--font-size); font-weight: var(--brand-text-tag--font-weight); line-height: var(--brand-text-tag--line-height, 1); color: var(--brand-text-tag--color); background-color: var(--brand-text-tag--background-color); border-radius: var(--brand-text-tag--border-radius); border: var(--brand-text-tag--border); display: inline-block; } .text-tag--block { display: block; } .text-tag--list { list-style: none; padding-left: 0; margin-left: 0; display: inline-flex; flex-direction: column; gap: 5px; align-items: flex-start; } .text-tag--list li { margin-left: 0; } /* Tag sizes */ .text-tag--sm { --brand-text-tag--padding: 6px 8px; --brand-text-tag--font-size: var(--brand-body-text--font-size-6); --brand-text-tag--border-radius: 4px; } .text-tag--md { --brand-text-tag--padding: 8px 10px; --brand-text-tag--font-size: var(--brand-body-text--font-size-6); --brand-text-tag--border-radius: 4px; } .text-tag--lg { --brand-text-tag--padding: 10px 12px; --brand-text-tag--font-size: var(--brand-body-text--font-size-5); --brand-text-tag--border-radius: 4px; } /* Tag colors */ /* Solid */ .text-tag--orange { --brand-text-tag--background-color: var(--brand-btn-color--orange--bg); --brand-text-tag--color: var(--brand-btn-color--orange--text); } .text-tag--green { --brand-text-tag--background-color: var(--brand-btn-color--green--bg); --brand-text-tag--color: var(--brand-btn-color--green--text); } .text-tag--yellow { --brand-text-tag--background-color: var(--brand-btn-color--yellow--bg); --brand-text-tag--color: var(--brand-btn-color--yellow--text); } .text-tag--white { --brand-text-tag--background-color: var(--brand-btn-color--white--bg); --brand-text-tag--color: var(--brand-btn-color--white--text); } .text-tag--black { --brand-text-tag--background-color: var(--brand-btn-color--black--bg); --brand-text-tag--color: var(--brand-btn-color--black--text); } /* Outline */ .text-tag--outline { --brand-text-tag--background-color: transparent; --brand-text-tag--border: 1px solid var(--brand-text-tag--color); } .text-tag--orange.text-tag--outline { --brand-text-tag--color: var(--brand-btn-color--orange--bg); } .text-tag--green.text-tag--outline { --brand-text-tag--color: var(--brand-btn-color--green--bg); } .text-tag--yellow.text-tag--outline { --brand-text-tag--color: var(--brand-btn-color--yellow--bg); } .text-tag--white.text-tag--outline { --brand-text-tag--color: var(--brand-btn-color--white--bg); } .text-tag--black.text-tag--outline { --brand-text-tag--color: var(--brand-btn-color--black--bg); } /* Opacity bg */ .text-tag--white.text-tag--opacity-bg { --brand-text-tag--background-color: rgba(var(--brand-color-white-rgb), 0.1); --brand-text-tag--color: var(--brand-btn-color--black--text); --brand-text-tag--border: 1px solid transparent; } .text-tag--black.text-tag--opacity-bg { --brand-text-tag--background-color: rgba(var(--brand-color-black-rgb), 0.1); --brand-text-tag--color: var(--brand-btn-color--white--text); --brand-text-tag--border: 1px solid transparent; } .jc-footer-cta { } @media (max-width: 781px) { .jc-footer-cta__img-col { order: -1; } .jc-footer-cta__img-col .wp-block-image { margin-left: 0 !important; } .jc-footer-cta__img-col .wp-block-image img { height: 120px !important; } }