/*! Theme Name: 1p21 Theme Build Author: iLawyer -------------- 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 */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* 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%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* 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 */ 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; } /* ================================================================================ * 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; /* cascade global font family, color, and background to reduce appearance of broken styles */ font-family: var(--font-primary); font-weight: 400; color: var(--scheme-fg, var(--color-dark)); background: var(--global-background); background-attachment: fixed; /* make sure there are no edge case words that overflow the layout or make blocks too wide*/ word-wrap: break-word; /* smoothen scroll */ scroll-behavior: smooth; /* mobile viewport bug fix */ min-height: 100vh; min-height: -webkit-fill-available; /* accent color for form stuff */ 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. --------------------------------------------------------------- */ html { overflow-y: scroll; overflow-x: hidden; } 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 */ box-sizing: border-box; /* font fixes */ -webkit-font-smoothing: antialiased; /* Firefox 25*/ -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: 0.5; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } input::-moz-placeholder, select::-moz-placeholder, textarea::-moz-placeholder { /* placeholder stuff. adjust as needed */ color: inherit; opacity: 0.5; -moz-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } input::-ms-input-placeholder, select::-ms-input-placeholder, textarea::-ms-input-placeholder { /* placeholder stuff. adjust as needed */ color: inherit; opacity: 0.5; -ms-transition: all 0.25s ease-in-out; transition: all 0.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: 0.2; } input:focus::-moz-placeholder, select:focus::-moz-placeholder, textarea:focus::-moz-placeholder { /* placeholder stuff. adjust as needed */ opacity: 0.2; } input:focus::-ms-input-placeholder, select:focus::-ms-input-placeholder, textarea:focus::-ms-input-placeholder { /* placeholder stuff. adjust as needed */ opacity: 0.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; } /* Monospace elements --------------------------------------------------------------- */ pre, code, kbd, tt { font-family: var(--font-monospace); background: rgba(0, 0, 0, 0.05); } code, kbd, tt { padding: 0.125em; } pre { padding: 1em; max-width: 100%; line-height: 1; overflow: auto; } pre * { border: 0; margin: 0; padding: 0; } /* Other critical element styles --------------------------------------------------------------- */ strong, b { font-family: inherit; font-weight: bolder; } em, cite, i, var { font-family: inherit; font-style: italic; } var { font-family: var(--font-secondary); } sup, sub, small { font-size: 0.75em; } sup { vertical-align: top; } sub { vertical-align: bottom; } hr { outline: 0; border: 0; display: block; margin: 0; } /* 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 --------------------------------------------------------------- */ video, audio, iframe, object, embed { max-width: 100% !important; } /* 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: 48px; } @media only screen and (min-width: 760px) { :where(main, .main, aside, .aside) { padding-block: 96px; } } @media only screen and (min-width: 1200px) { :where(main, .main, aside, .aside) { padding-block: 112px; } } @media only screen and (min-width: 1800px) { :where(main, .main, aside, .aside) { padding-block: 125px; } } .banner-no-background-image :where(main, .main, aside, .aside) { padding-top: 0; } /* ...Or separate normalize template main and asides' vertical padding. --------------------------------------------------------------- */ /* Catch fancy/weird/whatever positioned elements into custom templates' content area only + prevent clipping issues --------------------------------------------------------------- */ @media only screen and (max-width: 759px) { .template-wrapper { position: relative; overflow-x: hidden; } } /* ================================================================================ * 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: 759px; --br-sm: 1199px; --br-md: 1399px; --br-lg: 1799px; --br-xl: 2879px; --br-xxl: 3839px; /* Design Reference: Comps/Design Sizes based on given XD Files' artboards */ --comp: 360px; /* Styleguide - Fonts */ --font-primary: Zalando Sans, Helvetica, Arial, sans-serif; --font-secondary: Zalando Sans SemiExpanded, Helvetica, Arial, sans-serif; --font-accent: var(--font-primary); --font-monospace: monospace; /* Styleguide - colors */ --color-dark: #04090D; --color-dark-alt: #102332; --color-light: #FFFFFF; --color-light-alt: #FFFDFA; --color-primary: #142C3F; --color-primary-alt: #4D7E99; --color-primary-gradient-start: var(--color-primary-alt); --color-primary-gradient-end: #406980; --color-secondary: #E0BC88; --color-secondary-alt: #FADBAF; --color-secondary-gradient-start: var(--color-secondary-alt); --color-secondary-gradient-end: #D6B476; --color-accent: #1E4666; --color-accent-alt: #6A9FBD; --color-accent-gradient-start: var(--color-accent); --color-accent-gradient-end: var(--color-accent-alt); --color-neutral: #F5F5F5; --color-neutral-light: var(--color-neutral); --color-neutral-lighter: var(--color-neutral-light); --color-neutral-lightest: var(--color-neutral-lighter); --color-neutral-dark: rgba(4, 9, 13, 0.38); --color-neutral-darker: #050700; --color-neutral-darkest: var(--color-neutral-darker); --color-success: #00CC00; --color-caution: #CC6600; --color-error: var(--color-primary); /* add more native vars as needed */ --global-background: var(--color-light-alt); --global-border-radius: 13px; --global-pusher: 1px; } @media only screen and (min-width: 760px) { :root { /* Core Vars DO NOT EDIT. */ --comp: 760px; /* add more native vars as needed */ } } @media only screen and (min-width: 1200px) { :root { /* Core Vars DO NOT EDIT. */ --comp: 1200px; /* add more native vars as needed */ } } @media only screen and (min-width: 1400px) { :root { /* Core Vars DO NOT EDIT. */ --comp: 1400px; /* add more native vars as needed */ --global-border-radius: 15px; } } @media only screen and (min-width: 1800px) { :root { /* Core Vars DO NOT EDIT. */ --comp: 1920px; /* add more native vars as needed */ } } /* ================================================================================ * Vendor Overrides ( CSS Library/ Plugin related stuff. EG: animated,slick,gravity forms etc. ) ================================================================================ */ /* animated and wow stuff --------------------------------------------------------------- */ @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; } } /* Reset, skeletons, and normalize for gravity forms and form control elements. No need to edit. --------------------------------------------------------------- */ .gform_wrapper.gravity-theme { /* If styles are getting overriden by default gforms styles, prepend `.gform_wrapper.gravity-theme` on field selectors -_- */ } :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-left: calc(var(--field-padding-x, 1em) - var(--field-border-width, 1px)); padding-right: calc(var(--field-padding-x, 1em) - var(--field-border-width, 1px)); padding-top: calc((var(--field-height, 3em) - var(--field-border-width, 1px) * 2 - 1em * var(--field-line-height, 1.25)) * var(--field-baseline-offset, 0.5)); padding-bottom: calc((var(--field-height, 3em) - var(--field-border-width, 1px) * 2 - 1em * var(--field-line-height, 1.25)) * (1 - var(--field-baseline-offset, 0.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-width: var(--field-border-width, 1px); border-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: 0.5em; } .gform_wrapper.gravity-theme .field_description_above :is(.description, .gfield_description, .gsection_description, .instruction) { margin-top: 0; margin-bottom: 0.5em; } /* .ginput_ scaffolding. No need to edit */ .gform_wrapper.gravity-theme .ginput { /* If styles are getting overriden by default gforms styles, prepend `.gform_wrapper.gravity-theme` on field selectors -_- */ } .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; /* box-shadow: inset 0 -4px 0 0 var(--field-error-color); */ } .gfield .gchoice { margin: 0 0 0.5em; } /* 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: 3.125rem; /* border width. This will be accounted for in calculating the form field height as well */ --field-border-width: 0px; /* duh */ --field-border-radius: 0px; /* horizontal padding for the form field */ --field-padding-x: 1em; /* color for required indicators */ --field-required-color: var(--color-secondary); /* color for errors */ --field-error-color: var(--color-secondary-alt); /* Note: this value has to be unitless for calc values to work. * modify this value if the font seems a little too high or low in vertical alignment. 1 moves the text to the very top. 0 moves the text to the very bottom. 0.5 will center it based on the fonts' basline alignment */ --field-baseline-offset: 0.5; /* Note: this value has to be unitless for calc values to work * Formula is line-height-px / font-size-px */ --field-line-height: 1.125; font-size: 1rem; 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-neutral); } :is(form, .gfield):is(.focus, .gfield_error):is(.gfield-custom-box-label-adjacent):is(.gfield_error) .gfield_label, :is(form, .gfield):is(.focus, .gfield_error) :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) { box-shadow: inset 0 -4px 0 0 var(--color-secondary-alt); } :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); } /* .gfield - multiline --------------------------------------------------------------- */ .gform_wrapper.gravity-theme .gfield:is(.gfield--type-textarea, .gfield--type-multiselect) :is(textarea, select) { /* If styles are getting overriden by default gforms styles, prepend `.gform_wrapper.gravity-theme` on field selectors -_- */ } .gform_wrapper.gravity-theme .gfield:is(.gfield--type-textarea, .gfield--type-multiselect) :is(textarea, select).large { height: 120px; } .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: 93px; } @media only screen and (min-width: 1800px) { .gform_wrapper.gravity-theme .gfield:is(.gfield--type-textarea, .gfield--type-multiselect) :is(textarea, select).small { height: 122px; } } /* .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 */ font-size: 14px; line-height: 1; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 600; margin-bottom: 0.5em; display: flex; } /* .gform_ overrides. Adjust as needed --------------------------------------------------------------- */ .gform_wrapper.gravity-theme .gform { /* If styles are getting overriden by default gforms styles, prepend `.gform_wrapper.gravity-theme` on field selectors -_- */ } .gform_wrapper.gravity-theme .gform_fields { -moz-column-gap: 1.25rem; column-gap: 1.25rem; row-gap: 1.125rem; } /* .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: 18px; line-height: var(--field-line-height, inherit); color: var(--field-required-color); font-style: normal; font-weight: 700; padding: 0; margin: 0; order: 99; vertical-align: baseline; } /* custom helpers - Required Message --------------------------------------------------------------- */ .required-message { font-size: 14px; line-height: 1; color: var(--color-light); text-transform: capitalize; margin-top: 1rem; } .required-message .required-glyph { vertical-align: middle; } /* 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)) * 0.65); z-index: 3; pointer-events: none; } .gfield_label > .gfield_required, .gfield_label::after { margin-left: 0.25em; } .gfield_contains_required .gfield-custom-label-indicator[data-required-glyph] { /* field ui indicator */ /* required indicator */ } .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 */ /* single line select indicator */ .gfield--type-select .ginput_container::before { content: "\25BC\FE0E"; font-size: 0.75em; align-self: center; } /* 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 { /* Overlay label on the input field NOTE: May soon be deprecated. enable or disable via theme options as needed */ } .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; /* Take care of edge case overflowing labels */ 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: -webkit-max-content; 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: 760px) { .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: -webkit-max-content; 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: 759px) { .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; border-top: 0; } } /* includes/field-form --------------------------------------------------------------- */ .field-form { max-width: 100%; } .field-form :where(.faux-gform_wrapper) :is(.gform_title, .gform_description, .gform_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: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; margin-bottom: 2rem; } .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 { /* body: gforms generated or template custom ones */ } .field-form :is(.gform_wrapper) .gform_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: -1.75rem; } .field-form :is(.gform_wrapper) .gform_footer :is(.gform_button) { /* that goes for the button too */ margin-bottom: 0; } .field-form-body :is(.gform_wrapper) .gform_heading { /* in case gravity forms decides to add more ugly things */ display: none; } /* 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; } /* Swiper Customizations Variable docs: https://oxygen4fun.supadezign.com/tips/swiperjs-tips-and-good-practice/#customcss --------------------------------------------------------------- */ :root { --swiper-theme-color: var(--scheme-sp,var(--color-secondary)); --swiper-navigation-sides-offset: 0rem; --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-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: var(--color-neutral-dark); --swiper-scrollbar-drag-bg-color: var(--swiper-theme-color); --swiper-scrollbar-sides-offset: 1rem; --swiper-scrollbar-bottom: 3.25rem; --swiper-scrollbar-top: auto; --swiper-scrollbar-size: 1px; --swiper-custom-scrollbar-offset: 1px; --swiper-scrollbar-sides-offset: 0%; } @media only screen and (min-width: 760px) { :root { --swiper-scrollbar-bottom: 80px; } } @media only screen and (min-width: 1200px) { :root { --swiper-scrollbar-bottom: 4rem; } } @media only screen and (min-width: 1800px) { :root { --swiper-scrollbar-bottom: 7.25rem; } } /* Swiper Enhancements --------------------------------------------------------------- */ .swiper { transition: opacity 0.25s ease-in-out; opacity: 0; } .swiper.swiper-initialized { opacity: 1; } :is(.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction):not(.swiper-pagionation-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-button-prev .content-icon { transform: scaleX(-1); } .swiper-scrollbar { overflow: visible; max-width: 288px; margin-bottom: var(--swiper-custom-scrollbar-offset); border-radius: 0; } .swiper-scrollbar-drag { height: calc(var(--swiper-scrollbar-size) + var(--swiper-custom-scrollbar-offset) * 2); top: calc(var(--swiper-custom-scrollbar-offset) * -1); border-radius: 0; } /* Swiper Custom Helpers --------------------------------------------------------------- */ .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: 1199px) { .swiper-custom-pagination-static-xs .swiper-pagination { position: static; margin-top: var(--swiper-pagination-bottom); } } .swiper-custom-hide-slides .swiper-slide:not(.swiper-slide-duplicate-visible):not(.swiper-slide-visible):not(.swiper-slide-active) { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.25s ease-in-out; } @media only screen and (max-width: 1199px) { .swiper-custom-hide-slides-sm .swiper-slide:not(.swiper-slide-duplicate-visible):not(.swiper-slide-visible):not(.swiper-slide-active) { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.25s ease-in-out; } } @media only screen and (max-width: 1199px) { .swiper-custom-hide-slides-xs .swiper-slide:not(.swiper-slide-duplicate-visible):not(.swiper-slide-visible):not(.swiper-slide-active) { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.25s ease-in-out; } } .swiper-custom-equal-heights .swiper-slide { height: auto; align-self: stretch; } @media only screen and (max-width: 1199px) { .swiper-custom-equal-heights-sm .swiper-slide { height: auto; align-self: stretch; } } @media only screen and (max-width: 1199px) { .swiper-custom-equal-heights-xs .swiper-slide-slide { height: auto; align-self: stretch; } } .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: 0.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: 0.06125rem; } .swiper-custom-buttons-static .swiper-button-next { margin-left: 0.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: 0.06125rem; } .swiper-custom-buttons-static-sm .swiper-button-next { margin-left: 0.06125rem; } } @media only screen and (max-width: 759px) { .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: 0.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: 0.06125rem; } .swiper-custom-buttons-static-xs .swiper-button-next { margin-left: 0.06125rem; } } /* ================================================================================ * Content Styles ================================================================================ */ /* H tag scaffolding --------------------------------------------------------------- */ :where(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6) { margin-bottom: var(--fancy-border-margin-y, 0); } :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; } :where(.content-palette-dark) :is(:where(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6), .content :where(h1, h2, h3, h4, h5, h6)) { /* 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 */ } /* H1 - can be reused by section titles, primary-heading etc. --------------------------------------------------------------- */ :is(:where(*.h1), .content :where(h1)) { font-size: 32px; line-height: 36px; font-family: var(--font-secondary); color: var(--color-primary); letter-spacing: 0em; text-transform: capitalize; font-style: normal; font-weight: 500; } :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); } @media only screen and (min-width: 760px) { :is(:where(*.h1), .content :where(h1)) { font-size: 48px; line-height: 56px; } } @media only screen and (min-width: 1400px) { :is(:where(*.h1), .content :where(h1)) { font-size: 56px; line-height: 60px; } } /* H2 - can be reused by certain titles --------------------------------------------------------------- */ :is(:where(*.h2), .content :where(h2)) { font-size: 24px; line-height: 34px; color: var(--color-primary-alt); font-weight: 600; } :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)); } /* H3 - can be reused by certain titles --------------------------------------------------------------- */ :is(:where(*.h3), .content :where(h3)) { font-size: 22px; line-height: 32px; color: var(--color-primary); font-weight: 600; } :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, inheri); } /* 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: 18px; line-height: 31px; letter-spacing: 0em; text-transform: uppercase; font-style: normal; font-weight: 700; } :where(.content-palette-dark) :is(:where(*.h4), .content :where(h4)) { /* 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, var(--color-primary-alt)); } /* 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: 18px; font-family: var(--font-accent); color: inherit; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; } :is(:where(*.h5), .content :where(h5)):where(.h5-alt) { color: var(--color-primary); } :where(.content-palette-dark) :is(:where(*.h5), .content :where(h5)) { /* 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 */ } :where(.content-palette-dark) :is(:where(*.h5), .content :where(h5)):where(.h5-alt) { color: var(--color-accent); } @media only screen and (min-width: 1200px) { :is(:where(*.h5), .content :where(h5)):where(.h5-alt) { font-size: 19px; } } /* 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: 16px; line-height: calc(1em + 5px); font-family: var(--font-accent); color: inherit; letter-spacing: 0.09em; text-transform: uppercase; font-style: normal; font-weight: 700; } :where(.content-palette-dark) :is(:where(*.h6), .content :where(h6)) { /* 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 */ } /* 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: 34px; color: inherit; text-transform: none; font-style: normal; font-weight: 600; text-align: center; margin-inline: auto; max-width: 60ch; margin-block: var(--fancy-border-margin-y, 0); } :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-sb-contrast, inherit); } :is(:where(*.blockquote), .content :where(blockquote)) > :where(*) { font: inherit; color: inherit; margin-block: 0 0.5em; padding: 0; } :is(:where(*.blockquote), .content :where(blockquote)) > :where(*):last-child { margin-bottom: 0; } @media only screen and (min-width: 1400px) { :is(:where(*.blockquote), .content :where(blockquote)) { font-size: 32px; line-height: 40px; } } /* 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: 14px; line-height: calc(1em + 5px); font-family: var(--font-primary); color: var(--color-primary); letter-spacing: 0.12em; text-transform: uppercase; font-style: normal; font-weight: 800; 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, inherit); } /* Lead - Optional Note: Some designs may include another style for a little bit fancier body text that may not be tagged as a normal html element like blockquote or h tag Use this if it helps --------------------------------------------------------------- */ *.lead { font-size: 24px; line-height: 34px; color: var(--color-primary-alt); font-weight: 600; margin-inline: auto; } :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-contrast, var(--color-light-alt)); } @media only screen and (min-width: 1400px) { *.lead { font-size: 25px; } } /* Content - Anchor links --------------------------------------------------------------- */ :is(.content :where(a)) { color: var(--color-primary-alt); font-weight: 700; text-decoration: underline; transition: color 0.25s ease-in-out; } :is(.content :where(a)):where(:hover, :focus) { color: var(--scheme-sp, var(--color-primary)); } :where(.content-palette-dark) :is(.content :where(a)) { /* 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 */ } :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)) :is(ol, ul, dd) { margin-bottom: 0; } :is(.content :where(ol, ul, dd)) { list-style-type: none; padding-left: 1.25rem; } :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: 0.6em; } :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(--color-secondary); font-size: 1em; display: inline-block; font-weight: 700; } :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-primary-alt)); } :is(.content :where(li))::before { position: absolute; right: 100%; top: 0em; padding-right: 0.4ch; } /* The Content - Unordered List --------------------------------------------------------------- */ :is(.content :where(ul)) > li::before { content: "\25CF\FE0E"; font-size: 0.75em; margin-right: 0.75em; top: 0.1em; } :where(.content-palette-dark) :is(.content :where(ul)) > li::marker, :where(.content-palette-dark) :is(.content :where(ul)) > 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 */ } :is(.content :where(ul)) > li > ul > li::before { content: "\2014\FE0E"; 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) ". "; } :where(.content-palette-dark) :is(.content :where(ol)) > li::marker, :where(.content-palette-dark) :is(.content :where(ol)) > 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 */ } /* 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; /* top and bottom border width */ --table-border-width-y: 1px; /* table container color */ --table-border-color: var(--color-neutral-lighter); /* background color for cells */ --table-cell-background: var(--scheme-bg-contrast,transparent); /* border color for left and right */ --table-cell-border-color-x: var(--scheme-bg-contrast,rgba(127, 127, 127, 0.3)); /* border color fortop and bottom */ --table-cell-border-color-y: transparent; font-size: 0.9em; } :where(.content table) :where(th, td) { padding-block: 0.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: 0.75em; font-family: var(--font-primary); color: var(--color-dark-alt); letter-spacing: 0.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, 0.3)); --table-cell-border-color-y: var(--scheme-bg-contrast,transparent); --table-cell-border-color-x: var(--scheme-bg-contrast,rgba(127, 127, 127, 0.3)); color: var(--scheme-fg, inherit); } :where(.content table) :where(caption) { padding: 0.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)) { /* 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 */ } /* italic, em */ :where(.content-palette-dark) :where(.content :where(em, i)) { /* 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 */ } /* address */ :where(.content-palette-dark) :where(.content :where(address)) { /* 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 */ } /* abbreviations */ :where(.content-palette-dark) :where(.content :where(abbr)) { /* 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 */ } /* acronym */ :where(.content-palette-dark) :where(.content :where(acronym)) { /* 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 */ } /* big */ :where(.content-palette-dark) :where(.content :where(big)) { /* 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 */ } /* code, kbd, pre */ :where(.content-palette-dark) :where(.content :where(code, kbd, pre)) { /* 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 */ } :where(.content-palette-dark) :where(.content :where(code)) { /* 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 */ } :where(.content :where(kbd)) { padding-inline: 1em; border-radius: 0.2em; box-shadow: 0 0.2em 0 0 rgba(127, 127, 127, 0.4); } :where(.content-palette-dark) :where(.content :where(kbd)) { /* 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 */ } /* strike, del */ :where(.content :where(del, s)) { text-decoration: line-through; } :where(.content-palette-dark) :where(.content :where(del, s)) { /* 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 */ } /* ins */ :where(.content-palette-dark) :where(.content :where(ins)) { /* 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 */ } /* ins */ :where(.content-palette-dark) :where(.content :where(q)) { /* 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 */ } /* small */ :where(.content-palette-dark) :where(.content :where(small)) { /* 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 */ } /* sub */ :where(.content-palette-dark) :where(.content :where(sub)) { /* 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 */ } /* sup */ :where(.content-palette-dark) :where(.content :where(sup)) { /* 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 */ } /* tt */ :where(.content-palette-dark) :where(.content :where(tt)) { /* 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 */ } /* var */ :where(.content-palette-dark) :where(.content :where(var)) { /* 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 */ } /* The Content - Scaffolding + Margin Top specificities --------------------------------------------------------------- */ .content { font-size: 18px; line-height: 31px; font-family: var(--font-primary); color: var(--color-dark-alt); } .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: 48px; } .content :where(*.h1, *.h2, *.h3, *.h4, *.h5, *.h6, h1, h2, h3, h4, h5, h6) { margin-bottom: 24px; } .content :where(*.blockquote, blockquote) { margin-block: 48px; } .content :where(*.blockquote, blockquote) :where(cite, *.cite) { margin-top: 1.25em; } .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 :where(img) { border-radius: var(--global-border-radius); } /* 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 } } */ :where(.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; } /* for content with thicker weight than usual */ .content.content-style-large { font-size: 17px; line-height: 1.67; } @media only screen and (min-width: 1400px) { .content.content-style-large { font-size: 18px; } } @media only screen and (min-width: 1800px) { .content.content-style-large { font-size: 19px; } } /* 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.55555556; } /* 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: 759px) { .content.content-style-no-first-margin-xs > :where(*:first-child) { margin-top: 0; } } @media only screen and (min-width: 760px) 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: 1799px) { .content.content-style-no-first-margin-lg > :where(*:first-child) { margin-top: 0; } } @media only screen and (min-width: 1800px) 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: 759px) { .content.content-style-no-last-margin-xs > :where(*:last-child) { margin-bottom: 0; } } @media only screen and (min-width: 760px) 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: 1799px) { .content.content-style-no-last-margin-lg > :where(*:last-child) { margin-bottom: 0; } } @media only screen and (min-width: 1800px) 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 0.1em -0.25em 0; } .content.content-style-drop-caps > p:first-of-type + * { clear: left; } /* ================================================================================ * Supported WP Core Classes/ Styles ================================================================================ */ /* Wordpress Core Classes --------------------------------------------------------------- */ /* Align Classes */ *.alignleft, *.alignright, *.aligncenter, *.alignnone { margin-bottom: 0.5em; max-width: 100%; height: auto; } @media only screen and (max-width: 1199px) { *.alignleft, *.alignright, *.aligncenter, *.alignnone { display: block; } } @media only screen and (min-width: 1200px) { *.alignleft { display: inline; float: left; clear: right; margin-right: 0.5em; margin-top: 0.5em; } *.alignright { display: inline; float: right; clear: right; margin-left: 0.5em; margin-top: 0.5em; } *.aligncenter { 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: 0.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: 0.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; -webkit-clip-path: none; clip-path: none; color: var(--color-neutral); position: fixed; display: block; font-size: 1em; height: auto; left: 0.25rem; line-height: normal; padding: 1rem 1.5rem; text-decoration: none; top: 0.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 --------------------------------------------------------------- */ .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 { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ } /* 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.cover-constricted > * { position: absolute; } .cover-child { /* element to emulate background-size cover */ position: absolute; top: 0; left: 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: -webkit-max-content; 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; } /* 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: -webkit-max-content; 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; top: 0; right: 0; bottom: 0; left: 0; margin: auto; 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 759px sm: tablet 760px 1199px md: laptop 1200px 1399px lg: desktop 1400px 1799px xl: hd 1800px 999999999999+ --------------------------------------------------------------- */ .xl-only, .lg-only, .md-only, .sm-only, .xs-only, .home-only, .internal-only, .print-only { display: none !important; } .ilaw-template-home .home-only { display: block !important; } .ilaw-template-home .home-hide { display: none !important; } body:not(.ilaw-template-home) .internal-only { display: block !important; } body:not(.ilaw-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: 1800px) { .xl-only { display: block !important; } .xl-hide { display: none !important; } } @media only screen and (min-width: 1400px) and (max-width: 1799px) { .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: 760px) and (max-width: 1199px) { .sm-only { display: block !important; } .sm-hide { display: none !important; } } @media only screen and (max-width: 759px) { .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-left: calc(var(--button-padding-x) - var(--button-border-width)); padding-right: calc(var(--button-padding-x) - var(--button-border-width)); padding-top: calc((var(--button-height) - var(--button-border-width) * 2 - 1em * var(--button-lines) * var(--button-line-height)) * var(--button-baseline-offset)); padding-bottom: 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 0.125s ease-in-out; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; vertical-align: middle; -moz-column-gap: 0.25em; column-gap: 0.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; line-height: var(--button-line-height); } .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: 54px; --button-border-width: 2px; --button-border-radius: 9999em; --button-padding-x: 18px; --button-lines: 1; --button-baseline-offset: 0.52; --button-line-height: 1.125; font-size: 14px; color: var(--color-dark-alt); letter-spacing: 0.09em; text-transform: uppercase; font-style: normal; font-weight: 700; text-decoration: none; border-radius: var(--button-border-radius); } @media only screen and (min-width: 760px) { .button { font-size: 18px; --button-padding-x: 28px; --button-height: 62px; } } @media only screen and (min-width: 1200px) { .button { --button-height: 62px; --button-padding-x: 28px; } } /* 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 smaller than the default height */ .button.button-size-medium { --button-height: 46px; --button-padding-x: 28px; } .button.button-size-medium:hover { color: var(--color-primary); } @media only screen and (min-width: 760px) { .button.button-size-medium { --button-height: 50px; } } .button.button-size-small { color: var(--color-accent); } .button.button-size-small:hover { color: var(--color-primary); } @media only screen and (min-width: 760px) { .button.button-size-small { --button-height: 50px; } } @media only screen and (min-width: 1400px) { .button.button-size-small { font-size: 15px; } } @media only screen and (min-width: 1800px) { .button.button-size-small { font-size: 18px; } } @media only screen and (max-width: 759px) { .button.button-size-small { font-size: 14px; --button-height: 42px; } } .button.button-size-micro { font-size: 15px; --button-height: 2.375rem; } .button.button-size-micro:hover { color: var(--color-primary); } /* button w/ a height larger than the default height */ .button.button-size-large-alt { --button-height: 58px; --button-padding-x: 27px; } @media only screen and (min-width: 1200px) { .button.button-size-large-alt { --button-height: 62px; } } /* button w/ a height larger than the default height */ /* button w/ a height larger than the default height */ .button.button-size-form { font-size: 18px; --button-height: 50px; } /* constricts the width equal to whatever size height is set*/ .button.button-size-equal { --button-padding-x: 0; width: var(--button-height); } /* 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-gradient-start) 0%, var(--color-primary-gradient-end) 100%); background-color: var(--color-primary-gradient-start); color: var(--color-light); border-color: transparent; --button-border-radius: 999em; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.21); } .button.button-palette-secondary:is(:hover, :focus) { background-image: linear-gradient(to bottom, var(--color-secondary) 0%, var(--color-secondary) 100%); background-color: var(--color-secondary); } .button.button-palette-default:is(:hover, :focus), .button.button-palette-outline:is(:hover, :focus), .button.button-palette-minimal:is(:hover, :focus), .button.button-palette-secondary-alt:is(:hover, :focus), .button.button-palette-reverse:not(:is(:hover, :focus)) { background-image: none; background-color: var(--color-dark-alt); color: var(--color-light); border-color: transparent; } :where(.content-palette-dark) .button.button-palette-default:is(:hover, :focus), :where(.content-palette-dark) .button.button-palette-outline:is(:hover, :focus), :where(.content-palette-dark) .button.button-palette-minimal:is(:hover, :focus), :where(.content-palette-dark) .button.button-palette-secondary-alt:is(:hover, :focus), :where(.content-palette-dark) .button.button-palette-reverse:not(:is(:hover, :focus)) { background-image: linear-gradient(to bottom, var(--color-light) 0%, var(--color-neutral-dark) 60%); background-color: #406980; } .button.button-palette-secondary, .button.button-palette-secondary-alt { background-image: linear-gradient(to bottom, var(--color-secondary-gradient-start) 0%, var(--color-secondary-gradient-end) 100%); background-color: var(--color-secondary-alt); color: var(--color-dark); border-color: transparent; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.21); } .button.button-palette-minimal { background-color: transparent; background-image: none; color: var(--color-primary); border-color: transparent; } .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-outline { background-color: transparent; background-image: none; color: var(--color-primary); border-color: currentColor; } /* // 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 .button3-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; --button-style-special-offset: .5em; } .button.button-style-special::before, .button.button-style-special::after { content: ""; transition: box-shadow 0.125s ease-in-out; } .button.button-style-special::before { display: inline-block; align-self: center; margin-right: 1.5em; margin-left: 0.375em; margin-bottom: 0.375em; width: 1.5rem; height: var(--button-border-width); background: currentColor; box-shadow: 0em -0.375em 0 0, -0.375em 0 0 0, 0.375em 0 0 0, 0em 0.375em 0 0; } .button.button-style-special::after { top: calc(var(--button-style-special-offset) * -1 - var(--button-border-width) * 2); bottom: calc(var(--button-style-special-offset) * -1 - var(--button-border-width) * 2); left: calc(var(--button-style-special-offset) * -1 - var(--button-border-width) * 2); right: calc(var(--button-style-special-offset) * -1 - var(--button-border-width) * 2); border: var(--button-border-width) solid var(--color-accent); border-radius: calc(var(--button-border-radius) * 2); display: block; position: absolute; box-shadow: inset 0 0 0 var(--button-style-special-offset) rgba(255, 255, 255, 0.1333333333); mix-blend-mode: screen; } .button.button-style-special:is(:hover, :focus)::before { box-shadow: 0.375em -0.375em 0 0, -0.75em 0 0 0, -0.75em 0 0 0, 0.375em 0.375em 0 0; } .button.button-style-special:is(:hover, :focus)::after { border-color: var(--color-primary); } /* link style button. Usually the maps link or read more text for blog posts */ .button.button-style-link { --button-border-width: 2px; --button-border-radius: 0; border-width: 0 0 var(--button-border-width); padding: 0 0 5px; background: none; border-color: currentColor; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 600; text-decoration: none; } .button.button-style-link:is(:hover, :focus) { color: var(--color-accent); } :where(.content-palette-dark) .button.button-style-link:not(:is(:hover, :focus)) { color: var(--color-light); border-color: var(--color-primary-alt); } :where(.content-palette-dark) .button.button-style-link:is(:hover, :focus) { color: var(--color-primary-alt); border-color: var(--color-primary-alt); } .button.button-style-link.button-style-link-inherit { font-size: 16px; --button-border-width: 3px; } .button.button-style-link.button-style-link-inherit:not(:is(:hover, :focus)) { color: inherit; border-color: var(--color-primary-alt); } :where(.content-palette-dark) .button.button-style-link.button-style-link-inherit:not(:is(:hover, :focus)) { color: inherit; border-color: var(--color-primary-alt); } .button.button-style-link.button-style-link-inherit:is(:hover, :focus) { color: var(--color-primary-alt); border-color: currentColor; } /* 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-init:not(:is(:hover, :focus)) { background-image: none; } .button.button-style-flat-hover:is(:hover, :focus) { background-image: none; } /* remove radius */ .button.button-style-no-radius { --button-border-radius: 0; } .button.button-style-block { width: 100%; } /* 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 ((-webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0)) or (clip-path: polygon(0 0, 0 0, 0 0, 0 0))) { .button.button-style-diamond { overflow: hidden; -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } } /* if the slider buttons have unique overrides */ /* 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; /* slider glyph border arrow styles */ content: ""; width: 1em; height: 1em; border: 2px solid currentColor; border-left: 0; border-bottom: 0; transform: rotate(45deg); flex: 0 0 auto; margin-left: -0.375em; } /* 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; /* widths*/ max-width: 100%; width: calc(100% - max(var(--container-gutter) - min(var(--container-fallback), var(--container-gutter)), 0rem) * 2); min-width: 0; /* flex stuff */ flex: 0 0 auto; grid-column: 1/-1; /* container query support */ container: container/inline-size; } /* 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: 24px; /* customizeable distance. Set as the `--container-fallback` by default. Can be customized depending on the design of a given section though 20px - 30px should be enough */ --container-size-reference: var(--comp); /* window width or section width. you wont usually need to manipulate this value unless complex split layout designs */ --container-gutter: var(--container-fallback); /* the value to constrain the container's horizontal space. you will mostly modify this variable. */ } @media only screen and (min-width: 760px) { .container { --container-fallback: 71px; } } @media only screen and (min-width: 1400px) { .container { --container-fallback: 60px; } } /* 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; } /* 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 */ @media only screen and (min-width: 760px) { .container.container-size-default { --container-gutter: 66px; } } @media only screen and (min-width: 1400px) { .container.container-size-default { --container-gutter: 112px; } } @media only screen and (min-width: 1800px) { .container.container-size-default { --container-gutter: 222px; } } @media only screen and (min-width: 1200px) { .container.container-size-global { --container-gutter: 70px; } } @media only screen and (min-width: 1400px) { .container.container-size-global { --container-gutter: 80px; } } @media only screen and (min-width: 1800px) { .container.container-size-global { --container-gutter: 112px; } } @media only screen and (max-width: 1199px) { .container.container-size-global { --container-fallback: 0px; --container-gutter: 0px; max-width: 100% !important; } } /* Reduces horizontal padding */ @media only screen and (min-width: 760px) { .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: 759px) { .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: 760px) 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: 760px) { .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: 759px) { .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: 1800px) { .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: 1200px) { .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; max-width: none; width: auto; min-width: 0; } .columns, .columns > * { min-width: 0; } .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), 1fr); } .columns.columns-grid > * { width: 100%; margin: 0 auto; } .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); } /* 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 --------------------------------------------------------------- */ 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; } hr, .fancy-border.fancy-border-before::before, .fancy-border.fancy-border-after::after { height: var(--fancy-border-height, 3px); background-color: currentColor; width: var(--fancy-border-width, 100%); margin-left: var(--fancy-border-margin-l); margin-right: var(--fancy-border-margin-r); } .fancy-border.fancy-border-before:not(hr)::before, .fancy-border.fancy-border-after:not(hr)::after { content: ""; } hr, .fancy-border-after::after, .fancy-border-before::before { display: block; transition: all 0.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); } hr.fancy-border-palette-primary, .fancy-border-palette-primary.fancy-border-before::before, .fancy-border-palette-primary.fancy-border-after::after { background-color: var(--color-primary); background-image: linear-gradient(90deg, var(--color-primary-gradient-start) 0%, var(--color-primary-gradient-end) 100%); } hr.fancy-border-palette-secondary, .fancy-border-palette-secondary.fancy-border-before::before, .fancy-border-palette-secondary.fancy-border-after::after { background-color: var(--color-secondary); background-image: linear-gradient(90deg, var(--color-secondary-gradient-start) 0%, var(--color-secondary-gradient-end) 100%); } hr.fancy-border-palette-accent, .fancy-border-palette-accent.fancy-border-before::before, .fancy-border-palette-accent.fancy-border-after::after { background-color: var(--color-accent); background-image: linear-gradient(90deg, var(--color-accent-gradient-start) 0%, var(--color-accent-gradient-end) 100%); } hr.fancy-border-palette-neutral, .fancy-border-palette-neutral.fancy-border-before::before, .fancy-border-palette-neutral.fancy-border-after::after { background-color: var(--color-neutral); } .fancy-border-style-thin { --fancy-border-height: 1px; } 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; } /* 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:is(hr, .fancy-border).fancy-border-animated, :is(hr, .fancy-border).fancy-border-animated.fancy-border-before::before, :is(hr, .fancy-border).fancy-border-animated.fancy-border-after::after { transition: width 1.5s ease-in-out; } :is(hr, .fancy-border).fancy-border-animated:not(.visible) { --fancy-border-width: 0%; } } /* 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-center-width: 100%; --fancy-icon-menu-bar-bottom-width: 100%; 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%; margin: auto; transition: all 0.375s ease-in-out; } .fancy-icon-menu span:first-child { bottom: auto; width: var(--fancy-icon-menu-bar-top-width); } .fancy-icon-menu span:last-child { top: auto; width: var(--fancy-icon-menu-bar-bottom-width); } .fancy-icon-menu span:nth-child(2), .fancy-icon-menu span:nth-child(3) { width: var(--fancy-icon-menu-bar-center-width); } .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:nth-child(2), .open .fancy-icon-menu span:nth-child(3) { width: 100%; } .open .fancy-icon-menu span:first-child, .open .fancy-icon-menu span:last-child { width: 0; } /* Fancy Text Animation by Mr. Garrett but Sam added tweaks --------------------------------------------------------------- */ @media only screen and (min-width: 1200px) { .fancy-letters { /* Insert Mr Garrett's code here */ --fancy-letters-factor: 0; --fancy-letters-factor-word: 0; --fancy-letters-factor-char: 0; --fancy-letters-delay: .02s; --fancy-letters-duration: 1.5s; } .fancy-letters.content { --fancy-letters-delay: .5s; --fancy-letters-factor: 1; transform: skewY(0deg) skewX(-4deg) rotate(-2deg) translateY(6rem); } .fancy-letters, .fancy-letters-word, .fancy-letters-char { transition-timing-function: 0.5, 0, 0, 1; overflow: hidden; display: inline-block; vertical-align: bottom; padding-bottom: 0.5em; margin-bottom: -0.5em; opacity: 0; transition-property: opacity; transition-delay: 0s; transition-duration: 0.25s; } .fancy-letters { transform: skewY(0deg) skewX(-4deg) rotate(-2deg) translateY(50%); } .fancy-letters-word { transform: skewY(-10deg) skewX(0deg) rotate(0deg) translateY(100%); min-width: -webkit-max-content; min-width: -moz-max-content; min-width: max-content; } .fancy-letters-char { transform: skewY(10deg) skewX(0deg) rotate(10deg) translateY(100%); } .fancy-letters.visible, .fancy-letters.visible .fancy-letters-word, .fancy-letters.visible .fancy-letters-char, .visible .fancy-letters, .visible .fancy-letters .fancy-letters-word, .visible .fancy-letters .fancy-letters-char { transition-property: transform, opacity; transition-duration: var(--fancy-letters-duration); transform: skewY(0deg) skewX(0deg) rotate(0deg) translateY(0%); opacity: 1; } .fancy-letters.visible, .visible .fancy-letters { transition-delay: calc(var(--fancy-letters-delay) * var(--fancy-letters-factor)); transform-origin: top left; } .fancy-letters.visible .fancy-letters-word, .visible .fancy-letters .fancy-letters-word { transition-delay: calc(var(--fancy-letters-delay) * 1.5 * var(--fancy-letters-factor-word)); transform-origin: bottom right; } .fancy-letters.visible .fancy-letters-char, .visible .fancy-letters .fancy-letters-char { transition-delay: calc(var(--fancy-letters-delay) * 2.5 * var(--fancy-letters-factor-char)); transform-origin: center center; } } /* Other Custom Fancy Stuff --------------------------------------------------------------- */ .fancy-silhouette { --fancy-silhouette-size: 1208px; --fancy-silhouette-t: auto; --fancy-silhouette-l: auto; --fancy-silhouette-b: auto; --fancy-silhouette-r: auto; --fancy-silhouette-transform: none; --fancy-silhouette-opacity: 1; } .fancy-silhouette { font-size: var(--fancy-silhouette-size); width: 0.76em; height: 1em; -webkit-mask-composite: xor; mask-composite: exclude; position: absolute; top: var(--fancy-silhouette-t); left: var(--fancy-silhouette-l); right: var(--fancy-silhouette-r); bottom: var(--fancy-silhouette-b); background-repeat: repeat; background-size: contain; margin: auto; opacity: var(--fancy-silhouette-opacity); transform: var(--fancy-silhouette-transform); pointer-events: none; } @supports (mix-blend-mode: multiply) { .fancy-silhouette { background-position: center center; background-size: contain; mix-blend-mode: multiply; background-repeat: no-repeat; } } @supports (mix-blend-mode: multiply) { .fancy-silhouette-leaves { background-image: url(/wp-content/themes/pql31/images/Shadow.webp); --fancy-silhouette-size: 2500px; } } .fancy-silhouette-leaves-alt { width: 100%; min-width: 1.4065934066em; min-height: 1em; height: 100%; --fancy-silhouette-t: 0; --fancy-silhouette-l: 0; --fancy-silhouette-opacity: .6; z-index: -1; } @supports (mix-blend-mode: multiply) { .doc-images-loaded .fancy-silhouette-leaves-alt { background-image: url(/wp-content/themes/pql31/images/leaves-alt.webp); background-position: top right; background-size: cover; } } .fancy-silhouette-wrapper { position: relative; overflow: hidden; z-index: 0; } .fancy-silhouette-wrapper-affect-body { overflow: visible; } .fancy-silhouette-wrapper-affect-body, .fancy-silhouette-wrapper-affect-body .fancy-silhouette { z-index: auto; } /* Other Custom Fancy Stuff --------------------------------------------------------------- */ .fancy-pattern, .fancy-pattern-wrapper { position: relative; z-index: 0; overflow: clip; } .fancy-pattern-wrapper .fancy-pattern, .fancy-pattern::after { opacity: 0.45; z-index: -1; display: block; inset: 0; position: absolute; pointer-events: none; } .doc-images-loaded .fancy-pattern-wrapper .fancy-pattern, .doc-images-loaded .fancy-pattern::after { background-image: url(/wp-content/themes/pql31/images/pattern.gif); } .fancy-pattern::after { content: ""; } /* Other Custom Fancy Stuff --------------------------------------------------------------- */ /* 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-top: var(--widget-padding-top); padding-bottom: var(--widget-padding-bottom); padding-inline: var(--widget-padding-x); position: relative; max-width: none; width: auto; margin-bottom: 48px; } .widget:last-child { margin-bottom: 0; } .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-top: var(--widget-content-padding-top); padding-bottom: var(--widget-content-padding-bottom); margin-top: var(--widget-content-margin-top); margin-bottom: 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) { margin-bottom: 0; margin-top: 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-top: 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)); padding-bottom: 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-top: var(--widget-item-border-width) solid transparent; border-bottom: var(--widget-item-border-width) solid transparent; padding-top: var(--widget-dropdown-padding-top); margin-top: var(--widget-dropdown-margin-top); padding-bottom: var(--widget-dropdown-padding-bottom); margin-bottom: 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%; } @media only screen and (min-width: 1200px) { .widget { margin-bottom: 40px; } } /* 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: 42px; /* Horizontal padding between the widgets' edges and its contents NOTE: the .widget, title, li, and ul/content block use this variable to adjust paddings and negative margins to align to value NOTE: li is being padded with --widget-padding-x to align the padding perfectly with the title, li, and uls/content block */ --widget-padding-top: 35px; /* Yes */ --widget-padding-bottom: var(--widget-padding-top); /* Yes */ --widget-dropdown-padding-top: .5rem; /* Yes */ --widget-dropdown-padding-bottom: var(--widget-dropdown-padding-top); /* Yes * will also be used to calculate negative margins for dropdowns within the last child for consistent spacing */ --widget-dropdown-margin-top: 30px; /* dropdown margin top. used to distance from previous sibling link */ --widget-dropdown-margin-bottom: var(--widget-dropdown-margin-top); /* dropdown margin bottom. used to distance from parent li's next sibling */ --widget-item-height: 53px; /* ideal height of widget list item. designers will prefer to design widget list items 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 widget list items */ --widget-item-border-width: 1px; /* border width. This will be accounted for in calculating the widget list item height as well */ --widget-item-lines: 1; /* Note: this value has to be unitless for calc values to work. Number of lines to compensate for the widget list item height */ --widget-item-padding-x: 8px; /* Padding to distance between only the anchor tags' and parent widget li item. Not affected by `--widget-padding-x` */ --widget-dropdown-offset: 0em; --widget-dropdown-item-offset: 0em; /* Set to 0 if not needed */ --widget-title-padding-x: var(--widget-item-padding-x); /* Note: this value has to be unitless for calc values to work. * modify this value if the font seems a little too high or low in vertical alignment. 1 moves the text to the very top. 0 moves the text to the very bottom. 0.5 will center it based on the fonts' basline alignment */ --widget-content-margin-top: 42px; /* margin distance between the widget title and the widget contents */ --widget-content-margin-bottom: 0rem; /* margin distance between the widget title and the widget contents */ --widget-content-padding-top: 1.5rem; /* margin distance between the widget title and the widget contents Note: if the widget accordion is closed, this hides along with the contents, meaning it wont affect the `--widget-padding-bottom` */ --widget-content-padding-bottom: 0rem; /* margin distance between the widget title and the widget contents Tip: setting to `calc(var(--widget-padding-bottom) * -1)` can compensate the `--widget-padding-bottom` without affecting it when the widget is collapsed Note: if the widget accordion is closed, this hides along with the contents, meaning it wont affect the `--widget-padding-bottom` */ --widget-item-baseline-offset: 0.5; /* Note: this value has to be unitless for calc values to work. modify this value if the font seems a little too high or low in vertical alignment. * 1 moves the text to the very top. * 0 moves the text to the very bottom. * 0.5 will center it based on the fonts' basline alignment */ --widget-item-line-height: 1.25; /* Note: this value has to be unitless for calc values to work. Usually there's no need to modify this unless a multiline widget list item is present in the design. * Formula is line-height-px / font-size-px */ font-size: 18px; color: var(--color-light); font-weight: 400; text-align: left; text-decoration: none; background-color: var(--color-dark-alt); border-radius: var(--global-border-radius); width: 100%; } .widget > :where(ul, .widget-content) { border-top: 1px solid rgba(77, 126, 153, 0.3); } .widget > :where(ul, .widget-content):not(.content) li:is(.open, :hover, :focus-within) > a { color: var(--color-secondary-alt); font-weight: 600; } .widget > :where(ul, .widget-content):not(.content) li ul { background-color: var(--color-primary); text-align: left; } .widget > :where(ul, .widget-content):not(.content) li ul ul { background: rgba(0, 0, 0, 0.1); } .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: 1200px) { .widget { --widget-padding-x: 37px; --widget-padding-top: 34px; --widget-content-margin-top: 38px; } } @media only screen and (min-width: 1800px) { .widget { --widget-padding-x: 70px; --widget-padding-top: 41px; } } /* Widget Title --------------------------------------------------------------- */ :is(.widget-title, .widget-title, .widgettitle) { font-size: 20px; line-height: 1; color: var(--color-secondary); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; } .widget:not(.widget-style-no-toggle):not(.open) > :is(.widget-title, .widget-title, .widgettitle).fancy-border-after:after, .widget:not(.widget-style-no-toggle):not(.open) > :is(.widget-title, .widget-title, .widgettitle).fancy-border-before:before { content: none; --fancy-border-height: 0; --fancy-border-margin-y: 0; } :is(.widget-title, .widget-title, .widgettitle).fancy-border-after:after, :is(.widget-title, .widget-title, .widgettitle).fancy-border-before:before { flex: 0 0 auto; } /* Widget Toggle --------------------------------------------------------------- */ .widget-toggle { display: flex; justify-content: flex-start; gap: 4px; cursor: pointer; } .widget-toggle::before { display: inline-block; order: 9; align-self: center; transform-origin: center center; flex: 0 0 auto; content: ""; font-size: 0.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); } /* @TODO improve docs Popup modal. for initially hidden content. Uncomment in style.scss if needed Markup should follow the folloowing .popup-trigger .popup html content to place inside the popup Note: all contents will be moved out of its containing block and into a popup markup before the bnody tag --------------------------------------------------------------- */ .doc-popup-active { overflow-y: hidden; } .popup-content { display: none !important; } .popup { display: none; 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; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; flex-direction: column; } .popup-overlay { background: var(--color-dark); opacity: 0.92; position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: 0; } .popup-body { overflow-y: scroll; height: 100%; padding: 11vw 0; scrollbar-width: none; } .popup-body::-webkit-scrollbar { display: none; } .popup-wrapper { padding: 4rem 2rem 4rem; } .popup-wrapper { background: var(--global-background); position: relative; } .popup-close-button { position: absolute; top: 0; right: 0.75em; margin-top: 0.75em; background: none; border: 0; font-size: 2.75rem; display: block; width: 1em; height: 1em; line-height: 1; padding: 0; overflow: hidden; text-indent: -9999em; } .popup-close-button::before, .popup-close-button::after { content: ""; display: block; height: 4px; 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: 760px) { .popup .container { --container-gutter: 85px; } .popup-wrapper { padding: 5rem 5.75rem; } } @media only screen and (min-width: 1200px) { .popup .container { --container-gutter: 250px; } .popup-wrapper { padding: 6rem 8rem 5rem; } } @media only screen and (min-width: 1400px) { .popup .container { --container-gutter: 290px; } .popup-wrapper { padding: 7rem 9.25rem 5rem; } } @media only screen and (min-width: 1800px) { .popup .container { --container-gutter: 446px; } .popup-wrapper { padding: 10.5rem 13.25rem 8.5rem; } } @media only screen and (max-width: 759px) { .popup-close-button { font-size: 1.5rem; margin-top: 1.25rem; right: 1.25rem; } } /* ================================================================================ * Header ================================================================================ */ /* Layout Header 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: 82px; /* height of the whole header at a given state or layout */ --layout-header-logo-height: var(--layout-header-height); /* height of logo including its padding at a given state or layout. */ } @media only screen and (min-width: 1200px) { :root { /* Non-touch Devices Header Styles Start */ --layout-header-height: 110px; } } @media only screen and (min-width: 1800px) { :root { --layout-header-height: 100px; } } @media only screen and (max-width: 1199px) { :root { /* Touch Devices Header Styles Start */ --layout-header-height: 84px; } } @media only screen and (max-width: 759px) { :root { --layout-header-height: 135px; --layout-header-logo-height: 64px; } } .doc-header-not-sticky .header-overlay-on-banner { /* Styles/Selectors for when header overlays the banner or adjacent element before scroll on non-touch devices */ } @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 */ } } .doc-header-menu-open { /* Styles/Selectors for when header menu accordion for touch devices is open */ } @media only screen and (max-width: 1199px) { .doc-header-menu-open { overflow-y: hidden; } } /* 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: var(--layout-header-height) !important; } /* 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: -webkit-sticky; position: sticky; top: 0; left: 0; z-index: 999; display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; background-color: var(--color-light-alt); color: var(--color-dark); transition: 0.25s top ease-in-out; box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.8); } .layout-header-container { --container-gutter: 30px; } @media only screen and (min-width: 760px) { .layout-header-container { --container-gutter: 32px; } } @media only screen and (min-width: 1200px) { .layout-header { /* Non-touch Devices Header Styles Start */ } .layout-header-container { --container-gutter: 48px; } } @media only screen and (min-width: 1400px) { .layout-header-container { --container-gutter: 46px; } } @media only screen and (min-width: 1800px) { .layout-header-container { --container-gutter: 42px; } } @media only screen and (max-width: 1199px) { .layout-header { /* Touch Devices Header Styles Start */ } } @media only screen and (max-width: 759px) { .layout-header { background-color: var(--color-primary); color: var(--color-accent-alt); } .layout-header-container { --container-gutter: 15px; } .layout-header { /* header: 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.) */ } } .doc-header-not-sticky .header-overlay-on-banner .layout-header { /* Styles/Selectors for when header overlays the banner or adjacent element before scroll on non-touch devices */ } @media only screen and (min-width: 1200px) { .doc-header-not-sticky .header-overlay-on-banner .layout-header { /* remove background */ background: transparent; } } .doc-header-not-sticky .layout-header { /* Styles/Selectors for when header is not sticky yet. best for smaller devices styles and minor/global changes for larger devices */ /* remove dropdown shadow on all devices when not scrolling yet */ box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.8); } @media only screen and (max-width: 759px) { .doc-header-not-sticky .layout-header { /* reset offset when no scrolling yet */ top: 0; } } .doc-header-menu-open .layout-header { /* Styles/Selectors for when header menu accordion for touch devices is open */ } .header-overlay-on-banner .layout-header { /* Overlay header on header-overlay-on-banner. best for setting position on large devices AND NOTHING ELSE */ } @media only screen and (min-width: 1200px) { .header-overlay-on-banner .layout-header { position: fixed; } } /* Header Blocks --------------------------------------------------------------- */ .header-blocks, .header-blocks > * { min-width: 0; } .header-blocks { display: grid; grid-template-columns: auto 1fr auto; align-items: center; grid-template-areas: "logo nav cta"; -moz-column-gap: var(--container-gutter); column-gap: var(--container-gutter); row-gap: 0rem; /* set as min instead in case alertbar needs to be added within header */ min-height: var(--layout-header-height); } @media only screen and (min-width: 1200px) { .header-blocks { /* Non-touch Devices Header Styles Start */ } } @media only screen and (min-width: 1200px) and (max-width: 1799px) { .header-blocks { grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; grid-template-areas: "logo cta" "logo nav"; } } @media only screen and (max-width: 1199px) { .header-blocks { /* Touch Devices Header Styles Start */ grid-template-columns: 1fr auto auto; grid-template-rows: auto 1fr; grid-template-areas: "logo cta toggle-menu"; margin-inline: 0 calc(var(--container-gutter) * -1); } } @media only screen and (max-width: 759px) { .header-blocks { grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; grid-template-areas: "logo logo" "cta toggle-menu"; margin-inline: calc(var(--container-gutter) * -1); } } .doc-header-not-sticky .header-overlay-on-banner .header-blocks { /* Styles/Selectors for when header overlays the banner or adjacent element before scroll on non-touch devices */ } .doc-header-not-sticky .header-blocks { /* Styles/Selectors for when header is not sticky yet. best for smaller devices styles and minor/global changes for larger devices */ } .header-blocks .doc-header-menu-open { /* Styles/Selectors for when header menu accordion for touch devices is open */ } /* Header Logo --------------------------------------------------------------- */ .header-logo { grid-area: logo; padding-block: 0.75rem; height: var(--layout-header-logo-height); flex: 0 0 auto; /* support logo offseting on overlay banner + not sticky state. comment if not needed */ position: relative; } .header-logo .logo-wrapper-touch, .header-logo .logo-wrapper-before-sticky { /* hide possible variations of logo */ display: none; } @media only screen and (min-width: 1200px) { .header-logo { /* Non-touch Devices Header Styles Start */ padding-block: 26px; } } @media only screen and (min-width: 1800px) { .header-logo { padding-block: 20px; } } @media only screen and (max-width: 1199px) { .header-logo { /* Touch Devices Header Styles Start */ } } @media only screen and (max-width: 759px) { .header-logo { padding-block: 9px; width: 100%; background: var(--color-light); max-width: 100%; } .header-logo .logo-wrapper-touch { /* show */ display: block; } .header-logo .logo-wrapper-touch ~ .logo-wrapper-nontouch { display: none; } } .doc-header-not-sticky .header-overlay-on-banner .header-logo { /* Styles/Selectors for when header overlays the banner or adjacent element before scroll on non-touch devices */ } @media only screen and (min-width: 1200px) { .doc-header-not-sticky .header-overlay-on-banner .header-logo { /* Any other styles for emphasis on logo on this state. Adjust as needed. Adjust as needed */ } .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; } } .doc-header-not-sticky .header-logo { /* Styles/Selectors for when header is not sticky yet. best for smaller devices styles and minor/global changes for larger devices */ } .doc-header-menu-open .header-logo { /* Styles/Selectors for when header menu accordion for touch devices is open */ } /* Header Toggle/s --------------------------------------------------------------- */ .header-toggle { grid-area: toggle-menu; width: 76px; align-self: stretch; display: flex; align-items: center; justify-content: center; flex-direction: column; flex: 0 0 auto; } .header-toggle-menu { background: var(--color-primary); color: var(--color-light); position: relative; z-index: 99999; top: 0; transition: 0.375s all ease-in-out; } .header-toggle-menu-icon { --fancy-icon-menu-width: 43px; --fancy-icon-menu-height: 26px; --fancy-icon-menu-bar-height: 4px; } .header-toggle-menu-label { font-size: 0.75rem; font-family: var(--font-accent); text-transform: uppercase; font-style: normal; font-weight: 700; text-align: center; margin-top: 0.5em; transition: 0.375s all ease-in-out; } .header-toggle-menu.open .header-toggle-menu-label { margin-top: -1em; opacity: 0; } @media only screen and (min-width: 1200px) { .header-toggle { /* Non-touch Devices Header Styles Start */ } } @media only screen and (max-width: 1199px) { .header-toggle { /* Touch Devices Header Styles Start */ } } @media only screen and (max-width: 759px) { .header-toggle-menu.open { top: 0; } } .doc-header-not-sticky .header-overlay-on-banner .header-toggle { /* Styles/Selectors for when header overlays the banner or adjacent element before scroll on non-touch devices */ } .doc-header-not-sticky .header-toggle { /* Styles/Selectors for when header is not sticky yet. best for smaller devices styles and minor/global changes for larger devices */ } .doc-header-menu-open .header-toggle { /* Styles/Selectors for when header menu accordion for touch devices is open */ } .doc-header-menu-open.doc-header-not-sticky .header-toggle { /* Styles/Selectors for when header menu accordion for touch devices is open and header is not sticky yet */ } @media only screen and (max-width: 759px) { .doc-header-menu-open.doc-header-not-sticky .header-toggle-menu { top: 0; } } /* Header Main --------------------------------------------------------------- */ .header-main { display: flex; justify-content: flex-end; min-height: var(--layout-header-height); flex: 1 1; } @media only screen and (min-width: 1200px) { .header-main { /* Non-touch Devices Header Styles Start */ flex-direction: row; justify-content: flex-end; } } @media only screen and (min-width: 1800px) { .header-main { flex-direction: row; } } @media only screen and (max-width: 1199px) { .header-main { /* Touch Devices Header Styles Start */ } } @media only screen and (max-width: 759px) { .header-main { min-height: calc(var(--layout-header-height) - var(--layout-header-logo-height)); width: 100%; } } .doc-header-not-sticky .header-overlay-on-banner .header-main { /* Styles/Selectors for when header overlays the banner or adjacent element before scroll on non-touch devices */ } @media only screen and (min-width: 1200px) { .doc-header-not-sticky .header-overlay-on-banner .header-main { align-self: self-start; } } .doc-header-not-sticky .header-main { /* Styles/Selectors for when header is not sticky yet. best for smaller devices styles and minor/global changes for larger devices */ } .doc-header-menu-open .header-main { /* Styles/Selectors for when header menu accordion for touch devices is open */ } /* Header CTA --------------------------------------------------------------- */ .header-cta { grid-area: cta; display: flex; flex-direction: column; justify-content: center; text-align: center; align-items: flex-end; gap: 0.25rem; } @media only screen and (min-width: 1200px) { .header-cta { /* Non-touch Devices Header Styles Start */ } } @media only screen and (min-width: 1200px) and (max-width: 1799px) { .header-cta { flex-direction: row; align-items: center; align-self: end; justify-content: flex-end; gap: 0.75rem; order: -1; } } @media only screen and (min-width: 1800px) { .header-cta { margin-bottom: 0; } } @media only screen and (max-width: 1199px) { .header-cta { /* Touch Devices Header Styles Start */ } } @media only screen and (max-width: 759px) { .header-cta { align-items: flex-start; flex: 1 1; padding-inline: var(--container-gutter); justify-content: flex-start; } } .doc-header-not-sticky .header-overlay-on-banner .header-cta { /* Styles/Selectors for when header overlays the banner or adjacent element before scroll on non-touch devices */ } .doc-header-not-sticky .header-cta { /* Styles/Selectors for when header is not sticky yet. best for smaller devices styles and minor/global changes for larger devices */ } .doc-header-menu-open .header-cta { /* Styles/Selectors for when header menu accordion for touch devices is open */ } /* Header Contact --------------------------------------------------------------- */ .header-blocks > .header-contact { grid-area: contact; display: flex; align-items: center; gap: 0.5rem; color: var(--color-secondary-alt); justify-content: flex-end; } .header-blocks > .header-contact .social { font-size: 26px; flex: 0 0 auto; align-items: center; } .header-blocks > .header-contact .social li { display: flex; } .header-blocks > .header-contact .social li:is(:hover, :focus) { color: inherit; } @media only screen and (min-width: 1200px) { .header-blocks > .header-contact { /* Non-touch Devices Header Styles Start */ } } @media only screen and (min-width: 1400px) { .header-blocks > .header-contact .social { font-size: 28px; } } @media only screen and (min-width: 1800px) { .header-blocks > .header-contact { margin-bottom: 0; align-self: self-start; } .header-blocks > .header-contact .social { font-size: 33px; } } @media only screen and (max-width: 1199px) { .header-blocks > .header-contact { padding-block: 0 0.5rem; } } @media only screen and (max-width: 759px) { .header-blocks > .header-contact { padding-block: 0.5rem; justify-content: flex-start; color: var(--color-primary-alt); justify-self: self-start; padding-inline: var(--container-gutter) 0; } } .doc-header-not-sticky .header-overlay-on-banner .header-blocks > .header-contact { /* Styles/Selectors for when header overlays the banner or adjacent element before scroll on non-touch devices */ } .doc-header-not-sticky .header-blocks > .header-contact { /* Styles/Selectors for when header is not sticky yet. best for smaller devices styles and minor/global changes for larger devices */ } .doc-header-menu-open .header-blocks > .header-contact { /* Styles/Selectors for when header menu accordion for touch devices is open */ } /* Header CTA - Text --------------------------------------------------------------- */ .header-cta-text { grid-area: cta-text; font-size: 14px; line-height: 1.5; color: var(--color-primary-alt); letter-spacing: 0.0714285714em; text-transform: uppercase; font-weight: 800; } .header-cta-text > span { display: block; } @media only screen and (max-width: 1199px) { .header-cta-text { /* Touch Devices Header Styles Start */ } } @media only screen and (max-width: 759px) { .header-cta-text { color: #6A9FBD; font-size: 11px; text-align: center; } } .doc-header-not-sticky .header-overlay-on-banner .header-cta-text { /* Styles/Selectors for when header overlays the banner or adjacent element before scroll on non-touch devices */ } .doc-header-not-sticky .header-cta-text { /* Styles/Selectors for when header is not sticky yet. best for smaller devices styles and minor/global changes for larger devices */ } .doc-header-menu-open .header-cta-text { /* Styles/Selectors for when header menu accordion for touch devices is open */ } /* Header Number/s --------------------------------------------------------------- */ .header-numbers { display: flex; flex-direction: column; } .header-numbers .number-link { font-size: 20px; line-height: 1; font-family: var(--font-secondary); color: var(--color-primary); text-transform: uppercase; font-weight: 500; } .header-numbers .number-block:is(:only-child, .number-block-toll) .number-link { font-size: 24px; line-height: 1; } @media only screen and (min-width: 760px) { .header-numbers .number-block:is(:only-child, .number-block-toll) .number-link { font-size: 28px; } } @media only screen and (min-width: 1200px) { .header-numbers { /* Non-touch Devices Header Styles Start */ } .header-numbers .number-link { font-size: 15px; } .header-numbers .number-block:is(:only-child, .number-block-toll) .number-link { font-size: 28px; } } @media only screen and (min-width: 1800px) { .header-numbers .number-block:is(:only-child, .number-block-toll) .number-link { font-size: 33px; } } @media only screen and (max-width: 1199px) { .header-numbers { /* Touch Devices Header Styles Start */ text-align: right; } } @media only screen and (max-width: 759px) { .header-numbers .number-link { color: var(--color-light-alt); } } .doc-header-not-sticky .header-overlay-on-banner .header-numbers { /* Styles/Selectors for when header overlays the banner or adjacent element before scroll on non-touch devices */ } .doc-header-not-sticky .header-numbers { /* Styles/Selectors for when header is not sticky yet. best for smaller devices styles and minor/global changes for larger devices */ } .doc-header-menu-open .header-numbers { /* Styles/Selectors for when header menu accordion for touch devices is open */ } /* Header Navigation --------------------------------------------------------------- */ .header-nav { grid-area: nav; } @media only screen and (min-width: 1200px) { .header-nav { /* Non-touch Devices Header Styles Start */ } .header-nav { display: flex; justify-content: center; align-self: stretch; flex: 1 1; } } @media only screen and (max-width: 1199px) { .header-nav { /* Touch Devices Header Styles Start */ transition: top 0.25s ease-in-out, left 0.5s ease-in-out, opacity 0.5s ease-in-out; width: 100%; overflow-x: hidden; overflow-y: scroll; background: rgba(0, 0, 0, 0.8); display: flex; flex-wrap: wrap; opacity: 0; z-index: 9999; scrollbar-width: none; position: fixed; bottom: 0; left: 100%; top: calc(var(--layout-header-height)); } .header-nav::-webkit-scrollbar { display: none; } } @media only screen and (max-width: 759px) { .header-nav { top: var(--layout-header-height); } } .doc-header-not-sticky .header-overlay-on-banner .header-nav { /* Styles/Selectors for when header overlays the banner or adjacent element before scroll on non-touch devices */ } @media only screen and (min-width: 1200px) { .doc-header-not-sticky .header-overlay-on-banner .header-nav { color: inherit; } } .doc-header-not-sticky .header-nav { /* Styles/Selectors for when header is not sticky yet. best for smaller devices styles and minor/global changes for larger devices */ } .doc-header-menu-open .header-nav { /* Styles/Selectors for when header menu accordion for touch devices is open */ } @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 { /* Styles/Selectors for when header menu accordion for touch devices is open and header is not sticky yet */ } /* Header Navigation Menu --------------------------------------------------------------- */ .header-nav .menu { --layout-header-menu-touch-menu-padding-x: 65px; /* horizontal padding for menu items and accordion/dropdowns */ --layout-header-menu-nontouch-dropdown-padding-x: 0px; /* horizontal padding for menu items and accordion/dropdowns */ --layout-header-menu-nontouch-current-height: 3px; /* current item border indicator height */ font-size: 18px; line-height: 1.125; color: inherit; text-transform: capitalize; font-weight: 600; } .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: 10px 0 26px; display: inline-flex; align-items: center; transition: 0.125s ease-in-out all; flex: 1 0; /* comment out if borders are not desired */ } .header-nav .menu li:is(.current-menu-item, .current-menu-ancestor) > a { color: var(--color-primary-alt); font-weight: 800; } .header-nav .menu li:last-child, .header-nav .menu li:last-child > a { /* disable border for last items */ border: none; } .header-nav .menu li.menu-item-has-children > a::after { display: inline-block; align-self: center; flex: 0 0 auto; content: ""; font-size: 0.6rem; margin-left: 8px; transform-origin: 67% 67%; width: 1em; height: 1em; border: 2px solid currentColor; border-top: 0; border-left: 0; transform: rotate(45deg); } @media only screen and (min-width: 760px) { .header-nav .menu { --layout-header-menu-touch-menu-padding-x: 80px; } } @media only screen and (min-width: 1200px) { .header-nav .menu { font-size: 16px; gap: 24px; display: flex; justify-content: flex-end; flex: 1 1; position: relative; } .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; /* flush dropdown indicator and text to the left */ justify-content: flex-start; } .header-nav .menu li:is(:hover, :focus-within) > a { /* activated styles upon interaction for nontouch */ color: var(--color-primary); } .header-nav .menu li.menu-item-special > ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5em; width: 600px; padding: 2rem var(--layout-header-menu-nontouch-dropdown-padding-x); } .header-nav .menu li.menu-item-special > ul li { padding-left: 0; padding-right: 0; } .header-nav .menu li.menu-item-special > ul li.view-all { grid-column: span 3; } .header-nav .menu li.menu-item-special > ul ul { display: block !important; position: static; background: none; padding: 0; width: auto; } .header-nav .menu ul { background-color: var(--color-light-alt); width: 258px; top: 0; left: 100%; /* Take dropdowns out of doc flow + setup for hover/focus effects */ position: absolute; z-index: 1; /* additional border styles + align to current item indicator. comment out if not needed */ margin-top: calc(var(--layout-header-menu-nontouch-current-height) * -1); } .header-nav .menu ul > li.menu-item-has-children > a::after { transform: rotate(-45deg); } .header-nav .menu ul a { padding: 15px 30px; border-bottom: 1px solid rgba(4, 9, 13, 0.1); } .header-nav .menu > li { flex-direction: row; padding-left: 0; padding-right: 0; } .header-nav .menu > li, .header-nav .menu > li > a { /* undo fanciness from non-media query scaffolding for top level menu item and its child a tag */ border: none; background: none; margin: 0; } .header-nav .menu > li::before { /* current menu item indicator */ content: ""; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; transition: 0.125s ease-in-out width; width: 0; height: var(--layout-header-menu-nontouch-current-height); background: var(--color-accent); } .header-nav .menu > li:is(:hover, :focus-within) > a { background: transparent; color: var(--color-primary-alt); } .header-nav .menu > li > ul { background-color: var(--color-light-alt); top: 100%; padding-top: 0px; padding-bottom: 0px; margin-top: 0px; left: 0; box-shadow: inset 0 0px 6px 0 rgba(0, 0, 0, 0.16); } .header-nav .menu > li > ul > li:is(:hover, :focus-within) > a { color: var(--color-primary-alt); background: var(--color-neutral); } .header-nav .menu > li > ul ul li:is(:hover, :focus-within) > a { color: var(--color-accent); } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .header-nav .menu > li:nth-last-child(-n+2) > ul { /* top level level dropdown edge case dropdown fix */ left: auto; transform: none; right: 0; } } @media only screen and (min-width: 1200px) and (max-width: 1799px) { .header-nav .menu > li:nth-last-child(-n+2) > ul ul, .header-nav .menu ul ul ul { /* deep deep deep inner level dropdown edge case dropdown fix */ left: 25%; } } @media only screen and (min-width: 1400px) { .header-nav .menu { gap: 18px; } } @media only screen and (min-width: 1800px) { .header-nav .menu { justify-content: center; font-size: 18px; gap: 40px; } .header-nav .menu > li > a { padding-block: 35px; } } @media only screen and (max-width: 1199px) { .header-nav .menu { background: var(--color-light); box-shadow: inset 0 3px 3px 0 rgba(0, 0, 0, 0.21); font-size: 18px; color: var(--color-dark); padding-top: 20px; padding-bottom: 6rem; width: 100%; /* shift menu to the right edge and limit width. comment if not needed*/ margin-left: auto; max-width: none; } .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 > a { flex: 1 0 100%; padding-block: 18px; /* distance both dropdown indicator and menu text to the edge */ justify-content: flex-start; } .header-nav .menu li.menu-item-has-children > a::after { margin-left: 0.75em; } .header-nav .menu li:is(:hover, :focus-within, .open) > a { /* activated styles upon interaction for touch */ color: var(--color-accent); } .header-nav .menu li:is(.open) { border-bottom: 0; } .header-nav .menu li:is(.open) > a { border-bottom: 0; } .header-nav .menu ul { background-color: var(--color-neutral); padding-block: 0.25rem; margin-block: 0.25rem; align-self: stretch; order: 99; flex: 1 0 100%; /* basic borders to contrast multiple dropdown levels */ 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:is(:hover, :focus-within, .open) > a { color: var(--color-primary); } .header-nav .menu > li > ul { background-color: #F0F0F0; } } @media only screen and (max-width: 759px) { .header-nav .menu { max-width: 100%; } } .doc-header-not-sticky .header-overlay-on-banner .header-nav .menu { /* Styles/Selectors for when header overlays the banner or adjacent element before scroll on non-touch devices */ } @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: 0.2; position: absolute; top: 100%; } } .doc-header-not-sticky .header-nav .menu { /* Styles/Selectors for when header is not sticky yet. best for smaller devices styles and minor/global changes for larger devices */ } .doc-header-menu-open .header-nav .menu { /* Styles/Selectors for when header menu accordion for touch devices is open */ } .doc-header-menu-open.doc-header-not-sticky .header-nav .menu { /* Styles/Selectors for when header menu accordion for touch devices is open and header is not sticky yet */ } /* Header 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 --------------------------------------------------------------- */ .layout-banner { --banner-offset: 0px; } .layout-banner-decor-left { --fancy-silhouette-l: -0.47em; --fancy-silhouette-t: -0.234em; --fancy-silhouette-transform: none; } .layout-banner-decor-right { --fancy-silhouette-r: -0.3em; --fancy-silhouette-t: -0.26em; } .layout-banner-blocks { display: grid; grid-template-columns: 100%; align-items: center; gap: 0; } .layout-banner-block { min-width: 0; } .layout-banner-block:only-child { grid-column: 1/-1; } @media only screen and (min-width: 1200px) { .layout-banner-blocks { grid-template-columns: 1fr -webkit-max-content; grid-template-columns: 1fr max-content; } } .banner-has-background-image .layout-banner { /* Styles specific for when banner has background image */ } body:not(.ilaw-pql-contained).banner-has-background-image .layout-banner .banner-top { background-color: var(--scheme-bg-contrast, var(--color-dark-alt)); color: var(--scheme-fg, var(--color-light)); } .banner-no-background-image .layout-banner { /* Styles specific for when banner doesnt support background image */ } /* Banner Main --------------------------------------------------------------- */ .banner-main { padding-block: 3.75rem; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .banner-main-blocks { gap: 3rem; } @media only screen and (min-width: 760px) { .banner-main { padding-block: 4.75rem 4.25rem; } } @media only screen and (min-width: 1200px) { .banner-main { padding-block: 5.75rem 87px; } .banner-main-container:not(.container-size-global) { --container-gutter: 80px; } .banner-main-blocks { justify-content: space-between; } .banner-main-block, .banner-main-blocks { min-width: 0; } .banner-main-block:only-child { gap: 10px; } } @media only screen and (min-width: 1400px) { .banner-main { padding-block: 125px; } .banner-main-container:not(.container-size-global) { --container-gutter: 100px; } } @media only screen and (min-width: 1800px) { .banner-main-block:only-child { gap: 0; } .banner-main-container:not(.container-size-global) { --container-gutter: 120px; } } @media only screen and (max-width: 759px) { .banner-main .container, .banner-main-container { --container-fallback: 30px; } } .banner-has-background-image .banner-main { /* Styles specific for when banner has background image */ } .banner-has-background-image .banner-main { min-height: 264px; padding-block: 24px 48px; } .ilaw-pql-contained.banner-has-background-image .banner-main { background-color: var(--scheme-bg-contrast, var(--color-dark-alt)); color: var(--scheme-fg, var(--color-light)); } @media only screen and (min-width: 760px) { .banner-has-background-image .banner-main { padding-block: 46px; min-height: 320px; justify-content: flex-end; } .banner-has-background-image .banner-main .container, .banner-has-background-image .banner-main-container { --container-gutter: 40px; } } @media only screen and (min-width: 1200px) { .banner-has-background-image .banner-main { padding-block: 48px; min-height: 320px; } } @media only screen and (min-width: 1400px) { .banner-has-background-image .banner-main { padding-block: 75px; min-height: 416px; } } @media only screen and (min-width: 1800px) { .banner-has-background-image .banner-main { min-height: 488px; padding-block: 104px; } } @media only screen and (max-width: 759px) { .banner-has-background-image .banner-main { justify-content: flex-end; } } .banner-has-background-image.header-overlay-on-banner .banner-main { /* Styles specific for when banner has the header overlay before scroll + Styles specific for when banner has background image */ } @media only screen and (min-width: 1200px) { .banner-has-background-image.header-overlay-on-banner .banner-main { align-items: flex-end; } } .banner-no-background-image .banner-main { /* Styles specific for when banner doesnt support background image OR global fallback heading*/ } /* Banner Body --------------------------------------------------------------- */ .banner-body { display: flex; flex-direction: column; text-align: center; align-items: center; } .banner-body .banner-text { display: flex; flex-direction: column; gap: 1rem; } @media only screen and (min-width: 760px) { .banner-body .banner-text { gap: 10px; } } @media only screen and (min-width: 1400px) { .banner-body .banner-text { gap: 16px; } } @media only screen and (min-width: 1800px) { .banner-body .banner-text { gap: 32px; } } .banner-has-background-image .banner-body { /* Styles specific for when banner has background image */ } .banner-no-background-image .banner-body { /* Styles specific for when banner doesnt support background image */ } /* Global Secondary Heading --------------------------------------------------------------- */ .secondary-heading { font-size: 14px; line-height: 18px; font-family: var(--font-accent); color: inherit; letter-spacing: 0.12em; text-transform: uppercase; font-style: normal; font-weight: 700; } .secondary-heading em { /* emphasized words */ color: var(--color-accent); font-style: normal; } .secondary-heading::before, .secondary-heading::after, .secondary-heading > span::before { color: var(--color-secondary); font-style: normal; } @media only screen and (min-width: 760px) { .secondary-heading > span:first-child::before { content: none; } .secondary-heading > span::before { content: "\25CF\FE0E"; margin: 0 0.5em; } } @media only screen and (min-width: 1200px) { .secondary-heading { font-size: 16px; } } @media only screen and (min-width: 1400px) { .secondary-heading { font-size: 18px; } } @media only screen and (max-width: 759px) { .layout-banner .secondary-heading { display: flex; flex-direction: column; gap: 12px; } } .banner-has-background-image .secondary-heading { /* Styles specific for when banner has background image */ } .banner-no-background-image .secondary-heading { /* Styles specific for when banner doesnt support background image */ } /* 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: 40px; line-height: 1; margin-bottom: 0; } .primary-heading em { /* emphasized words */ color: var(--color-accent); font-style: normal; } @media only screen and (min-width: 760px) { .primary-heading { font-size: 48px; } } @media only screen and (min-width: 1400px) { .primary-heading { font-size: 64px; } } .primary-heading.primary-heading-default { /* Styles specific for default template primary heading (Single Post, Single Page, Possibly Blog/ Archive etc.) */ font-size: 32px; line-height: 36px; } @media only screen and (min-width: 760px) { .primary-heading.primary-heading-default { font-size: 48px; line-height: 56px; } } @media only screen and (min-width: 1400px) { .primary-heading.primary-heading-default { font-size: 64px; line-height: 72px; } } @media only screen and (max-width: 759px) { .primary-heading.primary-heading-default { margin-inline: -1rem; } } .ilaw-default .primary-heading.primary-heading-default-h1 { /* Styles specific for default template primary heading set as an h1 (Single Post, Single Page) */ } .primary-heading.primary-heading-blog { /* Styles specific for blog post/ blog archive custom primary heading (Blog/ Archive) */ } .primary-heading.primary-heading-blog-title { /* Styles specific for blog post/ blog archive custom primary heading set as blog page's title eg 'Our Blog', 'Firm Blog', etc... Note: This will be an H1 on Blog/Archive but not in Single Posts for SEO (Single Posts, Blog/ Archive) */ } .layout-banner .primary-heading { /* Styles specific for when it's inside a banner */ } .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: 0; } .banner-has-background-image .primary-heading { /* Styles specific for when banner has background image */ color: inherit; } .layout-banner .banner-has-background-image .primary-heading { text-shadow: 0 2px 0.125em var(--scheme-bg, var(--color-dark)); } .banner-no-background-image .primary-heading { /* Styles specific for when banner doesnt support background image */ } /* Banner video (Optional depending on comps) --------------------------------------------------------------- */ .banner-video { margin-bottom: 1.75rem; } .banner-video .video-thumbnail { width: 300px; } .banner-video-cta.video-button { display: block; } @media only screen and (min-width: 760px) { .banner-video { margin-bottom: 24px; } } @media only screen and (min-width: 1200px) { .banner-video { margin-bottom: 2.5rem; } } .banner-has-background-image .banner-video { /* Styles specific for when banner has background image */ } .banner-no-background-image .banner-video { /* Styles specific for when banner doesnt support background image */ } /* Banner Content (Optional depending on comps) --------------------------------------------------------------- */ .banner-content { width: 90%; } .banner-has-background-image .banner-content { /* Styles specific for when banner has background image */ color: var(--color-accent); } .banner-no-background-image .banner-content { /* Styles specific for when banner doesnt support background image */ } /* Banner Buttons --------------------------------------------------------------- */ .banner-buttons { margin-top: 1.5rem; display: inline-flex; gap: 1rem; align-items: center; } .banner-buttons-touch { text-align: inherit; margin-top: 24px; } .banner-buttons-touch:first-child { margin-top: -1rem; } @media only screen and (min-width: 760px) { .banner-buttons { margin-top: 10px; } .banner-buttons .button:nth-child(n+2) { margin-left: 1rem; } .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 (min-width: 1400px) { .banner-buttons { margin-top: 16px; } } @media only screen and (min-width: 1800px) { .banner-buttons { margin-top: 32px; } } @media only screen and (max-width: 759px) { .banner-buttons { flex-direction: column; } .banner-button-shift .layout-banner .banner-buttons { /* hide buttons inside of banner */ display: none; } } /* Banner Form --------------------------------------------------------------- */ #banner-form { padding-block: 45px; color: var(--color-light); background: var(--color-dark-alt); } #banner-form .gform_wrapper { position: relative; } #banner-form .gform_heading { margin-bottom: 24px; } #banner-form .gform_title:last-child { margin-bottom: 0; } #banner-form .gform_description { font-size: 32px; line-height: 36px; color: var(--color-secondary); text-transform: none; max-width: 80ch; } #banner-form .gform_body { margin-left: auto; margin-right: auto; } #banner-form .gform_fields .gfield_required { display: none; } #banner-form .gform_footer { justify-content: right; text-align: center; } #banner-form .gfield_label { letter-spacing: 0; } #banner-form .gfield.required-message { margin-top: 0.5rem; } #banner-form .gfield.gfield_type_submit { /* dont stretch flex button */ align-self: flex-start; } @media only screen and (min-width: 760px) { #banner-form { padding-block: 40px; } #banner-form .banner-form-container { --container-gutter: 48px; } #banner-form .gform_heading { margin-bottom: 16px; } #banner-form .gform_description { font-size: 32px; line-height: 36px; } #banner-form .gform_footer { margin-top: -1.25rem; } #banner-form .gfield { --field-height: 38px; font-size: 14px; } #banner-form .gfield_label { font-size: 12px; } #banner-form .gfield.required-message { margin-top: 0rem; font-size: 12px; } } @media only screen and (min-width: 1200px) { #banner-form { padding-block: 2rem; } #banner-form .gform_description { font-size: 29px; } } @media only screen and (min-width: 1800px) { #banner-form { padding-block: 3.75rem; } #banner-form .gform_description { font-size: 40px; line-height: 44px; } } @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; } } /* ================================================================================ * Sidebar ================================================================================ */ /* Layout Sidebar --------------------------------------------------------------- */ /* Sidebar Form --------------------------------------------------------------- */ #sidebar-form { --widget-padding-x: 40px; --widget-padding-top: 53px; --widget-padding-bottom: var(--widget-padding-top); --widget-content-padding-top: 0; --widget-content-margin-top: 0rem; --widget-content-margin-bottom: var(--widget-content-margin-top); } @media only screen and (min-width: 1800px) { #sidebar-form { --widget-padding-x: 69px; } } #sidebar-form .sidebar-field-form { border: none; } #sidebar-form .sidebar-field-form .field-form-header { padding: 0; } #sidebar-form .sidebar-field-form .field-form-wrapper { padding: 0; } #sidebar-form .sidebar-field-form .gform_wrapper { position: relative; } #sidebar-form .sidebar-field-form .gform_heading { margin-bottom: 18px; } #sidebar-form .sidebar-field-form .gform_title:last-child { margin-bottom: 0; } #sidebar-form .sidebar-field-form .gform_description { font-size: 32px; line-height: 40px; font-family: var(--font-secondary); color: var(--color-secondary); max-width: 80ch; } #sidebar-form .sidebar-field-form .gform_body { margin-left: auto; margin-right: auto; } #sidebar-form .sidebar-field-form .gform_footer { justify-content: flex-end; text-align: center; position: relative; } #sidebar-form .sidebar-field-form .gfield { --field-height: 50px; } #sidebar-form .sidebar-field-form .gfield_label { letter-spacing: 0; } #sidebar-form .sidebar-field-form .gfield.required-message { margin-top: 0.5rem; } #sidebar-form .sidebar-field-form .gfield.gfield_type_submit { /* dont stretch flex button */ align-self: flex-start; } @media only screen and (max-width: 1199px) { #sidebar-form .sidebar-field-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; } } /* ================================================================================ Contact Template ================================================================================ */ /* Contact Related Classes Note: This file is for styles applied globally for the contact information (both footer and contact page) 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.) -------------------------------------------------------------------------------- */ .number-link { display: inline-block; } /* Global Stylees - Social Links (ie. firm social media, blog share icons, etc) -------------------------------------------------------------------------------- */ .social { font-size: 28px; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 1em; } .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-secondary)); } @media only screen and (max-width: 759px) { .social { justify-content: center; } } /* Global Stylees - Locations -------------------------------------------------------------------------------- */ .location .location-directions { margin-top: 8px; } /* Confact Info Block - Titles -------------------------------------------------------------------------------- */ .contact-block-title { font-size: 22px; font-family: var(--font-secondary); color: var(--color-secondary); margin-bottom: 8px; } /* Confact Info Block - Basic Text Content -------------------------------------------------------------------------------- */ .contact-block-content { flex: 1 1; font-size: 18px; line-height: 25px; } .contact-block-content a:not(.button) { color: inherit; text-decoration: none; } .contact-block-content a:not(.button):is(:hover, :focus) { text-decoration: underline; } .contact-block-content :where(p, address):where(:nth-last-child(n+3)) { margin-bottom: 1em; } /* 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: 48px; align-items: start; } .contact-block, .contact-blocks { min-width: 0; } .contact-block { max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; width: 100%; } .contact-block, .contact-block-content { display: flex; flex-direction: column; } .contact-block.contact-special { grid-column: 1/-1; text-align: center; max-width: 100%; } .contact-block.contact-special .logo { margin: 0 auto; height: 61px; } .contact-block.contact-number { align-items: center; } .contact-block.contact-number .number-title { display: block; margin-bottom: 0; } .contact-block.contact-number .number-link { font-size: 20px; line-height: 41px; font-family: var(--font-primary); color: var(--color-light); font-weight: 500; } .contact-block.contact-numbers { /* @Variation B: One block Requires PHP: templates/template-contact.php - @Variation B: One block Requires SCSS: scss/layotemplatesuts/_contact.scss - @numbersColumn / @Variation B: One block */ } .contact-block.contact-numbers .contact-numbers-content { display: grid; align-self: start; align-content: start; row-gap: 0rem; } .contact-block.contact-numbers .number-title { display: block; margin-bottom: 0; } .contact-block.contact-numbers :where(.social) { margin-top: 2rem; } .contact-block.contact-location { /* Location - Contact Block Grid */ /* @Variation A: Separate blocks Requires PHP: layouts/layout-contact.php - @Variation A: Separate blocks Requires SCSS: scss/layouts/_contact.scss - @Variation A: Separate blocks */ } .contact-block.contact-locations { /* Locations - Contact Block Grid */ /* @Variation B: One block Requires PHP: layouts/layout-contact.php - @Variation B: One block Requires SCSS: scss/layouts/_contact.scss - @Variation B: One block */ } .contact-block.contact-locations .contact-locations-content { display: grid; row-gap: 4rem; } .contact-block.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); } @media only screen and (min-width: 760px) { .contact-blocks { grid-template-columns: repeat(3, auto); grid-auto-rows: auto; grid-auto-flow: dense; -moz-column-gap: 80px; column-gap: 80px; min-height: 1rem; } .contact-blocks:has(.contact-special) { grid-template-rows: -webkit-min-content 1fr; grid-template-rows: min-content 1fr; } .contact-block.contact-number { align-items: flex-start; text-align: left; } .contact-block.contact-numbers :where(.social) { justify-content: start; } .contact-block.contact-location:nth-last-child(3):nth-child(odd) { grid-row: span 2; } } @media only screen and (min-width: 1800px) { .contact-block.contact-special .logo { height: 69px; } } @media only screen and (max-width: 1199px) { .contact-blocks { width: -webkit-max-content; width: -moz-max-content; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; } } @media only screen and (max-width: 759px) { .contact-blocks { justify-items: center; justify-content: center; text-align: center; align-items: center; align-content: center; flex-direction: column; } } /* ================================================================================ * Footer ================================================================================ */ /* Branding logo sizes --------------------------------------------------------------- */ .ilawyer-legacy, .ilawyer, .onep21 { color: inherit; } .ilawyer-legacy, .ilawyer { font-size: 17px; } .onep21 { font-size: 50px; } /* Layout Footer --------------------------------------------------------------- */ .layout-footer { background: linear-gradient(to bottom, var(--color-light-alt), var(--color-light) 80%); overflow: hidden; } .layout-footer-decor-only { --fancy-silhouette-r: -.12em; --fancy-silhouette-t: -51rem; } @media only screen and (min-width: 1200px) { .layout-footer { padding-top: 66px; } body:not(.ilaw-pql-contained) .layout-footer { padding: 0; } } @media only screen and (min-width: 1400px) { .layout-footer { padding-top: 110px; } .layout-footer-decor-only { --fancy-silhouette-r: -29rem; --fancy-silhouette-t: -51rem; } } @media only screen and (min-width: 1400px) and (min-width: 1400px) { .layout-footer-decor-only { width: 1em; } } @media only screen and (min-width: 1800px) { .layout-footer-decor-only { width: 1.45763889em; --fancy-silhouette-r: -.41em; --fancy-silhouette-t: -45rem; } } /* Footer Split - Top --------------------------------------------------------------- */ .footer-top { padding-block: 60px; background-color: var(--color-dark-alt); color: var(--scheme-fg, var(--color-light)); overflow: hidden; } .ilaw-pql-contained .footer-top { position: relative; z-index: 2; } .footer-top-blocks { display: grid; gap: 48px; justify-content: center; } body:not(.ilaw-pql-contained) .footer-top-blocks { position: relative; z-index: 2; } .footer-top-blocks, .footer-top-block { min-width: 0; } .footer-top-block:only-child { grid-column: 1/-1; } .footer-top .container, .footer-top-container { --container-gutter: 31px; } @media only screen and (min-width: 760px) { .footer-top { padding-block: 72px 90px; } .footer-top-blocks { gap: 80px; } } @media only screen and (min-width: 1200px) { .footer-top { padding-block: 80px; } .ilaw-pql-contained .footer-top { border-radius: var(--global-border-radius); } .footer-top .container, .footer-top-container { --container-gutter: 108px; } .footer-top-blocks { grid-template-columns: repeat(2, auto); gap: 65px; align-items: center; justify-content: space-evenly; } } @media only screen and (min-width: 1400px) { .footer-top { padding-block: 135px; } .footer-top .container, .footer-top-container { --container-gutter: 97px; } .footer-top-blocks { gap: 125px; } } @media only screen and (min-width: 1800px) { .footer-top .container, .footer-top-container { --container-gutter: 256px; } .ilaw-pql-contained .footer-top-blocks { gap: 160px; } } /* Footer Form --------------------------------------------------------------- */ #footer-form .footer-field-form { max-width: 100%; width: 664px; margin-left: auto; margin-right: auto; } .ilaw-pql-contained #footer-form .footer-field-form { width: 590px; } #footer-form .footer-field-form .gform_wrapper { position: relative; } #footer-form .footer-field-form .gform_heading { margin-bottom: 24px; } #footer-form .footer-field-form .gform_title { margin-bottom: 0; } #footer-form .footer-field-form .gform_title:last-child { margin-bottom: 0; } #footer-form .footer-field-form .gform_description { font-size: 32px; line-height: 36px; color: var(--color-secondary); text-transform: none; margin-bottom: 0; } #footer-form .footer-field-form .gform_body { margin-left: auto; margin-right: auto; } #footer-form .footer-field-form .gform_footer { justify-content: flex-end; } #footer-form .footer-field-form .gfield { --field-height: 50px; } #footer-form .footer-field-form .gfield.gfield_type_submit { /* dont stretch flex button */ align-self: flex-start; } @media only screen and (min-width: 760px) { #footer-form .footer-field-form .gform_heading { margin-bottom: 40px; } #footer-form .footer-field-form .gform_description { font-size: 45px; line-height: 55px; } #footer-form .footer-field-form .gform_fields { row-gap: 2rem; } #footer-form .footer-field-form .gfield.required-message { margin-top: -0.5rem; } } @media only screen and (min-width: 1200px) { #footer-form .footer-field-form .gform_fields { gap: 24px 16px; } #footer-form .footer-field-form .gfield.required-message { font-size: 16px; margin-top: 0; } } @media only screen and (min-width: 1400px) { #footer-form .footer-field-form { width: 724px; } .ilaw-pql-contained #footer-form .footer-field-form { width: 720px; } #footer-form .footer-field-form .gform_heading { margin-bottom: 56px; } #footer-form .footer-field-form .gform_description { font-size: 65px; line-height: 68px; } #footer-form .footer-field-form .gform_fields { gap: 24px 18px; } } @media only screen and (min-width: 1800px) { #footer-form .footer-field-form { width: 828px; } .ilaw-pql-contained #footer-form .footer-field-form { width: 828px; } #footer-form .footer-field-form .gform_description { font-size: 68px; line-height: 72px; } } @media only screen and (max-width: 759px) { #footer-form .footer-field-form .gform_description { margin-inline: -1em; } } /* Footer Contact Note: This file is for Footer only overrides for the contact information 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 --------------------------------------------------------------- */ @media only screen and (min-width: 1200px) { .footer-contact { padding-bottom: 4.75rem; align-self: self-end; } .footer-contact .contact-blocks { justify-content: center; grid-template-columns: 100%; gap: 48px; } } @media only screen and (min-width: 1400px) { .footer-contact { padding-bottom: 6rem; } } /* Footer Split - Bottom --------------------------------------------------------------- */ .footer-bottom { /* border separation all the way to the edge */ } @media only screen and (min-width: 1200px) { .footer-bottom .container, .footer-bottom-container { padding: 0 50px 0 60px; } } /* Footer utility --------------------------------------------------------------- */ .footer-utility { /* border separation */ } .footer-utility { padding-block: 26px; padding-inline: 30px; font-size: 13px; line-height: 16px; font-weight: 700; } .footer-utility-block, .footer-utility .menu, .footer-utility .footer-copyright { display: inline; } body:not(.ilaw-pql-contained) .footer-utility { background-color: var(--color-light); } .footer-utility:nth-child(n+2) { border-top: 1px solid; margin-top: 4rem; } .footer-utility-blocks { display: grid; gap: 13px; 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 0.5em 0 0.25em; } @media only screen and (min-width: 760px) { .footer-utility { padding-block: 45px 40px; } .footer-utility-blocks { gap: 20px; } .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 0.5em 0 0.25em; } } @media only screen and (min-width: 1200px) { .footer-utility { padding-inline: 0; } .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 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 Layout/Template -------------------------------------------------------------------------------- */ /* 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-contrast, var(--color-light-alt)); border-radius: var(--global-border-radius); } .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: 0.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 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: 16px; letter-spacing: 0.135em; } .entry-meta a:not(:hover, :focus) { text-decoration: none; } .entry-meta a:is(:hover, :focus) { color: var(--color-primary); } .entry-meta > span:nth-child(n+2):before { content: "/"; color: var(--color-secondary); margin: 0; } @media only screen and (min-width: 760px) { .entry-meta { font-size: 18px; } } .entry-title { margin-bottom: 24px; } .entry-excerpt p { margin-bottom: 24px; } .entry-buttons .entry-read-more { font-size: 16px; --button-border-width: 3px; border-color: var(--color-primary-alt); } .entries .entry { display: grid; justify-content: space-between; -moz-column-gap: 3rem; column-gap: 3rem; } .entries .entry:nth-child(n+2) { padding-top: 40px; margin-top: 40px; border-top: 1px solid rgba(112, 112, 112, 0.2549019608); } .entries .entry-meta a { text-decoration: none; } .entries .entry-thumbnail, .entries .entry-body { /* grid fix */ min-width: 0; } .entry-meta a { text-decoration: none; } @media only screen and (min-width: 1400px) { .entries .entry-thumbnail { display: none; margin-bottom: 0; --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 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-section { background: transparent; } .default-sections { --default-sidebar-width: 100%; --default-gap-x: 71px; --default-gap-y: 3.75rem; gap: var(--default-gap-y) var(--default-gap-x); } .default-sections, .default-section, .default-section-main, .default-section-sidebar { min-width: 0; /* grid/flex fixes*/ max-width: 100%; width: 100%; } .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; gap: 48px; } @media only screen and (min-width: 760px) { .default-sections.default-sections-grid { gap: 96px; } } @media only screen and (min-width: 1200px) { .default-section { /* 2 column styles. move to media queries by design as needed */ } .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; width: var(--default-sidebar-width); } .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: 0rem; } .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 .default-section-main:only-child { /* no sidebar adjust */ grid-column: span 2 !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:not(.default-sections-full) .default-section-sidebar { margin-inline: auto; max-width: 624px; } .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-gap-y: 3.125rem; } @media only screen and (min-width: 1200px) { .default-sections { --default-sidebar-width: 365px; --default-gap-y: 3.75rem; } } @media only screen and (min-width: 1400px) { .default-sections { --default-gap-x: 116px; } } @media only screen and (min-width: 1800px) { .default-sections { --default-sidebar-width: 470px; --default-gap-x: 184px; } } @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-contrast, 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: 1800px) { .default-sections.default-sections-full .default-section-main-container { --container-gutter: 250px; } } /*! * Default Header -------------------------------------------------------------------------------- */ .default-header { margin-bottom: 24px; } @media only screen and (min-width: 760px) { .default-header { margin-bottom: 56px; } } @media only screen and (max-width: 759px) { .default-header { text-align: center; } } @media only screen and (min-width: 760px) { .banner-has-h1.banner-button-shift .default-header { margin-bottom: 0; } } /*! * Default Heading -------------------------------------------------------------------------------- */ .default-heading { margin-bottom: 0; } /*! * Default Divider - Optional -------------------------------------------------------------------------------- */ /*! * 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; } .ilaw-blog #sidebar-form { display: none; } /* ================================================================================ * Includes ================================================================================ */ /* 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; } /* Carousel Item Customizations --------------------------------------------------------------- */ :root { /* height of award. best to set to the tallest award logo provided */ --carousel-height: 60px; } @media only screen and (min-width: 1400px) { :root { --carousel-height: 160px; } } /* 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; background-color: var(--color-neutral-darker); } .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; /* Note: Best practice to add fallback background-colors to your background images */ background-color: inherit; z-index: -2; background-image: var(--responsive-background-image, none) !important; } .responsive-background-bg:is(img) { -o-object-fit: cover; object-fit: cover; -o-object-position: center center; object-position: center center; width: 100%; height: 100%; } .responsive-background::after { content: ""; display: block; inset: 0; position: absolute; pointer-events: none; mix-blend-mode: multiply; background: var(--color-neutral-darker); opacity: 0.5; } @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); } } /* * Case Result Icon -------------------------------------------------------------------------------- */ .result-icon { font-size: 3rem; margin-bottom: 1rem; } /* * Case Result Value -------------------------------------------------------------------------------- */ .result-value { font-size: 48px; line-height: 1; font-family: var(--font-secondary); color: var(--color-dark-alt); text-transform: uppercase; font-weight: 600; } .result-value-confidential { font-size: 1.5rem; } @media only screen and (min-width: 1200px) { .result-value { font-size: 56px; } } /* * Case Result Type -------------------------------------------------------------------------------- */ /* * Case Result Title - Optional -------------------------------------------------------------------------------- */ .result-title { font-size: 13px; color: var(--color-primary-alt); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; margin-block: 18px; } .result-title:last-child { margin-bottom: 0; } .result-title:is(.h4) { letter-spacing: 0.1em; } @media only screen and (min-width: 1200px) { .result-title { font-size: 16px; } } @media only screen and (min-width: 1800px) { .result-title { font-size: 16px; } } /* * Case Result Description -------------------------------------------------------------------------------- */ /* * Case Result Learn More - Optional -------------------------------------------------------------------------------- */ .result-learn-more { margin-top: 1.75rem; align-self: center; } /* * Case Result Description + Details Split. Useful for popups/ hovers -------------------------------------------------------------------------------- */ .result-summary { margin-bottom: auto; } .result-details { text-align: center; } .result-details .result-value { margin-bottom: 1rem; } .result-details .result-content { text-align: initial; margin-top: 1.5rem; } .result:not(:hover, :focus-within) .result-details-hover { pointer-events: none; opacity: 0; } @media only screen and (min-width: 760px) { .result-details .result-value { font-size: 50px; } } @media only screen and (min-width: 1200px) { .result-details .result-value { font-size: 75px; } .result-details .result-title { font-size: 18px; } } /* * includes/repeater-result -------------------------------------------------------------------------------- */ .result { text-align: center; position: relative; } .result-container { display: flex; min-width: 0; } .result-container { flex: 1 1; flex-direction: column; } .result :where(.result-description, .result-content) { margin-left: auto; margin-right: auto; } .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: 0.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 Area Skeleton. Do not Edit -------------------------------------------------------------------------------- */ .practice-area-title { padding-left: var(--pa-title-padding-x); padding-right: var(--pa-title-padding-x); } .practice-area-title.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; } .practice-area-menu li a { justify-content: center; flex: 1 1; padding-top: calc((var(--pa-item-height) - 1em * var(--pa-item-lines) * var(--pa-item-line-height)) * var(--pa-item-baseline-offset)); padding-bottom: calc((var(--pa-item-height) - 1em * var(--pa-item-lines) * var(--pa-item-line-height)) * (1 - var(--pa-item-baseline-offset))); padding-left: var(--pa-item-padding-x); padding-right: var(--pa-item-padding-x); min-height: var(--pa-item-height); } @media only screen and (max-width: 759px) { .practice-area-menu li a { min-height: 0; } } /* * Practice Area Vars/ Scaffolding -------------------------------------------------------------------------------- */ .practice-area { /* horizontal padding for the practice area item */ --pa-item-padding-x: 0; /* horizontal padding for the practice area title */ --pa-title-padding-x: var(--pa-item-padding-x); /* height of practice area item. designers will prefer to design buttons 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 buttons */ --pa-item-height: 72px; /* Note: this value has to be unitless for calc values to work. * Number of lines to compensate for the item height */ --pa-item-lines: 1; /* Note: this value has to be unitless for calc values to work. * 1 moves the text to the very bottom. 0 moves the text to the very top */ --pa-item-baseline-offset: 0.5; /* Note: this value has to be unitless for calc values to work. * Formula is line-height-px / font-size-px */ --pa-item-line-height: 1.5; line-height: var(--pa-item-line-height); font-size: 16px; color: var(--color-primary); position: relative; } @media only screen and (min-width: 760px) { .practice-area { min-width: 100%; } } @media only screen and (min-width: 1400px) { .practice-area { font-size: 17px; } } @media only screen and (max-width: 759px) { .practice-area { /* reset heights to normal flow */ --pa-item-lines: 1; } } /* * Practice Area Category Title -------------------------------------------------------------------------------- */ .practice-area-title { color: var(--color-primary); text-align: center; margin-bottom: 20px; } @media only screen and (min-width: 760px) { .practice-area-title { text-align: left; } } @media only screen and (min-width: 1200px) { .practice-area-title { font-size: 22px; } } /* * Practice Area Menu -------------------------------------------------------------------------------- */ .practice-area-menu { font-size: 16px; letter-spacing: 0.1275em; text-transform: uppercase; font-weight: 600; } .practice-area-menu li { border-top: 1px solid rgba(112, 112, 112, 0.3); margin-top: -1px !important; } .practice-area-menu li:nth-child(-n+1) { border-top: 0; } .practice-area-menu li:is(:hover, :focus-within) a { color: var(--color-primary-alt); } @media only screen and (min-width: 760px) { .practice-area-menu li:nth-child(-n+2) { border-top: 0; } } @media only screen and (min-width: 1200px) { .practice-area-menu { font-size: 17px; } .practice-area-menu li:nth-child(-n+3) { border-top: 0; } } /* * includes/repeater-practice-area -------------------------------------------------------------------------------- */ .practice-area { width: 100%; } .practice-area, .practice-area-container { display: flex; min-width: 0; } .practice-area-container { flex: 1 1; flex-direction: column; } @media only screen and (max-width: 759px) { .practice-area { text-align: center; } } /* Pagination -------------------------------------------------------------------------------- */ /* pagination skeletion. no need to edit */ .pagination { display: grid; grid-template-columns: 1fr -webkit-max-content 1fr; grid-template-columns: 1fr max-content 1fr; align-items: center; text-align: center; clear: both; margin-left: auto; margin-right: auto; } .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-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; display: flex; justify-content: space-between; } .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: 0.5em; } } /* pagination styles. customize as needed */ .pagination { font-size: 16px; letter-spacing: 0.135em; font-weight: 600; border-top: 1px solid rgba(112, 112, 112, 0.2549019608); padding-top: 40px; margin-top: 40px; max-width: 1400px; } .pagination .current, .pagination a:is(:hover, :focus) { color: var(--color-primary-alt); } .pagination .current i:after, .pagination a:is(:hover, :focus) i:after { color: inherit; } .pagination-num-list a, .pagination-num-list span { margin: 0 0.25em; } .pagination-decor { font-size: 10px; color: var(--color-primary); border: none; } .pagination-decor:after { content: ""; display: inline-block; border-left: 2px solid; border-top: 2px solid; width: 1em; height: 1em; transform: rotate(-45deg); transform-origin: center center; } .prev .pagination-decor { margin-right: 0; } .prev .pagination-decor:after { margin-left: 2em; } .next .pagination-decor { margin-left: 0; } .next .pagination-decor:after { transform: rotate(135deg); margin-right: 2em; } /* * Profile Image -------------------------------------------------------------------------------- */ .profile-image { --profile-image-aspect-w: 300; --profile-image-aspect-l: 375; --profile-image-position: 50% 15%; --profile-image-overlay-background:#050C1299; --profile-image-overlay-opacity: 1; max-width: 100%; width: calc(1px * var(--profile-image-aspect-w)); display: block; position: relative; } .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)); } .profile-image-img, .profile-image-placeholder, .profile-image-placeholder-img { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .profile-image-img, .profile-image-placeholder-img { max-width: none; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: var(--global-border-radius); -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; border-radius: var(--global-border-radius); border: 1px solid var(--color-neutral-lighter); background-color: var(--color-primary); } .profile-image-placeholder-icon { font-size: 10rem; margin-bottom: 1rem; } @media only screen and (min-width: 760px) { .profile-image-placeholder-icon { font-size: 12.5rem; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .profile-image-placeholder-icon { font-size: 10rem; } } .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; mix-blend-mode: inherit; background: var(--profile-image-overlay-background); border-radius: 15px; height: 100%; } .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: 0.5s ease-in-out all; opacity: 0; pointer-events: none; text-decoration: none; } .profile-image[href]::before { /* Overlay effect */ z-index: 1; background: transparent; } .profile-image[href] .profile-view { /* */ z-index: 2; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; height: -webkit-min-content; height: -moz-min-content; height: min-content; color: var(--color-secondary-alt); } /* * 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: 2rem 1rem; transition: 0.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: 0.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-name { font-size: 24px; line-height: 34px; color: var(--color-primary-alt); align-content: center; margin-bottom: 8px; } /* * Profile Name -------------------------------------------------------------------------------- */ .profile-position { font-size: 18px; color: var(--color-dark); letter-spacing: 0em; font-weight: 700; margin-top: auto; margin-bottom: 0; } .profile-blurb { font-size: 19px; line-height: calc(1em + 10px); font-family: var(--font-secondary); color: var(--color-primary); font-weight: 700; margin: 50px auto 0; } @media only screen and (min-width: 1200px) { .profile-blurb { margin: 0 0 0 auto; } } @media only screen and (min-width: 1400px) { .profile-blurb { font-size: 20px; line-height: 30px; max-width: 594px; } } @media only screen and (min-width: 1800px) { .profile-blurb { max-width: 670px; } } /* * includes/repeater-profile -------------------------------------------------------------------------------- */ .profile { background: transparent; align-self: stretch; } .profile, .profile-container { display: flex; min-width: 0; } .profile-container { flex: 1 1; flex-direction: column; gap: 1.625rem; } .profile-info { flex: 1 1; } .profile-info { text-align: center; display: flex; flex-direction: column; justify-content: center; } /* * Testimonial Stars -------------------------------------------------------------------------------- */ .testimonial-stars { font-size: 22px; } /* * Testimonial Highlight / Main quote -------------------------------------------------------------------------------- */ .testimonial-highlight { font-size: 24px; line-height: 28px; font-family: var(--font-secondary); font-weight: 500; } @media only screen and (min-width: 1200px) { .testimonial-highlight { font-size: 32px; line-height: 36px; } } @media only screen and (min-width: 1400px) { .testimonial-highlight { font-size: 40px; line-height: 44px; } } /* * Testimonial Quote Body / other parts of the quote -------------------------------------------------------------------------------- */ .testimonial-quote { color: inherit; margin-top: 0; } /* * Testimonial Divider - Optional -------------------------------------------------------------------------------- */ /* * Testimonial Source -------------------------------------------------------------------------------- */ .testimonial-source { font-size: 15px; color: var(--color-secondary); letter-spacing: 0.2em; margin-bottom: 0; } @media only screen and (min-width: 760px) { .testimonial-source span:nth-child(n+2)::before { content: "|"; margin: 0 0.55em; } } @media only screen and (max-width: 759px) { .testimonial-source span { display: block; } } /* * includes/repeater-testimonial -------------------------------------------------------------------------------- */ .testimonial, .testimonial-container { display: flex; min-width: 0; } .testimonial-container { flex: 1 1; flex-direction: column; align-items: center; gap: 32px; } .testimonial :where(.testimonial-stars, .testimonial-highlight, .testimonial-quote, .testimonial-divider), .testimonial :not(.testimonial-divider) + .testimonial-source { margin-top: auto; } .testimonial, .testimonial-container { align-items: center; text-align: center; } @media only screen and (min-width: 760px) { .testimonial :where(.testimonial-highlight, .testimonial-quote) { margin-left: auto; margin-right: auto; } } /* Video Button - Default (One that doesnt have custom markup in it, just the usual one with a play symbol) --------------------------------------------------------------- */ .video-button-default { --video-button-size: 72px; /* size of video button by height and or width */ --video-button-text-svg-radius-ratio: .68; /* ratio of svg path for rounded text. */ --video-button-glyph-height: 0.38em; /* height for video play triangle glyph*/ /* Tip: set as ems so the play symbol scales along with the actual button */ --video-button-glyph-width: 0.27em; /* width for video play triangle glyph*/ /* Tip: set as ems so the play symbol scales along with the actual button */ --video-button-glyph-color: var(--color-primary-alt); /* color of the video button glyph. Used as a background-color so it can take gradients too */ 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); filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2)); } .video-button-default:is(.video-button-no-api) { pointer-events: none; } .video-button-default:has(.video-button-default-text-svg) { --video-button-glyph-height: 0.2em; /* height for video play triangle glyph*/ /* Tip: set as ems so the play symbol scales along with the actual button */ --video-button-glyph-width: 0.16em; } .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: 92px; } @media only screen and (min-width: 760px) { .video-button-default { --video-button-size: 123px; } .video-thumbnail .video-button-default { --video-button-size: 70px; } } @media only screen and (min-width: 1400px) { .video-button-default { --video-button-size: 139px; } .video-thumbnail .video-button-default { --video-button-size: 94px; } } .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: 0.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 { color: var(--color-primary); letter-spacing: 0.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); -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%); 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) * 0.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: 0.565rem; line-height: 1; font-family: var(--font-accent); color: var(--color-dark); letter-spacing: 0.1em; 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(1.21em * 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)); transform-origin: center center; transform: rotate(145deg); color: inherit; } .video-button-default-text-svg-separator { fill: var(--color-primary-alt); font-size: 1.1em; line-height: 0.4; vertical-align: bottom; } .video-button-default-text-svg path { transform-origin: center center; } .video-button-default-text-separator { color: inherit; } .video-button-default-image { transition: all 0.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 */ box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2); } .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: var(--color-neutral); z-index: -1; top: 0em; bottom: 0em; left: 0em; right: 0em; } .video-thumbnail .video-button-default.video-button-default-no-icon::before { border-color: transparent; } .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: var(--color-light); /* these are basic styles. overhaul as needed */ } .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 { /* these are basic styles. overhaul as needed */ background: var(--color-primary-alt); } .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 { /* these are basic styles. overhaul as needed */ } .video-button-default.video-button-default-no-icon:is(:hover, :focus) .video-button-default-text-svg-separator, .video-pointer-reference:is(:hover, :focus-within) .video-button-default.video-button-default-no-icon .video-button-default-text-svg-separator { fill: var(--color-neutral); } /* Video Pointer Reference --------------------------------------------------------------- */ .video-pointer-reference { cursor: pointer; } /* Video Thumbnail --------------------------------------------------------------- */ .video-thumbnail { --video-thumbnail-aspect-w: 470; --video-thumbnail-aspect-l: 308; --video-thumbnail-overlay-background: #040E16; --video-thumbnail-overlay-opacity: .6; position: relative; display: block; max-width: 100%; width: 100%; flex: 0 0 auto; background-color: var(--color-light-alt); border-radius: var(--global-border-radius); } .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 { 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: 0; transition: 0.25s ease-in-out all; } .video-thumbnail-markup-img img { max-width: none; } .video-thumbnail:is(:hover, :focus) .video-thumbnail-markup::after, .video-pointer-reference:is(:hover, :focus-within) .video-thumbnail .video-thumbnail-markup::after { mix-blend-mode: inherit; opacity: 0.6; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } /* 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; border-radius: var(--global-border-radius); } /* includes/repeater-video --------------------------------------------------------------- */ .video, .video-container { display: flex; min-width: 0; } .video-container { flex: 1 1; flex-direction: column; } .video-title { flex: 1 1; display: flex; flex-direction: column; justify-content: center; font-size: 18px; line-height: 28px; font-weight: 600; text-align: center; margin-bottom: 0; margin-top: 1em; padding-inline: 1em; } @media only screen and (min-width: 1400px) { .video-title { font-size: 20px; line-height: 30px; } } @media only screen and (min-width: 1800px) { .video-title { font-size: 22px; line-height: 32px; } } /* ================================================================================ * Parts ================================================================================ */ /* Review Us Page --------------------------------------------------------------- */ .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: 760px) { .review-us-columns { --columns-number: 2; } .review-us-columns .button { width: 100%; } } /* Awards --------------------------------------------------------------- */ /* ================================================================================ * Home Template ================================================================================ */ /* * Home Related Classes -------------------------------------------------------------------------------- */ .home-section { padding-top: 4rem; padding-bottom: 4rem; } .home-section .section-box { background-color: var(--color-primary); color: var(--scheme-fg, var(--color-light)); display: grid; grid-template-columns: auto 1fr auto; position: relative; } .home-section .section-box .section-header, .home-section .section-box .section-body { grid-column: 1/-1; } .home-section .section-box .section-header { padding-block: 33px; max-width: none; margin-bottom: 0; } .home-section .section-box .section-body { border-top: 1px solid var(--color-accent); } .home-section .section-image { max-width: 100%; width: -webkit-max-content; width: -moz-max-content; width: max-content; } .home-section .section-image-img { z-index: 2; overflow: hidden; border-radius: var(--global-border-radius); } .home-section .section-header, .home-section .section-footer { /* set centering as a scaffolding setting for all sections */ text-align: center; max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; margin-left: auto; margin-right: auto; width: 100%; } .home-section .section-header { margin-bottom: 68px; } .home-section .section-block, .home-section .section-blocks { min-width: 0; } .home-section .section-footer { margin-top: 2rem; } .home-section .section-heading { text-transform: uppercase; margin-bottom: 0; } @media only screen and (min-width: 760px) { .home-section .section-box .section-header { padding-block: 25px; } .home-section .section-box .section-header-blocks { text-align: left; display: grid; align-items: center; justify-items: space-between; grid-template-columns: 1fr auto; gap: 1rem; } } @media only screen and (min-width: 1200px) { .ilaw-pql-contained .home-section .section-box { border-radius: var(--global-border-radius); } .home-section .section-box .section-container-header { --container-gutter: 50px; } } @media only screen and (min-width: 1400px) { .home-section .section-box .section-container-header { --container-gutter: 50px; } } @media only screen and (min-width: 1800px) { .home-section .section-box .section-container-header { --container-gutter: 50px; } .home-section .section-box .section-header { padding-block: 1.75rem; } } @media only screen and (max-width: 759px) { .home-section .section-header, .home-section .section-footer { /* set centering as a scaffolding setting for all sections */ text-align: center; max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; margin-left: auto; margin-right: auto; } } /* * Home Template -------------------------------------------------------------------------------- */ body.ilaw-template-home { /* body selector for home template */ background: var(--color-light-alt); } #home-banner .swiper { --swiper-scrollbar-bottom: 2.5rem; } #home-banner { padding-block: 0; } #home-banner .banner-main { min-height: 591px; padding-block: 42px; } #home-banner .banner-main-container { --container-gutter: 14px; } #home-banner .banner-body { max-width: none; } #home-banner .secondary-heading { font-size: 13px; } #home-banner .primary-heading { font-size: 40px; line-height: 44px; } #home-banner .banner-buttons { margin-top: 24px; } #home-banner .banner-bottom { padding-block: 40px 0; } #home-banner .banner-bottom-footer { display: grid; gap: 32px; align-items: center; } #home-banner .banner-bottom-footer > :where(*:only-child) { grid-column: 1/-1; } #home-banner .banner-bottom-button { justify-self: center; margin-bottom: 20px; } #home-banner .responsive-background::after { background: linear-gradient(150deg, rgba(242, 231, 226, 0) 27.8%, rgba(52, 35, 28, 0.8) 56.14%, rgba(33, 15, 8, 0.8) 70.77%); opacity: 1; } #home-banner #banner-form { margin-top: calc(var(--banner-offset) * -1); position: relative; } #home-banner .banner-main::after { content: ""; height: var(--banner-offset); display: block; order: 99; flex: 0 0 auto; width: 100%; } @media only screen and (min-width: 760px) { #home-banner { --banner-offset: 285px; } #home-banner .swiper { --swiper-scrollbar-bottom: 0; } #home-banner .swiper-scrollbar { max-width: none; } #home-banner .banner-video .video-button-default:is(:hover, :focus)::before { background: var(--color-primary); } #home-banner .banner-video .video-button-default:is(:hover, :focus) .video-button-default-text { color: var(--color-light); } #home-banner .banner-video .video-button-default:is(:hover, :focus) .video-button-default-text-svg-separator { fill: var(--color-primary-alt); } #home-banner .banner-main { min-height: 945px; padding-block: 9.5rem 3.5rem; } #home-banner .banner-main .container { --container-gutter: 40px; } #home-banner .secondary-heading { font-size: 14px; } #home-banner .primary-heading { font-size: 48px; line-height: 52px; } #home-banner .banner-bottom { margin-top: 0; padding-block: 60px 0; } } @media only screen and (min-width: 760px) and (max-width: 1199px) { #home-banner .banner-bottom-container { --container-gutter: 38px; } } @media only screen and (min-width: 760px) { #home-banner .banner-bottom .result-title { margin-inline: -7px; } #home-banner .banner-bottom-footer { grid-template-columns: 1fr auto; gap: 8px; margin-top: 45px; } } @media only screen and (min-width: 760px) and (max-width: 1199px) { #home-banner .banner-bottom-footer { padding-inline: 25px; } } @media only screen and (min-width: 760px) { #home-banner .banner-bottom-button { font-size: 16px; margin-bottom: 7px; } #home-banner #banner-form { width: 461px; max-width: 100%; align-self: center; justify-self: center; border-radius: var(--global-border-radius); } #home-banner .responsive-background::after { background: linear-gradient(0deg, rgba(1, 20, 24, 0.32) 0%, rgba(1, 20, 24, 0.32) 100%); opacity: 1; } } @media only screen and (min-width: 1200px) { #home-banner { --banner-offset: 210px; } #home-banner .fancy-silhouette-leaves { --fancy-silhouette-t: -8rem; --fancy-silhouette-l: -14rem; --fancy-silhouette-size: 930px; width: 1.75em; } #home-banner .fancy-silhouette-leaves-background { background: linear-gradient(to bottom, transparent 0%, var(--color-light-alt) 150%); mix-blend-mode: normal; } .ilaw-pql-contained #home-banner { padding-top: 44px; } #home-banner .layout-banner-container { --container-gutter: 62px; } #home-banner .banner-main { min-height: 617px; align-items: start; text-align: left; border-radius: var(--global-border-radius); } #home-banner .banner-main .container { --container-gutter: 50px; } body:not(.ilaw-pql-contained) #home-banner .banner-main .container { --container-gutter: 0px; } #home-banner .banner-main-block:only-child { justify-self: self-start; } #home-banner .banner-body { /* align left on a breakpoint */ text-align: left; align-items: flex-start; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { #home-banner .secondary-heading { margin-right: -2rem; } } @media only screen and (min-width: 1200px) { #home-banner .primary-heading { font-size: 56px; line-height: 60px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { #home-banner .banner-text { margin-right: -4rem; } } @media only screen and (min-width: 1200px) { #home-banner .responsive-background::after { background: linear-gradient(0deg, rgba(1, 35, 43, 0.32) 0%, rgba(1, 35, 43, 0.32) 100%); opacity: 1; } #home-banner .banner-bottom .sp-title { font-size: 24px; } #home-banner .banner-bottom .sp-description { max-width: 22ch; } #home-banner #banner-form { width: 400px; } .ilaw-pql-contained #home-banner #banner-form { width: 330px; } #home-banner .banner-main { padding-block: 110px 56px; padding-right: var(--banner-offset); margin-right: calc(var(--banner-offset) * -1); } #home-banner .banner-main::after { content: none; } #home-banner #banner-form { margin-top: 0; } #home-banner #banner-form .field-form-header { margin-bottom: 12px; } } @media only screen and (min-width: 1200px) and (max-width: 1799px) { #home-banner #banner-form { padding-block: 1.75rem; } #home-banner #banner-form .gform_heading { margin-bottom: 0.5rem; } #home-banner #banner-form .gform_description { font-size: 32px; line-height: 1; } #home-banner #banner-form .gform_fields { gap: 0.75rem; } #home-banner #banner-form .gfield_label { font-size: 11px; margin-bottom: 0.5em; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { #home-banner #banner-form .container { --container-gutter: 38px; } #home-banner #banner-form .gform_heading { margin-bottom: 0.5rem; } #home-banner #banner-form .gform_description { font-size: 26px; line-height: 1; } #home-banner #banner-form .gform_fields { gap: 9px; } #home-banner #banner-form .gfield { --field-height: 2.25rem; font-size: 14px; } #home-banner #banner-form .gfield_label { font-size: 12px; line-height: 16px; margin-bottom: 3px; } #home-banner #banner-form .gfield.required-message { font-size: 12px; margin-top: 3px; } #home-banner #banner-form .gfield .gfield:is(.gfield_type_textarea, .gfield_type_multiselect) :is(textarea, select) { height: calc(var(--field-height) * 2); } } @media only screen and (min-width: 1400px) { #home-banner { --banner-offset: 245px; } .ilaw-pql-contained #home-banner { padding-top: 55px; } #home-banner .fancy-silhouette-leaves { --fancy-silhouette-t: -33rem; --fancy-silhouette-l: -32rem; --fancy-silhouette-size: 1330px; width: 1.9em; } #home-banner .layout-banner-container { --container-gutter: 112px; } #home-banner .banner-main { min-height: 694px; padding-block: 68px; } #home-banner .banner-main .container { --container-gutter: 33px; } #home-banner .primary-heading { font-size: 64px; line-height: 71px; } #home-banner .banner-buttons { margin-top: 2.5rem; } #home-banner .banner-bottom { padding-top: 70px; } #home-banner .banner-bottom .result-title { margin-inline: -2rem; } #home-banner .banner-bottom-footer { margin-top: 3.5rem; } .ilaw-pql-contained #home-banner #banner-form { width: 386px; padding-block: 40px; } #home-banner #banner-form .banner-form-container { --container-gutter: 48px; } #home-banner #banner-form .gfield.required-message { margin-top: 4px; } #home-banner #banner-form .gform_footer .button { font-size: 18px; } } @media only screen and (min-width: 1800px) { #home-banner { --banner-offset: 300px; } .ilaw-pql-contained #home-banner { padding-top: 85px; } #home-banner .fancy-silhouette-leaves { --fancy-silhouette-t: -8rem; --fancy-silhouette-l: -18rem; --fancy-silhouette-size: 1387px; width: 1.8em; } #home-banner .swiper { --swiper-scrollbar-sides-offset: 2%; } body:not(.ilaw-pql-contained) #home-banner .layout-banner-container-top { --container-gutter: 160px; } #home-banner .banner-main { min-height: 950px; padding-block: 140px; } #home-banner .banner-main .container { --container-gutter: 112px; } #home-banner .secondary-heading { font-size: 18px; } #home-banner .primary-heading { font-size: 85px; line-height: 92px; } #home-banner .banner-text { margin-right: -7.5rem; } #home-banner .banner-bottom { padding-top: 80px; } #home-banner .banner-bottom-container { --container-gutter: 90px; } #home-banner .banner-bottom .sp-icon { font-size: 62px; } #home-banner .banner-bottom .sp .sp-title { font-size: 33px; } #home-banner #banner-form { width: 545px; } .ilaw-pql-contained #home-banner #banner-form { width: 545px; padding-block: 50px; } #home-banner #banner-form .field-form-header { margin-bottom: 18px; } #home-banner #banner-form .container { --container-gutter: 70px; } #home-banner #banner-form .gform_fields { row-gap: 12px; } #home-banner #banner-form .gfield { --field-height: 50px; font-size: 16px; } #home-banner #banner-form .gfield_label { font-size: 14px; line-height: 24px; margin-bottom: 4px; } #home-banner #banner-form .gfield.required-message { font-size: 14px; margin-top: 7px; } } @media only screen and (max-width: 1199px) { #home-banner .banner-top { background: none; } #home-banner .banner-main { position: relative; justify-content: flex-end; } #home-banner .banner-body, #home-banner .banner-video { text-align: center; align-items: center; } } #home-page { padding-top: 0; padding-bottom: 0; } @media only screen and (min-width: 760px) { #home-page { position: initial; z-index: 0; } } /* * Home Section 1 -------------------------------------------------------------------------------- */ .home-section-1 { padding-block: 20px 48px; } .home-section-1 .section-blocks { display: grid; grid-template-columns: 100%; grid-auto-flow: dense; gap: 48px; } .home-section-1 .section-blocks, .home-section-1 .section-block { min-width: 0; } .home-section-1 .section-image { display: flex; } .home-section-1 .section-image-img { width: calc(var(--cover-aspect-w) * 1px + var(--global-border-radius)); } .home-section-1 .section-image-left { justify-self: self-start; align-items: flex-start; } .home-section-1 .section-image-left-img { margin-left: calc((var(--container-gutter) + var(--global-border-radius)) * -1); --cover-aspect-w: 257; --cover-aspect-l: 360; } .home-section-1 .section-image-right { justify-self: self-end; align-items: flex-end; } .home-section-1 .section-image-right-img { margin-left: auto; margin-right: calc((var(--container-gutter) + var(--global-border-radius)) * -1); --cover-aspect-w: 275; --cover-aspect-l: 248; } .home-section-1 .section-header { text-align: center; } .home-section-1 .section-lead { margin-bottom: 0; } .home-section-1 .section-heading { font-size: 40px; line-height: 44px; text-transform: none; margin: 0 auto 48px; } .home-section-1 .section-footer { margin-top: 4rem; max-width: 100%; } @media only screen and (min-width: 760px) { .home-section-1 { padding-block: 80px 70px; } .home-section-1 .section-heading { font-size: 64px; line-height: 68px; } .home-section-1 .section-blocks { grid-template-columns: auto 1fr; gap: 71px 0; } .home-section-1 .section-lead { max-width: 40ch; } .home-section-1 .section-body { grid-column: 1/-1; display: flex; flex-direction: column; align-items: center; align-content: center; } .home-section-1 .section-body > :where(*) { min-width: 0; } .home-section-1 .section-content { max-width: 59ch; margin-inline: auto; } .home-section-1 .section-image-left-img { --cover-aspect-w: 280; --cover-aspect-l: 330; } .home-section-1 .section-image-right-img { --cover-aspect-w: 360; --cover-aspect-l: 248; } } @media only screen and (min-width: 760px) and (max-width: 1199px) { .home-section-1 .section-image-left-img { width: calc(var(--cover-aspect-w) * 1px + var(--global-border-radius) * 2); margin-left: calc(var(--global-border-radius) * -1.5); margin-bottom: 6.5rem; } } @media only screen and (min-width: 760px) { .home-section-1 .section-footer { margin-top: 5rem; } } @media only screen and (min-width: 1200px) { .home-section-1 { padding-block: 70px 112px; } .home-section-1 .section-container { --container-gutter: 65px; } .home-section-1 .section-header { opacity: 0; transform: translateY(30px); transition: opacity 700ms ease-in-out, transform 700ms cubic-bezier(0.17, 0.66, 0.34, 0.98); } .visible.home-section-1 .section-header { opacity: 1; transform: translateY(0px); transition-delay: 400ms; } .home-section-1 .section-heading { font-size: 64px; line-height: 68px; } .home-section-1 .section-blocks { display: grid; grid-template-columns: auto 1fr auto; justify-content: space-between; gap: 50px; align-items: stretch; } .home-section-1 .section-body { grid-column: 2; justify-self: center; } .home-section-1 .section-content { opacity: 0; transform: translateY(30px); transition: opacity 700ms ease-in-out, transform 800ms cubic-bezier(0.17, 0.66, 0.34, 0.98); } .visible.home-section-1 .section-content { opacity: 1; transform: translateY(0px); transition-delay: 1400ms; } .home-section-1 .section-image-img { position: -webkit-sticky; position: sticky; max-height: calc(77vh - var(--layout-header-height)); } .home-section-1 .section-image-left { grid-column: 1; } .home-section-1 .section-image-left-img { left: 0; top: calc(var(--layout-header-height) + 11vh); --cover-aspect-w: 240; } .home-section-1 .section-image-right { grid-column: 3; } .home-section-1 .section-image-right-img { right: 0; bottom: 11vh; --cover-aspect-w: 240; } .home-section-1 .section-footer { margin-top: 5rem; } } @media only screen and (min-width: 1400px) { .home-section-1 { padding-block: 80px 112px; } .home-section-1 .section-heading { font-size: 70px; line-height: 74px; } .home-section-1 .section-lead { max-width: 47ch; } .home-section-1 .section-content { max-width: 686px; } .home-section-1 .section-blocks { gap: 83px; } .home-section-1 .section-image-left-img { margin-left: -7rem; --cover-aspect-w: 286; --cover-aspect-l: 375; } .home-section-1 .section-image-right-img { margin-right: -5.5rem; --cover-aspect-w: 262; --cover-aspect-l: 268; } .home-section-1 .section-footer { margin-top: 7rem; } } @media only screen and (min-width: 1800px) { .home-section-1 { padding-block: 125px; } .home-section-1 .section-heading { font-size: 78px; line-height: 80px; } .home-section-1 .section-lead { max-width: 52ch; } .home-section-1 .section-content { max-width: 822px; } .home-section-1 .section-image-left-img { margin-left: -8.75rem; --cover-aspect-w: 357; --cover-aspect-l: 455; } .home-section-1 .section-image-right-img { margin-right: -7.25rem; --cover-aspect-w: 426; --cover-aspect-l: 324; } .home-section-1 .section-footer { margin-top: 10rem; } } @media only screen and (max-width: 759px) { .home-section-1 .section-image { max-width: calc(var(--comp) - var(--container-gutter) * 2); width: 100%; margin-inline: auto; } .home-section-1 .section-image-left { align-self: self-start; } .home-section-1 .section-image-right { align-self: self-end; margin-top: -1.5rem; } } /* * Home Section 2 -------------------------------------------------------------------------------- */ .home-section-2 { padding-block: 0; } .home-section-2 .swiper { --swiper-scrollbar-bottom: 60px; --swiper-scrollbar-bg-color: var(--color-light); } .home-section-2 .section-header { max-width: none; margin-bottom: 0; } .home-section-2 .section-header-container { --container-gutter: 42px; } .home-section-2 .section-heading { font-size: 14px; } .home-section-2 .section-body:has(.sp) { padding-block: 62px 56px; } .home-section-2 .section-slide { display: flex; flex-wrap: wrap; } .home-section-2 .section-item { padding-inline: 28px; } .home-section-2 .section-item:is(.sp) { padding-block: 65px; border: 1px solid var(--color-accent); border-radius: 10px; background: #142F44; box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.29); display: flex; flex-direction: column; } .home-section-2 .section-item:hover, .home-section-2 .section-item:focus-within { transform: translateY(calc(var(--section-hover-offset) * -1)); } .home-section-2 .section-item-icon { font-size: 75px; margin-bottom: 18px; } .home-section-2 .section-item-title:is(.sp-title) { font-size: 20px; line-height: 32px; font-family: var(--font-secondary); color: var(--color-secondary); font-weight: 600; margin-bottom: 18px; } .home-section-2 .section-item-description { color: var(--color-light); } .home-section-2 .section-item-description:is(.sp-description) { margin-bottom: 18px; } .home-section-2 .section-item-button { margin-top: auto; align-self: flex-start; font-size: 16px; padding-bottom: 4px; } .home-section-2 .section-footer { margin-top: 38px; } @media only screen and (min-width: 760px) { .home-section-2 .swiper { --swiper-scrollbar-bottom: 50px; } .home-section-2 .section-heading { font-size: 17px; } .home-section-2 .section-body:has(.result) { padding-block: 7.625rem 6.625rem; } .home-section-2 .section-body:has(.sp) { padding-block: 30px 45px; } .home-section-2 .section-body-container { --container-gutter: 50px; } .home-section-2 .section-item:is(.sp) { padding-inline: 27px; min-height: 575px; } .home-section-2 .section-item-icon { margin-bottom: 24px; } .home-section-2 .section-item-title:is(.sp-title) { font-size: 28px; line-height: 36px; margin-bottom: 24px; } .home-section-2 .section-item-description:is(.sp-description) { margin-bottom: 24px; } } @media only screen and (min-width: 1200px) { .home-section-2 .swiper:has(.result) { --swiper-scrollbar-bottom: 5.25rem; } .home-section-2 .section-container { --container-gutter: 64px; } .home-section-2 .section-container-body { --container-gutter: 33px; } .home-section-2 .section-header-container { --container-gutter: 33px; } .home-section-2 .section-body:has(.result) { padding-block: 3.5rem 5.25rem; } .home-section-2 .section-item:is(.sp) { min-height: 576px; padding-inline: 54px; padding-block: 80px; } } @media only screen and (min-width: 1400px) { .home-section-2 .swiper { --swiper-scrollbar-bottom: 7.5rem; } .home-section-2 .section-container { --container-gutter: 106px; } .home-section-2 .section-container-body { --container-gutter: 41px; } .home-section-2 .section-header-container { --container-gutter: 35px; } .home-section-2 .section-body:has(.sp) { padding-block: 80px; } .home-section-2 .section-item:is(.sp) { padding-inline: 33px; } .home-section-2 .section-item-title:is(.result-title) { margin-block: 2.75em 2em; } } @media only screen and (min-width: 1800px) { .home-section-2 .section-container { --container-gutter: 113px; } .home-section-2 .section-header-container { --container-gutter: 60px; } .home-section-2 .section-body-container { --container-gutter: 119px; } .home-section-2 .section-body:has(.sp) { padding-block: 77px 100px; } .home-section-2 .section-item:is(.sp) { padding: 90px 54px; } } @media only screen and (min-width: 1200px) { .home-section-3 + .home-section-2 .section-box.has-home-section-3-offset:before { grid-row: 2; grid-column: 3; } .home-section-3 + .home-section-2 .section-box.has-home-section-3-offset .section-header { order: -1; } .home-section-3 + .home-section-2 .section-box.has-home-section-3-offset .section-header, .home-section-3 + .home-section-2 .section-box.has-home-section-3-offset .section-body { grid-column: 1/span 2; } .home-section-3 + .home-section-2 .section-box.has-home-section-3-offset .section-body { margin-right: calc(max(0px, var(--home-section-3-image-w) * 1px - var(--container-gutter)) * -1); } } /* * Home Section 3 -------------------------------------------------------------------------------- */ :root { --home-section-3-image-w: 285; --home-section-3-image-l: 322; } @media only screen and (min-width: 1200px) { :root { --home-section-3-offset: 160px; --home-section-3-image-w: 250; --home-section-3-image-l: 318; --home-section-3-offset-image: 27px; } } @media only screen and (min-width: 1400px) { :root { --home-section-3-offset: 160px; --home-section-3-image-w: 295; --home-section-3-image-l: 378; --home-section-3-offset-image: 85px; } } @media only screen and (min-width: 1800px) { :root { --home-section-3-offset: 200px; --home-section-3-image-w: 390; --home-section-3-image-l: 462; --home-section-3-offset-image: 115px; } } .home-section-3 .section-heading { font-size: 40px; text-wrap: balance; } .home-section-3 .section-blocks { display: grid; grid-template-columns: 100%; grid-auto-flow: dense; gap: 20px; } .home-section-3 .section-blocks, .home-section-3 .section-block { min-width: 0; } .home-section-3 .section-body { justify-self: center; } .home-section-3 .section-image { justify-self: center; } @media only screen and (min-width: 760px) { .home-section-3 { padding-top: 7rem; } .home-section-3 .section-container { --container-gutter: 65px; } .home-section-3 .section-header { margin-bottom: 1.75rem; } .home-section-3 .section-heading { font-size: 50px; max-width: 22ch; } } @media only screen and (min-width: 1200px) { .home-section-3 { padding-top: 6.5rem; padding-bottom: var(--global-pusher); } .home-section-3 .section-container { --container-gutter: 285px; } .home-section-3 .section-header { margin-bottom: 3.25rem; opacity: 0; transform: translateY(30px); transition: opacity 400ms ease-in-out, transform 800ms cubic-bezier(0.17, 0.66, 0.34, 0.98); } .visible.home-section-3 .section-header { opacity: 1; transform: translateY(0px); transition-delay: 900ms; } .home-section-3 .section-image-img { transition: transform 6s cubic-bezier(0.17, 0.66, 0.34, 0.98); transform: translateY(-760px) scale(1.1); transition-delay: 500ms; } .visible.home-section-3 .section-image-img { transform: translate(0px, 0px) scale(1); } .home-section-3 .section-body { opacity: 0; transform: translateY(30px); transition: opacity 500ms ease-in-out, transform 800ms cubic-bezier(0.17, 0.66, 0.34, 0.98); } .visible.home-section-3 .section-body { opacity: 1; transform: translateY(0px); transition-delay: 1600ms; } } @media only screen and (min-width: 1400px) { .home-section-3 { padding-top: 7.75rem; } .home-section-3 .section-container { --container-gutter: 354px; } .home-section-3 .section-header { margin-bottom: 4.25rem; } .home-section-3 .section-heading { font-size: 60px; } } @media only screen and (min-width: 1800px) { .home-section-3 { padding-top: 10rem; } .home-section-3 .section-container { --container-gutter: 565px; } .home-section-3 .section-header { margin-bottom: 5rem; } .home-section-3 .section-heading { font-size: 70px; } } @media only screen and (max-width: 1199px) { .home-section-3 .section-image { margin-inline: auto; margin-top: 3.75rem; } } .home-section-3 .section-image-img { --cover-aspect-w: var(--home-section-3-image-w); --cover-aspect-l: var(--home-section-3-image-l); width: calc(var(--cover-aspect-w) * 1px); } @media only screen and (min-width: 1200px) { .home-section-3 + .home-section.has-home-section-3-offset::before, .home-section-3 + .home-section .has-home-section-3-offset::before { content: ""; height: var(--home-section-3-offset); display: block; flex: 0 0 auto; } .home-section-3 + .home-section.has-home-section-3-offset-image::before, .home-section-3 + .home-section .has-home-section-3-offset-image::before { content: ""; display: block; flex: 0 0 auto; width: max(0px, var(--home-section-3-image-w) * 1px - var(--container-gutter, 0px)); } .home-section-3 .section-image { margin-left: auto; } .home-section-3 .section-image-img { margin-left: auto; margin-right: calc((var(--container-gutter) + var(--global-border-radius)) * -1); width: calc(var(--home-section-3-image-w) * 1px + var(--global-border-radius)); } .home-section-3:nth-child(n+2) .section-image-img { margin-top: calc(var(--home-section-3-offset-image) * -1); } .home-section-3:nth-last-child(n+2) .section-image-img { margin-bottom: calc((var(--home-section-3-offset) + var(--global-pusher)) * -1); } } /* * Home Section 4 -------------------------------------------------------------------------------- */ :root { --home-section-4-offset: 0px; } @media only screen and (min-width: 1200px) { :root { --home-section-4-offset: 546px; } } @media only screen and (min-width: 1400px) { :root { --home-section-4-offset: 570px; } } @media only screen and (min-width: 1800px) { :root { --home-section-4-offset: 555px; } } .home-section-4 { padding-block: 0; } .home-section-4 .swiper { --swiper-scrollbar-bottom: 48px; --swiper-scrollbar-bg-color: var(--color-light); } .home-section-4 .section-decor { --fancy-silhouette-transform: scaleX(-1); } .home-section-4 .section-header { margin-bottom: 1.75rem; } .home-section-4 .section-heading { font-size: 14px; } .home-section-4 .section-body { padding-block: 38px 48px; } .home-section-4 .section-body-container { --container-gutter: 30px; } .home-section-4 .section-footer { margin-top: 45px; } @media only screen and (min-width: 760px) { .home-section-4 .testimonial-container { gap: 24px; } .home-section-4 .testimonial-highlight { margin-inline: 42px; } .home-section-4 .section-container-body { --container-gutter: 64px; } .home-section-4 .section-header-container { --container-gutter: 30px; } .home-section-4 .section-body { padding-block: 50px 60px; } .home-section-4 .section-body-container { --container-gutter: 93px; } } @media only screen and (min-width: 1200px) { .home-section-4 .swiper { --swiper-scrollbar-bottom: 64px; } .home-section-4 .testimonial-highlight { margin-inline: 92px; } .home-section-4 .section-container { --container-gutter: 64px; } .home-section-4 .section-heading { font-size: 17px; } .home-section-4 .section-body { padding-block: 96px 30px; } .home-section-4 .section-body-container { --container-gutter: 155px; } } @media only screen and (min-width: 1400px) { .home-section-4 .testimonial-container { gap: 40px; } .home-section-4 .testimonial-highlight { margin-inline: auto; } .home-section-4 .section-container { --container-gutter: 112px; } .home-section-4 .section-body { padding-block: 45px; } .home-section-4 .section-body-container { --container-gutter: 194px; } } @media only screen and (min-width: 1800px) { .home-section-4 .testimonial-highlight { font-size: 38px; } .home-section-4 .section-header { margin-bottom: 1.75rem; } .home-section-4 .section-body { padding-block: 110px 0; } .home-section-4 .section-body-container { --container-gutter: 468px; } .home-section-4 .section-content { padding-top: 10rem; } .home-section-4 .section-content .swiper-scrollbar { margin-top: 8rem; } } .home-section-4:nth-last-child(n+2) .section-box { margin-bottom: calc(var(--home-section-4-offset) * -1); } .home-section-4 + .home-section.has-home-section-4-offset::before, .home-section-4 + .home-section .has-home-section-4-offset::before { content: ""; height: var(--home-section-4-offset); display: block; flex: 0 0 auto; } @media only screen and (min-width: 1200px) { .home-section-3 + .home-section-4 .section-box.has-home-section-3-offset.section-box { justify-content: center; } .home-section-3 + .home-section-4 .section-box.has-home-section-3-offset.section-box:before { grid-row: 2; grid-column: 3; } .home-section-3 + .home-section-4 .section-box.has-home-section-3-offset.section-box .section-header { order: -1; max-width: calc(var(--comp) - max(0px, var(--home-section-3-image-w) * 1px - var(--container-gutter, 0px) * -1)); } .home-section-3 + .home-section-4 .section-box.has-home-section-3-offset.section-box .section-header, .home-section-3 + .home-section-4 .section-box.has-home-section-3-offset.section-box .section-body { grid-column: 1/span 2; } .home-section-3 + .home-section-4 .section-box.has-home-section-3-offset.section-box .section-body { margin-right: calc(max(0px, var(--home-section-3-image-w) * 1px - var(--container-gutter, 0px)) * -1); } } /* * Home Section 5 -------------------------------------------------------------------------------- */ :root { --home-section-5-offset-image: 80px; --home-section-5-image-w: 310; --home-section-5-image-l: 204; } @media only screen and (min-width: 760px) { :root { --home-section-5-offset-image: 140px; --home-section-5-image-w: 549; --home-section-5-image-l: 360; } } @media only screen and (min-width: 1200px) { :root { --home-section-5-offset-image: 70px; --home-section-5-image-w: 462; --home-section-5-image-l: 326; } } @media only screen and (min-width: 1400px) { :root { --home-section-5-offset-image: 102px; --home-section-5-image-w: 550; --home-section-5-image-l: 380; } } @media only screen and (min-width: 1800px) { :root { --home-section-5-offset-image: 126px; --home-section-5-image-w: 710; --home-section-5-image-l: 467; } } .home-section-5 { padding-top: var(--global-pusher); padding-bottom: 20px; } .home-section-5 :is(.section-header) { padding-top: 48px; } .home-section-5 .widget { --widget-padding-x: 0rem; --widget-padding-top: 0rem; --widget-padding-bottom: var(--widget-padding-top); --widget-dropdown-padding-top: 0rem; --widget-dropdown-padding-bottom: var(--widget-dropdown-padding-top); --widget-dropdown-margin-top: 0rem; --widget-dropdown-margin-bottom: var(--widget-dropdown-margin-top); --widget-item-height: 68px; --widget-item-border-width: 1px; --widget-item-lines: 1; --widget-item-padding-x: 0px; --widget-dropdown-offset: 0em; --widget-dropdown-item-offset: 0em; --widget-title-padding-x: var(--widget-item-padding-x); --widget-content-margin-top: 0; --widget-content-margin-bottom: 0rem; --widget-content-padding-top: 0rem; --widget-content-padding-bottom: var(--widget-content-padding-top); --widget-item-baseline-offset: 0.5; --widget-item-line-height: 1.5; background: transparent; color: inherit; font-size: 16px; font-weight: 600; } .home-section-5 .widget-title { display: none; } .home-section-5 .widget > :where(ul, .widget-content, .menu, div):not(.content) { border-top: 0; } .home-section-5 .widget > :where(ul, .widget-content, .menu, div):not(.content) li { border-bottom: 1px solid rgba(112, 112, 112, 0.3); display: flex; } .home-section-5 .widget > :where(ul, .widget-content, .menu, div):not(.content) li a { align-items: center; } .home-section-5 .widget > :where(ul, .widget-content, .menu, div):not(.content) li:is(.open, :hover, :focus-within) > a { color: var(--color-primary-alt); } .home-section-5 .widget > :where(ul, .widget-content, .menu, div):not(.content) li:last-child { border-bottom: 0; } .home-section-5 .section-header, .home-section-5 .section-footer { margin-block: 0; } .home-section-5 .section-heading { font-size: 40px; line-height: 44px; text-transform: none; } .home-section-5 .section-image { justify-self: center; } .home-section-5 .section-blocks { display: grid; justify-content: center; gap: 24px; } .home-section-5 .section-content { text-align: left; } .home-section-5 .section-menu { margin-bottom: 0; } .home-section-5 .section-awards { margin-top: 5.5rem; } @media only screen and (min-width: 760px) { .home-section-5 { padding-bottom: 55px; } .home-section-5 :is(.section-header) { padding-top: 96px; } .home-section-5 .widget { --widget-item-height: 4.5rem; } .home-section-5 .widget > :where(ul, .widget-content, .menu, div):not(.content) { display: grid; grid-template-columns: repeat(2, 1fr); -moz-column-gap: 40px; column-gap: 40px; } .home-section-5 .widget li { border-bottom: 1px solid var(--color-neutral-lightest); } .home-section-5 .widget li:nth-last-child(-n+2) { border-bottom: 0; } .home-section-5 .section-heading { font-size: 45px; } .home-section-5 .section-bloxks { gap: 1.5rem; } .home-section-5 .section-footer { margin-top: 0; } } @media only screen and (min-width: 1200px) { .home-section-5 { padding-bottom: 112px; } .home-section-5 :is(.section-menu, .section-header) { padding-top: 112px; } .home-section-5 .widget { --widget-item-height: 4.5rem; font-size: 17px; line-height: 20px; } .home-section-5 .widget > :where(ul, .widget-content, .menu, div):not(.content) { -moz-column-gap: 56px; column-gap: 56px; } .home-section-5 .section-container { --container-gutter: 63px; } .home-section-5 .section-header, .home-section-5 .section-footer { margin-inline: 0; } .home-section-5 .section-header { text-align: left; } .home-section-5 .section-image ~ .section-header { padding-top: 5.75rem; } .home-section-5 .section-content { max-width: 348px; } .home-section-5 .section-blocks { grid-template-columns: auto 1fr; grid-auto-flow: dense; justify-content: end; gap: 24px 40px; } .home-section-5 .section-block { grid-column: 1; } .home-section-5 .section-menu { margin-block: 0; grid-column: 2; grid-row: span 3; align-self: center; } .home-section-5 .section-image ~ .section-menu { align-self: center; padding-top: 3rem; } .home-section-5 .section-image { grid-column: 1/-1; justify-self: self-start; transition: transform 4s cubic-bezier(0.17, 0.66, 0.34, 0.98); transform: translateX(-560px) scale(1.1); transition-delay: 200ms; } .visible.home-section-5 .section-image { transform: translate(0px, 0px) scale(1); } .home-section-5 .section-awards { margin-top: 5rem; grid-column: 1/-1; } .home-section-5 .section-header { opacity: 0; transform: translateY(30px); transition: opacity 400ms ease-in-out, transform 800ms cubic-bezier(0.17, 0.66, 0.34, 0.98); } .visible.home-section-5 .section-header { opacity: 1; transform: translateY(0px); transition-delay: 400ms; } .home-section-5 .section-content { opacity: 0; transform: translateY(30px); transition: opacity 400ms ease-in-out, transform 800ms cubic-bezier(0.17, 0.66, 0.34, 0.98); } .visible.home-section-5 .section-content { opacity: 1; transform: translateY(0px); transition-delay: 800ms; } .home-section-5 .section-footer { opacity: 0; transform: translateY(30px); transition: opacity 400ms ease-in-out, transform 800ms cubic-bezier(0.17, 0.66, 0.34, 0.98); } .visible.home-section-5 .section-footer { opacity: 1; transform: translateY(0px); transition-delay: 1200ms; } .home-section-5 .section-menu { opacity: 0; transform: translateY(30px); transition: opacity 400ms ease-in-out, transform 800ms cubic-bezier(0.17, 0.66, 0.34, 0.98); } .visible.home-section-5 .section-menu { opacity: 1; transform: translateY(0px); transition-delay: 1600ms; } } @media only screen and (min-width: 1400px) { .home-section-5 .widget > :where(ul, .widget-content, .menu, div):not(.content) { -moz-column-gap: 66px; column-gap: 66px; } .home-section-5 .section-container { --container-gutter: 113px; } .home-section-5 .section-image ~ .section-header { padding-top: 6.5rem; } .home-section-5 .section-heading { font-size: 56px; } .home-section-5 .section-content { max-width: 419px; } .home-section-5 .section-blocks { gap: 24px 80px; } .home-section-5 .section-image .image-left { margin-top: -10rem; } .home-section-5 .section-image .image-left img { width: 596px; } } @media only screen and (min-width: 1800px) { .home-section-5 { padding-bottom: 125px; } .home-section-5 :is(.section-menu, .section-header) { padding-top: 125px; } .home-section-5 .widget > :where(ul, .widget-content, .menu, div):not(.content) { -moz-column-gap: 56px; column-gap: 56px; } .home-section-5 .section-container { --container-gutter: 214px; } .home-section-5 .section-blocks { gap: 20px 253px; } .home-section-5 .section-heading { font-size: 64px; line-height: 74px; } .home-section-5 .section-content { max-width: 520px; } .home-section-5 .section-image .image-left { margin-top: -11rem; left: 10.5rem; } .home-section-5 .section-image .image-left img { width: 720px; } .home-section-5 .section-footer { margin-top: 20px; } } @media only screen and (max-width: 1199px) { .home-section-5 .section-header, .home-section-5 .section-footer { max-width: none; text-align: inherit; } } .home-section-5 .section-image-img { --cover-aspect-w: var(--home-section-5-image-w); --cover-aspect-l: var(--home-section-5-image-l); width: calc(var(--cover-aspect-w) * 1px); } .home-section-5:nth-child(n+2) .section-image-img { margin-top: calc((var(--home-section-5-offset-image) + var(--global-pusher)) * -1); } .home-section.has-home-section-5-offset:has(+ .home-section-5)::after, .home-section:has(+ .home-section-5) .has-home-section-5-offset::after { content: ""; height: var(--home-section-5-offset-image); display: block; flex: 0 0 auto; } @media only screen and (min-width: 1200px) { .home-section-5 .section-image-img { margin-left: calc((var(--container-gutter) + var(--global-border-radius)) * -1); width: calc(var(--home-section-5-image-w) * 1px + var(--global-border-radius)); } } /* * Home Section 6 -------------------------------------------------------------------------------- */ :root { --home-section-6-offset-image: 100px; --home-section-6-image-w: 284; --home-section-6-image-l: 340; } @media only screen and (min-width: 760px) { :root { --home-section-6-offset-image: 96px; --home-section-6-image-w: 308; --home-section-6-image-l: 360; } } @media only screen and (min-width: 1200px) { :root { --home-section-6-offset-image: 240px; --home-section-6-image-w: 292; --home-section-6-image-l: 341; } } @media only screen and (min-width: 1400px) { :root { --home-section-6-offset-image: 170px; --home-section-6-image-w: 335; --home-section-6-image-l: 391; } } @media only screen and (min-width: 1800px) { :root { --home-section-6-offset-image: 240px; --home-section-6-image-w: 406; --home-section-6-image-l: 474; } } .home-section-6 { padding-top: var(--global-pusher); background: linear-gradient(180deg, rgba(77, 126, 153, 0.16) -80%, rgba(255, 255, 255, 0) 100%); padding-bottom: 46px; } .home-section-6 :is(.section-header) { padding-top: 4.25rem; } .home-section-6 .section-blocks { display: grid; grid-template-columns: 100%; } .home-section-6 .section-header { padding-top: 48px; margin-bottom: 48px; } .home-section-6 .section-image { justify-self: center; } .home-section-6 .section-heading { font-size: 40px; line-height: 46px; text-transform: none; text-align: left; } .home-section-6 .section-footer { max-width: 100%; margin-top: 48px; } @media only screen and (min-width: 760px) { .home-section-6 { padding-bottom: 96px; } .home-section-6 :is(.section-header) { padding-top: 96px; } .home-section-6 .section-container { --container-gutter: 65px; } .home-section-6 .section-heading { font-size: 48px; line-height: 52px; } } @media only screen and (min-width: 760px) and (max-width: 1199px) { .home-section-6 .section-heading { margin-right: 70px; } } @media only screen and (min-width: 760px) { .home-section-6 .section-footer { margin-top: 5.75rem; } } @media only screen and (min-width: 1200px) { .home-section-6 { padding-bottom: 112px; } .home-section-6 :is(.section-header) { padding-top: 96px; } .home-section-6 .section-container { --container-gutter: 120px; } .home-section-6 .section-blocks { grid-template-columns: auto 1fr; grid-auto-flow: dense; -moz-column-gap: 70px; column-gap: 70px; } .home-section-6 .section-block { grid-column: 1/-1; justify-self: center; } .home-section-6 .section-image ~ .section-block:not(.section-footer) { grid-column: 2; justify-self: start; } .home-section-6 .section-image { grid-column: 1; grid-row: span 2; } .home-section-6 .section-image ~ .section-header { text-align: left; margin-inline: 0; } .home-section-6 .section-header { margin-bottom: 1.75rem; } .home-section-6 .section-body { max-width: 48rem; } .home-section-6 .section-footer { grid-column: 1/-1; margin-top: 112px; } .home-section-6 .section-image { opacity: 0; transform: translateY(30px); transition: opacity 500ms ease-in-out, transform 800ms cubic-bezier(0.17, 0.66, 0.34, 0.98); } .visible.home-section-6 .section-image { opacity: 1; transform: translateY(0px); } .home-section-6 .section-header { opacity: 0; transform: translateY(30px); transition: opacity 500ms ease-in-out, transform 800ms cubic-bezier(0.17, 0.66, 0.34, 0.98); } .visible.home-section-6 .section-header { opacity: 1; transform: translateY(0px); transition-delay: 500ms; } .home-section-6 .section-body { opacity: 0; transform: translateY(30px); transition: opacity 500ms ease-in-out, transform 800ms cubic-bezier(0.17, 0.66, 0.34, 0.98); } .visible.home-section-6 .section-body { opacity: 1; transform: translateY(0px); transition-delay: 1000ms; } .home-section-6 .section-footer { opacity: 0; transform: translateY(30px); transition: opacity 500ms ease-in-out, transform 800ms cubic-bezier(0.17, 0.66, 0.34, 0.98); } .visible.home-section-6 .section-footer { opacity: 1; transform: translateY(0px); transition-delay: 1200ms; } } @media only screen and (min-width: 1400px) { .home-section-6 .section-container { --container-gutter: 178px; } .home-section-6 .section-blocks { -moz-column-gap: 80px; column-gap: 80px; } .home-section-6 .section-heading { font-size: 52px; } .home-section-6 .section-footer .awards { margin-inline: -5rem; } } @media only screen and (min-width: 1800px) { .home-section-6 { padding-bottom: 125px; } .home-section-6 .section-container { --container-gutter: 252px; } .home-section-6 .section-header { margin-bottom: 48px; } .home-section-6 .section-blocks { -moz-column-gap: 208px; column-gap: 208px; } .home-section-6 .section-heading { font-size: 68px; line-height: 72px; } .home-section-6 .section-body { max-width: 50rem; } .home-section-6 .section-footer { margin-top: 125px; } .home-section-6 .section-footer .awards { margin-inline: 3rem; } } .home-section-6 .section-image-img { --cover-aspect-w: var(--home-section-6-image-w); --cover-aspect-l: var(--home-section-6-image-l); width: calc(var(--cover-aspect-w) * 1px); } .home-section-6:nth-child(n+2) .section-image-img { margin-top: calc(var(--home-section-6-offset-image) * -1); } .home-section.has-home-section-6-offset:has(+ .home-section-6)::after, .home-section:has(+ .home-section-6) .has-home-section-6-offset::after { content: ""; height: var(--home-section-6-offset-image); display: block; flex: 0 0 auto; } /* * Home Section 7 -------------------------------------------------------------------------------- */ .home-section-7 { background-color: var(--scheme-bg-contrast, var(--color-light-alt)); } /* ================================================================================ * 404 ================================================================================ */ /* * 404 Related Classes -------------------------------------------------------------------------------- */ /* * 404 Page -------------------------------------------------------------------------------- */ body.error404 { /* body selector for 404 template */ } #error404-page { padding-top: 4rem; padding-bottom: 6rem; text-align: center; } #error404-page .section-heading { margin-bottom: 0.75em; } #error404-page .section-subheading { margin-bottom: 0.7em; } @media only screen and (min-width: 760px) { #error404-page { padding-top: 5rem; } #error404-page .section-content { margin: 0 auto; } #error404-page .section-content p { max-width: 342px; margin: 0 auto 48px; } } @media only screen and (min-width: 1200px) { #error404-page { padding-top: 7rem; padding-bottom: 9rem; } } @media only screen and (min-width: 1800px) { #error404-page { padding-top: 8.5rem; } } /* ================================================================================ * Case Results + Case Results Template ================================================================================ */ /* * Results Template -------------------------------------------------------------------------------- */ body.ilaw-template-results { /* body selector for results template */ } #results-banner { /* selector for results banner if enabled */ } #results-page { /* template main styles */ } #results-page .results:is(.columns) { --columns-gap-x: 3rem; --columns-gap-y: 50px; justify-content: flex-start; } #results-page .result:is(:hover, :focus-within) { /* background-color: var(--color-neutral-light); */ } #results-page .result-title { margin-block: 20px 10px; } #results-page .result-description { /* max-width: 40ch; */ /* margin-left: auto; */ /* margin-right: auto; */ } @media only screen and (min-width: 760px) { #results-page .results:is(.columns) { --columns-number: 2; --columns-gap-y: 84px; } } @media only screen and (min-width: 1200px) { #results-page .results:is(.columns) { --columns-number: 3; --columns-gap-x: 6rem; } #results-page .section-container { --container-gutter: 58px; } #results-page .section-heading { font-size: 60px; } } @media only screen and (min-width: 1400px) { #results-page .results:is(.columns) { --columns-number: 3; } #results-page .result-title { margin-block: 30px 15px; } #results-page .section-container { --container-gutter: 120px; } } @media only screen and (min-width: 1800px) { #results-page .results:is(.columns) { --columns-gap-x: 140px; --columns-gap-y: 140px; } #results-page .section-container { --container-gutter: 280px; } } @media only screen and (max-width: 1199px) { #results-page .result { max-width: 500px; } } /* ================================================================================ * Practice Areas + Practice Areas Template ================================================================================ */ /* * Practice Areas Grid Template -------------------------------------------------------------------------------- */ body.ilaw-template-practice-areas { /* body selector for practice-areas template */ } #practice-areas-banner { /* selector for practice-areas banner if enabled */ } #practice-areas-page { /* template main styles */ } #practice-areas-page .practice-area-menu:is(.columns) { --columns-gap-x: 3rem; padding: 0 1.5rem; } #practice-areas-page .practice-area { padding: 4rem 2rem; background-color: var(--color-neutral); border-radius: 15px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.21); } #practice-areas-page .practice-area:nth-last-child(n+2) { margin-bottom: 40px; } #practice-areas-page .section-header { margin: 0 auto; text-align: center; } #practice-areas-page .section-heading { font-size: 40px; text-align: center; } @media only screen and (min-width: 760px) { #practice-areas-page .practice-area-menu:is(.columns) { padding: 0; --columns-number: 2; } #practice-areas-page .section-heading { font-size: 50px; margin-bottom: 4rem; } } @media only screen and (min-width: 1200px) { #practice-areas-page .practice-area-menu:is(.columns) { --columns-number: 3; } #practice-areas-page .section-heading { font-size: 60px; margin-bottom: 6rem; } } @media only screen and (min-width: 1400px) { #practice-areas-page .practice-area-menu:is(.columns) { --columns-gap-x: 2.5rem; } #practice-areas-page .practice-area { padding-inline: 71px; } #practice-areas-page .section-container { --container-gutter: 120px; } } @media only screen and (min-width: 1800px) { #practice-areas-page .practice-area-menu:is(.columns) { --columns-number: 3; --columns-gap-x: 96px; } #practice-areas-page .practice-area { padding: 77px 106px 67px; } #practice-areas-page .section-container { --container-gutter: 255px; } #practice-areas-page .section-heading { font-size: 70px; margin-bottom: 7.5rem; } } @media only screen and (max-width: 759px) { #practice-areas-page .practice-area { margin: 0 auto; padding: 2.5rem 0; width: auto; max-width: 350px; } #practice-areas-page .practice-area:nth-last-child(n+2) { margin-bottom: 3rem; } } /* ================================================================================ * Testimonials + Testimonial Template ================================================================================ */ /* * Testimonials Template -------------------------------------------------------------------------------- */ body.ilaw-template-testimonials { /* body selector for testimonials template */ } #testimonials-banner { /* selector for testimonials banner if enabled */ } #testimonials-page { /* template main styles */ } #testimonials-page .testimonials:is(.columns) { --columns-gap-x: 3rem; --columns-gap-y: 3rem; } #testimonials-page .testimonials-featured { text-align: center; } #testimonials-page .testimonial-source { color: var(--color-primary-alt); } @media only screen and (min-width: 760px) { #testimonials-page .testimonials:is(.columns) { --columns-gap-y: 4.5rem; } #testimonials-page .section-container { --container-gutter: 99px; } } @media only screen and (min-width: 1200px) { #testimonials-page .testimonials:is(.columns) { --columns-number: 1; --columns-gap-x: 80px; } #testimonials-page .section-container { --container-gutter: 295px; } } @media only screen and (min-width: 1400px) { #testimonials-page .testimonials:is(.columns) { --columns-number: 2; --columns-gap-y: 80px; } #testimonials-page .section-container { --container-gutter: 112px; } } @media only screen and (min-width: 1800px) { #testimonials-page .section-container { --container-gutter: 160px; } } /* ================================================================================ * Profiles/ Team Grid + Profiles/ Team Grid Template ================================================================================ */ /* * Team/Profiles Groups - Optional -------------------------------------------------------------------------------- */ .team-group:nth-child(n+2) { margin-top: 4rem; } .team-title { margin-bottom: 2rem; } .team .profile { max-width: 440px; } /* * Team/Profiles Page -------------------------------------------------------------------------------- */ body.ilaw-template-team { /* body selector for team template */ } #team-banner { /* selector for team banner if enabled */ } #team-page { /* template main styles */ } #team-page .profiles:is(.columns) { --columns-gap-x: 3rem; --columns-gap-y: 3.5rem; justify-content: center; } @media only screen and (min-width: 760px) { #team-page .profiles:is(.columns) { --columns-gap-y: 5rem; } } @media only screen and (min-width: 1200px) { #team-page .profiles:is(.columns) { --columns-number: 3; --columns-gap-x: 5rem; } #team-page .section-container { --container-gutter: 112px; } } @media only screen and (min-width: 1400px) { #team-page .profiles:is(.columns) { --columns-gap-x: 6rem; } } @media only screen and (min-width: 1800px) { #team-page .profiles:is(.columns) { --columns-number: 3; --columns-gap-x: 40px; --columns-gap-y: 80px; } #team-page .section-container { --container-gutter: 320px; } } @media only screen and (max-width: 1799px) { #team-page .profile { max-width: 360px; } } @media only screen and (max-width: 1199px) { #team-page .profile { max-width: 375px; } } /* ================================================================================ * Profile Detail Template ================================================================================ */ /* * Profile Contact Info -------------------------------------------------------------------------------- */ .profile-contact a:not(:hover, :focus) { color: inherit; text-decoration: none; } .profile-contact-label { margin-right: 0.5em; } /* * Profile Detail Template -------------------------------------------------------------------------------- */ body.ilaw-template-profile { /* body selector for profile template */ } #profile-banner { /* selector for profile banner if enabled */ } /* Profile Page Template @Variation A: Simple Requires PHP: templates/template-profile.php - @Variation A: Simple Requires SCSS: scss/templates/profile.scss - @Variation A: Simple */ .profile-page-simple-header { margin-bottom: 2rem; } .profile-page-simple-subheader { margin-bottom: 2rem; } .profile-page-simple .default-sections { --default-gap-y: 2.25rem; } .profile-page-simple .default-section:nth-last-child(n+2) { margin-bottom: var(--default-gap-y); } @media only screen and (min-width: 760px) { .profile-page-simple .default-sections { --default-gap-y: 3.5rem; } } @media only screen and (min-width: 1200px) { .profile-page-simple .default-sections { --default-gap-x: 6.25rem; } } #profile-page { /* template main styles */ } #profile-page .banner-buttons { margin-top: 0; } #profile-page .profile-image { width: 100%; } #profile-page .profile-position { color: var(--color-primary-alt); text-transform: capitalize; font-weight: 600; font-size: 24px; line-height: 1; margin-block: 12px 24px; } #profile-page .section-container { --container-gutter: 26px; } #profile-page .default-sections { --default-gap-y: 48px; } #profile-page .widget-title { font-size: 18px; line-height: 1; } #profile-page .widget-content { padding-inline: var(--widget-padding-x); } #profile-page .widget-content li { color: var(--color-light); padding-block: 4px; } #profile-page .widget-content li :before { color: var(--color-secondary); } #profile-page .widget-content li a { color: var(--color-light); font-weight: 400; } #profile-page .widget-content li a:hover { color: var(--color-secondary-alt); font-weight: 600; } #profile-page .widget-content ul { padding-left: 0; } #profile-page .section-header { margin-bottom: 48px; } #profile-page .section-heading { max-width: none; } #profile-page .section-subheader { margin-bottom: 2rem; } @media only screen and (min-width: 760px) { #profile-page .default-sections { --default-gap-y: 80px; } #profile-page .default-section-sidebar { max-width: 479px; } #profile-page .widget { --widget-padding-x: 72px; --widget-content-margin-top: 34px; } #profile-page .widget-title { font-size: 22px; } #profile-page .section-container { --container-gutter: 78px; } #profile-page .section-header { margin-bottom: 96px; } #profile-page .section-heading { font-size: 64px; } } @media only screen and (min-width: 1200px) { #profile-page .default-sections { --default-sidebar-width: 372px; --default-gap-x: 80px; --default-gap-y: 40px; } #profile-page .widget { --widget-padding-x: 42px; } #profile-page .section-container { --container-gutter: 112px; } #profile-page .section-header { margin-bottom: 112px; text-align: center; } #profile-page .section-heading { font-size: 64px; text-align: center; } #profile-page .section-body:nth-last-child(2) { margin-bottom: 0; } #profile-page .section-subheader { margin-top: 0; } } @media only screen and (min-width: 1400px) { #profile-page .default-sections { --default-sidebar-width: 424px; --default-gap-x: 121px; } #profile-page .widget { --widget-padding-x: 72px; } #profile-page .section-container { --container-gutter: 130px; } } @media only screen and (min-width: 1800px) { #profile-page .default-sections { --default-sidebar-width: 479px; --default-gap-x: 186px; } #profile-page .section-container { --container-gutter: 293px; } #profile-page .section-header { margin-bottom: 132px; } } @media only screen and (max-width: 1199px) { #profile-page .profile-image { width: 424px; margin-inline: auto; } #profile-page .section-awards, #profile-page .section-header { text-align: center; } #profile-page .section-contact { text-align: center; } } @media only screen and (max-width: 759px) { #profile-page .profile-image { width: 300px; } } /* ================================================================================ * Videos + Video Template ================================================================================ */ /* * Videos Template -------------------------------------------------------------------------------- */ body.ilaw-template-videos { /* body selector for videos template */ } #videos-banner { /* selector for videos banner if enabled */ } #videos-page { /* template main styles */ } #videos-page .videos:is(.columns) { --columns-gap-x: 40px; --columns-gap-y: 2rem; justify-content: center; } @media only screen and (min-width: 760px) { #videos-page .videos:is(.columns) { --columns-number: 2; } } @media only screen and (min-width: 1200px) { #videos-page .videos:is(.columns) { --columns-number: 3; --columns-gap-y: 4rem; } #videos-page .section-container { --container-gutter: 120px; } } @media only screen and (min-width: 1800px) { #videos-page .videos:is(.columns) { --columns-gap-y: 90px; } #videos-page .section-container { --container-gutter: 176px; } } @media only screen and (max-width: 759px) { #videos-page .video { max-width: 400px; } } /* ================================================================================ * About Template ================================================================================ */ /* * About Related Classes -------------------------------------------------------------------------------- */ .about-section .section-heading:last-child:not(.primary-heading) { margin-bottom: 0; } /* * About Template -------------------------------------------------------------------------------- */ body.ilaw-template-about { /* body selector for about template */ } #about-banner { /* selector about banner if enabled */ } #about-page { padding-top: 3.75rem; } #about-page .section-heading { font-size: 40px; margin-bottom: 0; } #about-page .section-lead { margin-block: 12px 24px; } #about-page .banner-buttons { margin-top: 0; } @media only screen and (min-width: 760px) { #about-page { padding-top: 4.25rem; } #about-page .section-heading { font-size: 48px; margin-bottom: 0; } } @media only screen and (min-width: 1200px) { #about-page { padding-top: 5.75rem; } #about-page .section-lead { margin-block: 8px 24px; } } @media only screen and (min-width: 1400px) { #about-page { padding-top: 125px; } #about-page .section-blocks { gap: 166px; } #about-page .section-heading { font-size: 64px; } #about-page .section-lead { max-width: none; } } @media only screen and (min-width: 1800px) { #about-page .section-image-left-img { margin-left: -5rem; } #about-page .section-image-right-img { margin-right: -8.25rem; } } /* * About Section 1 -------------------------------------------------------------------------------- */ /* * About Section 2 -------------------------------------------------------------------------------- */ .about-section-2 { background-color: var(--scheme-bg, var(--color-dark-alt)); color: var(--scheme-fg, var(--color-light)); } /* * About Section 3 -------------------------------------------------------------------------------- */ /* ================================================================================ Contact Template ================================================================================ */ /* Contact Template 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.ilaw-template-contact { /* body selector for contact template */ } #contact-banner { /* selector for contact banner if enabled */ } #contact-page { /* template main styles */ display: flex; flex-direction: column; justify-content: center; } #contact-page .section-header { margin-bottom: 2.75rem; } #contact-page .section .contact-block-title { color: var(--color-primary-alt); margin-bottom: 15px; } #contact-page .section .contact-block-content { gap: 10px; } #contact-page .section .contact-block-content .location-directions-button { color: var(--color-dark); border-color: var(--color-primary-alt); } #contact-page .section .contact-block-content .location-directions-button:is(:hover, :focus) { color: var(--color-primary-alt); } #contact-page .section .contact-blocks { -moz-column-gap: 48px; column-gap: 48px; } #contact-page .section .contact-block.contact-numbers .number-link { color: var(--color-dark); } #contact-page .section .social li:is(:hover, :focus) { color: var(--color-primary-alt); } @media only screen and (min-width: 760px) { #contact-page .section-header { margin-bottom: 4.25rem; } #contact-page .section-heading { font-size: 45px; } #contact-page .contact-block.contact-numbers .number-link { font-size: 1em; } } @media only screen and (min-width: 1200px) { #contact-page .contact-section { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 45px; margin-top: 7rem; } #contact-page .section-container { --container-gutter: 112px; } #contact-page .section-blocks { display: grid; grid-template-columns: repeat(2, auto); gap: 7rem; align-items: center; justify-content: start; } #contact-page .section-image { border-radius: var(--global-border-radius); overflow: hidden; } #contact-page .section-image-left { margin-left: calc(var(--container-gutter) * -1); width: 245px; } #contact-page .section-image-right { margin-top: -5rem; margin-left: -4rem; width: 405px; } #contact-page .section-header { margin-bottom: 2.625rem; } #contact-page .section-heading { font-size: 50px; } #contact-page .contact-blocks { -moz-column-gap: 2.875rem; column-gap: 2.875rem; } } @media only screen and (min-width: 1400px) { #contact-page .section-container { --container-gutter: 115px; } #contact-page .section-heading { font-size: 60px; } #contact-page .section-image-left { margin-left: 0; width: 270px; } #contact-page .section-image-right { margin-left: 7.5rem; width: 405px; } } @media only screen and (min-width: 1800px) { #contact-page { padding-block: 157px; } #contact-page .contact-section { gap: 70px; } #contact-page .section-container { --container-gutter: 225px; } #contact-page .section-blocks { gap: 152px; } #contact-page .section-header { margin-bottom: 56px; } #contact-page .section-heading { font-size: 80px; } #contact-page .section-image-left { width: 405px; } #contact-page .section-image-right { margin-left: 12.75rem; width: 461px; } #contact-page .section .contact-blocks { gap: 45px; } } @media only screen and (max-width: 1199px) { #contact-page .section-header { text-align: center; } } @media only screen and (max-width: 759px) { #contact-page { text-align: center; } } /*# sourceMappingURL=style.css.map */