/*# sourceMappingURL=style.css.map */ /*! Theme Name: 1p21 Theme Build Author: 1p21 -------------- for future friendly editing and to avoid possibility of change overrides, DO: - For smaller and or quick fixes, put css changes in post-live.css OR - For complex and or elaborate rebuilds/ Site build, modify sass files locally with a compiler and output as the style.css */ /* ================================================================================ * Resets.css ================================================================================ */ /*** The new CSS reset - version 1.8.3 (last updated 21.1.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio, input, textarea, select, button, table, caption, tbody, tfoot, thead, tr, th, td):not(svg *, symbol *)) { all: unset; display: revert; } /* Reset form elements while keeping essential ui styles */ :where(input, textarea, select, option, button, optgroup) { all: revert; margin: unset; -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; } /* resets table styles nicely so html attribute features are still preserved */ :where(table, caption, tbody, tfoot, thead, tr, th, td) { margin: unset; padding: unset; border: unset; background: unset; border-collapse: collapse; border-spacing: 0; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* ================================================================================ * Native Custom CSS Properties ================================================================================ */ /* css vars because internet explorer can no longer hold us back <3 */ :root { /* Core Vars DO NOT EDIT. */ /* Design Reference - Breakpoints This will be used by javascript to track media queries on stuff like sliders */ --br-xxs: 359px; --br-xs: 767px; --br-sm: 1199px; --br-md: 1399px; --br-lg: 1899px; --br-xl: 2879px; --br-xxl: 3839px; --comp: 360px; --overlap-buffer: .001rem; --font-primary: Public Sans, Helvetica, Arial, sans-serif; --font-secondary: Public Sans, Helvetica, Arial, sans-serif; --font-accent: Public Sans, Helvetica, Arial, sans-serif; --font-monospace: monospace; --color-dark: #11213c; --color-dark-alt: #10254a; --color-light: #fff; --color-light-alt: #f1efeb; --color-primary: #d00719; --color-primary-alt: #d00719; --color-primary-gradient-start: var(--color-primary); --color-primary-gradient-end: var(--color-primary-alt); --color-secondary: #042069; --color-secondary-alt: #042666; --color-secondary-gradient-start: var(--color-secondary); --color-secondary-gradient-end: var(--color-secondary-alt); --color-accent: #d00719; --color-accent-alt: var(--color-accent); --color-accent-gradient-start: var(--color-accent); --color-accent-gradient-end: var(--color-accent-alt); --color-neutral: #d0c0b9; --color-neutral-light: #d0c0b9; --color-neutral-lighter: var(--color-neutral-light); --color-neutral-lightest: var(--color-neutral-lighter); --color-neutral-dark: var(--color-neutral); --color-neutral-darker: var(--color-neutral-dark); --color-neutral-darkest: var(--color-neutral-darker); --color-success: #0c0; --color-caution: #c60; --color-error: var(--color-primary); } @media only screen and (min-width: 768px) { :root { /* Core Vars DO NOT EDIT. */ --comp: 768px; } } @media only screen and (min-width: 1200px) { :root { /* Core Vars DO NOT EDIT. */ --comp: 1200px; } } @media only screen and (min-width: 1400px) { :root { /* Core Vars DO NOT EDIT. */ --comp: 1400px; } } @media only screen and (min-width: 1900px) { :root { /* Core Vars DO NOT EDIT. */ --comp: 1920px; } } /* ================================================================================ * Global Styles/Normalize: * Custom reset and global styles for the site html tags ================================================================================ */ /* Custom scaffolding and normalizing styles --------------------------------------------------------------- */ html, body { /* prevent document from shrinking to window sizes that are too small */ min-width: 320px; font-family: var(--font-primary); font-weight: 400; color: var(--scheme-fg, var(--color-dark)); background: var(--scheme-bg, var(--color-light)); background-attachment: fixed; word-wrap: break-word; scroll-behavior: smooth; min-height: 100vh; min-height: -webkit-fill-available; accent-color: var(--color-primary); } /* position sticky friendly way to cut off any horizontal scrolls but also allow y to still scroll. Apply only on html element or everything will jiggle for safari ios. + overflox fix for chrome's responsive inspector -_- --------------------------------------------------------------- */ html { overflow-x: hidden; overflow-y: scroll; } body { overflow-x: clip; } /* Remove scrollbar ONLY on touch devices --------------------------------------------------------------- */ @media (pointer: coarse) { html, body { scrollbar-width: none; } ::-webkit-scrollbar { display: none; } } /* disable browser focus default styles: Note: customize focus styles as well for accessibility. recommended to set as the same styles as hovers on elements --------------------------------------------------------------- */ :focus { outline: none; } /* Critical sizing and fonts fixes --------------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; } *, *::before, *::after { /* fix animation flickering issues for webkit browsers */ -webkit-backspace-visibility: hidden; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Form control resets. Note: will not entirely prettify Gravity forms styles for the design... yet. To view the rest of the form control scaffoldings, including gravity forms' go to vendor/_gforms styles --------------------------------------------------------------- */ input:not([type=checkbox]):not([type=radio]), textarea, select, button { -webkit-appearance: none; border-radius: 0; border: none; resize: none; display: block; font: inherit; color: inherit; margin: 0; } input:is([type=checkbox], [type=radio]) { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; } input::-webkit-input-placeholder, select::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* placeholder stuff. adjust as needed */ color: inherit; opacity: .5; -webkit-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } input::-moz-placeholder, select::-moz-placeholder, textarea::-moz-placeholder { /* placeholder stuff. adjust as needed */ color: inherit; opacity: .5; -moz-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } input::-ms-input-placeholder, select::-ms-input-placeholder, textarea::-ms-input-placeholder { /* placeholder stuff. adjust as needed */ color: inherit; opacity: .5; -ms-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } input:focus::-webkit-input-placeholder, select:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder { /* placeholder stuff. adjust as needed */ opacity: .2; } input:focus::-moz-placeholder, select:focus::-moz-placeholder, textarea:focus::-moz-placeholder { /* placeholder stuff. adjust as needed */ opacity: .2; } input:focus::-ms-input-placeholder, select:focus::-ms-input-placeholder, textarea:focus::-ms-input-placeholder { /* placeholder stuff. adjust as needed */ opacity: .2; } button { border: none; cursor: pointer; } /* Remove default ugly blue links. NOTE: Make sure to style a tags appropiately for accessibility while maintianing styleguide --------------------------------------------------------------- */ a { text-decoration: none; color: inherit; cursor: pointer; } /* Monospace elements --------------------------------------------------------------- */ :where(pre, code, kbd, tt) { font-family: var(--font-monospace); background: rgba(0, 0, 0, .05); } :where(code, kbd, tt) { padding: .125em; } :where(pre) { padding: 1em; max-width: 100%; line-height: 1; overflow: auto; } :where(pre) * { border: 0; margin: 0; padding: 0; } /* Other critical element styles --------------------------------------------------------------- */ :where(strong, b) { font-family: inherit; font-weight: bolder; } :where(em, cite, i, var) { font-family: inherit; font-style: italic; } :where(u) { text-decoration: underline; } :where(var) { font-family: var(--font-secondary); } :where(sup, sub, small) { font-size: .75em; } :where(sup) { vertical-align: top; } :where(sub) { vertical-align: bottom; } :where(hr) { outline: 0; border: 0; display: block; } /* Images * Note: best practice to let images only expand within available space --------------------------------------------------------------- */ :where(img, svg) { max-width: 100%; } :where(img) { height: auto; } /* Embeds * Note: best practice to let images only expand within available space --------------------------------------------------------------- */ :where(video, audio, iframe, object, embed) { max-width: 100%; } /* Other custom global scaffolding here.... --------------------------------------------------------------- */ /* Normalize template main and asides' vertical padding. adjust as needed then customize in certain template styles. You can use classes for other elements that need to share the same padding as well --------------------------------------------------------------- */ :where(main, .main, aside, .aside) { padding-block: 2.125rem 4.9375rem; } @media only screen and (min-width: 768px) { :where(main, .main, aside, .aside) { padding-block: 4rem 5rem; } } @media only screen and (min-width: 1200px) { :where(main, .main, aside, .aside) { padding-block: 7rem 7rem; } } @media only screen and (min-width: 1900px) { :where(main, .main, aside, .aside) { padding-block: 8.75rem 8.75rem; } } .banner-no-background-image :where(main, .main, aside, .aside) { padding-top: 0rem; } /* ...Or separate normalize template main and asides' vertical padding. --------------------------------------------------------------- */ /* Catch fancy/weird/whatever positioned elements into custom templates' content area only + prevent clipping issues --------------------------------------------------------------- */ .template-wrapper { position: relative; } /* ================================================================================ * Vendor Overrides ( CSS Library/ Plugin related stuff. EG: animated,slick,gravity forms etc. ) ================================================================================ */ /* Vendor - Animate.css --------------------------------------------------------------- */ /*! * animate.css - https://animate.style/ * Version - 4.1.1 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2020 Animate.css */ :root { --animate-duration: 1s; --animate-delay: 1s; --animate-repeat: 1; } .animate__animated { animation-duration: 1s; animation-duration: var(--animate-duration); animation-fill-mode: both; } .animate__animated.animate__infinite { animation-iteration-count: infinite; } .animate__animated.animate__repeat-1 { animation-iteration-count: 1; animation-iteration-count: var(--animate-repeat); } .animate__animated.animate__repeat-2 { animation-iteration-count: 2; animation-iteration-count: calc(var(--animate-repeat) * 2); } .animate__animated.animate__repeat-3 { animation-iteration-count: 3; animation-iteration-count: calc(var(--animate-repeat) * 3); } .animate__animated.animate__delay-1s { animation-delay: 1s; animation-delay: var(--animate-delay); } .animate__animated.animate__delay-2s { animation-delay: 2s; animation-delay: calc(var(--animate-delay) * 2); } .animate__animated.animate__delay-3s { animation-delay: 3s; animation-delay: calc(var(--animate-delay) * 3); } .animate__animated.animate__delay-4s { animation-delay: 4s; animation-delay: calc(var(--animate-delay) * 4); } .animate__animated.animate__delay-5s { animation-delay: 5s; animation-delay: calc(var(--animate-delay) * 5); } .animate__animated.animate__faster { animation-duration: .5s; animation-duration: calc(var(--animate-duration) / 2); } .animate__animated.animate__fast { animation-duration: .8s; animation-duration: calc(var(--animate-duration) * .8); } .animate__animated.animate__slow { animation-duration: 2s; animation-duration: calc(var(--animate-duration) * 2); } .animate__animated.animate__slower { animation-duration: 3s; animation-duration: calc(var(--animate-duration) * 3); } @media (prefers-reduced-motion: reduce), print { .animate__animated { animation-duration: 1ms !important; transition-duration: 1ms !important; animation-iteration-count: 1 !important; } .animate__animated[class*=Out] { opacity: 0; } } @keyframes bounce { 0%, 20%, 53%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); transform: translateZ(0); } 40%, 43% { animation-timing-function: cubic-bezier(.755, .05, .855, .06); transform: translate3d(0, -30px, 0) scaleY(1.1); } 70% { animation-timing-function: cubic-bezier(.755, .05, .855, .06); transform: translate3d(0, -15px, 0) scaleY(1.05); } 80% { transition-timing-function: cubic-bezier(.215, .61, .355, 1); transform: translateZ(0) scaleY(.95); } 90% { transform: translate3d(0, -4px, 0) scaleY(1.02); } } .animate__bounce { animation-name: bounce; transform-origin: center bottom; } @keyframes flash { 0%, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } .animate__flash { animation-name: flash; } @keyframes pulse { 0% { transform: scaleX(1); } 50% { transform: scale3d(1.05, 1.05, 1.05); } to { transform: scaleX(1); } } .animate__pulse { animation-name: pulse; animation-timing-function: ease-in-out; } @keyframes rubberBand { 0% { transform: scaleX(1); } 30% { transform: scale3d(1.25, .75, 1); } 40% { transform: scale3d(.75, 1.25, 1); } 50% { transform: scale3d(1.15, .85, 1); } 65% { transform: scale3d(.95, 1.05, 1); } 75% { transform: scale3d(1.05, .95, 1); } to { transform: scaleX(1); } } .animate__rubberBand { animation-name: rubberBand; } @keyframes shakeX { 0%, to { transform: translateZ(0); } 10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0); } } .animate__shakeX { animation-name: shakeX; } @keyframes shakeY { 0%, to { transform: translateZ(0); } 10%, 30%, 50%, 70%, 90% { transform: translate3d(0, -10px, 0); } 20%, 40%, 60%, 80% { transform: translate3d(0, 10px, 0); } } .animate__shakeY { animation-name: shakeY; } @keyframes headShake { 0% { transform: translateX(0); } 6.5% { transform: translateX(-6px) rotateY(-9deg); } 18.5% { transform: translateX(5px) rotateY(7deg); } 31.5% { transform: translateX(-3px) rotateY(-5deg); } 43.5% { transform: translateX(2px) rotateY(3deg); } 50% { transform: translateX(0); } } .animate__headShake { animation-timing-function: ease-in-out; animation-name: headShake; } @keyframes swing { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } to { transform: rotate(0deg); } } .animate__swing { transform-origin: top center; animation-name: swing; } @keyframes tada { 0% { transform: scaleX(1); } 10%, 20% { transform: scale3d(.9, .9, .9) rotate(-3deg); } 30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); } 40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); } to { transform: scaleX(1); } } .animate__tada { animation-name: tada; } @keyframes wobble { 0% { transform: translateZ(0); } 15% { transform: translate3d(-25%, 0, 0) rotate(-5deg); } 30% { transform: translate3d(20%, 0, 0) rotate(3deg); } 45% { transform: translate3d(-15%, 0, 0) rotate(-3deg); } 60% { transform: translate3d(10%, 0, 0) rotate(2deg); } 75% { transform: translate3d(-5%, 0, 0) rotate(-1deg); } to { transform: translateZ(0); } } .animate__wobble { animation-name: wobble; } @keyframes jello { 0%, 11.1%, to { transform: translateZ(0); } 22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { transform: skewX(-.78125deg) skewY(-.78125deg); } 77.7% { transform: skewX(.390625deg) skewY(.390625deg); } 88.8% { transform: skewX(-.1953125deg) skewY(-.1953125deg); } } .animate__jello { animation-name: jello; transform-origin: center; } @keyframes heartBeat { 0% { transform: scale(1); } 14% { transform: scale(1.3); } 28% { transform: scale(1); } 42% { transform: scale(1.3); } 70% { transform: scale(1); } } .animate__heartBeat { animation-name: heartBeat; animation-duration: 1.3s; animation-duration: calc(var(--animate-duration) * 1.3); animation-timing-function: ease-in-out; } @keyframes backInDown { 0% { transform: translateY(-1200px) scale(.7); opacity: .7; } 80% { transform: translateY(0) scale(.7); opacity: .7; } to { transform: scale(1); opacity: 1; } } .animate__backInDown { animation-name: backInDown; } @keyframes backInLeft { 0% { transform: translateX(-2000px) scale(.7); opacity: .7; } 80% { transform: translateX(0) scale(.7); opacity: .7; } to { transform: scale(1); opacity: 1; } } .animate__backInLeft { animation-name: backInLeft; } @keyframes backInRight { 0% { transform: translateX(2000px) scale(.7); opacity: .7; } 80% { transform: translateX(0) scale(.7); opacity: .7; } to { transform: scale(1); opacity: 1; } } .animate__backInRight { animation-name: backInRight; } @keyframes backInUp { 0% { transform: translateY(1200px) scale(.7); opacity: .7; } 80% { transform: translateY(0) scale(.7); opacity: .7; } to { transform: scale(1); opacity: 1; } } .animate__backInUp { animation-name: backInUp; } @keyframes backOutDown { 0% { transform: scale(1); opacity: 1; } 20% { transform: translateY(0) scale(.7); opacity: .7; } to { transform: translateY(700px) scale(.7); opacity: .7; } } .animate__backOutDown { animation-name: backOutDown; } @keyframes backOutLeft { 0% { transform: scale(1); opacity: 1; } 20% { transform: translateX(0) scale(.7); opacity: .7; } to { transform: translateX(-2000px) scale(.7); opacity: .7; } } .animate__backOutLeft { animation-name: backOutLeft; } @keyframes backOutRight { 0% { transform: scale(1); opacity: 1; } 20% { transform: translateX(0) scale(.7); opacity: .7; } to { transform: translateX(2000px) scale(.7); opacity: .7; } } .animate__backOutRight { animation-name: backOutRight; } @keyframes backOutUp { 0% { transform: scale(1); opacity: 1; } 20% { transform: translateY(0) scale(.7); opacity: .7; } to { transform: translateY(-700px) scale(.7); opacity: .7; } } .animate__backOutUp { animation-name: backOutUp; } @keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); } 0% { opacity: 0; transform: scale3d(.3, .3, .3); } 20% { transform: scale3d(1.1, 1.1, 1.1); } 40% { transform: scale3d(.9, .9, .9); } 60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); } 80% { transform: scale3d(.97, .97, .97); } to { opacity: 1; transform: scaleX(1); } } .animate__bounceIn { animation-duration: .75s; animation-duration: calc(var(--animate-duration) * .75); animation-name: bounceIn; } @keyframes bounceInDown { 0%, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); } 0% { opacity: 0; transform: translate3d(0, -3000px, 0) scaleY(3); } 60% { opacity: 1; transform: translate3d(0, 25px, 0) scaleY(.9); } 75% { transform: translate3d(0, -10px, 0) scaleY(.95); } 90% { transform: translate3d(0, 5px, 0) scaleY(.985); } to { transform: translateZ(0); } } .animate__bounceInDown { animation-name: bounceInDown; } @keyframes bounceInLeft { 0%, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); } 0% { opacity: 0; transform: translate3d(-3000px, 0, 0) scaleX(3); } 60% { opacity: 1; transform: translate3d(25px, 0, 0) scaleX(1); } 75% { transform: translate3d(-10px, 0, 0) scaleX(.98); } 90% { transform: translate3d(5px, 0, 0) scaleX(.995); } to { transform: translateZ(0); } } .animate__bounceInLeft { animation-name: bounceInLeft; } @keyframes bounceInRight { 0%, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); } 0% { opacity: 0; transform: translate3d(3000px, 0, 0) scaleX(3); } 60% { opacity: 1; transform: translate3d(-25px, 0, 0) scaleX(1); } 75% { transform: translate3d(10px, 0, 0) scaleX(.98); } 90% { transform: translate3d(-5px, 0, 0) scaleX(.995); } to { transform: translateZ(0); } } .animate__bounceInRight { animation-name: bounceInRight; } @keyframes bounceInUp { 0%, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); } 0% { opacity: 0; transform: translate3d(0, 3000px, 0) scaleY(5); } 60% { opacity: 1; transform: translate3d(0, -20px, 0) scaleY(.9); } 75% { transform: translate3d(0, 10px, 0) scaleY(.95); } 90% { transform: translate3d(0, -5px, 0) scaleY(.985); } to { transform: translateZ(0); } } .animate__bounceInUp { animation-name: bounceInUp; } @keyframes bounceOut { 20% { transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; transform: scale3d(.3, .3, .3); } } .animate__bounceOut { animation-duration: .75s; animation-duration: calc(var(--animate-duration) * .75); animation-name: bounceOut; } @keyframes bounceOutDown { 20% { transform: translate3d(0, 10px, 0) scaleY(.985); } 40%, 45% { opacity: 1; transform: translate3d(0, -20px, 0) scaleY(.9); } to { opacity: 0; transform: translate3d(0, 2000px, 0) scaleY(3); } } .animate__bounceOutDown { animation-name: bounceOutDown; } @keyframes bounceOutLeft { 20% { opacity: 1; transform: translate3d(20px, 0, 0) scaleX(.9); } to { opacity: 0; transform: translate3d(-2000px, 0, 0) scaleX(2); } } .animate__bounceOutLeft { animation-name: bounceOutLeft; } @keyframes bounceOutRight { 20% { opacity: 1; transform: translate3d(-20px, 0, 0) scaleX(.9); } to { opacity: 0; transform: translate3d(2000px, 0, 0) scaleX(2); } } .animate__bounceOutRight { animation-name: bounceOutRight; } @keyframes bounceOutUp { 20% { transform: translate3d(0, -10px, 0) scaleY(.985); } 40%, 45% { opacity: 1; transform: translate3d(0, 20px, 0) scaleY(.9); } to { opacity: 0; transform: translate3d(0, -2000px, 0) scaleY(3); } } .animate__bounceOutUp { animation-name: bounceOutUp; } @keyframes fadeIn { 0% { opacity: 0; } to { opacity: 1; } } .animate__fadeIn { animation-name: fadeIn; } @keyframes fadeInDown { 0% { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: translateZ(0); } } .animate__fadeInDown { animation-name: fadeInDown; } @keyframes fadeInDownBig { 0% { opacity: 0; transform: translate3d(0, -2000px, 0); } to { opacity: 1; transform: translateZ(0); } } .animate__fadeInDownBig { animation-name: fadeInDownBig; } @keyframes fadeInLeft { 0% { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: translateZ(0); } } .animate__fadeInLeft { animation-name: fadeInLeft; } @keyframes fadeInLeftBig { 0% { opacity: 0; transform: translate3d(-2000px, 0, 0); } to { opacity: 1; transform: translateZ(0); } } .animate__fadeInLeftBig { animation-name: fadeInLeftBig; } @keyframes fadeInRight { 0% { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: translateZ(0); } } .animate__fadeInRight { animation-name: fadeInRight; } @keyframes fadeInRightBig { 0% { opacity: 0; transform: translate3d(2000px, 0, 0); } to { opacity: 1; transform: translateZ(0); } } .animate__fadeInRightBig { animation-name: fadeInRightBig; } @keyframes fadeInUp { 0% { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: translateZ(0); } } .animate__fadeInUp { animation-name: fadeInUp; } @keyframes fadeInUpBig { 0% { opacity: 0; transform: translate3d(0, 2000px, 0); } to { opacity: 1; transform: translateZ(0); } } .animate__fadeInUpBig { animation-name: fadeInUpBig; } @keyframes fadeInTopLeft { 0% { opacity: 0; transform: translate3d(-100%, -100%, 0); } to { opacity: 1; transform: translateZ(0); } } .animate__fadeInTopLeft { animation-name: fadeInTopLeft; } @keyframes fadeInTopRight { 0% { opacity: 0; transform: translate3d(100%, -100%, 0); } to { opacity: 1; transform: translateZ(0); } } .animate__fadeInTopRight { animation-name: fadeInTopRight; } @keyframes fadeInBottomLeft { 0% { opacity: 0; transform: translate3d(-100%, 100%, 0); } to { opacity: 1; transform: translateZ(0); } } .animate__fadeInBottomLeft { animation-name: fadeInBottomLeft; } @keyframes fadeInBottomRight { 0% { opacity: 0; transform: translate3d(100%, 100%, 0); } to { opacity: 1; transform: translateZ(0); } } .animate__fadeInBottomRight { animation-name: fadeInBottomRight; } @keyframes fadeOut { 0% { opacity: 1; } to { opacity: 0; } } .animate__fadeOut { animation-name: fadeOut; } @keyframes fadeOutDown { 0% { opacity: 1; } to { opacity: 0; transform: translate3d(0, 100%, 0); } } .animate__fadeOutDown { animation-name: fadeOutDown; } @keyframes fadeOutDownBig { 0% { opacity: 1; } to { opacity: 0; transform: translate3d(0, 2000px, 0); } } .animate__fadeOutDownBig { animation-name: fadeOutDownBig; } @keyframes fadeOutLeft { 0% { opacity: 1; } to { opacity: 0; transform: translate3d(-100%, 0, 0); } } .animate__fadeOutLeft { animation-name: fadeOutLeft; } @keyframes fadeOutLeftBig { 0% { opacity: 1; } to { opacity: 0; transform: translate3d(-2000px, 0, 0); } } .animate__fadeOutLeftBig { animation-name: fadeOutLeftBig; } @keyframes fadeOutRight { 0% { opacity: 1; } to { opacity: 0; transform: translate3d(100%, 0, 0); } } .animate__fadeOutRight { animation-name: fadeOutRight; } @keyframes fadeOutRightBig { 0% { opacity: 1; } to { opacity: 0; transform: translate3d(2000px, 0, 0); } } .animate__fadeOutRightBig { animation-name: fadeOutRightBig; } @keyframes fadeOutUp { 0% { opacity: 1; } to { opacity: 0; transform: translate3d(0, -100%, 0); } } .animate__fadeOutUp { animation-name: fadeOutUp; } @keyframes fadeOutUpBig { 0% { opacity: 1; } to { opacity: 0; transform: translate3d(0, -2000px, 0); } } .animate__fadeOutUpBig { animation-name: fadeOutUpBig; } @keyframes fadeOutTopLeft { 0% { opacity: 1; transform: translateZ(0); } to { opacity: 0; transform: translate3d(-100%, -100%, 0); } } .animate__fadeOutTopLeft { animation-name: fadeOutTopLeft; } @keyframes fadeOutTopRight { 0% { opacity: 1; transform: translateZ(0); } to { opacity: 0; transform: translate3d(100%, -100%, 0); } } .animate__fadeOutTopRight { animation-name: fadeOutTopRight; } @keyframes fadeOutBottomRight { 0% { opacity: 1; transform: translateZ(0); } to { opacity: 0; transform: translate3d(100%, 100%, 0); } } .animate__fadeOutBottomRight { animation-name: fadeOutBottomRight; } @keyframes fadeOutBottomLeft { 0% { opacity: 1; transform: translateZ(0); } to { opacity: 0; transform: translate3d(-100%, 100%, 0); } } .animate__fadeOutBottomLeft { animation-name: fadeOutBottomLeft; } @keyframes flip { 0% { transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn); animation-timing-function: ease-out; } 40% { transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg); animation-timing-function: ease-out; } 50% { transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg); animation-timing-function: ease-in; } 80% { transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0deg); animation-timing-function: ease-in; } to { transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg); animation-timing-function: ease-in; } } .animate__animated.animate__flip { backface-visibility: visible; animation-name: flip; } @keyframes flipInX { 0% { transform: perspective(400px) rotateX(90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotateX(-20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotateX(10deg); opacity: 1; } 80% { transform: perspective(400px) rotateX(-5deg); } to { transform: perspective(400px); } } .animate__flipInX { backface-visibility: visible !important; animation-name: flipInX; } @keyframes flipInY { 0% { transform: perspective(400px) rotateY(90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotateY(-20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotateY(10deg); opacity: 1; } 80% { transform: perspective(400px) rotateY(-5deg); } to { transform: perspective(400px); } } .animate__flipInY { backface-visibility: visible !important; animation-name: flipInY; } @keyframes flipOutX { 0% { transform: perspective(400px); } 30% { transform: perspective(400px) rotateX(-20deg); opacity: 1; } to { transform: perspective(400px) rotateX(90deg); opacity: 0; } } .animate__flipOutX { animation-duration: .75s; animation-duration: calc(var(--animate-duration) * .75); animation-name: flipOutX; backface-visibility: visible !important; } @keyframes flipOutY { 0% { transform: perspective(400px); } 30% { transform: perspective(400px) rotateY(-15deg); opacity: 1; } to { transform: perspective(400px) rotateY(90deg); opacity: 0; } } .animate__flipOutY { animation-duration: .75s; animation-duration: calc(var(--animate-duration) * .75); backface-visibility: visible !important; animation-name: flipOutY; } @keyframes lightSpeedInRight { 0% { transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { transform: skewX(20deg); opacity: 1; } 80% { transform: skewX(-5deg); } to { transform: translateZ(0); } } .animate__lightSpeedInRight { animation-name: lightSpeedInRight; animation-timing-function: ease-out; } @keyframes lightSpeedInLeft { 0% { transform: translate3d(-100%, 0, 0) skewX(30deg); opacity: 0; } 60% { transform: skewX(-20deg); opacity: 1; } 80% { transform: skewX(5deg); } to { transform: translateZ(0); } } .animate__lightSpeedInLeft { animation-name: lightSpeedInLeft; animation-timing-function: ease-out; } @keyframes lightSpeedOutRight { 0% { opacity: 1; } to { transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .animate__lightSpeedOutRight { animation-name: lightSpeedOutRight; animation-timing-function: ease-in; } @keyframes lightSpeedOutLeft { 0% { opacity: 1; } to { transform: translate3d(-100%, 0, 0) skewX(-30deg); opacity: 0; } } .animate__lightSpeedOutLeft { animation-name: lightSpeedOutLeft; animation-timing-function: ease-in; } @keyframes rotateIn { 0% { transform: rotate(-200deg); opacity: 0; } to { transform: translateZ(0); opacity: 1; } } .animate__rotateIn { animation-name: rotateIn; transform-origin: center; } @keyframes rotateInDownLeft { 0% { transform: rotate(-45deg); opacity: 0; } to { transform: translateZ(0); opacity: 1; } } .animate__rotateInDownLeft { animation-name: rotateInDownLeft; transform-origin: left bottom; } @keyframes rotateInDownRight { 0% { transform: rotate(45deg); opacity: 0; } to { transform: translateZ(0); opacity: 1; } } .animate__rotateInDownRight { animation-name: rotateInDownRight; transform-origin: right bottom; } @keyframes rotateInUpLeft { 0% { transform: rotate(45deg); opacity: 0; } to { transform: translateZ(0); opacity: 1; } } .animate__rotateInUpLeft { animation-name: rotateInUpLeft; transform-origin: left bottom; } @keyframes rotateInUpRight { 0% { transform: rotate(-90deg); opacity: 0; } to { transform: translateZ(0); opacity: 1; } } .animate__rotateInUpRight { animation-name: rotateInUpRight; transform-origin: right bottom; } @keyframes rotateOut { 0% { opacity: 1; } to { transform: rotate(200deg); opacity: 0; } } .animate__rotateOut { animation-name: rotateOut; transform-origin: center; } @keyframes rotateOutDownLeft { 0% { opacity: 1; } to { transform: rotate(45deg); opacity: 0; } } .animate__rotateOutDownLeft { animation-name: rotateOutDownLeft; transform-origin: left bottom; } @keyframes rotateOutDownRight { 0% { opacity: 1; } to { transform: rotate(-45deg); opacity: 0; } } .animate__rotateOutDownRight { animation-name: rotateOutDownRight; transform-origin: right bottom; } @keyframes rotateOutUpLeft { 0% { opacity: 1; } to { transform: rotate(-45deg); opacity: 0; } } .animate__rotateOutUpLeft { animation-name: rotateOutUpLeft; transform-origin: left bottom; } @keyframes rotateOutUpRight { 0% { opacity: 1; } to { transform: rotate(90deg); opacity: 0; } } .animate__rotateOutUpRight { animation-name: rotateOutUpRight; transform-origin: right bottom; } @keyframes hinge { 0% { animation-timing-function: ease-in-out; } 20%, 60% { transform: rotate(80deg); animation-timing-function: ease-in-out; } 40%, 80% { transform: rotate(60deg); animation-timing-function: ease-in-out; opacity: 1; } to { transform: translate3d(0, 700px, 0); opacity: 0; } } .animate__hinge { animation-duration: 2s; animation-duration: calc(var(--animate-duration) * 2); animation-name: hinge; transform-origin: top left; } @keyframes jackInTheBox { 0% { opacity: 0; transform: scale(.1) rotate(30deg); transform-origin: center bottom; } 50% { transform: rotate(-10deg); } 70% { transform: rotate(3deg); } to { opacity: 1; transform: scale(1); } } .animate__jackInTheBox { animation-name: jackInTheBox; } @keyframes rollIn { 0% { opacity: 0; transform: translate3d(-100%, 0, 0) rotate(-120deg); } to { opacity: 1; transform: translateZ(0); } } .animate__rollIn { animation-name: rollIn; } @keyframes rollOut { 0% { opacity: 1; } to { opacity: 0; transform: translate3d(100%, 0, 0) rotate(120deg); } } .animate__rollOut { animation-name: rollOut; } @keyframes zoomIn { 0% { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } .animate__zoomIn { animation-name: zoomIn; } @keyframes zoomInDown { 0% { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); animation-timing-function: cubic-bezier(.55, .055, .675, .19); } 60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(.175, .885, .32, 1); } } .animate__zoomInDown { animation-name: zoomInDown; } @keyframes zoomInLeft { 0% { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); animation-timing-function: cubic-bezier(.55, .055, .675, .19); } 60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); animation-timing-function: cubic-bezier(.175, .885, .32, 1); } } .animate__zoomInLeft { animation-name: zoomInLeft; } @keyframes zoomInRight { 0% { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); animation-timing-function: cubic-bezier(.55, .055, .675, .19); } 60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); animation-timing-function: cubic-bezier(.175, .885, .32, 1); } } .animate__zoomInRight { animation-name: zoomInRight; } @keyframes zoomInUp { 0% { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); animation-timing-function: cubic-bezier(.55, .055, .675, .19); } 60% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(.175, .885, .32, 1); } } .animate__zoomInUp { animation-name: zoomInUp; } @keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; transform: scale3d(.3, .3, .3); } to { opacity: 0; } } .animate__zoomOut { animation-name: zoomOut; } @keyframes zoomOutDown { 40% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(.55, .055, .675, .19); } to { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); animation-timing-function: cubic-bezier(.175, .885, .32, 1); } } .animate__zoomOutDown { animation-name: zoomOutDown; transform-origin: center bottom; } @keyframes zoomOutLeft { 40% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } to { opacity: 0; transform: scale(.1) translate3d(-2000px, 0, 0); } } .animate__zoomOutLeft { animation-name: zoomOutLeft; transform-origin: left center; } @keyframes zoomOutRight { 40% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } to { opacity: 0; transform: scale(.1) translate3d(2000px, 0, 0); } } .animate__zoomOutRight { animation-name: zoomOutRight; transform-origin: right center; } @keyframes zoomOutUp { 40% { opacity: 1; transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(.55, .055, .675, .19); } to { opacity: 0; transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); animation-timing-function: cubic-bezier(.175, .885, .32, 1); } } .animate__zoomOutUp { animation-name: zoomOutUp; transform-origin: center bottom; } @keyframes slideInDown { 0% { transform: translate3d(0, -100%, 0); visibility: visible; } to { transform: translateZ(0); } } .animate__slideInDown { animation-name: slideInDown; } @keyframes slideInLeft { 0% { transform: translate3d(-100%, 0, 0); visibility: visible; } to { transform: translateZ(0); } } .animate__slideInLeft { animation-name: slideInLeft; } @keyframes slideInRight { 0% { transform: translate3d(100%, 0, 0); visibility: visible; } to { transform: translateZ(0); } } .animate__slideInRight { animation-name: slideInRight; } @keyframes slideInUp { 0% { transform: translate3d(0, 100%, 0); visibility: visible; } to { transform: translateZ(0); } } .animate__slideInUp { animation-name: slideInUp; } @keyframes slideOutDown { 0% { transform: translateZ(0); } to { visibility: hidden; transform: translate3d(0, 100%, 0); } } .animate__slideOutDown { animation-name: slideOutDown; } @keyframes slideOutLeft { 0% { transform: translateZ(0); } to { visibility: hidden; transform: translate3d(-100%, 0, 0); } } .animate__slideOutLeft { animation-name: slideOutLeft; } @keyframes slideOutRight { 0% { transform: translateZ(0); } to { visibility: hidden; transform: translate3d(100%, 0, 0); } } .animate__slideOutRight { animation-name: slideOutRight; } @keyframes slideOutUp { 0% { transform: translateZ(0); } to { visibility: hidden; transform: translate3d(0, -100%, 0); } } .animate__slideOutUp { animation-name: slideOutUp; } @media only screen and (max-width: 1199px) { /* Turn off all animations on sm and below */ .animate__animated { transition-property: none !important; transform: none !important; animation: none !important; } } @media only screen and (min-width: 1200px) { .animate__animated-custom-entranceReady { /* hide animation on init. may or may not be necessary */ opacity: 0; transition: none; } .visible .animate__animated-custom-entranceReady { opacity: 1; } } /* Vendor - Gravity Forms --------------------------------------------------------------- */ /* Reset, skeletons, and normalize for gravity forms and form control elements. No need to edit. --------------------------------------------------------------- */ .gform_wrapper.gravity-theme {} :is(input:not([type=radio]):not([type=checkbox]):not([type=button]):not([type=image]):not([type=file]), select, textarea, [aria-invalid=true]), :is(.gform_wrapper, .gfield_required) .gfield_required, .gform_wrapper.gravity-theme .gfield_required .gfield_required_custom, .gform_wrapper.gravity-theme .gfield_label, .gform_wrapper.gravity-theme :is(.gfield, .field_description_above) :is(.description, .gfield_description, .gsection_description, .instruction), .gform_wrapper.gravity-theme :is(.gfield_validation_message, .validation_message) { font: inherit; color: inherit; margin: 0; padding: 0; } .gfield:is(.gfield-custom-box-label-inset, .gfield-custom-box-label-adjacent) .gfield_label, :is(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), select, textarea, [aria-invalid=true]) { line-height: var(--field-line-height, inherit); border-radius: var(--field-border-radius, 0); color: var(--color-dark); padding-inline: calc(var(--field-padding-x, 1em) - var(--field-border-width, 1px)); padding-block: calc(( var(--field-height, 3em) - var(--field-border-width, 1px) * 2 - 1em * var(--field-line-height, 1.25) ) * var(--field-baseline-offset, .5)) calc(( var(--field-height, 3em) - var(--field-border-width, 1px) * 2 - 1em * var(--field-line-height, 1.25) ) * ( 1 - var(--field-baseline-offset, .5) )); background: none; background-size: calc(100% + var(--field-border-width, 1px) * 2) calc(100% + var(--field-border-width, 1px) * 2); background-position: calc(var(--field-border-width, 1px) * -1) calc(var(--field-border-width, 1px) * -1); max-width: 100%; } .gfield:is(.gfield-custom-box-label-adjacent) .gfield_label, :is(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), select, textarea, [aria-invalid=true]) { border-bottom-width: var(--field-border-width, 3px); border-bottom-style: solid; min-height: 0; } .gfield:is(.gfield-custom-box-label-adjacent):is(.focus) .gfield_label, :is(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), select, textarea, [aria-invalid=true]):focus { border-width: var(--field-border-width, 2px); } .gfield:is(.gfield-custom-box-label-inset) .gfield_label, :is(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), select, textarea, [aria-invalid=true]) { background-color: var(--color-light); color: var(--color-dark); } .gform_wrapper.gravity-theme :is(.gfield_validation_message, .validation_message) { /* reset validation messages enough to make matching design more bearable */ background: none; border: 0; } .gform_wrapper.gravity-theme .gfield :is(.description, .gfield_description, .gsection_description, .instruction) { margin-top: .5em; } .gform_wrapper.gravity-theme .field_description_above :is(.description, .gfield_description, .gsection_description, .instruction) { margin-top: 0; margin-bottom: .5em; } /* .ginput_ scaffolding. No need to edit --------------------------------------------------------------- */ .gform_wrapper.gravity-theme .ginput {} .gform_wrapper.gravity-theme .ginput_container_time { min-width: calc(var(--field-padding-x) * 2 + 5ch); max-width: calc(var(--field-padding-x) * 2 + 5ch); } :is(.field_sublabel_below) .gform_wrapper.gravity-theme .ginput_complex { align-items: center; } .gform_wrapper.gravity-theme .ginput_container_date input { width: 100%; } /* .gfield_ scaffolding. No need to edit --------------------------------------------------------------- */ .gfield.gfield_error :is(label, legend), .gfield_validation_message, .gfield .validation_message, .gfield [aria-invalid=true] + label, .gfield .gform_wrapper label + [aria-invalid=true] { color: var(--field-error-color) !important; } .gfield:is(.gfield-custom-box-label-adjacent):is(.gfield_error) .gfield_label, :is(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), select, textarea):is([aria-invalid=true]) { border-color: var(--field-error-color) !important; } .gfield .gchoice { margin: 0 0 .5em; } .gform_wrapper.gravity-theme .gfield :is(.gfield_radio, .gfield_checkbox) label { font: unset; line-height: unset; } /* gfield customize colors --------------------------------------------------------------- */ /* Form Customizations: Custom gravity forms and form control elements. Adjust as needed. --------------------------------------------------------------- */ /* Variables. Will put in the form so non-gravity forms form control elements can utilize too */ :is(form, .gfield) { /* height of form field. designers will prefer to design form fields based on their height. this is to better support the wonders they create while being able to use padding to support multi-line/ edge case form fields */ --field-height: 50px; --field-border-width: 3px; --field-border-radius: 0; --field-padding-x: 17px; --field-required-color: var(--color-primary); --field-error-color: var(--color-error); --field-baseline-offset: .5; --field-line-height: 1.125; font-size: 14px; line-height: var(--field-line-height, 1.125); } :is(form, .gfield):is(.gfield-custom-box-label-adjacent) .gfield_label, :is(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), select, textarea) { border-color: var(--color-light); } :is(form, .gfield):is(.focus, .gfield_error), :is(form, .gfield):is(.gfield-custom-box-label-adjacent):is(.gfield_error) .gfield_label, :is(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), select, textarea):is([aria-invalid=true], :focus) { --field-border-width: 2px; } :is(form, .gfield):is(.focus):is(.gfield-custom-box-label-adjacent):is(.focus) .gfield_label, :is(form, .gfield):is(.focus) :is(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), select, textarea, [aria-invalid=true]):is(:focus) { border-color: var(--color-primary); } .gform_wrapper.gravity-theme .gfield:is(.gfield_contains_required) .ginput_container { position: relative; } .gform_wrapper.gravity-theme .gfield:is(.gfield_contains_required) .ginput_container::after { content: "*"; font-size: 20px; font-weight: 700; color: var(--color-primary); } /* .gfield - multiline --------------------------------------------------------------- */ .gform_wrapper.gravity-theme .gfield:is(.gfield--type-textarea, .gfield--type-multiselect) :is(textarea, select) {} .gform_wrapper.gravity-theme .gfield:is(.gfield--type-textarea, .gfield--type-multiselect) :is(textarea, select).large { height: 8rem; } .gform_wrapper.gravity-theme .gfield:is(.gfield--type-textarea, .gfield--type-multiselect) :is(textarea, select).medium { height: 7rem; } .gform_wrapper.gravity-theme .gfield:is(.gfield--type-textarea, .gfield--type-multiselect) :is(textarea, select).small { height: 6rem; } /* .gfield - label --------------------------------------------------------------- */ .gform_wrapper.gravity-theme .gfield_label { /* If styles are getting overriden by default gforms styles, prepend `.gform_wrapper.gravity-theme` on field selectors -_- */ /* customize type for .gfield and scaffolding for descending elements */ /* custom font styles for gfield_label */ line-height: var(--field-line-height, inherit); font-weight: 400; margin-bottom: 10px; display: flex; gap: .25em; } /* .gform_ overrides. Adjust as needed --------------------------------------------------------------- */ .gform_wrapper.gravity-theme .gform {} .gform_wrapper.gravity-theme .gform_fields { -moz-column-gap: 1rem; column-gap: 1rem; row-gap: 1rem; } /* .gfield_required / .required-glyph Required Indicator --------------------------------------------------------------- */ .required-glyph, .gfield-custom-label-indicator.ginput_container::after, .gform_wrapper.gravity-theme .gfield_required { /* adjust required styles */ font-size: 1em; line-height: var(--field-line-height, inherit); color: var(--field-required-color); font-style: normal; font-weight: 700; vertical-align: middle; padding: 0; margin: 0; order: 99; } .gfield-custom-label-indicator.ginput_container::after, .gform_wrapper.gravity-theme .gfield_required { display: none; } /* custom helpers - Required Message --------------------------------------------------------------- */ .required-message { font-size: 14px; line-height: 16px; color: var(--color-light); text-transform: none; font-weight: 400; text-align: center; } @media only screen and (min-width: 768px) { .required-message { text-align: left; } } /* custom helpers - Disclaimer Message --------------------------------------------------------------- */ .disclaimer-message { font-size: 1rem; } /* Theme Options custom helpers - label required indicator --------------------------------------------------------------- */ /* required and custom label indicator */ .gfield-custom-label-indicator:is(.ginput_container::before, .ginput_container::after, .gfield_label::after, .gfield_label > .gfield_required) { display: block; pointer-events: none; } .ginput_container { position: relative; } .ginput_container::before, .ginput_container::after { position: absolute; right: var(--field-padding-x); top: calc(( var(--field-height) - 1em * var(--field-line-height) ) * .5); z-index: 3; pointer-events: none; } .gfield_label > .gfield_required, .gfield_label::after { margin-left: .25em; } .gfield_contains_required .gfield-custom-label-indicator[data-required-glyph] {} .gfield_contains_required .gfield-custom-label-indicator[data-required-glyph]::before { right: calc(var(--field-padding-x) + 3em); } .gfield_contains_required .gfield-custom-label-indicator[data-required-glyph]::after { content: attr(data-required-glyph); } .gfield-custom-label-indicator.ginput_container::before { color: var(--color-dark-alt); } .gfield-custom-label-indicator.ginput_container::after, .gfield-custom-label-indicator.gfield_label > .gfield_required { color: var(--field-required-color); } .gfield-custom-no-label-indicator.gfield_label > .gfield_required { display: none; } /* related indicators. Make sure required indicator does not conflict --------------------------------------------------------------- */ .gfield--type-select select { padding-right: calc(var(--field-padding-x) + 1em); } /* single line select indicator --------------------------------------------------------------- */ .gfield--type-select .ginput_container::before { display: inline-block; order: 9; align-self: center; margin-left: .75em; margin-right: var(--field-padding-x); transform-origin: center center; transform-origin: 67% 67%; flex: 0 0 auto; content: ""; font-size: .5rem; width: 1em; height: 1em; border: 2px solid var(--color-dark); border-top: 0; border-left: 0; transform: rotate(45deg); } /* phone indicator --------------------------------------------------------------- */ .gfield--type-phone.gfield-custom-box-label-inset .gfield_label::after { content: "(___) ___-____"; position: static; } /* Theme Options custom helpers - ilawyer custom styles --------------------------------------------------------------- */ /* custom styles skeletons. No need to edit */ .gform_wrapper.gravity-theme .gfield.gfield-custom-box { /* If styles are getting overriden by default gforms styles, prepend `.gform_wrapper.gravity-theme` on field selectors -_- */ position: relative; } .gform_wrapper.gravity-theme .gfield.gfield-custom-box .gfield_label { align-self: start; } .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-inset {} .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-inset .gfield_label { position: absolute; top: var(--field-border-width); left: var(--field-border-width); right: var(--field-border-width); z-index: 1; margin-bottom: 0; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - var(--field-border-width) * 2); padding-right: calc(var(--field-padding-x) * 2 - var(--field-border-width)); } .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-inset:is(.active, .focus, :focus-within) .gfield_label { opacity: 0; } .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-inset :is(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), select, textarea, [aria-invalid=true]):not(:focus)::-webkit-input-placeholder { /* fix multiline placeholders from peeking behind the label */ color: transparent; } .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-inset :is(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), select, textarea, [aria-invalid=true]):not(:focus)::-moz-placeholder { /* fix multiline placeholders from peeking behind the label */ color: transparent; } .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-inset :is(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), select, textarea, [aria-invalid=true]):not(:focus)::-ms-input-placeholder { /* fix multiline placeholders from peeking behind the label */ color: transparent; } .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent { /* set label beside input field. not to be confused with left align labels settingf for forms. this is our custom stuff and it's prettier than how gravity forms does it. */ display: grid; grid-template-columns: auto 1fr; grid-template-rows: max-content; } .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent .gfield_label, .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent .ginput_container { /* grid/flex fix */ min-width: 0; } .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent .gfield_label { margin-bottom: 0; background-color: var(--color-light-alt); } .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent *:not(.gfield_label):not(.ginput_container) { grid-column: 1/-1; } @media only screen and (min-width: 768px) { .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent:is(.gfield--type-textarea, .gfield--type-multiselect, .gfield--type-post_title, .gfield--type-post_content, .gfield--type-post_excerpt) :is(.gfield_label, .ginput_container) { grid-column: 1/-1; } .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent:is(.gfield--type-textarea, .gfield--type-multiselect, .gfield--type-post_title, .gfield--type-post_content, .gfield--type-post_excerpt) .gfield_label { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent:is(.gfield--type-textarea, .gfield--type-multiselect, .gfield--type-post_title, .gfield--type-post_content, .gfield--type-post_excerpt) .ginput_container { grid-column: 2; } .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent:is(.gfield--type-textarea, .gfield--type-multiselect, .gfield--type-post_title, .gfield--type-post_content, .gfield--type-post_excerpt) :is(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), select, textarea) { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; } .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent:not(.gfield--type-textarea, .gfield--type-multiselect, .gfield--type-post_title, .gfield--type-post_content, .gfield--type-post_excerpt) :is(.gfield_label, .ginput_container) { grid-row: 1; } .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent:not(.gfield--type-textarea, .gfield--type-multiselect, .gfield--type-post_title, .gfield--type-post_content, .gfield--type-post_excerpt) .gfield_label { grid-column: 1; max-width: -moz-max-content; max-width: max-content; border-top-right-radius: 0; border-bottom-right-radius: 0; } .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent:not(.gfield--type-textarea, .gfield--type-multiselect, .gfield--type-post_title, .gfield--type-post_content, .gfield--type-post_excerpt) .ginput_container { grid-column: 2; } .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent:not(.gfield--type-textarea, .gfield--type-multiselect, .gfield--type-post_title, .gfield--type-post_content, .gfield--type-post_excerpt) :is(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), select, textarea) { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; } } @media only screen and (max-width: 767px) { .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent :is(.gfield_label, .ginput_container) { grid-column: 1/-1; } .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent .gfield_label { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent .ginput_container { grid-column: 2; } .gform_wrapper.gravity-theme .gfield.gfield-custom-box.gfield-custom-box-label-adjacent :is(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), select, textarea, [aria-invalid=true]) { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; } } /* Hidden Gravity Forms Stuff --------------------------------------------------------------- */ .gform_hidden, .validation_message.instruction, .gform_validation_container, .gform_validation_errors, .gform_ajax_spinner, .gform_required_legend { /* must hide elements */ display: none !important; } /* Vendor - Swiper --------------------------------------------------------------- */ /* Swiper Customizations Variable docs: https://oxygen4fun.supadezign.com/tips/swiperjs-tips-and-good-practice/#customcss --------------------------------------------------------------- */ :root { --swiper-theme-color: var(--scheme-sp, var(--color-primary)); --swiper-navigation-sides-offset: 0px; --swiper-pagination-color: var(--swiper-theme-color); --swiper-pagination-bottom: 1.5rem; --swiper-pagination-top: auto; --swiper-pagination-right: 1rem; --swiper-pagination-left: auto; --swiper-pagination-bullet-size: .375rem; --swiper-pagination-bullet-width: var(--swiper-pagination-bullet-size); --swiper-pagination-bullet-height: var(--swiper-pagination-bullet-size); --swiper-pagination-bullet-border-radius: 9999em; --swiper-pagination-bullet-horizontal-gap: calc(var(--swiper-pagination-bullet-size) * 3); --swiper-pagination-bullet-vertical-gap: var(--swiper-pagination-bullet-size); --swiper-pagination-bullet-opacity: 1; --swiper-pagination-bullet-inactive-opacity: 1; --swiper-pagination-bullet-inactive-color: currentColor; --swiper-pagination-progressbar-size: var(--swiper-pagination-bullet-size); --swiper-pagination-progressbar-bg-color: var(--color-neutral-lighter); --swiper-scrollbar-border-radius: calc(var(--swiper-pagination-bullet-size) * .5); --swiper-scrollbar-bg-color: rgba(255, 255, 255, .8); --swiper-scrollbar-drag-bg-color: var(--color-primary); --swiper-scrollbar-sides-offset: 0; --swiper-scrollbar-bottom: 27px; --swiper-scrollbar-top: auto; --swiper-scrollbar-size: 1px; --swiper-custom-arrow-offset-x: 64px; } /* Swiper Enhancements --------------------------------------------------------------- */ .swiper { transition: opacity .25s ease-in-out; opacity: 0; padding-left: var(--swiper-custom-arrow-offset-x); margin-left: calc(var(--swiper-custom-arrow-offset-x-negate, var(--swiper-custom-arrow-offset-x)) * -1); padding-right: var(--swiper-custom-arrow-offset-x); margin-right: calc(var(--swiper-custom-arrow-offset-x-negate, var(--swiper-custom-arrow-offset-x)) * -1); } .swiper.swiper-initialized { opacity: 1; } :is(:where(.swiper-horizontal) > .swiper-pagination-bullets, .swiper-pagination-bullets:where(.swiper-pagination-horizontal), .swiper-pagination-custom, .swiper-pagination-fraction):not(.swiper-pagination-lock) { bottom: var(--swiper-pagination-bottom); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--swiper-pagination-bullet-horizontal-gap); } .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0; } .swiper-button-next, .swiper-button-prev { /* customize swiper buttons to utilize theme's styles for the button */ --button-baseline-offset: .5 !important; --swiper-navigation-size: var(--button-height); z-index: 1; width: auto; } .swiper-button-next::before, .swiper-button-next::after, .swiper-button-prev::before, .swiper-button-prev::after { content: none; } .swiper-scrollbar-drag { height: 3px; top: -50%; bottom: -50%; margin-block: auto; } /* Swiper Custom Helpers --------------------------------------------------------------- */ .swiper-custom-scrollbar { --swiper-scrollbar-bg-color: rgba(255, 255, 255, .8); --swiper-scrollbar-drag-bg-color: var(--color-primary); --swiper-scrollbar-sides-offset: 0; --swiper-scrollbar-bottom: 27px; --swiper-scrollbar-top: auto; --swiper-scrollbar-size: 1px; width: 100% !important; } .swiper-custom-scrollbar .swiper-scrollbar-drag { --swiper-scrollbar-drag-bg-color: var(--color-primary); height: 2px; bottom: unset !important; top: -1px; } .swiper-custom-scrollbar-static .swiper-scrollbar { position: static; margin-top: var(--swiper-scrollbar-bottom); margin-inline: auto; } .swiper-custom-pagination-static .swiper-pagination { position: static; margin-top: var(--swiper-pagination-bottom); } @media only screen and (max-width: 1199px) { .swiper-custom-pagination-static-sm .swiper-pagination { position: static; margin-top: var(--swiper-pagination-bottom); } } @media only screen and (max-width: 767px) { .swiper-custom-pagination-static-xs .swiper-pagination { position: static; margin-top: var(--swiper-pagination-bottom); } } .swiper-custom-hide-slides:is(.swiper-initialized, :has(.swiper-initialized)) .swiper-slide:not(.swiper-slide-duplicate-visible):not(.swiper-slide-visible):not(.swiper-slide-active) { opacity: 0 !important; pointer-events: none !important; transition: opacity .25s ease-in-out; } @media only screen and (max-width: 1199px) { .swiper-custom-hide-slides-sm:is(.swiper-initialized, :has(.swiper-initialized)) .swiper-slide:not(.swiper-slide-duplicate-visible):not(.swiper-slide-visible):not(.swiper-slide-active) { opacity: 0 !important; pointer-events: none !important; transition: opacity .25s ease-in-out; } } @media only screen and (max-width: 767px) { .swiper-custom-hide-slides-xs:is(.swiper-initialized, :has(.swiper-initialized)) .swiper-slide:not(.swiper-slide-duplicate-visible):not(.swiper-slide-visible):not(.swiper-slide-active) { opacity: 0 !important; pointer-events: none !important; transition: opacity .25s ease-in-out; } } .swiper-custom-remove-background .swiper-slide { mix-blend-mode: multiply; } .swiper-custom-equal-heights .swiper-slide { height: auto; align-self: stretch; display: flex; flex-direction: column; } .swiper-custom-equal-heights .swiper-slide > :where(:only-child) { flex: 1 1; } @media only screen and (min-width: 1200px) { .swiper-custom-equal-heights-nontouch .swiper-slide { height: auto; align-self: stretch; display: flex; flex-direction: column; } .swiper-custom-equal-heights-nontouch .swiper-slide > :where(:only-child) { flex: 1 1; } } @media only screen and (max-width: 1199px) { .swiper-custom-equal-heights-touch .swiper-slide, .swiper-custom-equal-heights-sm .swiper-slide { height: auto; align-self: stretch; display: flex; flex-direction: column; } .swiper-custom-equal-heights-touch .swiper-slide > :where(:only-child), .swiper-custom-equal-heights-sm .swiper-slide > :where(:only-child) { flex: 1 1; } } @media only screen and (max-width: 767px) { .swiper-custom-equal-heights-xs .swiper-slide-slide { height: auto; align-self: stretch; display: flex; flex-direction: column; } .swiper-custom-equal-heights-xs .swiper-slide-slide > :where(:only-child) { flex: 1 1; } } .swiper-custom-buttons-static .swiper-wrapper { height: auto; } .swiper-custom-buttons-static .swiper-button-next, .swiper-custom-buttons-static .swiper-button-prev { position: static; transform: none; margin: 0; margin-top: .75rem; } .swiper-custom-buttons-static .swiper-button-next ~ .swiper-pagination, .swiper-custom-buttons-static .swiper-button-prev ~ .swiper-pagination { display: inline-flex; width: auto; } .swiper-custom-buttons-static .swiper-button-prev { margin-right: .06125rem; } .swiper-custom-buttons-static .swiper-button-next { margin-left: .06125rem; } @media only screen and (max-width: 1199px) { .swiper-custom-buttons-static-sm .swiper-wrapper { height: auto; } .swiper-custom-buttons-static-sm .swiper-button-next, .swiper-custom-buttons-static-sm .swiper-button-prev { position: static; transform: none; margin: 0; margin-top: 1.5rem; } .swiper-custom-buttons-static-sm .swiper-button-next ~ .swiper-pagination, .swiper-custom-buttons-static-sm .swiper-button-prev ~ .swiper-pagination { display: inline-flex; width: auto; } .swiper-custom-buttons-static-sm .swiper-button-prev { margin-right: .06125rem; } .swiper-custom-buttons-static-sm .swiper-button-next { margin-left: .06125rem; } } @media only screen and (max-width: 767px) { .swiper-custom-buttons-static-xs .swiper-wrapper { height: auto; } .swiper-custom-buttons-static-xs .swiper-button-next, .swiper-custom-buttons-static-xs .swiper-button-prev { position: static; transform: none; margin: 0; margin-top: .75rem; } .swiper-custom-buttons-static-xs .swiper-button-next ~ .swiper-pagination, .swiper-custom-buttons-static-xs .swiper-button-prev ~ .swiper-pagination { display: inline-flex; width: auto; } .swiper-custom-buttons-static-xs .swiper-button-prev { margin-right: .06125rem; } .swiper-custom-buttons-static-xs .swiper-button-next { margin-left: .06125rem; } } /* ================================================================================ * Content Styles ================================================================================ */ /* H tag scaffolding --------------------------------------------------------------- */ :where(.content-palette-dark) :is(:where(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6), .content :where(h1, h2, h3, h4, h5, h6)) {} :is(:where(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6), .content :where(h1, h2, h3, h4, h5, h6)) :where(a) { font: inherit !important; } :is(:where(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6), .content :where(h1, h2, h3, h4, h5, h6)) :where(a):not(:hover, :focus) { color: inherit; text-decoration: none; } /* H1 - can be reused by section titles, primary-heading etc. --------------------------------------------------------------- */ :is(:where(*.h1), .content :where(h1)) { display: block; font-size: 2.5rem; line-height: calc(1em + 10px); font-family: var(--font-secondary); color: var(--color-dark); letter-spacing: -.025em; text-transform: none; font-style: normal; font-weight: normal; margin-bottom: 13px; } :where(.content-palette-dark) :is(:where(*.h1), .content :where(h1)) { /* modify colors on dark mode. will only apply if there are styles within the selector and a) content-palette-dark and or b) schemes component classes are enabled and dark helpers are applied */ color: var(--scheme-fg, inherit); } /* H2 - can be reused by certain titles --------------------------------------------------------------- */ :is(:where(*.h2), .content :where(h2)) { font-size: 20px; line-height: calc(1em + 6px); font-family: var(--font-secondary); color: var(--color-primary); letter-spacing: -.025em; text-transform: none; font-style: normal; font-weight: normal; margin-bottom: 17px; } :where(.content-palette-dark) :is(:where(*.h2), .content :where(h2)) { /* modify colors on dark mode. will only apply if there are styles within the selector and a) content-palette-dark and or b) schemes component classes are enabled and dark helpers are applied */ color: var(--scheme-sp, var(--color-accent)); } @media only screen and (min-width: 768px) { :is(:where(*.h2), .content :where(h2)) { font-size: 22px; line-height: 28px; } } @media only screen and (min-width: 1200px) { :is(:where(*.h2), .content :where(h2)) { font-size: 24px; line-height: 30px; } } /* H3 - can be reused by certain titles --------------------------------------------------------------- */ :is(:where(*.h3), .content :where(h3)) { font-size: 16px; line-height: calc(1em + 4px); font-family: var(--font-accent); color: var(--color-primary); letter-spacing: 0em; text-transform: uppercase; font-style: normal; font-weight: 700; margin-bottom: 1rem; } :where(.content-palette-dark) :is(:where(*.h3), .content :where(h3)) { /* modify colors on dark mode. will only apply if there are styles within the selector and a) content-palette-dark and or b) schemes component classes are enabled and dark helpers are applied */ color: var(--scheme-sp, var(--color-accent)); } /* H4s - if not in the styleguide, can be repurposed for other smaller headings present in the design. commonly case result types/titles, blog post meta, etc --------------------------------------------------------------- */ :is(:where(*.h4), .content :where(h4)) { font-size: 1rem; line-height: calc(1em + 5px); font-family: var(--font-accent); color: inherit; letter-spacing: 0em; text-transform: none; font-style: normal; font-weight: 500; margin-bottom: .75rem; } :where(.content-palette-dark) :is(:where(*.h4), .content :where(h4)) {} /* H5s - if not in the styleguide, can be repurposed for other smaller headings present in the design. commonly testimonial quote sources, contact info titles, etc --------------------------------------------------------------- */ :is(:where(*.h5), .content :where(h5)) { font-size: .875rem; line-height: calc(1em + 5px); font-family: var(--font-accent); color: inherit; letter-spacing: 0em; text-transform: uppercase; font-style: normal; font-weight: 700; margin-bottom: .5rem; } :where(.content-palette-dark) :is(:where(*.h5), .content :where(h5)) {} /* H6s - if not in the styleguide, can be repurposed for other smaller headings present in the design. commonly contact info titles, etc --------------------------------------------------------------- */ :is(:where(*.h6), .content :where(h6)) { font-size: .8125rem; line-height: calc(1em + 5px); font-family: var(--font-accent); color: inherit; letter-spacing: 0em; text-transform: uppercase; font-style: normal; font-weight: 700; margin-bottom: .5rem; } :where(.content-palette-dark) :is(:where(*.h6), .content :where(h6)) {} /* Blockquote - can be reused in testimonial-highlights, long call to action sections, any general quote, etc. --------------------------------------------------------------- */ :is(:where(*.blockquote), .content :where(blockquote)) { font-size: 28px; line-height: calc(1em + 5px); font-family: var(--font-secondary); color: var(--color-dark-alt); letter-spacing: -.025em; text-transform: none; font-style: normal; font-weight: normal; text-align: center; margin-inline: auto; max-width: 60ch; width: 100%; margin-block: 54px; } :where(.content-palette-dark) :is(:where(*.blockquote), .content :where(blockquote)) { /* modify colors on dark mode. will only apply if there are styles within the selector and a) content-palette-dark and or b) schemes component classes are enabled and dark helpers are applied */ color: var(--scheme-fg-contrast, inherit); } :is(:where(*.blockquote), .content :where(blockquote)) > * { font: inherit; color: inherit; margin-block: 0 .5em; padding: 0; } :is(:where(*.blockquote), .content :where(blockquote)) > *:last-child { margin-bottom: 0; } :is(:where(*.blockquote), .content :where(blockquote)) > *:first-child { margin-bottom: 22px; } @media only screen and (max-width: 767px) { :is(:where(*.blockquote), .content :where(blockquote)) > *:first-child { margin-bottom: 7px; } } :is(:where(*.blockquote), .content :where(blockquote)) em { font-style: normal; color: var(--color-primary); } @media only screen and (min-width: 768px) { :is(:where(*.blockquote), .content :where(blockquote)) { font-size: 30px; line-height: 35px; max-width: 564px; margin-inline: auto; } :is(:where(*.blockquote), .content :where(blockquote)) > *:first-child { margin-bottom: 0; } } @media only screen and (min-width: 1200px) { :is(:where(*.blockquote), .content :where(blockquote)) { font-size: 35px; line-height: 40px; max-width: 440px; } } @media only screen and (min-width: 1400px) { :is(:where(*.blockquote), .content :where(blockquote)) { font-size: 40px; line-height: 45px; margin-block: 96px 87px; max-width: 585px; } } /* Cite / Blockquote Source - Optional Note: Some designs may include a blockquote quote source. suprise, there's an html tag for that (: can be reused in testimonial-source, any general quote source, etc. --------------------------------------------------------------- */ :is(:where(*.cite), .content :where(cite)) { font-size: 12px; line-height: calc(1em + 2px); font-family: var(--font-primary); color: var(--color-dark); letter-spacing: .1em; text-transform: uppercase; font-style: normal; font-weight: 700; text-align: inherit; display: inline-block; } :where(.content-palette-dark) :is(:where(*.cite), .content :where(cite)) { /* modify colors on dark mode. will only apply if there are styles within the selector and a) content-palette-dark and or b) schemes component classes are enabled and dark helpers are applied */ color: var(--scheme-sp, var(--color-accent)); } :is(blockquote, *.blockquote) :is(:where(*.cite), .content :where(cite)) { margin-top: 0; } @media only screen and (min-width: 768px) { :is(:where(*.cite), .content :where(cite)) { font-size: 14px; line-height: 16px; } } /* Lead - Optional Note: Some designs may include another style for a little bit fancier basic text that may not be tagged as a normal html element like blockquote or h tag Use this if it helps --------------------------------------------------------------- */ :where(.content-palette-dark) *.lead { /* modify colors on dark mode. will only apply if there are styles within the selector and a) content-palette-dark and or b) schemes component classes are enabled and dark helpers are applied */ color: var(--scheme-sp, var(--color-accent)); } /* Content - Anchor links --------------------------------------------------------------- */ :is(.content :where(a)) { color: inherit; font-weight: bold; text-decoration: underline; transition: color .25s ease-in-out; } :is(.content :where(a)):where(:hover, :focus) { color: var(--color-primary); } :where(.content-palette-dark) :is(.content :where(a)) {} :where(.content-palette-dark) :is(.content :where(a)):not(:where(:hover, :focus)) { color: var(--scheme-sp, var(--color-accent)); } :where(.content-palette-dark) :is(.content :where(a)):where(:hover, :focus) { color: var(--scheme-sp, var(--color-accent-alt)); } /* The Content - Lists Scaffolding --------------------------------------------------------------- */ :is(.content :where(ol, ul, dd)) { list-style-type: none; padding-left: 1.875rem; } :is(.content :where(ol, ul, dd)) :where(ol, ul, dd) { margin-bottom: 0; } :is(.content :where(ol, ul, dd)).list-inline { list-style: none; padding-left: 0; } :is(.content :where(ol, ul, dd)).list-inline li { display: inline; } /* The Content - List Items --------------------------------------------------------------- */ :is(.content :where(li, dd, dt)) { list-style: inherit; position: relative; } :is(.content :where(li, dd, dt)) :where(ul, ol, dd), :is(.content :where(li, dd, dt)):nth-child(n+2) { /* space out each item. Note: some designs may or may not have this. comment out if not needed */ margin-top: .46em; } :is(.content :where(li, dd, dt)):last-child > *:last-child { margin-bottom: 0; } /* The Content - List Items Bulleted --------------------------------------------------------------- */ :is(.content :where(li))::marker, :is(.content :where(li))::before { color: var(--scheme-sp, var(--color-primary)); font-size: 1em; display: inline-block; } :where(.content-palette-dark) :is(.content :where(li))::marker, :where(.content-palette-dark) :is(.content :where(li))::before { /* modify colors on dark mode. will only apply if there are styles within the selector and a) content-palette-dark and or b) schemes component classes are enabled and dark helpers are applied */ color: var(--scheme-sp, var(--color-accent)); } :is(.content :where(li))::before { position: absolute; right: 100%; top: 0em; padding-right: 1em; } /* The Content - Unordered List --------------------------------------------------------------- */ :is(.content :where(ul)) > li::before { content: "●︎"; font-size: .75em; margin-right: .75em; top: 0; padding-right: 10px; } :is(.content :where(ul)) > li > ul > li::before { content: "—︎"; font-size: 1em; margin-right: 0; top: 0em; } /* The Content - Ordered List --------------------------------------------------------------- */ :is(.content :where(ol)) { counter-reset: listItem; } :is(.content :where(ol)) > li { counter-increment: listItem; } :is(.content :where(ol)) > li::before { content: counter(listItem) ". "; } /* The Content - Tables Skeletons. Do not edit --------------------------------------------------------------- */ :where(.content table) { border-collapse: collapse; table-layout: fixed; -webkit-hyphens: auto; hyphens: auto; font: inherit; border-color: var(--table-border-color); border-width: var(--table-border-width-y) var(--table-border-width-x); } :where(.content :where(table, th, td)) { border-style: solid; } :where(.content :where(tr):first-child > :where(th, td)) { border-top-color: var(--table-border-color); } :where(.content :where(th, td)) { border-width: var(--table-border-width-y) var(--table-border-width-x) 0; border-color: var(--table-cell-border-color-y) var(--table-border-color); background-color: var(--table-cell-background); } :where(.content :where(th, td)):nth-last-child(n+2) { border-right-color: var(--table-cell-border-color-x); } :where(.content :where(th, td)) > *:last-child { margin-bottom: 0; } .table-wrapper { overflow-x: auto; max-width: 100%; } .table-wrapper table { margin-bottom: 0; } /* The Content - Tables Customizations --------------------------------------------------------------- */ :where(.content table) { /* left and right border width */ --table-border-width-x: 1px; --table-border-width-y: 1px; --table-border-color: var(--color-neutral-lighter); --table-cell-background: var(--scheme-bg-contrast, transparent); --table-cell-border-color-x: var(--scheme-bg-contrast, rgba(127, 127, 127, .3)); --table-cell-border-color-y: transparent; font-size: .9em; } :where(.content table) :where(th, td) { padding-block: .5em; padding-inline: 1em; } :where(.content table) :where(th) { --table-cell-background: var(--table-border-color); --table-cell-border-color-y: var(--table-border-color); --table-cell-border-color-x: var(--table-border-color); font-size: .75em; font-family: var(--font-primary); color: var(--color-dark-alt); letter-spacing: .05em; text-transform: uppercase; font-style: normal; font-weight: 700; text-align: inherit; } :where(.content table) :where(tr:nth-child(odd) td) { --table-cell-background: var(--scheme-bg-contrast, rgba(127, 127, 127, .3)); --table-cell-border-color-y: var(--scheme-bg-contrast, transparent); --table-cell-border-color-x: var(--scheme-bg-contrast, rgba(127, 127, 127, .3)); color: var(--scheme-fg, inherit); } :where(.content table) :where(caption) { padding: .5em; } /* The Content - Other Obscure tags in case it can be utilized for design --------------------------------------------------------------- */ /* images. - NOTE: DO NOT MANIPULATE THE MARGIN, PADDING, DISPLAY PROPERTIES. THIS WILL BREAK THE CORE CLASSES AND ANY OTHER CONTENT RELATED STYLES - USE TO ONLY PIZZAZZ THE IMAGES ACCORDING TO DESIGN */ :where(.content :where(img)) { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } /* bold, strong */ :where(.content-palette-dark) :where(.content :where(strong, b)) {} /* italic, em */ :where(.content-palette-dark) :where(.content :where(em, i)) {} /* address */ :where(.content-palette-dark) :where(.content :where(address)) {} /* abbreviations */ :where(.content-palette-dark) :where(.content :where(abbr)) {} /* acronym */ :where(.content-palette-dark) :where(.content :where(acronym)) {} /* big */ :where(.content-palette-dark) :where(.content :where(big)) {} /* code, kbd, pre */ :where(.content-palette-dark) :where(.content :where(code, kbd, pre)) {} :where(.content-palette-dark) :where(.content :where(code)) {} :where(.content :where(kbd)) { padding-inline: 1em; border-radius: .2em; box-shadow: 0 .2em 0 0 rgba(127, 127, 127, .4); } :where(.content-palette-dark) :where(.content :where(kbd)) {} /* strike, del */ :where(.content :where(del, s)) { text-decoration: line-through; } :where(.content-palette-dark) :where(.content :where(del, s)) {} /* ins */ :where(.content-palette-dark) :where(.content :where(ins)) {} /* ins */ :where(.content-palette-dark) :where(.content :where(q)) {} /* small */ :where(.content-palette-dark) :where(.content :where(small)) {} /* sub */ :where(.content-palette-dark) :where(.content :where(sub)) {} /* sup */ :where(.content-palette-dark) :where(.content :where(sup)) {} /* tt */ :where(.content-palette-dark) :where(.content :where(tt)) {} /* var */ :where(.content-palette-dark) :where(.content :where(var)) {} /* The Content - Scaffolding + Margin Top specificities --------------------------------------------------------------- */ .content { font-size: 17px; line-height: 27px; font-family: var(--font-primary); color: inherit; letter-spacing: -.025em; } @media only screen and (min-width: 1900px) { .content { font-size: 18px; line-height: 28px; } } .content :where(:not(:where(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6, h1, h2, h3, h4, h5, h6, hr, *.blockquote, blockquote, hr)) + *):where(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6, h1, h2, h3, h4, h5, h6, hr), .content.content-style-apply-h-first-margin > :where(:first-child):where(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6, h1, h2, h3, h4, h5, h6, hr) { margin-top: 42px; } .content :where(p, ul, ol, dl, input:not([type=checkbox]):not([type=radio]):not([type=submit]), select, textarea, form, pre, .table-wrapper, table, .wistia_responsive_padding) { margin-bottom: 1.875em; } .content :where(hr:nth-last-child(n+2)) { margin-bottom: 2em; } .content :where(hr:nth-child(n+2)) { margin-top: 2em; } /* Content Color Palette Helpers: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/global/content.md#content-palette-name --------------------------------------------------------------- */ /* support content styles for dark schemes. Note: To aply dark mode styles, use @extends to select optional scheme component. example of styles: h2 { color: something; :is( %extend-scheme-dark ) & { color: somethingelse } } */ .content-palette-dark { /* inherit white color: NOTE: for this to work, best practice is for a) text color to be modified alongside dark background styles of containing section for accessibility/ and or b) Use and enabling _schemes.scss */ color: var(--scheme-fg, var(--color-light)); } .content-palette-dark :where(ol, ul, table) { color: var(--scheme-fg, inherit); } .content-palette-dark table { --table-border-color: var(--color-neutral-darkest); } /* Other Content Variations: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/global/content.md#content-style-name --------------------------------------------------------------- */ /* for content with thicker weight than usual */ .content.content-style-thick { font-weight: 800; } /* no list styles */ .content.content-style-no-list :is(.content :where(ol, ul, dd)) { padding-left: 0; list-style: none; } .content.content-style-no-list :is(.content :where(li, dd, dt))::before { content: none !important; } /* for instances of content with less line-height or vertical spacing. Usually lists */ .content.content-style-compact { line-height: 1.29; } .content.content-style-compact li, .content.content-style-compact li :where(ul, ol) { margin-top: 0; } /* Remove first child margin. Note: Do not apply first child margin 0 globally as this causes more unintended issues down the line (content import, post launch, etc.) */ .content.content-style-no-first-margin > :where(*:first-child) { margin-top: 0; } @media only screen and (max-width: 767px) { .content.content-style-no-first-margin-xs > :where(*:first-child) { margin-top: 0; } } @media only screen and (min-width: 768px) and (max-width: 1199px) { .content.content-style-no-first-margin-sm > :where(*:first-child) { margin-top: 0; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .content.content-style-no-first-margin-md > :where(*:first-child) { margin-top: 0; } } @media only screen and (min-width: 1400px) and (max-width: 1899px) { .content.content-style-no-first-margin-lg > :where(*:first-child) { margin-top: 0; } } @media only screen and (min-width: 1900px) and (max-width: 2879px) { .content.content-style-no-first-margin-xl > :where(*:first-child) { margin-top: 0; } } /* Remove last child margin. Note: Do not apply last child margin 0 globally as this causes more unintended issues down the line (content import, post launch, etc.) */ .content.content-style-no-last-margin > :where(*:last-child) { margin-bottom: 0; } @media only screen and (max-width: 767px) { .content.content-style-no-last-margin-xs > :where(*:last-child) { margin-bottom: 0; } } @media only screen and (min-width: 768px) and (max-width: 1199px) { .content.content-style-no-last-margin-sm > :where(*:last-child) { margin-bottom: 0; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .content.content-style-no-last-margin-md > :where(*:last-child) { margin-bottom: 0; } } @media only screen and (min-width: 1400px) and (max-width: 1899px) { .content.content-style-no-last-margin-lg > :where(*:last-child) { margin-bottom: 0; } } @media only screen and (min-width: 1900px) and (max-width: 2879px) { .content.content-style-no-last-margin-xl > :where(*:last-child) { margin-bottom: 0; } } /* Designs with fancy first letters. adjust styles as needed */ .content.content-style-drop-caps > p:first-of-type::first-letter { font-size: 2.75rem; font-family: var(--font-accent); color: var(--color-primary); float: left; margin: 0 .1em -.25em 0; } .content.content-style-drop-caps > p:first-of-type + * { clear: left; } .content :where(img) { border-radius: 5px; } /* ================================================================================ * Supported WP Core Classes/ Styles ================================================================================ */ /* Wordpress Core Classes. --------------------------------------------------------------- */ /* Align Classes */ *.alignleft, *.align-left, *.alignright, *.align-right, *.aligncenter, *.align-center { margin-bottom: .5em; max-width: 100%; height: auto; width: auto; } @media only screen and (max-width: 1199px) { *.alignleft, *.align-left, *.alignright, *.align-right, *.aligncenter, *.align-center { display: block; } } @media only screen and (min-width: 1200px) { *.alignleft, *.align-left { display: inline; float: left; clear: right; margin-right: .5em; margin-top: .5em; } *.alignright, *.align-right { display: inline; float: right; clear: right; margin-left: .5em; margin-top: .5em; } *.aligncenter, *.align-center { clear: both; display: block; margin-left: auto; margin-right: auto; } } /* WP Captions */ .wp-caption { background: var(--color-light); border: 1px solid var(--color-light-alt); max-width: 100%; padding: .5em; text-align: center; } .wp-caption img { border: 0 none; height: auto; margin: 0; padding: 0; width: auto; } .wp-caption p.wp-caption-text { font-size: .75em; line-height: 1.25; margin: 0; } /* Screen reader */ .screen-reader-text:focus, *:focus-within > .screen-reader-text { background-color: var(--color-light-alt); clip: auto !important; clip-path: none; color: var(--color-neutral); position: fixed; display: block; font-size: 1em; height: auto; left: .25rem; line-height: normal; padding-inline: 1.5rem; padding-block: 1rem; text-decoration: none; top: .25rem; width: auto; z-index: 9999999; } /* ================================================================================ * Global Helpers CSS - These styles are critical to the build and its template parts. They don't usually need edits and will work as is ================================================================================ */ /* Helpers: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/helper.md Note: Styles already prebuilt in this section must not be omitted --------------------------------------------------------------- */ /* Clearfix stuff --------------------------------------------------------------- */ .container::after, .clearfix::after { content: ""; font-size: 0; visibility: hidden; height: 0; clear: both; display: table; width: 100%; flex: 0 0 auto; } /* hide element while being ADA and SEO friendly --------------------------------------------------------------- */ .sr-only, .screen-reader-text { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } /* WEBP Support --------------------------------------------------------------- */ .no-webp *.instance-webp, .webp *.instance-not-webp { display: none !important; } /* emulate background cover on image tags --------------------------------------------------------------- */ .cover { /* containing element */ position: relative; overflow: hidden; display: block; } .cover.cover-constricted { /* constrict element. all children will have to be absolute for this element to maintain its size */ --cover-aspect-w: 3; --cover-aspect-l: 4; } .cover.cover-constricted::before { content: ""; display: block; padding-bottom: calc(100% * var(--cover-aspect-l) / var(--cover-aspect-w)); } .cover-child { /* element to emulate background-size cover */ position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; } /* wrap svgs in this helper to control sizing like font glyphs. Sets an svg to align to the bottom left. Set a font size to it to align heights. ie Case Results Icon, Selling Points, Testimonial stars, Social Media, iLawyer Logo, etc. --------------------------------------------------------------- */ .content-icon { height: 1em; display: inline-flex; flex-direction: column; justify-content: flex-end; flex: 0 0 auto; width: -moz-max-content; width: max-content; max-width: 100%; text-overflow: ellipsis; } .content-icon :where(img, picture, svg, object) { max-height: 100%; width: auto; height: 100%; flex: 1 1; -o-object-fit: contain; object-fit: contain; } /* clamp blocks of texts to up to a certain height only. NOTE: for this to work there should be no custom line height on the text or any of its bllock children. if any, they should be passed to --line-height --------------------------------------------------------------- */ .clamp-text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; max-height: calc(var(--line-height) * var(--line-clamp)); -webkit-line-clamp: var(--line-clamp); line-height: var(--line-height); } /* like content-icon except friendlier styles for logos to support styleable svg logos while allowing for an img tag for SEO to exist in the same block --------------------------------------------------------------- */ .logo { display: inline-flex; flex-wrap: wrap; align-items: center; align-self: stretch; justify-content: center; max-width: -moz-max-content; max-width: max-content; } .logo-wrapper { position: relative; overflow: hidden; height: 100%; width: auto; } .logo-wrapper :where(img, picture, svg, object) { max-width: 100%; max-height: 100%; width: auto; height: 100%; } .logo-wrapper :where(svg, object):not(:only-child) { pointer-events: none; position: absolute; margin: auto; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 100%; } .logo-wrapper :is(svg, object) ~ :where(img, picture:not(.inline-svg)) { opacity: 0; } /* Responsive Global Helpers. Integrated to PHP template parts. Proceed with caution when modifying. * Note: if the element relies on being set as another display type that's not block (flex, inline-block, inline-flex, etc. ) on breakpoint/s it is suppose to show, using the *-hide helpers is recommended (eg: instead of xs-only, use sm-hide md-hide lg-hide xl-hide) * Info to what everything means: ----------------------------------------------- Tag Device min max ----------------------------------------------- xs: mobile 0 767px sm: tablet 768px 1199px md: laptop 1200px 1399px lg: desktop 1400px 1899px xl: hd 1900px 999999999999+ --------------------------------------------------------------- */ .xl-only, .lg-only, .md-only, .sm-only, .xs-only, .home-only, .internal-only, .print-only { display: none !important; } .onep21-template-home .home-only { display: block !important; } .onep21-template-home .home-hide { display: none !important; } body:not(.onep21-template-home) .internal-only { display: block !important; } body:not(.onep21-template-home) .internal-hide { display: none !important; } @media only print { .print-only { display: block !important; } .print-hide { display: none !important; } } @media only screen and (min-width: 1900px) { .xl-only { display: block !important; } .xl-hide { display: none !important; } } @media only screen and (min-width: 1400px) and (max-width: 1899px) { .lg-only { display: block !important; } .lg-hide { display: none !important; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .md-only { display: block !important; } .md-hide { display: none !important; } } @media only screen and (min-width: 768px) and (max-width: 1199px) { .sm-only { display: block !important; } .sm-hide { display: none !important; } } @media only screen and (max-width: 767px) { .xs-only { display: block !important; } .xs-hide { display: none !important; } } /* Add more helpers as needed */ /* ================================================================================ * Global Critical Components - UI/ Build Elements These need edits based on the design ================================================================================ */ /* Buttons: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/buttons.md --------------------------------------------------------------- */ /* Button Skeletons. do not edit --------------------------------------------------------------- */ .button { border: var(--button-border-width) solid; padding-inline: calc(var(--button-padding-x) - var(--button-border-width)); padding-block: calc(( var(--button-height) - var(--button-border-width) * 2 - 1em * var(--button-lines) * var(--button-line-height) ) * var(--button-baseline-offset)) calc(( var(--button-height) - var(--button-border-width) * 2 - 1em * var(--button-lines) * var(--button-line-height) ) * ( 1 - var(--button-baseline-offset) )); -webkit-user-select: none; -moz-user-select: none; user-select: none; max-width: 100%; background: none; text-align: center; transition: all .125s ease-in-out; min-height: var(--button-height); display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; vertical-align: middle; -moz-column-gap: .25em; column-gap: .25em; background-size: calc(100% + var(--button-border-width) * 2) calc(100% + var(--button-border-width) * 2); background-position: calc(var(--button-border-width) * -1) calc(var(--button-border-width) * -1); background-clip: border-box; background-origin: border-box; } .button, .button:is(:hover, :focus) { text-decoration: none; } /* Button Customizations: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/buttons.md#css-vars --------------------------------------------------------------- */ .button { --button-height: 3.4375rem; --button-border-width: 2px; --button-border-radius: 66px; --button-padding-x: 17px; --button-lines: 1; --button-baseline-offset: .5; --button-line-height: 1.125; font-size: 1rem; line-height: var(--button-line-height); font-family: var(--font-accent); color: var(--color-primary); letter-spacing: -.025em; text-transform: capitalize; font-style: normal; font-weight: 700; text-decoration: none; border-radius: var(--button-border-radius); padding-left: 19px; } @media only screen and (min-width: 1900px) { .button { --button-height: 60px; --button-padding-x: 28px; font-size: 17px; } } /* Buttons Sizing Helpers: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/button.md#button-size-name --------------------------------------------------------------- */ /* button w/ a height even more smaller than the default height */ .button.button-size-micro { font-size: .75rem; --button-height: 2em; } /* button w/ a height smaller than the default height */ .button.button-size-small { font-size: .875rem; --button-height: 3em; } /* button w/ a height slightly larger than the default height but it's not that big */ .button.button-size-medium { --button-height: 4.5em; } /* button w/ a height larger than the default height */ .button.button-size-large { --button-height: 5em; } /* button w/ a height that's even larger for no reason than the larger height */ .button.button-size-larger { font-size: 1.25rem; --button-height: 5.5em; } /* constricts the width equal to whatever size height is set*/ .button.button-size-equal { --button-padding-x: 0; width: var(--button-height); text-overflow: ellipsis; overflow: hidden; } /* Buttons Color Palette Helpers: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/button.md#button-palette-name --------------------------------------------------------------- */ /* * Default - most frequent button palette in the comps * Invert - reuses default's colors but palettes for hover vs not hover are reversed * Outline - text w/ border influencing text color * Minimal - no colors except for the text Adjust as needed. */ .button.button-palette-default, .button.button-palette-reverse:is(:hover, :focus) { background-image: linear-gradient(to bottom, var(--color-primary) 0%, var(--color-primary) 100%); background-color: var(--color-primary); color: var(--color-light); border-color: transparent; } .button.button-palette-default::after { content: ""; width: 21px; height: 11px; background-image: url("data:image/svg+xml,<%3Fxml version=\"1.0\" encoding=\"UTF-8\"%3F>"); display: inline-block; margin-left: 9px; background-repeat: no-repeat; background-size: contain; transition: all .3s ease; } .button.button-palette-default:is(:hover, :focus), .button.button-palette-outline:is(:hover, :focus), .button.button-palette-reverse { background-image: linear-gradient(to bottom, var(--color-dark-alt) -50%, var(--color-dark-alt) 50%); background-color: var(--color-dark-alt); color: var(--color-light); border-color: transparent; } .button.button-palette-default:is(:hover, :focus)::after { background-image: url("data:image/svg+xml,<%3Fxml version=\"1.0\" encoding=\"UTF-8\"%3F>"); margin-left: 27px; } .button.button-palette-minimal { background-color: transparent; background-image: none; color: inherit; border-color: transparent; } .button.button-palette-minimal.nitro-lazy { background-image: none !important; } .button.button-palette-minimal:is(:hover, :focus) { background-color: transparent; background-image: none; color: var(--scheme-sp, var(--color-primary)); border-color: transparent; } .button.button-palette-minimal:is(:hover.nitro-lazy, :focus).nitro-lazy { background-image: none !important; } .button.button-palette-outline { background-color: transparent; background-image: none; color: inherit; border-color: currentColor; } .button.button-palette-outline.nitro-lazy { background-image: none !important; } /* primary palette. adjust or omit as needed * Tip: if both a flat and gradient version of the palette exists in the design, adding the class .button-style-flat to this .button-palette-* class will disable the gradient */ /* secondary palette. adjust or omit as needed * Tip: if both a flat and gradient version of the palette exists in the design, adding the class .button-style-flat to this .button-palette-* class will disable the gradient */ /* accent palette. adjust or omit as needed * Tip: if both a flat and gradient version of the palette exists in the design, adding the class .button-style-flat to this .button-palette-* class will disable the gradient */ /* Other Buttons Variations Helpers: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/button.md#button-style-name --------------------------------------------------------------- */ /* buttons with extra decorations or whichever is the most specially styled. overhaul or add more button styles as needed */ .button.button-style-special { position: relative; z-index: 1; transform-style: preserve-3d; --button-border-offset: .5em; border-color: rgba(255, 255, 255, .2); box-shadow: 0 0 0 var(--button-border-width) var(--color-accent); border-width: var(--button-border-offset); background-clip: padding-box; } .button.button-style-special::before { content: ""; transition: box-shadow .125s ease-in-out; display: inline-block; align-self: center; margin-right: 1.5em; margin-left: .375em; margin-bottom: .375em; width: 1.5rem; height: var(--button-border-width); background: currentColor; box-shadow: 0em -.375em 0 0, -.375em 0 0 0, .375em 0 0 0, 0em .375em 0 0; } .button.button-style-special:is(:hover, :focus) { box-shadow: 0 0 0 var(--button-border-width) var(--color-primary); border-color: rgba(255, 255, 255, .5); } .button.button-style-special:is(:hover, :focus)::before { box-shadow: .375em -.375em 0 0, -.75em 0 0 0, -.75em 0 0 0, .375em .375em 0 0; } /* link style button. Usually the maps link or read more text for blog posts */ .button.button-style-link { --button-border-width: 2px; border-radius: 0; padding: 0; border: none; min-height: 0; min-height: 0; background: none; box-shadow: none; color: inherit; letter-spacing: 0em; text-transform: none; } .button.button-style-link:is(:hover, :focus) { background: none; border-color: var(--color-primary); } .button.button-style-link::after { content: ""; width: 23px; height: 12px; background-image: url("data:image/svg+xml,<%3Fxml version=\"1.0\" encoding=\"UTF-8\"%3F>"); background-repeat: no-repeat; background-size: contain; margin-left: 12px; transition: all .3s ease; } .button.button-style-link:is(:hover, :focus) { color: var(--color-primary); } .button.button-style-link:is(:hover, :focus)::after { margin-left: 18px; background-image: url("data:image/svg+xml,<%3Fxml version=\"1.0\" encoding=\"UTF-8\"%3F>"); } /* undo background gradients in favor for the flat background color for button-palette. will only work if backgrounds are setup with proper fallbacks (background-gradient with a background-color fallback) */ .button.button-style-flat, .button.button-style-flat:is(:hover, :focus) { background-image: none; } .button.button-style-flat.nitro-lazy, .button.button-style-flat:is(:hover.nitro-lazy, :focus).nitro-lazy { background-image: none !important; } /* remove radius */ .button.button-style-no-radius { --button-border-radius: 0; } /* no corners for the button. only soft bbies */ .button.button-style-round { --button-border-radius: 999em; } /* button styles that have thicker borders than usual */ .button.button-style-thick-border { --button-border-width: 4px; } /* button styles that have thicker borders than usual */ .button.button-style-thin-border { --button-border-width: 1px; } /* button styles that have thicker borders than usual */ .button.button-style-no-border { --button-border-width: 0px; } /* diamond buttons. best if paired with .button-size-equal */ @supports (clip-path: polygon(0 0, 0 0, 0 0, 0 0)) { .button.button-style-diamond { overflow: hidden; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } } /* if the slider buttons have unique overrides */ .button.button-style-slider.button-palette-minimal { --button-height: 51px; --button-padding-x: .4em; background-color: rgba(135, 117, 113, .6); color: var(--color-light); } .button.button-style-slider.button-palette-minimal:is(:hover, :focus) { background-color: var(--color-primary); } /* Misc Button stuff. Add as needed --------------------------------------------------------------- */ /* little arrow indicator for slider arrows: .button.button-size-equal.button-palette-default > i.button-slider-glyph */ .button-slider-glyph:empty::after { display: inline-block; order: 9; align-self: center; transform-origin: center center; content: ""; width: 22px; height: 12px; background-image: url("data:image/svg+xml,<%3Fxml version=\"1.0\" encoding=\"UTF-8\"%3F>"); background-repeat: no-repeat; background-size: contain; margin-left: -15px; } :is(.prev, .slick-prev, .swiper-button-prev) .button-slider-glyph { transform: scaleX(-1); } :is(.prev, .slick-prev, .swiper-button-prev) .button-slider-glyph:empty::after { margin-left: 0; margin-right: -15px; } /* Container: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/container.md --------------------------------------------------------------- */ /* Container Skeletons. do not edit --------------------------------------------------------------- */ .container { /* do not attempt to override or your container may misalign. containers are meant to always be centered after all */ /* Tip: if something in the design is off center, consult with designer or use additional padding or margin as needed for the contents instead */ padding-inline: min(var(--container-fallback), var(--container-gutter)) !important; margin-inline: auto !important; max-width: 100%; width: calc(100% - max(var(--container-gutter) - min(var(--container-fallback), var(--container-gutter)), 0rem) * 2); min-width: 0; flex: 0 0 auto; grid-column: 1/-1; container: container/inline-size; } /* on some cases container query support is a conflict of interest and makes positioned/flex/grid children act weird. use this helper if you dont need container queries */ .container.container-style-normal { /* container query support */ container-type: normal; } /* Fallback Scaffolding. Usually no need to edit: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/container.md#css-vars --------------------------------------------------------------- */ .container { --container-fallback: 20px; --container-size-reference: var(--comp); --container-gutter: var(--container-fallback); } @media only screen and (min-width: 1400px) { .container { --container-fallback: 60px; } } /* Custom Container Size Variations: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/container.md#container-size-name --------------------------------------------------------------- */ /* repeating/ internal page container sizing. sometimes designers will use the same gutter width for internals and or gridded template. this can be used so you dont have to copy paste identical styles to different selectos like 10 times */ .container.container-size-default { --container-gutter: 30px; } @media only screen and (min-width: 768px) { .container.container-size-default { --container-gutter: 60px; } } @media only screen and (min-width: 1200px) { .container.container-size-default { --container-gutter: 80px; } } @media only screen and (min-width: 1400px) { .container.container-size-default { --container-gutter: 114px; } } @media only screen and (min-width: 1900px) { .container.container-size-default { --container-gutter: 260px; } } /* Reduces horizontal padding */ @media only screen and (min-width: 768px) { .container.container-size-wide { --container-gutter: 15px; } } @media only screen and (min-width: 1200px) { .container.container-size-wide { --container-gutter: 30px; } } /* Reduces horizontal padding for xs only */ @media only screen and (max-width: 767px) { .container.container-size-wide-xs { --container-fallback: 15px; --container-gutter: var(--container-fallback); } } /* Reduces horizontal padding for sm only */ @media only screen and (min-width: 768px) and (max-width: 1199px) { .container.container-size-wide-sm { --container-fallback: 30px; --container-gutter: var(--container-fallback); } } /* Other Container Variations: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/container.md#container-style-name --------------------------------------------------------------- */ /* sometimes when you dont need the fallback gutter for the container but also need to constrict the layout, here's ya boi. Note: Make sure you add appropriate padding for the innards of this container */ .container.container-style-no-padding { --container-fallback: 0px; } /* constrict container to how wide it is in the deisgn comps. makes sure it never goes beyond the comp or set gutter or fallback global padding + adding important disables third party scripts from overriding our styles */ @media only screen and (min-width: 768px) { .container.container-style-maxed { max-width: calc(var(--container-size-reference) - max(var(--container-gutter) - min(var(--container-fallback), var(--container-gutter)), 0rem) * 2) !important; } } /* constrict container to how wide it is in the deisgn comps for mobile/xs and smaller only */ @media only screen and (max-width: 767px) { .container.container-style-maxed-xs { max-width: calc(var(--container-size-reference) - max(var(--container-gutter) - min(var(--container-fallback), var(--container-gutter)), 0rem) * 2) !important; } } /* constrict container to how wide it is in the deisgn comps for hd/xl and beyond only */ @media only screen and (min-width: 1900px) { .container.container-style-maxed-xl { max-width: calc(var(--container-size-reference) - max(var(--container-gutter) - min(var(--container-fallback), var(--container-gutter)), 0rem) * 2) !important; } } /* constrict container to how wide it is in the deisgn comps for touch devices/xs to sm-max only */ @media only screen and (max-width: 1199px) { .container.container-style-maxed-touch { max-width: calc(var(--container-size-reference) - max(var(--container-gutter) - min(var(--container-fallback), var(--container-gutter)), 0rem) * 2) !important; } } /* constrict container to how wide it is in the deisgn comps for touch devices/xs to sm-max only */ @media only screen and (min-width: 768px) and (max-width: 1199px) { .container.container-style-maxed-nontouch { max-width: calc(var(--container-size-reference) - max(var(--container-gutter) - min(var(--container-fallback), var(--container-gutter)), 0rem) * 2) !important; } } /* Columns: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/columns.md --------------------------------------------------------------- */ /* Column Skeletons. do not edit Vars: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/columns.md#css-vars --------------------------------------------------------------- */ .columns { --columns-gap-x: 0px; --columns-gap-y: 0rem; --columns-number: 1; width: 100%; } .columns, .columns > * { min-width: 0; max-width: 100%; } .columns.columns-flex { display: flex; flex-wrap: wrap; row-gap: var(--columns-gap-y); -moz-column-gap: var(--columns-gap-x); column-gap: var(--columns-gap-x); } .columns.columns-flex > * { flex-grow: 0; flex-shrink: 0; flex-basis: calc(100% / var(--columns-number) - var(--columns-gap-x) * ( var(--columns-number) - 1 ) / var(--columns-number)); } .columns.columns-grid { display: grid; row-gap: var(--columns-gap-y); -moz-column-gap: var(--columns-gap-x); column-gap: var(--columns-gap-x); grid-template-columns: repeat(var(--columns-number), calc(100% / var(--columns-number) - var(--columns-gap-x) * ( var(--columns-number) - 1 ) / var(--columns-number))); } .columns.columns-grid > :where(*) { width: 100%; } .columns.columns-masonry { -moz-column-count: var(--columns-number); column-count: var(--columns-number); -webkit-column-count: var(--columns-number); -moz-column-gap: var(--columns-gap-x); column-gap: var(--columns-gap-x); -webkit-column-gap: var(--columns-gap-x); } .columns.columns-masonry > * { page-break-inside: avoid; -moz-column-break-inside: avoid; break-inside: avoid; } .columns.columns-masonry > *:nth-child(n+2) { margin-top: var(--columns-gap-y); } /* https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/popup.md --------------------------------------------------------------- */ .doc-popup-active { overflow-y: hidden; } .popup-content { display: none !important; } .popup { display: none; display: flex; overflow-y: scroll; position: fixed; z-index: 9999; top: 0; right: 0; left: 0; bottom: 0; margin: 0; min-height: 100vh; width: 100%; min-width: 320px; background: none !important; flex-direction: column; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .popup.active { display: block; } .popup-overlay { background: var(--color-dark-alt); opacity: .92; min-height: 100vh; position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: 0; } .popup-body { overflow-y: scroll; height: 100%; padding-block: 11vw; scrollbar-width: none; } .popup-body::-webkit-scrollbar { display: none; } .popup-frame { background: var(--color-light); position: relative; padding-block: 97px; padding-inline: 135px; border-radius: 5px; } .popup-close-button { position: absolute; top: 0; right: 1em; margin-top: 1em; background: none; border: 0; font-size: 2.5rem; display: block; width: 1em; height: 1em; line-height: 1; padding: 0; overflow: hidden; text-indent: -9999em; color: var(--color-dark); } .popup-close-button::before, .popup-close-button::after { content: ""; display: block; height: 2px; width: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background: currentColor; } .popup-close-button::before { transform: rotate(45deg); } .popup-close-button::after { transform: rotate(-45deg); } @media only screen and (min-width: 1400px) { .popup-container { --container-gutter: 200px; } } @media only screen and (min-width: 1900px) { .popup-container { --container-gutter: 360px; } } @media only screen and (max-width: 767px) { .popup-frame { padding-block: 4rem 2rem; padding-inline: 2rem; } .popup-close-button { font-size: 2rem; margin-top: 1.25rem; right: 1.25rem; } } /* Widgets https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/widget.md --------------------------------------------------------------- */ /* Widgets Skeleton. Do not Edit --------------------------------------------------------------- */ .widget { padding-block: var(--widget-padding-top) var(--widget-padding-bottom); padding-inline: var(--widget-padding-x); position: relative; max-width: none; width: auto; overflow: hidden; } .widget, .widget > :where(ul, .widget-content, .menu, div):not(.content), .widget > :where(ul, .widget-content, .menu, div):not(.content) li { padding-left: var(--widget-padding-x); padding-right: var(--widget-padding-x); } .widget > :where(ul, .widget-content, .menu, div) { padding-block: var(--widget-content-padding-top) var(--widget-content-padding-bottom); margin-block: var(--widget-content-margin-top) var(--widget-content-margin-bottom); } .widget > :where(ul, .widget-content, .menu, div):last-child, .widget > :where(ul, .widget-content, .menu, div):not(.content) > li, .widget > :where(ul, .widget-content, .menu, div):not(.content) :where(ul, .sub-menu) { margin-inline: calc(var(--widget-padding-x) * -1); max-width: none; } :is(.widget_title, .widget-title, .widgettitle) { padding-inline: var(--widget-title-padding-x); margin-block: 0; } .widget > :where(ul, .widget-content, .menu, div):not(.content) li > a { padding-inline: var(--widget-item-padding-x); } .widget > :where(ul, .widget-content, .menu, div).content { padding-inline: calc(var(--widget-padding-x) + var(--widget-item-padding-x)); } .widget > :where(ul, .widget-content, .menu, div):not(.content) ul li { padding-left: calc(var(--widget-padding-x) + var(--widget-dropdown-offset)); } .widget > :where(ul, .widget-content, .menu, div):not(.content) ul li > a { padding-left: calc(var(--widget-dropdown-item-offset) + var(--widget-item-padding-x)); } .widget > :where(ul, .widget-content, .menu, div):not(.content) li { list-style: none; clear: both; } .widget > :where(ul, .widget-content, .menu, div):not(.content) li a { padding-block: calc(( var(--widget-item-height) - var(--widget-item-border-width) - 1em * var(--widget-item-lines) * var(--widget-item-line-height) ) * var(--widget-item-baseline-offset)) calc(( var(--widget-item-height) - var(--widget-item-border-width) - 1em * var(--widget-item-lines) * var(--widget-item-line-height) ) * ( 1 - var(--widget-item-baseline-offset) )); color: inherit; text-decoration: none; display: flex; } .widget > :where(ul, .widget-content, .menu, div):not(.content) li ul { border-block: var(--widget-item-border-width) solid transparent; padding-block: var(--widget-dropdown-padding-top) var(--widget-dropdown-padding-bottom); margin-block: var(--widget-dropdown-margin-top) var(--widget-dropdown-margin-bottom); flex: 0 0 auto; min-width: calc(100% + var(--widget-padding-x) * 2); } .widget > :where(ul, .widget-content, .menu, div):not(.content) li:last-child > ul { border-bottom: 0; margin-bottom: calc(var(--widget-dropdown-padding-bottom) * -1); } .widget > :where(ul, .widget-content, .menu, div):not(.content) > li:last-child > ul { /* fix top level item dropdown bottom gaps */ margin-bottom: calc(( var(--widget-padding-bottom) + var(--widget-content-padding-bottom) ) * -1); } .widget:not(.widget-style-no-toggle):not(.open) > :is(.widget_title, .widget-title, .widgettitle) + *:where(ul, .widget-content, .menu, div), .widget:not(.widget-style-no-toggle) li:not(.open) > ul:not(:only-child) { /* close it all, javascript will take care of opening what needs to be opened */ display: none; } :is(.widget_title, .widget-title, .widgettitle) + *:not(:where(ul, .widget-content, .menu, div)) { margin-top: var(--widget-content-margin-top); } .widget :where(input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), select, textarea, table) { width: 100%; } /* Widget Customizations https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/widget.md#css-vars --------------------------------------------------------------- */ .widget { --widget-padding-x: 30px; --widget-padding-top: 50px; --widget-padding-bottom: var(--widget-padding-top); --widget-dropdown-padding-top: 1rem; --widget-dropdown-padding-bottom: var(--widget-dropdown-padding-top); --widget-dropdown-margin-top: .5rem; --widget-dropdown-margin-bottom: var(--widget-dropdown-margin-top); --widget-item-height: 40px; --widget-item-border-width: 1px; --widget-item-lines: 1; --widget-item-padding-x: 8px; --widget-dropdown-offset: 2em; --widget-dropdown-item-offset: 0em; --widget-title-padding-x: var(--widget-item-padding-x); --widget-content-margin-top: 1rem; --widget-content-margin-bottom: 0rem; --widget-content-padding-top: 0rem; --widget-content-padding-bottom: var(--widget-content-padding-top); --widget-item-baseline-offset: .5; --widget-item-line-height: 1.5; background-color: var(--scheme-bg, var(--color-light)); box-shadow: 0 3px 10px rgba(0, 0, 0, .2); width: 100%; } .widget:where(:nth-last-child(n+2)) { margin-bottom: var(--default-gap-y, 60px); } .widget > :where(ul, .widget-content):not(.content) { font-size: 16px; line-height: var(--widget-item-line-height); color: var(--scheme-fg, var(--color-dark)); font-weight: 700; text-align: left; text-decoration: none; } .widget > :where(ul, .widget-content):not(.content) li:is(.open, :hover, :focus-within) > a { color: var(--scheme-sp, var(--color-primary)); } .widget > :where(ul, .widget-content):not(.content) li ul { background-color: var(--scheme-bg-c, var(--color-light-alt)); border-color: var(--color-neutral-lighter); text-align: left; } .widget > :where(ul, .widget-content):not(.content) li ul ul { background-color: rgba(0, 0, 0, .01); } .widget > :where(ul, .widget-content):not(.content) li.open { border-bottom: 0; } .widget > :where(ul, .widget-content):not(.content) li.open > a { border-bottom: 0; } @media only screen and (min-width: 768px) { .widget { --widget-padding-x: 50px; --widget-padding-top: 60px; } } @media only screen and (min-width: 1200px) { .widget { --widget-padding-x: 40px; --widget-padding-top: 43px; --widget-padding-bottom: 54px; } } /* Widget Title --------------------------------------------------------------- */ :is(.widget_title, .widget-title, .widgettitle) { font-size: 12px; line-height: 14px; color: var(--color-dark); letter-spacing: .15em; font-weight: 700; flex-wrap: wrap; } :is(.widget_title, .widget-title, .widgettitle):is(.fancy-border) { --fancy-border-width: 100%; --fancy-border-margin-y: calc(var(--widget-content-margin-top) + .5em); --fancy-border-margin-y: 13px; --fancy-border-margin-l: 0; --fancy-border-height: 1px; } :is(.widget_title, .widget-title, .widgettitle):is(.fancy-border-before)::before, :is(.widget_title, .widget-title, .widgettitle):is(.fancy-border-after)::after { grid-column: 1/-1; } .widget:not(.widget-style-no-toggle):not(.open) > :is(.widget_title, .widget-title, .widgettitle) { padding-bottom: 0; border-bottom: 0; margin-bottom: 0; } .widget:not(.widget-style-no-toggle):not(.open) > :is(.widget_title, .widget-title, .widgettitle):is(.fancy-border) { --fancy-border-margin-y: 0rem; --fancy-border-height: 0rem; } @media only screen and (min-width: 768px) { :is(.widget_title, .widget-title, .widgettitle) { font-size: 14px; line-height: 16px; } } /* Widget Toggle --------------------------------------------------------------- */ .widget-toggle { display: grid; grid-template-columns: 1fr auto; align-items: center; -moz-column-gap: .5em; column-gap: .5em; cursor: pointer; justify-content: space-between; } .widget-toggle > * { min-width: 0; } .widget-toggle::before { display: inline-block; order: 9; align-self: center; flex: 0 0 auto; content: ""; font-size: .5rem; transform-origin: 67% 67%; width: 1em; height: 1em; border: 2px solid currentColor; border-top: 0; border-left: 0; transform: rotate(45deg); } .open > .widget-toggle::before { transform: rotate(-135deg); } /* Widget Customization by type. Unless an extra extra custom site, there should be rarely a need to apply overrides at this point --------------------------------------------------------------- */ /* Graphic/ design related styles or decoration styles here. Essentially, the fancy stuff enhances the gucciness of the site --------------------------------------------------------------- */ /* Fancy Borders + HR: /* https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/fancy.md#fancy-border-css-vars --------------------------------------------------------------- */ :where(hr), .fancy-border { clear: both; outline: none; border: none; -moz-column-break-inside: avoid; break-inside: avoid; } .fancy-border { --fancy-border-margin-y: 1.5rem; --fancy-border-margin-r: auto; --fancy-border-margin-l: auto; --fancy-border-height: 3px; --fancy-border-width: auto; --fancy-border-background: currentColor; } :where(hr), .fancy-border.fancy-border-before::before, .fancy-border.fancy-border-after::after { height: var(--fancy-border-height, 3px); width: var(--fancy-border-width, 100%); background: var(--fancy-border-background, var(--color-neutral)); margin-left: var(--fancy-border-margin-l, auto); margin-right: var(--fancy-border-margin-r, auto); max-width: 100%; grid-column: 1/-1; flex: 0 0 auto; } .fancy-border.fancy-border-before:not(hr)::before, .fancy-border.fancy-border-after:not(hr)::after { content: ""; } :where(hr), .fancy-border-after::after, .fancy-border-before::before { display: block; transition: all .375s ease-in-out; } .fancy-border.fancy-border-after::after { order: 99; } .fancy-border.fancy-border-before::before { order: -99; } hr.fancy-border-after, .fancy-border.fancy-border-after::after { margin-top: var(--fancy-border-margin-y, 1.875rem); } hr.fancy-border-before, .fancy-border.fancy-border-before::before { margin-bottom: var(--fancy-border-margin-y, 1.875rem); } .fancy-border-palette-primary { --fancy-border-background: var(--color-primary) linear-gradient(90deg, var(--color-primary-gradient-start) 0%, var(--color-primary-gradient-end) 100%); } .fancy-border-palette-secondary { --fancy-border-background: var(--color-secondary) linear-gradient(90deg, var(--color-secondary-gradient-start) 0%, var(--color-secondary-gradient-end) 100%); } .fancy-border-palette-accent { --fancy-border-background: var(--color-accent) linear-gradient(90deg, var(--color-accent-gradient-start) 0%, var(--color-accent-gradient-end) 100%); } .fancy-border-palette-primary-alt { --fancy-border-background: var(--color-primary-alt) linear-gradient(90deg, var(--color-primary-gradient-start) 0%, var(--color-primary-gradient-end) 100%); } .fancy-border-palette-secondary-alt { --fancy-border-background: var(--color-secondary-alt) linear-gradient(90deg, var(--color-secondary-gradient-start) 0%, var(--color-secondary-gradient-end) 100%); } .fancy-border-palette-accent-alt { --fancy-border-background: var(--color-accent-alt) linear-gradient(90deg, var(--color-accent-gradient-start) 0%, var(--color-accent-gradient-end) 100%); } .fancy-border-palette-neutral { --fancy-border-background: var(--color-neutral); } .fancy-border-style-round { border-radius: 999em; } .fancy-border-style-thin { --fancy-border-height: 1px; } .fancy-border-style-alignleft { --fancy-border-margin-r: auto; --fancy-border-margin-l: 0; } .fancy-border-style-alignright { --fancy-border-margin-r: 0; --fancy-border-margin-l: auto; } hr.fancy-border-style-flat, .fancy-border-style-flat.fancy-border-before::before, .fancy-border-style-flat.fancy-border-after::after { background-image: none !important; } .fancy-border-style-inline { --fancy-border-margin-l: .5em; display: flex; flex-wrap: nowrap; row-gap: var(--fancy-border-margin-y); -moz-column-gap: var(--fancy-border-margin-l); column-gap: var(--fancy-border-margin-l); } .fancy-border-style-inline.fancy-border-before::before, .fancy-border-style-inline.fancy-border-after::after { flex: 1 1; margin-block: 0 !important; align-self: center; } /* Animated Fancy Border: /* https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/fancy.md#fancy-border-animated --------------------------------------------------------------- */ @media only screen and (min-width: 1200px) { hr.fancy-border-animated, .fancy-border-animated.fancy-border-before::before, .fancy-border-animated.fancy-border-after::after { transition: width 1.5s ease-in-out; } .fancy-border-animated:not(.visible) { --fancy-border-width: 0% !important; } } /* Fancy Icons: /* https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/components/fancy.md#fancy-icon --------------------------------------------------------------- */ .fancy-icon-menu { position: relative; --fancy-icon-menu-width: 2rem; --fancy-icon-menu-height: 1rem; --fancy-icon-menu-bar-height: 2px; --fancy-icon-menu-bar-top-width: 100%; --fancy-icon-menu-bar-top-margin-l: auto; --fancy-icon-menu-bar-top-margin-r: auto; --fancy-icon-menu-bar-center-width: 100%; --fancy-icon-menu-bar-center-margin-l: auto; --fancy-icon-menu-bar-center-margin-r: auto; --fancy-icon-menu-bar-bottom-width: 100%; --fancy-icon-menu-bar-bottom-margin-l: auto; --fancy-icon-menu-bar-bottom-margin-r: auto; width: var(--fancy-icon-menu-width); height: var(--fancy-icon-menu-height); } .fancy-icon-menu span { position: absolute; transform-origin: center center; background: currentColor; top: 0; bottom: 0; left: 0; right: 0; height: var(--fancy-icon-menu-bar-height); width: 100%; transition-duration: .375s; transition-timing-function: ease-in-out; transition-property: top, bottom, left, right, transform, width; } .fancy-icon-menu span:where(:first-child) { bottom: auto; width: var(--fancy-icon-menu-bar-top-width); margin: auto var(--fancy-icon-menu-bar-top-margin-r) auto var(--fancy-icon-menu-bar-top-margin-l); } .fancy-icon-menu span:where(:last-child) { top: auto; width: var(--fancy-icon-menu-bar-bottom-width); margin: auto var(--fancy-icon-menu-bar-bottom-margin-r) auto var(--fancy-icon-menu-bar-bottom-margin-l); } .fancy-icon-menu span:where(:nth-child(2), :nth-child(3)) { width: var(--fancy-icon-menu-bar-center-width); margin: auto var(--fancy-icon-menu-bar-center-margin-r) auto var(--fancy-icon-menu-bar-center-margin-l); } .open .fancy-icon-menu span { margin: auto; } .open .fancy-icon-menu span:nth-child(2) { transform: rotateZ(45deg); } .open .fancy-icon-menu span:nth-child(3) { transform: rotateZ(-45deg); } .open .fancy-icon-menu span:is(:nth-child(2), :nth-child(3)) { width: 100%; } .open .fancy-icon-menu span:is(:first-child, :last-child) { width: 0; } /* Fancy Text Animation by Mr. Garrett except Sam added tweaks Requires: PHP: functions/function-helpers.scss: onep21_fancy_letters. Text must be outputted using this function SCSS: scss/components/fancy.scss fancy-letters JS: `Fancy Text Animated trackVisibility` --------------------------------------------------------------- */ /* Other Custom Fancy Stuff --------------------------------------------------------------- */ .fancy-title { font-size: 12px; line-height: 14px; color: var(--color-dark); letter-spacing: .15em; text-transform: uppercase; font-weight: 700; display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 21px; width: 100%; } .fancy-title::after { content: ""; width: 100%; height: 1px; background-color: #877571; display: inline-block; } /* ================================================================================ * Includes ================================================================================ */ /* Forms https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/helper/form.md For Gravity Forms specific styles go to scss/vendors/gforms -------------------------------------------------------------------------------- */ .field-form { max-width: 100%; } .field-form :where(.faux-gform_wrapper) :is(.gform_title, .gform_description, .gform_footer, .gform_page_footer, .gform_body) { margin: 0; padding: 0; } .field-form :where(.faux-gform_wrapper) .gform_heading { /* gform heading: gforms generated or template custom ones */ /* center the heading stuff. or adjust as needed if that's not the case */ text-align: center; max-width: -moz-max-content; max-width: max-content; margin-bottom: 64px; } @media only screen and (max-width: 767px) { .field-form :where(.faux-gform_wrapper) .gform_heading { max-width: 400px !important; } } .field-form :where(.faux-gform_wrapper) :where(.gform_heading, .gform_title, .gform_description) { /* everything inside the heading: gforms generated or template custom ones */ /* center the heading stuff. or adjust as needed if that's not the case */ margin-left: auto; margin-right: auto; } .field-form :is(.faux-gform_wrapper) :is(.gform_title, .gform_description):last-child { margin-bottom: 0; } .field-form :is(.gform_wrapper) .gform_body {} .field-form :is(.gform_wrapper) :is(.gform_footer, .gform_page_footer) { /* footer: gforms generated or template custom ones */ /* reset margin and padding and add one margin to keep spacing simple to setup. Gravity forms man. */ padding: 0; margin: 0; margin-top: 2rem; } .field-form :is(.gform_wrapper) :is(.gform_footer, .gform_page_footer) :is(.gform_button, .button) { /* that goes for the button too */ margin-bottom: 0; margin-top: 0; } .field-form-body :is(.gform_wrapper) .gform_heading { /* in case gravity forms decides to add more ugly things */ display: none; } /* Background Block: https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/field/responsive-background --------------------------------------------------------------- */ .responsive-background { pointer-events: none; overflow: hidden; transform-style: preserve-3d; z-index: -1; } .responsive-background-wrapper { position: relative; z-index: 0; } .responsive-background, .responsive-background-bg { position: absolute !important; top: 0; bottom: 0; left: 0; right: 0; } .responsive-background-bg { /* Note: when styling instances of this block, make sure properties are NOT set as shorthand to avoid override issues */ background-size: cover; background-position: center center; background-color: var(--color-base-alt); z-index: -2; background-image: var(--responsive-background-image, none) !important; } @media only screen and (min-width: 1200px) { :is(.responsive-background-animated-on-loaded, .responsive-background-animated-on-visible.visible) .responsive-background-bg { /* make background block animate for document ready or when visible*/ transition: opacity ease-in-out 1.5s, transform ease-in-out 1.5s; opacity: 1; transform: scale(1); transform-style: preserve-3d; } :is(html:not(.doc-images-loaded) .responsive-background-animated-on-loaded, .responsive-background-animated-on-visible:not(.visible)) .responsive-background-bg { /* hide if not ready to let the world to know got to let it show */ opacity: 0; transform: scale(1.125); } } /* Carousels https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/repeater/carousel.md --------------------------------------------------------------- */ /* Carousel Item skeletons. Do not Edit. --------------------------------------------------------------- */ .carousel-item { text-align: center; } .carousel-item-image { height: var(--carousel-height); } .carousel-item-image > :where(*) { pointer-events: none; } .carousel-item-image, .carousel-item-image picture { display: flex; justify-content: center; align-items: center; flex-direction: column; } .carousel-item-image :where(svg, object, img) { height: auto !important; } .carousel-item-image :where(img, svg, object, picture) { width: auto !important; max-width: 100% !important; max-height: 100% !important; align-self: center; flex: 0 0 auto; height: 100% !important; } /* Carousel Item Customizations --------------------------------------------------------------- */ :root { /* height of award. best to set to the tallest award logo provided */ --carousel-height: 120px; } /* Case Results https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/repeater/result.md -------------------------------------------------------------------------------- */ /* * Case Result Icon -------------------------------------------------------------------------------- */ .result-icon { font-size: 3rem; margin-bottom: 1rem; } /* * Case Result Value -------------------------------------------------------------------------------- */ .result-value { font-size: 45px; text-transform: uppercase; text-align: center; margin-bottom: 0; } .result-value-confidential { font-size: .6em; } .result-value-number-long { font-size: .75em; } @media only screen and (min-width: 768px) { .result-value { font-size: 50px; line-height: 70px; text-align: left; } } /* * Case Result Type -------------------------------------------------------------------------------- */ .result-type { font-size: 20px; line-height: 28px; color: var(--color-primary); letter-spacing: -.025em; text-transform: none; font-weight: 600; text-align: center; margin-bottom: 2rem; } @media only screen and (min-width: 768px) { .result-type { text-align: left; margin-bottom: 50px; } } @media only screen and (min-width: 1400px) { .result-type { margin-bottom: 60px; } } /* * Case Result Title - Optional -------------------------------------------------------------------------------- */ /* * Case Result Description -------------------------------------------------------------------------------- */ /* * Case Result Learn More - Optional -------------------------------------------------------------------------------- */ .result-learn-more { margin-top: 2rem; align-self: center; font-size: 12px; line-height: 14px; } @media only screen and (min-width: 768px) { .result-learn-more { font-size: 14px; line-height: 14px; margin-top: 18px; align-self: flex-start; } } /* * Case Result Description + Details Split. Useful for popups/ hovers -------------------------------------------------------------------------------- */ .result-summary:nth-last-child(n+2) { margin-bottom: auto; } .result-details-default { margin-top: 1.5em; border-top: 1px solid var(--color-neutral); padding-top: 1.5rem; } .result-details-default .result-content { max-width: 50ch; } .result:not(:hover, :focus-within) .result-details-hover { pointer-events: none; opacity: 0; } /* * includes/repeater-result -------------------------------------------------------------------------------- */ .result {} .result { max-width: 100%; } .result, .result-container { display: flex; min-width: 0; flex-direction: column; } .result-container { width: 100%; flex: 1 1; } .result :where(.result-description, .result-content) { text-align: center; margin-left: auto; margin-right: auto; } @media only screen and (min-width: 768px) { .result :where(.result-description, .result-content) { text-align: left; font-size: 16px; line-height: 24px; } } .result-pointer-reference:has(.result-details, [href]):is(:hover, :focus-within) .result-content { max-width: 50ch; } .result-details-default { display: flex; flex-direction: column; align-items: center; flex: 1 1; } .result-details-default .result-description { flex: 1 1; } .result-details-default .result-learn-more:first-child { margin-top: auto; } .result-details-hover { max-width: none; position: absolute; background-color: var(--color-dark-alt); color: var(--color-light); top: 0; bottom: 0; left: 0; right: 0; margin: 0; scrollbar-width: none; overflow-y: scroll; transition: .25s all ease-in-out; padding: 2rem; opacity: 1; } .result-details-hover::-webkit-scrollbar { display: none; } .result:not(:hover, :focus-within) .result-details-hover { pointer-events: none; opacity: 0; } /* Practice Areas https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/repeater/practice-area.md -------------------------------------------------------------------------------- */ /* * Practice Area Skeleton. Do not Edit -------------------------------------------------------------------------------- */ .practice-area-title { padding-inline: var(--pa-title-padding-x); } .practice-area-title:is(.fancy-border) -after:after { --fancy-border-margin-l: calc(var(--pa-title-padding-x) * -1); --fancy-border-margin-r: calc(var(--pa-title-padding-x) * -1); } .practice-area-menu li, .practice-area-menu li a { display: flex; flex-direction: column; line-height: var(--pa-item-line-height); } .practice-area-menu li a { justify-content: center; flex: 1 1; padding-block: calc(( var(--pa-item-height) - 1em * var(--pa-item-lines) * var(--pa-item-line-height) ) * var(--pa-item-baseline-offset)) calc(( var(--pa-item-height) - 1em * var(--pa-item-lines) * var(--pa-item-line-height) ) * ( 1 - var(--pa-item-baseline-offset) )); padding-inline: var(--pa-item-padding-x); min-height: var(--pa-item-height); } @media only screen and (max-width: 767px) { .practice-area-menu li a { min-height: 0; } } /* * Practice Area Vars/ Scaffolding -------------------------------------------------------------------------------- */ .practice-area { --pa-item-padding-x: 0; --pa-item-height: 50px; --pa-item-lines: 1; --pa-item-baseline-offset: .5; --pa-item-line-height: 1.5; --pa-title-padding-x: var(--pa-item-padding-x); } @media only screen and (min-width: 768px) { .practice-area { --pa-item-height: 60px; min-width: 100%; } } @media only screen and (max-width: 767px) { .practice-area {} } /* * Practice Area Category Title -------------------------------------------------------------------------------- */ .practice-area-title { font-size: 16px; line-height: 19px; color: var(--color-primary); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; margin-bottom: 30px; } /* * Practice Area Menu -------------------------------------------------------------------------------- */ .practice-area-menu { font-weight: 700; } .practice-area-menu li { border-bottom: 1px solid #877571; } .practice-area-menu li:nth-child(-n+1) { border-top: 0; } .practice-area-menu li:is(:hover, :focus-within) a { color: var(--color-primary); } .practice-area-menu li a { flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; } .practice-area-menu li a:hover::after { content: ""; width: 22px; height: 12px; background-image: url("data:image/svg+xml,<%3Fxml version=\"1.0\" encoding=\"UTF-8\"%3F>"); background-repeat: no-repeat; background-size: contain; display: inline-block; } /* * includes/repeater-practice-area -------------------------------------------------------------------------------- */ .practice-area { max-width: 100%; } .practice-area, .practice-area-container { display: flex; min-width: 0; flex-direction: column; } .practice-area-container { width: 100%; flex: 1 1; } /* Pagination https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/helper/pagination.md -------------------------------------------------------------------------------- */ /* Pagination Skeletons. do not edit --------------------------------------------------------------- */ .pagination { display: grid; grid-template-columns: 1fr max-content 1fr; align-items: center; text-align: center; clear: both; margin-left: auto; margin-right: auto; font-size: 16px; line-height: 19px; letter-spacing: .1em; } .pagination-block { grid-row: 1; } .pagination-block-left { grid-column: 1; text-align: left; } .pagination-block-center { grid-column: 2; } .pagination-block-right { grid-column: 3; text-align: right; } .pagination-block-right span.sm-hide.xs-hide { margin-inline: 15px; color: var(--color-primary); } .pagination-num-list.pagination-block-left span:first-child, .pagination-num-list.pagination-block-left a:first-child { margin-left: 0; } .pagination-num-list.pagination-block-right span:last-child, .pagination-num-list.pagination-block-right a:last-child { margin-left: 0; } @media only screen and (max-width: 1199px) { .pagination-nav-link:is(.pagination-block-left, .pagination-block-right):nth-child(2), .pagination-nav-link:is(.pagination-block-left, .pagination-block-right):nth-last-child(2) { grid-column: 1/-1; } .pagination-nav-link:is(.pagination-block-left, .pagination-block-right):nth-child(2) span:nth-last-child(n+2), .pagination-nav-link:is(.pagination-block-left, .pagination-block-right):nth-child(2) a:nth-last-child(n+2), .pagination-nav-link:is(.pagination-block-left, .pagination-block-right):nth-last-child(2) span:nth-last-child(n+2), .pagination-nav-link:is(.pagination-block-left, .pagination-block-right):nth-last-child(2) a:nth-last-child(n+2) { margin-right: .5em; } } /* Pagination Customizations. customize as needed --------------------------------------------------------------- */ .pagination { border-top: 1px solid var(--color-neutral-light); padding-top: 2rem; margin-top: 3rem; margin-bottom: 0; max-width: calc(var(--comp) - var(--container-gutter, 30px)); } .pagination .current, .pagination a:is(:hover, :focus) { color: var(--color-primary); } .pagination-num-list a, .pagination-num-list span { margin-inline: .5em; } .pagination-nav-link :where(a) { dislay: inline-flex; align-items: center; } .pagination-nav-link .next:after, .pagination-nav-link .prev:before { display: inline-block; order: 9; align-self: center; flex: 0 0 auto; content: ""; font-size: .5rem; transform-origin: 40% 40%; width: 1em; height: 1em; border: 2px solid currentColor; border-top: 0; border-left: 0; } .pagination-nav-link .next:after { transform: rotate(-45deg); margin-left: 1em; } .pagination-nav-link .prev:before { transform: rotate(135deg); margin-right: 1em; } /* Profile https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/repeater/profile.md -------------------------------------------------------------------------------- */ /* * Profile Image. @TODO separate skeleton styles -------------------------------------------------------------------------------- */ .profile-image { --profile-image-aspect-w: 300; --profile-image-aspect-l: 363; --profile-image-position: 50% 15%; --profile-image-overlay-background: var(--color-dark-alt); --profile-image-overlay-opacity: .69; width: 100%; display: block; position: relative; border-radius: 5px; } .profile-image::before { /* aspect ratio keeper + hover overlay */ content: ""; display: block; position: relative; padding-top: calc(100% * var(--profile-image-aspect-l) / var(--profile-image-aspect-w)); } :is(.profile-image-img, .profile-image-placeholder, .profile-image-placeholder-img) { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } :is(.profile-image-picture, .profile-image-img, .profile-image-placeholder), .profile-image::before { border-radius: inherit; overflow: hidden; } :is(.profile-image-img, .profile-image-placeholder-img) { max-width: none; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: var(--profile-image-position); object-position: var(--profile-image-position); } .profile-image-placeholder { display: flex; align-items: center; justify-content: center; flex-direction: column; margin: 0; border: 1px solid var(--color-neutral-lighter); background-color: var(--color-dark); background-image: linear-gradient(to bottom right, var(--color-dark), var(--color-dark-alt)); font-size: 1.5rem; font-family: var(--font-secondary); color: var(--color-light); text-align: center; } .profile-image-placeholder-icon { font-size: 8rem; margin-bottom: 1rem; } .profile-image-placeholder img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } /* * Profile Image Pseudos: wheh linking to a bio page only -------------------------------------------------------------------------------- */ .profile-image[href]:is(:hover, :focus-within)::before, .profile-pointer-reference:is(:hover, :focus-within) .profile-image[href]::before { opacity: var(--profile-image-overlay-opacity); pointer-events: auto; } .profile-image[href]:is(:hover, :focus-within) .profile-view, .profile-pointer-reference:is(:hover, :focus-within) .profile-image[href] .profile-view { opacity: 1; pointer-events: auto; } .profile-image[href]::before, .profile-image[href] .profile-view { transition: .5s ease-in-out all; opacity: 0; pointer-events: none; } .profile-image[href]::before { /* Overlay effect */ z-index: 1; background: var(--profile-image-overlay-background); mix-blend-mode: multiply; -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); } .profile-image[href] .profile-view { /* */ z-index: 2; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; max-width: -moz-max-content; max-width: max-content; height: -moz-min-content; height: min-content; } /* * Profile View text -------------------------------------------------------------------------------- */ /* * Profile Thumbnail, contains profile image, special blurb, whatever can be included in a thumbnail -------------------------------------------------------------------------------- */ .profile-thumbnail { flex: 0 0 auto; align-self: stretch; width: 100%; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; } /* * Profile Additional Details -------------------------------------------------------------------------------- */ .profile-details { /* view profile hit space/ additional details container */ padding-block: 2rem; padding-inline: 1rem; transition: .5s ease-in-out all; color: var(--color-light); opacity: 0; display: flex; justify-content: center; align-items: center; align-content: center; flex-direction: column; text-align: center; pointer-events: none; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; background: var(--color-dark-alt); } .profile-details::before { content: ""; color: var(--color-light); opacity: .8; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: -1; } .profile-details:is(:hover, :focus-within), .profile-pointer-reference:is(:hover, :focus-within) .profile-details { opacity: 1; pointer-events: auto; } .profile-details-body { flex: 1 1; overflow-y: scroll; scrollbar-width: none; } .profile-details-body::-webkit-scrollbar { display: none; } .profile-details-body + .profile-details-footer { padding-top: 2rem; align-self: stretch; } /* * Profile Name -------------------------------------------------------------------------------- */ .profile-info-name { font-size: 28px; color: var(--color-dark); align-content: center; margin-bottom: 5px; } /* * Profile Name -------------------------------------------------------------------------------- */ .profile-info-position { font-size: 14px; line-height: 21px; color: var(--color-primary); letter-spacing: .1em; text-transform: uppercase; font-weight: 800; margin-top: auto; margin-bottom: 0; } /* * includes/repeater-profile -------------------------------------------------------------------------------- */ .profile { background: none; align-self: stretch; } .profile { max-width: 100%; } .profile, .profile-container { display: flex; min-width: 0; flex-direction: column; } .profile-container { width: 100%; flex: 1 1; padding: 0; gap: 25px; } .profile-info { flex: 1 1; } .profile-info { text-align: center; display: flex; flex-direction: column; justify-content: center; } @media only screen and (min-width: 1400px) { .profile-container { gap: 30px; } .profile-info-name { font-size: 30px; } .profile-info-position { font-size: 15px; } } @media only screen and (min-width: 1900px) { .profile-info-name { font-size: 35px; } .profile-info-position { font-size: 16px; } } @media only screen and (max-width: 1199px) { .profile-container { gap: 21px; } } @media only screen and (max-width: 767px) { .profile-container { gap: 15px; } } /* Testimonial https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/repeater/testimonial.md -------------------------------------------------------------------------------- */ /* * Testimonial Stars -------------------------------------------------------------------------------- */ .testimonial-stars { font-size: 94px; margin-bottom: 44px; } @media only screen and (min-width: 768px) { .testimonial-stars { font-size: 102px; margin-bottom: 38px; } } @media only screen and (min-width: 1400px) { .testimonial-stars { font-size: 109px; margin-bottom: 39px; } } @media only screen and (min-width: 1900px) { .testimonial-stars { font-size: 126px; margin-bottom: 87px; } } /* * Testimonial Highlight / Main quote -------------------------------------------------------------------------------- */ .testimonial-highlight { font-size: 22px; line-height: 30px; color: inherit; letter-spacing: -.025em; font-weight: 300; text-align: inherit; margin-top: 0; margin-bottom: 2rem; } @media only screen and (min-width: 768px) { .testimonial-highlight { font-size: 25px; line-height: 35px; } } @media only screen and (min-width: 1200px) { .testimonial-highlight { font-size: 28px; line-height: 38px; } } @media only screen and (min-width: 1400px) { .testimonial-highlight { font-size: 30px; line-height: 40px; margin-bottom: 39px; } } @media only screen and (min-width: 1900px) { .testimonial-highlight { font-size: 35px; line-height: 45px; } } /* * Testimonial Quote Body / other parts of the quote -------------------------------------------------------------------------------- */ .testimonial-quote { margin-top: 0; margin-bottom: 2rem; } /* * Testimonial Divider - Optional -------------------------------------------------------------------------------- */ /* * Testimonial Source + Optional Icon -------------------------------------------------------------------------------- */ .testimonial-source { color: var(--color-light); margin-bottom: 2rem; } .testimonial-source span:nth-last-child(n+2)::after { content: "/"; color: var(--color-primary); letter-spacing: 0em; margin: 0 8px; } @media only screen and (min-width: 1200px) { .testimonial-source { margin-bottom: 45px; } } @media only screen and (min-width: 1400px) { .testimonial-source { margin-bottom: 59px; } } @media only screen and (min-width: 1900px) { .testimonial-source { margin-bottom: 78px; } } .testimonial-source-icon { font-size: 1.25em; } /* * includes/repeater-testimonial -------------------------------------------------------------------------------- */ .testimonial { text-align: center; } .testimonial { max-width: 100%; } .testimonial, .testimonial-container { display: flex; min-width: 0; flex-direction: column; align-items: center; } .testimonial-container { width: 100%; flex: 1 1; } .testimonial :not(.testimonial-divider) + .testimonial-source { margin-top: auto; } :is(.testimonial-highlight, .testimonial-quote):has(+ .testimonial-divider) { margin-bottom: 0; } .testimonial :where(.testimonial-highlight, .testimonial-quote) { margin-left: auto; margin-right: auto; } .testimonial .testimonial-highlight { max-width: 31ch; } .testimonial .testimonial-quote { width: 80%; max-width: 87ch; } .testimonial-button-link.button-palette-default { padding-inline: 26px 23px; letter-spacing: 0; } .testimonial-button-link.button-palette-default:is(:hover, :focus), :where(#footer-form, #sidebar-form) .field-form .gform_footer .button:is(:hover, :focus), .layout-banner .banner-buttons .button.button-palette-default:is(:hover, :focus) { color: var(--color-primary); background-image: linear-gradient(90deg, var(--color-light) 0%, var(--color-light) 100%); } .testimonial-button-link.button-palette-default:is(:hover, :focus)::after, :where(#footer-form, #sidebar-form) .field-form .gform_footer .button:is(:hover, :focus)::after, .layout-banner .banner-buttons .button.button-palette-default:is(:hover, :focus)::after { background-image: url("data:image/svg+xml,<%3Fxml version=\"1.0\" encoding=\"UTF-8\"%3F>"); } /* Video Button - Default (One that doesnt have custom markup in it, just the usual one with a play symbol) https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/helper/video-button.md#css-vars @TODO separate skeleton styles --------------------------------------------------------------- */ .video-button-default { --video-button-size: 80px; --video-button-text-svg-radius-ratio: 1.25; --video-button-glyph-height: .24em; --video-button-glyph-width: .16em; --video-button-glyph-color: currentColor; display: inline-flex; width: 1em; height: 1em; position: relative; font-size: var(--video-button-size); z-index: 0; cursor: pointer; align-items: center; justify-content: center; color: var(--color-light); } .video-button-default:is(.video-button-no-api) { pointer-events: none; } .video-thumbnail .video-button-default { /* customize instances of video button within thumbnail*/ position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; right: 0; margin: auto; --video-button-size: 65px; } @media only screen and (min-width: 1400px) { .video-button-default { --video-button-size: 60px; } .video-thumbnail .video-button-default { --video-button-size: 60px; } } .video-button-default, .video-button-default-image, .video-button-default-text, .video-button-default::before, .video-button-default::after, .video-button-default-thumbnail-markup::after { transition: .25s ease-in-out all; } .video-button-default-image, .video-button-default-text, .video-button-default-text-svg, .video-button-default-text span, .video-button-default::before, .video-button-default::after { position: absolute; margin: auto; pointer-events: none; } .video-button-default-text, .video-button-default-image { top: 0; bottom: 0; left: 0; right: 0; } .video-button-default.video-button-default-no-icon::before, .video-button-default.video-button-default-no-icon::after { content: ""; display: block; } .video-button-default > .wistia_click_to_play { position: static !important; width: auto !important; height: auto !important; } .video-button-default-glyph { letter-spacing: .05em; text-transform: uppercase; font-weight: 700; display: flex; align-items: center; } .video-button-default-glyph::before { content: ""; display: block; width: var(--video-button-glyph-width); height: var(--video-button-glyph-height); background: var(--video-button-glyph-color, currentColor); clip-path: polygon(0 0, 100% 50%, 0 100%); } .video-button-default-glyph:not(.video-button-default-glyph-has-text) { padding-left: calc(var(--video-button-glyph-width) * .25); } .video-button-default-glyph-has-text::before { content: none; } .video-button-default-glyph-text { font-size: var(--video-button-glyph-height); } .video-button-default-text { font-size: .75rem; line-height: 1; color: var(--color-neutral); letter-spacing: .05em; text-transform: uppercase; font-weight: 700; } .video-button-default-text-svg { transform-style: preserve-3d; max-width: none; top: -100%; left: -100%; right: -100%; bottom: -100%; margin: auto; font-size: calc(1em * 1 / var(--video-button-text-svg-radius-ratio)); width: calc(200% * var(--video-button-text-svg-radius-ratio)); height: calc(200% * var(--video-button-text-svg-radius-ratio)); } .video-button-default-text-svg path { transform-origin: center center; } .video-button-default-text-html span { top: 0; bottom: 0; width: -moz-max-content; width: max-content; height: -moz-max-content; height: max-content; } .video-button-default-text-html span:nth-child(odd) { right: 100%; margin-right: 1em; } .video-button-default-text-html span:nth-child(even) { left: 100%; margin-left: 1em; } .video-button-default-image { transition: all .25s ease-in-out; } .video-button-default-image-init, .video-button-default:is(:hover, :focus) .video-button-default-image-hover, .video-pointer-reference:is(:hover, :focus-within) .video-button-default-image-hover { opacity: 1; } .video-button-default-image-hover, .video-button-default:is(:hover, :focus) .video-button-default-image-init, .video-pointer-reference:is(:hover, :focus-within) .video-button-default-image-init { opacity: 0; } .video-button-default.video-button-default-no-icon { /* tru element/background */ /* these are basic styles. overhaul as needed */ background: none; border: 1px solid #fff; } .video-button-default.video-button-default-no-icon, .video-button-default.video-button-default-no-icon::before, .video-button-default.video-button-default-no-icon::after { /* these are basic styles. overhaul as needed */ border-radius: 999em; transform: scale(1); } .video-button-default.video-button-default-no-icon::before { /* fake extra background */ /* these are basic styles. overhaul as needed */ background: linear-gradient(to bottom, var(--color-primary-gradient-start), var(--color-primary-gradient-end)); z-index: -1; top: .07em; bottom: .07em; left: .07em; right: .07em; } .video-button-default.video-button-default-no-icon::after { /* other element for fx */ /* these are basic styles. overhaul as needed */ border: .0125em solid var(--color-accent); top: .15em; bottom: .15em; left: .15em; right: .15em; } .video-button-default.video-button-default-no-icon:is(:hover, :focus), .video-pointer-reference:is(:hover, :focus-within) .video-button-default.video-button-default-no-icon { /* on hover on itself/ containing repeater/ .video-pointer-reference */ --video-button-glyph-color: linear-gradient(to bottom, var(--color-light-alt), var(--color-light)); transform: scale(1.1); } .video-button-default.video-button-default-no-icon:is(:hover, :focus)::before, .video-pointer-reference:is(:hover, :focus-within) .video-button-default.video-button-default-no-icon::before {} .video-button-default.video-button-default-no-icon:is(:hover, :focus)::after, .video-pointer-reference:is(:hover, :focus-within) .video-button-default.video-button-default-no-icon::after {} /* Video Pointer Reference @TODO separate skeleton styles --------------------------------------------------------------- */ .video-pointer-reference { cursor: pointer; } /* Video Thumbnail https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/includes/helper/video-thumbnail.md#css-vars --------------------------------------------------------------- */ .video-thumbnail { --video-thumbnail-aspect-w: 320; --video-thumbnail-aspect-l: 180; --video-thumbnail-overlay-background: rgba(16, 37, 74, .69); --video-thumbnail-overlay-opacity: 0; position: relative; display: block; max-width: 100%; width: 100%; flex: 0 0 auto; background-color: var(--color-light-alt); border-radius: inherit; overflow: hidden; } .video-thumbnail::before { /* aspect ratio keeper */ content: ""; display: block; padding-top: calc(100% * var(--video-thumbnail-aspect-l) / var(--video-thumbnail-aspect-w)); } .video-thumbnail-markup { border-radius: inherit; overflow: hidden; } .video-thumbnail-markup[href]::after, .video-thumbnail-markup.wistia_embed::after { /* overlay */ content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; pointer-events: none; background: var(--video-thumbnail-overlay-background); opacity: var(--video-thumbnail-overlay-opacity); mix-blend-mode: multiply; transition: .25s ease-in-out all; } .video-thumbnail-markup-img img { max-width: none; } .video-thumbnail:is(:hover, :focus), .video-pointer-reference:is(:hover, :focus-within) .video-thumbnail { --video-thumbnail-overlay-opacity: .8; } /* force object fit cover where we need to, im looking at you wistia --------------------------------------------------------------- */ :is(.video-thumbnail-markup, .video-button-image), .video-thumbnail-markup > *, .video-thumbnail-markup img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; position: absolute !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; -o-object-fit: cover !important; object-fit: cover !important; margin: 0 !important; } /* includes/repeater-video --------------------------------------------------------------- */ .video {} .video { max-width: 100%; } .video, .video-container { display: flex; min-width: 0; flex-direction: column; } .video-container { width: 100%; flex: 1 1; } .video-title { flex: 1 1; display: flex; flex-direction: column; justify-content: center; text-align: center; margin-bottom: 0; padding: 2em 0; } /* ================================================================================ * Parts ================================================================================ */ /* Review Us Page https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/parts/review-us.md --------------------------------------------------------------- */ .review-us { text-align: center; } .review-us-columns { --columns-gap-x: 4em; --columns-gap-y: 2em; align-items: flex-end; justify-content: center; } .review-us-columns .button { margin-top: 1em; } .review-us, .review-us-video { margin-top: 3em; } @media only screen and (min-width: 768px) { .review-us-columns { --columns-number: 2; } .review-us-columns .button { width: 100%; } } /* Awards https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/parts/awards.md --------------------------------------------------------------- */ .section-awards .swiper { --swiper-custom-arrow-offset-x: 0; } .section-awards .swiper-custom-buttons { display: flex; justify-content: center; gap: 8px; margin-top: 85px; } .section-awards .swiper-custom-scrollbar { --swiper-scrollbar-bg-color: #877571; bottom: 85px; } .section-awards .swiper-button-prev, .section-awards .swiper-button-next { position: relative; top: unset; left: unset; margin-top: 0; } .section-awards-container { padding: 48px 32px 53px; background: var(--color-light-alt); border-radius: 5px; } .section-awards-header span.h1 { color: var(--color-primary); font-size: 30px; line-height: 35px; letter-spacing: -.025em; text-align: center; max-width: 200px; margin-inline: auto; display: block; margin-bottom: 1rem; } .section-awards-header > p { font-size: 16px; line-height: 20px; text-align: center; margin-bottom: 54px; } .section-awards .awards-title { display: none; } .section-awards .awards .carousel { --carousel-height: 98px; } @media only screen and (min-width: 768px) { .section-awards-container { padding: 78px 67px 74px; } .section-awards-header span.h1 { max-width: -moz-max-content; max-width: max-content; } .section-awards-header > p { max-width: 420px; margin-inline: auto; margin-bottom: 77px; } .section-awards .swiper-custom-scrollbar { bottom: 61px; } .section-awards .swiper-custom-buttons { margin-top: 61px; justify-content: flex-start; } } @media only screen and (min-width: 1200px) { .section-awards-container { padding: 86px 0 57px 66px; display: grid; grid-template-columns: 1fr 505px; gap: 110px; } .section-awards-profile .section-awards-container { grid-template-columns: 100%; } .section-awards-header > p { font-size: 17px; line-height: 22px; text-align: left; } .section-awards-header span.h1 { text-align: left; margin-bottom: 22px; max-width: unset; margin-left: 0; } .section-awards .swiper-custom-buttons { margin-top: 82px; } } @media only screen and (min-width: 1400px) { .section-awards-container { padding: 95px 0 67px 77px; grid-template-columns: 1fr 700px; } .section-awards-header > p { margin-left: 0; max-width: 333px; } .section-awards .awards .carousel { padding-right: 60px; } .section-awards .swiper-custom-buttons { margin-top: 107px; } } @media only screen and (min-width: 1900px) { .section-awards-container { padding: 86px 93px 63px; grid-template-columns: 1fr 880px; } .section-awards-header span.h1 { margin-bottom: 29px; } .section-awards-header > p { max-width: 434px; font-size: 18px; line-height: 24px; } .section-awards .awards .carousel { --carousel-height: 118px; padding-right: 0; } .section-awards .swiper-custom-buttons { margin-top: 115px; } } /* ================================================================================ * Header ================================================================================ */ /* Layout Header https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/layout/header.md Note: The styles will be setup mobile first starting with the smallest device comp where the header menu toggle is no longer visible (usually initially at md/laptop) And then Desktop first starting with the largest device comp where the the header toggle is visible (Usually sm/tablet) Tip: setting up mobile navigation desktop-first starting at sm-max for touch screen styles, and then mobile-first starting at md for desktop styles helps simplify the styles and lessen the need for overrides. Also Tip: Default styles are set based on its sticky state, and then overriding these styles when no scroll has happened yet (.doc-header-not-sticky). This is to keep styles less repetitive and as simple as possible --------------------------------------------------------------- */ /* Layout Header Variables --------------------------------------------------------------- */ /* Tip: placing the css var on :root can allow elements outside of the layout header utilize the variable if needed ie sticky stuff, offsets, jump link scroll etc. */ :root { --layout-header-height: 120px; --layout-header-offset: 0px; --layout-header-logo-height: var(--layout-header-height); } @media only screen and (min-width: 1200px) { :root { /* Non-touch Devices Header Styles Start */ --layout-header-height: 82px; --layout-header-logo-height: var(--layout-header-height); } } @media only screen and (min-width: 1400px) { :root { --layout-header-height: 92px; } } @media only screen and (min-width: 1900px) { :root { --layout-header-height: 113px; } } @media only screen and (max-width: 1199px) { :root { /* Touch Devices Header Styles Start */ --layout-header-height: 82px; } } @media only screen and (max-width: 767px) { :root { --layout-header-height: 140px; --layout-header-logo-height: 82px; } } .doc-header-not-sticky .header-overlay-on-banner {} @media only screen and (min-width: 1200px) { .doc-header-not-sticky .header-overlay-on-banner { /* override logo height apart form the header height on this state only. Adjust as needed */ --layout-header-logo-height: 150px; --layout-header-offset: 20px; } } @media only screen and (min-width: 1400px) { .doc-header-not-sticky .header-overlay-on-banner { --layout-header-offset: 20px; } } @media only screen and (max-width: 1199px) { :not(.doc-header-menu-open).doc-header-not-sticky .header-overlay-on-banner { /* Touch Devices Header Styles Start */ /* offset: one top value might work for the design. NOTE: adjust ilawyer alertbar settings accordingly if enabled (dynamic margin, offset to bottom on touch devices, position, etc.) */ --layout-header-offset: 0px; } } .doc-header-menu-open {} @media only screen and (max-width: 1199px) { .doc-header-menu-open {} } /* Offset the scroll by the header height so the element a jump link scrolls to us not underneath the header but instead compensates to the header height and scrolls just next to it --------------------------------------------------------------- */ html, body { scroll-padding: calc(var(--layout-header-height) + var(--layout-header-offset, 0px)) !important; } .banner-has-background-image.header-overlay-on-banner .has-layout-header-offset {} @media only screen and (min-width: 1200px) { .banner-has-background-image.header-overlay-on-banner .has-layout-header-offset::before { content: ""; flex: 0 0 auto; grid-column: 1/-1; height: var(--layout-header-height); display: block; width: 100%; } } /* Layout Header Itself --------------------------------------------------------------- */ .layout-header { /* Note: position must be set initially, NOT based on whether or not a scroll has occured (sticky vs not-sticky class). This is to prevent layout jumps on scroll */ position: sticky; top: var(--layout-header-offset, 0px); left: 0; z-index: 999; width: 100%; background-color: var(--scheme-bg-contrast, var(--color-light)); color: var(--scheme-fg, var(--color-dark)); transition: .25s top ease-in-out; box-shadow: 0 0 10px -5px rgba(0, 0, 0, .8); } @media only screen and (min-width: 1200px) { .layout-header {} .layout-header-container { --container-gutter: 40px; } } @media only screen and (max-width: 1199px) { .layout-header {} } .doc-header-not-sticky .header-overlay-on-banner .layout-header {} @media only screen and (min-width: 1200px) { .doc-header-not-sticky .header-overlay-on-banner .layout-header { /* remove background */ background: transparent; box-shadow: none; } } @media only screen and (max-width: 1199px) { :not(.doc-header-menu-open).doc-header-not-sticky .header-overlay-on-banner .layout-header {} } .doc-header-not-sticky .layout-header {} @media only screen and (max-width: 767px) { .doc-header-not-sticky .layout-header { /* reset offset when no scrolling yet */ --layout-header-offset: 0; } } .doc-header-menu-open .layout-header {} .header-overlay-on-banner .layout-header {} @media only screen and (min-width: 1200px) { .header-overlay-on-banner .layout-header { position: fixed; } } /* Header Blocks --------------------------------------------------------------- */ :where(.header-block, .header-blocks) { /* uncomment if flex/grid is causing any issues*/ min-width: 0; } .header-blocks { -moz-column-gap: 1rem; column-gap: 1rem; row-gap: 0rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; min-height: var(--layout-header-height); } @media only screen and (min-width: 768px) { .header-blocks { gap: 30px; justify-content: flex-end; } } @media only screen and (min-width: 1200px) { .header-blocks { /* Non-touch Devices Header Styles Start */ display: grid; grid-template-areas: "logo main"; justify-content: space-between; } } @media only screen and (min-width: 1400px) { .header-blocks { display: flex; } } @media only screen and (max-width: 1199px) { .header-blocks { /* Touch Devices Header Styles Start */ margin-inline: calc(var(--container-gutter, 0px) * -1); } } @media only screen and (max-width: 767px) { .header-blocks { -moz-column-gap: 0; column-gap: 0; } } .doc-header-not-sticky .header-overlay-on-banner .header-blocks {} @media only screen and (max-width: 1199px) { :not(.doc-header-menu-open).doc-header-not-sticky .header-overlay-on-banner .header-blocks {} } .doc-header-not-sticky .header-blocks {} .header-blocks .doc-header-menu-open {} /* Header Logo --------------------------------------------------------------- */ .header-logo { grid-area: logo; padding-block: 1rem; height: var(--layout-header-logo-height); flex: 0 0 auto; position: relative; } .header-logo .logo-wrapper-br, .header-logo .logo-wrapper-before-sticky { /* hide possible variations of logo */ display: none; } @media only screen and (min-width: 768px) { .header-logo { order: 1; margin-right: auto; } } @media only screen and (min-width: 1200px) { .header-logo { margin-right: unset; order: unset; padding-block: 10px; } } @media only screen and (min-width: 1400px) { .header-logo { padding-block: 1rem; } } @media only screen and (max-width: 1199px) { .header-logo { /* Touch Devices Header Styles Start */ padding-block: 11px 9px; padding-inline: var(--container-gutter, 1rem); } } @media only screen and (max-width: 767px) { .header-logo { padding-inline: 0; padding-block: 1rem .5rem; width: 100%; max-width: 100%; } .header-logo .logo-wrapper-br { /* show */ display: block; } .header-logo .logo-wrapper-br ~ .logo-wrapper-nonbr { display: none; } } .doc-header-not-sticky .header-overlay-on-banner .header-logo {} @media only screen and (min-width: 1200px) { .doc-header-not-sticky .header-overlay-on-banner .header-logo { background-color: transparent; } .doc-header-not-sticky .header-overlay-on-banner .header-logo .logo-wrapper-sticky { /* hide default logo on before sticky */ display: none; } .doc-header-not-sticky .header-overlay-on-banner .header-logo .logo-wrapper-before-sticky { /* show */ display: block; } } @media only screen and (max-width: 1199px) { :not(.doc-header-menu-open).doc-header-not-sticky .header-overlay-on-banner .header-logo {} } .doc-header-not-sticky .header-logo {} .doc-header-menu-open .header-logo {} /* Header Toggle/s - Scaffolding for usual box buttons --------------------------------------------------------------- */ .header-toggle { width: 59px; align-self: stretch; display: flex; align-items: center; justify-content: center; flex-direction: column; flex: 0 0 auto; } @media only screen and (min-width: 768px) { .header-toggle { width: 82px; } } @media only screen and (min-width: 1200px) { .header-toggle {} } @media only screen and (max-width: 1199px) { .header-toggle {} } .header-toggle-container { background: var(--color-dark-alt); display: flex; align-items: center; justify-content: flex-end; padding-left: 20px; } @media only screen and (min-width: 768px) { .header-toggle-container { background: none; padding-left: 0; order: 2; } } @media only screen and (min-width: 1200px) { .header-toggle-container { order: 1; } } .header-toggle-es { width: auto; height: 25px; border-radius: 18px; border: 1px solid var(--color-light); padding: 6px 8px; align-self: unset; font-size: 11px; font-weight: 700; letter-spacing: -.025em; line-height: 12px; color: #fff; background: none; position: relative; flex-direction: row; transition: all .3s ease-in-out; } .header-toggle-es:hover { color: var(--color-primary); border-color: currentColor; } .header-toggle-es:hover::after { border-color: var(--color-primary); } @media only screen and (min-width: 768px) { .header-toggle-es { color: var(--color-dark); border-color: var(--color-dark); font-size: 12px; height: 28px; padding-inline: 14px; } .header-toggle-es::after { border-color: var(--color-dark); margin-left: 10px; } } @media only screen and (min-width: 1200px) { .header-toggle-es { font-size: 14px; line-height: 16px; height: 30px; padding-inline: 1rem; } } .doc-header-not-sticky .header-overlay-on-banner .header-toggle {} @media only screen and (max-width: 1199px) { :not(.doc-header-menu-open).doc-header-not-sticky .header-overlay-on-banner .header-toggle {} } .doc-header-not-sticky .header-toggle {} @media only screen and (max-width: 1199px) { .doc-header-not-sticky .header-toggle {} } .doc-header-menu-open .header-toggle {} @media only screen and (max-width: 1199px) { .doc-header-menu-open .header-toggle {} } .doc-header-menu-open.doc-header-not-sticky .header-toggle {} @media only screen and (max-width: 1199px) { .doc-header-menu-open.doc-header-not-sticky .header-toggle {} } /* Header Toggle - Menu --------------------------------------------------------------- */ .header-toggle-menu { grid-area: toggle-menu; --layout-header-menu-toggle-open-offset: 0px; background: var(--color-primary) linear-gradient(to bottom, var(--color-primary-gradient-start), var(--color-primary-gradient-end)); color: var(--color-light); position: relative; z-index: 99999; top: 0; transition: .375s all ease-in-out; order: 99; } .header-toggle-menu.open { background: var(--color-dark-alt); color: var(--color-light); top: -75px; } @media only screen and (min-width: 768px) { .header-toggle-menu.open { top: 7px; } } .header-toggle-menu-icon { --fancy-icon-menu-width: 32px; --fancy-icon-menu-height: 21px; --fancy-icon-menu-bar-height: 3px; } .header-toggle-menu.open .header-toggle-menu-icon { color: inherit; } .header-toggle-menu-label { font-size: .75rem; font-family: var(--font-accent); text-transform: uppercase; font-style: normal; font-weight: 700; text-align: center; margin-top: .5em; transition: .375s all ease-in-out; } .header-toggle-menu.open .header-toggle-menu-label { margin-top: -1em; opacity: 0; } .header-toggle-menu.open .header-toggle-menu-label:nth-last-child(2) { display: none; } .header-toggle-menu:not(.open) .header-toggle-menu-label:nth-child(3) { display: none; } @media only screen and (min-width: 768px) { .header-toggle-menu { order: 4; } .header-toggle-menu-icon { --fancy-icon-menu-width: 44px; --fancy-icon-menu-height: 26px; --fancy-icon-menu-bar-height: 4px; } } @media only screen and (min-width: 1200px) { .header-toggle-menu {} } @media only screen and (max-width: 1199px) { .header-toggle-menu {} } @media only screen and (max-width: 767px) { .header-toggle-menu { --layout-header-menu-toggle-open-offset: calc(var(--layout-header-logo-height) * -1); } } .doc-header-not-sticky .header-overlay-on-banner .header-toggle-menu {} @media only screen and (max-width: 1199px) { :not(.doc-header-menu-open).doc-header-not-sticky .header-overlay-on-banner .header-toggle-menu {} } .doc-header-not-sticky .header-toggle-menu {} .doc-header-menu-open .header-toggle-menu {} .doc-header-menu-open.doc-header-not-sticky .header-toggle-menu {} /* Header Toggle - Other Block toggles --------------------------------------------------------------- */ @media only screen and (min-width: 1200px) { .header-toggle- {} } @media only screen and (max-width: 1199px) { .header-toggle- {} } .doc-header-not-sticky .header-overlay-on-banner .header-toggle- {} @media only screen and (max-width: 1199px) { :not(.doc-header-menu-open).doc-header-not-sticky .header-overlay-on-banner .header-toggle- {} } .doc-header-not-sticky .header-toggle- {} .doc-header-menu-open .header-toggle- {} .doc-header-menu-open.doc-header-not-sticky .header-toggle- {} /* Header Main --------------------------------------------------------------- */ .header-main { grid-area: main; display: flex; justify-content: flex-end; flex: 1 1; } @media only screen and (min-width: 768px) { .header-main { order: 3; max-width: -moz-max-content; max-width: max-content; } } @media only screen and (min-width: 1200px) { .header-main { /* Non-touch Devices Header Styles Start */ flex-direction: row; justify-content: flex-end; order: unset; max-width: unset; } .header-main:has(.header-nav) { min-height: var(--layout-header-height); } } @media only screen and (min-width: 1200px) and (max-width: 1899px) { .header-main { flex: 0 0 auto; flex-direction: column; align-items: flex-end; justify-content: flex-end; align-self: center; gap: 0; } } @media only screen and (max-width: 1199px) { .header-main {} } @media only screen and (max-width: 767px) { .header-main { min-height: calc(var(--layout-header-height) - var(--layout-header-logo-height)); min-width: auto; width: 100%; background: var(--color-dark-alt); order: 9; } } .doc-header-not-sticky .header-overlay-on-banner .header-main {} @media only screen and (min-width: 1200px) { .doc-header-not-sticky .header-overlay-on-banner .header-main { align-self: self-start; } } @media only screen and (max-width: 1199px) { :not(.doc-header-menu-open).doc-header-not-sticky .header-overlay-on-banner .header-main {} } .doc-header-not-sticky .header-main {} .doc-header-menu-open .header-main {} /* Header CTA --------------------------------------------------------------- */ .header-cta { grid-area: cta; display: flex; justify-content: center; flex-direction: column; align-items: flex-end; text-align: right; gap: 1rem; } @media only screen and (min-width: 1200px) { .header-cta { /* Non-touch Devices Header Styles Start */ flex-direction: column; align-items: flex-end; gap: 0; } } @media only screen and (min-width: 1200px) and (max-width: 1899px) { .header-cta { flex-direction: row-reverse; align-items: center; order: -1; padding-inline: 0; gap: 1rem; align-self: self-end; } .header-cta-container { display: flex; align-items: center; gap: 1rem; } } @media only screen and (min-width: 1400px) { .header-cta { flex-direction: row-reverse; align-items: center; gap: 37px; } } @media only screen and (min-width: 1900px) { .header-cta { margin-bottom: 0; } } @media only screen and (max-width: 1199px) { .header-cta { /* Touch Devices Header Styles Start */ gap: 0; } } @media only screen and (max-width: 767px) { .header-cta { text-align: right; align-items: flex-end; flex: 1 1; padding-block: 10px; padding-right: 18px; } } .doc-header-not-sticky .header-overlay-on-banner .header-cta {} @media only screen and (max-width: 1199px) { :not(.doc-header-menu-open).doc-header-not-sticky .header-overlay-on-banner .header-cta {} } .doc-header-not-sticky .header-cta {} .doc-header-menu-open .header-cta {} /* Header CTA - Text --------------------------------------------------------------- */ .header-cta-text { font-size: 12px; line-height: 14px; font-family: var(--font-primary); color: var(--color-light); text-transform: none; font-weight: bold; } .header-cta-text > span:nth-child(n+2)::before { content: "●︎"; color: var(--color-primary); letter-spacing: 0em; margin: 0 .5em; } @media only screen and (min-width: 768px) { .header-cta-text { /* Non-touch Devices Header Styles Start */ color: var(--color-dark); font-size: 14px; line-height: 16px; } } @media only screen and (min-width: 1200px) { .header-cta-text { order: 2; } } @media only screen and (min-width: 1900px) { .header-cta-text { font-size: 16px; } } @media only screen and (max-width: 1199px) { .header-cta-text {} } .doc-header-not-sticky .header-overlay-on-banner .header-cta-text {} @media only screen and (min-width: 1200px) { .doc-header-not-sticky .header-overlay-on-banner .header-cta-text { color: inherit; } } @media only screen and (max-width: 1199px) { :not(.doc-header-menu-open).doc-header-not-sticky .header-overlay-on-banner .header-cta-text {} } .doc-header-not-sticky .header-cta-text {} .doc-header-menu-open .header-cta-text {} /* Header Number/s --------------------------------------------------------------- */ .header-numbers { display: flex; gap: 1rem; } .header-numbers .number-link { font-size: 20px; line-height: 24px; color: var(--color-primary); letter-spacing: -.01em; font-weight: 700; } @media only screen and (min-width: 768px) { .header-numbers .number-link { font-size: 25px; line-height: 30px; } } @media only screen and (min-width: 1200px) { .header-numbers { /* Non-touch Devices Header Styles Start */ order: 3; } } @media only screen and (min-width: 1900px) { .header-numbers .number-link { font-size: 28px; line-height: 33px; } } @media only screen and (max-width: 1199px) { .header-numbers {} } .doc-header-not-sticky .header-overlay-on-banner .header-numbers {} @media only screen and (max-width: 1199px) { :not(.doc-header-menu-open).doc-header-not-sticky .header-overlay-on-banner .header-numbers {} } .doc-header-not-sticky .header-numbers {} .doc-header-menu-open .header-numbers {} /* Header Navigation --------------------------------------------------------------- */ .header-nav { grid-area: nav; --layout-header-menu-touch-offset: 0px; } @media only screen and (min-width: 1200px) { .header-nav { /* Non-touch Devices Header Styles Start */ display: flex; justify-content: center; align-self: stretch; flex: 1 1; } } @media only screen and (min-width: 1200px) and (max-width: 1899px) { .header-nav { justify-content: flex-end; flex: 0 0 auto; } } @media only screen and (max-width: 1199px) { .header-nav { /* Touch Devices Header Styles Start */ --layout-header-menu-touch-offset: 0; transition: top .25s ease-in-out, left .5s ease-in-out, opacity .5s ease-in-out; width: 100%; overflow-x: hidden; overflow-y: scroll; background: rgba(0, 0, 0, .8); display: flex; flex-wrap: wrap; opacity: 0; z-index: 9999; scrollbar-width: none; position: fixed; bottom: 0; left: 100%; top: var(--layout-header-menu-touch-offset); box-shadow: inset 0 5px 10px -5px rgba(0, 0, 0, .8); } .header-nav::-webkit-scrollbar { display: none; } } @media only screen and (max-width: 767px) { .header-nav { --layout-header-menu-touch-offset: 0; } } .doc-header-not-sticky .header-overlay-on-banner .header-nav {} @media only screen and (min-width: 1200px) { .doc-header-not-sticky .header-overlay-on-banner .header-nav { color: inherit; align-self: flex-end; } } @media only screen and (min-width: 1200px) and (max-width: 1899px) { .doc-header-not-sticky .header-overlay-on-banner .header-nav { align-self: stretch; } } @media only screen and (max-width: 1199px) { :not(.doc-header-menu-open).doc-header-not-sticky .header-overlay-on-banner .header-nav {} } .doc-header-not-sticky .header-nav {} .doc-header-menu-open .header-nav {} @media only screen and (max-width: 1199px) { .doc-header-menu-open .header-nav { left: 0%; opacity: 1; } } .doc-header-menu-open.doc-header-not-sticky .header-nav {} /* Header Navigation Menu --------------------------------------------------------------- */ .header-nav .menu { --layout-header-menu-touch-menu-padding-x: 60px; --layout-header-menu-nontouch-dropdown-padding-x: 1.875rem; --layout-header-menu-nontouch-current-height: 3px; font-size: 1rem; line-height: 1; font-family: var(--font-accent); color: var(--color-dark); font-weight: 700; } .header-nav .menu li { display: flex; flex-wrap: wrap; } .header-nav .menu li, .header-nav .menu li > a { position: relative; } .header-nav .menu li > a { padding-block: 21px; display: inline-flex; align-items: center; transition: .125s ease-in-out all; gap: .5em; flex: 1 0; justify-content: flex-start; } .header-nav .menu li:last-child, .header-nav .menu li:last-child > a { /* disable border for last items */ border: none; } .header-nav .menu li:is(.menu-item-has-children) > a::after { display: inline-block; align-self: center; flex: 0 0 auto; content: ""; font-size: .5rem; transform-origin: 67% 67%; width: 1em; height: 1em; border: 2px solid currentColor; border-top: 0; border-left: 0; transform: rotate(45deg); } .header-nav .menu ul { background-color: var(--color-light); color: var(--color-dark); } .header-nav .menu ul:is(.menu-item-has-children) > a::after { color: inherit; } @media only screen and (min-width: 1200px) { .header-nav .menu { --layout-header-menu-nontouch-dropdown-padding-x: 45px; gap: 30px; display: flex; justify-content: space-between; position: relative; } .header-nav .menu li:is(:hover, :focus-within) ~ li > ul, .header-nav .menu li:not(:hover, :focus-within) > ul { display: none; } .header-nav .menu li { position: relative; padding-left: var(--layout-header-menu-nontouch-dropdown-padding-x); padding-right: var(--layout-header-menu-nontouch-dropdown-padding-x); } .header-nav .menu li > a { flex: 1 1; justify-content: flex-start; } .header-nav .menu li:is(:hover, :focus-within) > a { /* activated styles upon interaction for nontouch */ color: var(--color-accent); } .header-nav .menu li:is(:hover, :focus-within):is(.menu-item-has-children) > a::after { background-image: url("data:image/svg+xml,<%3Fxml version=\"1.0\" encoding=\"UTF-8\"%3F>"); } .header-nav .menu li:is(.menu-item-special) > ul { width: 40em; right: -4em; left: auto; } .header-nav .menu li:is(.menu-item-special) > ul li { flex-direction: column; border-block: 0; } .header-nav .menu li:is(.menu-item-special) > ul li.view-all { align-items: flex-end; } .header-nav .menu li:is(.menu-item-special) > ul li ul { display: block !important; position: static; background: none; box-shadow: none; color: inherit; padding: 0; width: auto; -moz-column-count: 3; column-count: 3; gap: var(--layout-header-menu-touch-menu-padding-x); } .header-nav .menu li:is(.menu-item-special) > ul li ul li > a { padding-block: .5em; } .header-nav .menu li:is(.menu-item-special) > ul > li { margin-bottom: 2rem; } .header-nav .menu ul { width: 318px; padding-block: 30px; top: 0; left: 100%; position: absolute; box-shadow: 0 3px 6px rgba(0, 0, 0, .16); z-index: 1; } .header-nav .menu ul li > a { padding-block: 12px; } .header-nav .menu ul li:is(.menu-item-has-children) > a::after { transform-origin: center center; transform: rotate(-45deg); transform: none; color: inherit; content: ""; width: 23px; height: 12px; background-image: url("data:image/svg+xml,<%3Fxml version=\"1.0\" encoding=\"UTF-8\"%3F>"); background-repeat: no-repeat; background-size: contain; margin-left: 12px; border: none; } .header-nav .menu > li { flex-direction: row; padding-left: 0; padding-right: 0; } .header-nav .menu > li > a { padding-block: .875rem; border: none; } .header-nav .menu > li:is(:hover, :focus-within), .header-nav .menu > li:is(:hover, :focus-within) > a { /* undo fanciness from non-media query scaffolding for top level menu item and its child a tag */ border: none; background: none; color: inherit; margin: 0; } .header-nav .menu > li:is(:hover, :focus-within)::before {} .header-nav .menu > li:is(.current-menu-item, .current-menu-ancestor)::before {} .header-nav .menu > li:is(.current-menu-item, .current-menu-ancestor, :hover, :focus-within) > a { color: var(--color-primary); } .header-nav .menu > li:is(.current-menu-item, .current-menu-ancestor, :hover, :focus-within)::before { /* current menu item indicator if active */ width: 100%; } .header-nav .menu > li:is(.menu-item-has-children) > a::after { color: var(--color-primary); } .header-nav .menu > li > ul { top: 100%; left: 0; } .header-nav .menu > li > ul ul { background-color: var(--color-light); color: var(--color-dark); } .header-nav .menu ul ul ul { left: calc(var(--layout-header-menu-nontouch-dropdown-padding-x) * 2); top: 100%; transform: none; } } @media only screen and (min-width: 1200px) and (max-width: 1899px) { .header-nav .menu > li:nth-last-child(-n+2) > ul { left: auto; transform: none; right: 0; } .header-nav .menu > li:nth-last-child(-n+2) > ul ul { right: calc(var(--layout-header-menu-nontouch-dropdown-padding-x) * 2); left: auto; } } @media only screen and (min-width: 1400px) { .header-nav .menu { gap: 45px; } } @media only screen and (max-width: 1199px) { .header-nav .menu { --layout-header-menu-touch-menu-padding-x: 118px; background: var(--color-dark-alt); color: var(--color-light); padding-top: 6rem; padding-bottom: 6rem; width: 100%; box-shadow: inherit; margin-left: auto; max-width: 100%; } .header-nav .menu li:not(.open) > ul { display: none; } .header-nav .menu li { padding-left: var(--layout-header-menu-touch-menu-padding-x); padding-right: var(--layout-header-menu-touch-menu-padding-x); } .header-nav .menu li ul { margin-left: calc(var(--layout-header-menu-touch-menu-padding-x) * -1); margin-right: calc(var(--layout-header-menu-touch-menu-padding-x) * -1); } .header-nav .menu li > a { text-align: center; justify-content: center; } .header-nav .menu li > a { flex: 1 0 100%; justify-content: flex-start; } .header-nav .menu li:is(:hover, :focus-within, .open) > a { /* activated styles upon interaction for touch */ color: var(--color-primary); } .header-nav .menu li:is(.open) { border-bottom: 0; } .header-nav .menu li:is(.open) > a { border-bottom: 0; } .header-nav .menu ul { margin-top: 1em; } .header-nav .menu li:nth-last-child(n+2) > ul { margin-bottom: 1rem; } .header-nav .menu ul { background-color: var(--color-dark); color: var(--color-light); color: inherit; padding-block: 2rem; align-self: stretch; order: 99; flex: 1 0 100%; } .header-nav .menu ul li > a { padding-block: 9px; } .header-nav .menu > li > ul ul { background-color: rgba(0, 0, 0, .05); } } @media only screen and (max-width: 767px) { .header-nav .menu { max-width: 100%; } .header-nav .menu li > a { justify-content: flex-start; } } .doc-header-not-sticky .header-overlay-on-banner .header-nav .menu {} @media only screen and (min-width: 1200px) { .doc-header-not-sticky .header-overlay-on-banner .header-nav .menu:after { content: ""; display: block; height: 1px; width: 100vw; background: currentColor; opacity: .2; position: absolute; pointer-events: none; top: 100%; } } @media only screen and (max-width: 1199px) { :not(.doc-header-menu-open).doc-header-not-sticky .header-overlay-on-banner .header-nav .menu {} } .doc-header-not-sticky .header-nav .menu {} .doc-header-menu-open .header-nav .menu {} .doc-header-menu-open.doc-header-not-sticky .header-nav .menu {} /* Header Form --------------------------------------------------------------- */ #header-form { grid-area: form; } #header-form .gform_wrapper { position: relative; } #header-form .gform_title:last-child { margin-bottom: 0; } #header-form .gform_description { max-width: 80ch; } #header-form .gform_body { margin-left: auto; margin-right: auto; } #header-form .gform_footer { justify-content: center; text-align: center; } #header-form .gfield.gfield--type-submit { /* dont stretch flex button */ align-self: flex-start; } @media only screen and (max-width: 1199px) { #header-form .gform_fields .gfield:not(.gfield-width-full) { /* fix gravity forms from deciding to undo the grid columns on mobile instead of tablet now */ grid-column: 1/-1; } } /* ================================================================================ * Banner ================================================================================ */ /* Layout Banner https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/layout/banner.md --------------------------------------------------------------- */ /* Layout Banner Variables --------------------------------------------------------------- */ /* In case banner is also as crazy as the header */ /* Tip: placing the css var on :root can allow elements outside of the layout header utilize the variable if needed ie sticky stuff, offsets, jump link scroll etc. */ :root { --layout-banner-offset: 0px; } .banner-has-background-image {} .banner-no-background-image {} .has-banner {} .has-banner .has-layout-banner-offset {} .has-banner .has-layout-banner-offset:is(.layout-banner .layout-banner-offset-element, .layout-banner .layout-banner-offset-element *)::after { content: ""; flex: 0 0 auto; grid-column: 1/-1; height: var(--layout-banner-offset, 0px); display: block; width: 100%; } .has-banner .layout-banner-offset-element:is(.layout-banner:not(:last-child) *) { margin-bottom: calc(var(--layout-banner-offset, 0px) * -1); } /* Layout Banner Itself --------------------------------------------------------------- */ @media only screen and (max-width: 767px) { .layout-banner {} .layout-banner-container { --container-gutter: 10px; } } .layout-banner .banner-background .responsive-background-bg { background-position: center top; } .banner-has-background-image .layout-banner { /* Styles specific for when banner has background image */ background-color: var(--scheme-bg-contrast, var(--color-dark-alt)); color: var(--scheme-fg, var(--color-light)); } .banner-no-background-image .layout-banner {} .banner-no-background-image .layout-banner .banner-main { padding-block: 65px; } .banner-no-background-image .layout-banner .banner-main-container { --container-gutter: 30px; } .banner-no-background-image .layout-banner .banner-main .primary-heading { font-size: 35px; line-height: 50px; } .banner-no-background-image .layout-banner .banner-main .primary-heading.fancy-border::after { display: none; } .banner-no-background-image .layout-banner .banner-main-block { width: 100%; } .banner-no-background-image .layout-banner .banner-main .banner-body-block .button { --button-height: 45px; font-size: 14px; } .banner-no-background-image .layout-banner .banner-main .banner-body-block .button:is(:hover, :focus) { background-image: linear-gradient(to bottom, var(--color-dark-alt) 0%, var(--color-dark-alt) 100%); color: #fff; } .banner-no-background-image .layout-banner .banner-main .banner-body-block .button:is(:hover, :focus)::after { background-image: url("data:image/svg+xml,<%3Fxml version=\"1.0\" encoding=\"UTF-8\"%3F>"); } .banner-no-background-image .layout-banner .banner-main .banner-body-blocks { gap: 15px; border-top: 2px solid var(--color-primary); padding-top: 15px; width: 100%; } @media only screen and (min-width: 768px) { .banner-no-background-image .layout-banner .banner-main { padding-block: 85px; } .banner-no-background-image .layout-banner .banner-main-container { --container-gutter: 80px; } .banner-no-background-image .layout-banner .banner-main .banner-body-blocks { display: flex; justify-content: space-between; flex-direction: row; border-top: 1px solid #877571; padding-top: 0; } .banner-no-background-image .layout-banner .banner-main .banner-buttons { margin-top: 16px; } .banner-no-background-image .layout-banner .banner-main .banner-text { position: relative; padding-top: 16px; } .banner-no-background-image .layout-banner .banner-main .banner-text::before { content: ""; width: 100%; position: absolute; top: -1.5px; left: 0; right: 0; height: 2px; background: var(--color-primary); z-index: 1; } .banner-no-background-image .layout-banner .banner-main .primary-heading { font-size: 40px; line-height: 50px; } } @media only screen and (min-width: 1200px) { .banner-no-background-image .layout-banner .layout-banner-grid { grid-template-columns: 1fr; } .banner-no-background-image .layout-banner .banner-main { padding-block: 120px 101px; } .banner-no-background-image .layout-banner .banner-main .primary-heading { font-size: 45px; line-height: 50px; } } @media only screen and (min-width: 1400px) { .banner-no-background-image .layout-banner .banner-main { padding-block: 129px 110px; } .banner-no-background-image .layout-banner .banner-main-container { --container-gutter: 113px; } .banner-no-background-image .layout-banner .banner-main .primary-heading { font-size: 50px; line-height: 50px; } .banner-no-background-image .layout-banner .banner-main .banner-buttons { margin-top: 22px; } } @media only screen and (min-width: 1900px) { .banner-no-background-image .layout-banner .banner-main { padding-block: 141px 131px; } .banner-no-background-image .layout-banner .banner-main-container { --container-gutter: 260px; } } @media only screen and (max-width: 767px) { .banner-no-background-image .layout-banner .banner-main-container { max-width: 400px !important; } } /* Banner Main --------------------------------------------------------------- */ .banner-main { padding-block: 2rem; display: flex; flex-direction: column; justify-content: center; } .banner-main-container { --container-gutter: 20px; } .banner-main-blocks { display: grid; grid-template-columns: 100%; justify-items: center; align-items: center; gap: 3rem; } .banner-main-block, .banner-main-blocks { min-width: 0; } .banner-main-block:only-child { flex: 1 1; grid-column: 1/-1; grid-row: 1/-1; justify-self: center; } @media only screen and (min-width: 1200px) { .banner-main { padding-block: 5rem 4rem; } .banner-main-blocks { grid-template-columns: 1fr auto; } } .banner-has-background-image .banner-main { /* Styles specific for when banner has background image */ padding-block: 22px 42px; min-height: 180px; } @media only screen and (min-width: 768px) { .banner-has-background-image .banner-main { min-height: 360px; } } @media only screen and (min-width: 1200px) { .banner-has-background-image .banner-main { padding-block: 3rem; min-height: 630px; } } .banner-has-background-image.header-overlay-on-banner .banner-main {} .banner-no-background-image .banner-main {} /* Banner Body --------------------------------------------------------------- */ .banner-body { text-align: center; } .banner-body, .banner-body-blocks { display: flex; flex-direction: column; align-items: center; } .banner-body-blocks { gap: 2.125rem; } @media only screen and (min-width: 1400px) { .banner-body-blocks { gap: 20px; } } .banner-has-background-image .banner-body {} .banner-has-background-image:not(.banner-has-background-image-customized.ilaw-default) .banner-body {} .banner-no-background-image .banner-body {} /* Global Banner Text --------------------------------------------------------------- */ .banner-text { max-width: 100%; } .banner-has-background-image .banner-text {} .banner-no-background-image .banner-text {} /* Global Secondary Heading --------------------------------------------------------------- */ .secondary-heading { font-size: 14px; line-height: calc(1em + 6px); font-family: var(--font-primary); color: inherit; letter-spacing: -.025em; text-transform: capitalize; font-style: normal; font-weight: 700; text-align: inherit; margin-bottom: 38px; } .secondary-heading em { /* emphasized words */ color: var(--color-accent); letter-spacing: 0em; font-style: normal; } .secondary-heading::before, .secondary-heading > span::before { color: var(--color-primary); font-style: normal; } @media only screen and (min-width: 768px) { .secondary-heading > span { display: inline-block; } .secondary-heading > span:nth-child(n+2)::before { content: "●︎"; margin-inline: 12px; font-size: .7em; } } @media only screen and (max-width: 1199px) { .secondary-heading > span { display: inline-block; } } @media only screen and (max-width: 767px) { .secondary-heading > span { display: inline-block; } .secondary-heading > span:not(:first-child)::before { content: "●︎"; margin-inline: 0 10px; } .secondary-heading > span:not(:last-child)::before { margin-left: 10px; } } .banner-has-background-image .secondary-heading {} .banner-no-background-image .secondary-heading {} .secondary-heading.secondary-heading-default {} .secondary-heading.secondary-heading-blog {} /* Global Primary Heading --------------------------------------------------------------- */ /* Note: default styles are set to custom internal templates w/ no banner background images (Case Results, Testimonials, etc.) to reduce repetitive styles and or lengthy selectors */ .primary-heading { /* Global Styles / custom page template heading styles (Testimonials Grid, Attorney Grid, etc.) */ font-size: 3rem; line-height: calc(1em + 5px); margin-bottom: 0; } .primary-heading em { /* emphasized words */ color: var(--color-accent); font-style: normal; } @media only screen and (min-width: 768px) { .primary-heading { font-size: 4rem; } } @media only screen and (min-width: 1200px) { .primary-heading { font-size: 5rem; } } .primary-heading.primary-heading-default { /* Styles specific for default template primary heading (Single Post, Single Page, Possibly Blog/ Archive etc.) */ font-size: 40px; line-height: 40px; font-weight: 600; max-width: 264px; margin-inline: auto; } .primary-heading.primary-heading-default > span { margin-top: 13px; display: block; font-size: 14px; line-height: 20px; font-weight: 500; } @media only screen and (min-width: 768px) { .primary-heading.primary-heading-default { font-size: 70px; line-height: 70px; max-width: calc(100% - 140px); text-align: left; } .primary-heading.primary-heading-default > span { margin-top: 8px; font-size: 18px; line-height: 26px; letter-spacing: 0; max-width: 400px; } } @media only screen and (min-width: 1200px) { .primary-heading.primary-heading-default { font-size: 4rem; } } .primary-heading.primary-heading-default-h1 {} .primary-heading.primary-heading-blog {} .primary-heading.primary-heading-blog-title {} .layout-banner .primary-heading {} .primary-heading.h1-fallback-heading { /* Styles specific for when banner does not exist/ rendered as a helper class for the fallback h1 */ display: inline-block; margin-bottom: 1em; } .banner-has-background-image .primary-heading { /* Styles specific for when banner has background image */ color: inherit; animation-delay: 1.5s; } .layout-banner .banner-has-background-image .primary-heading { text-shadow: 0 2px .125em var(--scheme-bg, var(--color-dark)); } .banner-no-background-image .primary-heading {} /* Banner video (Optional depending on comps) --------------------------------------------------------------- */ .banner-video .video-thumbnail { --video-thumbnail-aspect-w: 172; --video-thumbnail-aspect-l: 109; width: calc(var(--video-thumbnail-aspect-w) * 1px); margin-inline: auto; } .banner-video-cta.video-button { display: block; } @media only screen and (min-width: 768px) { .banner-video .video-thumbnail { --video-thumbnail-aspect-w: 217; --video-thumbnail-aspect-l: 138; } } @media only screen and (min-width: 1200px) { .banner-video { order: 99; } } @media only screen and (min-width: 1400px) { .banner-video .video-thumbnail { margin-inline: 0; } } .banner-has-background-image .banner-video { /* Styles specific for when banner has background image */ margin-bottom: 8px; } .banner-has-background-image .banner-video .banner-video-cta { display: none; } @media only screen and (min-width: 768px) { .banner-has-background-image .banner-video .banner-video-cta { display: block; font-size: 14px; color: var(--color-light); letter-spacing: -.025em; text-transform: capitalize; font-weight: 500; margin-bottom: 0; margin-top: 10px; } .banner-has-background-image .banner-video .banner-video-cta > em { color: var(--color-primary); text-decoration: underline; font-style: normal; transition: all .3s ease-in-out; } .banner-has-background-image .banner-video .banner-video-cta > em:hover { color: var(--color-light); } } @media only screen and (min-width: 1400px) { .banner-has-background-image .banner-video .banner-video-cta { font-size: 16px; line-height: 16px; } } .banner-no-background-image .banner-video {} /* Banner Content (Optional depending on comps) --------------------------------------------------------------- */ .banner-content { width: 90%; margin-inline: auto; } .banner-has-background-image .banner-content { /* Styles specific for when banner has background image */ color: var(--color-accent); } .banner-no-background-image .banner-content {} /* Banner Buttons --------------------------------------------------------------- */ .banner-buttons { display: inline-flex; gap: 1rem; align-items: center; } .banner-buttons-touch { text-align: inherit; margin-top: 3.25rem; margin-bottom: 4rem; } .banner-buttons-touch:first-child { margin-top: -1rem; } @media only screen and (min-width: 768px) { .banner-button-shift .banner-buttons-touch, .banner-has-h1.banner-button-shift .banner-buttons-touch + hr { /* hide buttons outside of banner */ display: none; } } @media only screen and (max-width: 767px) { .banner-buttons, .banner-buttons-touch { flex-direction: column; } .banner-buttons-touch { width: 100%; align-items: stretch; } .banner-button-shift .layout-banner .banner-buttons {} .banner-buttons.default-buttons { display: none; } } /* Banner Form --------------------------------------------------------------- */ #banner-form .field-form { margin-left: auto; margin-right: auto; } #banner-form .gform_title:last-child { margin-bottom: 0; } #banner-form .gform_description { max-width: 80ch; } #banner-form .gform_body { margin-left: auto; margin-right: auto; } #banner-form .gform_footer { justify-content: center; text-align: center; } #banner-form .gfield.gfield--type-submit { /* dont stretch flex button */ align-self: flex-start; } #banner-form .field-form-body { position: relative; padding-bottom: 2rem; } #banner-form.required-message { position: absolute; left: 0; right: 0; text-align: center; top: 100%; } @media only screen and (max-width: 1199px) { #banner-form .gform_fields .gfield:not(.gfield-width-full) { /* fix gravity forms from deciding to undo the grid columns on mobile instead of tablet now */ grid-column: 1/-1; } } @media only screen and (max-width: 767px) { #banner-form .field-form-body { position: relative; padding-bottom: 2rem; } #banner-form .gfield.required-message { position: absolute; left: 0; right: 0; text-align: center; top: 100%; } } .banner-bottom, .banner-bottom-blocks { display: flex; flex-direction: column; align-items: center; max-width: 100%; } .banner-bottom { padding-inline: 18px; } .banner-carousel { width: 100%; } .banner-carousel .awards-title { font-size: 8px; line-height: 10px; color: #fff; margin-bottom: 20px; } .banner-carousel .awards-title::after { height: 1px; background: rgba(255, 255, 255, .31); } .banner-carousel .awards-slide .carousel-item-image { color: rgba(255, 255, 255, .6); } .banner-carousel .awards-slide .carousel-item-image svg path { fill: currentColor; } .banner-carousel .awards .carousel { --carousel-height: 21px; } @media only screen and (min-width: 1200px) { .banner-carousel .awards .carousel { --carousel-height: 25px; } .banner-carousel .awards-title { font-size: 11px; line-height: 12px; } } @media only screen and (min-width: 1900px) { .banner-carousel .awards .carousel { --carousel-height: 33px; } .banner-carousel .awards-title { font-size: 12px; margin-bottom: 26px; } } .banner-sidebar { padding-block: 2rem 0; } .banner-sidebar-container { --container-gutter: 35px; } .banner-sidebar-title { font-size: 12px; line-height: 14px; color: #fff; letter-spacing: .15em; text-transform: uppercase; font-weight: 700; text-align: center; display: block; margin-bottom: 22px; } .banner-sidebar-cta { --button-border-radius: 0; --button-padding-x: 1rem; --button-height: 40px; font-size: 15px; width: 100%; text-align: right; justify-content: flex-end; } .banner-sidebar-testimonials .swiper { --swiper-custom-arrow-offset-x: 0; padding-bottom: 55px; } .banner-sidebar-testimonials .video { max-width: 204px; margin-inline: auto; } .banner-sidebar-testimonials .video-thumbnail .video-button-default { --video-button-size: 40px; margin: auto 14px 17px auto; } .banner-sidebar-testimonials .video-thumbnail .video-button-default::before { top: 2px; left: 2px; right: 2px; bottom: 2px; } .banner-sidebar-testimonials .video-thumbnail-markup { pointer-events: none; } .banner-sidebar-testimonials .video-thumbnail :where(img) { transform: scale(1.3); } @media only screen and (min-width: 768px) { .banner-sidebar-container { --container-gutter: 60px; } .banner-sidebar-title { text-align: left; font-size: 13px; line-height: 15px; } .banner-sidebar-cta { --button-padding-x: 60px; --button-height: 44px; } } @media only screen and (min-width: 1200px) { .banner-sidebar { padding-block: 45px 0; display: flex; flex-direction: column; justify-content: stretch; } .banner-sidebar-container { --container-gutter: 22px; } .banner-sidebar-cta { margin-top: auto; --button-padding-x: 26px; --button-height: 48px; } .banner-sidebar-cta.button.button-palette-default:is(:hover, :focus) { background-image: linear-gradient(to bottom, var(--color-primary), var(--color-primary)); background-color: var(--color-primary); } .banner-sidebar-title { text-align: center; margin-bottom: 45px; } .banner-sidebar-testimonials .swiper { max-height: 495px; padding-right: 24px; padding-bottom: 0; } .banner-sidebar-testimonials .swiper-custom-scrollbar.swiper-scrollbar-vertical { right: 2px; top: 0; bottom: 0; width: 1px !important; } .banner-sidebar-testimonials .swiper-custom-scrollbar.swiper-scrollbar-vertical .swiper-scrollbar-drag { top: unset; width: 4px; left: -1px; } .banner-sidebar-testimonials .video { max-width: 100%; height: 100%; } .banner-sidebar-testimonials .video-thumbnail { ---video-thumbnail-aspect-w: 230; ---video-thumbnail-aspect-l: 145; height: 100%; box-shadow: 0 3px 10px rgba(0, 0, 0, .44); } } @media only screen and (min-width: 1900px) { .banner-sidebar { padding-block: 60px 0; } .banner-sidebar-container { --container-gutter: 70px; } .banner-sidebar-title { margin-bottom: 54px; font-size: 15px; } .banner-sidebar-testimonials .swiper { max-height: 610px; padding-right: 63px; } } @media only screen and (min-width: 1200px) { .layout-banner-grid { display: grid; grid-template-columns: 1fr 297px; } .layout-banner-grid .banner-main-blocks { grid-template-columns: 1fr; gap: 75px; } } @media only screen and (min-width: 1400px) { .layout-banner-grid { grid-template-columns: 1fr 310px; } } @media only screen and (min-width: 1900px) { .layout-banner-grid { grid-template-columns: 1fr 485px; } .layout-banner-grid .banner-main-blocks { gap: 87px; } } #default-banner .layout-banner-grid { grid-template-columns: 1fr; } #default-banner .banner-main { padding-block: 32px 41px; } #default-banner .banner-main .secondary-heading { display: none; } #default-banner .banner-main .primary-heading > span { display: none; } #default-banner .banner-main .banner-body-blocks { gap: 1rem; } @media only screen and (min-width: 768px) { #default-banner .banner-main { min-height: 250px; } #default-banner .banner-main .primary-heading { font-size: 45px; line-height: 55px; max-width: 100%; } } @media only screen and (min-width: 1200px) { #default-banner .banner-main { min-height: 275px; } } @media only screen and (min-width: 1400px) { #default-banner .banner-main { min-height: 308px; } #default-banner .banner-main .primary-heading { font-size: 50px; line-height: 60px; } } /* ================================================================================ * Sidebar ================================================================================ */ /* Layout Sidebar https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/layout/sidebar.md --------------------------------------------------------------- */ /* Layout Sidebar Variables --------------------------------------------------------------- */ /* In case banner is also as crazy as the header */ /* Tip: placing the css var on :root can allow elements outside of the layout header utilize the variable if needed ie sticky stuff, offsets, jump link scroll etc. */ /* CSS offset to avoid banner + main template overlap that only applies when header-overlay-on-banner class is added: pseudo element that always matches the offset. All templates main/ first sections should have this on a clean build, but you can move this class around elements as needed. You can also apply this to a page's first section if there is not banner present. set this only once to avoid shifting the document on scroll. and move to proper media query as needed --------------------------------------------------------------- */ .has-banner.has-sidebar .has-layout-sidebar-offset:is(.template-wrapper > :first-child, .template-wrapper > :first-child > *)::after { content: ""; flex: 0 0 auto; height: var(--layout-sidebar-offset, 0px); display: block; width: 100%; } /* CSS offset class to apply to element within the sidebar that will overlap things --------------------------------------------------------------- */ .has-banner.has-sidebar .layout-sidebar-offset-element { margin-top: calc(( var(--layout-sidebar-offset, 0px) + var(--overlap-buffer) ) * -1); } .has-banner.has-sidebar :is(.aside, aside):has(.layout-sidebar-offset-element) { padding-top: var(--overlap-buffer); } /* Sidebar Form --------------------------------------------------------------- */ #sidebar-form { background: var(--scheme-bg, var(--color-dark-alt)); color: var(--scheme-fg, var(--color-light)); --widget-padding-x: 30px; --widget-padding-top: 65px; --widget-padding-bottom: calc(var(--widget-padding-top) + 2rem); border-radius: 5px; } #sidebar-form .gform_heading { border-top: 1px solid var(--color-primary); padding-top: 30px; } #sidebar-form .gform_title { margin-bottom: 10px; font-size: 35px; line-height: 45px; text-transform: capitalize; } #sidebar-form .gform_title:last-child { margin-bottom: 0; } #sidebar-form .gform_description { max-width: 80ch; } #sidebar-form .gform_body { margin-left: auto; margin-right: auto; } #sidebar-form .gform_footer { justify-content: center; text-align: center; margin-top: 22px; } #sidebar-form .gfield.gfield--type-submit { /* dont stretch flex button */ align-self: flex-start; } #sidebar-form .gfield.required-message { text-align: center; } /* ================================================================================ Contact Info ================================================================================ */ /* Layout Contact https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/layout/contact.md -------------------------------------------------------------------------------- */ /* Contact Related Classes Note: This file is for styles applied globally for the contact information globally For styles applied globally for the contact information, apply styles to layouts/layout-contact.scss For Contact Page only overrides for the contact informatio, apply styles to templates/template-contact.scss -> #contact-page For Footer section only overrides for the contact informatio, apply styles to layout/layout-footer.scss -> .footer-contact styles section -------------------------------------------------------------------------------- */ /* Global Stylees - Numbers (eg. header phone number, footer phone number, etc.) -------------------------------------------------------------------------------- */ .social-title { color: var(--color-primary); letter-spacing: .05em; gap: 17px; max-width: 172px; margin-inline: auto; margin-bottom: 25px; } .social-title::after { background-color: #707070; } .number-link { font-size: 1.25rem; line-height: calc(1em + 10px); font-family: var(--font-secondary); color: inherit; font-weight: normal; text-decoration: none; display: inline-block; } /* Global Stylees - Locations -------------------------------------------------------------------------------- */ .location-number { margin-top: 1rem; margin-bottom: 0; } .location-number-label { display: none; } .location-number-link { font-size: 18px; color: var(--color-dark); font-weight: 500; text-decoration: none; } .location-directions-button { margin-top: 0; } .location-directions-button.button.button-style-link { text-transform: uppercase; font-size: 12px; line-height: 14px; } /* Global Stylees - Social Links (ie. firm social media, blog share icons, etc) -------------------------------------------------------------------------------- */ .social { font-size: 24px; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 25px; margin-bottom: 0; } .social li { list-style: none; } .social li a { color: inherit; } .social li a svg * { fill: currentColor; } .social li:is(:hover, :focus) { color: var(--scheme-sp, var(--color-primary)); } /* Confact Info Block - Titles -------------------------------------------------------------------------------- */ .contact-block-title { font-size: 20px; line-height: 24px; color: var(--color-primary); text-transform: capitalize; font-weight: normal; margin-bottom: 10px; max-width: -moz-max-content; max-width: max-content; } .contact-block-title:is(.fancy-border-after) { margin-bottom: var(--fancy-border-margin-y); } @media only screen and (min-width: 768px) { .contact-block-title { font-size: 25px; line-height: 30px; } } /* Confact Info Block - Basic Text Content -------------------------------------------------------------------------------- */ .contact-block-content { flex: 1 1; font-size: 16px; line-height: 20px; } :where(.contact-block-content :where(a)) { color: inherit; text-decoration: none; } :where(.contact-block-content :where(a)):where(:hover, :focus) { text-decoration: underline; } :where(.contact-block-content :where(p, address):where(:nth-last-child(n+2))) { margin-bottom: 7px; } /* Confact Info Block - Grid setup -------------------------------------------------------------------------------- */ .contact-blocks { display: grid; grid-template-columns: 100%; justify-content: space-between; -moz-column-gap: 4rem; column-gap: 4rem; row-gap: 50px; align-items: stretch; } .contact-block, .contact-blocks { min-width: 0; } .contact-block { width: 100%; } .contact-block:is(:only-child, :only-of-type) { grid-column: 1/-1; } .contact-block, .contact-block-content { display: flex; flex-direction: column; } @media only screen and (min-width: 768px) { .contact-blocks { grid-template-columns: 1fr 200px; padding-right: 19px; } .contact-block, .contact-block-content { font-size: 17px; line-height: 22px; } } @media only screen and (min-width: 1200px) { .contact-blocks { padding-right: 0; } } @media only screen and (min-width: 1400px) { .contact-blocks { grid-template-columns: 1fr 200px; } } @media only screen and (max-width: 1199px) { .contact-blocks { width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; } } @media only screen and (max-width: 767px) { .contact-blocks { justify-items: center; justify-content: center; text-align: center; flex-direction: column; } .contact-block, .contact-blocks { align-items: center; align-content: center; } } .contact-block.contact-special { text-align: center; max-width: 100%; align-items: center; align-self: center; } .contact-block.contact-special .logo { margin: 0 auto; } @media only screen and (max-width: 1199px) { .contact-block.contact-special { grid-column: 1/-1; order: 9999; } } .contact-block:is(.contact-number, .contact-numbers) {} .contact-block:is(.contact-number, .contact-numbers) .number-title { display: block; } .contact-block.contact-number {} .contact-block.contact-numbers {} .contact-block.contact-numbers .contact-numbers-content { flex: 0 0; row-gap: 1rem; display: grid; } .contact-block:is(.contact-location, .contact-locations) .location-directions { margin-top: 0; } .contact-block.contact-location {} .contact-block.contact-locations {} .contact-block.contact-locations .contact-locations-content { row-gap: 4rem; display: grid; } .contact-block.contact-social { margin-top: 65px; } @media only screen and (min-width: 768px) { .contact-block.contact-social { margin-top: 102px; display: flex; flex-direction: row; justify-content: flex-end; gap: 20px; align-items: center; max-width: 345px; margin-left: auto; } .contact-block.contact-social .social-title { margin-bottom: 0; } } .contact-block:is(.contact-list, .contact-lists) { max-width: -moz-max-content; max-width: max-content; } .contact-block:is(.contact-list, .contact-lists) .list-block-items { display: flex; flex-direction: column; } .contact-list-email { /* This is an example and can be omitted if not needed. each column added here will be separated by a class named after the block's title, unless the corresponding layout-contact.php markup has been modified. */ font-size: 1.5em; font-family: var(--font-secondary); } .contact-block.contact-lists .contact-lists-content { row-gap: 4rem; display: grid; } .layout-contact-image { display: none; } .layout-contact-locations { background-color: var(--color-light-alt); color: var(--color-dark); border-radius: 5px; padding: 55px 30px; } .layout-contact-title { font-size: 24px; line-height: 30px; text-align: center; display: block; margin-bottom: 52px; } .layout-contact-title > em { color: var(--color-primary); font-style: normal; } @media only screen and (min-width: 768px) { .layout-contact-locations { padding: 80px 46px 71px; } .layout-contact-title { font-size: 30px; line-height: 35px; text-align: left; } } @media only screen and (min-width: 1200px) { .layout-contact-image { display: flex; align-items: center; margin-right: -82px; position: relative; max-width: 354px; z-index: 1; } .layout-contact-image .contact-image { display: flex; align-items: center; justify-content: center; border-radius: 5px; overflow: hidden; } .layout-contact-image .contact-image :where(svg, object) { position: absolute; max-width: 170px; opacity: .49; } .layout-contact-title { margin-bottom: 68px; } .layout-contact-locations { padding: 80px 91px 73px 170px; margin-left: -82px; } .layout-contact-grid { display: grid; grid-template-columns: 354px 1fr; } } @media only screen and (min-width: 1400px) { .layout-contact-grid { max-width: 1174px; margin-inline: auto; grid-template-columns: 456px 1fr; } .layout-contact-title { font-size: 35px; line-height: 40px; margin-bottom: 111px; } .layout-contact-locations { padding: 74px 121px 90px 212px; margin-left: -126px; } .layout-contact-image { max-width: 456px; margin-right: -126px; } .layout-contact-image .contact-image :where(svg, object) { max-width: 218px; } } @media only screen and (min-width: 1900px) { .layout-contact-title { font-size: 40px; line-height: 45px; margin-bottom: 109px; } .layout-contact-grid { max-width: 1400px; grid-template-columns: 516px 1fr; } .layout-contact-image { max-width: 516px; margin-right: -95px; } .layout-contact-image .contact-image :where(svg, object) { max-width: 246px; } .layout-contact-locations { margin-left: -95px; padding: 111px 150px 92px 255px; } } /* ================================================================================ * Footer ================================================================================ */ /* Layout Footer https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/layout/footer.md --------------------------------------------------------------- */ /* Layout Footer Variables --------------------------------------------------------------- */ /* In case footer is also as crazy as the header */ /* Tip: placing the css var on :root can allow elements outside of the layout header utilize the variable if needed ie sticky stuff, offsets, jump link scroll etc. */ :root { --layout-footer-offset: 0px; } .footer-has-form .has-layout-footer-offset {} .footer-has-form .has-layout-footer-offset:is(:is(.template-wrapper > :last-child):not(:has(.footer-has-form .has-layout-footer-offset)), :is(.main, main, .aside, aside) > :last-child, :is(.main, main, .aside, aside) > :last-child *)::after { content: ""; flex: 0 0 auto; grid-column: 1/-1; height: var(--layout-footer-offset, 0px); display: block; width: 100%; } .footer-has-form .layout-footer-offset-element {} .footer-has-form .layout-footer-offset-element:is(.template-wrapper:has(.layout-banner:not(:last-child)) + .layout-footer *) { margin-top: calc(var(--layout-footer-offset, 0px) * -1); } /* Branding logo sizes --------------------------------------------------------------- */ :is(.ilawyer-legacy, .ilawyer, .onep21, .ihealth) { color: inherit; } .ilawyer-legacy, .ilawyer { font-size: 18px; } .onep21 { font-size: 50px; } .ihealth { font-size: 34px; } /* Layout Footer --------------------------------------------------------------- */ .layout-footer { color: var(--scheme-fg, var(--color-light)); } .footer-no-contact .layout-footer {} .footer-has-contact .layout-footer {} /* Footer Split - Top --------------------------------------------------------------- */ .footer-top { padding-block: 65px 40px; position: relative; z-index: 1; } .footer-top::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 31%; background-color: var(--color-dark-alt); z-index: -1; } .footer-top-container { --container-gutter: 30px; } @media only screen and (min-width: 768px) { .footer-top { padding-top: 95px; } .footer-top-container { --container-gutter: 84px; } } @media only screen and (min-width: 1200px) { .footer-top { padding-top: 107px; } .footer-top::before { bottom: 15%; } } @media only screen and (min-width: 1400px) { .footer-top { padding-top: 133px; } .footer-top-container { --container-gutter: 113px; } } @media only screen and (min-width: 1900px) { .footer-top { padding-top: 182px; padding-bottom: 77px; } } .footer-no-contact .footer-top {} .footer-has-contact .footer-top { /* Styles/Selectors for when nested layout-contact is hidden*/ padding-bottom: 57px; } /* Footer Form --------------------------------------------------------------- */ #footer-form { background: var(--scheme-bg, var(--color-dark-alt)); color: var(--scheme-fg, inherit); padding-block: 0; width: 960px; max-width: 100%; margin-inline: auto; } #footer-form .field-form { padding-inline: 0; } #footer-form .field-form :where(.faux-gform_wrapper) .gform_heading { border-top: 1px solid var(--color-primary); padding-top: 30px; } #footer-form .field-form :where(.faux-gform_wrapper) .gform_title { font-size: 35px; line-height: 40px; color: var(--color-light); letter-spacing: -.025em; text-transform: capitalize; font-weight: 300; margin-bottom: 15px; max-width: 13ch; margin-inline: auto; } #footer-form .field-form :where(.faux-gform_wrapper) .gform_description { font-size: 16px; line-height: 22px; color: var(--color-light); letter-spacing: -.025em; font-weight: 400; max-width: 25ch; margin-inline: auto; } #footer-form .field-form-body { max-width: 513px; margin-inline: auto; } #footer-form .gform_description { max-width: 80ch; } #footer-form .gform_body { margin-left: auto; margin-right: auto; } #footer-form .gform_footer { justify-content: center; text-align: center; } @media only screen and (min-width: 768px) { #footer-form .gform_footer { margin-top: 0; justify-content: flex-end; } } #footer-form .gfield.gfield--type-submit { /* dont stretch flex button */ align-self: flex-start; } @media only screen and (min-width: 768px) { #footer-form .field-form :where(.faux-gform_wrapper) .gform_heading { display: flex; flex-direction: row; gap: 51px; max-width: 600px; } #footer-form .field-form :where(.faux-gform_wrapper) .gform_title { max-width: unset; text-align: left; font-size: 40px; line-height: 45px; } #footer-form .gform_title:is(.fancy-border) { --fancy-border-width: 271px; } } @media only screen and (min-width: 1200px) { #footer-form { width: 1022px; } #footer-form .field-form-body { max-width: 825px; } #footer-form .field-form :where(.faux-gform_wrapper) .gform_heading { max-width: 100%; margin-bottom: 97px; } #footer-form .field-form :where(.faux-gform_wrapper) .gform_title { margin-left: 0; font-size: 45px; line-height: 50px; max-width: 350px; margin-bottom: 0; } #footer-form .field-form :where(.faux-gform_wrapper) .gform_description { margin-right: 0; font-size: 17px; line-height: 24px; } #footer-form .gform_fields { row-gap: 30px; } } @media only screen and (min-width: 1400px) { #footer-form { width: 100%; } } @media only screen and (min-width: 1900px) { #footer-form .field-form :where(.faux-gform_wrapper) .gform_heading { margin-bottom: 87px; } #footer-form .field-form :where(.faux-gform_wrapper) .gform_title { font-size: 50px; line-height: 55px; max-width: 400px; } #footer-form .field-form :where(.faux-gform_wrapper) .gform_description { font-size: 18px; line-height: 28px; } } @media only screen and (max-width: 1199px) { #footer-form .gform_fields .gfield:not(.gfield-width-full) { /* fix gravity forms from deciding to undo the grid columns on mobile instead of tablet now */ grid-column: 1/-1; } } @media only screen and (max-width: 767px) { #footer-form .field-form-body { position: relative; padding-bottom: 2rem; } } .footer-no-contact #footer-form {} .footer-has-contact #footer-form {} /* Footer Contact Note: This file is for Footer only overrides for the contact information For Footer section only overrides for the contact informatio, apply styles to layout/layout-footer.scss -> .footer-contact styles section For styles applied globally for the contact information, apply styles to layouts/layout-contact.scss For Contact Page only overrides for the contact informatio, apply styles to templates/template-contact.scss -> #contact-page --------------------------------------------------------------- */ .footer-contact { padding-block: 59px 0; } @media only screen and (min-width: 1200px) { .footer-contact { padding-block: 143px 0; } } @media only screen and (min-width: 1400px) { .footer-contact { padding-block: 159px 0; } } @media only screen and (min-width: 1900px) { .footer-contact { padding-top: 137px; } } .footer-contact .contact-block:is(.contact-number, .contact-numbers) {} .footer-contact .contact-block.contact-numbers {} .footer-contact .contact-block.contact-number {} .footer-contact .contact-block.contact-location {} .footer-contact .contact-block.contact-locations {} /* Footer Split - Bottom --------------------------------------------------------------- */ .footer-bottom { background-color: var(--color-light); color: var(--color-dark); } @media only screen and (min-width: 1200px) { .footer-bottom .container, .footer-bottom-container { --container-gutter: 40px; } } .footer-no-contact .footer-bottom {} .footer-has-contact .footer-bottom {} /* Footer utility --------------------------------------------------------------- */ .footer-utility { padding-block: 40px; font-size: .875rem; line-height: calc(1em + 4px); } .footer-utility:nth-child(n+2) { border-top: 1px solid; margin-top: 4rem; } .footer-utility-blocks { display: grid; row-gap: 12px; -moz-column-gap: 2rem; column-gap: 2rem; align-items: center; } .footer-utility-content :is(li) { display: inline; margin: 0; } .footer-utility-content :is(li):nth-child(n+2)::before { content: " | "; display: inline-block; margin: 0 .5em 0 .25em; } @media only screen and (min-width: 768px) { .footer-utility { padding-block: 45px; } .footer-utility-content :is(p:not(.footer-disclaimer), ul) { display: inline; margin: 0; } .footer-utility-content :is(p:not(.footer-disclaimer), ul):nth-child(n+2)::before { content: " | "; display: inline-block; margin: 0 .5em 0 .25em; } } @media only screen and (min-width: 1200px) { .footer-utility { padding-block: 50px; } .footer-utility-blocks { grid-template-columns: repeat(3, 1fr); } .footer-utility-content { margin-right: auto; order: -1; } .footer-utility-content:first-child:nth-last-child(2) { grid-column: span 2; } .footer-utility .social { text-align: center; } .footer-utility .social::before { content: none; } .footer-utility :is(.ilawyer-legacy, .ilawyer, .onep21, .ihealth) { order: 99; justify-self: self-end; align-self: center; } } @media only screen and (max-width: 1199px) { .footer-utility-blocks { text-align: center; justify-content: center; justify-items: center; } } .footer-no-contact .footer-utility {} .footer-has-contact .footer-utility {} /* Footer logo --------------------------------------------------------------- */ @media only screen and (min-width: 1200px) { .footer-brand-logo { justify-self: self-end; } } /* Footer disclaimer --------------------------------------------------------------- */ .footer-disclaimer { margin-top: 1em; } /* ================================================================================ * Internals/ Default ================================================================================ */ /*! * Default Sections: Main + Aside: Can also be reused on other templates with similar wireframes (eg. Profile Page, etc.) -------------------------------------------------------------------------------- */ /* Default Sections: Main + Aside: Skeletons - no need to edit --------------------------------------------------------------- */ .default-sections { gap: var(--default-gap-y) var(--default-gap-x); } .default-sections, .default-section, .default-section-main, .default-section-sidebar { min-width: 0; max-width: 100%; } .default-section-main { width: 100%; } .default-section-sidebar { width: var(--default-sidebar-width); } .default-sections.default-sections-float :where(.default-section, .default-section-main, .default-section-sidebar) { margin-left: auto; margin-right: auto; } .default-sections.default-sections-float :where(.default-section, .default-section-main, .default-section-sidebar):where(:nth-last-child(n+2)) { margin-bottom: var(--default-gap-y); } .default-sections:is(.default-sections-split, .default-sections-full) { display: flex; flex-direction: column; align-items: center; } .default-sections.default-sections-grid { display: grid; grid-template-columns: 100%; justify-content: center; } @media only screen and (min-width: 1200px) { .default-section {} .default-section-main { max-width: calc(var(--comp) - var(--default-sidebar-width) - var(--container-gutter, 0px) * 2 - var(--default-gap-x)); } .default-section-sidebar { order: 9; } .default-sections:is(.default-sections-split, .default-sections-full) { flex-direction: row; align-items: normal; justify-content: center; } .default-sections.default-sections-reverse .default-section-sidebar { order: -1; } .default-sections.default-sections-reverse .default-section-main { order: 9; } .default-sections.default-sections-float::after { content: ""; font-size: 0; visibility: hidden; height: 0; clear: both; display: table; width: 100%; flex: 0 0 auto; } .default-sections.default-sections-float .default-section-sidebar { float: right; clear: right; } .default-sections.default-sections-float .default-section-main { float: left; clear: left; width: calc(100% - ( var(--default-sidebar-width) ) - var(--default-gap-x)); } .default-sections.default-sections-float .default-section-main:only-child { /* no sidebar adjust */ float: none; } .default-sections.default-sections-float.default-sections-reverse .default-section-sidebar { float: left; clear: left; } .default-sections.default-sections-float.default-sections-reverse .default-section-main { float: right; clear: right; } .default-sections:is(.default-sections-split, .default-sections-full) .default-section-sidebar { flex: 0 0 auto; } .default-sections:is(.default-sections-split, .default-sections-full) .default-section-main { flex: 1 1; } .default-sections.default-sections-full { --default-gap-x: 0px; } .default-sections.default-sections-full .default-section-main { margin-left: auto; margin-right: auto; } .default-sections.default-sections-grid { grid-template-columns: 1fr var(--default-sidebar-width); grid-column-gap: var(--default-gap-x); } .default-sections.default-sections-grid .default-section-main { justify-self: center; grid-column: 1; } .default-sections.default-sections-grid:not(.default-sections-no-autocenter) .default-section-main:only-child { /* no sidebar adjust */ grid-column: 1/-1 !important; } .default-sections.default-sections-grid .default-section-sidebar { grid-column: 2; } .default-sections.default-sections-grid .default-section-main, .default-sections.default-sections-grid .default-section-sidebar { width: 100%; min-width: 0; min-height: 0; } .default-sections.default-sections-grid.default-sections-reverse { grid-template-columns: var(--default-sidebar-width) 1fr; } .default-sections.default-sections-grid.default-sections-reverse .default-section-main { grid-column: 2; } .default-sections.default-sections-grid.default-sections-reverse .default-section-sidebar { grid-column: 1; } } @media only screen and (max-width: 1199px) { .default-sections.default-sections-full .default-section-sidebar { align-self: stretch; width: 100%; } .default-sections:not(.default-sections-full) > .default-section:is(aside, .aside):not(:only-child) { padding-top: 0; } .default-sections:not(.default-sections-full) > .default-section:is(main, .main):not(:only-child) { padding-bottom: 0; } } /* Default Sections Customizations --------------------------------------------------------------- */ .default-sections { --default-sidebar-width: 100%; --default-gap-x: 80px; --default-gap-y: 95px; } @media only screen and (min-width: 1200px) { .default-sections { --default-sidebar-width: 360px; --default-gap-x: 80px; --default-gap-y: 95px; } } @media only screen and (min-width: 1400px) { .default-sections { --default-sidebar-width: 360px; --default-gap-x: 112px; --default-gap-y: 114px; } } @media only screen and (min-width: 1900px) { .default-sections { --default-sidebar-width: 360px; --default-gap-x: 144px; --default-gap-y: 72px; } } @media only screen and (min-width: 1200px) { .default-sections.default-sections-split .default-section-sidebar-container { --container-gutter: 1rem; } } .default-sections.default-sections-full .default-section-sidebar { background: var(--scheme-bg, var(--color-light-alt)); } @media only screen and (min-width: 1200px) { .default-sections.default-sections-full .default-section-main-container { --container-gutter: 120px; } } @media only screen and (min-width: 1900px) { .default-sections.default-sections-full .default-section-main-container { --container-gutter: 250px; } } /* Default Entries -------------------------------------------------------------------------------- */ .entry-thumbnail { --entry-thumbnail-aspect-w: 648; --entry-thumbnail-aspect-l: 260; display: block; margin-bottom: 2rem; } .entry-thumbnail:nth-child(n+2) { margin-top: 2rem; } .entry-thumbnail:is(a) { color: inherit; } .entry-thumbnail-img { position: relative; overflow: hidden; background: var(--scheme-bg, var(--color-light-alt)); } .entry-thumbnail-img::before { content: ""; display: block; padding-top: calc(100% * var(--entry-thumbnail-aspect-l) / var(--entry-thumbnail-aspect-w)); } .entry-thumbnail-img::after { content: "No Image Available"; opacity: .2; font-size: 1.5rem; line-height: 1.125; font-family: var(--font-secondary); display: flex; align-items: center; justify-content: center; text-align: center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; padding: 2em; } .entry-thumbnail-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 30%; object-position: 50% 30%; z-index: 1; } .entry-meta { font-size: 14px; color: var(--color-dark); font-weight: 700; margin-bottom: 30px; } .entry-meta a:not(:hover, :focus) { text-decoration: none; } .entry-meta-category { color: var(--color-primary); } .entry-meta-category a:not(:hover, :focus) { color: var(--color-primary); } @media only screen and (max-width: 767px) { .entry-title { font-size: 22px; } } .entry-buttons { display: flex; flex-wrap: wrap; gap: 1rem; } .entries .entry { display: grid; justify-content: space-between; -moz-column-gap: 3rem; column-gap: 3rem; row-gap: 2rem; } .entries .entry:nth-child(n+2) { padding-top: 62px; margin-top: 48px; border-top: 1px solid var(--color-neutral-light); } .entries .entry-thumbnail { margin-bottom: 0; } .entries .entry-thumbnail, .entries .entry-body { /* grid fix */ min-width: 0; } @media only screen and (min-width: 1400px) { .entries .entry { grid-template-columns: 250px 1fr; } .entries .entry-thumbnail { --entry-thumbnail-aspect-w: 250; --entry-thumbnail-aspect-l: 200; } .entries .entry-body { align-self: center; } .entries .entry-body:only-child { grid-column: 1/-1; } } @media only screen and (max-width: 1199px) { .entry-thumbnail { --entry-thumbnail-aspect-w: 648; --entry-thumbnail-aspect-l: 260; } } /*! * Default Header -------------------------------------------------------------------------------- */ @media only screen and (min-width: 768px) { .banner-has-h1.banner-button-shift .default-header { margin-bottom: 0; } } /* * Default Layout/Template https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/layout/default.md -------------------------------------------------------------------------------- */ @media only screen and (max-width: 1199px) { .layout-default-sections-simple .layout-default-aside { max-width: var(--default-sidebar-width); } } /*! * Default Heading -------------------------------------------------------------------------------- */ .default-heading { font-size: 28px; line-height: 33px; margin-bottom: 42px; } .default-heading:last-child { margin-bottom: 0; } @media only screen and (min-width: 768px) { .default-heading { font-size: 35px; line-height: 40px; margin-bottom: 35px; } } @media only screen and (min-width: 1400px) { .default-heading { font-size: 40px; line-height: 45px; margin-bottom: 45px; } } @media only screen and (min-width: 1900px) { .default-heading { font-size: 50px; line-height: 55px; margin-bottom: 37px; } } /*! * Default Divider - Optional -------------------------------------------------------------------------------- */ .default-divider { --fancy-border-margin-y: 3rem; } /*! * Search Form * Although optional, some builds may include this OR request this in the long run. Since it's built in to wordpress, we might as well at least give it some basic styles. Overhaul as needed -------------------------------------------------------------------------------- */ .searchform { display: grid; grid-template-columns: 1fr auto; align-items: stretch; } .searchform:nth-last-child(n+2) { margin-bottom: 2rem; } .searchform .button { order: 99; border-top-left-radius: 0; border-bottom-left-radius: 0; } .searchform input:not([type=radio]):not([type=checkbox]):not([type=button]):not([type=image]):not([type=file]) { --field-border-radius: .5rem; border-top-right-radius: 0; border-bottom-right-radius: 0; } /* ================================================================================ Contact Template ================================================================================ */ /* Template Contact https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/template/contact.md -------------------------------------------------------------------------------- */ /* Note: This file is for Contact Page only overrides for the contact information For Contact Page only overrides for the contact informatio, apply styles to templates/template-contact.scss -> #contact-page For styles applied globally for the contact information, apply styles to layouts/layout-contact.scss For Footer section only overrides for the contact informatio, apply styles to layout/layout-footer.scss -> .footer-contact styles section -------------------------------------------------------------------------------- */ body.onep21-template-contact { /* body selector for contact template */ --layout-footer-top-padding: 610px; --layout-footer-bottom-padding: 101px; } body.onep21-template-contact .layout-footer .footer-top { padding-top: var(--layout-footer-top-padding); padding-bottom: var(--layout-footer-bottom-padding); } body.onep21-template-contact .layout-footer .footer-top::before { bottom: 0; } body.onep21-template-contact .template-wrapper { position: relative; z-index: 2; } @media only screen and (min-width: 768px) { body.onep21-template-contact { --layout-footer-top-padding: 400px; --layout-footer-bottom-padding: 115px; } } @media only screen and (min-width: 1200px) { body.onep21-template-contact { --layout-footer-top-padding: 461px; --layout-footer-bottom-padding: 127px; } } @media only screen and (min-width: 1400px) { body.onep21-template-contact { --layout-footer-top-padding: 550px; --layout-footer-bottom-padding: 168px; } } @media only screen and (min-width: 1900px) { body.onep21-template-contact { --layout-footer-top-padding: 584px; --layout-footer-bottom-padding: 224px; } } #contact-banner {} :is(.contact-page, #contact-page) { /* template main styles */ padding-bottom: 0; --layout-contact-offset: -525px; } :is(.contact-page, #contact-page) .layout-contact { margin-bottom: var(--layout-contact-offset); } :is(.contact-page, #contact-page) .section-container { --container-gutter: 30px; } @media only screen and (min-width: 768px) { :is(.contact-page, #contact-page) { --layout-contact-offset: -295px; } } @media only screen and (min-width: 768px) and (max-width: 1199px) { :is(.contact-page, #contact-page) .layout-contact-locations { padding: 52px 66px; } } @media only screen and (min-width: 768px) { :is(.contact-page, #contact-page) .section-container { --container-gutter: 84px; } } @media only screen and (min-width: 1200px) { :is(.contact-page, #contact-page) { --layout-contact-offset: -311px; } :is(.contact-page, #contact-page) .section-container { --container-gutter: 80px; } } @media only screen and (min-width: 1400px) { :is(.contact-page, #contact-page) { --layout-contact-offset: -346px; } :is(.contact-page, #contact-page) .section-container { --container-gutter: 114px; } } @media only screen and (min-width: 1900px) { :is(.contact-page, #contact-page) { --layout-contact-offset: -350px; } :is(.contact-page, #contact-page) .section-container { --container-gutter: 260px; } } :is(.contact-page, #contact-page) .contact-block.contact-number {} :is(.contact-page, #contact-page) .contact-block.contact-numbers {} :is(.contact-page, #contact-page) .contact-block.contact-location {} :is(.contact-page, #contact-page) .contact-block.contact-locations {} /* ================================================================================ * Home Template ================================================================================ */ /* Template Home https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/template/home.md -------------------------------------------------------------------------------- */ /* * Home Related Classes -------------------------------------------------------------------------------- */ :where(#home-template .home-section) { padding-block: 4rem; } :where(.home-section) .section-heading { font-size: 35px; line-height: 35px; margin-bottom: 0; } :where(.home-section) .section-header, :where(.home-section) .section-footer {} :where(.home-section) .section-header { border-top: 2px solid var(--color-primary); padding-top: 25px; } :where(.home-section) .section-lead { font-size: 20px; line-height: 26px; color: var(--color-primary); letter-spacing: -.025em; font-weight: 600; } :where(.home-section) .section-lead-alt { font-size: 17px; line-height: 20px; font-weight: 400; max-width: 200px; margin-inline: auto; } :where(.home-section) .section-header:where(:nth-last-child(n+2):not(.section-block)) { margin-bottom: 39px; } :where(.home-section) .section-header:where(:nth-last-child(n+2):not(.section-block)):where(.fancy-border-after) { margin-bottom: var(--fancy-border-margin-y, 2rem); } :where(.home-section) .section-blocks { gap: 2rem; } :where(.home-section) .section-block:where(:only-child) { grid-column: 1/-1; } :where(.home-section) .section-block, :where(.home-section) .section-blocks { min-width: 0; } :where(.home-section) .section-footer:where(:nth-child(n+2):not(.section-block)) { margin-top: 2rem; } :where(.home-section) .section-heading:where(:last-child) { margin-bottom: 0; } @media only screen and (min-width: 768px) { :where(.home-section) .section-lead { font-size: 17px; line-height: 30px; max-width: 350px; margin-left: 0; } :where(.home-section) .section-heading { padding-top: 25px; position: relative; z-index: 1; max-width: -moz-max-content; max-width: max-content; font-size: 40px; line-height: 50px; } :where(.home-section) .section-heading::before { content: ""; width: 100%; position: absolute; top: -1.5px; left: 0; right: 0; height: 2px; background: var(--color-primary); z-index: 1; } :where(.home-section) .section-header { border-top: 1px solid #877571; padding-top: 0; display: flex; justify-content: space-between; } :where(.home-section) .section-header:where(:nth-last-child(n+2):not(.section-block)) { margin-bottom: 60px; } } @media only screen and (min-width: 1200px) { :where(.home-section) .section-lead { font-size: 18px; letter-spacing: 0; max-width: 370px; } } @media only screen and (min-width: 1400px) { :where(.home-section) .section-heading { font-size: 45px; line-height: 50px; } } @media only screen and (min-width: 1900px) { :where(.home-section) .section-heading { font-size: 50px; line-height: 50px; } :where(.home-section) .section-header:where(:nth-last-child(n+2):not(.section-block)) { margin-bottom: 94px; } } @media only screen and (max-width: 767px) { :where(.home-section) .section-header, :where(.home-section) .section-footer { /* set centering as a scaffolding setting for all sections */ text-align: center; } } /* * Home Template -------------------------------------------------------------------------------- */ body.onep21-template-home {} #home-banner .banner-main { min-height: 500px; justify-content: flex-end; } @media only screen and (min-width: 768px) { #home-banner .banner-main { min-height: 550px; padding-block: 0 67px; } #home-banner .banner-main-container { --container-gutter: 0; } #home-banner .banner-main-block { width: 100%; } #home-banner .banner-main .banner-body-blocks { width: 100%; } #home-banner .banner-main .banner-text { width: 100%; } #home-banner .banner-main .banner-bottom { padding-left: 70px; padding-right: 0; } #home-banner .banner-main .banner-bottom-blocks { flex-direction: row; align-items: flex-end; gap: 82px; } #home-banner .banner-main .banner-video { width: 221px; margin-bottom: 0; } #home-banner .banner-main .banner-carousel { width: calc(100% - 221px - 82px); padding-bottom: 7px; } #home-banner .banner-main .banner-buttons { width: 100%; display: flex; justify-content: flex-start; max-width: calc(100% - 140px); } #home-banner .secondary-heading { font-size: 16px; line-height: 19px; background: var(--color-dark); padding: 13px; margin-bottom: 83px; } } @media only screen and (min-width: 1200px) { #home-banner .banner-main { min-height: unset; padding-block: 85px 58px; justify-content: center; align-items: start; } #home-banner .banner-main-container { --container-gutter: 36px; } #home-banner .banner-main-blocks { padding-left: 34px; } #home-banner .banner-main-block:only-child { justify-self: self-start; } #home-banner .banner-main .banner-bottom { padding: 0; } #home-banner .banner-main .banner-bottom-blocks { gap: 75px; flex-direction: row-reverse; } #home-banner .banner-body { text-align: left; } #home-banner .banner-body-blocks { align-items: flex-start; } #home-banner .secondary-heading { background: none; margin-bottom: 8px; padding: 0; } #home-banner .primary-heading { font-size: 5rem; line-height: 1; max-width: 600px; margin-left: 0; } #home-banner .primary-heading > span { font-size: 20px; line-height: 30px; max-width: 500px; } } @media only screen and (min-width: 1400px) { #home-banner .banner-main { padding-block: 87px 65px; } #home-banner .banner-main-container { --container-gutter: 42px; } #home-banner .banner-main .banner-video { width: 255px; } #home-banner .banner-main .banner-carousel { width: calc(100% - 255px - 94px); } #home-banner .banner-main .banner-bottom-blocks { gap: 94px; } #home-banner .primary-heading { font-size: 90px; line-height: 90px; } #home-banner .primary-heading > span { font-size: 20px; line-height: 30px; } } @media only screen and (min-width: 1900px) { #home-banner .banner-main { padding-block: 103px 77px; } #home-banner .banner-main-container { --container-gutter: 89px; } #home-banner .banner-main-blocks { padding-left: 48px; } #home-banner .banner-main .banner-bottom-blocks { gap: 195px; } #home-banner .banner-main .banner-video { width: 285px; } #home-banner .banner-main .banner-video .video-thumbnail { --video-thumbnail-aspect-w: 273; --video-thumbnail-aspect-l: 173; } #home-banner .banner-main .banner-video .banner-video-cta { font-size: 18px; } #home-banner .banner-main .banner-carousel { width: calc(100% - 285px - 195px); } #home-banner .secondary-heading { font-size: 18px; } #home-banner .primary-heading { font-size: 100px; line-height: 100px; } #home-banner .primary-heading > span { font-size: 22px; line-height: 32px; } } :is(.home-page, #home-page) { padding-top: 0; padding-bottom: 0; } .two-images { position: relative; max-width: 300px; margin-inline: auto; } .two-images :where(img, svg, picture) { display: block; } .two-images .image-one, .two-images .image-two { border-radius: 5px; overflow: hidden; } .two-images .image-one { max-width: 200px; margin-left: auto; } .two-images .image-two { max-width: 170px; margin-right: auto; margin-top: -70px; } .two-images .image-three { position: absolute; bottom: 145px; max-width: 86px; left: 30px; opacity: .59; } @media only screen and (min-width: 768px) { .two-images { max-width: 600px; } .two-images .image-one { max-width: 399px; } .two-images .image-two { max-width: 338px; margin-top: -137px; } .two-images .image-three { max-width: 172px; bottom: 292px; left: 62px; } } @media only screen and (min-width: 1200px) { .two-images { max-width: 100%; width: 100%; } .two-images .image-one { max-width: 338px; } .two-images .image-two { max-width: 287px; margin-top: -116px; } .two-images .image-three { max-width: 146px; bottom: 248px; left: 50px; } } @media only screen and (min-width: 1400px) { .two-images .image-one { max-width: 411px; } .two-images .image-two { max-width: 350px; margin-top: -141px; } .two-images .image-three { max-width: 177px; bottom: 301px; left: 62px; } } @media only screen and (min-width: 1900px) { .two-images .image-one { max-width: 504px; } .two-images .image-two { max-width: 428px; margin-top: -173px; } .two-images .image-three { max-width: 217px; bottom: 369px; left: 76px; } } /* * Home Section 1 -------------------------------------------------------------------------------- */ /* * Section Offset Demo: For overlapping the section or parts of it to adjacent sections/layouts Feel free to copy/paste/comment out as needed. Find and replace `home-section-1` to rename variables and sections appropriately Example of usage: PQL36 -------------------------------------------------------------------------------- */ /* * Element within the section that will have the offset -------------------------------------------------------------------------------- */ .home-section-1-offset-element { position: relative; z-index: 1; margin-bottom: calc(var(--home-section-1-offset) * -1); } /* * Element within a adjacent section/s AND layouts. apply to all adjactent sections' or layouts' elements that will contain the buffer for offsets -------------------------------------------------------------------------------- */ .has-home-section-1-offset:is(.template-wrapper:has(:is(main, .main) > .home-section-1:first-child) *, .home-section:not(.home-section-1):has(+ .home-section-1), .home-section:not(.home-section-1):has(+ .home-section-1) *)::after { content: ""; height: var(--home-section-1-offset); display: block; flex: 0 0 auto; width: 100%; } .has-home-section-1-offset .home-section-1-offset-element { margin-top: calc(var(--home-section-1-offset) * -1); } .has-home-section-1-offset:is(.template-wrapper:has(:is(main, .main) > .home-section-1:last-child) *, .home-section-1 + .home-section:not(.home-section-1), .home-section-1 + .home-section:not(.home-section-1) *)::before { content: ""; height: var(--home-section-1-offset); display: block; flex: 0 0 auto; width: 100%; } #home-section-1 { padding-block: 52px 84px; } #home-section-1 .section-container { --container-gutter: 30px; } #home-section-1 .section-header { border-top: none; } #home-section-1 .section-blocks { padding-block: 5vw; padding-inline: 3rem; display: flex; flex-wrap: nowrap; align-items: center; gap: 2rem; background-color: var(--scheme-bg, var(--color-dark-alt)); color: var(--scheme-fg, var(--color-light)); position: relative; z-index: 2; } #home-section-1 .section-heading { margin-bottom: 13px; } @media only screen and (min-width: 768px) { #home-section-1 .section-container { --container-gutter: 84px; } #home-section-1 .section-header { text-align: center; max-width: 600px; margin-inline: auto; flex-direction: column; } #home-section-1 .section-heading { font-size: 50px; line-height: 55px; margin-bottom: 25px; } #home-section-1 .section-heading::before { display: none; } #home-section-1 .section-content { max-width: 600px; margin-inline: auto; } #home-section-1 .section-lead { max-width: 100%; font-size: 22px; line-height: 28px; } } @media only screen and (min-width: 1200px) { #home-section-1 { padding-block: 117px 100px; } #home-section-1 .section-container { --container-gutter: 0px; max-width: 100% !important; } #home-section-1 .section-lead { animation-delay: 500ms; } #home-section-1 .section-grid { display: grid; grid-template-columns: 1fr 600px 1fr; justify-content: space-between; align-items: stretch; } #home-section-1 .section-image-wrapper { overflow: hidden; border-radius: 5px; position: sticky; max-width: 100%; display: flex; } #home-section-1 .section-image-wrapper :where(img) { min-height: 100%; } #home-section-1 .section-image-one { display: flex; align-items: flex-start; justify-content: flex-start; } #home-section-1 .section-image-one .section-image-wrapper { transform: translateX(-2%); max-width: 251px; margin-top: -37px; top: calc(var(--layout-header-height) + 40px); } #home-section-1 .section-image-two { padding-bottom: 175px; display: flex; align-items: flex-end; justify-content: flex-end; } #home-section-1 .section-image-two .section-image-wrapper { transform: translateX(4%); max-width: 295px; bottom: 40px; } } @media only screen and (min-width: 1400px) { #home-section-1 { padding-block: 120px 144px; } #home-section-1 .section-header { max-width: 770px; } #home-section-1 .section-heading { font-size: 60px; line-height: 65px; max-width: 600px; margin-inline: auto; } #home-section-1 .section-image-one .section-image-wrapper { max-width: 277px; margin-top: -80px; } #home-section-1 .section-image-two .section-image-wrapper { max-width: 326px; transform: translateX(22%); } #home-section-1 .section-grid { grid-template-columns: 1fr 700px 1fr; } #home-section-1 .section-content { max-width: 100%; } #home-section-1 .section-lead { letter-spacing: -.025em; } } @media only screen and (min-width: 1900px) { #home-section-1 .section-header { max-width: 830px; } #home-section-1 .section-heading { font-size: 65px; line-height: 70px; max-width: 640px; } #home-section-1 .section-image-one .section-image-wrapper { max-width: 364px; margin-top: -206px; } #home-section-1 .section-image-two .section-image-wrapper { max-width: 429px; transform: translateX(10%); } #home-section-1 .section-lead { font-size: 24px; line-height: 30px; } } /* * Home Section 2 -------------------------------------------------------------------------------- */ #home-section-2 { background-color: var(--scheme-bg, var(--color-light-alt)); } #home-section-2 .section-container { --container-gutter: 30px; } #home-section-2 .section-cta { margin-top: 25px; } #home-section-2 .section-cta .button { padding-inline: 26px 22px; letter-spacing: 0; } #home-section-2 .section-content { margin-top: 68px; } #home-section-2 .section-results .swiper-custom-buttons { display: flex; justify-content: center; margin-top: 37px; gap: 9px; } #home-section-2 .section-results .swiper-button-prev, #home-section-2 .section-results .swiper-button-next { position: relative; top: unset; left: unset; right: unset; bottom: unset; margin-top: 0; } #home-section-2 .section-results .swiper-slide { padding: 0 16px 16px 0; } #home-section-2 .section-results .swiper-slide::before { content: ""; position: absolute; top: 16px; right: 0; left: 16px; bottom: 0; border: 1px solid #877571; display: block; z-index: -1; border-radius: 5px; } #home-section-2 .section-results .result { background: var(--color-light); border-radius: 5px; padding: 47px 20px 50px; position: relative; z-index: 1; } @media only screen and (min-width: 768px) { #home-section-2 { padding-block: 100px; } #home-section-2 .section-results .swiper-custom-buttons { margin-top: 53px; } #home-section-2 .section-results .result { padding: 49px 38px 58px; } } @media only screen and (min-width: 1200px) { #home-section-2 { padding-block: 97px 417px; } #home-section-2 .section-container { --container-gutter: 89px; } #home-section-2 .section-results .swiper-custom-buttons { margin-top: 43px; justify-content: flex-start; } } @media only screen and (min-width: 1400px) { #home-section-2 { padding-block: 126px 470px; } #home-section-2 .section-cta { margin-top: 35px; } #home-section-2 .section-content { max-width: calc(100% - 108px); margin-inline: auto; } #home-section-2 .section-results .result { padding: 60px 50px 70px; } } @media only screen and (min-width: 1900px) { #home-section-2 { padding-block: 147px 575px; } #home-section-2 .section-container { --container-gutter: 180px; } #home-section-2 .section-content { max-width: 100%; } } /* * Home Section 3 -------------------------------------------------------------------------------- */ #home-section-3 { padding-block: 0; } #home-section-3 .section-container { --container-gutter: 0px; } #home-section-3 .section-testimonials { padding: 55px 47px 60px; } #home-section-3 .section-testimonials-container { background: rgba(16, 37, 74, .9); color: var(--color-light); } #home-section-3 .section-testimonials .swiper-custom-buttons { display: flex; justify-content: center; gap: 10px; margin-top: 45px; } #home-section-3 .section-testimonials .swiper-button-prev, #home-section-3 .section-testimonials .swiper-button-next { position: relative; top: unset; bottom: unset; margin-top: 0; background: none; border: 2px solid var(--color-primary); } #home-section-3 .section-testimonials .swiper-button-prev:is(:hover, :focus), #home-section-3 .section-testimonials .swiper-button-next:is(:hover, :focus) { background: var(--color-primary); } #home-section-3 .section-testimonials .swiper-button-prev .button-slider-glyph:empty::after, #home-section-3 .section-testimonials .swiper-button-next .button-slider-glyph:empty::after { margin-bottom: 1px; } @media only screen and (min-width: 768px) { #home-section-3 { padding: 60px 55px 50px; } #home-section-3 .section-testimonials { padding-block: 65px 56px; } #home-section-3 .section-testimonials .swiper { max-width: 100%; --swiper-custom-arrow-offset-x: 0; } #home-section-3 .section-testimonials-container { border-radius: 5px; } } @media only screen and (min-width: 768px) and (max-width: 1199px) { #home-section-3 .section-testimonials { display: flex; justify-content: center; } #home-section-3 .section-testimonials .swiper { padding-bottom: 89px; } #home-section-3 .section-testimonials .swiper-custom-buttons { position: absolute; bottom: 0; width: 100%; justify-content: center; } } @media only screen and (min-width: 1200px) { #home-section-3 { margin-inline: 89px; margin-top: -268px; } #home-section-3 .section-testimonials { padding-block: 60px 68px; } #home-section-3 .section-testimonials .swiper-custom-buttons { margin: 0; } #home-section-3 .section-testimonials .swiper-button-prev, #home-section-3 .section-testimonials .swiper-button-next { position: absolute; top: 50%; transform: translateY(-50%); } } @media only screen and (min-width: 1400px) { #home-section-3 { margin-top: -312px; padding: 97px 163px; } #home-section-3 .section-testimonials { padding: 58px 57px 96px; } } @media only screen and (min-width: 1900px) { #home-section-3 { margin-top: -400px; padding: 131px 233px 113px; } #home-section-3 .section-testimonials { padding: 98px 120px 111px; } } /* * Home Section 4 -------------------------------------------------------------------------------- */ #home-section-4 { padding-block: 70px 80px; background-color: var(--color-light); color: var(--color-dark); position: relative; z-index: 1; } #home-section-4::before { content: ""; bottom: 0; right: 0; left: 0; top: 446px; background: var(--color-light-alt); display: block; position: absolute; } #home-section-4 .section-container { --container-gutter: 30px; } #home-section-4 .section-cta { margin-top: 14px; } #home-section-4 .section-cta .swiper-custom-buttons { display: none; } #home-section-4 .section-lead-cr { margin-top: 80px; } #home-section-4 .section-lead-cr > p { font-size: 28px; line-height: 34px; color: var(--color-primary); letter-spacing: -.025em; } #home-section-4 .section-images { margin-top: 70px; } #home-section-4 .section-content-right { margin-top: 75px; } #home-section-4 .section-content-right .button.button-style-link { color: var(--color-primary); text-transform: capitalize; } #home-section-4 .section-content-right .button.button-style-link::after { background-image: url("data:image/svg+xml,<%3Fxml version=\"1.0\" encoding=\"UTF-8\"%3F>"); } #home-section-4 .section-cr-snippet { margin-top: 65px; } #home-section-4 .section-cr-snippet .cr-snippet { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; max-width: 260px; margin-inline: auto; } #home-section-4 .section-cr-snippet .cr-snippet-content { display: flex; flex-direction: column; gap: 25px; margin-top: 2rem; } #home-section-4 .section-cr-snippet .cr-snippet-amount { color: var(--color-primary); font-size: 45px; line-height: 1; font-weight: 500; } #home-section-4 .section-cr-snippet .cr-snippet-desc { font-size: 17px; line-height: 20px; color: #091a32; font-weight: 500; } #home-section-4 .section-profiles .swiper-custom-buttons { display: flex; justify-content: center; gap: 10px; margin-top: 45px; } #home-section-4 .section-profiles .swiper-button-prev, #home-section-4 .section-profiles .swiper-button-next { position: relative; top: unset; left: unset; margin-top: 0; } @media only screen and (min-width: 768px) { #home-section-4 { padding-block: 167px 143px; } #home-section-4 .section-container { --container-gutter: 53px; } #home-section-4 .section-header { margin-bottom: 93px; } #home-section-4 .section-cta { margin-top: 25px; } #home-section-4 .section-profiles .swiper-custom-buttons { margin-top: 60px; } #home-section-4 .section-lead-cr { margin-top: 129px; padding-inline: 30px; } #home-section-4 .section-lead-cr > p { font-size: 35px; line-height: 45px; } #home-section-4 .section-cr-snippet .cr-snippet { margin-right: 0; } #home-section-4 .section-images { margin-top: 150px; } #home-section-4 .section-grid { padding-inline: 30px; } #home-section-4 .section-content-right { max-width: 447px; margin-inline: auto; } } @media only screen and (min-width: 1200px) { #home-section-4 { padding-block: 150px 103px; } #home-section-4 .section-container { --container-gutter: 0; } #home-section-4 .section-header { margin-inline: 89px; } #home-section-4 .section-content-right { margin-top: 0; } #home-section-4 .section-images { margin-top: 60px; margin-bottom: -274px; } #home-section-4 .section-cta { display: flex; align-items: center; height: 100%; gap: 38px; } #home-section-4 .section-cta .swiper-custom-buttons { display: flex; align-items: center; gap: 9px; } #home-section-4 .section-cta .swiper-custom-buttons .button { position: relative; top: unset; bottom: unset; left: unset; right: unset; margin: 0; } #home-section-4 .section-lead-cr { margin-top: 198px; padding-inline: 0; display: grid; grid-template-columns: 1fr 400px; gap: 185px; margin-left: 89px; } #home-section-4 .section-grid { padding-inline: 89px; display: grid; grid-template-columns: 506px 1fr; gap: 84px; padding-right: 143px; margin-top: 147px; } #home-section-4 .section-cr-snippet { margin-top: 10px; } #home-section-4 .section-cr-snippet .cr-snippet { margin-left: 0; } #home-section-4 .section-profiles { margin-inline: 89px; } #home-section-4 .section-profiles .swiper-custom-buttons { display: none; } } @media only screen and (min-width: 1400px) { #home-section-4 { padding-block: 130px 160px; } #home-section-4::before { top: 544px; } #home-section-4 .section-header { margin-bottom: 138px; } #home-section-4 .section-lead-cr { margin-top: 221px; grid-template-columns: 1fr 465px; gap: 244px; } #home-section-4 .section-lead-cr > p { font-size: 40px; line-height: 50px; } #home-section-4 .section-grid { margin-top: 224px; padding-left: 83px; padding-right: 145px; grid-template-columns: 616px 1fr; gap: 149px; } #home-section-4 .section-images { margin-top: 0; margin-bottom: -330px; } #home-section-4 .section-cr-snippet .cr-snippet { gap: 25px; align-items: center; max-width: 280px; } #home-section-4 .section-cr-snippet .cr-snippet-amount { font-size: 50px; } #home-section-4 .section-cr-snippet .cr-snippet-content { gap: 28px; } #home-section-4 .section-cr-snippet .cr-snippet-desc { font-size: 18px; } #home-section-4 .section-profiles { margin-inline: 151px; } } @media only screen and (min-width: 1900px) { #home-section-4 { padding-block: 166px 287px; } #home-section-4::before { top: 594px; } #home-section-4 .section-header { margin-inline: 181px; } #home-section-4 .section-profiles { max-width: 1194px; margin-inline: auto; } #home-section-4 .section-lead-cr { margin-top: 235px; grid-template-columns: 1fr 576px; gap: 315px; margin-left: 272px; } #home-section-4 .section-lead-cr > p { font-size: 50px; line-height: 55px; } #home-section-4 .section-cr-snippet .cr-snippet { max-width: 290px; } #home-section-4 .section-cr-snippet .cr-snippet-amount { font-size: 55px; } #home-section-4 .section-grid { margin-top: 195px; max-width: 1465px; margin-inline: auto; padding: 0; gap: 189px; grid-template-columns: 755px 1fr; } #home-section-4 .section-images { margin-bottom: -498px; } #home-section-4 .section-content-right { max-width: 475px; margin-left: 0; } #home-section-4 .section-content-right .content { font-size: 18px; line-height: 28px; } #home-section-4 .section-content-right .button.button-style-link { margin-top: 12px; } #home-section-4 .section-cta { gap: 46px; } } /* * Home Section 5 -------------------------------------------------------------------------------- */ #home-section-5 { padding-block: 68px 94px; background-color: var(--scheme-bg, var(--color-light)); } #home-section-5 .section-container { --container-gutter: 30px; } #home-section-5 .section-awards { margin-top: 84px; } @media only screen and (min-width: 768px) { #home-section-5 { padding-block: 127px 110px; } #home-section-5 .section-container { --container-gutter: 53px; } #home-section-5 .section-content { padding-inline: 21px; } #home-section-5 .section-awards { margin-top: 125px; } } @media only screen and (min-width: 1200px) { #home-section-5 { padding-block: 289px 104px; } #home-section-5 .section-container { --container-gutter: 89px; } #home-section-5 .section-content { padding-inline: 0; max-width: 650px; margin-inline: auto; } } @media only screen and (min-width: 1400px) { #home-section-5 { padding-block: 321px 113px; } #home-section-5 .section-awards { margin-top: 157px; } #home-section-5 .section-content { max-width: 700px; } } @media only screen and (min-width: 1900px) { #home-section-5 { padding-block: 363px 162px; } #home-section-5 .section-awards { margin-top: 194px; } } /* * Home Section 6 -------------------------------------------------------------------------------- */ /* * Home Section 7 -------------------------------------------------------------------------------- */ #home-section-7 { background-color: var(--scheme-bg, var(--color-light-alt)); } /* ================================================================================ * 404 ================================================================================ */ /* Template 404 https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/template/404.md -------------------------------------------------------------------------------- */ /* * 404 Related Classes -------------------------------------------------------------------------------- */ /* * 404 Page -------------------------------------------------------------------------------- */ body.error404 {} :is(.error404-page, #error404-page) { text-align: center; } :is(.error404-page, #error404-page) .section-heading { color: var(--color-primary); } @media only screen and (min-width: 1400px) { :is(.error404-page, #error404-page) .section-heading { font-size: 100px; line-height: 100px; margin-bottom: 22px; } :is(.error404-page, #error404-page) .section-content > p { font-size: 24px; line-height: 30px; } } /* ================================================================================ * About Template ================================================================================ */ /* Template About https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/template/about.md -------------------------------------------------------------------------------- */ /* * About Related Classes -------------------------------------------------------------------------------- */ .about-section .section-heading:last-child:not(.primary-heading) { margin-bottom: 0; } /* * About Template -------------------------------------------------------------------------------- */ body.onep21-template-about {} #about-banner { /* selector about banner if enabled */ background-color: var(--color-light-alt); } :is(.about-page, #about-page) { padding-block: 0; } /* * About Section 1 -------------------------------------------------------------------------------- */ .about-section-1 { padding-block: 0 57px; background-color: var(--color-light-alt); } .about-section-1 .section-container { --container-gutter: 30px; } .about-section-1 .section-featured { margin-top: 88px; } .about-section-1 .section-featured .carousel { --carousel-height: 32px; padding-bottom: 58px; } .about-section-1 .section-featured .carousel-item-image svg :where(path) { fill: #877571; opacity: .6; } .about-section-1 .section-featured .awards-title { margin-bottom: 50px; color: var(--color-primary); } .about-section-1 .section-featured .swiper-pagination { bottom: 0; } .about-section-1 .section-featured .swiper-pagination-bullet { --swiper-pagination-bullet-inactive-color: #877571; } .about-section-1 .section-images.two-images .two-images-wrapper { position: relative; } .about-section-1 .section-images .image-two { max-width: 183px; margin-top: -78px; } .about-section-1 .section-images .image-two .video-thumbnail { --video-thumbnail-aspect-w: 183; --video-thumbnail-aspect-l: 134; } .about-section-1 .section-images .image-three { bottom: 163px; left: 33px; } .about-section-1 .section-content { margin-top: 73px; } @media only screen and (min-width: 768px) { .about-section-1 .section-container { --container-gutter: 84px; } .about-section-1 .section-grid { margin-top: 55px; } .about-section-1 .section-content { margin-top: 120px; } .about-section-1 .section-featured { margin-top: 140px; } .about-section-1 .section-featured .carousel { --carousel-height: 37px; } .about-section-1 .section-images { max-width: 480px; margin-inline: auto; } .about-section-1 .section-images .image-one { max-width: 321px; } .about-section-1 .section-images .image-two { max-width: 292px; margin-top: -123px; } .about-section-1 .section-images .image-two .video-thumbnail .video-button-default { --video-button-size: 99px; } .about-section-1 .section-images .image-three { max-width: 135px; bottom: 266px; left: 53px; } } @media only screen and (min-width: 1200px) { .about-section-1 { padding-block: 0 141px; } .about-section-1 .section-container { --container-gutter: 80px; } .about-section-1 .section-grid { display: grid; grid-template-columns: 427px 1fr; -moz-column-gap: 75px; column-gap: 75px; margin-top: 24px; } .about-section-1 .section-featured { margin-top: 157px; } .about-section-1 .section-featured .awards-title { font-size: 14px; line-height: 16px; margin-bottom: 65px; } .about-section-1 .section-featured .carousel { padding-bottom: 0; } .about-section-1 .section-images { max-width: 100%; } .about-section-1 .section-images .image-one { max-width: 285px; } .about-section-1 .section-images .image-two { max-width: 260px; margin-top: -110px; } .about-section-1 .section-images .image-three { bottom: 237px; left: 47px; max-width: 120px; } .about-section-1 .section-content { margin-top: 0; } } @media only screen and (min-width: 1400px) { .about-section-1 { padding-block: 0 120px; } .about-section-1 .section-container { --container-gutter: 114px; } .about-section-1 .section-grid { margin-top: 44px; grid-template-columns: 479px 1fr; gap: 93px; } .about-section-1 .section-images .image-one { max-width: 320px; } .about-section-1 .section-images .image-two { max-width: 292px; margin-top: -123px; } .about-section-1 .section-images .image-three { bottom: 266px; left: 53px; max-width: 135px; } } @media only screen and (min-width: 1900px) { .about-section-1 { padding-block: 0 142px; } .about-section-1 .section-container { --container-gutter: 260px; } .about-section-1 .section-grid { grid-template-columns: 593px 1fr; -moz-column-gap: 157px; column-gap: 157px; } .about-section-1 .section-featured { margin-top: 212px; } .about-section-1 .section-images .image-one { max-width: 397px; } .about-section-1 .section-images .image-two { max-width: 361px; margin-top: -154px; } .about-section-1 .section-images .image-two .video-thumbnail .video-button-default { --video-button-size: 122px; } .about-section-1 .section-images .image-three { bottom: 328px; left: 66px; max-width: 167px; } } /* * About Section 2 -------------------------------------------------------------------------------- */ .about-section-2 { padding-block: 87px 80px; color: var(--scheme-bg, var(--color-dark-alt)); background-color: var(--scheme-fg, var(--color-light)); } .about-section-2 .section-container { --container-gutter: 30px; } .about-section-2 .section-header { border-top: 0; padding: 0; margin-bottom: 71px; justify-content: center; } .about-section-2 .section-header blockquote { font-size: 25px; line-height: 32px; margin: 0; } .about-section-2 .section-header blockquote p { margin-bottom: 10px; } .about-section-2 .section-images .image-one { max-width: 190px; margin-right: auto; margin-left: 0; } .about-section-2 .section-images .image-two { max-width: 199px; margin-right: 0; margin-left: auto; margin-top: -56px; } .about-section-2 .section-awards { margin-top: 88px; } @media only screen and (min-width: 768px) { .about-section-2 { padding-block: 101px 95px; } .about-section-2 .section-container { --container-gutter: 84px; } .about-section-2 .section-header blockquote { font-size: 35px; line-height: 45px; } .about-section-2 .section-header blockquote p { margin: 0; } .about-section-2 .section-header blockquote cite { font-size: 12px; line-height: 14px; } .about-section-2 .section-images { max-width: 462px; margin-top: 125px; } .about-section-2 .section-images .image-one { max-width: 292px; } .about-section-2 .section-images .image-two { max-width: 307px; margin-top: -86px; } } @media only screen and (min-width: 1200px) { .about-section-2 { padding-block: 142px 120px; } .about-section-2 .section-container { --container-gutter: 80px; } .about-section-2 .section-grid { display: grid; grid-template-columns: 1fr 412px; gap: 79px; } .about-section-2 .section-images { max-width: 100%; margin-top: 0; } .about-section-2 .section-images .image-one { max-width: 260px; } .about-section-2 .section-images .image-two { max-width: 274px; margin-top: -77px; } .about-section-2 .section-awards { margin-top: 133px; } .about-section-2 .section-header { margin-bottom: 160px; } .about-section-2 .section-header blockquote { max-width: 737px; } .about-section-2 .section-header blockquote cite { font-size: 14px; line-height: 16px; } } @media only screen and (min-width: 1400px) { .about-section-2 { padding-block: 150px 145px; } .about-section-2 .section-container { --container-gutter: 114px; } .about-section-2 .section-awards { margin-top: 202px; } .about-section-2 .section-grid { grid-template-columns: 1fr 462px; -moz-column-gap: 110px; column-gap: 110px; } .about-section-2 .section-images .image-one { max-width: 292px; } .about-section-2 .section-images .image-two { max-width: 307px; margin-top: -90px; } .about-section-2 .section-content { margin-top: 33px; } .about-section-2 .section-header { margin-bottom: 180px; } .about-section-2 .section-header blockquote { font-size: 40px; line-height: 50px; max-width: 840px; } } @media only screen and (min-width: 1900px) { .about-section-2 { padding-block: 204px; } .about-section-2 .section-container { --container-gutter: 120px; } .about-section-2 .section-grid { grid-template-columns: 1fr 577px; -moz-column-gap: 174px; column-gap: 174px; max-width: 1400px; margin-inline: auto; } .about-section-2 .section-images .image-one { max-width: 364px; } .about-section-2 .section-images .image-two { max-width: 383px; margin-top: -107px; } .about-section-2 .section-header { margin-bottom: 218px; } .about-section-2 .section-header blockquote { font-size: 50px; line-height: 55px; max-width: 1055px; } } /* * About Section 3 -------------------------------------------------------------------------------- */ /* ================================================================================ FAQs Template ================================================================================ */ /* Template FAQs https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/template/faqs.md -------------------------------------------------------------------------------- */ body.onep21-template-faqs {} #faqs-banner {} :is(.faqs-page, #faqs-page) {} /* ================================================================================ * Practice Areas Template ================================================================================ */ /* Template Practice Areas https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/template/practice-areas.md -------------------------------------------------------------------------------- */ /* * Practice Areas Grid Template -------------------------------------------------------------------------------- */ body.onep21-template-practice-areas {} body.onep21-template-practice-areas .template-wrapper { background-color: var(--color-light-alt); } #practice-areas-banner {} :is(.practice-areas-page, #practice-areas-page) {} :is(.practice-areas-page, #practice-areas-page) .practice-area-menu:is(.columns) { --columns-gap-x: 4rem; justify-content: center; justify-items: center; } :is(.practice-areas-page, #practice-areas-page) .practice-area { padding-block: 41px; padding-inline: 32px; box-shadow: 0 10px 10px rgba(0, 0, 0, .1); border-radius: 5px; background-color: var(--color-light); } :is(.practice-areas-page, #practice-areas-page) .practice-area:nth-last-child(n+2) { margin-bottom: 3.75rem; } :is(.practice-areas-page, #practice-areas-page) .section-container { --container-gutter: 30px; } @media only screen and (min-width: 768px) { :is(.practice-areas-page, #practice-areas-page) { padding-bottom: 161px; } :is(.practice-areas-page, #practice-areas-page) .practice-area-menu:is(.columns) { --columns-number: 1; } :is(.practice-areas-page, #practice-areas-page) .practice-area { padding-block: 80px 97px; padding-inline: 64px; } :is(.practice-areas-page, #practice-areas-page) .section-container { --container-gutter: 84px; } } @media only screen and (min-width: 1200px) { :is(.practice-areas-page, #practice-areas-page) { padding-bottom: 208px; } :is(.practice-areas-page, #practice-areas-page) .practice-area-menu:is(.columns) { --columns-number: 2; --columns-gap-x: 50px; } :is(.practice-areas-page, #practice-areas-page) .practice-area { padding-block: 89px; padding-inline: 100px; } :is(.practice-areas-page, #practice-areas-page) .practice-area-menu li:nth-child(-n+2) { border-top: 0; } :is(.practice-areas-page, #practice-areas-page) .section-container { --container-gutter: 80px; } } @media only screen and (min-width: 1400px) { :is(.practice-areas-page, #practice-areas-page) .practice-area-menu:is(.columns) { --columns-number: 3; --columns-gap-x: 63px; } :is(.practice-areas-page, #practice-areas-page) .practice-area { padding-block: 80px 97px; padding-inline: 73px; } :is(.practice-areas-page, #practice-areas-page) .practice-area-menu li:nth-child(-n+3) { border-top: 0; } :is(.practice-areas-page, #practice-areas-page) .section-container { --container-gutter: 114px; } } @media only screen and (min-width: 1900px) { :is(.practice-areas-page, #practice-areas-page) { padding-bottom: 223px; } :is(.practice-areas-page, #practice-areas-page) .practice-area-menu:is(.columns) { --columns-number: 4; } :is(.practice-areas-page, #practice-areas-page) .practice-area-menu li:nth-child(-n+4) { border-top: 0; } :is(.practice-areas-page, #practice-areas-page) .section-container { --container-gutter: 260px; } } /* ================================================================================ * Profile Detail Template ================================================================================ */ /* Template Profile Areas https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/template/profile.md -------------------------------------------------------------------------------- */ /* * Profile Contact Info -------------------------------------------------------------------------------- */ .profile-contact a:not(:hover, :focus) { color: inherit; text-decoration: none; } .profile-contact-item-label { margin-right: .5em; } /* * Profile Detail Template -------------------------------------------------------------------------------- */ body.onep21-template-profile {} #profile-banner {} :is(.profile-page, #profile-page) { /* template main styles */ padding-block: 44px 70px; background-color: var(--color-light-alt); } :is(.profile-page, #profile-page) .default-sections { --default-gap-y: 75px; } :is(.profile-page, #profile-page) .default-section-sidebar.section-lists { float: none; clear: none; } :is(.profile-page, #profile-page) .default-section.section-header { border-top: 1px solid #877571; padding-top: 0; margin-bottom: 46px; } :is(.profile-page, #profile-page) .default-section.section-image { position: relative; padding: 0 16px 0 0; } :is(.profile-page, #profile-page) .default-section.section-image::before { content: ""; display: block; border: 1px solid var(--color-primary); position: absolute; top: 16px; right: 0; bottom: -16px; left: 16px; border-radius: 5px; } :is(.profile-page, #profile-page) .default-section .section-heading { position: relative; padding-top: 16px; max-width: -moz-max-content; max-width: max-content; max-width: 100%; font-size: 35px; margin-bottom: 7px; margin-inline: auto; } :is(.profile-page, #profile-page) .default-section .section-heading::before { content: ""; width: 100%; position: absolute; top: -1.5px; left: 0; right: 0; height: 2px; background: var(--color-primary); z-index: 1; } :is(.profile-page, #profile-page) .section-awards { margin-top: 85px; } :is(.profile-page, #profile-page) .section-awards-container { padding-block: 0; } :is(.profile-page, #profile-page) .section-lists .widget { background: none; box-shadow: none; padding: 0; } :is(.profile-page, #profile-page) .section-lists .widget :is(.content :where(ol, ul, dd)) { padding-left: 17px; } :is(.profile-page, #profile-page) .section-lists .widget :is(.content :where(ul)) > li::before { margin-right: 0; } :is(.profile-page, #profile-page) .section-lists .widget > h3 { text-align: center; color: var(--color-primary); font-size: 14px; line-height: 16px; letter-spacing: .1em; margin-bottom: 45px; } :is(.profile-page, #profile-page) .section-lists .widget > h3::before, :is(.profile-page, #profile-page) .section-lists .widget > h3::after { content: ""; height: 1px; width: 100%; background: #877571; display: block; margin-bottom: 21px; } :is(.profile-page, #profile-page) .section-lists .widget > h3::after { display: none; } :is(.profile-page, #profile-page) .section-profile-wrapper { background-color: var(--color-light); box-shadow: 0 10px 10px rgba(0, 0, 0, .1); border-radius: 5px; padding: 48px 27px 76px; } :is(.profile-page, #profile-page) .section-heading { max-width: none; } :is(.profile-page, #profile-page) .section-subheader { margin-bottom: 2rem; } :is(.profile-page, #profile-page) .section-divider { --fancy-border-margin-y: var(--default-gap-y); } @media only screen and (min-width: 768px) { :is(.profile-page, #profile-page) { padding-block: 83px 91px; } :is(.profile-page, #profile-page) .default-sections { --default-gap-y: 95px; } :is(.profile-page, #profile-page) .default-section .section-heading { max-width: -moz-max-content; max-width: max-content; margin-left: 0; text-align: left; font-size: 40px; line-height: 45px; } :is(.profile-page, #profile-page) .default-section .section-subheading { text-align: left; font-size: 15px; line-height: 21px; } :is(.profile-page, #profile-page) .default-section.section-header { margin-bottom: 78px; } :is(.profile-page, #profile-page) .section-profile-wrapper { padding: 70px 50px 80px; } :is(.profile-page, #profile-page) .section-awards-container { padding-inline: 0; } :is(.profile-page, #profile-page) .section-lists .widget > h3 { display: grid; grid-template-columns: max-content 1fr; gap: 30px; align-items: center; padding: 0; margin-bottom: 67px; } :is(.profile-page, #profile-page) .section-lists .widget > h3::after { display: inline-block; grid-column: unset; margin: 0; } :is(.profile-page, #profile-page) .section-lists .widget > h3::before { display: none; } :is(.profile-page, #profile-page) .section-lists .list-items { padding-inline: 80px; } } @media only screen and (min-width: 1200px) { :is(.profile-page, #profile-page) { padding-block: 121px; } :is(.profile-page, #profile-page) .default-sections { --default-sidebar-width: 300px; --default-gap-x: 50px; } :is(.profile-page, #profile-page) .default-sections :is(:where(*.h2), .content :where(h2)) { font-size: 22px; line-height: 28px; } :is(.profile-page, #profile-page) .default-section .section-heading { font-size: 45px; line-height: 55px; } :is(.profile-page, #profile-page) .default-section .section-subheading { font-size: 16px; line-height: 21px; } :is(.profile-page, #profile-page) .section-awards { margin-top: 160px; } :is(.profile-page, #profile-page) .section-lists { width: 100%; } :is(.profile-page, #profile-page) .section-lists .list-items { display: grid; grid-template-columns: repeat(2, auto); -moz-column-gap: 72px; column-gap: 72px; } :is(.profile-page, #profile-page) .section-profile-wrapper { padding: 88px 80px 100px; } } @media only screen and (min-width: 1400px) { :is(.profile-page, #profile-page) { padding-block: 130px; } :is(.profile-page, #profile-page) .default-sections { --default-sidebar-width: 342px; } :is(.profile-page, #profile-page) .default-section.section-header { margin-bottom: 85px; } :is(.profile-page, #profile-page) .default-section .section-heading { font-size: 50px; line-height: 50px; } :is(.profile-page, #profile-page) .section-profile-wrapper { padding: 96px 96px 130px; } :is(.profile-page, #profile-page) .section-awards { margin-top: 152px; } } @media only screen and (min-width: 1900px) { :is(.profile-page, #profile-page) { padding-block: 145px 180px; } :is(.profile-page, #profile-page) .default-sections { --default-sidebar-width: 504px; --default-gap-x: 170px; } :is(.profile-page, #profile-page) .section-container { --container-gutter: 120px; } :is(.profile-page, #profile-page) .section-awards { max-width: 1400px; margin-inline: auto; } :is(.profile-page, #profile-page) .section-lists .list-items { padding-inline: 160px; } :is(.profile-page, #profile-page) .section-profile-wrapper { padding: 122px 140px 180px; } } @media only screen and (max-width: 1199px) { :is(.profile-page, #profile-page) .section-image { max-width: 300px; margin-left: auto; margin-right: auto; } :is(.profile-page, #profile-page) .section-awards, :is(.profile-page, #profile-page) .section-header { text-align: center; } } :is(.profile-page, #profile-page).profile-page-sections { padding-block: 0; --profile-image-offset: -70px; } :is(.profile-page, #profile-page).profile-page-sections #profile-section-2 { position: relative; z-index: 1; } :is(.profile-page, #profile-page).profile-page-sections #profile-section-1 { padding-bottom: 1px; } @media only screen and (min-width: 1200px) { :is(.profile-page, #profile-page).profile-page-sections { --profile-image-offset: 80px; --profile-sidebar-offset: 0px; } :is(.profile-page, #profile-page).profile-page-sections #profile-section-1 .section-block.default-section-sidebar { margin-bottom: var(--profile-image-offset); } :is(.profile-page, #profile-page).profile-page-sections #profile-section-2 .section-block.default-section-sidebar { margin-top: calc(var(--profile-sidebar-offset) * -1); } :is(.profile-page, #profile-page).profile-page-sections #profile-section-2 .section-block.default-section-sidebar::before { content: ""; display: block; height: 1px; margin-top: calc(( var(--profile-image-offset) - 1px ) * -1); } } @media only screen and (min-width: 1400px) { :is(.profile-page, #profile-page).profile-page-sections { --profile-image-offset: -110px; } } @media only screen and (max-width: 1199px) { :is(.profile-page, #profile-page).profile-page-sections #profile-section-1 { padding-bottom: 1px; } :is(.profile-page, #profile-page).profile-page-sections #profile-section-1 .section-container { margin-bottom: var(--profile-image-offset); } :is(.profile-page, #profile-page).profile-page-sections #profile-section-2 .section-container { margin-top: calc(( var(--profile-image-offset) ) * -1); } } #profile-section-1 { padding-top: 3rem; position: relative; z-index: 1; color: var(--scheme-fg, var(--color-light)); background: var(--scheme-bg, var(--color-dark-alt)); } #profile-section-1 .section-blocks { grid-template-rows: 1fr auto; } @media only screen and (min-width: 1200px) { #profile-section-1 { padding-top: 6rem; } #profile-section-1 .default-section-sidebar { align-self: end; } #profile-section-1 .default-section-main { align-self: center; } #profile-section-1 .section-image { grid-row: 1/-1; } } @media only screen and (max-width: 1199px) { #profile-section-1 { text-align: center; } } @media only screen and (min-width: 1200px) { #profile-section-2 { padding-top: 5rem; } } :is(.profile-page, #profile-page).profile-page-full { padding-block: 0; } :is(.profile-page, #profile-page).profile-page-full .section-block:where(:nth-last-child(n+2)) { margin-bottom: var(--default-gap-y); } /* ================================================================================ * Case Results Template ================================================================================ */ /* Template Results https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/template/results.md -------------------------------------------------------------------------------- */ /* * Results Template -------------------------------------------------------------------------------- */ body.onep21-template-results {} body.onep21-template-results .template-wrapper { background-color: var(--color-light-alt); } #results-banner {} :is(.results-page, #results-page) {} :is(.results-page, #results-page) .results:is(.columns) { --columns-gap-x: 3rem; --columns-gap-y: 3rem; justify-content: center; justify-items: center; padding-right: 14px; } :is(.results-page, #results-page) .result { padding: 0; max-width: 300px; border-radius: 5px; background-color: #fff; box-shadow: 0 10px 10px rgba(0, 0, 0, .1); position: relative; } :is(.results-page, #results-page) .result::before { content: ""; border: 1px solid #877571; border-radius: inherit; display: block; position: absolute; top: 16px; right: -16px; bottom: -16px; left: 16px; z-index: -1; } :is(.results-page, #results-page) .result-container { padding-inline: 20px; padding-block: 50px; border-radius: inherit; } :is(.results-page, #results-page) .result-pointer-reference:is(:hover, :focus-within) {} :is(.results-page, #results-page) .section-container { --container-gutter: 32px; } @media only screen and (min-width: 768px) { :is(.results-page, #results-page) .results:is(.columns) { --columns-number: 2; --columns-gap-x: 40px; --columns-gap-y: 88px; } :is(.results-page, #results-page) .result-container { padding-inline: 30px; } :is(.results-page, #results-page) .result-learn-more { font-size: 14px; } :is(.results-page, #results-page) .result-value { font-size: 45px; } :is(.results-page, #results-page) .section-container { --container-gutter: 84px; } } @media only screen and (min-width: 1200px) { :is(.results-page, #results-page) .results:is(.columns) { --columns-number: 3; --columns-gap-x: 50px; --columns-gap-y: 106px; } :is(.results-page, #results-page) .result { max-width: 350px; } :is(.results-page, #results-page) .result-container { padding-block: 54px 64px; padding-inline: 37px; } :is(.results-page, #results-page) .result-value { font-size: 50px; } :is(.results-page, #results-page) .result-learn-more { margin-top: 40px; } :is(.results-page, #results-page) .section-container { --container-gutter: 80px; } } @media only screen and (min-width: 1400px) { :is(.results-page, #results-page) .results:is(.columns) { --columns-number: 3; --columns-gap-x: 58px; --columns-gap-y: 112px; } :is(.results-page, #results-page) .result-container { padding-block: 64px; padding-inline: 46px; } :is(.results-page, #results-page) .result-value { font-size: 55px; } :is(.results-page, #results-page) .section-container { --container-gutter: 114px; } } @media only screen and (min-width: 1900px) { :is(.results-page, #results-page) .results:is(.columns) { --columns-number: 4; --columns-gap-x: 56px; --columns-gap-y: 113px; } :is(.results-page, #results-page) .section-container { --container-gutter: 204px; } } /* ================================================================================ * Profiles/ Team Grid Template ================================================================================ */ /* Template Team https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/template/team.md -------------------------------------------------------------------------------- */ /* * Team/Profiles Groups - Optional -------------------------------------------------------------------------------- */ .team-group:nth-child(n+2) { margin-top: 4rem; } .team-group-title { margin-bottom: 2rem; } /* * Team/Profiles Page -------------------------------------------------------------------------------- */ body.onep21-template-team {} #team-banner {} :is(.team-page, #team-page) {} :is(.team-page, #team-page) .profiles:is(.columns) { --columns-gap-x: 3rem; --columns-gap-y: 56px; justify-items: center; justify-content: center; } :is(.team-page, #team-page) .profile { max-width: 400px; } :is(.team-page, #team-page) .section-container { --container-gutter: 38px; } @media only screen and (min-width: 768px) { :is(.team-page, #team-page) .profiles:is(.columns) { --columns-number: 2; --columns-gap-x: 30px; --columns-gap-y: 75px; justify-content: flex-start; } :is(.team-page, #team-page) .section-container { --container-gutter: 84px; } } @media only screen and (min-width: 1200px) { :is(.team-page, #team-page) .profiles:is(.columns) { --columns-number: 3; --columns-gap-x: 35px; --columns-gap-y: 97px; } :is(.team-page, #team-page) .section-container { --container-gutter: 80px; } } @media only screen and (min-width: 1400px) { :is(.team-page, #team-page) .profiles:is(.columns) { --columns-gap-x: 39px; --columns-gap-y: 109px; } :is(.team-page, #team-page) .section-container { --container-gutter: 114px; } } @media only screen and (min-width: 1900px) { :is(.team-page, #team-page) .profiles:is(.columns) { --columns-gap-x: 46px; --columns-gap-y: 124px; } :is(.team-page, #team-page) .profile { max-width: 436px; } :is(.team-page, #team-page) .section-container { --container-gutter: 260px; } } /* ================================================================================ * Testimonials Template ================================================================================ */ /* Template Testimonials Areas https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/template/testimonials.md -------------------------------------------------------------------------------- */ /* * Testimonials Template -------------------------------------------------------------------------------- */ body.onep21-template-testimonials {} body.onep21-template-testimonials .template-wrapper { background-color: var(--color-light-alt); } #testimonials-banner {} :is(.testimonials-page, #testimonials-page) { /* template main styles */ padding-bottom: 0; } :is(.testimonials-page, #testimonials-page) .testimonials:is(.columns) { --columns-gap-x: 3rem; --columns-gap-y: 35px; justify-content: center; justify-items: center; } :is(.testimonials-page, #testimonials-page) .testimonials:is(.columns):nth-child(n+2) { margin-top: var(--columns-gap-y); } :is(.testimonials-page, #testimonials-page) .videos:is(.columns) { --columns-gap-x: 3rem; --columns-gap-y: 52px; justify-content: center; justify-items: center; } :is(.testimonials-page, #testimonials-page) .video { max-width: 500px; } :is(.testimonials-page, #testimonials-page) .video-title { padding-block: 0; padding-top: 21px; font-size: 16px; line-height: 22px; font-weight: 500; } :is(.testimonials-page, #testimonials-page) .video-thumbnail { border-radius: 5px; box-shadow: 0 3px 10px rgba(0, 0, 0, .2); --video-thumbnail-aspect-w: 284; --video-thumbnail-aspect-l: 172; } :is(.testimonials-page, #testimonials-page) .testimonials-section-1 { padding-bottom: 98px; } :is(.testimonials-page, #testimonials-page) .testimonials-section-2 { background: var(--color-light); padding-block: 93px 76px; } :is(.testimonials-page, #testimonials-page) .testimonial { border-radius: 16px; background-color: var(--color-light); box-shadow: 0 3px 6px rgba(0, 0, 0, .16); padding: 45px 26px 50px; } :is(.testimonials-page, #testimonials-page) .testimonial-stars { font-size: 46px; margin-bottom: 25px; } :is(.testimonials-page, #testimonials-page) .testimonial-highlight { font-size: 18px; line-height: 26px; font-weight: bold; margin-bottom: 21px; } :is(.testimonials-page, #testimonials-page) .testimonial-quote { width: 100%; margin-bottom: 25px; } :is(.testimonials-page, #testimonials-page) .testimonial-source { color: var(--color-dark); display: flex; flex-direction: column; margin-bottom: 0; } :is(.testimonials-page, #testimonials-page) .testimonial-source span::after { display: none; } :is(.testimonials-page, #testimonials-page) .section-container { --container-gutter: 30px; } @media only screen and (min-width: 768px) { :is(.testimonials-page, #testimonials-page) .videos:is(.columns) { --columns-number: 2; --columns-gap-x: 30px; --columns-gap-y: 70px; } :is(.testimonials-page, #testimonials-page) .testimonials-section-1 { padding-bottom: 117px; } :is(.testimonials-page, #testimonials-page) .testimonials-section-2 { background: var(--color-light); padding-block: 121px 108px; } :is(.testimonials-page, #testimonials-page) .testimonials:is(.columns) { --columns-gap-y: 50px; } :is(.testimonials-page, #testimonials-page) .testimonial { padding: 67px 75px 80px; } :is(.testimonials-page, #testimonials-page) .testimonial-stars { font-size: 57px; margin-bottom: 40px; } :is(.testimonials-page, #testimonials-page) .testimonial-highlight { font-size: 18px; line-height: 28px; margin-bottom: 15px; max-width: 100%; } :is(.testimonials-page, #testimonials-page) .testimonial-quote { margin-bottom: 37px; } :is(.testimonials-page, #testimonials-page) .section-container { --container-gutter: 84px; } } @media only screen and (min-width: 1200px) { :is(.testimonials-page, #testimonials-page) .testimonials:is(.columns) { --columns-number: 1; --columns-gap-y: 66px; } :is(.testimonials-page, #testimonials-page) .videos:is(.columns) { --columns-number: 3; --columns-gap-x: 34px; } :is(.testimonials-page, #testimonials-page) .testimonials-section-1 { padding-bottom: 142px; } :is(.testimonials-page, #testimonials-page) .testimonials-section-2 { background: var(--color-light); padding-block: 136px; } :is(.testimonials-page, #testimonials-page) .testimonials-section-2 .section-header { margin-bottom: 86px; } :is(.testimonials-page, #testimonials-page) .testimonials-section-2 .section-container { --container-gutter: 80px; } :is(.testimonials-page, #testimonials-page) .video-button-default { --video-button-size: 70px; } :is(.testimonials-page, #testimonials-page) .testimonial { padding: 80px 106px 96px; } :is(.testimonials-page, #testimonials-page) .testimonial-stars { margin-bottom: 48px; } :is(.testimonials-page, #testimonials-page) .testimonial-highlight { font-size: 20px; line-height: 30px; margin-bottom: 24px; } :is(.testimonials-page, #testimonials-page) .testimonial-quote { font-size: 18px; line-height: 30px; margin-bottom: 46px; } :is(.testimonials-page, #testimonials-page) .section-container { --container-gutter: 225px; } } @media only screen and (min-width: 1400px) { :is(.testimonials-page, #testimonials-page) .testimonials:is(.columns) { --columns-number: 2; --columns-gap-x: 31px; --columns-gap-y: 35px; } :is(.testimonials-page, #testimonials-page) .videos:is(.columns) { --columns-gap-x: 38px; --columns-gap-y: 91px; } :is(.testimonials-page, #testimonials-page) .testimonials-section-1 { padding-bottom: 164px; } :is(.testimonials-page, #testimonials-page) .testimonials-section-2 { padding-block: 150px 130px; } :is(.testimonials-page, #testimonials-page) .testimonials-section-2 .section-header { margin-bottom: 95px; } :is(.testimonials-page, #testimonials-page) .testimonials-section-2 .section-container { --container-gutter: 114px; } :is(.testimonials-page, #testimonials-page) .testimonial { padding: 67px 60px 77px; } :is(.testimonials-page, #testimonials-page) .testimonial-stars { margin-bottom: 40px; } :is(.testimonials-page, #testimonials-page) .testimonial-highlight { margin-bottom: 24px; } :is(.testimonials-page, #testimonials-page) .testimonial-quote { font-size: 17px; line-height: 30px; margin-bottom: 40px; } :is(.testimonials-page, #testimonials-page) .section-container { --container-gutter: 113px; } } @media only screen and (min-width: 1900px) { :is(.testimonials-page, #testimonials-page) .videos:is(.columns) { --columns-gap-x: 46px; --columns-gap-y: 87px; } :is(.testimonials-page, #testimonials-page) .testimonials:is(.columns) { --columns-gap-x: 41px; --columns-gap-y: 44px; } :is(.testimonials-page, #testimonials-page) .testimonials-section-1 { padding-bottom: 192px; } :is(.testimonials-page, #testimonials-page) .testimonials-section-2 { padding-block: 170px 190px; } :is(.testimonials-page, #testimonials-page) .testimonials-section-2 .section-header { margin-bottom: 140px; } :is(.testimonials-page, #testimonials-page) .testimonials-section-2 .section-container { --container-gutter: 260px; } :is(.testimonials-page, #testimonials-page) .testimonial { padding: 80px 71px 97px; } :is(.testimonials-page, #testimonials-page) .testimonial-stars { margin-bottom: 48px; } :is(.testimonials-page, #testimonials-page) .testimonial-quote { font-size: 18px; line-height: 30px; margin-bottom: 47px; } :is(.testimonials-page, #testimonials-page) .section-container { --container-gutter: 260px; } } /* ================================================================================ * Videos Template ================================================================================ */ /* Template Videos https://github.com/1point21interactive/1p21_wp_boilerplate/blob/master/wp-content/themes/1p21-boilerplate/docs/template/videos.md -------------------------------------------------------------------------------- */ /* * Videos Template -------------------------------------------------------------------------------- */ body.onep21-template-videos {} #videos-banner {} :is(.videos-page, #videos-page) {} :is(.videos-page, #videos-page) .videos:is(.columns) { --columns-gap-x: 3rem; --columns-gap-y: 52px; justify-content: center; justify-items: center; } :is(.videos-page, #videos-page) .video { max-width: 500px; } :is(.videos-page, #videos-page) .video-title { padding-block: 0; padding-top: 21px; font-size: 16px; line-height: 22px; font-weight: 500; } :is(.videos-page, #videos-page) .video-thumbnail { border-radius: 5px; box-shadow: 0 3px 10px rgba(0, 0, 0, .2); --video-thumbnail-aspect-w: 284; --video-thumbnail-aspect-l: 172; } :is(.videos-page, #videos-page) .section-container { --container-gutter: 37px; } @media only screen and (min-width: 768px) { :is(.videos-page, #videos-page) .videos:is(.columns) { --columns-number: 2; --columns-gap-x: 30px; --columns-gap-y: 70px; } :is(.videos-page, #videos-page) .section-container { --container-gutter: 84px; } } @media only screen and (min-width: 1200px) { :is(.videos-page, #videos-page) .videos:is(.columns) { --columns-number: 3; --columns-gap-x: 34px; } :is(.videos-page, #videos-page) .video-button-default { --video-button-size: 70px; } :is(.videos-page, #videos-page) .section-container { --container-gutter: 80px; } } @media only screen and (min-width: 1400px) { :is(.videos-page, #videos-page) .videos:is(.columns) { --columns-gap-x: 38px; --columns-gap-y: 91px; } :is(.videos-page, #videos-page) .section-container { --container-gutter: 114px; } } @media only screen and (min-width: 1900px) { :is(.videos-page, #videos-page) .videos:is(.columns) { --columns-gap-x: 46px; --columns-gap-y: 87px; } :is(.videos-page, #videos-page) .section-container { --container-gutter: 260px; } } @media only screen and (min-width: 1200px) { .section-image-wrapper :where(img) { transition: all 1s ease-in-out; transform: scale(1.3); } :where(.home-section):not(.home-section-1, .about-section-2) .section-header, .banner-no-background-image .layout-banner .banner-main .banner-body-blocks, :is(.profile-page, #profile-page) .default-section.section-header { position: relative; } :where(.home-section):not(.home-section-1, .about-section-2) .section-header::before, .banner-no-background-image .layout-banner .banner-main .banner-body-blocks::before, :is(.profile-page, #profile-page) .default-section.section-header::before { content: ""; position: absolute; top: -1.5px; left: 0; right: 0; bottom: 0; background: var(--color-primary); z-index: -1; z-index: 1; height: 2px; width: 100%; transition: all 2s ease-in-out; } .layout-banner-grid { grid-template-columns: 1fr 0; transition: all 2s ease-in-out; } .layout-banner-grid .banner-sidebar-container, .layout-banner-grid .banner-sidebar-cta { opacity: 0; transition: opacity 1s ease-in-out; transition-delay: 2s; } .home-section-2 .section-results { animation-delay: 1.5s; } .home-section-3 .section-testimonials-container { animation-delay: 1s; } .home-section-3 .responsive-background-bg { transform: scale(1.3); transition: all 1s ease-in-out; } .home-section-4 .section-cr-snippet { animation-delay: 500ms; } .home-section-4 .section-content-right { animation-delay: 500ms; } .home-section-5 .section-awards-content { animation-delay: 1s; } .two-images :where(img) { transition: all 1s ease-in-out; transform: scale(1.3); } .two-images.animate__fadeIn :where(img) { transform: scale(1); } .animated__img :where(img) { transition: all 1s ease-in-out; transform: scale(1.3); } .animated__img.animate__fadeIn :where(img) { transform: scale(1); } .layout-contact-locations { animation-delay: 500ms; } body.ready .layout-banner-grid { opacity: 1; grid-template-columns: 1fr 297px; } body.ready .layout-banner-grid .banner-sidebar-container, body.ready .layout-banner-grid .banner-sidebar-cta { opacity: 1; } body.ready.banner-no-background-image .layout-banner .banner-main .banner-body-blocks::before, body.ready :is(.profile-page, #profile-page) .default-section.section-header::before { width: 0; } .visible .section-image-wrapper :where(img) { transform: scale(1); } .visible:where(.home-section):not(.home-section-1) .section-header::before { width: 0; } .visible.home-section-3 .responsive-background-bg { transform: scale(1); } } @media only screen and (min-width: 1400px) { body.ready .layout-banner-grid { grid-template-columns: 1fr 310px; } } @media only screen and (min-width: 1900px) { body.ready .layout-banner-grid { grid-template-columns: 1fr 485px; } }