/* Table of Contents - Reusable Mixins 1) Breakpoint 2) Screen-Reader Only Text 3) Typography 4) Position 5) Clean Spacing 6) Flexbox 7) Z-Index Normalization 8) Font-Face Declaration 9) Transitions */ /* A) Single breakpoint Accepts a preset or custom point to apply a media query within the styles. It defaults to a mobile first approach of min-width constraint, but max can also be passed into the mixin to apply a desktop down approach when needed. */ /* B) Between two points breakpoint Accepts a min and max point that can either be a predefined screen size or custom sizes. */ /* 2) Screen-Reader Only Text Applies styles to move text offscreen so that it is not a visible part of the design, but can still be accessed via a screen reader. Pulled directly from Bootstrap: https://getbootstrap.com/docs/4.3/utilities/screen-readers/ */ /* 3) Typography Allows for a clean style appraoch to house all styles possibly needed for typography to be done in 1 line, instead of breaking the properties up into separate lines. */ /* 4) Position Allows for a clean styling approach to house all styles possibly needed for positioning an element on 1 line, instead of breaking the properties up into separate lines. */ /* 5) Clean Spacing Allows for a clean styling approach to house non-short hand margin/padding properties on 1 line, instead of multiple lines. Padding is the default, but margin can be passed in to switch property target. This is not to be used in cases where short hand is appropriate to use, but rather for when we do not need browsers to calculate all 4 styles. */ /* 6) Flexbox Allows for a clean styling approach to house most commonly used flexbox properties in 1 line, instead of multiple lines. Display: flex is included by default, but cases where it is not needed on children, passing false to the mixin will leave it off. This does not cover all of the possible flex properties. Other properties, such as flex/flex-basis/flex-shrink/etc will still need to be added seperatly to your style block. */ /* 7) Z-Index Normalization Think of these z-index maps indices as "tiers". When an element needs a higher z-index, bump up the value in increments of 1 until things work (z(1), z(2), etc.), keeping the minimum value necessary to get the job done. This level of abstraction can help, in that you are writing your custom z-index values with relative tiers that will always be correct, BUT if a new toolkit is introduced with some wacky z-indices that you need to account for, you can just change the actual z-index values in the map to make things work, making sure that they remain in ascending order relative to the keys. */ /* 8) Font-Face Declaration Defines local font faces using references to static files stored in the fonts directory Expects .woff2 and .woff files to exist, per recommended guidelines for IE11 and up: https://css-tricks.com/snippets/css/using-font-face/#article-header-id-1 */ /* 9) Transitions Sets defaults for site wide transition type and speed, or allows customizing */ /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio, svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 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 { 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 { appearance: revert; } /* 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; user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } :root { --color-white: #fff; --color-black: #000; --color-black-light: #2f3133; --color-warning: #fff3cd; --color-warning-secondary: #ffecb5; --color-warning-terciary: #f8ac59; --color-warning-text: #664d03; --color-info: #d9edf7; --color-info-secondary: #bce8f1; --color-info-text: #31708f; --color-error: #ce465f; --color-error-secondary: #47151f; --font-base: 16; --font-stack-arial: arial, "Helvetica Neue", helvetica, sans-serif; } .admin { --color-background: #f3f3f4; --color-background-light: #fafafa; --color-border: #e7eaec; --color-border-dark: #cccccc; --color-border-dark-secondary: #686a6c; --color-primary: #088488; --color-secondary: #0e5345; --color-tertiary: #676a6c; --color-link-primary: #1072b1; --color-link-primary-hover: #2a6496; --color-starred: #e2d706; --font-base-size: calc((13 / var(--font-base)) * 1rem); --font-heading-size: calc((14 / var(--font-base)) * 1rem); --font-lead-size: calc((21 / var(--font-base)) * 1rem); --font-page-title-size: calc((24 / var(--font-base)) * 1rem); --font-small-size: calc((11 / var(--font-base)) * 1rem); --space-small: calc((6 / var(--font-base)) * 1rem); --space-medium: calc((15 / var(--font-base)) * 1rem); --space-large: calc((25 / var(--font-base)) * 1rem); --border-radius: calc((4 / var(--font-base)) * 1rem); --border: 1px solid var(--color-border); --border-dark: 1px solid var(--color-border-dark); --border-dark-secondary: 1px solid var(--color-border-dark-secondary); } .public { --font-stack-ubuntu: "Ubuntu", serif; --font-stack-roboto: "Roboto", serif; --font-base-size: calc((16 / var(--font-base)) * 1rem); --font-heading1-size: calc((56 / var(--font-base)) * 1rem); --font-heading2-size: calc((40 / var(--font-base)) * 1rem); --font-heading3-size: calc((24 / var(--font-base)) * 1rem); --font-heading4-size: calc((18 / var(--font-base)) * 1rem); --font-large-size: calc((20 / var(--font-base)) * 1rem); --font-small-size: calc((14 / var(--font-base)) * 1rem); --color-primary: #891b1c; --color-primary-accent: #bd5d5e; --color-secondary: #119695; --color-secondary-accent: #5dbcbc; --color-font: #381212; --color-font-light: rgba(56, 18, 18, 0.7); --color-background: #d0ebeb; --color-background-light: #e5f5f5; --color-disabled: #c3b8b8; --space-xsmall: calc((8 / var(--font-base)) * 1rem); --space-small: calc((12 / var(--font-base)) * 1rem); --space-medium: calc((16 / var(--font-base)) * 1rem); --space-large: calc((18 / var(--font-base)) * 1rem); --space-xlarge: calc((36 / var(--font-base)) * 1rem); --space-vertical-max-standard: calc((48 / var(--font-base)) * 1rem); --space-horizontal-max-standard: calc((72 / var(--font-base)) * 1rem); --input-size-custom: calc((40 / var(--font-base)) * 1rem); --border-radius: calc((8 / var(--font-base)) * 1rem); --border-radius-large: calc((16 / var(--font-base)) * 1rem); --border-input: 1px solid var(--color-disabled); --border-faq: 1px solid var(--color-primary); --border-light: 1px solid var(--color-font-light); } /* Table of Contents - Global tag Styles for app 1) Tags */ html { font-family: var(--font-stack-arial); font-size: calc(16 / var(--font-base) * 1rem); line-height: 1.3; height: 100%; } body { min-height: 100%; } button, input, label { cursor: pointer; } strong { font-weight: 700; } em { font-style: italic; } .show { display: block !important; } .hide { display: none !important; } .no-scroll { overflow-y: hidden; } .list { list-style-type: disc; } .list__item { margin-left: var(--space-xlarge); } /* Table of Contents - Global grid base for app 1) Grid Base 2) Grid Types 3) Cells */ .grid { display: grid; grid-template-areas: var(--grid-template-areas); grid-template-columns: var(--grid-template-columns); grid-template-rows: var(--grid-template-rows); /* stylelint-disable-line declaration-block-no-redundant-longhand-properties */ gap: var(--grid-gap); } .grid--50-50 { --grid-template-columns: repeat(2, 1fr); } .grid--small-gap { grid-column-gap: 1rem; } .grid--gap-y-big { column-gap: calc(var(--grid-gap) * 2); } .flexbox { display: flex; gap: calc(22 / var(--font-base) * 1rem) min(22 / var(--font-base) * 1rem, 65 / var(--font-base) * 1rem); justify-content: flex-start; align-items: center; } .flexbox--column { flex-direction: column; } .flexbox--center { justify-content: center; } .flexbox--align-top { align-items: flex-start; } .flexbox--right { justify-content: flex-end; } .flexbox--no-gap { gap: 0; } .flexbox--even { justify-content: space-between; } .flexbox--xs-gap { gap: 4px; } .flexbox--md-gap { gap: calc(12 / var(--font-base) * 1rem) min(12 / var(--font-base) * 1rem, 36 / var(--font-base) * 1rem); } .flexbox--small-gap { gap: calc(8 / var(--font-base) * 1rem) min(8 / var(--font-base) * 1rem, 32 / var(--font-base) * 1rem); } .flexbox--big-gap { gap: calc(48 / var(--font-base) * 1rem) min(48 / var(--font-base) * 1rem, 65 / var(--font-base) * 1rem); } .flexbox--column { flex-direction: column; } .flexbox--align-start { align-items: flex-start; } .flexbox--align-end { align-items: flex-end; } .flexbox--space-between { justify-content: space-between; } /* Table of Contents - Global input base for the app 1) Input Base 2) Custom Checkbox/Radios 3) Select Menus 4) Labels */ .input { color: var(--input-text-color); font-size: var(--input-text-size, var(--font-base-size)); background: var(--input-background-color, var(--color-white)); border: var(--input-border, var(--border-dark-secondary)); border-radius: var(--input-border-radius, var(--border-radius)); cursor: pointer; width: 100%; } .input--custom { appearance: none; background: var(--input-custom-background-color, var(--color-white)); display: grid; place-content: center; width: var(--input-custom-width, 1.15rem); height: var(--input-custom-height, 1.15rem); margin: 0; } .input--custom::before { content: ""; box-shadow: inset 1em 1em var(--color-black); height: 0.65em; transform: scale(0); transform-origin: bottom left; transition: transform 300ms ease-out; width: 0.65em; } .input--custom:checked::before { transform: scale(1); } .input--checkbox::before { clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); } .input--radio { --input-border-radius: 50%; transform: translateY(-0.075em); } .input--radio::before { content: ""; border-radius: 50%; } .input--date-placeholder::placeholder { color: var(--color-disabled); font-size: 12px; } .select { position: relative; z-index: 100; appearance: none; grid-area: select; padding: 0 1em 0 0; } .select:disabled { background-color: #fafafa; cursor: not-allowed; } .input--select { align-items: center; display: grid; grid-template-areas: "select"; position: relative; --select-background-color: var(--color-disabled); } .input--select::after { content: ""; grid-area: select; justify-self: end; width: 0.8em; height: 0.5em; margin-right: 1rem; background-color: var(--select-background-color, currentcolor); clip-path: polygon(100% 0%, 0 0%, 50% 100%); z-index: 200; } .label--custom { align-items: end; display: grid; grid-template-columns: var(--input-custom-grid-columns, 1em auto); gap: var(--space-medium); } .label--vertical-space { margin-top: var(--input-vertical-space, var(--space-medium)); } .select-custom { display: flex; align-items: center; justify-content: flex-start; position: relative; } .select-custom__options { display: none; position: absolute; top: 40px; right: 0; left: 0; border-bottom-left-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); background-color: #ffffff; border: var(--input-border, var(--border)); overflow: hidden; } .select-custom__option { padding: var(--space-small); cursor: pointer; } .select-custom__option:hover { background-color: var(--color-background); } .select-custom__expand { position: absolute; top: 50%; right: 0; transform: translateY(-50%); font-size: calc(var(--font-base-size) * 2.5); font-weight: 600; color: var(--color-primary); } .checkbox--toggle { border: var(--border-input); cursor: pointer; position: relative; width: 76px; height: 40px; background-color: var(--color-white); border-radius: 20px; box-shadow: inset -40px 0 0 0 var(--color-white); } .checkbox--toggle::after { content: ""; position: absolute; top: 50%; left: 2px; background-color: var(--color-disabled); width: 32px; height: 32px; border-radius: 50%; transform: translateY(-50%); } .checkbox--toggle:checked { box-shadow: inset 34px 0 0 0 var(--color-disabled); background-color: var(--color-disabled); border-color: var(--color-primary); } .checkbox--toggle:checked:after { left: 40px; background-color: var(--color-primary); } .radio-block__wrapper { border: var(--input-border, var(--border-light)); border-radius: 0.5rem; overflow: hidden; } .radio-block__wrapper.public__input--error .radio-block__item { border-color: #FE1313; } .radio-block__item { flex: 1; border-right: 1px solid var(--color-font-light); text-align: center; } .radio-block__item--last { border-right: none; } .radio-block__input { display: none; } .radio-block__input:checked + label { background-color: var(--color-primary); } .radio-block__input:checked + label > .text { --text-color: var(--color-white); } .radio-block__label { display: block; padding: var(--space-medium) var(--space-xlarge); cursor: pointer; } /* Table of Contents - Reusable Mixins 1) Breakpoint 2) Screen-Reader Only Text 3) Typography 4) Position 5) Clean Spacing 6) Flexbox 7) Z-Index Normalization 8) Font-Face Declaration 9) Transitions */ /* A) Single breakpoint Accepts a preset or custom point to apply a media query within the styles. It defaults to a mobile first approach of min-width constraint, but max can also be passed into the mixin to apply a desktop down approach when needed. */ /* B) Between two points breakpoint Accepts a min and max point that can either be a predefined screen size or custom sizes. */ /* 2) Screen-Reader Only Text Applies styles to move text offscreen so that it is not a visible part of the design, but can still be accessed via a screen reader. Pulled directly from Bootstrap: https://getbootstrap.com/docs/4.3/utilities/screen-readers/ */ /* 3) Typography Allows for a clean style appraoch to house all styles possibly needed for typography to be done in 1 line, instead of breaking the properties up into separate lines. */ /* 4) Position Allows for a clean styling approach to house all styles possibly needed for positioning an element on 1 line, instead of breaking the properties up into separate lines. */ /* 5) Clean Spacing Allows for a clean styling approach to house non-short hand margin/padding properties on 1 line, instead of multiple lines. Padding is the default, but margin can be passed in to switch property target. This is not to be used in cases where short hand is appropriate to use, but rather for when we do not need browsers to calculate all 4 styles. */ /* 6) Flexbox Allows for a clean styling approach to house most commonly used flexbox properties in 1 line, instead of multiple lines. Display: flex is included by default, but cases where it is not needed on children, passing false to the mixin will leave it off. This does not cover all of the possible flex properties. Other properties, such as flex/flex-basis/flex-shrink/etc will still need to be added seperatly to your style block. */ /* 7) Z-Index Normalization Think of these z-index maps indices as "tiers". When an element needs a higher z-index, bump up the value in increments of 1 until things work (z(1), z(2), etc.), keeping the minimum value necessary to get the job done. This level of abstraction can help, in that you are writing your custom z-index values with relative tiers that will always be correct, BUT if a new toolkit is introduced with some wacky z-indices that you need to account for, you can just change the actual z-index values in the map to make things work, making sure that they remain in ascending order relative to the keys. */ /* 8) Font-Face Declaration Defines local font faces using references to static files stored in the fonts directory Expects .woff2 and .woff files to exist, per recommended guidelines for IE11 and up: https://css-tricks.com/snippets/css/using-font-face/#article-header-id-1 */ /* 9) Transitions Sets defaults for site wide transition type and speed, or allows customizing */ /* Table of Contents - Global call to action base for the app 1) Button Base A) With Icon B) Button Group C) With Dropdown 2) Text Link Base 3) Dropdown Menu 4) Skip Link */ .button { color: var(--button-text-color); font-family: var(--button-text-stack); font-size: var(--button-text-size); background: var(--button-background-color, transparent); border: 1px solid var(--button-border-color); border-radius: var(--button-border-radius); padding: var(--button-vertical-space, var(--space-small)) var(--button-horizontal-space, calc(var(--space-small) * 2)); text-align: center; transition: background-color 300ms ease-out, color 300ms ease-out, border-color 300ms ease-out; } .button--icon { display: flex; align-items: center; } .button__group { display: flex; } .button__group .button:first-of-type { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; } .button__group .button:last-of-type { border-top-left-radius: 0; border-bottom-left-radius: 0; } .button--dropdown::after { content: ""; border: solid currentcolor; border-width: 0 3px 3px 0; display: inline-block; padding: 4px; transform: rotate(45deg); display: inline-block; margin-left: 0.3em; vertical-align: 0.15em; } .link { color: var(--link-text-color); font-size: var(--link-text-size); font-weight: var(--link-text-weight); text-decoration: var(--link-decoration); transition: color 300ms ease-out, text-decoration 300ms ease-out; } .dropdown { position: relative; } .dropdown-menu { position: absolute; z-index: 100; background-color: var(--color-white); background-clip: padding-box; border: var(--dropdown-border, var(--border)); border-radius: var(--border-radius); display: none; padding: var(--space-small); text-align: left; } .dropdown-menu.show { display: block; } .dropdown-item { display: block; padding: var(--space-small); } .link__skip-to-content { position: absolute; left: 0; z-index: 900; background: var(--color-font); color: var(--color-white); padding: var(--space-medium); transform: var(--skip-link-translate, translateY(-100%)); transition: transform 0.3s; } .link__skip-to-content:focus { --skip-link-translate: translateY(0%); } .order-cta { gap: 3rem; } .order-cta .heading { font-size: 2.5rem; margin: 0 !important; padding: 0; } .order-cta .space { flex: 1; } .order-cta .button { z-index: 1; } @media (max-width: 47.9375rem) { .order-cta { flex-direction: column; gap: 1rem; } .order-cta .button { width: 100%; } } /* Table of Contents - Global typography base for the app 1) Text Base 2) Alignments 3) Sizes */ .text { color: var(--text-color); font-family: var(--text-stack); font-size: var(--text-size); font-weight: var(--text-weight); line-height: var(--text-line-height); text-align: var(--text-align); text-transform: var(--text-transform); } .text--center { --text-align: center; } .text--right { --text-align: right; } .text--small { --text-size: var(--font-small-size); } .text--sub-heading { --text-size: 65%; } .text--bold { --text-weight: 700; } .text--light { --text-weight: 400; } .text--italic { font-style: italic; } .text--dimmed { --text-color: var(--color-font-light) !important; } .text--line-through { text-decoration: line-through; } .text--underline { text-decoration: underline; } .text--uppercase { --text-transform: uppercase; } .text--underline { text-decoration: underline; } .text--body { --text-color: var(--color-font); } .text--body-light { --text-color: var(--color-font-light); } .text--paragraph { margin-top: var(--space-small); } /* Table of Contents - Global icon base for the app 1) Icon Base 2) Text Space */ .icon { vertical-align: middle; } .icon--space-right { margin-right: var(--space-small); } .icon--space-left { margin-left: var(--space-small); } /* Table of Contents - Global modal styles for app 1) Overlay 2) Modal */ .overlay { position: fixed; top: 0; left: 0; z-index: 1000; background-color: rgba(0, 0, 0, 0.4); display: none; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; outline: 0; } .modal { display: none; overflow: hidden; border-radius: var(--border-radius-large); border: 1px solid var(--color-secondary); position: fixed; top: 50%; left: 50%; z-index: 9999; background: var(--color-white); transform: translateX(-50%) translateY(-50%); box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.25); --grid-gap: var(--space-small); } .modal-page { display: none; } .modal-header { display: flex; align-items: center; justify-content: flex-start; padding: var(--space-medium) var(--space-large); border-bottom: 1px solid var(--color-secondary); } .modal-header--admin { border-color: var(--color-border); } .modal-header--no-icon { padding: var(--grid-gap) 25px var(--grid-gap) 25px; } .modal-symbol { color: var(--color-font); font-size: 2.5rem; } .modal-close-header { color: var(--color-primary); font-size: 2.5rem; cursor: pointer; margin-left: auto; } .modal-title { color: var(--color-font); } .modal-body { color: var(--color-font); border-bottom: var(--border); border-top: var(--border); padding: calc(var(--grid-gap) * 2) 25px calc(var(--grid-gap) * 2) 25px; } .modal-body--admin { padding: 0; } .modal-content--with-margin { margin-bottom: var(--space-medium); } .modal-content--admin { background-color: var(--color-background-light); padding: calc(var(--grid-gap) * 2) 25px calc(var(--grid-gap) * 2) 25px; } .modal-footer--admin { padding: calc(var(--grid-gap) * 2) 25px calc(var(--grid-gap) * 2) 25px; background-color: #ffffff; } .modal-footer--with-margin { margin-top: var(--space-xlarge); } .modal-text-block { margin-top: var(--space-large); } @media screen and (max-width: 875px) { .modal { border-radius: 0; width: 100%; position: fixed; top: 0; right: 0; bottom: 0; left: 0; transform: none; } .modal-header { height: 92px; } .modal .modal-body .grid--50-50 { --grid-template-columns: none; } .modal .modal-body { height: calc(100% - 92px); overflow-y: auto; } } /* Table of Contents - Background for the public app 1) Linear Gradients 2) Bubble Accents */ .background__gradient--light-full { background: linear-gradient(180deg, var(--color-background) 0%, var(--color-white) 50%, var(--color-background) 100%); } .background__gradient--light-top-down { background: linear-gradient(180deg, var(--color-background) 0%, rgba(255, 255, 255, 0.5) 100%); } .background__gradient--light-top-down-solid { background: linear-gradient(180deg, var(--color-background) 0%, rgb(255, 255, 255) 100%); } .background__gradient--light-half { background: linear-gradient(180deg, var(--color-background) 0%, var(--color-background) 100%); } .background__gradient--light-down-top { background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 80%, var(--color-background) 100%); } .background__gradient--dark { background: linear-gradient(180deg, var(--color-background-light) 0%, var(--color-background) 100%); } .bubbles { position: relative; } @media (max-width: 47.9375rem) { .bubbles--top { aspect-ratio: 1/1; background: rgba(255, 255, 255, 0.5); border-radius: 50%; display: block; position: absolute; top: calc(24 / var(--font-base) * -1rem); left: 75%; height: calc(48 / var(--font-base) * 1rem); width: calc(48 / var(--font-base) * 1rem); } .bubbles--top:before { content: ""; aspect-ratio: 1/1; background: rgba(255, 255, 255, 0.5); border-radius: 50%; display: block; position: absolute; top: 13vh; left: -15vw; height: 1.5rem; width: 1.5rem; } .bubbles--bottom { display: none; } } @media (min-width: 48rem) { .bubbles--top { aspect-ratio: 1/1; background: rgba(255, 255, 255, 0.5); border-radius: 50%; display: block; position: absolute; top: calc(24 / var(--font-base) * -1rem); left: 30%; height: calc(176 / var(--font-base) * 1rem); width: calc(176 / var(--font-base) * 1rem); } .bubbles--top:before { content: ""; aspect-ratio: 1/1; background: rgba(255, 255, 255, 0.5); border-radius: 50%; display: block; position: absolute; top: 65%; left: -40%; height: 7.125rem; width: 7.125rem; } .bubbles--top:after { content: ""; aspect-ratio: 1/1; background: rgba(255, 255, 255, 0.5); border-radius: 50%; display: block; position: absolute; top: 120%; left: 55%; height: 5.3125rem; width: 5.3125rem; } .bubbles--bottom { aspect-ratio: 1/1; background: rgba(255, 255, 255, 0.5); border-radius: 50%; display: block; position: absolute; bottom: 0; left: 50%; height: calc(32 / var(--font-base) * 1rem); width: calc(32 / var(--font-base) * 1rem); } .bubbles--bottom:before { content: ""; aspect-ratio: 1/1; background: rgba(255, 255, 255, 0.5); border-radius: 50%; display: block; position: absolute; bottom: 150%; left: 150%; height: 4rem; width: 4rem; } } .bubbles__content { position: relative; z-index: 100; } /* Table of Contents - Base public container styles */ body.public { color: var(--color-font-light); font-family: var(--font-stack-roboto); font-size: var(--font-base-size); line-height: 1.5; --grid-template-rows: auto 1fr auto; } /* Table of Contents - Call to action styles for the public app 1) Bases 2) Links 3) Buttons 4) Dropdown Button */ .public__link { --link-text-color: var(--color-primary); --link-text-weight: 700; line-height: 1.5; } .public__button { --button-text-stack: var(--font-stack-ubuntu); --button-border-radius: 100vw; line-height: 1.2; } .public__dropdown { border: var(--border-input); border-radius: var(--border-radius); transition: border-color 300ms ease-out, color 300ms ease-out; } .public__dropdown:hover, .public__dropdown:focus { border-color: var(--color-font); color: var(--color-font); } .link--external { --link-decoration: underline; } .link--external:hover, .link--external:focus { --link-decoration: none; } .link--internal:hover, .link--internal:focus { --link-decoration: underline; } .link--with-icon { display: flex; align-items: center; } .button--large { --button-text-size: var(--font-heading3-size); --button-vertical-space: var(--space-large); --button-horizontal-space: calc(var(--space-large) * 2); } .button--medium { --button-text-size: var(--font-large-size); --button-vertical-space: var(--space-medium); --button-horizontal-space: min(6.25vw, calc(var(--space-medium) * 2)); } .button--primary { --button-text-color: var(--color-white); --button-background-color: var(--color-primary); } .button--primary:hover, .button--primary:focus { --button-background-color: var(--color-secondary); } .button--secondary { --button-border-color: var(--color-primary); --button-text-color: var(--color-primary); --button-background-color: var(--color-white); } .button--secondary:hover, .button--secondary:focus { --button-border-color: var(--color-secondary); --button-text-color: var(--color-secondary); } .button--rounded { --button-border-radius: 28px; } .button--wide { --button-horizontal-space: calc(var(--space-xlarge) * 2); } .button--disabled, .button:disabled { --button-text-color: var(--color-white); --button-background-color: var(--color-disabled); --button-border-color: var(--color-disabled); } .button--horizontal-space-xl { --button-horizontal-space: calc(var(--space-xlarge) * 3); } /* Table of Contents - Container styles for the public app 1) Content Containers */ .content-constraint { margin: 0 auto; max-width: 1024px; } .content-main { height: 100%; } /* Table of Contents - Input styles for the public app 1) Bases 2) Links 3) Buttons 4) Dropdown Button */ .public__input { --input-border: var(--border-input); padding: 8px 16px; } .public__input:focus, .public__input:focus-within { border: 1px solid var(--color-font); } .public__input--error { --input-border: 1px solid #FE1313; } .public__input::placeholder { color: var(--color-disabled); } .custom { --input-custom-width: var(--input-size-custom); --input-custom-height: var(--input-size-custom); transition: background-color 300ms ease-out; } .custom:checked { background: var(--color-disabled); } .custom:checked:before { position: relative; top: 5px; left: -5px; transform: scale(2); } .custom:before { box-shadow: inset 1em 1em #381212; } .custom-label { --input-custom-grid-columns: var(--input-size-custom) auto; align-items: center; } .input-group--vertical .custom-label:nth-of-type(n + 2) { margin-top: var(--space-medium); } .input-group--horizontal { display: flex; } .input-group--horizontal .custom-label:nth-of-type(n + 2) { margin-left: var(--space-large); } .form-validation { margin-top: var(--space-xsmall); } .form-validation__icon-wrapper { width: 25px; height: 25px; border-radius: 50%; } .form-validation__icon { color: var(--color-white); font-weight: 600; font-size: 22px; } .form-validation__icon--error { background-color: #FE1313; } .form-validation--error { --text-color: #FE1313 !important; } .form-group__separator { color: var(--color-disabled); } .form-group:nth-of-type(n + 2) { margin-top: var(--space-small); } /* Table of Contents - Section styles for the public app 1) Section Base 2) Section Top */ .section { padding-top: var(--section-padding-top); padding-right: var(--section-padding-right); padding-bottom: var(--section-padding-bottom); padding-left: var(--section-padding-left); margin-top: var(--section-margin-top); margin-bottom: var(--section-margin-top); } .section--standard-space { --section-padding-top: min(5vw, var(--space-vertical-max-standard)); --section-padding-left: min(5vw, var(--space-horizontal-max-standard)); --section-padding-right: min(5vw, var(--space-horizontal-max-standard)); } .section--boxed-space { --section-padding-top: min(5vw, var(--space-vertical-max-standard)); --section-padding-left: min(5vw, var(--space-horizontal-max-standard)); --section-padding-right: min(5vw, var(--space-horizontal-max-standard)); --section-padding-bottom: min(5vw, var(--space-vertical-max-standard)); } .section--no-padding { --section-padding-top: 0; --section-padding-right: 0; --section-padding-bottom: 0; --section-padding-left: 0; } .section__top { display: flex; flex-wrap: wrap; gap: calc(22 / var(--font-base) * 1rem) min(22 / var(--font-base) * 1rem, 65 / var(--font-base) * 1rem); } .section__top--left { flex-basis: calc(375 / var(--font-base) * 1rem); flex-grow: 1; } .section__top--right { flex-basis: 0; flex-grow: 999; min-inline-size: 50%; } .section__block { display: flex; flex-wrap: wrap; gap: calc(22 / var(--font-base) * 1rem) min(22 / var(--font-base) * 1rem, 65 / var(--font-base) * 1rem); flex-direction: column; } /* Table of Contents - Typography styles for the public app 1) Headings 2) Caption 3) Label 4) Colors 5) Max Character Container */ .heading { --text-stack: var(--font-stack-ubuntu); --text-color: var(--color-font); --text-weight: 700; } .heading--one { --text-size: clamp( calc(0.75 * var(--font-heading1-size)), 1.4583vw + 2.33rem, var(--font-heading1-size) ); --text-line-height: 1.1; } .heading--two { --text-size: clamp( calc(0.75 * var(--font-heading2-size)), 1.0417vw + 1.66625rem, var(--font-heading2-size) ); --text-line-height: 1.15; } .heading--three { --text-size: var(--font-heading3-size); --text-line-height: 1.2; } .heading--four { --text-size: var(--font-heading4-size); --text-line-height: 1.5; } .heading--five { font-style: italic; } .caption { --text-size: var(--font-small-size); --text-line-height: 1.3; --text-color: var(--color-font-light); } .label { --text-size: var(--font-small-size); --text-line-height: 1.15; --text-color: var(--color-font-light); --text-weight: 700; text-transform: uppercase; } .text { --text-color: var(--color-font); } .text--secondary { --text-color: var(--color-secondary); } .max-character { max-width: 80ch; } .text-spacing--xs { margin: var(--space-xsmall) 0; } .text-spacing--top-xl { margin-top: var(--space-xlarge); } .text-spacing--top-lg { margin-top: var(--space-large); } .text-spacing--bot-sm { margin-bottom: var(--space-small); } .text-spacing--bot-lg { margin-bottom: var(--space-large); } .text-sizing--large { --text-size: var(--font-large-size); } .text-sizing--medium { --text-size: var(--font-heading4-size); } .accordion { --grid-template-columns: repeat( auto-fit, minmax( max( (50% - var(--space-horizontal-max-standard)), calc((256 / var(--font-base)) * 1rem) ), 1fr ) ); --grid-template-rows: auto; --grid-gap: var(--space-medium) var(--space-horizontal-max-standard); align-items: start; } .accordion .item { border-bottom: var(--border-faq); padding: var(--space-medium); } .accordion .toggle { --text-color: var(--color-font); --text-weight: 700; display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 1rem; } .accordion .toggle:not(.collapsed) .icon { transform: rotate(180deg); } .accordion .content { display: none; } .accordion .content.show { display: block; } .report-body { padding: 0 var(--space-large); } .upgrade-payment-modal-trigger { --button-text-size: var(--font-heading3-size); } .upgrade-payment-modal { width: 640px; max-width: 640px; } .upgrade-payment-modal__list { list-style-type: disc; margin-top: var(--space-medium); margin-left: var(--space-xlarge); } .upgrade-payment-modal__list-item { margin-bottom: var(--space-small); } .upgrade-payment-modal .modal-content { padding: 0 48px; } .report-header { position: relative; text-align: center; margin: var(--space-large) 0; background-color: var(--color-white); } .report-header__logo { width: 400px; height: auto; margin: 0 auto var(--space-xsmall) auto; } .report-header__logo .anchor { display: flex; justify-content: space-between; align-items: center; width: 100%; } .report-header__logo .anchor .col { width: 400px; } .report-header__logo .anchor .col-1 { width: 33.3%; } .report-header__logo .anchor .col-2 { width: 33.3%; white-space: nowrap; } .report-header__logo .anchor .col-3 { width: 33.3%; } .report-header__date { position: relative; } .report-header__date:after { content: "|"; position: absolute; right: -0.75rem; bottom: 0; height: 100%; } .report-header__order-number { position: relative; } .report-header__order-number:after { content: ""; position: absolute; right: -0.75rem; bottom: calc(0 - var(--space-xsmall)); border-right: 2px dotted #5dbcbc; height: calc(100% + var(--space-xsmall)); } .report-header__meta { padding-bottom: var(--space-xsmall); } .dotted-border:after { content: ""; position: absolute; bottom: -0.125rem; left: 0; border-bottom: 0.25rem dotted #119695; width: 100%; } .upgrade-order { margin: var(--space-medium) 0; padding-bottom: var(--space-xsmall); border-bottom: var(--border-faq); } .upgrade-order__title { --text-color: var(--clor-white); --text-weight: 500; } .upgrade-order__header { padding: var(--space-small) var(--space-large); background-color: var(--color-primary); } .upgrade-order__header .toggle { --text-color: var(--color-white); --text-weight: 700; display: flex; align-items: center; justify-content: space-between; width: 100%; } .upgrade-order__header .toggle:not(.collapsed) .icon { transform: rotate(180deg); } .upgrade-order__header .icon { color: var(--color-white); font-size: calc(34 / var(--font-base) * 1rem); } .upgrade-order__body { border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); border: var(--border-faq); overflow: hidden; } .upgrade-order__expand-label { margin-left: auto; margin-right: calc(var(--space-xsmall) / 2); --text-color: var(--clor-white); --text-weight: 700; --text-size: var(--font-heading4-size); } .upgrade-order__text { --text-color: var(--color-black-light); } .upgrade-order__current-package { margin-top: var(--space-large); --text-weight: 500; --text-size: var(--font-heading3-size); } .upgrade-order__current-package-price { --text-weight: 700; } .upgrade-order .content { background-color: var(--color-background-light); padding: var(--space-small) var(--space-large); } .package-upgrades { margin: var(--space-large) 0; } .package-upgrades__title { --text-weight: 500; --text-color: var(--color-primary); --text-size: var(--font-heading3-size); padding-bottom: calc(var(--space-xsmall) / 2); border-bottom: var(--border-faq); } .package-upgrades__packages { margin: var(--space-xlarge) 0; padding: 0 var(--space-medium); } .package-upgrades__package { color: var(--color-font); --grid-template-columns: 40px 1fr; --grid-gap: var(--space-xsmall); } .package-upgrades__input { justify-self: center; } .package-upgrades__package-list { list-style-type: decimal; margin-left: 70px; margin-top: var(--space-small); } .package-upgrades__package-list--single-grid-view { grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; grid-column-gap: calc(var(--space-xlarge) * 2); margin-top: var(--space-xlarge); } .package-upgrades__package-list--single-grid-view > .package-upgrades__package-list-item:nth-child(-n+8) { grid-column: 1; } .package-upgrades__package-list--single-grid-view > .package-upgrades__package-list-item::nth-child(n + 8) { grid-column: 2; } .package-upgrades__package-list-item { margin-bottom: var(--space-xsmall); } .package-upgrades__package-list-item::marker { font-weight: bold; } .package-upgrades__package-price, .package-upgrades__package-name, .package-upgrades__plus { font-size: var(--font-heading3-size); } .package-upgrades__package-checkbox { --input-custom-width: 40px; --input-custom-height: 40px; --input-border-radius: 50%; border: var(--border-input); } .package-upgrades__package-checkbox::before { height: 1.4rem; width: 1.4rem; border-radius: 50%; box-shadow: inset 1em 1em var(--color-primary); } .package-upgrades__package-checkbox:checked { border-color: var(--color-primary); background-color: rgba(195, 184, 184, 0.7); } .package-upgrades__credit-card--visa { width: 30px; height: 30px; } .package-upgrades__credit-card--mastercard { width: 46px; height: 46px; } .package-upgrades__credit-card--amex { width: 43px; height: 43px; } .package-upgrades__credit-card--discover { width: 35px; height: 35px; } .export-pdf-button { margin-left: auto; gap: 0.5rem; } .report-section { margin-bottom: var(--space-large); border: 1px solid var(--color-font); border-radius: var(--border-radius); overflow: hidden; } .report-section__test-results { margin-bottom: var(--space-large); } .report-section__title { --text-color: var(--color-white); } .report-section__icon { font-size: var(--font-heading2-size); } .report-section__header { padding: var(--space-small) var(--space-medium); background-color: var(--color-font); color: var(--color-white); } .report-section__body { padding: var(--space-small) var(--space-medium); } .report-section__body--no-padding { padding: 0; } .report-section__heading { margin-bottom: var(--space-large); } .grid--1-4 { grid-template-columns: 1fr 4fr; } .photo-pending { width: 200px; height: 200px; background-color: rgba(222, 222, 222, 0.25); border: 3px solid #dedede; } .photo-pending__icon { font-size: var(--font-heading1-size); color: #999999; } .photo-pending__text { --text-size: var(--font-heading3-size); --text-color: #999999; } .table { display: table; width: 100%; } .table__head { --text-size: var(--font-heading3-size); border-bottom: 1px solid var(--color-font); height: 48px; } .table__body > .table__row { position: relative; } .table__body > .table__row:after { content: ""; position: absolute; bottom: -0.125rem; left: 0; border-bottom: 0.125rem dotted var(--color-font); width: 100%; } .table__body > .table__row--last:after { border-bottom: none; } .table__data { padding: var(--space-small) var(--space-large); vertical-align: middle; } .quality-control-tests__name { --text-size: var(--font-heading3-size); --text-weight: 400; } .quality-control-tests__passed, .quality-control-tests__failed { width: 163px; background-color: var(--color-secondary); padding: var(--space-xsmall); } .quality-control-tests__failed { background-color: #bd5d5e; } .quality-control-tests__icon { color: var(--color-white); font-size: calc(var(--font-heading3-size) * 1.5); } .quality-control-tests__result { --text-size: var(--font-heading3-size); --text-color: var(--color-white); --text-weight: 600; } .quality-control-tests__trigger { margin-top: var(--space-small); cursor: pointer; } .quality-control-tests__trigger-icon { width: 32px; height: 32px; background-color: var(--color-primary); color: var(--color-white); border-radius: 50%; } .quality-control-tests__trigger-question { --text-color: var(--color-primary); } .test-results__pathogen-description { --text-weight: 400; --text-size: var(--font-small-size); } .test-results__positive, .test-results__negative { width: 163px; padding: var(--space-xsmall); } .test-results__positive { background-color: #bd5d5e; } .test-results__negative { background-color: #000000; } .test-results__icon { color: var(--color-white); font-size: calc(var(--font-heading3-size) * 1.5); } .test-results__result { --text-size: var(--font-heading3-size); --text-color: var(--color-white); --text-weight: 600; } .test-results__trigger { margin-top: var(--space-small); cursor: pointer; } .test-results__trigger-icon { width: 32px; height: 32px; background-color: var(--color-primary); color: var(--color-white); border-radius: 50%; } .test-results__trigger-question { --text-color: var(--color-primary); } .pending-result { width: 163px; background-color: transparent; border: 2px solid var(--color-secondary); padding: var(--space-xsmall); } .pending-result__icon { color: var(--color-secondary); font-size: calc(var(--font-heading3-size) * 1.5); } .pending-result__result { --text-size: var(--font-heading3-size); --text-color: var(--color-secondary); --text-weight: 600; } .modal-positive-test-result__message { margin-bottom: var(--space-xlarge); } @media print { .hide-print { display: none; } } .order-progress { padding: var(--space-large) 0; } .order-progress__current-page { --text-color: var(--color-secondary-accent); } .order-progress__bar-circle { width: 28px; height: 28px; border-radius: 50%; border: 4px solid var(--color-white); background-color: var(--color-white); } .order-progress__bar-connector { height: 4px; background-color: var(--color-white); width: 4rem; } .order-progress__bar-step--current .order-progress__bar-circle { border-color: var(--color-secondary-accent); } .order-progress__bar-step--done .order-progress__bar-circle, .order-progress__bar-step--done .order-progress__bar-connector { background-color: var(--color-secondary-accent); border-color: var(--color-secondary-accent); } .order-progress__bar-done { color: var(--color-white); } .order-page__wrapper { --grid-template-columns: 3fr 1fr; } .order-page__restart-order { text-decoration: none; cursor: pointer; } .order-page__restart-order-text { --text-color: var(--color-primary); } .order-page__restart-order-icon { color: var(--color-primary); } .order-page__main { position: relative; padding: var(--space-xlarge) var(--space-large) var(--space-vertical-max-standard) var(--space-vertical-max-standard); } .order-page__main::after { content: ""; position: absolute; top: 0; right: -0.125rem; bottom: 0; border-right: 0.25rem dotted var(--color-secondary); } .order-page__main--no-border::after { border-right: none; } .order-page__footer { padding: 0 0 calc(var(--space-vertical-max-standard) * 1.5) var(--space-vertical-max-standard); } .order-page__sidebar { padding: var(--space-xlarge) var(--space-vertical-max-standard) var(--space-vertical-max-standard) var(--space-large); } .order-page__section { margin-top: var(--space-xlarge); } .order-page__section--first { margin-bottom: var(--space-xlarge); } .order-page__section-title { font-size: calc(var(--font-large-size) * 1.5); --text-stack: var(--font-stack-ubuntu); --text-color: var(--color-font); } .order-page__heading { --text-size: calc(var(--font-large-size) * 1.5); --text-stack: var(--font-stack-ubuntu); --text-color: var(--color-font); margin-top: var(--space-large); } .order-page__heading-description { margin-top: var(--space-large); } .form-group { margin-top: var(--space-large); } .form-group--no-margin { margin-top: 0; } .form-description { margin: var(--space-large) 0; } .terms-and-conditions { width: 40px; height: 40px; } .terms-and-conditions::before { width: 1.3rem; height: 1.3rem; box-shadow: inset 1em 1em var(--color-white); } .terms-and-conditions:checked { --input-border: 1px solid var(--color-primary); background-color: var(--color-primary); } .faq-expand-icon { font-size: calc(var(--font-heading3-size) * 1.5); color: var(--color-primary); } .faq-item { padding: var(--space-small); } .faq-list { list-style-type: disc; margin-left: var(--space-xlarge); } .faq-text { margin: var(--space-xsmall) 0; } .sidebar__heading { margin-bottom: var(--space-large); } .sidebar__section { margin-bottom: var(--space-xlarge); } .credit-cards__visa { width: 48px; height: 39px; } .credit-cards__mastercard { width: 61px; height: 61px; } .credit-cards__amex { width: 57px; height: 57px; } .credit-cards__discover { width: 47px; height: 46px; } .credit-cards--margin-top { margin-top: var(--space-medium); } .credit-cards--sidebar > .credit-cards__visa { width: 30px; height: 30px; } .credit-cards--sidebar > .credit-cards__mastercard { width: 46px; height: 46px; } .credit-cards--sidebar > .credit-cards__amex { width: 43px; height: 43px; } .credit-cards--sidebar > .credit-cards__discover { width: 35px; height: 35px; } .ssl-certificate { margin: var(--space-large) 0; } .test-plans__content { padding-bottom: var(--space-xlarge); border-bottom: var(--border-faq); } .test-plans__header { border-bottom: var(--border-faq); padding-bottom: 0.5rem; } .test-plans__expand-icon { font-size: calc(var(--font-heading3-size) * 1.5); color: var(--color-primary); } .test-plan { width: 100%; padding: var(--space-small); border: 1px solid transparent; } .test-plan:first-child { margin-top: var(--space-medium); } .test-plan__name, .test-plan__price { font-size: calc(var(--font-large-size) * 1.5); } .test-plan__price { margin-left: auto; } .test-plan__price--discounted { display: flex; gap: 1rem; align-items: center; } .test-plan__price--discounted .test-plan__price-regular { --text-color: rgba(var(--color-disabled), 0.5); --text-size: var(--font-heading3-size); text-decoration: line-through; } .test-plan__price-total, .test-plan__price-regular, .test-plan__name { --text-stack: var(--font-stack-ubuntu); --text-color: var(--color-font); } .test-plan--current { background-color: rgba(235, 231, 231, 0.3); border-radius: 0.5rem; border-color: var(--color-primary); } .test-plan--current .test-plan__name, .test-plan--current .test-plan__price { --text-color: var(--color-primary); } .test-plan-selection__section { margin-top: var(--space-xlarge); } .separator { height: 1px; background-color: var(--color-disabled); margin-top: var(--space-xlarge); } .separator--no-spacing { margin-top: 0; } .separator--equal-spacing { margin: var(--space-large) 0; } .separator--color-dimmed { background-color: rgba(32, 12, 12, 0.7); } .coupon-applied { border: var(--border-faq); border-radius: 0.5rem; margin: var(--space-large) 0; overflow: hidden; } .coupon-applied__header { background-color: var(--color-primary); padding: var(--space-xsmall) 0; } .coupon-applied__body { padding: var(--space-small) 0; } .coupon-applied__title { --text-color: var(--color-white); } .coupon-applied__remove { color: var(--color-secondary); --text-color: var(--color-secondary); } .coupon-applied__description { display: none; } .coupon-applied__description--expanded { display: block; } .tick-information__continue { margin: var(--space-xlarge) 0; } .tick-information__section-nav { margin-top: var(--space-xlarge); border-bottom: 1px solid var(--color-secondary); } .tick-information__section-nav-item { padding: var(--space-large) var(--space-medium); background-color: var(--color-background-light); border-top: 1px solid var(--color-secondary); } .tick-information__section-nav-title { color: var(--color-secondary); } .tick-information__completed-section { padding-top: var(--space-large); padding-bottom: var(--space-small); border-bottom: 1px solid var(--color-secondary); } .tick-information__completed-section-icon { margin-left: auto; width: 28px; height: 28px; background-color: var(--color-secondary-accent); color: var(--color-white); border-radius: 50%; } .checkbox--round { --input-custom-width: 26px; --input-custom-height: 26px; --input-border-radius: 50%; border: var(--input-border, var(--border-input)); } .checkbox--round.public__input--error + .text { --text-color: #FE1313; } .checkbox--round::before { height: 1rem; width: 1rem; border-radius: 50%; box-shadow: inset 1em 1em var(--color-primary); } .checkbox--round:checked { border-color: var(--color-primary); background-color: rgba(195, 184, 184, 0.7); } .orders { display: table; width: 100%; } .orders__head { border-bottom: 1px solid var(--color-secondary-accent); border-top: 1px solid var(--color-secondary-accent); height: 48px; } .orders__data { padding: var(--space-large) calc(var(--space-xlarge) * 2) var(--space-large) var(--space-large); vertical-align: middle; } .orders__data--right { text-align: right; } .orders__data--center { text-align: center; } .orders__total { border-bottom: 1px solid var(--color-secondary-accent); border-top: 1px solid var(--color-secondary-accent); text-align: right; } .orders__total-row { padding-right: 0; } .orders__total-due { --text-size: var(--font-heading4-size); } .orders__remove { background-color: var(--color-primary); border-radius: 0.25rem; padding: calc(var(--space-xsmall) / 2); cursor: pointer; } .orders__remove-icon { color: var(--color-white); font-weight: 700; font-size: var(--font-large-size); } .order-note { padding: var(--space-small); margin-bottom: var(--space-large); width: 100%; border: 1px solid var(--color-primary); } .payment-badges { margin-top: var(--space-xlarge); } .payment-badges--verified { width: 140px; height: auto; } .payment-badges--stripe { width: 135px; height: auto; } .order-numbers__item { margin-bottom: var(--space-large); } .order-numbers__id { --text-color: var(--color-primary); } .order-reminder__header { background-color: var(--color-font); } .order-reminder__body { padding: var(--space-small) var(--space-medium); background-color: rgba(93, 188, 188, 0.1); border-bottom: 1px solid var(--color-font); } .order-reminder__title { --text-size: var(--font-heading3-size); --text-color: var(--color-white); --text-stack: var(--font-stack-ubuntu); } .order-reminder__icon { color: var(--color-white); } .next-steps { margin-top: var(--space-xlarge); } .next-steps__envelope { width: 288px; height: 178px; position: relative; } .next-steps__envelope-image { max-width: unset; } .next-steps__envelope-text { color: #0031C2; position: absolute; top: 3.5rem; left: 3.6rem; font-family: "Caveat", cursive; font-size: 1.5rem; } .clear-modal h2, .clear-modal p { margin-bottom: 1rem; } .clear-modal .close-btn { margin-bottom: 1rem; } .clear-modal .modal-footer { padding: 1rem 0 1.5rem; } .clear-modal .modal-header { background: #ffffff; } .clear-modal .button { margin: 0 1rem; } .clear-modal u { text-decoration: underline; } .review-payment { /* spinner/processing state, errors */ } .review-payment .hidden { display: none; } .review-payment #payment-message-wrapper { padding: 2rem; } .review-payment .large-icon { font-size: 2rem; } .review-payment #payment-message { color: var(--color-primary); font-size: 16px; line-height: 20px; text-align: center; } .review-payment #payment-element { margin-bottom: 24px; } .review-payment button:hover { filter: contrast(115%); } .review-payment button:disabled { opacity: 0.5; cursor: default; } .review-payment .spinner, .review-payment .spinner:before, .review-payment .spinner:after { border-radius: 50%; } .review-payment .spinner { color: #ffffff; font-size: 22px; text-indent: -99999px; margin: 0px auto; position: relative; width: 20px; height: 20px; box-shadow: inset 0 0 0 2px; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); } .review-payment .spinner:before, .review-payment .spinner:after { position: absolute; content: ""; } .review-payment .spinner:before { width: 10.4px; height: 20.4px; background: #5469d4; border-radius: 20.4px 0 0 20.4px; top: -0.2px; left: -0.2px; -webkit-transform-origin: 10.4px 10.2px; transform-origin: 10.4px 10.2px; -webkit-animation: loading 2s infinite ease 1.5s; animation: loading 2s infinite ease 1.5s; } .review-payment .spinner:after { width: 10.4px; height: 10.2px; background: #5469d4; border-radius: 0 10.2px 10.2px 0; top: -0.1px; left: 10.2px; -webkit-transform-origin: 0px 10.2px; transform-origin: 0px 10.2px; -webkit-animation: loading 2s infinite ease; animation: loading 2s infinite ease; } @-webkit-keyframes loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @media only screen and (max-width: 600px) { .review-payment form { width: 80vw; min-width: initial; } } /*# sourceMappingURL=public.css.map */