/* ----------------------------------------------------------------------------- */
/* Normalize with Sanitize
/* ----------------------------------------------------------------------------- */
/* Document
* ========================================================================== */
/**
* 1. Add border box sizing in all browsers (opinionated).
* 2. Backgrounds do not repeat by default (opinionated).
*/
*,
::before,
::after {
box-sizing: border-box; /* 1 */
background-repeat: no-repeat; /* 2 */
}
/**
* 1. Add text decoration inheritance in all browsers (opinionated).
* 2. Add vertical alignment inheritance in all browsers (opinionated).
*/
::before,
::after {
text-decoration: inherit; /* 1 */
vertical-align: inherit; /* 2 */
}
/**
* 1. Use the default cursor in all browsers (opinionated).
* 2. Change the line height in all browsers (opinionated).
* 3. Breaks words to prevent overflow in all browsers (opinionated).
* 4. Use a 4-space tab width in all browsers (opinionated).
* 5. Remove the grey highlight on links in iOS (opinionated).
* 6. Prevent adjustments of font size after orientation changes in iOS.
*/
:where(:root) {
cursor: default; /* 1 */
line-height: 1.5; /* 2 */
overflow-wrap: break-word; /* 3 */ /* 4 */
tab-size: 4; /* 4 */
-webkit-tap-highlight-color: transparent; /* 5 */
-webkit-text-size-adjust: 100%; /* 6 */
text-size-adjust: 100%; /* 6 */
}
/* Sections
* ========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
:where(body) {
margin: 0;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Edge, Firefox, and Safari.
*/
:where(h1) {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
* ========================================================================== */
/**
* Remove the margin on nested lists in Chrome, Edge, and Safari.
*/
:where(dl, ol, ul) :where(dl, ol, ul) {
margin: 0;
}
/**
* 1. Correct the inheritance of border color in Firefox.
* 2. Add the correct box sizing in Firefox.
*/
:where(hr) {
color: inherit; /* 1 */
height: 0; /* 2 */
}
/**
* Remove the list style on navigation lists in all browsers (opinionated).
*/
:where(nav) :where(ol, ul) {
list-style-type: none;
padding: 0;
}
/**
* Prevent VoiceOver from ignoring list semantics in Safari (opinionated).
*/
:where(nav li)::before {
content: "\200B";
float: left;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
* 3. Prevent overflow of the container in all browsers (opinionated).
*/
:where(pre) {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
overflow: auto; /* 3 */
}
/* Text-level semantics
* ========================================================================== */
/**
* Add the correct text decoration in Safari.
*/
:where(abbr[title]) {
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
:where(b, strong) {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
:where(code, kbd, samp) {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
:where(small) {
font-size: 80%;
}
/* Embedded content
* ========================================================================== */
/*
* Change the alignment on media elements in all browsers (opinionated).
*/
:where(audio, canvas, iframe, img, svg, video) {
vertical-align: middle;
}
/**
* Remove the border on iframes in all browsers (opinionated).
*/
:where(iframe) {
border-style: none;
}
/**
* Change the fill color to match the text color in all browsers (opinionated).
*/
:where(svg:not([fill])) {
fill: currentColor;
}
/* Tabular data
* ========================================================================== */
/**
* 1. Collapse border spacing in all browsers (opinionated).
* 2. Correct table border color in Chrome, Edge, and Safari.
* 3. Remove text indentation from table contents in Chrome, Edge, and Safari.
*/
:where(table) {
border-collapse: collapse; /* 1 */
border-color: currentColor; /* 2 */
text-indent: 0; /* 3 */
}
/* Forms
* ========================================================================== */
/**
* Remove the margin on controls in Safari.
*/
:where(button, input, select) {
margin: 0;
}
/**
* Correct the inability to style buttons in iOS and Safari.
*/
:where(button, [type="button" i], [type="reset" i], [type="submit" i]) {
-webkit-appearance: button;
}
/**
* Change the inconsistent appearance in all browsers (opinionated).
*/
:where(fieldset) {
border: 1px solid #a0a0a0;
}
/**
* Add the correct vertical alignment in Chrome, Edge, and Firefox.
*/
:where(progress) {
vertical-align: baseline;
}
/**
* 1. Remove the margin in Firefox and Safari.
* 3. Change the resize direction in all browsers (opinionated).
*/
:where(textarea) {
margin: 0; /* 1 */
resize: vertical; /* 3 */
}
/**
* 1. Correct the odd appearance in Chrome, Edge, and Safari.
* 2. Correct the outline style in Safari.
*/
:where([type="search" i]) {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/**
* Correct the text style of placeholders in Chrome, Edge, and Safari.
*/
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
/**
* Remove the inner padding in Chrome, Edge, and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style upload buttons in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
* ========================================================================== */
/*
* Add the correct styles in Safari.
*/
:where(dialog) {
background-color: white;
border: solid;
color: black;
height: -moz-fit-content;
height: fit-content;
left: 0;
margin: auto;
padding: 1em;
position: absolute;
right: 0;
width: -moz-fit-content;
width: fit-content;
}
:where(dialog:not([open])) {
display: none;
}
/*
* Add the correct display in Safari.
*/
:where(details > summary:first-of-type) {
display: list-item;
}
/* Accessibility
* ========================================================================== */
/**
* Change the cursor on busy elements in all browsers (opinionated).
*/
:where([aria-busy="true" i]) {
cursor: progress;
}
/*
* Change the cursor on disabled, not-editable, or otherwise
* inoperable elements in all browsers (opinionated).
*/
:where([aria-disabled="true" i], [disabled]) {
cursor: not-allowed;
}
/*
* Change the display on visually hidden accessible elements
* in all browsers (opinionated).
*/
:where([aria-hidden="false" i][hidden]) {
display: initial;
}
:where([aria-hidden="false" i][hidden]:not(:focus)) {
clip: rect(0, 0, 0, 0);
position: absolute;
}
/**
* Restrict sizing to the page width in all browsers (opinionated).
*/
:where(iframe, img, input, video, select, textarea) {
height: auto;
max-width: 100%;
}
/**
* 1. Change the inconsistent appearance in all browsers (opinionated).
* 2. Add typography inheritance in all browsers (opinionated).
*/
:where(button, input, select, textarea) {
background-color: transparent; /* 1 */
border: 1px solid WindowFrame; /* 1 */
color: inherit; /* 1 */
font: inherit; /* 2 */
letter-spacing: inherit; /* 2 */
padding: 0.25em 0.375em; /* 1 */
}
/**
* Change the inconsistent appearance in all browsers (opinionated).
*/
:where(select) {
-webkit-appearance: none;
appearance: none;
background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E") no-repeat right center / 1em;
border-radius: 0;
padding-right: 1em;
}
/**
* Don't show the arrow for multiple choice selects
*/
:where(select[multiple]) {
background-image: none;
}
/**
* Remove the border and padding in all browsers (opinionated).
*/
:where([type="color" i], [type="range" i]) {
border-width: 0;
padding: 0;
}
/*
* 1. Remove animations when motion is reduced (opinionated).
* 2. Remove fixed background attachments when motion is reduced (opinionated).
* 3. Remove timed scrolling behaviors when motion is reduced (opinionated).
* 4. Remove transitions when motion is reduced (opinionated).
*/
@media (prefers-reduced-motion: reduce) {
*,
::before,
::after {
animation-delay: -1ms !important; /* 1 */
animation-duration: 1ms !important; /* 1 */
animation-iteration-count: 1 !important; /* 1 */
background-attachment: initial !important; /* 2 */
scroll-behavior: auto !important; /* 3 */
transition-delay: 0s !important; /* 4 */
transition-duration: 0s !important; /* 4 */
}
}
/**
* Add the correct system-ui font-family in Firefox.
*/
@font-face {
font-family: system-ui;
src: local(".AppleSystemUIFont"), local("Segoe UI"), local("Ubuntu"), local("Roboto-Regular"), local("HelveticaNeue");
}
@font-face {
font-family: system-ui;
font-style: italic;
src: local(".AppleSystemUIFont"), local("Segoe UI Italic"), local("Ubuntu-Italic"), local("Roboto-Italic"), local("HelveticaNeue-Italic");
}
@font-face {
font-family: system-ui;
font-weight: bold;
src: local(".AppleSystemUIFont"), local("Segoe UI Bold"), local("Ubuntu-Bold"), local("Roboto-Bold"), local("HelveticaNeue-Bold");
}
@font-face {
font-family: system-ui;
font-style: italic;
font-weight: bold;
src: local(".AppleSystemUIFont"), local("Segoe UI Bold Italic"), local("Ubuntu-BoldItalic"), local("Roboto-BoldItalic"), local("HelveticaNeue-BoldItalic");
}
/**
* Add the correct system-ui font-family in Chrome, Edge, and Firefox.
*/
@font-face {
font-family: ui-monospace;
src: local(".AppleSystemUIFontMonospaced-Regular"), local("Segoe UI Mono"), local("UbuntuMono"), local("Roboto-Mono"), local("Menlo");
}
@font-face {
font-family: ui-monospace;
font-style: italic;
src: local(".AppleSystemUIFontMonospaced-RegularItalic"), local("Segoe UI Mono Italic"), local("UbuntuMono-Italic"), local("Roboto-Mono-Italic"), local("Menlo-Italic");
}
@font-face {
font-family: ui-monospace;
font-weight: bold;
src: local(".AppleSystemUIFontMonospaced-Bold"), local("Segoe UI Mono Bold"), local("UbuntuMono-Bold"), local("Roboto-Mono-Bold"), local("Menlo-Bold");
}
@font-face {
font-family: ui-monospace;
font-style: italic;
font-weight: bold;
src: local(".AppleSystemUIFontMonospaced-BoldItalic"), local("Segoe UI Mono Bold Italic"), local("UbuntuMono-BoldItalic"), local("Roboto-Mono-BoldItalic"), local("Menlo-BoldItalic");
}
/* ----------------------------------------------------------------------------- */
/* Fonts
/* ----------------------------------------------------------------------------- */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100;
font-display: swap;
src: url('Inter-Thin.fff2a096db014f6239d4.woff2?v=3.19') format("woff2"),
url('Inter-Thin.29b9c616a95a912abf73.woff?v=3.19') format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 100;
font-display: swap;
src: url('Inter-ThinItalic.bf213704dce6b437ede4.woff2?v=3.19') format("woff2"),
url('Inter-ThinItalic.bae95eb2f889c797e435.woff?v=3.19') format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url('Inter-ExtraLight.72505e6a122c6acd5471.woff2?v=3.19') format("woff2"),
url('Inter-ExtraLight.c4248615291a9e8f1fb7.woff?v=3.19') format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 200;
font-display: swap;
src: url('Inter-ExtraLightItalic.5c7d7d6deb1d2ec8d48c.woff2?v=3.19') format("woff2"),
url('Inter-ExtraLightItalic.170dddfca278d3c2ad4a.woff?v=3.19') format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('Inter-Light.2d5198822ab091ce4305.woff2?v=3.19') format("woff2"),
url('Inter-Light.994e34451cc19ede31d3.woff?v=3.19') format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url('Inter-LightItalic.f86952265d7b0f02c921.woff2?v=3.19') format("woff2"),
url('Inter-LightItalic.ef9f65d91d2b0ba9b2e4.woff?v=3.19') format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('Inter-Regular.c8ba52b05a9ef10f4758.woff2?v=3.19') format("woff2"),
url('Inter-Regular.8c206db99195777c6769.woff?v=3.19') format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('Inter-Italic.cb10ffd7684cd9836a05.woff2?v=3.19') format("woff2"),
url('Inter-Italic.890025e726861dba417f.woff?v=3.19') format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('Inter-Medium.293fd13dbca5a3e450ef.woff2?v=3.19') format("woff2"),
url('Inter-Medium.9053572c46aeb4b16caa.woff?v=3.19') format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url('Inter-MediumItalic.085cb93e613ba3d40d2b.woff2?v=3.19') format("woff2"),
url('Inter-MediumItalic.3d0107dd43d0101274d3.woff?v=3.19') format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('Inter-SemiBold.b5f0f109bc88052d4000.woff2?v=3.19') format("woff2"),
url('Inter-SemiBold.cca62d21c8c555c392e5.woff?v=3.19') format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url('Inter-SemiBoldItalic.d9467ee321a8f38aefff.woff2?v=3.19') format("woff2"),
url('Inter-SemiBoldItalic.463bdbfb28abad0fa6df.woff?v=3.19') format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('Inter-Bold.ec64ea577b0349e055ad.woff2?v=3.19') format("woff2"),
url('Inter-Bold.93c1301bd9f486c573b3.woff?v=3.19') format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url('Inter-BoldItalic.2d26c56a606662486796.woff2?v=3.19') format("woff2"),
url('Inter-BoldItalic.b376885042f6c961a541.woff?v=3.19') format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('Inter-ExtraBold.cbe0ae49c52c920fd563.woff2?v=3.19') format("woff2"),
url('Inter-ExtraBold.d0fa3bb2b7c9063dc594.woff?v=3.19') format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 800;
font-display: swap;
src: url('Inter-ExtraBoldItalic.535a6cf662596b3bd6a6.woff2?v=3.19') format("woff2"),
url('Inter-ExtraBoldItalic.6ab17abedc4d3f140953.woff?v=3.19') format("woff");
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url('Inter-Black.15ca31c0a2a68f76d2d1.woff2?v=3.19') format("woff2"),
url('Inter-Black.c6938660eec019fefd68.woff?v=3.19') format("woff");
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 900;
font-display: swap;
src: url('Inter-BlackItalic.cb2a7335650c690077fe.woff2?v=3.19') format("woff2"),
url('Inter-BlackItalic.ca1e738e4f349f27514d.woff?v=3.19') format("woff");
}
/* -------------------------------------------------------
Variable font.
Usage:
html { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
html { font-family: 'Inter var', sans-serif; }
}
*/
@font-face {
font-family: 'Inter var';
font-weight: 100 900;
font-display: swap;
font-style: normal;
font-named-instance: 'Regular';
src: url('Inter-roman.var.ba4caefcdf5b36b438db.woff2?v=3.19') format("woff2");
}
@font-face {
font-family: 'Inter var';
font-weight: 100 900;
font-display: swap;
font-style: italic;
font-named-instance: 'Italic';
src: url('Inter-italic.var.30807be7abc48ba8c73c.woff2?v=3.19') format("woff2");
}
/* --------------------------------------------------------------------------
[EXPERIMENTAL] Multi-axis, single variable font.
Slant axis is not yet widely supported (as of February 2019) and thus this
multi-axis single variable font is opt-in rather than the default.
When using this, you will probably need to set font-variation-settings
explicitly, e.g.
* { font-variation-settings: "slnt" 0deg }
.italic { font-variation-settings: "slnt" 10deg }
*/
@font-face {
font-family: 'Inter var experimental';
font-weight: 100 900;
font-display: swap;
font-style: oblique 0deg 10deg;
src: url('Inter.var.c2fe3cb2b7c746f7966a.woff2?v=3.19') format("woff2");
}
:root {
font-family: 'Inter';
}
/* ----------------------------------------------------------------------------- */
/* Color Variables
/* ----------------------------------------------------------------------------- */
:root {
--accent-color: rgb(0 122 255); /* Defaults to light theme with blue accents. */
--app-background-color: white;
--button-text-color: white;
--fill-color-primary: rgba(0,0,0, 0.85);
--fill-color-secondary: rgba(0,0,0, 0.50);
--fill-color-tertiary: rgba(0,0,0, 0.25);
--fill-color-quaternary: rgba(0,0,0, 0.10);
--fill-color-quinary: rgba(0,0,0, 0.05);
--text-color-primary: rgba(0,0,0, 0.85);
--text-color-secondary: rgba(0,0,0, 0.50);
--text-color-tertiary: rgba(0,0,0, 0.25);
--red-color: #E02020;
--red-color-secondary: rgba(224,32,23, 0.10);
--orange-color: #FA6400;
--yellow-color: #F7B500;
--green-color: #28CD41;
--teal-color: #55BEF0;
--blue-color: #007AFF;
--indigo-color: #6236FF;
--purple-color: #B620E0;
--pink-color: #FF2D55;
&.red {
--accent-color: #E02020;
}
&.orange {
--accent-color: #FA6400;
--button-text-color: black;
}
&.yellow {
--accent-color: #F7B500;
--button-text-color: black;
}
&.green {
--accent-color: #28CD41;
--button-text-color: black;
}
&.teal {
--accent-color: #55BEF0;
--button-text-color: black;
}
&.blue {
--accent-color: #007AFF;
}
&.indigo {
--accent-color: #6236FF;
}
&.purple {
--accent-color: #B620E0;
}
&.pink {
--accent-color: #FF2D55;
}
&.dark {
--app-background-color: black;
--fill-color-primary: rgba(255,255,255, 0.87);
--fill-color-secondary: rgba(255,255,255, 0.50);
--fill-color-tertiary: rgba(255,255,255, 0.25);
--fill-color-quaternary: rgba(255,255,255, 0.10);
--fill-color-quinary: rgba(255,255,255, 0.05);
--text-color-primary: rgba(255,255,255, 0.87);
--text-color-secondary: rgba(255,255,255, 0.50);
--text-color-tertiary: rgba(255,255,255, 0.25);
--red-color: #FF453A;
--orange-color: #FA6400;
--yellow-color: #F7B500;
--yellow-color-secondary: rgba(247,181,0, 0.10); /* Currently only used for invalid input fields. */
--green-color: #32D74B;
--teal-color: #5AC8FE;
--blue-color: #0A84FF;
--indigo-color: #5E5CE6;
--purple-color: #BF5AF2;
--pink-color: #FF375F;
&.red {
--accent-color: #FF453A;
}
&.orange {
--accent-color: #FA6400;
--button-text-color: black;
}
&.yellow {
--accent-color: #F7B500;
--button-text-color: black;
}
&.green {
--accent-color: #32D74B;
--button-text-color: black;
}
&.teal {
--accent-color: #5AC8FE;
--button-text-color: black;
}
&.blue {
--accent-color: #0A84FF;
}
&.indigo {
--accent-color: #5E5CE6;
}
&.purple {
--accent-color: #BF5AF2;
}
&.pink {
--accent-color: #FF375F;
}
}
}
/* ----------------------------------------------------------------------------- */
/* Typography Variables
/* ----------------------------------------------------------------------------- */
:root {
--title-1: calc(34/16 * 1rem);
--title-2: calc(27/16 * 1rem);
--title-3: calc(19/16 * 1rem);
--body: calc(16/16 * 1rem);
--caption-1: calc(14/16 * 1rem);
--caption-2: calc(13/16 * 1rem);
--footnote: calc(12/16 * 1rem);
}
/* ----------------------------------------------------------------------------- */
/* Layout Variables
/* ----------------------------------------------------------------------------- */
:root {
--box-radius: 22px;
--form-element-border-radius: 12px;
--presentation-area-padding: 42px 15px;
}
/* ----------------------------------------------------------------------------- */
/* Animations
/* ----------------------------------------------------------------------------- */
@keyframes spin {
100% {
transform:rotate(360deg);
}
}
@keyframes dialog-appear {
0% {
opacity: 0;
transform: translateY(-30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* ----------------------------------------------------------------------------- */
/* Global Layout
/* ----------------------------------------------------------------------------- */
* { /* Apply default transition to all elements. */
transition: all .3s;
}
body {
position: relative;
min-width: 320px;
min-height: 100vh;
background-color: var(--app-background-color);
color: var(--text-color-primary);
line-height: 1.5;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
padding: 10px 0;
}
a {
display: inline-block;
color: var(--accent-color);
text-decoration: none;
}
[id*='link-'],
[class*='link-'],
[id*='toggle-'],
[class*='toggle-'] {
&:active {
opacity: 0.5;
transform: scale(0.95);
}
&[disabled] {
opacity: 0.35;
pointer-events: none;
}
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
p {
margin: 0;
margin-top: 10px;
}
fieldset {
margin: 0;
border: 0;
padding: 0;
}
form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 42px 15px 70px 15px;
color: var(--text-color-primary);
&:invalid {
& button {
opacity: 0.25;
pointer-events: none;
}
}
& button[type='submit'] {
&::before {
content: '';
display: block;
position: absolute;
top: calc(50% - 15px);
left: calc(50% - 15px);
width: 30px;
height: 30px;
border: 2px dotted var(--button-text-color);
border-radius: 100%;
opacity: 0;
}
}
&.submitted {
& button[type='submit'] {
position: relative;
color: transparent;
&::before {
opacity: 1;
animation: spin 2s linear infinite
}
}
}
}
legend {
display: none;
}
select {
background-image: url('glyph-chevron-down.7c595dce3e88d339804b.svg');
background-position: center right 10px;
.dark & {
background-image: url('glyph-chevron-down-white.04128c3ecc90f7c1b11c.svg');
}
}
input:not([type='radio']),
select {
position: relative;
z-index: 3;
width: 100%;
height: 56px;
border-radius: var(--form-element-border-radius);
border: 1px solid var(--fill-color-tertiary);
padding: 17px 17px 0 17px;
text-overflow: ellipsis;
overflow: hidden;
&:focus,
&:not(:placeholder-shown) {
& ~ label {
transform: scale(.75) translateY(-13px);
}
& ~ .visibility-toggle {
transform: translateY(9px);
}
}
& ~ label {
position: absolute;
z-index: 4;
top: 16px;
left: 18px;
color: var(--text-color-secondary);
transform-origin: top left;
pointer-events: none;
}
& ~ .visibility-toggle {
position: absolute;
z-index: 4;
top: 5px;
right: 0;
padding: 10px; /* For increasing target size. */
color: var(--accent-color);
text-align: right;
}
}
input[type='file'] {
padding-top: 22px;
}
input[type='password'] {
padding-right: 56px; /* For accomodating some built-in browser button. */
}
.form-element {
position: relative;
margin-top: 45px;
&:not(:has(input[type='radio'])) {
&::after {
content: '';
display: block;
position: absolute;
z-index: 2;
top: 0;
width: 100%;
height: 56px; /* Height of text input fields. */
border-radius: var(--form-element-border-radius);
background-color: var(--app-background-color);
}
&:has(input[type='file']) { /* File inputs are special */
&::after {
border: 1px solid var(--fill-color-tertiary);
}
& input[type='file'] {
height: 32px;
margin: 24px 0 0 17px;
border: none;
border-radius: 0;
padding: 0;
}
}
&:has(.is-information) {
& .info-feedback {
opacity: 1;
margin-top: 5px;
}
}
& [class*='info-'] {
color: var(--blue-color);
&::before {
-webkit-mask: url('/assets/images/glyph-info-circle-line-small.svg');
mask: url('/assets/images/glyph-info-circle-line-small.svg');
background-color: var(--blue-color);
}
}
&:has(.is-invalid) {
& input {
border-color: var(--red-color);
background-color: var(--red-color-secondary);
}
& label {
color: var(--red-color);
}
& .error-feedback {
opacity: 1;
margin-top: 5px;
}
}
& [class*='error-'] {
color: var(--red-color);
&::before {
-webkit-mask: url('/assets/images/glyph-exclamation-circle-fill-small.svg');
mask: url('/assets/images/glyph-exclamation-circle-fill-small.svg');
background-color: var(--red-color);
}
}
& [class*='-feedback'] {
opacity: 0;
position: relative;
min-height: 18px;
margin-top: -18px;
padding-left: 18px;
text-align: left;
pointer-events: none;
font-size: var(--footnote);
font-weight: normal;
&::before {
content: '';
display: block;
position: absolute;
top: -9px;
left: -11px;
width: 36px;
height: 36px;
transform: scale(0.583333) /* Scales to 21px */
}
}
}
& + .form-element {
margin-top: 14px;
}
}
dialog {
overflow-y: auto;
width: calc(100vw - 40px);
max-width: 530px;
max-height: calc(100vh - 60px);
border: none;
border-radius: var(--box-radius);
padding: 60px 15px;
background-color: var(--app-background-color);
color: var(--text-color-primary);
text-align: center;
@media (min-width: 375px) {
& {
padding: 60px 20px;
}
}
@media (min-width: 414px) {
& {
padding: 60px 55px;
}
}
.dark & {
background-color: var(--fill-color-quaternary);
}
&::-webkit-backdrop {
background-color: rgba(0,0,0,0.9);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
.dark & {
background-color: rgba(0,0,0,1.0);
}
}
&::backdrop {
background-color: rgba(0,0,0,0.9);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
.dark & {
background-color: rgba(0,0,0,1.0);
}
}
&[open] {
animation: dialog-appear 0.3s ease-out;
}
&.is-error,
&.is-success {
&::before { /* Large icon above heading */
content: '';
display: inline-block;
width: 36px;
height: 36px;
margin-top: 32px;
transform: scale(2);
transform-origin: bottom;
}
}
&.is-error{
&::before { /* Large icon above heading */
-webkit-mask: url('glyph-times-circle-line.3abd8aa20860b135061f.svg');
mask: url('glyph-times-circle-line.3abd8aa20860b135061f.svg');
background: var(--red-color);
}
}
&.is-success{
&::before { /* Large icon above heading */
-webkit-mask: url('glyph-checkmark-circle-line.10bd18cf8224f635ab42.svg');
mask: url('glyph-checkmark-circle-line.10bd18cf8224f635ab42.svg');
background: var(--green-color);
}
}
& .heading {
margin-top: 0;
margin-bottom: 45px;
font-size: var(--title-2);
line-height: 1.3;
text-align: center;
}
& .message {
display: flex;
flex-direction: column;
align-items: stretch;
}
& form {
padding: 0;
}
& button {
display: block;
width: 100%;
margin-top: 60px;
& + button {
margin-top: 30px;
}
}
}
body:has(dialog[open]) {
overflow: hidden;
}
button {
min-height: 56px;
border: 0;
border-radius: var(--form-element-border-radius);
padding: 16px;
background-color: var(--accent-color);
color: var(--button-text-color);
&:active {
filter: brightness(1.125);
transform: scale(0.95);
}
&[disabled] {
opacity: 0.35;
pointer-events: none;
}
}
.text-button,
[class*='text-button'] {
font-size: var(--body);
font-weight: normal;
line-height: 1.5;
color: var(--accent-color);
cursor: pointer;
}
.container {
width: 280px;
}
.container,
.container-fluid {
margin: 0 auto;
@media (min-width: 540px) {
& {
width: 448px;
}
}
@media (min-width: 768px) {
& {
width: 640px;
}
}
@media (min-width: 1024px) {
& {
width: 904px;
}
}
}
.presentation-area-container {
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
align-items: center;
padding: var(--presentation-area-padding);
background-color: black;
color: white;
text-align: center;
}
.continue-button {
width: 100%;
min-width: 290px;
}
/* ************************************
/* Progress Bar Usage Examples
/* ************************************
***************************************/
progress {
min-width: 50px;
width: 100%;
height: 5px;
border: 0;
border-radius: 5px;
overflow: hidden;
background-color: var(--fill-color-quaternary); /* rgba(255,255,255, 0.25); */
accent-color: var(--accent-color);
.dark & {
background-color: var(--fill-color-tertiary);
}
&::-webkit-progress-bar {
background-color: transparent; /* Allow background-color from "progress" above to show through. */
}
&::-webkit-progress-value {
background-color: var(--accent-color);
}
&::-moz-progress-bar {
background-color: var(--accent-color);
}
}
.progress-bar-linear {
display: flex;
grid-gap: 2px 10px;
gap: 2px 10px;
align-items: center;
width: 100%;
& label {
display: inline-block;
min-width: 43px;
font-size: var(--footnote);
line-height: 1.5;
}
& .value {
display: inline-block;
min-width: 31px;
max-width: 31px;
text-align: right;
font-size: var(--footnote);
line-height: 1.5;
}
}
.progress-bar-stacked {
& label {
display: block;
margin-bottom: -8px;
font-size: var(--footnote);
line-height: 1.5;
}
}
.step-control {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
& .step-buttons {
display: flex;
width: 100%;
margin-bottom: 0;
padding: 30px 15px 15px 15px;
list-style: none;
overflow-y: auto;
&:has(> :last-child:nth-child(2)) {
@media (min-width: 330px) { /* .step-button max-width * num of .step-buttons + padding */
& {
justify-content: center;
}
}
& .step-button {
width: 50%;
}
}
&:has(> :last-child:nth-child(3)) {
@media (min-width: 480px) { /* .step-button max-width * num of .step-buttons + padding */
& {
justify-content: center;
}
}
& .step-button {
width: 33.33%;
}
}
&:has(> :last-child:nth-child(4)) {
@media (min-width: 630px) { /* .step-button max-width * num of .step-buttons + padding */
& {
justify-content: center;
}
}
& .step-button {
width: 25%;
}
}
&:has(:last-child:nth-child(5)) {
@media (min-width: 780px) { /* .step-button max-width * num of .step-buttons + padding */
& {
justify-content: center;
}
}
& .step-button {
width: 20%;
}
}
}
& .step-button {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
min-width: 95px;
max-width: 150px;
padding: 10px;
color: var(--accent-color);
text-align: center;
font-size: var(--footnote);
&::before {
content: '1';
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin-bottom: 5px;
border: 1.5px solid var(--accent-color);
border-radius: 100%;
color: var(--accent-color);
}
&:not(:first-child) {
&::after {
content: '';
display: block;
position: absolute;
top: 21px;
left: calc(-50% + 12px);
width: calc(100% - 24px);
height: 0;
border-top: 1.5px solid var(--accent-color);
}
}
&:nth-child(2) {
&::before {
content: '2';
}
}
&:nth-child(3) {
&::before {
content: '3';
}
}
&:nth-child(4) {
&::before {
content: '4';
}
}
&:nth-child(5) {
&::before {
content: '5';
}
}
&.is-current {
color: var(--text-color-primary);
&::before {
border-color: var(--accent-color);
background-color: var(--accent-color);
color: var(--button-text-color);
}
& ~ .step-button {
color: var(--text-color-tertiary);
pointer-events: none;
&::before {
border: 1.5px dotted var(--text-color-tertiary);
color: var(--text-color-tertiary);
}
&::after {
left: calc(-50% + 13px);
width: calc(100% - 26px);
border-top-style: dotted;
border-top-color: var(--text-color-tertiary);
}
}
}
}
& .steps {
display: flex;
justify-content: center;
position: relative;
width: 100%;
overflow: hidden;
}
& .step {
position: absolute;
transform: translateX(-100vw);
opacity: 0;
pointer-events: none;
&.is-current {
position: relative; /* Adds current .step back into document flow to dictate height. */
transform: translateX(0);
opacity: 1;
pointer-events: auto;
& ~ .step {
transform: translateX(100vw);
opacity: 0;
pointer-events: none;
}
}
}
& [class*='-feedback'] {
margin-top: 90px;
text-align: center;
}
}
.segmented-control {
& .segmented-buttons {
display: flex;
justify-content: center;
width: 290px;
margin: 30px 15px 0 15px;
padding: 0;
background-color: var(--fill-color-quinary);
border-radius: 7px;
list-style: none;
outline: 0.5px solid var(--fill-color-quinary);
outline-offset: -0.5px;
}
& .segmented-button {
flex-grow: 1;
padding: 5px;
text-align: center;
font-size: var(--caption-2);
&.is-current {
background-color: var(--accent-color);
color: var(--button-text-color);
border-radius: 7px;
}
&:first-child {
border-radius: 7px 0 0 7px;
}
&:last-child {
border-radius: 0 7px 7px 0;
}
}
& .segments {
display: flex;
justify-content: center;
position: relative;
}
& .segment {
opacity: 0;
pointer-events: none;
&.is-current {
opacity: 1;
pointer-events: auto;
}
& + .segment { /* First form in segmented control is longest to dicate height. */
position: absolute;
top: 0;
}
}
}
/* ----------------------------------------------------------------------------- */
/* Utilities
/* ----------------------------------------------------------------------------- */
.is-hidden {
opacity: 0;
pointer-events: none;
}