/*! Theme Name: PrimsiteWP Author: Florin Nita Author URI: https://primsite.net/ Description: Fast website theme. Version: 1.0.0 ====================================== */ @layer reset, base, framework, styles, utilities, darkmode; @layer reset { /*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) 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 - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) *: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; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* 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; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* 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; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /* Florin Nita: Add back the focus for accessibility */ :focus-visible { /* keyboard only focus styles */ outline: 2px solid; } } @layer base { /* Font types for text @link https://gwfh.mranftl.com/fonts */ /* league-spartan-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'League Spartan'; font-style: normal; font-weight: 400; src: url('fonts/league-spartan.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* league-spartan-600 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'League Spartan'; font-style: normal; font-weight: 600; src: url('fonts/league-spartan-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* league-spartan-800 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'League Spartan'; font-style: normal; font-weight: 800; src: url('fonts/league-spartan-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } @font-face { font-display: swap; font-family: 'Helvetica'; font-style: normal; font-weight: normal; src: url('fonts/helvetica.woff') format('woff'); } @font-face { font-display: swap; font-family: 'Helvetica'; font-style: normal; font-weight: 600; src: url('fonts/helvetica-bold.woff') format('woff'); } :root { /* Font sizes @link https://utopia.fyi/type/calculator?c=320,16,1.125,1440,20,1.125,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ --fs-1: clamp(0.7901rem, 0.7873rem + 0.0141vw, 0.8rem); --fs-2: clamp(0.8889rem, 0.8571rem + 0.1587vw, 1rem); --fs-3: clamp(1rem, 0.9286rem + 0.3571vw, 1.25rem); --fs-4: clamp(1.125rem, 1rem + 0.625vw, 1.5625rem); --fs-5: clamp(1.2656rem, 1.0692rem + 0.9821vw, 1.9531rem); --fs-6: clamp(1.4238rem, 1.1331rem + 1.4537vw, 2.4414rem); --fs-7: clamp(1.6018rem, 1.1875rem + 2.0714vw, 3.0518rem); --fs-8: clamp(1.802rem, 1.227rem + 2.8752vw, 3.8147rem); /* Spaces for margins, paddings, and gaps @link https://coreframework.com/app/01JHFGRN5JVBAKA16EE1Y8RVCE */ --space-1: 0.25rem; --space-2: clamp(0.41rem, calc(0.04vw + 0.4rem), 0.44rem); --space-3: clamp(0.51rem, calc(0.16vw + 0.48rem), 0.62rem); --space-4: clamp(0.64rem, calc(0.35vw + 0.57rem), 0.88rem); --space-5: clamp(0.8rem, calc(0.65vw + 0.67rem), 1.24rem); --space-6: clamp(1rem, calc(1.11vw + 0.78rem), 1.75rem); --space-7: clamp(1.25rem, calc(1.81vw + 0.89rem), 2.47rem); --space-8: clamp(1.56rem, calc(2.87vw + 0.99rem), 3.5rem); --space-9: clamp(1.95rem, calc(4.44vw + 1.07rem), 4.95rem); --space-10: clamp(2.44rem, calc(6.75vw + 1.09rem), 7rem); /* Colors */ --color-primary: hsl(352, 77%, 27%); --color-primary-medium: hsl(352deg 74% 37%); --color-primary-light: hsl(from var(--color-primary) h s 95%); --color-secondary: hsl(46, 85%, 68%); --color-secondary-medium: hsl(44, 96%, 78%); --color-secondary-light: hsl(43, 87%, 91%); --color-white: hsl(0, 0%, 100%); --color-black: hsl(0, 0%, 5%); --color-ghost: hsla(0, 0%, 100%, 0.5); --color-layer-1: hsl(0, 0%, 100%); --color-layer-2: hsl(0, 0%, 96%); --color-layer-3: hsl(0, 0%, 85%); --color-title: var(--color-primary); --color-text: #575757; --color-text-inverse: hsl(0, 0%, 100%); --font-family-title: 'League Spartan'; --font-family-text: 'Helvetica', arial, sans-serif; } body { font-family: var(--font-family-text); font-size: var(--fs-2); color: var(--color-text); background-color: var(--color-layer-1); line-height: 1.5; letter-spacing: 0.5px; margin: 0; overscroll-behavior: none; transition: color .2s ease, background-color .2s ease; } body.scroll main { padding-top: 7.5rem; } section, .page-header { padding: clamp(3.75rem, 7.82vw, 6.25rem) clamp(1rem, 4vw, 3rem); } .tagline { display: block; font-size: var(--fs-4); line-height: 1rem; margin-bottom: var(--space-6); text-transform: uppercase; font-weight: 600; color: var(--color-secondary); letter-spacing: 0.5px; } hr { margin-top: var(--space-6); margin-bottom: var(--space-6); border-bottom: 1px solid var(--color-text); opacity: 0.25; } } @layer framework { /* Texts and headings */ @layer texts { p { margin-top: 0; margin-bottom: 1rem; text-wrap: pretty; letter-spacing: 0.5px; } a { color: var(--color-primary); cursor: pointer; text-decoration: none; letter-spacing: 0.5px; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-title); font-weight: 600; color: var(--color-title); margin-top: 0; margin-bottom: .5rem; text-wrap: balance; -ms-word-wrap: break-word; word-wrap: break-word; letter-spacing: 0.5px; transition: color .2s ease; } h1 { font-size: var(--fs-8); line-height: 1.3; } h2 { font-size: var(--fs-7); line-height: 1.3; } h3 { font-size: var(--fs-6); line-height: 1.3; } h4 { font-size: var(--fs-5); line-height: 1.3; } h5 { font-size: var(--fs-4); line-height: 1.4; } h6 { font-size: var(--fs-3); line-height: 1.5; } .fs-1 { font-size: var(--fs-8); } .fs-2 { font-size: var(--fs-7); } .fs-3 { font-size: var(--fs-6); } .fs-4 { font-size: var(--fs-5); } .fs-5 { font-size: var(--fs-4); } .fs-6 { font-size: var(--fs-3); } .fs-7 { font-size: var(--fs-2); } .fs-8 { font-size: var(--fs-1); } small { font-size: var(--fs-1); } .text-regular { font-weight: normal; } .text-semibold { font-weight: 500; } b, strong, .text-bold { font-weight: 600; } .text-title { font-family: var(--font-family-title); } .text-body { font-family: var(--font-family-text); } i, em, .text-italic { font-style: italic; } .text-normal { font-style: normal; } .text-uppercase { text-transform: uppercase; } .text-lowercase { text-transform: lowercase; } .text-capitalize { text-transform: capitalize; } .text-underline { text-decoration: underline; } .text-line-through { text-decoration: line-through; } .lh-1 { line-height: 1; } .lh-2 { line-height: 2; } } /*** Colors **/ @layer colors { .text-primary { color: var(--color-primary); transition: color .2s ease; } .text-secondary { color: var(--color-secondary); transition: color .2s ease; } .text-white { color: var(--color-white); transition: color .2s ease; } .text-inverse { color: var(--color-text-inverse); transition: color .2s ease; } .bg-white { background-color: var(--color-white); transition: background-color .2s ease; } .bg-layer-1 { background-color: var(--color-layer-1); transition: background-color .2s ease; } .bg-layer-2 { background-color: var(--color-layer-2); transition: background-color .2s ease; } .bg-primary { background-color: var(--color-primary); transition: background-color .2s ease; } .bg-primary-medium { background-color: var(--color-primary-medium); transition: background-color .2s ease; } .bg-primary-light { background-color: var(--color-primary-light); transition: background-color .2s ease; } .bg-secondary { background-color: var(--color-secondary); transition: background-color .2s ease; } .bg-secondary-medium { background-color: var(--color-secondary-medium); transition: background-color .2s ease; } .bg-secondary-light { background-color: var(--color-secondary-light); transition: background-color .2s ease; } .bg-gradient { --startColor: var(--color-primary-light); --endColor: var(--color-white); background: var(--startColor); background: linear-gradient(180deg, var(--startColor) 0%, var(--endColor) 20%); transition: --bs-startColor .2s ease, --endColor .2s ease; } } /* Images */ @layer images { img, svg { max-width: 100%; height: auto; vertical-align: middle; font-style: italic; background-repeat: no-repeat; background-size: cover; shape-margin: 1rem; } .img-fluid { width: 100%; height: auto; } .image-wrapper { width: 100%; height: auto; overflow: hidden; display: flex; align-items: center; justify-content: center; } .image-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: all 250ms ease-in-out; } .flip { width: fit-content; height: 2.5rem; margin: 0; /* prevents padding from affecting height and width */ box-sizing: border-box; padding: 0; display: block; z-index: 10; position: relative; transform-style: preserve-3d; perspective: 700px; } .flip img { width: 100%; height: 100%; object-fit: contain; } .flip .after { width: auto; position: absolute; top: 0; left: 0; z-index: -1; opacity: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: rotateX(180deg); transition: opacity .3s, transform .6s; } .flip .before { -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: opacity .3s, transform .6s; } } /*** Borders ***/ @layer borders { .border { --border-width: 1px; --border-color: var(--color-text); --border-style: solid; border-width: var(--border-width); border-style: var(--border-style); border-color: var(--border-color); transition: border-color .2s ease; } .border-left { border-left-width: var(--border-width); } .border-right { border-right-width: var(--border-width); } .border-top { border-top-width: var(--border-width); } .border-bottom { border-bottom-width: var(--border-width); } .border-dotted { --border-style: dotted; } .border-dashed { --border-style: dashed; } .border-2 { --border-width: 2px; } .border-3 { --border-width: 3px; } .border-4 { --border-width: 4px; } .border-5 { --border-width: 5px; } .border-primary { --border-color: var(--color-primary); } .border-primary-light { --border-color: var(--color-primary-light); } .border-secondary { --border-color: var(--color-secondary); } .border-secondary-light { --border-color: var(--color-secondary-light); } .border-white { --border-color: var(--color-white); } .border-bg { --border-color: var(--color-layer-1); } .border-transparent { --border-color: transparent; } } /*** Buttons ***/ @layer buttons { [type=button], [type=reset], [type=submit], button { appearance: button; -webkit-appearance: button; } [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) { cursor: pointer; } button, .btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; border: none; cursor: pointer; line-height: 0.8; font-size: var(--fs-2); font-weight: 600; font-family: var(--font-family-text); height: clamp(2.5rem, 5vw, 3rem); background-color: transparent; color: var(--color-text); transition: background-color .2s ease, color .2s ease; } .btn.inverse { color: var(--color-text-inverse); } .btn.arrow:after { content: ''; display: flex; align-items: center; justify-content: center; height: 0.8rem; width: 0.8rem; margin-left: 0.75rem; background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMi4xNSAyMCI+PGcgaWQ9IkxheWVyXzEtMiI+PHBhdGggZD0iTTMuNDIsMTkuMjlsOC4zMi04LjMyYy41NC0uNTQuNTQtMS40LDAtMS45NEwzLjQyLjcxYy0uOTQtLjk0LTIuNDgtLjk0LTMuNDIsMGgwczQuOTQsNy44Myw0Ljk0LDcuODNjLjU3Ljg5LjU3LDIuMDQsMCwyLjkzTDAsMTkuMjloMGMuOTQuOTQsMi40OC45NCwzLjQyLDBaIiBmaWxsPSIjMzdkM2FlIi8+PC9nPjwvc3ZnPg==") no-repeat center / contain; transition: transform .2s ease; } .btn.arrow:hover:after { transform: translateX(0.25rem); } .bg-primary .btn:hover, .bg-primary button:hover { color: var(--color-white) } button svg { width: 1rem; height: 1rem; } .btn-solid { padding-inline: var(--space-6); position: relative; font-size: var(--fs-1); color: var(--color-white); border-radius: var(--space-1); background-color: var(--color-primary); } .btn-solid.arrow:after { background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAxMyAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzczXzIyKSI+CjxwYXRoIGQ9Ik0zLjQyIDE5LjI4OTlMMTEuNzQgMTAuOTY5OUMxMi4yOCAxMC40Mjk5IDEyLjI4IDkuNTY5ODggMTEuNzQgOS4wMjk4OEwzLjQyIDAuNzA5ODgzQzIuNDggLTAuMjMwMTE3IDAuOTQgLTAuMjMwMTE3IDAgMC43MDk4ODNMNC45NCA4LjUzOTg4QzUuNTEgOS40Mjk4OCA1LjUxIDEwLjU3OTkgNC45NCAxMS40Njk5TDAgMTkuMjg5OUMwLjk0IDIwLjIyOTkgMi40OCAyMC4yMjk5IDMuNDIgMTkuMjg5OVoiIGZpbGw9IndoaXRlIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfNzNfMjIiPgo8cmVjdCB3aWR0aD0iMTIuMTUiIGhlaWdodD0iMjAiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==") no-repeat center / contain; } .btn-solid.inverse { color: var(--color-text); background-color: var(--color-layer-1); } .btn-solid.inverse:hover { color: var(--color-text); } /* this is just to animate the shadow on the button */ .btn-solid:before { content: ''; position: absolute; z-index: -1; width: 100%; height: 100%; left: 0; top: 0; border-radius: var(--space-1); box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px; opacity: 0; transition: opacity 0.2s ease; } .btn-solid:hover { background-color: var(--color-primary-medium); } .btn-solid:hover:before { opacity: 1; } .btn-solid svg path { fill: var(--color-white); } .btn-hollow { padding: 0 1.5rem; position: relative; font-size: var(--fs-2); color: var(--color-primary); border-radius: var(--space-1); background-color: transparent; border: 1px solid var(--color-primary); transition: background-color 0.2s ease, color 0.2s ease; } .btn-hollow:hover { background-color: var(--color-primary); color: var(--color-white); } .btn-hollow.inverse { color: var(--color-text); border-color: var(--color-text); } .btn-hollow.inverse:hover { background-color: var(--color-text); color: var(--color-white); } .btn-hollow svg path { fill: var(--color-primary); } .btn-hollow:hover svg path { fill: var(--color-white); } .btn-ghost { padding: 0 1.5rem; position: relative; font-size: var(--fs-2); color: var(--color-text); background-color: var(--color-ghost); } .btn-ghost:hover, .btn-ghost:focus { color: var(--color-primary); } .btn-icon { padding: 0; aspect-ratio: 1; position: relative; display: flex; align-items: center; justify-content: center; min-height: 2rem; min-width: 2rem; border-radius: var(--space-1); background-color: var(--color-ghost); transition: background-color 0.2s ease; } .btn-icon svg { width: 1.5rem; height: 1.5rem; } .btn-icon svg path { fill: var(--color-text); opacity: 0.4; transition: opacity 0.2s ease; } .btn-icon:hover svg path { opacity: 1; } .btn-icon.active svg path { fill: var(--color-primary); opacity: 1; } .btn-icon.active, .btn-icon:hover { background-color: var(--color-layer-2); } .btn.back { padding-left: 1.5rem; } .btn.back:after { position: absolute; left: 0; margin-left: 0; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAxMyAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguNzI1MDIgMC43MDQ3NDRMMC40MDUwMiA5LjAyNDc1Qy0wLjEzNDk4IDkuNTY0NzUgLTAuMTM0OTggMTAuNDI0NyAwLjQwNTAyIDEwLjk2NDdMOC43MjUwMiAxOS4yODQ3QzkuNjY1MDIgMjAuMjI0NyAxMS4yMDUgMjAuMjI0NyAxMi4xNDUgMTkuMjg0N0w3LjIwNTAyIDExLjQ1NDdDNi42MzUwMiAxMC41NjQ3IDYuNjM1MDIgOS40MTQ3NSA3LjIwNTAyIDguNTI0NzVMMTIuMTQ1IDAuNzA0NzQ0QzExLjIwNSAtMC4yMzUyNTYgOS42NjUwMiAtMC4yMzUyNTYgOC43MjUwMiAwLjcwNDc0NFoiIGZpbGw9IiMzN0QzQUUiLz4KPC9zdmc+Cg=="); } .btn.back:hover:after { transform: translateX(-5px); } .btn-mini { font-size: var(--fs-1); height: clamp(2rem, 5vw, 2.5rem); padding-inline: var(--space-4); } input[type=text].input-mini { font-size: var(--fs-1); height: clamp(2rem, 5vw, 2.5rem); } form input.input-mini::placeholder { font-size: var(--fs-1); } form input.input-mini:-ms-input-placeholder { font-size: var(--fs-1); } form input.input-mini::-ms-input-placeholder { font-size: var(--fs-1); } /* Switch */ input.switch { --bg-off: var(--color-layer-1); --bg-on: var(--color-primary-medium); --knob-off: #000; --knob-on: #000; max-width: 2.5rem; --s: 1.25rem; margin: 0; height: calc(var(--s) + var(--s)/5); width: auto; /* some browsers need this */ aspect-ratio: 2.25; border-radius: var(--s); display: grid; cursor: pointer; background-color: var(--bg-off); border: 1px solid var(--knob-off); box-sizing: content-box; overflow: hidden; transition: .3s .1s; -webkit-appearance: none; -moz-appearance: none; appearance: none; } input.switch:before { content: ""; /* Adds padding around the switch knob */ padding: calc(var(--s)/10); /* Creates a radial gradient for the switch knob */ --_g: radial-gradient(circle closest-side at calc(100% - var(--s)/2) 50%, var(--knob-off) 96%, #0000); /* Applies multiple background layers: 1. The gradient at the start position 2. The gradient at the end position 3. White background base */ background: var(--_g) 0 /var(--_p, var(--s)) 100% no-repeat content-box, var(--_g) var(--_p, 0)/var(--s) 100% no-repeat content-box, #0000; /* Blends the gradients with the background mix-blend-mode: darken; */ /* Animates the switch movement: - General transition of 0.4s - Background position changes after 0.1s - Padding changes with custom timing function */ transition: .4s, background-position .4s .1s, padding cubic-bezier(0, calc(var(--_i, -1)*200), 1, calc(var(--_i, -1)*200)) .25s .1s; } input.switch:checked { background-color: var(--bg-on); border-color: var(--bg-on); } input.switch:checked:before { --_g: radial-gradient(circle closest-side at calc(100% - var(--s)/2) 50%, var(--knob-on) 96%, #0000); } input.switch:checked:before { padding: calc(var(--s)/10 + .05px) calc(var(--s)/10); --_p: 100%; --_i: 1; } /* Buttons to skip to content for accessibility */ .skip-to-main-content-link { position: absolute; left: -9999px; z-index: 99999; padding: 0 1.5rem; font-size: 1rem; height: 5rem; display: flex; align-items: center; background-color: black; color: white; opacity: 0; visibility: visible; } .skip-to-main-content-link:focus { left: 0; opacity: 1; } @media (min-width: 36rem) { button, .btn { width: auto; } } } /*** Form elements ***/ @layer forms { .label, label { font-size: var(--fs-2); } form label { display: inline-block; } input[type="text"], input[type="email"], input[type="tel"], textarea, select { display: block; width: 100%; min-height: 2.5rem; padding: 0 1rem; font-size: var(--fs-2); font-weight: 400; font-family: var(--font-family-text); line-height: 1.5; color: var(--color-text); -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--color-layer-2); background-clip: padding-box; border: none; border-radius: var(--space-1); transition: background-color .2s ease, color .2s ease; } input[type="text"], input[type="email"], input[type="tel"] { height: clamp(2.5rem, 5vw, 3rem); } textarea { height: clamp(10rem, 5vw, 20rem); padding: 0.75rem 1rem; } input[type="text"]::placeholder, input[type="email"]::placeholder, input[type="tel"]::placeholder, textarea::placeholder { color: var(--color-text); opacity: 0.5; font-size: var(--fs-2); font-family: var(--font-family-text); transition: color .2s ease; } input[type="text"]:-ms-input-placeholder, input[type="email"]:-ms-input-placeholder, input[type="tel"]:-ms-input-placeholder, textarea:-ms-input-placeholder { color: var(--color-text); opacity: 0.5; font-size: var(--fs-2); font-family: var(--font-family-text); transition: color .2s ease; } input[type="text"]::-ms-input-placeholder, input[type="email"]::-ms-input-placeholder, input[type="tel"]::-ms-input-placeholder, textarea::-ms-input-placeholder { color: var(--color-text); opacity: 0.5; font-size: var(--fs-2); font-family: var(--font-family-text); transition: color .2s ease; } .wpcf7 form .wpcf7-response-output { padding: 0.5rem 1.5rem !important; border-radius: var(--space-2); margin-inline: 0; } input[type="submit"] { display: inline-flex; align-items: center; width: auto; border: none; cursor: pointer; line-height: 0.8; font-size: var(--fs-2); font-weight: 500; font-family: var(--font-family-text); height: 2.5rem; background-color: var(--color-primary); color: var(--color-white); padding: 0 1.5rem; border-radius: var(--space-1); transition: background-color .2s ease, color .2s ease; } .form-check { display: flex; align-items: center; margin-bottom: 0.25rem; } input[type="radio"] { /* Add if not using autoprefixer */ -webkit-appearance: none; /* Remove most all native input styles */ appearance: none; /* For iOS < 15 */ background-color: var(--color-layer-2); /* Not removed via appearance */ margin-right: 0.75rem; font: inherit; color: var(--color-primary); width: 1rem; height: 1rem; border: 2px solid var(--color-text); border-radius: 50%; display: inline-grid; place-content: center; transition: border-color 120ms ease-in-out; } input[type="radio"]::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; transform: scale(0); transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em var(--color-primary); } input[type="radio"]:checked { border-color: var(--color-primary); } input[type="radio"]:checked::before { transform: scale(1); } input[type="radio"]:focus { outline: 2px solid currentColor; outline-offset: 2px; } select { height: clamp(2.5rem, 5vw, 3rem); } } /*** Aspect ratios **/ @layer ratios { .ratio-1x1 { aspect-ratio: 1 / 1; } .ratio-4x3 { aspect-ratio: 4 / 3; } .ratio-3x2 { aspect-ratio: 3 / 2; } .ratio-16x9 { aspect-ratio: 16 / 9; } .ratio-3x4 { aspect-ratio: 3 / 4; } .ratio-2x3 { aspect-ratio: 2 / 3; } .ratio-9x16 { aspect-ratio: 9 / 16; } @media (min-width: 36rem) { .ratio-1x1--sm { aspect-ratio: 1 / 1; } .ratio-4x3--sm { aspect-ratio: 4 / 3; } .ratio-3x2--sm { aspect-ratio: 3 / 2; } .ratio-16x9--sm { aspect-ratio: 16 / 9; } .ratio-3x4--sm { aspect-ratio: 3 / 4; } .ratio-2x3--sm { aspect-ratio: 2 / 3; } .ratio-9x16--sm { aspect-ratio: 9 / 16; } } @media (min-width: 48rem) { .ratio-1x1--md { aspect-ratio: 1 / 1; } .ratio-4x3--md { aspect-ratio: 4 / 3; } .ratio-3x2--md { aspect-ratio: 3 / 2; } .ratio-16x9--md { aspect-ratio: 16 / 9; } .ratio-3x4--md { aspect-ratio: 3 / 4; } .ratio-2x3--md { aspect-ratio: 2 / 3; } .ratio-9x16--md { aspect-ratio: 9 / 16; } } @media (min-width: 62rem) { .ratio-1x1--lg { aspect-ratio: 1 / 1; } .ratio-4x3--lg { aspect-ratio: 4 / 3; } .ratio-3x2--lg { aspect-ratio: 3 / 2; } .ratio-16x9--lg { aspect-ratio: 16 / 9; } .ratio-3x4--lg { aspect-ratio: 3 / 4; } .ratio-2x3--lg { aspect-ratio: 2 / 3; } .ratio-9x16--lg { aspect-ratio: 9 / 16; } } } /*** Containers, grids, rows, columns ***/ @media (min-width: 0rem) { .container, .container--sm, .container--md, .container--lg, .container--xl { --container-max-width: 100%; --gap: var(--space-8); width: min(var(--container-max-width), 100%); margin-inline: auto; display: flex; flex-direction: column; gap: var(--gap); } .grid { --gap: var(--space-6); --min-column-size: 15rem; display: grid; grid-gap: var(--gap); } .grid-auto { grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size), 100%), 1fr)); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .grid-12 { --gap: 2.5rem; --min-column-size: 4.375rem; grid-template-columns: repeat(12, 1fr); } .grid-12>* { grid-column: span 12; } .grid-uneven-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); } .flexible-grid { --gap: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--gap); } .flexible-grid>* { flex: 1; } .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-10 { grid-column: span 10; } .col-11 { grid-column: span 11; } .row-2 { grid-row: span 2; } .row-3 { grid-row: span 3; } .row-4 { grid-row: span 4; } .row-5 { grid-row: span 5; } .row-6 { grid-row: span 6; } } @media (min-width: 36rem) { .container, .container--sm, .container--md, .container--lg, .container--xl { --container-max-width: 34rem; } .grid-2--sm { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3--sm { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4--sm { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-5--sm { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid-6--sm { grid-template-columns: repeat(6, minmax(0, 1fr)); } .grid-uneven-3--sm { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); } .col-1--sm { grid-column: span 1; } .col-2--sm { grid-column: span 2; } .col-3--sm { grid-column: span 3; } .col-4--sm { grid-column: span 4; } .col-5--sm { grid-column: span 5; } .col-6--sm { grid-column: span 6; } .col-7--sm { grid-column: span 7; } .col-8--sm { grid-column: span 8; } .col-9--sm { grid-column: span 9; } .col-10--sm { grid-column: span 10; } .col-11--sm { grid-column: span 11; } .row-2--sm { grid-row: span 2; } .row-3--sm { grid-row: span 3; } .row-4--sm { grid-row: span 4; } .row-5--sm { grid-row: span 5; } .row-6--sm { grid-row: span 6; } } @media (min-width: 48rem) { .container, .container--md, .container--lg, .container--xl { --container-max-width: 45rem; } .grid-2--md { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3--md { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4--md { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-5--md { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid-6--md { grid-template-columns: repeat(6, minmax(0, 1fr)); } .grid-uneven-3--md { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); } .col-1--md { grid-column: span 1; } .col-2--md { grid-column: span 2; } .col-3--md { grid-column: span 3; } .col-4--md { grid-column: span 4; } .col-5--md { grid-column: span 5; } .col-6--md { grid-column: span 6; } .col-7--md { grid-column: span 7; } .col-8--md { grid-column: span 8; } .col-9--md { grid-column: span 9; } .col-10--md { grid-column: span 10; } .col-11--md { grid-column: span 11; } .row-2--md { grid-row: span 2; } .row-3--md { grid-row: span 3; } .row-4--md { grid-row: span 4; } .row-5--md { grid-row: span 5; } .row-6--md { grid-row: span 6; } } @media (min-width: 62rem) { .container, .container--lg, .container--xl { --container-max-width: 60rem; } .grid-2--lg { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3--lg { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4--lg { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-5--lg { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid-6--lg { grid-template-columns: repeat(6, minmax(0, 1fr)); } .grid-uneven-3--lg { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); } .col-1--lg { grid-column: span 1; } .col-2--lg { grid-column: span 2; } .col-3--lg { grid-column: span 3; } .col-4--lg { grid-column: span 4; } .col-5--lg { grid-column: span 5; } .col-6--lg { grid-column: span 6; } .col-7--lg { grid-column: span 7; } .col-8--lg { grid-column: span 8; } .col-9--lg { grid-column: span 9; } .col-10--lg { grid-column: span 10; } .col-11--lg { grid-column: span 11; } .row-2--lg { grid-row: span 2; } .row-3--lg { grid-row: span 3; } .row-4--lg { grid-row: span 4; } .row-5--lg { grid-row: span 5; } .row-6--lg { grid-row: span 6; } } @media (min-width: 75rem) { .container, .container--xl { --container-max-width: 70rem; } .grid-2--xl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3--xl { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4--xl { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-5--xl { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid-6--xl { grid-template-columns: repeat(6, minmax(0, 1fr)); } .grid-uneven-3--xl { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); } .order-1--xl { order: 1; } .order-2--xl { order: 2; } .order-3--xl { order: 3; } .order-4--xl { order: 4; } .order-5--xl { order: 5; } .order-6--xl { order: 6; } .col-1--xl { grid-column: span 1; } .col-2--xl { grid-column: span 2; } .col-3--xl { grid-column: span 3; } .col-4--xl { grid-column: span 4; } .col-5--xl { grid-column: span 5; } .col-6--xl { grid-column: span 6; } .col-7--xl { grid-column: span 7; } .col-8--xl { grid-column: span 8; } .col-9--xl { grid-column: span 9; } .col-10--xl { grid-column: span 10; } .col-11--xl { grid-column: span 11; } .row-2--xl { grid-row: span 2; } .row-3--xl { grid-row: span 3; } .row-4--xl { grid-row: span 4; } .row-5--xl { grid-row: span 5; } .row-6--xl { grid-row: span 6; } } @media (min-width: 90rem) { .container, .container--xxl { --container-max-width: 81.25rem; } } } @layer utilities { /* Display, position, alignment, and orders */ @media (min-width: 0rem) { .lightmode-only { display: block; visibility: visible; } .darkmode-only { display: none; visibility: hidden; } .block { display: block; } .flex { --gap: 0; display: flex; gap: var(--gap); } .fixed { position: fixed; } .hide { display: none; } .text-center { text-align: center; } .text-start { text-align: start; } .text-end { text-align: end; } .align-items-start { align-items: flex-start; } .align-items-end { align-items: flex-end; } .align-items-center { align-items: center; } .align-items-between { align-items: space-between; } .justify-content-start { justify-content: start; } .justify-content-end { justify-content: end; } .justify-content-center { justify-content: center; } .justify-content-between { justify-content: space-between; } .flex-column { flex-direction: column; } .flex-fill { flex: 1; } .flex-grow { flex-grow: 1; } .flex-noshrink { flex-shrink: 0; } .flex-wrap { flex-wrap: wrap; } .relative { position: relative; } .absolute { position: absolute; } .overflow-hidden { overflow: hidden; } .overflow-visible { overflow: hidden; } .order-1 { order: 1; } .order-2 { order: 2; } .order-3 { order: 3; } .order-4 { order: 4; } .order-5 { order: 5; } .order-6 { order: 6; } } @media (min-width: 36rem) { .block--sm { display: block; } .flex--sm { --gap: 0; display: flex; gap: var(--gap); } .fixed--sm { position: fixed; } .hide--sm { display: none; } .d-grid--sm { display: grid; } .text-center--sm { text-align: center; } .text-start--sm { text-align: start; } .text-end--sm { text-align: end; } .justify-content-start--sm { justify-content: flex-start; } .justify-content-center--sm { justify-content: center; } .justify-content-end--sm { justify-content: flex-end; } .justify-content-between--sm { justify-content: space-between; } .align-items-end--sm { align-items: flex-end; } .align-items-start--sm { align-items: flex-start; } .align-items-center--sm { align-items: center; } .align-items-between--sm { align-items: space-between; } .relative--sm { position: relative; } .absolute--sm { position: absolute; } .overflow-hidden--sm { overflow: hidden; } .overflow-visible--sm { overflow: hidden; } .order-1--sm { order: 1; } .order-2--sm { order: 2; } .order-3--sm { order: 3; } .order-4--sm { order: 4; } .order-5--sm { order: 5; } .order-6--sm { order: 6; } } @media (min-width: 48rem) { .hide--md { display: none; } .flex--md { --gap: 0; display: flex; gap: var(--gap); } .fixed--md { position: fixed; } .block--md { display: block; } .d-grid--md { display: grid; } .text-center--md { text-align: center; } .text-start--md { text-align: start; } .text-end--md { text-align: end; } .justify-content-start--md { justify-content: flex-start; } .justify-content-end--md { justify-content: flex-end; } .justify-content-center--md { justify-content: center; } .justify-content-between--md { justify-content: space-between; } .align-items-end--md { align-items: flex-end; } .align-items-start--md { align-items: flex-start; } .align-items-center--md { align-items: center; } .align-items-between--md { align-items: space-between; } .relative--md { position: relative; } .absolute--md { position: absolute; } .overflow-hidden--md { overflow: hidden; } .overflow-visible--md { overflow: hidden; } .order-1--md { order: 1; } .order-2--md { order: 2; } .order-3--md { order: 3; } .order-4--md { order: 4; } .order-5--md { order: 5; } .order-6--md { order: 6; } } @media (min-width: 62rem) { .hide--lg { display: none; } .flex--lg { --gap: 0; display: flex; gap: var(--gap); } .fixed--lg { position: fixed; } .block--lg { display: block; } .d-grid--lg { display: grid; } .text-center--lg { text-align: center; } .text-start--lg { text-align: start; } .text-end--lg { text-align: end; } .justify-content-start--lg { justify-content: flex-start; } .justify-content-end--lg { justify-content: flex-end; } .justify-content-center--lg { justify-content: center; } .justify-content-between--lg { justify-content: space-between; } .align-items-end--lg { align-items: flex-end; } .align-items-start--lg { align-items: flex-start; } .align-items-center--lg { align-items: center; } .align-items-between--lg { align-items: space-between; } .relative--lg { position: relative; } .absolute--lg { position: absolute; } .overflow-hidden--lg { overflow: hidden; } .overflow-visible--lg { overflow: hidden; } .order-1--lg { order: 1; } .order-2--lg { order: 2; } .order-3--lg { order: 3; } .order-4--lg { order: 4; } .order-5--lg { order: 5; } .order-6--lg { order: 6; } } @media (min-width: 75rem) { .hide--xl { display: none; } .flex--xl { --gap: 0; display: flex; gap: var(--gap); } .fixed--xl { position: fixed; } .block--xl { display: block; } .d-grid--xl { display: grid; } .text-center--xl { text-align: center; } .text-start--xl { text-align: start; } .text-end--xl { text-align: end; } .justify-content-start--xl { justify-content: flex-start; } .justify-content-end--xl { justify-content: flex-end; } .justify-content-center--xl { justify-content: center; } .justify-content-between--xl { justify-content: space-between; } .align-items-end--xl { align-items: flex-end; } .align-items-start--xl { align-items: flex-start; } .align-items-center--xl { align-items: center; } .align-items-between--xl { align-items: space-between; } .relative--xl { position: relative; } .absolute--xl { position: absolute; } .overflow-hidden--xl { overflow: hidden; } .overflow-visible--xl { overflow: hidden; } .order-1--xl { order: 1; } .order-2--xl { order: 2; } .order-3--xl { order: 3; } .order-4--xl { order: 4; } .order-5--xl { order: 5; } .order-6--xl { order: 6; } } /* Gaps, Paddings, Margins, and Orders */ @media (min-width: 0rem) { .g-0 { --gap: 0; } .g-1 { --gap: var(--space-1); } .g-2 { --gap: var(--space-2); } .g-3 { --gap: var(--space-3); } .g-4 { --gap: var(--space-4); } .g-5 { --gap: var(--space-5); } .g-6 { --gap: var(--space-6); } .g-7 { --gap: var(--space-7); } .g-8 { --gap: var(--space-8); } .g-9 { --gap: var(--space-9); } .g-10 { --gap: var(--space-10); } .p-0 { padding: 0; } .px-0 { padding-inline: 0; } .py-0 { padding-block: 0; } .ps-0 { padding-left: 0; } .pt-0 { padding-top: 0; } .pe-0 { padding-right: 0; } .pb-0 { padding-bottom: 0; } .p-1 { padding: var(--space-1); } .px-1 { padding-inline: var(--space-1); } .py-1 { padding-block: var(--space-1); } .ps-1 { padding-left: var(--space-1); } .pe-1 { padding-right: var(--space-1); } .pt-1 { padding-top: var(--space-1); } .pb-1 { padding-bottom: var(--space-1); } .p-2 { padding: var(--space-2); } .px-2 { padding-inline: var(--space-2); } .py-2 { padding-block: var(--space-2); } .ps-2 { padding-left: var(--space-2); } .pe-2 { padding-right: var(--space-2); } .pt-2 { padding-top: var(--space-2); } .pb-2 { padding-bottom: var(--space-2); } .p-3 { padding: var(--space-3); } .py-3 { padding-block: var(--space-3); } .px-3 { padding-inline: var(--space-3); } .ps-3 { padding-left: var(--space-3); } .pe-3 { padding-right: var(--space-3); } .pb-3 { padding-bottom: var(--space-3); } .pt-3 { padding-top: var(--space-3); } .p-4 { padding: var(--space-4); } .px-4 { padding-inline: var(--space-4); } .py-4 { padding-block: var(--space-4); } .ps-4 { padding-left: var(--space-4); } .pe-4 { padding-right: var(--space-4); } .pt-4 { padding-top: var(--space-4); } .pb-4 { padding-bottom: var(--space-4); } .p-5 { padding: var(--space-5); } .px-5 { padding-inline: var(--space-5); } .py-5 { padding-block: var(--space-5); } .ps-5 { padding-left: var(--space-5); } .pe-5 { padding-right: var(--space-5); } .pt-5 { padding-top: var(--space-5); } .pb-5 { padding-bottom: var(--space-5); } .p-6 { padding: var(--space-6); } .px-6 { padding-inline: var(--space-6); } .py-6 { padding-block: var(--space-6); } .ps-6 { padding-left: var(--space-6); } .pe-6 { padding-right: var(--space-6); } .pt-6 { padding-top: var(--space-6); } .pb-6 { padding-bottom: var(--space-6); } .p-7 { padding: var(--space-7); } .px-7 { padding-inline: var(--space-7); } .py-7 { padding-block: var(--space-7); } .ps-7 { padding-left: var(--space-7); } .pe-7 { padding-right: var(--space-7); } .pt-7 { padding-top: var(--space-7); } .pb-7 { padding-bottom: var(--space-7); } .p-8 { padding: var(--space-8); } .px-8 { padding-inline: var(--space-8); } .py-8 { padding-block: var(--space-8); } .ps-8 { padding-left: var(--space-8); } .pe-8 { padding-right: var(--space-8); } .pt-8 { padding-top: var(--space-8); } .pb-8 { padding-bottom: var(--space-8); } .p-9 { padding: var(--space-9); } .px-9 { padding-inline: var(--space-9); } .py-9 { padding-block: var(--space-9); } .ps-9 { padding-left: var(--space-9); } .pe-9 { padding-right: var(--space-9); } .pt-9 { padding-top: var(--space-9); } .pb-9 { padding-bottom: var(--space-9); } .p-10 { padding: var(--space-10); } .px-10 { padding-inline: var(--space-10); } .py-10 { padding-block: var(--space-10); } .ps-10 { padding-left: var(--space-10); } .pe-10 { padding-right: var(--space-10); } .pt-10 { padding-top: var(--space-10); } .pb-10 { padding-bottom: var(--space-10); } .mx-auto { margin-inline: auto; } .m-0 { margin: 0; } .mx-0 { margin-inline: 0; } .my-0 { margin-block: 0; } .ms-0 { margin-left: 0; } .mt-0 { margin-top: 0; } .me-0 { margin-right: 0; } .mb-0 { margin-bottom: 0; } .m-1 { margin: var(--space-1); } .mx-1 { margin-inline: var(--space-1); } .my-1 { margin-block: var(--space-1); } .ms-1 { margin-left: var(--space-1); } .me-1 { margin-right: var(--space-1); } .mt-1 { margin-top: var(--space-1); } .mb-1 { margin-bottom: var(--space-1); } .m-2 { margin: var(--space-2); } .mx-2 { margin-inline: var(--space-2); } .my-2 { margin-block: var(--space-2); } .ms-2 { margin-left: var(--space-2); } .me-2 { margin-right: var(--space-2); } .mt-2 { margin-top: var(--space-2); } .mb-2 { margin-bottom: var(--space-2); } .m-3 { margin: var(--space-3); } .my-3 { margin-block: var(--space-3); } .mx-3 { margin-inline: var(--space-3); } .ms-3 { margin-left: var(--space-3); } .me-3 { margin-right: var(--space-3); } .mb-3 { margin-bottom: var(--space-3); } .mt-3 { margin-top: var(--space-3); } .m-4 { margin: var(--space-4); } .mx-4 { margin-inline: var(--space-4); } .my-4 { margin-block: var(--space-4); } .ms-4 { margin-left: var(--space-4); } .me-4 { margin-right: var(--space-4); } .mt-4 { margin-top: var(--space-4); } .mb-4 { margin-bottom: var(--space-4); } .m-5 { margin: var(--space-5); } .mx-5 { margin-inline: var(--space-5); } .my-5 { margin-block: var(--space-5); } .ms-5 { margin-left: var(--space-5); } .me-5 { margin-right: var(--space-5); } .mt-5 { margin-top: var(--space-5); } .mb-5 { margin-bottom: var(--space-5); } .m-6 { margin: var(--space-6); } .mx-6 { margin-inline: var(--space-6); } .my-6 { margin-block: var(--space-6); } .ms-6 { margin-left: var(--space-6); } .me-6 { margin-right: var(--space-6); } .mt-6 { margin-top: var(--space-6); } .mb-6 { margin-bottom: var(--space-6); } .m-7 { margin: var(--space-7); } .mx-7 { margin-inline: var(--space-7); } .my-7 { margin-block: var(--space-7); } .ms-7 { margin-left: var(--space-7); } .me-7 { margin-right: var(--space-7); } .mt-7 { margin-top: var(--space-7); } .mb-7 { margin-bottom: var(--space-7); } .m-8 { margin: var(--space-8); } .mx-8 { margin-inline: var(--space-8); } .my-8 { margin-block: var(--space-8); } .ms-8 { margin-left: var(--space-8); } .me-8 { margin-right: var(--space-8); } .mt-8 { margin-top: var(--space-8); } .mb-8 { margin-bottom: var(--space-8); } .m-9 { margin: var(--space-9); } .mx-9 { margin-inline: var(--space-9); } .my-9 { margin-block: var(--space-9); } .ms-9 { margin-left: var(--space-9); } .me-9 { margin-right: var(--space-9); } .mt-9 { margin-top: var(--space-9); } .mb-9 { margin-bottom: var(--space-9); } .m-10 { margin: var(--space-10); } .mx-10 { margin-inline: var(--space-10); } .my-10 { margin-block: var(--space-10); } .ms-10 { margin-left: var(--space-10); } .me-10 { margin-right: var(--space-10); } .mt-10 { margin-top: var(--space-10); } .mb-10 { margin-bottom: var(--space-10); } } @media (min-width: 36rem) { .g-0--sm { --gap: 0; } .g-1--sm { --gap: var(--space-1); } .g-2--sm { --gap: var(--space-2); } .g-3--sm { --gap: var(--space-3); } .g-4--sm { --gap: var(--space-4); } .g-5--sm { --gap: var(--space-5); } .g-6--sm { --gap: var(--space-6); } .g-7--sm { --gap: var(--space-7); } .g-8--sm { --gap: var(--space-8); } .g-9--sm { --gap: var(--space-9); } .g-10--sm { --gap: var(--space-10); } .p-0--sm { padding: 0; } .px-0--sm { padding-inline: 0; } .py-0--sm { padding-block: 0; } .ps-0--sm { padding-left: 0; } .pt-0--sm { padding-top: 0; } .pe-0--sm { padding-right: 0; } .pb-0--sm { padding-bottom: 0; } .p-1--sm { padding: var(--space-1); } .px-1--sm { padding-inline: var(--space-1); } .py-1--sm { padding-block: var(--space-1); } .ps-1--sm { padding-left: var(--space-1); } .pe-1--sm { padding-right: var(--space-1); } .pt-1--sm { padding-top: var(--space-1); } .pb-1--sm { padding-bottom: var(--space-1); } .p-2--sm { padding: var(--space-2); } .px-2--sm { padding-inline: var(--space-2); } .py-2--sm { padding-block: var(--space-2); } .ps-2--sm { padding-left: var(--space-2); } .pe-2--sm { padding-right: var(--space-2); } .pt-2--sm { padding-top: var(--space-2); } .pb-2--sm { padding-bottom: var(--space-2); } .p-3--sm { padding: var(--space-3); } .px-3--sm { padding-inline: var(--space-3); } .py-3--sm { padding-block: var(--space-3); } .ps-3--sm { padding-left: var(--space-3); } .pe-3--sm { padding-right: var(--space-3); } .pt-3--sm { padding-top: var(--space-3); } .pb-3--sm { padding-bottom: var(--space-3); } .p-4--sm { padding: var(--space-4); } .px-4--sm { padding-inline: var(--space-4); } .py-4--sm { padding-block: var(--space-4); } .ps-4--sm { padding-left: var(--space-4); } .pe-4--sm { padding-right: var(--space-4); } .pt-4--sm { padding-top: var(--space-4); } .pb-4--sm { padding-bottom: var(--space-4); } .p-5--sm { padding: var(--space-5); } .px-5--sm { padding-inline: var(--space-5); } .py-5--sm { padding-block: var(--space-5); } .ps-5--sm { padding-left: var(--space-5); } .pe-5--sm { padding-right: var(--space-5); } .pt-5--sm { padding-top: var(--space-5); } .pb-5--sm { padding-bottom: var(--space-5); } .p-6--sm { padding: var(--space-6); } .px-6--sm { padding-inline: var(--space-6); } .py-6--sm { padding-block: var(--space-6); } .ps-6--sm { padding-left: var(--space-6); } .pe-6--sm { padding-right: var(--space-6); } .pt-6--sm { padding-top: var(--space-6); } .pb-6--sm { padding-bottom: var(--space-6); } .p-7--sm { padding: var(--space-7); } .px-7--sm { padding-inline: var(--space-7); } .py-7--sm { padding-block: var(--space-7); } .ps-7--sm { padding-left: var(--space-7); } .pe-7--sm { padding-right: var(--space-7); } .pt-7--sm { padding-top: var(--space-7); } .pb-7--sm { padding-bottom: var(--space-7); } .p-8--sm { padding: var(--space-8); } .px-8--sm { padding-inline: var(--space-8); } .py-8--sm { padding-block: var(--space-8); } .ps-8--sm { padding-left: var(--space-8); } .pe-8--sm { padding-right: var(--space-8); } .pt-8--sm { padding-top: var(--space-8); } .pb-8--sm { padding-bottom: var(--space-8); } .p-9--sm { padding: var(--space-9); } .px-9--sm { padding-inline: var(--space-9); } .py-9--sm { padding-block: var(--space-9); } .ps-9--sm { padding-left: var(--space-9); } .pe-9--sm { padding-right: var(--space-9); } .pt-9--sm { padding-top: var(--space-9); } .pb-9--sm { padding-bottom: var(--space-9); } .p-10--sm { padding: var(--space-10); } .px-10--sm { padding-inline: var(--space-10); } .py-10--sm { padding-block: var(--space-10); } .ps-10--sm { padding-left: var(--space-10); } .pe-10--sm { padding-right: var(--space-10); } .pt-10--sm { padding-top: var(--space-10); } .pb-10--sm { padding-bottom: var(--space-10); } .mx-auto--sm { margin-inline: auto; } .m-0--sm { margin: 0; } .mx-0--sm { margin-inline: 0; } .my-0--sm { margin-block: 0; } .ms-0--sm { margin-left: 0; } .mt-0--sm { margin-top: 0; } .me-0--sm { margin-right: 0; } .mb-0--sm { margin-bottom: 0; } .m-1--sm { margin: var(--space-1); } .mx-1--sm { margin-inline: var(--space-1); } .my-1--sm { margin-block: var(--space-1); } .ms-1--sm { margin-left: var(--space-1); } .me-1--sm { margin-right: var(--space-1); } .mt-1--sm { margin-top: var(--space-1); } .mb-1--sm { margin-bottom: var(--space-1); } .m-2--sm { margin: var(--space-2); } .mx-2--sm { margin-inline: var(--space-2); } .my-2--sm { margin-block: var(--space-2); } .ms-2--sm { margin-left: var(--space-2); } .me-2--sm { margin-right: var(--space-2); } .mt-2--sm { margin-top: var(--space-2); } .mb-2--sm { margin-bottom: var(--space-2); } .m-3--sm { margin: var(--space-3); } .mx-3--sm { margin-inline: var(--space-3); } .my-3--sm { margin-block: var(--space-3); } .ms-3--sm { margin-left: var(--space-3); } .me-3--sm { margin-right: var(--space-3); } .mt-3--sm { margin-top: var(--space-3); } .mb-3--sm { margin-bottom: var(--space-3); } .m-4--sm { margin: var(--space-4); } .mx-4--sm { margin-inline: var(--space-4); } .my-4--sm { margin-block: var(--space-4); } .ms-4--sm { margin-left: var(--space-4); } .me-4--sm { margin-right: var(--space-4); } .mt-4--sm { margin-top: var(--space-4); } .mb-4--sm { margin-bottom: var(--space-4); } .m-5--sm { margin: var(--space-5); } .mx-5--sm { margin-inline: var(--space-5); } .my-5--sm { margin-block: var(--space-5); } .ms-5--sm { margin-left: var(--space-5); } .me-5--sm { margin-right: var(--space-5); } .mt-5--sm { margin-top: var(--space-5); } .mb-5--sm { margin-bottom: var(--space-5); } .m-6--sm { margin: var(--space-6); } .mx-6--sm { margin-inline: var(--space-6); } .my-6--sm { margin-block: var(--space-6); } .ms-6--sm { margin-left: var(--space-6); } .me-6--sm { margin-right: var(--space-6); } .mt-6--sm { margin-top: var(--space-6); } .mb-6--sm { margin-bottom: var(--space-6); } .m-7--sm { margin: var(--space-7); } .mx-7--sm { margin-inline: var(--space-7); } .my-7--sm { margin-block: var(--space-7); } .ms-7--sm { margin-left: var(--space-7); } .me-7--sm { margin-right: var(--space-7); } .mt-7--sm { margin-top: var(--space-7); } .mb-7--sm { margin-bottom: var(--space-7); } .m-8--sm { margin: var(--space-8); } .mx-8--sm { margin-inline: var(--space-8); } .my-8--sm { margin-block: var(--space-8); } .ms-8--sm { margin-left: var(--space-8); } .me-8--sm { margin-right: var(--space-8); } .mt-8--sm { margin-top: var(--space-8); } .mb-8--sm { margin-bottom: var(--space-8); } .m-9--sm { margin: var(--space-9); } .mx-9--sm { margin-inline: var(--space-9); } .my-9--sm { margin-block: var(--space-9); } .ms-9--sm { margin-left: var(--space-9); } .me-9--sm { margin-right: var(--space-9); } .mt-9--sm { margin-top: var(--space-9); } .mb-9--sm { margin-bottom: var(--space-9); } .m-10--sm { margin: var(--space-10); } .mx-10--sm { margin-inline: var(--space-10); } .my-10--sm { margin-block: var(--space-10); } .ms-10--sm { margin-left: var(--space-10); } .me-10--sm { margin-right: var(--space-10); } .mt-10--sm { margin-top: var(--space-10); } .mb-10--sm { margin-bottom: var(--space-10); } } @media (min-width: 48rem) { .g-0--md { --gap: 0; } .g-1--md { --gap: var(--space-1); } .g-2--md { --gap: var(--space-2); } .g-3--md { --gap: var(--space-3); } .g-4--md { --gap: var(--space-4); } .g-5--md { --gap: var(--space-5); } .g-6--md { --gap: var(--space-6); } .g-7--md { --gap: var(--space-7); } .g-8--md { --gap: var(--space-8); } .g-9--md { --gap: var(--space-9); } .g-10--md { --gap: var(--space-10); } .p-0--md { padding: 0; } .px-0--md { padding-inline: 0; } .py-0--md { padding-block: 0; } .ps-0--md { padding-left: 0; } .pt-0--md { padding-top: 0; } .pe-0--md { padding-right: 0; } .pb-0--md { padding-bottom: 0; } .p-1--md { padding: var(--space-1); } .px-1--md { padding-inline: var(--space-1); } .py-1--md { padding-block: var(--space-1); } .ps-1--md { padding-left: var(--space-1); } .pe-1--md { padding-right: var(--space-1); } .pt-1--md { padding-top: var(--space-1); } .pb-1--md { padding-bottom: var(--space-1); } .p-2--md { padding: var(--space-2); } .px-2--md { padding-inline: var(--space-2); } .py-2--md { padding-block: var(--space-2); } .ps-2--md { padding-left: var(--space-2); } .pe-2--md { padding-right: var(--space-2); } .pt-2--md { padding-top: var(--space-2); } .pb-2--md { padding-bottom: var(--space-2); } .p-3--md { padding: var(--space-3); } .px-3--md { padding-inline: var(--space-3); } .py-3--md { padding-block: var(--space-3); } .ps-3--md { padding-left: var(--space-3); } .pe-3--md { padding-right: var(--space-3); } .pt-3--md { padding-top: var(--space-3); } .pb-3--md { padding-bottom: var(--space-3); } .p-4--md { padding: var(--space-4); } .px-4--md { padding-inline: var(--space-4); } .py-4--md { padding-block: var(--space-4); } .ps-4--md { padding-left: var(--space-4); } .pe-4--md { padding-right: var(--space-4); } .pt-4--md { padding-top: var(--space-4); } .pb-4--md { padding-bottom: var(--space-4); } .p-5--md { padding: var(--space-5); } .px-5--md { padding-inline: var(--space-5); } .py-5--md { padding-block: var(--space-5); } .ps-5--md { padding-left: var(--space-5); } .pe-5--md { padding-right: var(--space-5); } .pt-5--md { padding-top: var(--space-5); } .pb-5--md { padding-bottom: var(--space-5); } .p-6--md { padding: var(--space-6); } .px-6--md { padding-inline: var(--space-6); } .py-6--md { padding-block: var(--space-6); } .ps-6--md { padding-left: var(--space-6); } .pe-6--md { padding-right: var(--space-6); } .pt-6--md { padding-top: var(--space-6); } .pb-6--md { padding-bottom: var(--space-6); } .p-7--md { padding: var(--space-7); } .px-7--md { padding-inline: var(--space-7); } .py-7--md { padding-block: var(--space-7); } .ps-7--md { padding-left: var(--space-7); } .pe-7--md { padding-right: var(--space-7); } .pt-7--md { padding-top: var(--space-7); } .pb-7--md { padding-bottom: var(--space-7); } .p-8--md { padding: var(--space-8); } .px-8--md { padding-inline: var(--space-8); } .py-8--md { padding-block: var(--space-8); } .ps-8--md { padding-left: var(--space-8); } .pe-8--md { padding-right: var(--space-8); } .pt-8--md { padding-top: var(--space-8); } .pb-8--md { padding-bottom: var(--space-8); } .p-9--md { padding: var(--space-9); } .px-9--md { padding-inline: var(--space-9); } .py-9--md { padding-block: var(--space-9); } .ps-9--md { padding-left: var(--space-9); } .pe-9--md { padding-right: var(--space-9); } .pt-9--md { padding-top: var(--space-9); } .pb-9--md { padding-bottom: var(--space-9); } .p-10--md { padding: var(--space-10); } .px-10--md { padding-inline: var(--space-10); } .py-10--md { padding-block: var(--space-10); } .ps-10--md { padding-left: var(--space-10); } .pe-10--md { padding-right: var(--space-10); } .pt-10--md { padding-top: var(--space-10); } .pb-10--md { padding-bottom: var(--space-10); } .mx-auto--md { margin-inline: auto; } .m-0--md { margin: 0; } .mx-0--md { margin-inline: 0; } .my-0--md { margin-block: 0; } .ms-0--md { margin-left: 0; } .mt-0--md { margin-top: 0; } .me-0--md { margin-right: 0; } .mb-0--md { margin-bottom: 0; } .m-1--md { margin: var(--space-1); } .mx-1--md { margin-inline: var(--space-1); } .my-1--md { margin-block: var(--space-1); } .ms-1--md { margin-left: var(--space-1); } .me-1--md { margin-right: var(--space-1); } .mt-1--md { margin-top: var(--space-1); } .mb-1--md { margin-bottom: var(--space-1); } .m-2--md { margin: var(--space-2); } .mx-2--md { margin-inline: var(--space-2); } .my-2--md { margin-block: var(--space-2); } .ms-2--md { margin-left: var(--space-2); } .me-2--md { margin-right: var(--space-2); } .mt-2--md { margin-top: var(--space-2); } .mb-2--md { margin-bottom: var(--space-2); } .m-3--md { margin: var(--space-3); } .mx-3--md { margin-inline: var(--space-3); } .my-3--md { margin-block: var(--space-3); } .ms-3--md { margin-left: var(--space-3); } .me-3--md { margin-right: var(--space-3); } .mt-3--md { margin-top: var(--space-3); } .mb-3--md { margin-bottom: var(--space-3); } .m-4--md { margin: var(--space-4); } .mx-4--md { margin-inline: var(--space-4); } .my-4--md { margin-block: var(--space-4); } .ms-4--md { margin-left: var(--space-4); } .me-4--md { margin-right: var(--space-4); } .mt-4--md { margin-top: var(--space-4); } .mb-4--md { margin-bottom: var(--space-4); } .m-5--md { margin: var(--space-5); } .mx-5--md { margin-inline: var(--space-5); } .my-5--md { margin-block: var(--space-5); } .ms-5--md { margin-left: var(--space-5); } .me-5--md { margin-right: var(--space-5); } .mt-5--md { margin-top: var(--space-5); } .mb-5--md { margin-bottom: var(--space-5); } .m-6--md { margin: var(--space-6); } .mx-6--md { margin-inline: var(--space-6); } .my-6--md { margin-block: var(--space-6); } .ms-6--md { margin-left: var(--space-6); } .me-6--md { margin-right: var(--space-6); } .mt-6--md { margin-top: var(--space-6); } .mb-6--md { margin-bottom: var(--space-6); } .m-7--md { margin: var(--space-7); } .mx-7--md { margin-inline: var(--space-7); } .my-7--md { margin-block: var(--space-7); } .ms-7--md { margin-left: var(--space-7); } .me-7--md { margin-right: var(--space-7); } .mt-7--md { margin-top: var(--space-7); } .mb-7--md { margin-bottom: var(--space-7); } .m-8--md { margin: var(--space-8); } .mx-8--md { margin-inline: var(--space-8); } .my-8--md { margin-block: var(--space-8); } .ms-8--md { margin-left: var(--space-8); } .me-8--md { margin-right: var(--space-8); } .mt-8--md { margin-top: var(--space-8); } .mb-8--md { margin-bottom: var(--space-8); } .m-9--md { margin: var(--space-9); } .mx-9--md { margin-inline: var(--space-9); } .my-9--md { margin-block: var(--space-9); } .ms-9--md { margin-left: var(--space-9); } .me-9--md { margin-right: var(--space-9); } .mt-9--md { margin-top: var(--space-9); } .mb-9--md { margin-bottom: var(--space-9); } .m-10--md { margin: var(--space-10); } .mx-10--md { margin-inline: var(--space-10); } .my-10--md { margin-block: var(--space-10); } .ms-10--md { margin-left: var(--space-10); } .me-10--md { margin-right: var(--space-10); } .mt-10--md { margin-top: var(--space-10); } .mb-10--md { margin-bottom: var(--space-10); } } @media (min-width: 62rem) { .g-0--lg { --gap: 0; } .g-1--lg { --gap: var(--space-1); } .g-2--lg { --gap: var(--space-2); } .g-3--lg { --gap: var(--space-3); } .g-4--lg { --gap: var(--space-4); } .g-5--lg { --gap: var(--space-5); } .g-6--lg { --gap: var(--space-6); } .g-7--lg { --gap: var(--space-7); } .g-8--lg { --gap: var(--space-8); } .g-9--lg { --gap: var(--space-9); } .g-10--lg { --gap: var(--space-10); } .p-0--lg { padding: 0; } .px-0--lg { padding-inline: 0; } .py-0--lg { padding-block: 0; } .ps-0--lg { padding-left: 0; } .pt-0--lg { padding-top: 0; } .pe-0--lg { padding-right: 0; } .pb-0--lg { padding-bottom: 0; } .p-1--lg { padding: var(--space-1); } .px-1--lg { padding-inline: var(--space-1); } .py-1--lg { padding-block: var(--space-1); } .ps-1--lg { padding-left: var(--space-1); } .pe-1--lg { padding-right: var(--space-1); } .pt-1--lg { padding-top: var(--space-1); } .pb-1--lg { padding-bottom: var(--space-1); } .p-2--lg { padding: var(--space-2); } .px-2--lg { padding-inline: var(--space-2); } .py-2--lg { padding-block: var(--space-2); } .ps-2--lg { padding-left: var(--space-2); } .pe-2--lg { padding-right: var(--space-2); } .pt-2--lg { padding-top: var(--space-2); } .pb-2--lg { padding-bottom: var(--space-2); } .p-3--lg { padding: var(--space-3); } .px-3--lg { padding-inline: var(--space-3); } .py-3--lg { padding-block: var(--space-3); } .ps-3--lg { padding-left: var(--space-3); } .pe-3--lg { padding-right: var(--space-3); } .pt-3--lg { padding-top: var(--space-3); } .pb-3--lg { padding-bottom: var(--space-3); } .p-4--lg { padding: var(--space-4); } .px-4--lg { padding-inline: var(--space-4); } .py-4--lg { padding-block: var(--space-4); } .ps-4--lg { padding-left: var(--space-4); } .pe-4--lg { padding-right: var(--space-4); } .pt-4--lg { padding-top: var(--space-4); } .pb-4--lg { padding-bottom: var(--space-4); } .p-5--lg { padding: var(--space-5); } .px-5--lg { padding-inline: var(--space-5); } .py-5--lg { padding-block: var(--space-5); } .ps-5--lg { padding-left: var(--space-5); } .pe-5--lg { padding-right: var(--space-5); } .pt-5--lg { padding-top: var(--space-5); } .pb-5--lg { padding-bottom: var(--space-5); } .p-6--lg { padding: var(--space-6); } .px-6--lg { padding-inline: var(--space-6); } .py-6--lg { padding-block: var(--space-6); } .ps-6--lg { padding-left: var(--space-6); } .pe-6--lg { padding-right: var(--space-6); } .pt-6--lg { padding-top: var(--space-6); } .pb-6--lg { padding-bottom: var(--space-6); } .p-7--lg { padding: var(--space-7); } .px-7--lg { padding-inline: var(--space-7); } .py-7--lg { padding-block: var(--space-7); } .ps-7--lg { padding-left: var(--space-7); } .pe-7--lg { padding-right: var(--space-7); } .pt-7--lg { padding-top: var(--space-7); } .pb-7--lg { padding-bottom: var(--space-7); } .p-8--lg { padding: var(--space-8); } .px-8--lg { padding-inline: var(--space-8); } .py-8--lg { padding-block: var(--space-8); } .ps-8--lg { padding-left: var(--space-8); } .pe-8--lg { padding-right: var(--space-8); } .pt-8--lg { padding-top: var(--space-8); } .pb-8--lg { padding-bottom: var(--space-8); } .p-9--lg { padding: var(--space-9); } .px-9--lg { padding-inline: var(--space-9); } .py-9--lg { padding-block: var(--space-9); } .ps-9--lg { padding-left: var(--space-9); } .pe-9--lg { padding-right: var(--space-9); } .pt-9--lg { padding-top: var(--space-9); } .pb-9--lg { padding-bottom: var(--space-9); } .p-10--lg { padding: var(--space-10); } .px-10--lg { padding-inline: var(--space-10); } .py-10--lg { padding-block: var(--space-10); } .ps-10--lg { padding-left: var(--space-10); } .pe-10--lg { padding-right: var(--space-10); } .pt-10--lg { padding-top: var(--space-10); } .pb-10--lg { padding-bottom: var(--space-10); } .mx-auto--lg { margin-inline: auto; } .m-0--lg { margin: 0; } .mx-0--lg { margin-inline: 0; } .my-0--lg { margin-block: 0; } .ms-0--lg { margin-left: 0; } .mt-0--lg { margin-top: 0; } .me-0--lg { margin-right: 0; } .mb-0--lg { margin-bottom: 0; } .m-1--lg { margin: var(--space-1); } .mx-1--lg { margin-inline: var(--space-1); } .my-1--lg { margin-block: var(--space-1); } .ms-1--lg { margin-left: var(--space-1); } .me-1--lg { margin-right: var(--space-1); } .mt-1--lg { margin-top: var(--space-1); } .mb-1--lg { margin-bottom: var(--space-1); } .m-2--lg { margin: var(--space-2); } .mx-2--lg { margin-inline: var(--space-2); } .my-2--lg { margin-block: var(--space-2); } .ms-2--lg { margin-left: var(--space-2); } .me-2--lg { margin-right: var(--space-2); } .mt-2--lg { margin-top: var(--space-2); } .mb-2--lg { margin-bottom: var(--space-2); } .m-3--lg { margin: var(--space-3); } .mx-3--lg { margin-inline: var(--space-3); } .my-3--lg { margin-block: var(--space-3); } .ms-3--lg { margin-left: var(--space-3); } .me-3--lg { margin-right: var(--space-3); } .mt-3--lg { margin-top: var(--space-3); } .mb-3--lg { margin-bottom: var(--space-3); } .m-4--lg { margin: var(--space-4); } .mx-4--lg { margin-inline: var(--space-4); } .my-4--lg { margin-block: var(--space-4); } .ms-4--lg { margin-left: var(--space-4); } .me-4--lg { margin-right: var(--space-4); } .mt-4--lg { margin-top: var(--space-4); } .mb-4--lg { margin-bottom: var(--space-4); } .m-5--lg { margin: var(--space-5); } .mx-5--lg { margin-inline: var(--space-5); } .my-5--lg { margin-block: var(--space-5); } .ms-5--lg { margin-left: var(--space-5); } .me-5--lg { margin-right: var(--space-5); } .mt-5--lg { margin-top: var(--space-5); } .mb-5--lg { margin-bottom: var(--space-5); } .m-6--lg { margin: var(--space-6); } .mx-6--lg { margin-inline: var(--space-6); } .my-6--lg { margin-block: var(--space-6); } .ms-6--lg { margin-left: var(--space-6); } .me-6--lg { margin-right: var(--space-6); } .mt-6--lg { margin-top: var(--space-6); } .mb-6--lg { margin-bottom: var(--space-6); } .m-7--lg { margin: var(--space-7); } .mx-7--lg { margin-inline: var(--space-7); } .my-7--lg { margin-block: var(--space-7); } .ms-7--lg { margin-left: var(--space-7); } .me-7--lg { margin-right: var(--space-7); } .mt-7--lg { margin-top: var(--space-7); } .mb-7--lg { margin-bottom: var(--space-7); } .m-8--lg { margin: var(--space-8); } .mx-8--lg { margin-inline: var(--space-8); } .my-8--lg { margin-block: var(--space-8); } .ms-8--lg { margin-left: var(--space-8); } .me-8--lg { margin-right: var(--space-8); } .mt-8--lg { margin-top: var(--space-8); } .mb-8--lg { margin-bottom: var(--space-8); } .m-9--lg { margin: var(--space-9); } .mx-9--lg { margin-inline: var(--space-9); } .my-9--lg { margin-block: var(--space-9); } .ms-9--lg { margin-left: var(--space-9); } .me-9--lg { margin-right: var(--space-9); } .mt-9--lg { margin-top: var(--space-9); } .mb-9--lg { margin-bottom: var(--space-9); } .m-10--lg { margin: var(--space-10); } .mx-10--lg { margin-inline: var(--space-10); } .my-10--lg { margin-block: var(--space-10); } .ms-10--lg { margin-left: var(--space-10); } .me-10--lg { margin-right: var(--space-10); } .mt-10--lg { margin-top: var(--space-10); } .mb-10--lg { margin-bottom: var(--space-10); } } @media (min-width: 75rem) { .g-0--xl { --gap: 0; } .g-1--xl { --gap: var(--space-1); } .g-2--xl { --gap: var(--space-2); } .g-3--xl { --gap: var(--space-3); } .g-4--xl { --gap: var(--space-4); } .g-5--xl { --gap: var(--space-5); } .g-6--xl { --gap: var(--space-6); } .g-7--xl { --gap: var(--space-7); } .g-8--xl { --gap: var(--space-8); } .g-9--xl { --gap: var(--space-9); } .g-10--xl { --gap: var(--space-10); } .p-0--xl { padding: 0; } .px-0--xl { padding-inline: 0; } .py-0--xl { padding-block: 0; } .ps-0--xl { padding-left: 0; } .pt-0--xl { padding-top: 0; } .pe-0--xl { padding-right: 0; } .pb-0--xl { padding-bottom: 0; } .p-1--xl { padding: var(--space-1); } .px-1--xl { padding-inline: var(--space-1); } .py-1--xl { padding-block: var(--space-1); } .ps-1--xl { padding-left: var(--space-1); } .pe-1--xl { padding-right: var(--space-1); } .pt-1--xl { padding-top: var(--space-1); } .pb-1--xl { padding-bottom: var(--space-1); } .p-2--xl { padding: var(--space-2); } .px-2--xl { padding-inline: var(--space-2); } .py-2--xl { padding-block: var(--space-2); } .ps-2--xl { padding-left: var(--space-2); } .pe-2--xl { padding-right: var(--space-2); } .pt-2--xl { padding-top: var(--space-2); } .pb-2--xl { padding-bottom: var(--space-2); } .p-3--xl { padding: var(--space-3); } .px-3--xl { padding-inline: var(--space-3); } .py-3--xl { padding-block: var(--space-3); } .ps-3--xl { padding-left: var(--space-3); } .pe-3--xl { padding-right: var(--space-3); } .pt-3--xl { padding-top: var(--space-3); } .pb-3--xl { padding-bottom: var(--space-3); } .p-4--xl { padding: var(--space-4); } .px-4--xl { padding-inline: var(--space-4); } .py-4--xl { padding-block: var(--space-4); } .ps-4--xl { padding-left: var(--space-4); } .pe-4--xl { padding-right: var(--space-4); } .pt-4--xl { padding-top: var(--space-4); } .pb-4--xl { padding-bottom: var(--space-4); } .p-5--xl { padding: var(--space-5); } .px-5--xl { padding-inline: var(--space-5); } .py-5--xl { padding-block: var(--space-5); } .ps-5--xl { padding-left: var(--space-5) } .pe-5--xl { padding-right: var(--space-5); } .pt-5--xl { padding-top: var(--space-5); } .pb-5--xl { padding-bottom: var(--space-5); } .p-6--xl { padding: var(--space-6); } .px-6--xl { padding-inline: var(--space-6); } .py-6--xl { padding-block: var(--space-6); } .ps-6--xl { padding-left: var(--space-6); } .pe-6--xl { padding-right: var(--space-6); } .pt-6--xl { padding-top: var(--space-6); } .pb-6--xl { padding-bottom: var(--space-6); } .p-7--xl { padding: var(--space-7); } .px-7--xl { padding-inline: var(--space-7); } .py-7--xl { padding-block: var(--space-7); } .ps-7--xl { padding-left: var(--space-7); } .pe-7--xl { padding-right: var(--space-7); } .pt-7--xl { padding-top: var(--space-7); } .pb-7--xl { padding-bottom: var(--space-7); } .p-8--xl { padding: var(--space-8); } .px-8--xl { padding-inline: var(--space-8); } .py-8--xl { padding-block: var(--space-8); } .ps-8--xl { padding-left: var(--space-8); } .pe-8--xl { padding-right: var(--space-8); } .pt-8--xl { padding-top: var(--space-8); } .pb-8--xl { padding-bottom: var(--space-8); } .p-9--xl { padding: var(--space-9); } .px-9--xl { padding-inline: var(--space-9); } .py-9--xl { padding-block: var(--space-9); } .ps-9--xl { padding-left: var(--space-9); } .pe-9--xl { padding-right: var(--space-9); } .pt-9--xl { padding-top: var(--space-9); } .pb-9--xl { padding-bottom: var(--space-9); } .p-10--xl { padding: var(--space-10); } .px-10--xl { padding-inline: var(--space-10); } .py-10--xl { padding-block: var(--space-10); } .ps-10--xl { padding-left: var(--space-10); } .pe-10--xl { padding-right: var(--space-10); } .pt-10--xl { padding-top: var(--space-10); } .pb-10--xl { padding-bottom: var(--space-10); } .mx-auto--xl { margin-inline: auto; } .m-0--xl { margin: 0; } .mx-0--xl { margin-inline: 0; } .my-0--xl { margin-block: 0; } .ms-0--xl { margin-left: 0; } .mt-0--xl { margin-top: 0; } .me-0--xl { margin-right: 0; } .mb-0--xl { margin-bottom: 0; } .m-1--xl { margin: var(--space-1); } .mx-1--xl { margin-inline: var(--space-1); } .my-1--xl { margin-block: var(--space-1); } .ms-1--xl { margin-left: var(--space-1); } .me-1--xl { margin-right: var(--space-1); } .mt-1--xl { margin-top: var(--space-1); } .mb-1--xl { margin-bottom: var(--space-1); } .m-2--xl { margin: var(--space-2); } .mx-2--xl { margin-inline: var(--space-2); } .my-2--xl { margin-block: var(--space-2); } .ms-2--xl { margin-left: var(--space-2); } .me-2--xl { margin-right: var(--space-2); } .mt-2--xl { margin-top: var(--space-2); } .mb-2--xl { margin-bottom: var(--space-2); } .m-3--xl { margin: var(--space-3); } .mx-3--xl { margin-inline: var(--space-3); } .my-3--xl { margin-block: var(--space-3); } .ms-3--xl { margin-left: var(--space-3); } .me-3--xl { margin-right: var(--space-3); } .mt-3--xl { margin-top: var(--space-3); } .mb-3--xl { margin-bottom: var(--space-3); } .m-4--xl { margin: var(--space-4); } .mx-4--xl { margin-inline: var(--space-4); } .my-4--xl { margin-block: var(--space-4); } .ms-4--xl { margin-left: var(--space-4); } .me-4--xl { margin-right: var(--space-4); } .mt-4--xl { margin-top: var(--space-4); } .mb-4--xl { margin-bottom: var(--space-4); } .m-5--xl { margin: var(--space-5); } .mx-5--xl { margin-inline: var(--space-5); } .my-5--xl { margin-block: var(--space-5); } .ms-5--xl { margin-left: var(--space-5); } .me-5--xl { margin-right: var(--space-5); } .mt-5--xl { margin-top: var(--space-5); } .mb-5--xl { margin-bottom: var(--space-5); } .m-6--xl { margin: var(--space-6); } .mx-6--xl { margin-inline: var(--space-6); } .my-6--xl { margin-block: var(--space-6); } .ms-6--xl { margin-left: var(--space-6); } .me-6--xl { margin-right: var(--space-6); } .mt-6--xl { margin-top: var(--space-6); } .mb-6--xl { margin-bottom: var(--space-6); } .m-7--xl { margin: var(--space-7); } .mx-7--xl { margin-inline: var(--space-7); } .my-7--xl { margin-block: var(--space-7); } .ms-7--xl { margin-left: var(--space-7); } .me-7--xl { margin-right: var(--space-7); } .mt-7--xl { margin-top: var(--space-7); } .mb-7--xl { margin-bottom: var(--space-7); } .m-8--xl { margin: var(--space-8); } .mx-8--xl { margin-inline: var(--space-8); } .my-8--xl { margin-block: var(--space-8); } .ms-8--xl { margin-left: var(--space-8); } .me-8--xl { margin-right: var(--space-8); } .mt-8--xl { margin-top: var(--space-8); } .mb-8--xl { margin-bottom: var(--space-8); } .m-9--xl { margin: var(--space-9); } .mx-9--xl { margin-inline: var(--space-9); } .my-9--xl { margin-block: var(--space-9); } .ms-9--xl { margin-left: var(--space-9); } .me-9--xl { margin-right: var(--space-9); } .mt-9--xl { margin-top: var(--space-9); } .mb-9--xl { margin-bottom: var(--space-9); } .m-10--xl { margin: var(--space-10); } .mx-10--xl { margin-inline: var(--space-10); } .my-10--xl { margin-block: var(--space-10); } .ms-10--xl { margin-left: var(--space-10); } .me-10--xl { margin-right: var(--space-10); } .mt-10--xl { margin-top: var(--space-10); } .mb-10--xl { margin-bottom: var(--space-10); } } /* Width and height */ @media (min-width: 0rem) { .w-10 { width: 10%; } .w-20 { width: 20%; } .w-30 { width: 30%; } .w-40 { width: 40%; } .w-50 { width: 50%; } .w-60 { width: 60%; } .w-70 { width: 70%; } .w-80 { width: 80%; } .w-90 { width: 90%; } .w-100 { width: 100%; } .h-50 { height: 50vh; } .h-100 { height: 100vh; } } @media (min-width: 36rem) { .w-10--sm { width: 10%; } .w-20--sm { width: 20%; } .w-30--sm { width: 30%; } .w-40--sm { width: 40%; } .w-50--sm { width: 50%; } .w-60--sm { width: 60%; } .w-70--sm { width: 70%; } .w-80--sm { width: 80%; } .w-90--sm { width: 90%; } .w-100--sm { width: 100%; } .h-50--sm { height: 50vh; } .h-100--sm { height: 100vh; } } @media (min-width: 48rem) { .w-10--md { width: 10%; } .w-20--md { width: 20%; } .w-30--md { width: 30%; } .w-40--md { width: 40%; } .w-50--md { width: 50%; } .w-60--md { width: 60%; } .w-70--md { width: 70%; } .w-80--md { width: 80%; } .w-90--md { width: 90%; } .w-100--md { width: 100%; } .h-50--md { height: 50vh; } .h-100--md { height: 100vh; } } @media (min-width: 62rem) { .w-10--lg { width: 10%; } .w-20--lg { width: 20%; } .w-30--lg { width: 30%; } .w-40--lg { width: 40%; } .w-50--lg { width: 50%; } .w-60--lg { width: 60%; } .w-70--lg { width: 70%; } .w-80--lg { width: 80%; } .w-90--lg { width: 90%; } .w-100--lg { width: 100%; } .h-50--lg { height: 50vh; } .h-100--lg { height: 100vh; } } /* Border radius */ @media (min-width: 0rem) { .radius-0 { border-radius: 0; } .radius-1 { border-radius: var(--space-1); } .radius-2 { border-radius: var(--space-2); } .radius-3 { border-radius: var(--space-3); } .radius-4 { border-radius: var(--space-4); } .radius-5 { border-radius: var(--space-5); } .radius-6 { border-radius: var(--space-6); } .radius-7 { border-radius: var(--space-7); } .radius-8 { border-radius: var(--space-8); } .radius-pill, .radius-50 { border-radius: 50rem; } .radius-circle, .radius-100 { border-radius: 100%; } .radius-t-0 { border-top-left-radius: 0; border-top-right-radius: 0; } .radius-b-0 { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .radius-l-0 { border-top-left-radius: 0; border-bottom-left-radius: 0; } .radius-r-0 { border-top-right-radius: 0; border-bottom-right-radius: 0; } .radius-tl-0 { border-top-left-radius: 0; } .radius-tr-0 { border-top-right-radius: 0; } .radius-bl-0 { border-bottom-left-radius: 0; } .radius-br-0 { border-bottom-right-radius: 0; } } @media (min-width: 36rem) { .radius-0--sm { border-radius: 0; } .radius-1--sm { border-radius: var(--space-1); } .radius-2--sm { border-radius: var(--space-2); } .radius-3--sm { border-radius: var(--space-3); } .radius-4--sm { border-radius: var(--space-4); } .radius-5--sm { border-radius: var(--space-5); } .radius-6--sm { border-radius: var(--space-6); } .radius-7--sm { border-radius: var(--space-7); } .radius-8--sm { border-radius: var(--space-8); } .radius-pill--sm, .radius-50--sm { border-radius: 50rem; } .radius-circle--sm, .radius-100--sm { border-radius: 100%; } .radius-t-0--sm { border-top-left-radius: 0; border-top-right-radius: 0; } .radius-b-0--sm { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .radius-l-0--sm { border-top-left-radius: 0; border-bottom-left-radius: 0; } .radius-r-0--sm { border-top-right-radius: 0; border-bottom-right-radius: 0; } .radius-tl-0--sm { border-top-left-radius: 0; } .radius-tr-0--sm { border-top-right-radius: 0; } .radius-bl-0--sm { border-bottom-left-radius: 0; } .radius-br-0--sm { border-bottom-right-radius: 0; } } @media (min-width: 48rem) { .radius-0--md { border-radius: 0; } .radius-1--md { border-radius: var(--space-1); } .radius-2--md { border-radius: var(--space-2); } .radius-3--md { border-radius: var(--space-3); } .radius-4--md { border-radius: var(--space-4); } .radius-5--md { border-radius: var(--space-5); } .radius-6--md { border-radius: var(--space-6); } .radius-7--md { border-radius: var(--space-7); } .radius-8--md { border-radius: var(--space-8); } .radius-pill--md, .radius-50--md { border-radius: 50rem; } .radius-circle--md, .radius-100--md { border-radius: 100%; } .radius-t-0--md { border-top-left-radius: 0; border-top-right-radius: 0; } .radius-b-0--md { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .radius-l-0--md { border-top-left-radius: 0; border-bottom-left-radius: 0; } .radius-r-0--md { border-top-right-radius: 0; border-bottom-right-radius: 0; } .radius-tl-0--md { border-top-left-radius: 0; } .radius-tr-0--md { border-top-right-radius: 0; } .radius-bl-0--md { border-bottom-left-radius: 0; } .radius-br-0--md { border-bottom-right-radius: 0; } } @media (min-width: 62rem) { .radius-0--lg { border-radius: 0; } .radius-1--lg { border-radius: var(--space-1); } .radius-2--lg { border-radius: var(--space-2); } .radius-3--lg { border-radius: var(--space-3); } .radius-4--lg { border-radius: var(--space-4); } .radius-5--lg { border-radius: var(--space-5); } .radius-6--lg { border-radius: var(--space-6); } .radius-7--lg { border-radius: var(--space-7); } .radius-8--lg { border-radius: var(--space-8); } .radius-pill--lg, .radius-50--lg { border-radius: 50rem; } .radius-circle--lg, .radius-100--lg { border-radius: 100%; } .radius-t-0--lg { border-top-left-radius: 0; border-top-right-radius: 0; } .radius-b-0--lg { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .radius-l-0--lg { border-top-left-radius: 0; border-bottom-left-radius: 0; } .radius-r-0--lg { border-top-right-radius: 0; border-bottom-right-radius: 0; } .radius-tl-0--lg { border-top-left-radius: 0; } .radius-tr-0--lg { border-top-right-radius: 0; } .radius-bl-0--lg { border-bottom-left-radius: 0; } .radius-br-0--lg { border-bottom-right-radius: 0; } } } @layer darkmode { :root.dark-mode { --color-primary: hsl(352, 83%, 61%); --color-layer-1: hsl(0, 0%, 10%); --color-layer-2: hsl(0, 0%, 15%); --color-layer-3: hsl(0, 0%, 20%); --color-title: #dce3ea; --color-text: #dce3ea; --color-text-inverse: #25313c; --color-ghost: rgba(37, 49, 60, 0.5); } .dark-mode .lightmode-only { display: none !important; visibility: hidden; } .dark-mode .darkmode-only { display: block !important; visibility: visible; } .dark-mode #navigation, .dark-mode #navigation:before, .dark-mode #navigation .sub-menu { box-shadow: none; } .dark-mode .bg-primary .btn.arrow:not(.btn-solid):hover { color: var(--color-text-inverse); } .dark-mode .flip .before { transform: rotateX(-180deg); opacity: 0; } .dark-mode .flip .after { transform: rotateX(0deg); opacity: 1; } .dark-mode .backdrop { background-color: hsla(208, 24%, 19%, 0.5); } .dark-mode .bg-primary-light, .dark-mode .bg-secondary-light { background-color: var(--color-layer-2); } .dark-mode #navigation { background-color: var(--color-layer-2); } .dark-mode .social-icons a:hover img { filter: none; } .dark-mode input[type="text"], .dark-mode input[type="email"], .dark-mode textarea, .dark-mode select { background-color: var(--color-layer-3); } .dark-mode #navigation .menu-item-has-children:before { filter: invert(1); } .dark-mode #navigation .menu-item-has-children:hover:before, .dark-mode #navigation .current-menu-ancestor.menu-item-has-children:before { filter: invert(44%) sepia(79%) saturate(2453%) hue-rotate(323deg) brightness(93%) contrast(100%); } .dark-mode .bg-gradient { --startColor: var(--color-layer-2); --endColor: var(--color-layer-1); } .dark-mode .from-layer-2 { --startColor: #131313; } } @layer styles { /*** Header ***/ /* Announcement bar */ @media (min-width: 0rem) { #announcement-bar { height: 3rem; position: relative; z-index: 10000; } #announcement-bar a:hover { background-color: var(--color-layer-2); } #announcement-bar a { display: flex; align-items: center; justify-content: center; width: 100%; height: 3rem; background-color: var(--color-layer-1); transition: background-color 0.3s ease; } } /* Mobile navigation */ @media only screen and (max-width: 61.9375rem) { body.open { overflow: hidden; } body.open:after { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1; } body.scroll #navigation .ul-wrapper { top: 100%; } #navigation { width: 100%; display: flex; align-items: center; max-width: 80rem; height: 4rem; position: sticky; top: 0; left: 0; padding-left: 1rem; padding-right: 1rem; z-index: 10000; transition: top 0.3s, border-radius 0.3s, width 0.3s, max-width 0.3s; } #navigation:before { content: ""; width: 100%; height: 100%; background: var(--color-layer-1); box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; opacity: 1; display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); transition: transform 0.2s, border-radius 0.3s ease-in-out; } #navigation.active .ul-wrapper { transform: scaleY(1); transition-delay: 0.15s; } #navigation.active .menu-item { opacity: 1; transform: translateY(0); } #navigation .nav-container { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; } #navigation .toggle { width: 2.5rem; height: 2.5rem; margin: 0 0 0 auto; background-color: var(--color-primary); border: none; border-radius: var(--space-1); display: flex; justify-content: center; align-items: center; position: relative; z-index: 10; transition: transform 0.6s; } #navigation .nav { /* sends it to the right in the 3rd position */ order: 3; } #navigation .active .line1 { top: 50%; transform: translate(-50%, -50%) rotate(225deg); } #navigation .active .line2 { top: 50%; transform: translate(-50%, -50%) translateY(0) rotate(-225deg); transform-origin: center; } #navigation .active .line3 { opacity: 0; bottom: 100%; } #navigation .box { width: clamp(1.5rem, 2vw, 1.75rem); height: 1rem; position: relative; } #navigation .line { width: 100%; height: 2px; background-color: var(--color-text-inverse); border-radius: 2px; position: absolute; left: 50%; transform: translateX(-50%); } #navigation .line1 { top: 0; transition: transform 0.5s, top 0.3s, left 0.3s; animation-duration: 0.7s; animation-timing-function: ease; animation-direction: normal; animation-fill-mode: forwards; transform-origin: center; } #navigation .line2 { top: 50%; transform: translateX(-50%) translateY(-50%); transition: top 0.3s, left 0.3s, transform 0.5s; animation-duration: 0.7s; animation-timing-function: ease; animation-direction: normal; animation-fill-mode: forwards; } #navigation .line3 { bottom: 0; transition: bottom 0.3s, opacity 0.3s; } #navigation .ul-wrapper { width: 100%; height: auto; padding: 2rem 0; background-color: var(--color-layer-1); position: absolute; z-index: 1; overflow: hidden; top: 4rem; left: 0; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; transform: scaleY(0); transition: transform 0.4s; transform-origin: top; } #navigation .nav-ul { width: calc(100% - 4rem); height: auto; max-height: 65vh; margin-inline: auto; margin-block: 0; padding: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 1.25rem; overflow: auto; } #navigation .menu-item { list-style: none; width: 100%; margin-right: 0; opacity: 0; /* transition from these values */ transform: translateY(-70/16rem); transition: transform 0.6s, opacity 0.9s; } #navigation .menu-item:nth-of-type(1) { transition-delay: 0.05s; } #navigation .menu-item:nth-of-type(2) { transition-delay: 0.1s; } #navigation .menu-item:nth-of-type(3) { transition-delay: 0.15s; } #navigation .menu-item:nth-of-type(4) { transition-delay: 0.2s; } #navigation .menu-item:nth-of-type(5) { transition-delay: 0.25s; } #navigation .menu-item:nth-of-type(6) { transition-delay: 0.3s; } #navigation .menu-item:nth-of-type(7) { transition-delay: 0.35s; } #navigation .menu-item:nth-of-type(8) { transition-delay: 0.4s; } #navigation .menu-item:nth-of-type(9) { transition-delay: 0.45s; } #navigation .menu-item:nth-of-type(10) { transition-delay: 0.5s; } #navigation .menu-item:nth-of-type(11) { transition-delay: 0.55s; } #navigation .menu-item:nth-of-type(12) { transition-delay: 0.6s; } #navigation .menu-item:nth-of-type(13) { transition-delay: 0.65s; } #navigation .menu-item a { font-size: var(--fs-2); text-transform: uppercase; font-weight: 500; text-decoration: none; margin: 0; color: var(--color-text); display: inline-block; position: relative; } #navigation .current-menu-item a { color: var(--color-primary); } #navigation .menu-item:hover a { color: var(--color-primary); } #navigation .btn { display: none; } /* Navigation Dropdown */ #navigation .menu-item-has-children { position: relative; } #navigation .menu-item-has-children .sub-menu { background-color: hsla(from var(--color-layer-2) h s l / 0.5); height: auto; margin: 0.75rem 0 0 0; padding: 0.5rem 0.75rem; opacity: 1; visibility: visible; } #navigation .menu-item-has-children a { display: block; opacity: 1; } #navigation .menu-item-has-children .sub-menu .menu-item { position: relative; transition: opacity 0.3s; } #navigation .drop-icon { width: 0.9375rem; height: auto; position: absolute; top: 50%; right: -1.25rem; transform: translateY(-50%); } #navigation .sub-menu { width: 100%; height: 0; margin: 0; padding: 0; opacity: 0; display: flex; visibility: hidden; flex-direction: column; justify-content: flex-start; align-items: center; gap: 0.75rem; overflow: hidden; transition: padding 0.3s, margin 0.3s, height 0.3s, opacity 0.3s, visibility 0.3s; } #navigation .sub-menu .menu-item { list-style: none; } #navigation .sub-menu .menu-item a { font-size: clamp(0.875rem, 2vw, 1.25rem); color: var(--color-text); } } /* Desktop navigation */ @media only screen and (min-width: 62rem) { #navigation { width: 100%; height: 7.5rem; background-color: var(--color-layer-1); display: flex; align-items: center; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; position: relative; z-index: 10000; transition: height 0.3s ease; } body.scroll #navigation { position: fixed; height: 6rem; top: 0 !important; } body.admin-bar.scroll #navigation { top: 2rem !important; } #navigation .nav-container { box-sizing: border-box; display: flex; justify-content: center; align-items: center; gap: 1.5rem; } #navigation .toggle { display: none; } .logo { height: 6rem; width: auto; max-width: 25rem; margin: 0; padding: 0; display: inline-block; z-index: 100; transition: height 0.3s ease; } body.scroll #navigation .logo { height: 4.5rem; } .logo img { width: auto; height: 100%; } #navigation .nav { height: 7.5rem; transition: height 0.3s ease; } body.scroll #navigation .nav { height: 6rem; } #navigation .ul-wrapper { height: 100%; display: flex; align-items: center; } #navigation .nav-ul { width: 100%; height: 100%; margin: 0; padding: 0; display: flex; justify-content: flex-start; align-items: center; } #navigation .menu-item { list-style: none; height: 100%; padding: 0 1.25rem; display: flex; align-items: center; /* prevent flexbox from squishing it */ flex: none; } #navigation .menu-item a { display: flex; align-items: center; height: 100%; font-size: 1rem; line-height: 1.5em; text-decoration: none; margin: 0; color: var(--color-text); position: relative; text-transform: uppercase; font-weight: 600; transition: color 0.3s ease; } #navigation .menu-item:hover a { color: var(--color-primary); } /* Dropdown */ #navigation .menu-item-has-children { position: relative; cursor: pointer; } #navigation .menu-item-has-children:hover>.sub-menu { opacity: 1; visibility: visible; transform: scaleY(1); } #navigation .menu-item-has-children:hover>.sub-menu>.menu-item { opacity: 1; transform: translateY(0); } #navigation .sub-menu { min-width: 12.5rem; margin: 0; padding: 0; background-color: var(--color-layer-1); box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; opacity: 0; border-radius: 0 0 var(--space-1) var(--space-1); visibility: hidden; /* if you have 8 or more links in your dropdown nav, uncomment the columns property to make the list into 2 even columns. Change it to 3 or 4 if you need extra columns. Then remove the transition delays on the drop-li so they don't have weird scattered animations */ position: absolute; right: 0; top: 100%; z-index: 1; transform: scaleY(0); transition: transform 0.3s, visibility 0.3s, opacity 0.3s; transform-origin: top; } #navigation .sub-menu .menu-item { padding: 0; font-size: 1rem; text-decoration: none; list-style: none; width: 100%; height: auto; opacity: 0; visibility: visible; display: flex; align-items: center; transform: translateY(-0.625rem); transition: opacity 0.6s, transform 0.6s; } #navigation .sub-menu .menu-item:nth-of-type(1) { transition-delay: 0.05s; } #navigation .sub-menu .menu-item:nth-of-type(2) { transition-delay: 0.1s; } #navigation .sub-menu .menu-item:nth-of-type(3) { transition-delay: 0.15s; } #navigation .sub-menu .menu-item:nth-of-type(4) { transition-delay: 0.2s; } #navigation .sub-menu .menu-item:nth-of-type(5) { transition-delay: 0.25s; } #navigation .sub-menu .menu-item:nth-of-type(6) { transition-delay: 0.3s; } #navigation .sub-menu .menu-item:nth-of-type(7) { transition-delay: 0.35s; } #navigation .sub-menu .menu-item:nth-of-type(8) { transition-delay: 0.4s; } #navigation .sub-menu .menu-item:nth-of-type(9) { transition-delay: 0.45s; } #navigation .sub-menu .menu-item a { font-size: 1rem; line-height: 1.5em; text-transform: capitalize; text-decoration: none; width: 100%; padding: 0.75rem 1.25rem; color: var(--color-text); display: block; transition: color 0.3s, background-color 0.3s; } #navigation .sub-menu .menu-item:hover a { color: var(--color-primary); background-color: var(--color-layer-2); } #navigation .sub-menu .menu-item a:before { display: none; } #navigation .current-menu-ancestor>a, #navigation .current-menu-item>a { color: var(--color-primary) !important; } #navigation .nav-ul>.current-menu-ancestor, #navigation .nav-ul>.current-menu-item { border-top: 4px solid transparent; border-bottom: 4px solid var(--color-primary); } #navigation .sub-menu .sub-menu { border-radius: var(--space-1); left: 100%; top: 0; } #navigation .menu-item-has-children:before { content: ""; background: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDMyIDMyIiB3aWR0aD0iNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTQuOTQgMTAuOTRhMS41IDEuNSAwIDAgMSAyLjEyIDBMMTYgMTkuODc4bDguOTQtOC45NGExLjUgMS41IDAgMCAxIDIuMTIgMi4xMjJsLTEwIDEwYTEuNSAxLjUgMCAwIDEtMi4xMiAwbC0xMC0xMGExLjUgMS41IDAgMCAxIDAtMi4xMjIiIGZpbGw9IiMwMDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==") no-repeat center / contain; position: absolute; right: 0.75rem; width: 1rem; height: 1rem; z-index: 1; transform: rotate(0deg); color: var(--color-text); transition: transform 0.3s ease; } #navigation .menu-item-has-children:hover:before { transform: rotate(180deg); } #navigation .sub-menu .menu-item-has-children:before { transform: rotate(0deg); } #navigation .menu-item-has-children { padding-right: 2.25rem; } } /*** Footer ***/ @media (min-width: 0rem) { footer a, footer p { color: var(--color-text); } footer { padding: var(--space-8) clamp(1rem, 4vw, 3rem) 0; background-color: #000; color: var(--color-white); transition: background-color .2s ease; } footer .logo { width: auto; height: 6rem; margin-left: auto; margin-right: auto; } footer .slogan { color: var(--color-white); text-align: center; font-size: 1rem; text-decoration: none; line-height: 1.5em; letter-spacing: 0.5px; } footer .menu-item a { font-size: 1rem; font-weight: 500; text-decoration: none; line-height: 1.5em; color: var(--color-white); position: relative; text-transform: uppercase; letter-spacing: 0.5px; } footer .menu-item a:before { content: ""; width: 0%; height: 0.125rem; background: currentColor; opacity: 1; position: absolute; display: block; bottom: -0.125rem; left: 0; transition: width 0.3s; } footer .menu-item a:hover:before, footer .current-menu-item a:before { width: 100%; } footer .current-menu-item a { color: var(--color-primary-medium); } .social-icons a { margin-right: 1rem; } .social-icons a img { display: block; filter: brightness(0) invert(1); } .social-icons a:hover img { filter: none; } .social-icons a:last-of-type { margin-right: 0; } #menu-top-menu, #menu-footer-menu, #menu-legal-links { margin-bottom: 0; margin-left: 0; padding-left: 0; list-style-type: none; align-items: center; } #menu-legal-links .menu-item a { text-transform: none; color: var(--color-white); font-size: var(--fs-1); } .copyright { display: flex; align-items: center; justify-content: center; color: var(--color-white); } .underfooter { display: flex; flex-direction: column; justify-content: center; padding-block: var(--space-4); } footer #menu-top-menu { text-align: center; margin-block: var(--space-4); } } @media screen and (min-width: 48rem) { footer .logo { margin-left: 0; margin-right: auto; } footer .slogan { text-align: start; } .copyright { justify-content: start; } .underfooter { flex-direction: row; justify-content: space-between; align-items: center; border-top: 1px solid var(--color-layer-3); } footer #menu-footer-menu { text-align: end; margin-block: 0; } } @media screen and (prefers-reduced-motion: no-preference) {} /*** Animations ***/ @keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -50px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 50px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } /*-- -------------------------- --> <--- Blog PAGE --> <--- -------------------------- -*/ .posts article .post { display: block; } .posts article h3 { -ms-word-wrap: break-word; word-wrap: break-word; } .posts article .post:hover h3 { color: var(--color-primary); transition: color 0.2s ease; } .post .category { font-size: var(--fs-1); color: var(--color-primary); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; transition: color 0.2s ease; } .post .date { font-size: var(--fs-1); color: var(--color-text); letter-spacing: 0.5px; } .post .btn { width: auto; } .pagination { display: flex; justify-content: center; align-items: center; } .pagination a, .pagination span { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; font-size: 1rem; border-radius: 100%; color: var(--color-text); text-decoration: none; margin-right: 0.5rem; background-color: transparent; transition: background-color .2s ease; } .pagination .current { cursor: default; } .pagination .current, .pagination a:hover { background-color: var(--color-layer-2); } .pagination .current { font-weight: 600; } .pagination .next-icon, .pagination .prev-icon { height: 0.9rem; width: 0.9rem; margin: 0; transition: transform .2s ease; } .pagination .prev-icon { background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAxMyAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguNzI1MDIgMC43MDQ3NDRMMC40MDUwMiA5LjAyNDc1Qy0wLjEzNDk4IDkuNTY0NzUgLTAuMTM0OTggMTAuNDI0NyAwLjQwNTAyIDEwLjk2NDdMOC43MjUwMiAxOS4yODQ3QzkuNjY1MDIgMjAuMjI0NyAxMS4yMDUgMjAuMjI0NyAxMi4xNDUgMTkuMjg0N0w3LjIwNTAyIDExLjQ1NDdDNi42MzUwMiAxMC41NjQ3IDYuNjM1MDIgOS40MTQ3NSA3LjIwNTAyIDguNTI0NzVMMTIuMTQ1IDAuNzA0NzQ0QzExLjIwNSAtMC4yMzUyNTYgOS42NjUwMiAtMC4yMzUyNTYgOC43MjUwMiAwLjcwNDc0NFoiIGZpbGw9IiMzN0QzQUUiLz4KPC9zdmc+Cg==") no-repeat center / contain; } .pagination .next-icon { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMi4xNSAyMCI+PGcgaWQ9IkxheWVyXzEtMiI+PHBhdGggZD0iTTMuNDIsMTkuMjlsOC4zMi04LjMyYy41NC0uNTQuNTQtMS40LDAtMS45NEwzLjQyLjcxYy0uOTQtLjk0LTIuNDgtLjk0LTMuNDIsMGgwczQuOTQsNy44Myw0Ljk0LDcuODNjLjU3Ljg5LjU3LDIuMDQsMCwyLjkzTDAsMTkuMjloMGMuOTQuOTQsMi40OC45NCwzLjQyLDBaIiBmaWxsPSIjMzdkM2FlIi8+PC9nPjwvc3ZnPg==") no-repeat center / contain; } .select-wrapper, .search-wrapper { position: relative; max-width: 100%; } select.orderby { background-color: transparent; min-height: 2rem; height: 2rem; display: flex; line-height: 1; align-items: center; text-align: end; } .select-wrapper::after { content: ''; background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyMSAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuNzgyNTAzIDQuMzQyMzZMOS4xMDI1IDEyLjY2MjRDOS42NDI1IDEzLjIwMjQgMTAuNTAyNSAxMy4yMDI0IDExLjA0MjUgMTIuNjYyNEwxOS4zNjI1IDQuMzQyMzZDMjAuMzAyNSAzLjQwMjM2IDIwLjMwMjUgMS44NjIzNiAxOS4zNjI1IDAuOTIyMzYzTDExLjUzMjUgNS44NjIzNkMxMC42NDI1IDYuNDMyMzYgOS40OTI1IDYuNDMyMzYgOC42MDI1IDUuODYyMzZMMC43ODI1MDMgMC45MjIzNjNDLTAuMTU3NDk3IDEuODYyMzYgLTAuMTU3NDk3IDMuNDAyMzYgMC43ODI1MDMgNC4zNDIzNloiIGZpbGw9IiMzN0QzQUUiLz4KPC9zdmc+Cg==") no-repeat center / contain; z-index: 99; position: absolute; top: calc(50% - 0.5rem); right: 1rem; width: 1rem; height: 1rem; cursor: pointer; pointer-events: none; transition: .25s all ease; } .page-header .container { min-height: auto; } .page-header .absolute-icon { position: absolute; bottom: -9rem; right: 10%; width: 20rem; height: 20rem; z-index: 1; } .placeholder-img { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: var(--color-primary-light); color: var(--color-text); font-size: 0.9rem; } .sticky-badge { position: absolute; top: 0; left: 0; border-bottom-right-radius: 99rem; width: 7rem; text-align: center; background-color: var(--color-secondary); color: var(--color-white); font-size: var(--fs-1); font-weight: 500; text-transform: uppercase; padding-block: var(--space-1); transition: width 0.2s ease; } .post:hover .sticky-badge { width: 100%; border-bottom-right-radius: 0; } .screen-reader-text { display: none; } #subscribe-form { display: flex; flex-direction: column; align-items: center; } #subscribe-form .wpcf7-form-control-wrap { padding-left: 4.5rem; } #subscribe-form input[type="submit"] { height: clamp(2.5rem, 5vw, 3rem); z-index: 1; flex-shrink: 0; border-radius: 99rem; margin-top: 1rem; width: 100%; text-align: center; } #subscribe-form .wpcf7-not-valid-tip { font-size: var(--fs-1); margin-left: 2rem; margin-top: 0.5rem; } @media screen and (min-width: 36rem) { .select-wrapper, .search-wrapper { max-width: 15rem; } #subscribe-form input[type="email"] { padding-right: 8rem; } #subscribe-form input[type="submit"] { margin-left: -8rem; margin-top: 0; width: 8rem; text-align: center; } } @media screen and (min-width: 62rem) { .page-header .container { min-height: 15rem; } } @media screen and (min-width: 75rem) { .page-header .absolute-icon { right: 15%; } } /*-- -------------------------- --> <--- Single Blog PAGE --> <--- -------------------------- -*/ section#single { padding-top: 0; padding-bottom: 0; } article .post-content { max-width: 100%; } .content * { max-width: 100%; } .content img { padding: 0; border-radius: var(--space-3); } #single .post-details { font-size: var(--fs-2); } article h1, .content h2, .content h3, .content h4, .content h5, .content h6 { margin-top: 1.5rem; margin-bottom: 1rem; -ms-word-wrap: break-word; word-wrap: break-word; } article h1, .content h2 { margin-top: 2rem; margin-bottom: 1.5rem; } .content ol, .content ul { font-size: 1rem; } .content blockquote { font-style: italic; padding: 2rem; background-color: var(--color-layer-2); margin: 0 0 1rem; text-wrap: pretty; border-radius: var(--space-3); } .content a:not(.btn) { color: var(--color-primary); text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 3px; text-decoration-color: var(--color-primary); transition: all .2s ease; } .content a:hover { text-decoration-style: solid; } .related-posts a, #single .related-bottom a { text-decoration: none !important; } .image-wrapper { width: 100%; height: auto; overflow: hidden; display: flex; align-items: center; justify-content: center; } .image-wrapper img { width: auto; height: 100%; object-fit: cover; transition: all 250ms ease-in-out; } article .share { clear: both; } .related a { color: var(--color-text); text-decoration: none; } .related a h4 { transition: color 0.2s ease; } .related a:hover h4 { color: var(--color-primary); } .related a:hover .image-wrapper img { scale: 1.1; } .post-details a { text-decoration: none; } .post-details a:hover { text-decoration: underline; } .alignright { float: right; margin-top: 0; margin-left: 1rem; margin-bottom: 1rem; } .alignleft { float: left; margin-top: 0; margin-right: 1rem; margin-bottom: 1rem; } .aligncenter { display: block; margin-left: auto; margin-right: auto; text-align: center; } .wp-caption { font-size: var(--fs-2); text-wrap: pretty; } /* Default Table Style */ table { color: var(--color-text); background: var(--color-layer-1); border: 1px solid grey; font-size: var(--fs-2); border-collapse: collapse; } table thead th, table tfoot th { background: var(--color-layer-2); ; } table caption { padding: .5em; } table th, table td { padding: .5em; border: 1px solid lightgrey; } .zebra-table tbody tr:nth-of-type(odd) { background: var(--color-layer-2); } pre { background: var(--color-layer-2); border: 1px solid var(--color-text); border-left: 3px solid var(--color-primary); color: var(--color-text); page-break-inside: avoid; font-family: monospace; font-size: var(--fs-2); line-height: 1.6; margin: 1rem 0; overflow: auto; padding: 1rem 1.5rem; border-radius: var(--space-1); display: block; word-wrap: break-word; } code { display: inline-block; background: var(--color-layer-2); border: 1px solid var(--color-text); color: var(--color-text); font-family: monospace; font-size: var(--fs-2); padding: 0.25rem 1rem; line-height: 1.6; margin: 1rem 0; border-radius: var(--space-1); } figure { margin: 1.5rem 0; } figcaption { font-size: var(--fs-2); margin-top: 0.5rem; font-style: italic; } ul { list-style-type: disc; margin-left: 2rem; margin-bottom: 1rem; } ol { list-style-type: decimal; margin-left: 2rem; } li { margin-top: 0.25rem; margin-bottom: 0.25rem; font-size: var(--fs-2); } dt { font-weight: 600; margin-bottom: 0.25rem; margin-top: 1rem; } dd { margin-left: 1rem; } .tags a { text-decoration: none; color: var(--color-text); font-size: var(--fs-2); background-color: var(--color-layer-2); padding: 0.25rem 0.7rem; border-radius: var(--space-2); transition: color 0.2s ease, background-color 0.2s ease; } .tags a:hover { background-color: var(--color-primary-light); } .post-author { padding-top: 70px; margin-top: calc(70px + 3rem); } .post-author .avatar { width: 120px; height: 120px; object-fit: cover; object-position: center; border-radius: 100%; position: absolute; left: 50%; transform: translateX(-50%); top: -60px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); } .nav-links { display: flex; flex-direction: column; gap: var(--space-6); } .nav-links .nav-previous, .nav-links .nav-next { position: relative; display: flex; gap: 1rem; padding: var(--space-4); border-radius: var(--space-4); background-color: var(--color-layer-2); transition: background-color 0.2s ease; } .nav-links .nav-previous { grid-column-start: 1; grid-column-end: 2; padding-left: 3.75rem; } .nav-links .nav-next { grid-column-start: 2; grid-column-end: 3; text-align: right; padding-right: 3.75rem; } .nav-links .nav-previous:hover, .nav-links .nav-next:hover { background-color: var(--color-primary-light); } .nav-links .nav-previous::before, .nav-links .nav-next::after { content: ""; display: block; width: 1.25rem; height: 1.25rem; position: absolute; top: 50%; transform: translateY(-50%); } .nav-links .nav-previous::before { left: 1.25rem; background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAxMyAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguNzI1MDIgMC43MDQ3NDRMMC40MDUwMiA5LjAyNDc1Qy0wLjEzNDk4IDkuNTY0NzUgLTAuMTM0OTggMTAuNDI0NyAwLjQwNTAyIDEwLjk2NDdMOC43MjUwMiAxOS4yODQ3QzkuNjY1MDIgMjAuMjI0NyAxMS4yMDUgMjAuMjI0NyAxMi4xNDUgMTkuMjg0N0w3LjIwNTAyIDExLjQ1NDdDNi42MzUwMiAxMC41NjQ3IDYuNjM1MDIgOS40MTQ3NSA3LjIwNTAyIDguNTI0NzVMMTIuMTQ1IDAuNzA0NzQ0QzExLjIwNSAtMC4yMzUyNTYgOS42NjUwMiAtMC4yMzUyNTYgOC43MjUwMiAwLjcwNDc0NFoiIGZpbGw9IiMzN0QzQUUiLz4KPC9zdmc+Cg==") no-repeat center / contain; } .nav-links .nav-next::after { right: 1.25rem; background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMi4xNSAyMCI+PGcgaWQ9IkxheWVyXzEtMiI+PHBhdGggZD0iTTMuNDIsMTkuMjlsOC4zMi04LjMyYy41NC0uNTQuNTQtMS40LDAtMS45NEwzLjQyLjcxYy0uOTQtLjk0LTIuNDgtLjk0LTMuNDIsMGgwczQuOTQsNy44Myw0Ljk0LDcuODNjLjU3Ljg5LjU3LDIuMDQsMCwyLjkzTDAsMTkuMjloMGMuOTQuOTQsMi40OC45NCwzLjQyLDBaIiBmaWxsPSIjMzdkM2FlIi8+PC9nPjwvc3ZnPg==") no-repeat center / contain; } .nav-links .nav-previous a, .nav-links .nav-next a { flex-grow: 1; } @media screen and (min-width: 36rem) { .nav-links { display: grid; gap: var(--space-6); grid-template-columns: 1fr 1fr; } } @media (min-width: 62rem) { article .post-content { max-width: 60rem; margin-left: auto; margin-right: auto; } article .content img { max-width: 100%; height: auto; } } /*-- -------------------------- --> <--- Front PAGE --> <--- -------------------------- -*/ .col-full-grid { grid-column-start: 1; grid-column-end: -1; grid-row-start: 1; grid-row-end: -1; } .z-index--2 { z-index: -2; } .z-index--1 { z-index: -1; } .accordion-content { max-height: 0; opacity: 0; padding-top: 0; overflow: hidden; transition: opacity 0.25s ease, max-height 0.25s ease, padding-top 0.25s ease; } input[name="accordion"] { display: none; visibility: hidden; } .accordion-toggle:checked~.accordion-content { max-height: 105px; opacity: 1; padding-top: var(--space-4); } .accordion-toggle:checked~.accordion-button .icon { transform: rotate(90deg); } .icon { transition: transform 0.25s ease; width: 20px; height: 20px; } .accordion-button { cursor: pointer; } .stats-item>div { max-width: 240px; } @media screen and (min-width: 36rem) { .radius-tr-7--sm { border-top-right-radius: var(--space-7); } } @media screen and (min-width: 48rem) { .stats-item { padding-right: var(--space-6); border-right: 1px solid hsla(from var(--color-text) h s l / 0.5); } .stats-item:last-child { border-right: none; } .stats-item .fs-1 { font-size: clamp(2.5rem, 2rem + 1.5vw, 4rem); } } @media screen and (min-width: 62rem) { .radius-tr-7--lg { border-top-right-radius: var(--space-7) !important; } } /*-- -------------------------- --> <--- About PAGE --> <--- -------------------------- -*/ .founder-image { max-width: 450px; max-height: 450px; } /*-- -------------------------- --> <--- Services PAGE --> <--- -------------------------- -*/ .list-group li { list-style: none; background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMi4xNSAyMCI+PGcgaWQ9IkxheWVyXzEtMiI+PHBhdGggZD0iTTMuNDIsMTkuMjlsOC4zMi04LjMyYy41NC0uNTQuNTQtMS40LDAtMS45NEwzLjQyLjcxYy0uOTQtLjk0LTIuNDgtLjk0LTMuNDIsMGgwczQuOTQsNy44Myw0Ljk0LDcuODNjLjU3Ljg5LjU3LDIuMDQsMCwyLjkzTDAsMTkuMjloMGMuOTQuOTQsMi40OC45NCwzLjQyLDBaIiBmaWxsPSIjMzdkM2FlIi8+PC9nPjwvc3ZnPg=="); background-repeat: no-repeat; background-position: left center; background-size: 0.75rem; padding-left: 1.5rem; margin-block: 0.5rem; font-weight: 600; } #approach .accordion-toggle:checked~.accordion-content { max-height: 3lh; } #approach .accordion-content>p { min-height: 2lh; } @media only screen and (min-width: 62rem) { .list-group ul, .list-group ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-left: 0.75rem; margin-bottom: 0; } } /*-- -------------------------- --> <--- Contact PAGE --> <--- -------------------------- -*/ #contact-form .wpcf7-not-valid-tip { font-size: var(--fs-1) !important; } #contact-form .wpcf7-response-output { font-size: var(--fs-2); } .image-link { position: relative; } .image-link img { opacity: 1; transition: opacity 0.2s ease; } .image-link:hover img { opacity: 0.4; } .image-link .image-link-info { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; text-align: center; color: var(--color-text); font-weight: 600; z-index: 2; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } .image-link:hover .image-link-info { opacity: 1; visibility: visible; } .contact-group p { margin-bottom: var(--space-2); } /*-- -------------------------- --> <--- Downloadables PAGES --> <--- -------------------------- -*/ .pdfs-content p { font-size: var(--fs-2); } .pdfs-content ul { max-width: 45rem; display: grid; gap: 0.5rem; list-style: none; padding: 0; margin-inline: auto; margin-top: var(--space-6); margin-bottom: var(--space-8); } .pdfs-content ul li a { position: relative; display: flex; align-items: center; background-color: var(--color-layer-2); color: var(--color-text); padding: 1rem 8rem 1rem 1.5rem; font-size: var(--fs-2); } .pdfs-content ul li a:hover { background-color: var(--color-layer-3); } .pdfs-content ul li a:after { content: "Download"; position: absolute; color: var(--color-primary); right: 1.5rem; } .pdfs-content ul li a:before { content: ""; position: absolute; right: 6.5rem; width: 1rem; height: 1rem; background: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDI1IDI0IiB3aWR0aD0iNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzdhMTAxZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNNC42MzcgMTZhMSAxIDAgMCAxIDEgMXYyYTEgMSAwIDAgMCAxIDFoMTJhMSAxIDAgMCAwIDEtMXYtMmExIDEgMCAxIDEgMiAwdjJhMyAzIDAgMCAxLTMgM2gtMTJhMyAzIDAgMCAxLTMtM3YtMmExIDEgMCAwIDEgMS0xIi8+PHBhdGggZD0iTTYuOTMgMTAuMjkzYTEgMSAwIDAgMSAxLjQxNCAwbDQuMjkzIDQuMjkzIDQuMjkzLTQuMjkzYTEgMSAwIDEgMSAxLjQxNCAxLjQxNGwtNSA1YTEgMSAwIDAgMS0xLjQxNCAwbC01LTVhMSAxIDAgMCAxIDAtMS40MTQiLz48cGF0aCBkPSJNMTIuNjM3IDNhMSAxIDAgMCAxIDEgMXYxMmExIDEgMCAxIDEtMiAwVjRhMSAxIDAgMCAxIDEtMSIvPjwvZz48L3N2Zz4=') no-repeat center / contain; } .from-layer-2 { --startColor: var(--color-layer-2); } .boxed-pdfs-content p { font-size: var(--fs-2); } .boxed-pdfs-content ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; list-style: none; padding: 0; margin-inline: auto; margin-top: var(--space-6); margin-bottom: var(--space-8); } .boxed-pdfs-content ul li { font-size: var(--fs-2); max-width: 20rem; padding: var(--space-6); border: 1px solid var(--color-layer-3); background-color: var(--color-layer-1); } .boxed-pdfs-content ul li a { display: block; background-color: var(--color-primary-medium); color: var(--color-white); padding: var(--space-2) var(--space-4); margin-top: 1rem; margin-inline: auto; max-width: 8rem; text-align: center; font-size: var(--fs-1); border-radius: var(--space-1); } .boxed-pdfs-content ul li a:hover { background-color: var(--color-primary); } .sponsor-logo img { max-width: 100%; height: auto; display: block; margin: 0 auto; } .sponsor-logo { flex: 1 1 200px; /* Adjust the flex basis as needed */ text-align: center; margin: 10px; } .sponsor-logo img { max-height: 6rem; width: auto; } .sponsor-logo:hover img { transform: scale(1.05); transition: transform 0.3s ease; } .nobullets { list-style: none; padding: 0; margin: 0; } } /*-- -------------------------- --> <--- Woocommerce --> <--- -------------------------- -*/ .woocommerce ul.products li.product .price { color: var(--color-text); } .woocommerce .related.products { clear: both; padding: 0; padding-top: var(--space-8); } .woocommerce .related.products h2 { margin-bottom: 2rem; } .woocommerce .quantity { display: block; float: none !important; margin-bottom: 1.5rem !important; } .woocommerce .quantity .qty { width: 9rem; text-align: left; } input:is([type="text"], [type="email"], [type="tel"], [type="number"]), textarea { border-radius: 0; background-color: var(--color-layer-2); border: none; border-bottom: 4px solid var(--color-layer-3); font-size: 14px; padding: 0.75rem 1rem 0.5rem; color: var(--color-text); } .woocommerce button[type="submit"], .woocommerce-page button[type="submit"], .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button { background-color: var(--color-primary-medium) !important; color: var(--color-white) !important; text-transform: uppercase; font-size: var(--fs-2) !important; padding-inline: var(--space-6) !important; text-decoration: none; transition: background-color 0.3s ease; } .woocommerce button[type="submit"]:hover, .woocommerce-page button[type="submit"]:hover, .wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover { background-color: var(--color-primary) !important; } .woocommerce .price { color: var(--color-text) !important; } .woocommerce .woocommerce-breadcrumb { margin-bottom: var(--space-7); } .woocommerce .woocommerce-breadcrumb a { color: var(--color-primary) !important; } .woocommerce-order section { padding: 0; margin-top: 6rem; } .woocommerce-notice { font-size: var(--fs-7); font-family: var(--font-family-title); color: var(--color-primary); font-weight: 600; margin-top: 3rem; } .wc-block-components-product-metadata__description { display: none; } .woocommerce ul.wc-item-meta { margin-top: var(--space-4); margin-left: 0; } .woocommerce ul.wc-item-meta li, .woocommerce ul.wc-item-meta li p { font-size: var(--fs-2); } /* style for empty card "New in store" */ .wc-block-grid__product a { text-decoration: none; font-size: var(--fs-3); } .wc-block-grid__product .price { font-size: var(--fs-3); } .wc-block-grid__product a.ajax_add_to_cart { font-size: var(--fs-2); background-color: var(--color-primary-medium); color: var(--color-white); padding: 0.5rem 1rem; transition: background-color 0.3s ease; } .wc-block-grid__product a.ajax_add_to_cart:hover { background-color: var(--color-primary); } /* style for Woo Account pages: Login, Reset pass, Sign up, My Account */ .woocommerce-form-login, .lost_reset_password { max-width: 25rem; margin-inline: auto !important; background-color: var(--color-layer-1); } .lost_reset_password { margin-top: var(--space-8); border: 1px solid var(--color-layer-3); padding: 20px; text-align: left; border-radius: 5px; } .woocommerce form .form-row .input-text { height: 2.5rem; } .woocommerce-form-login__submit, .lost_reset_password button[type="submit"] { width: 100%; margin-top: 1rem !important; } .woocommerce-form-login a { font-size: var(--fs-2); } .woocommerce-account h2 { text-align: center; } .lost_reset_password .form-row-first { width: 100% !important; float: none; } /* =================================== WooCommerce My Account Page Styling =================================== */ .woocommerce-account { background-color: var(--color-layer-2); } /* Inner containers for navigation and content */ .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { background-color: var(--color-layer-1); padding: 2rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03); } /* Responsive layout for navigation and content */ @media only screen and (min-width: 769px) { .woocommerce-account .woocommerce-MyAccount-navigation { width: 25%; float: left; margin-right: 3%; padding: 0; /* Remove default padding, li handles it */ } .woocommerce-account .woocommerce-MyAccount-content { width: 72%; float: right; } } /* Clearfix for floats */ .woocommerce-account:after { content: ""; display: table; clear: both; } /* Paragraph text */ .woocommerce-account p { line-height: 1.6; color: var(--color-text); font-size: var(--fs-2); } /* === Navigation Menu Styling === */ .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; } .woocommerce-MyAccount-navigation ul li { border-bottom: 1px solid var(--color-layer-3); margin-block: 0; } .woocommerce-MyAccount-navigation ul li:last-child { border-bottom: none; } .woocommerce-MyAccount-navigation ul li a { display: block; padding: 0.75rem 1rem; color: var(--color-text); text-decoration: none; transition: all 0.3s ease; } .woocommerce-MyAccount-navigation ul li a:hover { background-color: var(--color-primary-light); color: var(--color-primary-medium); padding-left: 1.5rem; } /* Active menu item */ .woocommerce-MyAccount-navigation ul li.is-active a, .woocommerce-MyAccount-navigation ul li.is-active a:hover { background-color: var(--color-primary-medium); color: var(--color-white); border-left: 5px solid var(--color-primary); padding-left: 1rem; } /* === Buttons === */ .woocommerce-account .button, .woocommerce-account input[type="submit"] { background-color: var(--color-primary-medium); color: var(--color-white); border: none; cursor: pointer; font-weight: bold; text-transform: uppercase; transition: background-color 0.3s ease; } .woocommerce-account .button:hover, .woocommerce-account input[type="submit"]:hover { background-color: var(--color-primary); } .woocommerce-account .button.alt { /* For secondary buttons like "Add New Address" */ background-color: var(--color-layer-3); } .woocommerce-account .button.alt:hover { background-color: #5a6268; } .woocommerce-account form button[type="submit"] { margin-top: 1.5rem !important; } /* === Tables (Orders, Addresses) === */ .woocommerce-account table.shop_table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-family: 'Roboto', sans-serif; } .woocommerce-account table.shop_table th, .woocommerce-account table.shop_table td { border: 1px solid #eee; padding: 12px; text-align: left; } .woocommerce-account table.shop_table th { background-color: #f0f0f0; font-weight: bold; color: #444; text-transform: uppercase; font-size: 0.9em; } .woocommerce-account table.shop_table tbody tr:nth-child(even) { background-color: #fdfdfd; /* Alternate row background */ } /* === Form Fields === */ .woocommerce-account form .form-row input.input-text, .woocommerce-account form .form-row select, .woocommerce-account form .form-row textarea { width: 100%; padding: 10px; border: 1px solid var(--color-layer-3); border-radius: 4px; box-sizing: border-box; color: var(--color-text); font-size: var(--fs-2); } .woocommerce-account form .form-row label { font-weight: 600; margin-bottom: 5px; display: block; color: #444; font-family: 'Roboto', sans-serif; } /* Error and success messages */ .woocommerce-message, .woocommerce-error, .woocommerce-info { background-color: #e9f5e9; /* Light green for success */ border-top-color: #8bc34a; color: var(--color-text); padding: 1em 2em 1em 3.5em; margin: 0 0 2em; position: relative; list-style: none; } .woocommerce-error { background-color: #fbeaea; /* Light red for error */ border-top-color: #e54040; } .woocommerce-info { background-color: #e7f7ff; /* Light blue for info */ border-top-color: var(--color-primary-medium); } #account_display_name_description { font-size: var(--fs-1); } .woocommerce-EditAccountForm fieldset { border: 1px solid var(--color-layer-3); border-radius: 4px; } .select2 .selection { font-size: var(--fs-2) !important; } .woocommerce-Addresses>* { border: 1px solid var(--color-layer-3); } .woocommerce-Addresses address { padding: 2rem; } .woocommerce-Addresses h2 { margin-top: 0; padding: 1rem 2rem; text-transform: uppercase; font-size: var(--fs-2); border: none; text-align: start; background-color: var(--color-layer-2); border-bottom: 1px solid var(--color-layer-3); } .woocommerce-Addresses a { font-size: var(--fs-1); margin-inline: 2rem; float: left !important; } .wc-block-grid__product .wc-block-grid__product-add-to-cart { display: none; visibility: hidden; } #wc-stripe-express-checkout-element { margin-bottom: 2rem !important; } .woocommerce div.product form.cart:has(+#wc-stripe-express-checkout-element) { margin-bottom: 0 !important; } .single_add_to_cart_button { width: 100%; }