/*!
* Quintsea CSS v0.5.4 (https://quintsea.nanraizen.me)
* (c) 2025-2026 | MIT License
*/
/* ROOT & RESET */
:root {
--font-1: 'Poppins';
--font-2: 'Space Mono';
--glyph: 'Material Symbols Rounded';
--font-regular: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
--font-size: 16px;
--font-size-md: 14px;
--font-size-sm: 12px;
--stroke: 1px;
--stroke-focus: 1px;
--container: 1000px;
--container-padding: 36px;
--btn-height: 48px;
--btn-padding-x: 20px;
--btn-padding-y: 12px;
--feed: 240px;
--feed-2x: 360px;
--feed-3x: 480px;
--radius-xs: 6px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--navbar-padding: 36px;
--navbar-spacing: 8px;
--navbar-gap: 24px;
--backdrop: rgba(24, 24, 27, .6);
--backdrop-alt: rgba(24, 24, 27, .75);
--tooltip: rgba(24, 24, 27, .75);
--cubic: cubic-bezier(0.4, 0, 0.2, 1);
--cubic-alt: cubic-bezier(0.22, 1, 0.36, 1);
--ease: .15s ease;
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.10);
--shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.12);
--shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.14);
--shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);
--mono-00: #FFFFFF;
--mono-05: #FBFBFC;
--mono-10: #F8F8FA;
--mono-20: #F0F1F4;
--mono-30: #E0E2E6;
--mono-40: #C9CCD3;
--mono-50: #A9ADB7;
--mono-60: #7F8490;
--mono-70: #3A3C42;
--bg: var(--mono-00);
--card: var(--mono-00);
--dropdown: var(--mono-00);
--text: #3A3C42;
--text-reverse: #FCFAFB;
--text2-reverse: #FFFFFF;
--odd: var(--mono-10);
--white: #FCFAFB;
--white-10: #FCFAFB0D;
--white-20: #FCFAFB1E;
--white-30: #FCFAFB3F;
--white-40: #FCFAFB4C;
--black: #3A3C42;
--black-10: #3A3C420D;
--black-20: #3A3C421E;
--black-30: #3A3C423F;
--black-40: #3A3C424C;
--primary: #7689FF;
--primary-dark: #6A7CEB;
--primary-darker: #5C6DD7;
--primary-10: #7689FF0D;
--primary-20: #7689FF1E;
--primary-30: #7689FF3F;
--primary-40: #7689FF4C;
--red: #E57368;
--red-dark: #D66559;
--red-darker: #C55749;
--red-10: #E573680D;
--red-20: #E573681E;
--red-30: #E573683F;
--red-40: #E573684C;
--pink: #EC7FA0;
--pink-dark: #DE7294;
--pink-darker: #CB6181;
--pink-10: #EC7FA00D;
--pink-20: #EC7FA01E;
--pink-30: #EC7FA03F;
--pink-40: #EC7FA04C;
--purple: #9C8EDF;
--purple-dark: #8D80D1;
--purple-darker: #7B6FBD;
--purple-10: #9C8EDF0D;
--purple-20: #9C8EDF1E;
--purple-30: #9C8EDF3F;
--purple-40: #9C8EDF4C;
--blue: #6EA8E9;
--blue-dark: #619BD9;
--blue-darker: #5187C5;
--blue-10: #6EA8E90D;
--blue-20: #6EA8E91E;
--blue-30: #6EA8E93F;
--blue-40: #6EA8E94C;
--teal: #4DD8C8;
--teal-dark: #41CBBE;
--teal-darker: #37B4A9;
--teal-10: #4DD8C80D;
--teal-20: #4DD8C81E;
--teal-30: #4DD8C83F;
--teal-40: #4DD8C84C;
--green: #65D88C;
--green-dark: #58CB7F;
--green-darker: #4AAA6C;
--green-10: #65D88C0D;
--green-20: #65D88C1E;
--green-30: #65D88C3F;
--green-40: #65D88C4C;
--yellow: #FFD866;
--yellow-dark: #F5C95C;
--yellow-darker: #E0B54D;
--yellow-10: #FFD8660D;
--yellow-20: #FFD8661E;
--yellow-30: #FFD8663F;
--yellow-40: #FFD8664C;
--orange: #FFAD61;
--orange-dark: #F29E55;
--orange-darker: #DE8D45;
--orange-10: #FFAD610D;
--orange-20: #FFAD611E;
--orange-30: #FFAD613F;
--orange-40: #FFAD614C;
--brown: #A8835A;
--brown-dark: #9B7852;
--brown-darker: #896A47;
--brown-10: #A8835A0D;
--brown-20: #A8835A1E;
--brown-30: #A8835A3F;
--brown-40: #A8835A4C;
--default: #ECEFF1;
--default-dark: #E1E4E7;
--default-darker: #D4D7DB;
--default-10: #ECEFF10D;
--default-20: #ECEFF11E;
--default-30: #ECEFF13F;
--default-40: #ECEFF16C;
--default-50: #ECEFF19F;
--dark: #3A3C42;
--dark-dark: #2F3035;
--dark-darker: #2C2D31;
--dark-10: #3A3C420D;
--dark-20: #3A3C4215;
--dark-30: #3A3C423F;
--dark-40: #3A3C424C;
--stroke-color: var(--mono-40);
--stroke-color-hover: var(--mono-50);
--icon-caret: url('data:image/svg+xml;utf8,');
--icon-plus: url('data:image/svg+xml;utf8,');
--icon-check: url('data:image/svg+xml;utf8,');
--icon-done: url('data:image/svg+xml;utf8,');
--icon-quotes: url('data:image/svg+xml;utf8,');
--icon-info: url('data:image/svg+xml;utf8,');
--icon-success: url('data:image/svg+xml;utf8,');
--icon-warning: url('data:image/svg+xml;utf8,');
--icon-error: url('data:image/svg+xml;utf8,');
--icon-attach: url("data:image/svg+xml;utf8,");
--bg-grid: url('data:image/svg+xml;utf8,');
--bg-dot: url('data:image/svg+xml;utf8,');
--bg-graph: url('data:image/svg+xml;utf8,');
--bg-stripe: url('data:image/svg+xml;utf8,');
--bg-plus: url('data:image/svg+xml;utf8,');
--bg-times: url('data:image/svg+xml;utf8,');
--bg-cube: url('data:image/svg+xml;utf8,');
--bg-rhombus: url('data:image/svg+xml;utf8,');
}
:root[data-theme=dark] {
--tooltip: #FFFFFF;
--mono-00: #262627;
--mono-05: #2C2C2D;
--mono-10: #323233;
--mono-20: #3E3E3F;
--mono-30: #4F4F50;
--mono-40: #606061;
--mono-50: #7C7C7D;
--mono-60: #A2A2A3;
--mono-70: #E0E0E1;
--bg: var(--mono-00);
--card: var(--mono-00);
--dropdown: var(--mono-05);
--text: #FCFAFB;
--text-reverse: #3A3C42;
--text2-reverse: #1E1E1E;
--primary: #A6B5FF;
--primary-dark: #C6D1FF;
--primary-darker: #D8E3FF;
--primary-10: #A6B5FF0D;
--primary-20: #A6B5FF1E;
--primary-30: #A6B5FF3F;
--primary-40: #A6B5FF4C;
--red: #F2A49A;
--red-dark: #F8BDBD;
--red-darker: #FFC6BF;
--red-10: #F2A49A0D;
--red-20: #F2A49A26;
--red-30: #F2A49A40;
--red-40: #F2A49A59;
--pink: #F7AFC2;
--pink-dark: #FFDADE;
--pink-darker: #FFE8EB;
--pink-10: #F7AFC20D;
--pink-20: #F7AFC21E;
--pink-30: #F7AFC23F;
--pink-40: #F7AFC24C;
--purple: #C0B8E7;
--purple-dark: #D9D0F6;
--purple-darker: #E6DDFB;
--purple-10: #C0B8E70D;
--purple-20: #C0B8E71E;
--purple-30: #C0B8E73F;
--purple-40: #C0B8E74C;
--blue: #A4C5E9;
--blue-dark: #C8EBFF;
--blue-darker: #D8F5FF;
--blue-10: #A4C5E90D;
--blue-20: #A4C5E91E;
--blue-30: #A4C5E93F;
--blue-40: #A4C5E94C;
--teal: #9FE3DC;
--teal-dark: #BAF1EB;
--teal-darker: #D9FFF9;
--teal-10: #9FE3DC0D;
--teal-20: #9FE3DC1E;
--teal-30: #9FE3DC3F;
--teal-40: #9FE3DC4C;
--green: #A6E4B4;
--green-dark: #C9F7D9;
--green-darker: #D9FFEB;
--green-10: #A6E4B40D;
--green-20: #A6E4B41E;
--green-30: #A6E4B43F;
--green-40: #A6E4B44C;
--yellow: #FAE29F;
--yellow-dark: #FFF2C5;
--yellow-darker: #FEF7D5;
--yellow-10: #FAE29F0D;
--yellow-20: #FAE29F1E;
--yellow-30: #FAE29F3F;
--yellow-40: #FAE29F4C;
--orange: #F9C58A;
--orange-dark: #FCE2B4;
--orange-darker: #FDECD4;
--orange-10: #F9C58A0D;
--orange-20: #F9C58A1E;
--orange-30: #F9C58A3F;
--orange-40: #F9C58A4C;
--brown: #BDA88C;
--brown-dark: #D5C9B7;
--brown-darker: #E1D7C9;
--brown-10: #BDA88C0D;
--brown-20: #BDA88C1E;
--brown-30: #BDA88C3F;
--brown-40: #BDA88C4C;
--default: #3A3C42;
--default-dark: #494A4F;
--default-darker: #656667;
--default-10: #3A3C420D;
--default-20: #3A3C421E;
--default-30: #3A3C423F;
--default-40: #3A3C426C;
--default-50: #3A3C429F;
--dark: #ECEFF1;
--dark-dark: #FFFFFA;
--dark-darker: #FFFFFC;
--dark-10: #ECEFF10D;
--dark-20: #ECEFF115;
--dark-30: #ECEFF13F;
--dark-40: #ECEFF14C;
--bg-grid: url('data:image/svg+xml;utf8,');
--bg-dot: url('data:image/svg+xml;utf8,');
--bg-graph: url('data:image/svg+xml;utf8,');
--bg-stripe: url('data:image/svg+xml;utf8,');
--bg-plus: url('data:image/svg+xml;utf8,');
--bg-times: url('data:image/svg+xml;utf8,');
--bg-cube: url('data:image/svg+xml;utf8,');
--bg-rhombus: url('data:image/svg+xml;utf8,');
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/*! Tweaked for Quintsea CSS baseline typography and layout */
*,
*::before,
*::after {
scrollbar-width: thin;
scrollbar-color: var(--mono-40) var(--bg);
box-sizing: inherit;
margin: 0;
padding: 0;
}
*:focus-visible {
outline: none;
}
::-webkit-scrollbar {
background-color: var(--bg);
}
::-webkit-scrollbar-thumb {
background-color: var(--mono-40);
}
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
overflow-x: hidden;
box-sizing: border-box;
background-color: var(--bg);
font-size: var(--font-size);
font-family: var(--font-1);
color: var(--text);
text-transform: none;
}
body {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 0;
min-height: 100vh;
margin: 0 auto;
padding: 0;
}
header,
footer,
main,
section,
article,
aside,
nav,
figure,
figcaption,
audio,
video,
canvas,
details {
display: block;
}
p {
display: block;
margin: 0;
padding: 0;
}
ol,
ul,
dl {
margin: 0;
padding: 0;
list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
position: relative;
margin: 0;
padding: 0;
font-family: inherit;
font-weight: var(--font-semibold);
line-height: 1.4;
}
h1 {
font-size: 2.25rem;
}
h2 {
font-size: 1.75rem;
}
h3 {
font-size: 1.5rem;
}
h4 {
font-size: 1.25rem;
}
h5 {
font-size: 1.125rem;
}
h6 {
font-size: 1rem;
}
a,
a:focus,
a:hover {
transition: var(--ease);
color: var(--text);
text-decoration: none;
}
a:hover {
color: var(--primary-dark);
}
a:not([href]):not([tabindex]) {
cursor: pointer;
color: inherit;
}
a:not([href]):not([tabindex]):hover {
color: var(--primary-dark);
}
abbr,
abbr[title] {
margin-left: 4px;
color: var(--red);
text-decoration: none;
}
b,
strong {
font-weight: var(--font-semibold);
}
u {
text-underline-offset: 5px;
}
small {
font-size: .75rem;
}
sub,
sup {
position: relative;
font-size: .75rem;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
label {
font-weight: var(--font-regular);
}
button,
input,
optgroup,
select,
textarea {
outline: none;
margin: 0;
font-size: var(--font-size-md);
font-family: var(--font-1);
}
button,
input {
overflow: visible;
text-align: unset;
}
button,
select,
[type=color],
[type=file],
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: none;
appearance: none;
-moz-appearance: none;
cursor: pointer;
text-transform: none;
}
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
padding: 0;
border-style: none;
}
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
outline: var(--stroke) dotted ButtonText;
}
progress {
border: 0;
vertical-align: baseline;
}
progress::-webkit-progress-bar {
background-color: transparent;
}
[type=checkbox],
[type=radio] {
box-sizing: border-box;
padding: 0;
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
display: none;
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px;
appearance: textfield;
}
[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
summary {
display: list-item;
}
template,
[hidden],
.hidden {
display: none !important;
}
mark {
background-color: var(--primary-20);
border: 1px solid var(--primary);
border-radius: 6px;
color: var(--text);
}
pre {
font-family: Consolas, 'Courier New', monospace;
}
code,
kbd,
samp {
padding: 2px 6px;
background-color: var(--red-20);
border-radius: 4px;
font-family: Consolas, 'Courier New', monospace;
line-height: 1;
color: var(--red-darker);
}
table {
border-spacing: 0;
border-collapse: collapse;
background-color: transparent;
}
td,
th {
padding: 0;
}
img {
image-rendering: optimizeQuality;
max-width: 100%;
border-style: none;
vertical-align: middle;
}
figcaption {
margin-top: 12px;
padding-left: 12px;
border-left: 2px solid var(--mono-30);
font-size: var(--font-size-md);
color: var(--mono-50);
text-align: left;
}
blockquote {
position: relative;
margin: 24px 0;
padding: 20px 24px;
padding-left: calc(24px * 3);
border: var(--stroke) solid var(--mono-30);
border-radius: var(--radius-md);
}
blockquote::after {
content: '';
display: block;
position: absolute;
top: 50%;
left: -3px;
transform: translateY(-50%);
width: 5px;
height: 24px;
background-color: var(--primary);
border-radius: 99px;
}
blockquote::before {
mask: var(--icon-quotes) no-repeat center / contain;
content: '';
display: block;
position: absolute;
top: 22px;
left: 24px;
width: 24px;
height: 24px;
background-color: var(--primary);
}
blockquote cite {
display: block;
position: relative;
margin-top: 8px;
padding-left: 28px;
font-size: var(--font-size-md);
color: var(--mono-50);
}
blockquote cite::before {
content: '';
position: absolute;
top: 12px;
left: 0;
width: 20px;
border-top: 1px solid var(--mono-40);
}
hr {
overflow: visible;
box-sizing: content-box;
width: 100%;
height: 0;
margin: 24px 0;
border: 0;
border-top: var(--stroke) solid var(--mono-30);
}
hr.dash {
border-style: dashed;
border-color: var(--mono-40);
}
hr.hr-v {
width: unset;
height: 24px;
margin: auto 0;
border-top: 0;
border-left: var(--stroke) solid var(--mono-30);
}
hr.color {
border-color: var(--color);
}
.cursor-pointer {
cursor: pointer;
}
.cursor-notallowed {
cursor: not-allowed;
}
/* BASE */
.secondary {
--color: var(--mono-60);
--color-dark: var(--mono-60);
}
.default {
--color: var(--default);
--color-10: var(--default-20);
--color-20: var(--default-30);
--color-30: var(--default-40);
--color-40: var(--default-50);
--color-dark: var(--default-dark);
--color-darker: var(--default-darker);
}
.primary {
--color: var(--primary);
--color-10: var(--primary-10);
--color-20: var(--primary-20);
--color-30: var(--primary-30);
--color-40: var(--primary-40);
--color-dark: var(--primary-dark);
--color-darker: var(--primary-darker);
}
.red,
.error {
--color: var(--red);
--color-10: var(--red-10);
--color-20: var(--red-20);
--color-30: var(--red-30);
--color-40: var(--red-40);
--color-dark: var(--red-dark);
--color-darker: var(--red-darker);
}
.pink {
--color: var(--pink);
--color-10: var(--pink-10);
--color-20: var(--pink-20);
--color-30: var(--pink-30);
--color-40: var(--pink-40);
--color-dark: var(--pink-dark);
--color-darker: var(--pink-darker);
}
.purple {
--color: var(--purple);
--color-10: var(--purple-10);
--color-20: var(--purple-20);
--color-30: var(--purple-30);
--color-40: var(--purple-40);
--color-dark: var(--purple-dark);
--color-darker: var(--purple-darker);
}
.blue,
.info {
--color: var(--blue);
--color-10: var(--blue-10);
--color-20: var(--blue-20);
--color-30: var(--blue-30);
--color-40: var(--blue-40);
--color-dark: var(--blue-dark);
--color-darker: var(--blue-darker);
}
.teal {
--color: var(--teal);
--color-10: var(--teal-10);
--color-20: var(--teal-20);
--color-30: var(--teal-30);
--color-40: var(--teal-40);
--color-dark: var(--teal-dark);
--color-darker: var(--teal-darker);
}
.green,
.success {
--color: var(--green);
--color-10: var(--green-10);
--color-20: var(--green-20);
--color-30: var(--green-30);
--color-40: var(--green-40);
--color-dark: var(--green-dark);
--color-darker: var(--green-darker);
}
.yellow {
--color: var(--yellow);
--color-10: var(--yellow-10);
--color-20: var(--yellow-20);
--color-30: var(--yellow-30);
--color-40: var(--yellow-40);
--color-dark: var(--yellow-dark);
--color-darker: var(--yellow-darker);
}
.orange,
.warning {
--color: var(--orange);
--color-10: var(--orange-10);
--color-20: var(--orange-20);
--color-30: var(--orange-30);
--color-40: var(--orange-40);
--color-dark: var(--orange-dark);
--color-darker: var(--orange-darker);
}
.brown {
--color: var(--brown);
--color-10: var(--brown-10);
--color-20: var(--brown-20);
--color-30: var(--brown-30);
--color-40: var(--brown-40);
--color-dark: var(--brown-dark);
--color-darker: var(--brown-darker);
}
.black {
--color: var(--dark);
--color-10: var(--dark-10);
--color-20: var(--dark-20);
--color-30: var(--dark-30);
--color-40: var(--dark-40);
--color-dark: var(--dark-dark);
--color-darker: var(--dark-darker);
}
[data-theme-trigger=toggle] .dark-on,
[data-theme=dark] [data-theme-trigger=toggle] .dark-off,
[data-theme=dark] [data-theme-trigger=toggle]>*:nth-child(1),
[data-theme-trigger=toggle]>*:nth-child(2) {
display: none !important;
}
[data-theme-trigger=toggle] .dark-off,
[data-theme=dark] [data-theme-trigger=toggle] .dark-on,
[data-theme-trigger=toggle]>*:nth-child(1),
[data-theme=dark] [data-theme-trigger=toggle]>*:nth-child(2) {
display: inherit !important;
}
.gap-0 {
gap: 0 !important;
}
.gap-4 {
gap: 4px !important;
}
.gap-8 {
gap: 8px !important;
}
.gap-12 {
gap: 12px !important;
}
.gap-16 {
gap: 16px !important;
}
.gap-20 {
gap: 20px !important;
}
.gap-24 {
gap: 24px !important;
}
.gap-28 {
gap: 28px !important;
}
.gap-32 {
gap: 32px !important;
}
.gap-36 {
gap: 36px !important;
}
.gap-40 {
gap: 40px !important;
}
.gap-44 {
gap: 44px !important;
}
.gap-48 {
gap: 48px !important;
}
.row-gap-4 {
row-gap: 4px !important;
}
.row-gap-8 {
row-gap: 8px !important;
}
.row-gap-12 {
row-gap: 12px !important;
}
.row-gap-16 {
row-gap: 16px !important;
}
.row-gap-20 {
row-gap: 20px !important;
}
.row-gap-24 {
row-gap: 24px !important;
}
.row-gap-28 {
row-gap: 28px !important;
}
.row-gap-32 {
row-gap: 32px !important;
}
.row-gap-36 {
row-gap: 36px !important;
}
.row-gap-40 {
row-gap: 40px !important;
}
.row-gap-44 {
row-gap: 44px !important;
}
.row-gap-48 {
row-gap: 48px !important;
}
.lock-selection,
.btn,
.tooltip-text,
.progress,
.form-control:placeholder-shown,
.glyph,
.navbar,
.img-th,
.img-cover,
label {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.m-auto {
margin: auto !important;
}
.m-0 {
margin: 0 !important;
}
.mt-auto {
margin-top: auto !important;
}
.mt-0 {
margin-top: 0 !important;
}
.ml-auto {
margin-left: auto !important;
}
.ml-0 {
margin-left: 0 !important;
}
.mr-auto {
margin-right: auto !important;
}
.mr-0 {
margin-right: 0 !important;
}
.mb-auto {
margin-bottom: auto !important;
}
.mb-0 {
margin-bottom: 0 !important;
}
.p-0 {
padding: 0 !important;
}
.pt-0 {
padding-top: 0 !important;
}
.pr-0 {
padding-right: 0 !important;
}
.pb-0 {
padding-bottom: 0 !important;
}
.pl-0 {
padding-left: 0 !important;
}
.px-0 {
padding-right: 0 !important;
padding-left: 0 !important;
}
.py-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.r-0 {
border-radius: 0 !important;
}
.r-8 {
border-radius: 8px !important;
}
.r-10 {
border-radius: 10px !important;
}
.r-12 {
border-radius: 12px !important;
}
.r-14 {
border-radius: 14px !important;
}
.r-16 {
border-radius: 16px !important;
}
.r-18 {
border-radius: 18px !important;
}
.r-20 {
border-radius: 20px !important;
}
.r-22 {
border-radius: 22px !important;
}
.r-24 {
border-radius: 24px !important;
}
.r-50 {
border-radius: 50% !important;
}
.b-0 {
border: 0 !important;
}
.w-fit {
width: fit-content !important;
}
.w-fluid {
max-width: unset !important;
}
.w-20 {
width: 20% !important;
}
.w-25 {
width: 25% !important;
}
.w-33 {
width: 33.333% !important;
}
.w-50 {
width: 50% !important;
}
.w-100 {
width: 100% !important;
}
.w-120 {
max-width: 120px !important;
}
.w-160 {
max-width: 160px !important;
}
.w-200 {
max-width: 200px !important;
}
.w-240 {
max-width: 240px !important;
}
.w-280 {
max-width: 280px !important;
}
.w-320 {
max-width: 320px !important;
}
.w-360 {
max-width: 360px !important;
}
.w-400 {
max-width: 400px !important;
}
.w-440 {
max-width: 440px !important;
}
.w-480 {
max-width: 480px !important;
}
.w-576 {
max-width: 576px !important;
}
.w-640 {
max-width: 640px !important;
}
.w-720 {
max-width: 720px !important;
}
.w-900 {
max-width: 900px !important;
}
.w-1000 {
max-width: 1000px !important;
}
.w-1080 {
max-width: 1080px !important;
}
.w-1280 {
max-width: 1280px !important;
}
.w-1600 {
max-width: 1600px !important;
}
.w-1920 {
max-width: 1920px !important;
}
/* GLYPH */
.caret::before {
mask: var(--icon-caret) no-repeat center / 24px;
content: '';
display: block;
width: 14px;
height: 14px;
background-color: currentColor;
}
.close::before {
mask: var(--icon-plus) no-repeat center / 24px;
content: '';
display: block;
transform: rotate(45deg);
width: 24px;
height: 24px;
background-color: currentColor;
}
.fab {
font-size: 20px;
}
.glyph {
direction: ltr;
font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
display: inline-block;
font-size: 24px;
font-family: var(--glyph);
font-style: normal;
font-weight: 400 !important;
line-height: 1 !important;
text-decoration: none !important;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
}
.glyph.fill {
font-variation-settings: 'FILL'1 !important;
}
.glyph.new {
position: relative;
}
.glyph.new::after {
content: '';
display: block;
position: absolute;
top: -2px;
right: -2px;
width: 12px;
height: 12px;
background-color: var(--red-dark);
border: 2px solid var(--card);
border-radius: 50%;
}
.glyph.emoji {
font-size: 20px;
}
/* COMPONENTS */
.alert {
display: flex;
flex-wrap: wrap;
gap: 24px;
position: relative;
padding: 20px 24px;
border: var(--stroke) solid var(--color);
border-radius: var(--radius-md);
line-height: 1.75;
}
.alert>*:not(.glyph) {
flex: 1;
margin: auto 0;
}
.alert a {
color: var(--color) !important;
}
.alert a:hover {
text-underline-offset: 5px;
text-decoration: underline;
}
.alert::after {
content: '';
display: block;
position: absolute;
top: 50%;
left: -3px;
transform: translateY(-50%);
width: 5px;
height: 24px;
background-color: var(--color);
border-radius: 99px;
}
.alert::before {
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
content: '';
display: block;
position: relative;
width: 24px;
height: 24px;
margin: auto 0;
background-color: var(--color);
}
.alert.warning::before {
mask: var(--icon-warning);
}
.alert.success::before {
mask: var(--icon-success);
}
.alert.info::before {
mask: var(--icon-info);
}
.alert.error::before {
mask: var(--icon-error);
}
.alert.primary::before,
.alert.icon::before {
display: none;
}
.alert.icon .glyph {
margin: auto 0;
color: var(--color);
}
[dark-mode=true] .alert {
background-color: var(--color-10);
}
[class*=bg-] {
background-color: var(--color) !important;
background-repeat: repeat;
background-position: center;
}
.bg-grid {
background-image: var(--bg-grid);
}
.bg-dot {
background-image: var(--bg-dot);
}
.bg-graph {
background-image: var(--bg-graph);
}
.bg-stripe {
background-image: var(--bg-stripe);
}
.bg-plus {
background-image: var(--bg-plus);
}
.bg-times {
background-image: var(--bg-times);
}
.bg-cube {
background-image: var(--bg-cube);
}
.bg-rhombus {
background-image: var(--bg-rhombus);
}
.btn {
display: inline-flex;
align-items: center;
gap: 14px;
position: relative;
min-width: 0;
height: var(--btn-height);
padding-right: var(--btn-padding-x);
padding-left: var(--btn-padding-x);
transition: var(--ease);
background-color: var(--color);
border: 0;
border-radius: var(--radius-md);
font-size: var(--font-size-md);
line-height: 1.4;
color: var(--text-reverse) !important;
text-decoration: none !important;
}
.btn:hover {
background-color: var(--color-dark);
}
.btn::before {
will-change: box-shadow, opacity;
content: '';
display: block;
position: absolute;
z-index: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transition: box-shadow var(--ease), opacity var(--ease);
border: var(--stroke) solid transparent;
border-radius: inherit;
}
.btn>* {
position: relative;
z-index: 1;
}
.btn:not(.btn.wide):not(.btn-sq)>.glyph {
margin-right: -1px;
margin-left: -1px;
}
.btn img,
.btn svg {
width: auto;
height: 24px;
}
.btn span b,
.btn span strong,
.btn span small {
display: block;
position: relative;
line-height: 1;
}
.btn span small:first-child {
top: 1px;
}
.btn span small+b,
.btn span small+strong {
margin-top: 8px;
}
.btn span b+small,
.btn span strong+small {
margin-top: 8px;
}
.btn.btn-xs {
--btn-height: 24px;
--btn-padding-x: 10px;
gap: 6px;
height: var(--btn-height);
border-radius: var(--radius-xs);
font-size: var(--font-size-sm);
}
.btn.btn-xs.ext {
--btn-height: 28px;
--btn-padding-x: 12px;
gap: 8px;
}
.btn.btn-sm {
--btn-height: 32px;
--btn-padding-x: 12px;
gap: 12px;
height: var(--btn-height);
border-radius: var(--radius-sm);
font-size: calc(var(--font-size-sm) + 1px);
}
.btn.btn-sm.ext {
--btn-height: 36px;
--btn-padding-x: 14px;
}
.btn.btn-md {
--btn-height: 40px;
--btn-padding-x: 16px;
height: var(--btn-height);
}
.btn.btn-md.ext {
--btn-height: 44px;
--btn-padding-x: 18px;
}
.btn.btn-lg {
--btn-padding-x: 24px;
--btn-height: 56px;
height: var(--btn-height);
font-size: 16px;
}
.btn.btn-xl {
--btn-padding-x: 28px;
--btn-height: 64px;
height: var(--btn-height);
font-size: 18px;
}
.btn.btn-sq {
justify-content: center;
width: var(--btn-height);
min-width: var(--btn-height);
padding: 0;
text-align: center;
}
.btn.btn-a {
height: unset !important;
padding: 0;
background-color: transparent;
border-radius: 0;
line-height: unset;
color: var(--color) !important;
}
.btn.btn-a.text-underline::after {
pointer-events: none;
content: '';
display: block;
position: absolute;
bottom: -4px;
left: 0;
right: 0;
opacity: 0;
transition: .15s ease;
border-bottom: 1px solid var(--primary);
}
.btn.btn-a.text-underline:hover::after {
opacity: 1;
}
.btn.btn-b {
display: flex;
}
.btn.btn-c {
--btn-padding-x: 0;
}
.btn.btn-h {
height: unset !important;
min-height: 48px;
padding-top: var(--btn-padding-y);
padding-bottom: var(--btn-padding-y);
}
.btn.btn-i,
.btn.btn-i.btn-o {
box-shadow: unset !important;
overflow: unset;
width: unset !important;
height: unset;
padding: 0 !important;
background-color: transparent !important;
border-color: transparent !important;
font-size: inherit;
color: var(--text) !important;
text-align: unset;
}
.btn.btn-i:hover {
background-color: transparent;
color: var(--color) !important;
}
.btn.btn-i::before {
display: none;
}
.btn.btn-i img {
width: auto;
height: var(--btn-height);
transition: box-shadow var(--ease);
border-radius: inherit;
}
.btn.btn-i:hover img {
box-shadow: 0 0 0 3px var(--color);
}
.btn.btn-i figure {
border-radius: inherit;
}
.btn.btn-i.btn-o figure img {
box-shadow: unset;
}
.btn.btn-i.btn-o figure::before {
box-shadow: 0 0 0 2px inset var(--color);
content: '';
display: block;
position: absolute;
z-index: -1;
top: -4px;
bottom: -4px;
left: -4px;
right: -4px;
transition: box-shadow var(--ease);
border-radius: inherit;
}
.btn.btn-i.btn-o:hover figure::before {
box-shadow: 0 0 0 4px inset var(--color);
}
.btn.btn-i.btn-o:not(.btn-p) figure {
border-radius: calc(var(--radius-md) + 4px);
}
.btn.btn-i.btn-o:not(.btn-p) figure img {
border-radius: var(--radius-md);
}
.btn.btn-l {
background-color: var(--color-30);
color: var(--color-darker) !important;
}
.btn.btn-l:not(.btn-o)::before {
border-color: var(--color);
}
.btn.btn-l:not(.btn-o).default::before,
.btn.btn-l:not(.btn-o).black::before {
border-color: var(--text);
}
.btn.btn-l:hover::before,
.btn.btn-l.default:hover:before,
.btn.btn-l.black:hover:before {
opacity: 1;
}
.btn.btn-o {
padding-right: calc(var(--btn-padding-x) - var(--stroke));
padding-left: calc(var(--btn-padding-x) - var(--stroke));
background-color: transparent;
border: var(--stroke) solid transparent;
border-color: var(--color);
color: var(--color-darker) !important;
}
.btn.btn-o:hover {
background-color: var(--color-10);
}
.btn.btn-o::before {
box-shadow: 0 0 0 0 inset var(--color);
top: calc(var(--stroke) * -1);
bottom: calc(var(--stroke) * -1);
left: calc(var(--stroke) * -1);
right: calc(var(--stroke) * -1);
opacity: 1;
background-color: transparent;
}
.btn.btn-o:hover::before {
box-shadow: 0 0 0 1px inset var(--color);
}
.btn.btn-o.default,
.btn.btn-o.btn-l.default:hover {
border-color: var(--mono-40) !important;
}
.btn.btn-o.default:hover::before {
box-shadow: 0 0 0 1px inset var(--mono-40);
}
.btn.btn-o.btn-l {
background-color: var(--color-10);
border-color: var(--color-40);
}
.btn.btn-o.btn-l:hover {
border-color: var(--color);
}
.btn.btn-p {
padding-right: calc(var(--btn-padding-x) + 4px);
padding-left: calc(var(--btn-padding-x) + 4px);
border-radius: 99px !important;
}
.btn.btn-t {
box-shadow: unset !important;
background-color: transparent !important;
border: 0 !important;
color: var(--text) !important;
}
.btn.btn-t:hover {
color: var(--color) !important;
}
.btn.default {
color: var(--text) !important;
}
.btn.black:not(.btn-l):not(.btn-o) {
color: var(--text-reverse) !important;
}
.btn.yellow:not(.btn-l):not(.btn-o) {
color: var(--black) !important;
}
.btn.text-center {
justify-content: center;
}
.btn.brand:not(.btn-l) {
color: var(--text-reverse) !important;
}
.btn.brand:hover::before {
opacity: .15;
}
.btn.brand.btn-l::before {
background-color: transparent;
border: var(--stroke) solid currentColor;
}
.btn.brand.btn-l:hover::before {
opacity: 1;
}
.card {
padding: 20px 24px;
background-color: var(--card);
border: var(--stroke) solid var(--mono-30);
border-radius: var(--radius-lg);
}
.cardset {
display: grid;
grid-template-columns: repeat(1, 1fr);
border: var(--stroke) solid var(--mono-30);
border-radius: var(--radius-lg);
}
.cardset.divider,
.cardset[class*=gap-] {
border-width: 0;
}
.cardset .card {
border-width: 0;
border-radius: 0;
}
.cardset .card:nth-child(n+2) {
border-top-width: var(--stroke);
}
.cardset .card:first-child {
border-top-left-radius: var(--radius-lg);
border-top-right-radius: var(--radius-lg);
}
.cardset .card:last-child {
border-bottom-right-radius: var(--radius-lg);
border-bottom-left-radius: var(--radius-lg);
}
.cardset.divider .card:first-child {
padding-top: 0;
}
.cardset.divider .card:last-child {
padding-bottom: 0;
}
.cardset.icon .card {
display: flex;
gap: 16px;
}
.cardset.icon .card>* {
margin: auto 0;
}
.cardset.icon .card>span {
width: 24px;
text-align: center;
}
.cardset.icon .card>div {
flex: 1;
}
.cardset.hover .card:hover {
background-color: var(--mono-05);
}
.cardset[class*=gap-] .card {
margin: 0 !important;
transition: var(--ease);
border-width: var(--stroke);
border-radius: var(--radius-lg);
}
.cardset[class*=gap-].hover .card:hover {
box-shadow: 0 0 0 var(--stroke) inset var(--primary);
background-color: unset;
border-color: var(--primary);
}
.cardset.thumbnail .card {
overflow: hidden;
padding: 24px;
}
.cardset.thumbnail .card .img-th {
border-radius: var(--radius-md);
}
.cardset.thumbnail .card .img-th+* {
margin-top: 24px;
}
.cardset.thumbnail .card.flex .img-th+* {
margin-top: unset;
}
.breadcrumbs {
display: flex;
flex-wrap: wrap;
gap: 8px;
font-size: var(--font-size-md);
line-height: 1;
list-style: none;
}
.breadcrumbs>li {
flex-shrink: 1;
position: relative;
max-width: 240px;
margin: auto 0;
padding: 2px 0;
}
.breadcrumbs>li .glyph {
font-variation-settings: 'FILL'1;
display: flex;
font-size: 20px;
}
.breadcrumbs>li:last-child:not(:first-child) {
pointer-events: none;
font-weight: var(--font-semibold);
}
.breadcrumbs>li:nth-child(n+2) {
display: flex;
align-items: center;
gap: 8px;
}
.breadcrumbs>li span,
.breadcrumbs>li:nth-child(n+2) a {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.breadcrumbs>li:nth-child(n+2):before {
mask: var(--icon-caret) no-repeat center / contain;
content: '';
display: block;
transform: rotate(-90deg);
width: 16px;
height: 16px;
background-color: var(--mono-50);
}
.formatting {
overflow-wrap: anywhere;
line-height: 1.75;
text-align: justify;
word-break: normal;
}
.formatting a {
color: var(--primary);
}
.formatting a:hover {
text-underline-offset: 5px;
text-decoration: underline;
}
.formatting p:empty::before,
.formatting>hr:first-child,
.formatting>hr:last-child {
display: none;
}
.formatting img {
box-shadow: var(--shadow-sm);
display: block;
height: auto;
border-radius: var(--radius-sm);
}
.formatting figure {
position: relative;
}
.formatting ul li {
position: relative;
padding-left: 24px;
}
.formatting ul li::before {
content: '';
display: block;
position: absolute;
top: 11px;
left: 4px;
width: 6px;
height: 6px;
background-color: var(--mono-40);
border-radius: 99px;
}
.formatting ul.icons li::before {
display: none;
}
.formatting ul.icons li>span:first-child {
position: absolute;
left: -12px;
width: 24px;
text-align: center;
}
.formatting ul.icons li .glyph {
top: 2px;
}
.formatting ul.icons li .fab {
top: 4px;
font-size: 20px;
}
.formatting ol li {
position: relative;
padding-left: 24px;
counter-increment: num;
}
.formatting ol li::before {
content: counter(num)'.';
position: absolute;
left: 0;
font-weight: var(--font-regular);
}
.formatting ol li ol li {
padding-left: 36px;
counter-increment: subnum;
}
.formatting ol li ol li::before {
content: counter(num)'.'counter(subnum)'.';
}
.formatting ol li ol li ol>li {
padding-left: 48px;
counter-increment: subsubnum;
}
.formatting ol li ol li ol>li::before {
content: counter(num)'.'counter(subnum)'.'counter(subsubnum)'.';
}
.formatting ul,
.formatting ol {
padding-left: 16px;
list-style: none;
}
.formatting ul ul,
.formatting ul ol,
.formatting ol ol,
.formatting ol ul {
margin-top: 4px;
margin-bottom: 0;
padding-left: 0;
}
.formatting>* {
margin: 24px 0;
}
.formatting>p,
.formatting>ol,
.formatting>ul,
.formatting>table:not(.table-frame):not(.table-odd):not(.table-hz) {
margin: 16px 0;
}
.formatting h1 {
margin-bottom: 36px;
}
.formatting h2,
.formatting h3,
.formatting h4,
.formatting h5,
.formatting h6 {
margin-bottom: 16px;
}
.formatting>*:first-child,
.formatting h2+h2,
.formatting h3+h3,
.formatting h4+h4,
.formatting h5+h5,
.formatting h6+h6,
.formatting h2+h3,
.formatting h3+h4,
.formatting h4+h5,
.formatting h5+h6 {
margin-top: 0 !important;
}
.formatting>*:last-child {
margin-bottom: 0 !important;
}
.formatting li:nth-of-type(n+2) {
margin-top: 6px;
}
.formatting p img {
display: unset;
margin: 8px 0;
}
[class*=img-] {
position: relative;
overflow: hidden;
}
[class*=img-] img {
display: block;
}
.img-contain img,
img.img-contain {
object-fit: contain;
width: 100%;
height: 100%;
}
.img-cover img,
img.img-cover {
object-fit: cover;
object-position: center;
transform: scale(1);
width: 100%;
height: 100%;
}
.img-th {
box-shadow: var(--shadow-sm);
display: block;
border-radius: var(--radius-xl);
}
.img-th::before {
content: ' ';
display: block;
position: absolute;
z-index: 9;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transition: var(--ease);
background-color: var(--backdrop);
}
.img-th:hover::before {
opacity: .25;
}
[class*=img-].clip img,
img[class*=img-].clip {
overflow-clip-margin: unset;
}
.navbar {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: var(--navbar-padding);
position: relative;
z-index: 99991;
min-width: 0;
padding: var(--navbar-spacing) var(--navbar-padding);
font-size: var(--font-size-md);
}
.navbar.fixed {
position: fixed;
z-index: 99992;
top: 0;
left: 0;
right: 0;
background-color: var(--card);
}
.navbar.absolute {
top: 0;
left: 0;
right: 0;
}
.navbar.sticky {
position: relative;
z-index: 99993;
top: auto;
left: unset;
right: 0;
background-color: var(--card);
}
.navbar.sticky.fix {
position: fixed;
top: 0;
left: 0;
right: 0;
}
.navbar.sticky.end {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.navbar.color {
background-color: var(--color);
}
.navbar.color a,
.navbar.color a.btn-i {
color: var(--text-reverse) !important;
}
.navbar.color a:not(.btn):hover {
opacity: .75;
}
.navbar>.container,
.navbar>.fluid {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: var(--navbar-padding);
width: 100%;
min-width: 0;
}
.navbar.sticky>.container {
max-width: var(--container);
padding-right: 0;
padding-left: 0;
}
.container .navbar.sticky.fix {
max-width: calc(var(--container) + var(--container-padding) + var(--container-padding));
margin: 0 auto;
}
.container .navbar.fluid.sticky:not(.fix) {
max-width: unset;
margin-right: calc(var(--container-padding) * -1);
margin-left: calc(var(--container-padding) * -1);
}
.container .navbar:not(.fluid).sticky.fix {
clip-path: inset(-9999px var(--container-padding));
border-right: var(--container-padding) solid transparent;
border-left: var(--container-padding) solid transparent;
}
.navbar-logo a {
display: flex;
font-weight: var(--font-semibold);
}
.navbar-logo a:not(.btn-i) img {
max-width: 160px;
max-height: 48px;
}
.navbar-logo a>b {
font-size: 18px;
}
.navbar:not(.color) .navbar-logo a.btn-i:hover {
color: var(--primary) !important;
}
.navbar nav {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: var(--navbar-gap);
position: relative;
}
.navbar nav.right {
margin-left: auto;
}
.navbar nav.center {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.navbar nav ul {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: var(--navbar-gap);
}
.navbar nav a:not(.btn) {
display: flex;
align-items: center;
column-gap: 12px;
position: relative;
height: 48px;
padding-bottom: 1px;
line-height: 1.2;
}
.navbar nav .btn {
display: flex;
}
.navbar nav .caret {
margin-top: -1px;
margin-left: -2px;
}
.navbar nav .divider {
display: block;
color: var(--mono-30);
}
.navbar nav .divider.line {
height: 24px;
border-left: 1px solid var(--mono-30);
}
.navbar nav .divider.dot {
width: 4px;
height: 4px;
background-color: var(--mono-30);
border-left: 0;
border-radius: 50%;
}
.navbar.color .glyph.new::after {
border-color: var(--color);
}
.progress,
progress {
position: relative;
overflow: hidden;
width: 100%;
height: 24px;
background-color: var(--mono-20);
border-radius: 99px;
}
.progress>div {
display: flex;
justify-content: right;
align-items: center;
height: 100%;
transition: width .5s var(--cubic);
background-color: var(--color);
border-radius: 99px;
}
.show-percent>*::before,
progress.show-percent::before {
content: attr(value)'%';
display: flex;
align-items: center;
position: absolute;
top: 2px;
right: 2px;
height: 20px;
padding: 0 8px;
background-color: var(--mono-20);
border-radius: inherit;
font-size: var(--font-size-sm);
font-style: italic;
font-weight: var(--font-semibold);
line-height: 1;
}
progress::-webkit-progress-value {
background-color: var(--color);
border-radius: 99px;
}
progress::-moz-progress-bar {
background-color: var(--color);
border-radius: 99px;
}
table {
overflow: unset;
width: 100%;
max-width: 100%;
border: 0;
font-size: var(--font-size-md);
line-height: 1.75;
}
table .formatting {
line-height: 1.75;
}
table th,
table td {
position: relative;
padding: 12px 16px;
border: var(--stroke) solid var(--mono-30);
text-align: left;
vertical-align: middle;
}
table th:first-child,
table td:first-child {
padding-left: 0;
border-left-width: 0;
}
table th:last-child,
table td:last-child {
padding-right: 0;
border-right-width: 0;
}
table thead tr:first-child th,
table thead tr:first-child td {
border-top-width: 0;
}
table thead {
border-bottom: 2px solid var(--mono-30);
}
table tbody tr:first-child td {
border-top-width: 0;
}
table tbody tr:last-child td {
border-bottom-width: 0;
}
table tfoot th,
table tfoot td {
padding-top: 16px;
padding-bottom: 16px;
}
table tfoot tr:last-child th,
table tfoot tr:last-child td {
border-bottom-width: 0;
}
table tfoot {
border-top: 2px solid var(--mono-30);
}
.table-hz th,
.table-hz td {
border-right: 0;
border-left: 0;
}
.table-frame {
overflow: hidden;
border: var(--stroke) solid var(--mono-30);
border-radius: var(--radius-sm);
}
.table-frame.transparent thead,
.table-frame.transparent tfoot {
background-color: transparent;
}
.table-frame thead,
.table-frame tfoot {
background-color: var(--mono-05);
border-width: 0;
}
.table-frame thead tr:first-child th,
.table-frame thead tr:first-child td {
padding-top: 16px;
}
.table-frame tfoot tr:last-child th,
.table-frame tfoot tr:last-child td {
padding-bottom: 16px;
}
.table-frame th,
.table-frame td {
padding-right: 16px !important;
padding-left: 16px !important;
}
.table-odd th,
.table-odd td {
padding-right: 16px !important;
padding-left: 16px !important;
border-width: 0;
}
.table-odd thead,
.table-odd tfoot {
border-width: 0;
}
.table-odd tbody tr:nth-child(odd) td {
background-color: var(--odd);
}
.table-odd tbody tr:nth-child(odd) td:first-child {
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.table-odd tbody tr:nth-child(odd) td:last-child {
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.table-odd tbody:not(:last-child) tr:last-child:nth-child(even) td {
border-bottom-width: var(--stroke);
}
.table-hz thead tr:first-child th,
.table-hz thead tr:first-child td,
.table-hz tbody:first-child tr:first-child td,
.table-odd thead tr:first-child th,
.table-odd thead tr:first-child td {
padding-top: 0;
}
.table-hz tfoot tr:last-child th,
.table-hz tfoot tr:last-child td,
.table-hz tbody:last-child tr:last-child td,
.table-odd tfoot tr:last-child th,
.table-odd tfoot tr:last-child td,
.table-odd tbody:last-child tr:last-child:nth-child(even) td {
padding-bottom: 0;
}
.color:not(.hover),
.color.hover:hover {
color: var(--color);
}
.font-1 {
font-family: var(--font-1);
}
.font-2 {
font-family: var(--font-2);
}
.text-0 {
font-size: 0;
}
.text-12 {
font-size: 12px;
}
.text-14 {
font-size: 14px;
}
.text-16 {
font-size: 16px;
}
.text-18 {
font-size: 18px;
}
.text-20 {
font-size: 20px;
}
.text-24 {
font-size: 24px;
}
.text-28 {
font-size: 28px;
}
.text-36 {
font-size: 36px;
}
.text-40 {
font-size: 40px;
}
.text-44 {
font-size: 44px;
}
.text-48 {
font-size: 48px;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-justify {
text-align: justify;
}
.text-lowercase {
text-transform: lowercase;
}
.text-uppercase {
text-transform: uppercase;
}
.text-capitalize {
text-transform: capitalize;
}
.text-underline:hover {
text-underline-offset: 5px;
text-decoration: underline;
}
.text-break {
word-break: break-all;
}
.text-regular {
font-weight: var(--font-regular);
}
.text-italic {
font-style: italic;
}
.text-bold {
font-weight: var(--font-semibold);
}
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wrapper {
display: grid;
gap: 24px;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
min-height: 240px;
}
[class*=wrapper-] {
width: 100%;
max-width: unset;
}
[class*=wrapper-].wide {
grid-column: span 2;
}
.wrapper [class*=wrapper-]:only-child {
padding: 0;
border: 0;
}
/* LAYOUTS */
.flex,
.group {
display: flex;
flex-wrap: wrap;
min-width: 0;
}
.flex-v {
display: flex;
flex-direction: column;
flex-wrap: wrap;
min-width: 0;
}
.flex-0 {
flex: unset !important;
}
.flex-1 {
flex: 1 !important;
}
.flex fieldset:nth-of-type(n+2),
.flex .floating-label:nth-of-type(n+2),
.flex-v fieldset:nth-of-type(n+2),
.flex-v .floating-label:nth-of-type(n+2) {
margin-top: 0;
}
.group:not(.w-fit)>*:not(.btn):not(label) {
flex: 1;
}
.group>label {
display: flex;
align-items: center;
padding: 0 20px;
border: var(--stroke) solid var(--stroke-color);
border-radius: var(--radius-md);
font-weight: initial;
line-height: 1;
}
.group>*:not(:first-child):not(:last-child),
.group>*:not(:first-child):not(:last-child)>* {
border-radius: 0;
}
.group:not(.btn-o)>*:first-child,
.group:not(.btn-o)>*:first-child>* {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.group:not(.btn-o)>*:last-child,
.group:not(.btn-o)>*:last-child>* {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.group>.btn-o:nth-child(n+2),
.group>input:nth-child(n+2),
.group>select:nth-child(n+2),
.group>label:nth-child(n+2),
.group>.floating-label:nth-child(n+2),
.group>.input-icon:nth-child(n+2) {
margin-left: calc(var(--stroke) * -1) !important;
}
.group>*:hover {
z-index: 1;
}
.group>*:focus,
.group>*:focus-within {
z-index: 2;
}
.group.btn-o {
gap: 2px;
padding: 2px;
border: 2px solid var(--color);
border-radius: calc(var(--radius-md) + 4px);
}
.group.btn-o.btn-p {
border-radius: 99px;
}
.group.w-100>.btn-b {
flex: 1;
}
.underline .group label {
border-top-width: 0;
border-right-width: 0;
border-left-width: 0;
border-radius: 0;
}
.underline .group>label:last-child {
padding-right: 0;
}
.underline .group>label:first-child {
padding-left: 0;
}
.grid {
display: grid;
}
.grid.auto-fit,
.cardset.auto-fit {
grid-template-columns: repeat(auto-fit, minmax(var(--feed), 1fr));
}
.grid.auto-fill,
.cardset.auto-fill {
grid-template-columns: repeat(auto-fill, minmax(var(--feed), 1fr));
}
.grid.first-fit>*:first-of-type:last-of-type,
.cardset.first-fit>*:first-of-type:last-of-type {
grid-column: 1 / -1;
}
.grid-1 {
grid-template-columns: repeat(1, 1fr);
}
.grid-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
grid-template-columns: repeat(4, 1fr);
}
.grid-5 {
grid-template-columns: repeat(5, 1fr);
}
.grid-6 {
grid-template-columns: repeat(6, 1fr);
}
.col-span-2 {
grid-column: span 2 / span 2;
}
.col-span-3 {
grid-column: span 3 / span 3;
}
.col-span-4 {
grid-column: span 4 / span 4;
}
.col-span-5 {
grid-column: span 5 / span 5;
}
.col-span-6 {
grid-column: span 6 / span 6;
}
.row-span-2 {
grid-row: span 2 / span 2;
}
.row-span-3 {
grid-row: span 3 / span 3;
}
.row-span-4 {
grid-row: span 4 / span 4;
}
.row-span-5 {
grid-row: span 5 / span 5;
}
.row-span-6 {
grid-row: span 6 / span 6;
}
.col-start-1 {
grid-column-start: 1;
}
.col-start-2 {
grid-column-start: 2;
}
.col-start-3 {
grid-column-start: 3;
}
.col-start-4 {
grid-column-start: 4;
}
.col-start-5 {
grid-column-start: 5;
}
.col-start-6 {
grid-column-start: 6;
}
.row-start-1 {
grid-row-start: 1;
}
.row-start-2 {
grid-row-start: 2;
}
.row-start-3 {
grid-row-start: 3;
}
.row-start-4 {
grid-row-start: 4;
}
.row-start-5 {
grid-row-start: 5;
}
.row-start-6 {
grid-row-start: 6;
}
.grid fieldset,
.grid .floating-label {
margin: 0 !important;
}
.container {
max-width: calc(var(--container) + var(--container-padding) + var(--container-padding));
margin: 0 auto;
padding-right: var(--container-padding);
padding-left: var(--container-padding);
}
[aria-readonly=true] {
pointer-events: none;
}
.inherit {
display: inherit;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.overflow-h {
overflow: hidden;
}
.flow-x {
overflow-x: auto;
}
.x-center {
justify-content: center !important;
}
.x-left {
justify-content: start !important;
}
.x-right {
justify-content: end !important;
}
.x-fluid>* {
flex: 1;
max-width: unset;
}
.y-center {
align-items: center !important;
}
.y-start {
align-items: start !important;
}
.y-end {
align-items: end !important;
}
.shadow-sm {
box-shadow: var(--shadow-sm);
}
.shadow-md {
box-shadow: var(--shadow-md);
}
.shadow-lg {
box-shadow: var(--shadow-lg);
}
.shadow-xl {
box-shadow: var(--shadow-xl);
}
.block {
display: block;
}
.inline {
display: inline;
}
/* FORMS */
input,
select,
textarea,
.placeholder {
display: block;
max-width: 100%;
height: 48px;
padding: 1px 20px 0;
transition: var(--ease);
background-color: transparent;
border: var(--stroke) solid var(--stroke-color);
border-radius: var(--radius-md);
line-height: 1;
color: var(--text);
text-overflow: ellipsis;
}
input:hover,
select:hover,
textarea:hover {
border-color: var(--mono-50);
}
input::placeholder,
select::placeholder,
textarea::placeholder {
color: var(--mono-50);
}
input:disabled,
input:read-only,
select:disabled,
textarea:disabled,
textarea:read-only {
background-color: var(--mono-10);
}
input:disabled,
select:disabled,
textarea:disabled {
cursor: not-allowed;
}
input:focus,
select:focus,
textarea:focus {
box-shadow: 0 0 0 var(--stroke-focus) inset var(--primary);
border-color: var(--primary);
}
input[type=color] {
padding: 2px;
background-color: transparent;
}
input[type=color]::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type=color]::-webkit-color-swatch {
border: 0;
border-radius: calc(var(--radius-sm) + 1px);
}
input[type=color]::-moz-color-swatch {
border: 0;
border-radius: calc(var(--radius-sm) + 1px);
}
input[type=image] {
height: unset;
padding: 2px;
background-color: transparent;
border-radius: var(--radius-lg);
}
input[type=file] {
position: relative;
padding-top: 16px;
padding-left: calc(20px + 24px + 16px);
background-color: transparent;
}
input[type=file]::file-selector-button,
input[type=file]::-webkit-file-upload-button {
mask: var(--icon-attach) no-repeat -1px / contain;
position: absolute;
top: 50%;
left: 19px;
transform: translateY(-50%);
width: 24px;
height: 24px;
padding: 0;
transition: var(--ease);
background: transparent;
background-color: var(--text);
cursor: pointer;
border: 0;
color: transparent;
}
input[type=file]:focus::file-selector-button,
input[type=file]:focus::-webkit-file-upload-button {
background-color: var(--primary);
}
input[type=button],
input[type=reset],
input[type=submit] {
width: unset;
background-color: var(--default);
border-color: transparent;
}
input[type=button]:hover,
input[type=reset]:hover,
input[type=submit]:hover {
background-color: var(--default-dark);
}
input[type=range] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
pointer-events: unset !important;
box-shadow: unset !important;
overflow: hidden;
width: 100%;
height: unset;
padding: 0;
background: none !important;
cursor: pointer;
border: 0;
}
input[type=range]:disabled {
filter: grayscale(1);
cursor: not-allowed;
}
input[type=range]::-webkit-slider-thumb {
aspect-ratio: 1;
-webkit-appearance: none;
appearance: none;
height: 16px;
background-color: var(--primary);
border-radius: 50%;
border-image: linear-gradient(90deg, var(--primary) 50%, var(--mono-30) 0) 0 1 / calc(50% - 1px) 100vw / 0 calc(100vw + 2px);
}
input[type=range]::-moz-range-thumb {
aspect-ratio: 1;
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
background-color: var(--primary);
border-radius: 50%;
border-image: linear-gradient(90deg, var(--primary) 50%, var(--mono-30) 0) 0 1 / calc(50% - 1px) 100vw / 0 calc(100vw);
}
input[type=range]+.range-value {
pointer-events: none;
backdrop-filter: blur(2px);
will-change: opacity, transform;
position: absolute;
top: -28px;
opacity: 0;
transform: translateX(-50%) translateY(17px);
padding: 1px 8px 0;
transition: opacity .2s var(--cubic), transform .2s var(--cubic);
background-color: var(--primary-20);
border: var(--stroke) solid var(--primary);
border-radius: 99px;
font-size: var(--font-size-sm);
color: var(--primary);
text-align: center;
}
input[type=range]:hover+.range-value {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
select {
padding-right: 48px;
background: var(--icon-caret) no-repeat right 16px center / 24px;
cursor: pointer;
color: var(--text);
}
select:not([multiple]) option {
color: var(--black);
}
select[multiple] {
height: unset;
padding-top: 13px;
padding-bottom: 13px;
background: none !important;
}
textarea {
height: unset;
padding-top: 11px;
padding-bottom: 11px;
line-height: 1.75;
}
textarea.auto-height {
resize: none;
overflow: hidden;
}
fieldset,
.floating-label {
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
padding: 0;
border: 0;
}
fieldset:nth-of-type(n+2),
.floating-label:nth-of-type(n+2) {
margin-top: 16px;
}
fieldset [aria-label=Textarea] textarea {
width: 100%;
}
fieldset.flex {
flex-direction: unset;
}
label {
transition: var(--ease);
font-size: var(--font-size-md);
font-weight: var(--font-semibold);
line-height: 1.75;
color: var(--text);
}
.helpblock {
margin: 0;
font-size: var(--font-size-sm);
line-height: 1.75;
color: var(--mono-50);
}
label+.helpblock {
margin-top: -6px;
}
.placeholder {
display: flex;
background-color: transparent !important;
}
.placeholder span {
margin: auto 0;
font-size: var(--font-size-md);
color: var(--mono-50);
}
.input-icon {
position: relative;
}
.input-icon input {
width: 100%;
padding-right: calc(20px + 24px + 16px);
}
.input-icon .glyph {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
width: unset !important;
transition: var(--ease);
}
.input-icon .glyph:first-child {
left: 20px;
right: unset;
}
.input-icon .glyph:first-child+input {
padding-right: 20px;
padding-left: calc(20px + 24px + 16px);
}
.input-icon:focus-within .glyph {
color: var(--primary);
}
.form-hz fieldset {
flex-direction: row;
gap: 24px;
}
.form-hz fieldset>label:not(.option) {
display: flex;
justify-content: right;
align-items: center;
flex: unset;
min-height: 48px;
margin-bottom: auto;
}
.underline fieldset {
gap: 0;
}
.underline input,
.underline select,
.underline textarea {
padding-left: 0;
border-top-width: 0;
border-right-width: 0;
border-left-width: 0;
border-radius: 0;
}
.underline input:focus,
.underline select:focus,
.underline textarea:focus {
box-shadow: 0 -2px 0 calc(var(--stroke-focus) * -1) inset var(--primary);
}
.underline select {
background-position: right center;
}
.option {
--mark-size: 26px;
--mark-radius: 8px;
position: relative;
width: fit-content;
padding: 0;
padding-top: 1px;
cursor: pointer;
font-weight: 400 !important;
}
.option input {
box-shadow: unset;
appearance: none;
mask: var(--icon-check) no-repeat center / contain;
will-change: opacity, transform, background-color;
position: absolute;
top: 0;
opacity: 0;
transform: translateY(6px);
width: var(--mark-size);
height: var(--mark-size);
transition: opacity .2s var(--cubic), transform .2s var(--cubic), background-color .2s var(--cubic);
background-color: var(--primary);
cursor: unset;
border: 0;
}
.option input:checked {
opacity: 1;
transform: translateY(0);
}
.option input+span {
display: flex;
column-gap: 12px;
}
.option input+span::before,
.option input+span::after {
will-change: box-shadow, opacity, background-color, border-color;
content: '';
display: block;
flex: 0 0 var(--mark-size);
position: relative;
width: var(--mark-size);
height: var(--mark-size);
margin-top: -1px;
transition: box-shadow .2s var(--cubic), opacity .2s var(--cubic), background-color .2s var(--cubic), border-color .2s var(--cubic);
background-color: transparent;
border: var(--stroke) solid var(--stroke-color);
border-radius: calc(var(--mark-radius) + 1px);
}
.option input:checked+span::before,
.option input:checked+span::after {
box-shadow: 0 0 0 var(--stroke-focus) inset var(--primary);
background-color: var(--primary-20);
border-color: var(--primary);
}
.option input[role=switch] {
mask: unset;
opacity: 1;
transform: translateX(0) scale(1);
width: 18px;
height: 18px;
margin: 4px;
background-color: var(--mono-30);
border: 0;
border-radius: 99px;
}
.option input[role=switch]:checked {
transform: translateX(18px) scale(.8889);
background-color: var(--primary);
}
.option input[role=switch]+span::before,
.option input[role=switch]+span::after {
flex: 0 0 calc(var(--mark-size) + 18px);
border-radius: 99px;
}
.option input[type=radio] {
mask: unset;
width: 6px;
height: 6px;
margin: 10px;
border-radius: 50%;
}
.option input[type=radio]+span::before,
.option input[type=radio]+span::after {
border-radius: 50%;
}
.option input:disabled+span {
cursor: not-allowed;
color: var(--mono-50);
text-decoration: line-through;
}
.option input:disabled+span::before,
.option input:disabled+span::after {
background-color: var(--mono-10);
}
.option.reverse input {
right: 0;
}
.option.reverse input[role=switch] {
margin-right: 22px;
}
.option.reverse input+span::before,
.option:not(.reverse) input+span::after {
display: none;
}
.option.reverse.w-100 input+span::after {
margin-left: auto;
}
.option:hover {
color: var(--primary);
}
.option:hover input:not(:checked)+span::before,
.option:hover input:not(:checked)+span::after {
border-color: var(--mono-50);
}
.floating-label>*:not(label) {
position: relative;
z-index: 1;
width: 100%;
}
.floating-label label {
will-change: opacity, transform;
display: flex;
align-items: center;
position: absolute;
top: 0;
left: 16px;
opacity: 1;
transform: translateX(0);
height: 48px;
margin-left: 1px;
padding: 4px;
transition: opacity .2s var(--cubic), transform .2s var(--cubic);
font-weight: var(--font-regular) !important;
line-height: 1.2;
}
.floating-label label:not(.clone) {
color: var(--mono-50) !important;
}
.floating-label label.clone {
z-index: 1;
top: -10px;
opacity: 0;
transform: translateX(20px);
width: fit-content;
height: auto;
background-color: var(--card);
border-radius: 4px !important;
font-size: var(--font-size-sm);
line-height: 1;
color: var(--mono-50);
}
.floating-label>*:not(label)::placeholder {
color: transparent;
}
.floating-label:focus-within label:not(.clone),
.floating-label>*:not(label):not(:placeholder-shown)+label:not(.clone) {
opacity: 0;
transform: translateX(20px);
}
.floating-label:focus-within label.clone {
color: var(--primary-dark);
}
.floating-label:focus-within label.clone,
.floating-label>*:not(label):not(:placeholder-shown)+label+label.clone {
opacity: 1;
transform: translateX(0);
}
.floating-label.input-icon .glyph~label {
left: 56px;
}
.floating-label.input-icon .glyph~select {
padding-left: calc(20px + 24px + 16px);
}
.underline .floating-label label,
.underline .floating-label label.clone {
left: 0;
margin-left: 0;
padding-right: 0;
padding-left: 0;
}
/* STATES */
.collapse,
[data-accordion=content] {
will-change: opacity, max-height;
position: relative;
opacity: 0;
overflow: hidden;
max-height: 0;
transition: opacity .6s ease, max-height .2s var(--cubic);
font-size: var(--font-size-md);
}
[data-collapse=content]>*:not(.card),
[data-accordion=content]>*:not(.card) {
padding-top: 12px;
}
.collapse.expand,
[data-accordion=toggle].expand+[data-accordion=content] {
opacity: 1;
max-height: unset;
}
[data-accordion=toggle] {
display: flex;
gap: 12px;
min-height: 24px;
cursor: pointer;
font-size: var(--font-size-md);
line-height: 1.75;
}
[data-accordion=toggle].btn-t {
align-items: start;
height: unset;
padding: unset;
}
[data-accordion=toggle]::after {
will-change: transform, height;
content: '';
display: flex;
position: relative;
width: 24px;
height: 24px;
margin: auto 0;
margin-left: auto;
transition: transform .2s var(--cubic), height .2s var(--cubic);
background: var(--icon-caret) no-repeat center / contain;
}
[data-accordion=toggle].expand::after {
transform: rotate(-180deg);
}
[data-accordion=toggle] .glyph.hidden,
[data-accordion=toggle].expand .glyph.hidden+.glyph {
display: none;
}
[data-accordion=toggle].expand .hidden {
display: unset !important;
}
.accordion hr {
margin: 16px 0;
}
.accordion.plus-caret [data-accordion=toggle]::after {
transform: unset;
background-image: var(--icon-plus);
background-size: 20px;
}
.accordion.plus-caret [data-accordion=toggle].expand::after {
height: 2px;
}
.accordion .cardset {
overflow: hidden;
border-radius: var(--radius-md);
}
.accordion .cardset .card[data-accordion=toggle] {
padding-top: 16px;
padding-bottom: 16px;
}
.accordion .cardset [data-accordion=content] .card:first-child {
border-top-width: var(--stroke);
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.accordion:not([class*=gap-]) .cardset:nth-child(n+2) [data-accordion=toggle].card {
border-radius: 0;
}
.accordion:not([class*=gap-]) .cardset:last-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.accordion:not([class*=gap-]) .cardset:first-child {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.accordion:not([class*=gap-]) .cardset:nth-child(n+2) {
border-top-width: 0;
}
.accordion[class*=gap-] {
display: flex;
flex-direction: column;
gap: 12px;
}
.copy-notif {
box-shadow: var(--shadow-md);
backdrop-filter: blur(2px);
pointer-events: none;
will-change: opacity, transform;
display: flex;
align-items: center;
gap: 20px;
position: fixed;
z-index: 99999;
top: 24px;
left: 50%;
opacity: 0;
transform: translate(-50%, -100px);
padding: 16px 28px;
transition: opacity .2s var(--cubic), transform .25s var(--cubic);
background-color: var(--tooltip);
border-radius: 99px;
font-size: var(--font-size-md);
line-height: 1.4;
color: var(--mono-00);
}
.copy-notif::before {
mask: var(--icon-done) no-repeat center / 24px;
content: '';
display: block;
width: 24px;
height: 24px;
background-color: var(--green);
}
.copy-notif span u {
display: block;
overflow: hidden;
max-width: 220px;
text-decoration: unset;
text-overflow: ellipsis;
white-space: nowrap;
}
.copy-notif.show {
opacity: 1;
transform: translate(-50%, 0);
}
.navtabs {
display: flex;
flex-wrap: wrap;
gap: 12px;
min-width: 0;
}
.navtabs .btn {
background-color: var(--default);
color: var(--text) !important;
}
.navtabs .btn:hover {
background-color: var(--default-dark);
}
.navtabs>.btn.active {
background-color: var(--primary);
color: var(--text-reverse) !important;
}
.navtabs-content {
padding-top: 24px;
}
.navtabs-content>* {
display: none;
}
.navtabs-content>*.active {
display: block !important;
}
.navtabs.underline {
gap: 28px;
border-bottom: 1px solid var(--mono-30);
}
.navtabs.underline .btn {
height: unset;
padding: 0 0 16px;
background-color: transparent;
border: 0;
border-radius: 0;
line-height: 1;
}
.navtabs.underline .btn:hover {
color: var(--primary) !important;
}
.navtabs.underline .btn::before {
top: unset;
bottom: -3px;
left: 50%;
right: unset;
opacity: 1;
transform: translateX(-50%) scale(0);
width: 24px;
height: 5px;
transition: transform .2s var(--cubic);
background-color: var(--primary);
border-radius: 99px;
}
.navtabs.underline>.btn.active::before {
opacity: 1 !important;
transform: translateX(-50%) scale(1);
}
.navtabs.underline .btn::after {
content: '';
display: block;
position: absolute;
bottom: -1px;
left: 0;
right: 0;
transition: opacity var(--ease);
border-bottom: 1px solid var(--primary);
}
.navtabs.underline:not(.x-fluid) .btn:nth-child(n+2)::after {
left: -32px;
}
.navtabs.underline>.btn.active {
font-variation-settings: 'FILL'1;
color: var(--primary-dark) !important;
}
.navtabs.underline.x-fluid {
gap: 0;
}
.navtabs.underline.x-fluid .btn {
justify-content: center;
}
.navtabs.underline.x-fluid .btn::after {
opacity: 0;
}
.navtabs.underline.x-fluid .btn:hover::after {
opacity: 1;
}
[data-modal=content] {
backdrop-filter: blur(2px);
pointer-events: none;
display: flex;
position: fixed;
z-index: 99999;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
padding: 16px;
transition: opacity var(--ease);
background-color: var(--backdrop);
line-height: 1.75;
}
[data-modal=content] .close-overlay {
position: fixed;
z-index: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
[data-modal=content] .modal-card {
box-shadow: var(--shadow-lg);
will-change: opacity, transform;
display: flex;
flex-direction: column;
position: relative;
z-index: 1;
opacity: 0;
transform: scale(.95);
overflow: hidden;
width: 100%;
min-width: 0;
max-width: 480px;
max-height: 100%;
margin: auto;
transition: opacity .15s var(--cubic), transform .15s var(--cubic);
background-color: var(--dropdown);
border-radius: var(--radius-lg);
}
[data-modal=content] h3,
[data-modal=content] .modal-card h4,
[data-modal=content] .modal-card h5 {
font-size: 18px;
}
[data-modal=content] .modal-card>figure {
height: 200px;
}
[data-modal=content] .modal-card>header {
display: flex;
align-items: center;
gap: 24px;
padding: 24px;
border-bottom: var(--stroke) solid var(--mono-30);
}
[data-modal=content] .modal-card>header p {
margin-top: 8px;
margin-bottom: -4px;
font-size: var(--font-size-md);
color: var(--mono-50);
}
[data-modal=content] .modal-card>header [data-modal=close] {
justify-content: center;
width: 36px;
height: 36px;
margin: -24px 0;
padding: 0;
background-color: transparent;
border-radius: 99px;
color: var(--mono-50) !important;
}
[data-modal=content] .modal-card>header [data-modal=close]:hover {
color: var(--color-dark) !important;
}
[data-modal=content] .modal-card>footer {
margin-top: auto;
padding: 24px;
}
[data-modal=content] .modal-card>section {
overflow-y: auto;
padding: 24px;
font-size: var(--font-size-md);
}
[data-modal=content] .modal-card>section:not(:last-child) {
padding-bottom: 0 !important;
}
[data-modal=content].open {
pointer-events: unset;
opacity: 1;
}
[data-modal=content].open .modal-card {
opacity: 1;
transform: scale(1);
}
[data-modal-position=left] .modal-card {
transform: translateX(-36px);
max-width: 360px;
margin: 0;
margin-right: auto;
}
[data-modal-position=right] .modal-card {
transform: translateX(36px);
max-width: 360px;
margin: 0;
margin-left: auto;
}
[data-modal-position=left].open .modal-card,
[data-modal-position=right].open .modal-card {
transform: translateX(0);
}
[data-modal-type=confirm] .modal-card {
padding: 4px;
}
[data-modal-type=confirm] p {
margin-top: 8px;
}
.dropdown {
position: relative;
}
[data-dropdown=content] {
box-shadow: var(--shadow-sm);
pointer-events: none;
will-change: opacity, transform;
position: absolute;
z-index: 998;
top: 100%;
opacity: 0;
transform: translateY(12px);
min-width: 280px;
margin: 4px 0;
padding: 16px;
transition: opacity .15s var(--cubic), transform .15s var(--cubic);
background-color: var(--dropdown) !important;
border: 2px solid var(--color);
border-radius: var(--radius-md);
font-size: var(--font-size-md);
}
[data-dropdown=content].open {
pointer-events: unset;
opacity: 1;
transform: translateY(0) !important;
}
[data-dropdown=content] nav {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: unset;
gap: unset;
margin: unset;
}
[data-dropdown=content] nav hr {
margin: 16px 0;
}
[data-dropdown=content] nav .btn {
justify-content: unset;
gap: 16px;
overflow: unset;
height: 40px;
padding-right: 16px !important;
padding-left: 16px !important;
border-radius: var(--radius-sm);
}
[data-dropdown=content] nav .btn::after {
pointer-events: none;
content: '';
display: block;
position: absolute;
top: 50%;
left: -16px;
opacity: 0;
transform: translateY(-50%);
height: 24px;
transition: var(--ease);
border-left: 2px solid var(--color);
}
[data-dropdown=content] nav .btn-i {
height: unset;
padding-top: 12px;
padding-bottom: 12px;
}
[data-dropdown=content] nav .btn-i img {
margin-right: -2px;
margin-left: -2px;
}
[data-dropdown=content] nav .btn:not(.btn-f),
[data-dropdown=content] nav .btn.active:not(.btn-f),
[data-dropdown=content] nav .btn.current {
background-color: transparent;
color: var(--text) !important;
}
[data-dropdown=content] nav .btn.active,
[data-dropdown=content] nav .btn.current {
font-variation-settings: 'FILL'1;
}
[data-dropdown=content] nav .btn.current {
color: var(--color-darker) !important;
}
[data-dropdown=content] nav .btn:not(.btn-f):hover,
[data-dropdown=content] nav .btn.active:not(.btn-f):hover,
[data-dropdown=content] nav .btn.current:hover {
background-color: var(--color-20);
color: var(--color-darker) !important;
}
[data-dropdown=content] nav .btn:hover:after,
[data-dropdown=content] nav .btn.active::after,
[data-dropdown=content] nav .btn.current::after {
opacity: 1;
}
[data-dropdown=content] nav .title {
pointer-events: none;
display: flex;
align-items: center;
height: 40px;
padding: 0 16px;
background-color: unset;
}
[data-dropdown=content] nav .title+.btn-i {
padding-top: 8px;
}
.dropdown.center [data-dropdown=content] {
left: 50%;
transform: translate(-50%, 12px);
}
.dropdown.center [data-dropdown=content].open {
transform: translate(-50%, 0) !important;
}
.dropdown.right [data-dropdown=content] {
right: 0;
}
.dropdown.fluid [data-dropdown=content] {
left: 0;
right: 0;
min-width: unset;
}
.dropup [data-dropdown=content] {
top: unset;
bottom: 100%;
transform: translateY(-12px);
}
.dropup.center [data-dropdown=content] {
transform: translate(-50%, -12px);
}
.dropup .caret {
transform: rotate(-180deg);
margin-top: -1px;
}
.tooltip-text {
--x: 0;
--y: 0;
box-shadow: var(--shadow-sm);
overflow-wrap: break-word;
backdrop-filter: blur(2px);
pointer-events: none;
will-change: opacity, transform;
position: absolute;
z-index: 999;
opacity: 0;
transform: translate(var(--x), var(--y));
width: max-content;
max-width: 240px;
padding: 8px 12px;
transition: opacity .2s var(--cubic), transform .2s var(--cubic);
background: var(--tooltip);
border-radius: var(--radius-sm) !important;
font-size: var(--font-size-sm);
font-weight: var(--font-regular);
line-height: 1.4;
color: var(--text-reverse);
text-align: center;
word-break: break-word;
white-space: normal;
}
.tooltip-text.show {
--x: 0;
--y: 0;
opacity: 1;
}
[data-tooltip-text] {
position: relative;
overflow: unset;
}
[data-tooltip-position="top"] .tooltip-text {
--x: -50%;
bottom: 100%;
left: 50%;
}
[data-tooltip-position="top-left"] .tooltip-text {
bottom: 100%;
left: 0;
}
[data-tooltip-position="top-right"] .tooltip-text {
bottom: 100%;
right: 0;
}
[data-tooltip-position="bottom"] .tooltip-text {
--x: -50%;
top: 100%;
left: 50%;
}
[data-tooltip-position="bottom-left"] .tooltip-text {
top: 100%;
left: 0;
}
[data-tooltip-position="bottom-right"] .tooltip-text {
top: 100%;
right: 0;
}
[data-tooltip-position="left"] .tooltip-text {
--y: -50%;
top: 50%;
right: 100%;
}
[data-tooltip-position="left-top"] .tooltip-text {
top: 0;
right: 100%;
}
[data-tooltip-position="left-bottom"] .tooltip-text {
bottom: 0;
right: 100%;
}
[data-tooltip-position="right"] .tooltip-text {
--y: -50%;
top: 50%;
left: 100%;
}
[data-tooltip-position="right-top"] .tooltip-text {
top: 0;
left: 100%;
}
[data-tooltip-position="right-bottom"] .tooltip-text {
bottom: 0;
left: 100%;
}
[data-tooltip-position="top"] .tooltip-text.show,
[data-tooltip-position="top-left"] .tooltip-text.show,
[data-tooltip-position="top-right"] .tooltip-text.show {
--y: -8px;
}
[data-tooltip-position="bottom"] .tooltip-text.show,
[data-tooltip-position="bottom-left"] .tooltip-text.show,
[data-tooltip-position="bottom-right"] .tooltip-text.show {
--y: 8px;
}
[data-tooltip-position="left"] .tooltip-text.show,
[data-tooltip-position="left-top"] .tooltip-text.show,
[data-tooltip-position="left-bottom"] .tooltip-text.show {
--x: -8px;
}
[data-tooltip-position="right"] .tooltip-text.show,
[data-tooltip-position="right-top"] .tooltip-text.show,
[data-tooltip-position="right-bottom"] .tooltip-text.show {
--x: 8px;
}
@supports (-moz-appearance: none) {
.show-percent>*::before {
padding-bottom: 1px;
}
.tooltip-text {
padding-top: 7px;
padding-bottom: 9px;
}
}