:where(html) {
/* =========================================================
PRIMITIVE TOKENS
========================================================= */
/* ---------------------------------
COLOR
--------------------------------- */
/* BASE */
--red: hsl(3 75% 50%);
--orange: hsl(24 94% 50%);
--yellow: hsl(43 96% 50%);
--green: hsl(134 63% 50%);
--blue: hsl(221 83% 50%);
--purple: hsl(264 76% 50%);
--slate: hsl(215 20% 50%);
--gray: hsl(180 5% 50%);
--pink: hsl(330 81% 50%);
--teal: hsl(189 72% 50%);
--black: hsl(0 0% 0%);
--white: hsl(0 0% 100%);
/* RED */
--red-1: hsl(3 75% 97%);
--red-2: hsl(3 75% 90%);
--red-3: hsl(3 75% 77%);
--red-4: hsl(3 75% 63%);
--red-5: hsl(3 75% 50%);
--red-6: hsl(3 75% 42%);
--red-7: hsl(3 75% 34%);
--red-8: hsl(3 75% 26%);
--red-9: hsl(3 75% 18%);
--red-10: hsl(3 75% 10%);
/* ORANGE */
--orange-1: hsl(24 94% 97%);
--orange-2: hsl(24 94% 90%);
--orange-3: hsl(24 94% 77%);
--orange-4: hsl(24 94% 63%);
--orange-5: hsl(24 94% 50%);
--orange-6: hsl(24 94% 42%);
--orange-7: hsl(24 94% 34%);
--orange-8: hsl(24 94% 26%);
--orange-9: hsl(24 94% 18%);
--orange-10: hsl(24 94% 10%);
/* YELLOW */
--yellow-1: hsl(43 96% 97%);
--yellow-2: hsl(43 96% 90%);
--yellow-3: hsl(43 96% 77%);
--yellow-4: hsl(43 96% 63%);
--yellow-5: hsl(43 96% 50%);
--yellow-6: hsl(43 96% 42%);
--yellow-7: hsl(43 96% 34%);
--yellow-8: hsl(43 96% 26%);
--yellow-9: hsl(43 96% 18%);
--yellow-10: hsl(43 96% 10%);
/* GREEN */
--green-1: hsl(134 63% 97%);
--green-2: hsl(134 63% 90%);
--green-3: hsl(134 63% 77%);
--green-4: hsl(134 63% 63%);
--green-5: hsl(134 63% 50%);
--green-6: hsl(134 63% 42%);
--green-7: hsl(134 63% 34%);
--green-8: hsl(134 63% 26%);
--green-9: hsl(134 63% 18%);
--green-10: hsl(134 63% 10%);
/* BLUE */
--blue-1: hsl(221 83% 97%);
--blue-2: hsl(221 83% 90%);
--blue-3: hsl(221 83% 77%);
--blue-4: hsl(221 83% 63%);
--blue-5: hsl(221 83% 50%);
--blue-6: hsl(221 83% 42%);
--blue-7: hsl(221 83% 34%);
--blue-8: hsl(221 83% 26%);
--blue-9: hsl(221 83% 18%);
--blue-10: hsl(221 83% 10%);
/* PURPLE */
--purple-1: hsl(264 76% 97%);
--purple-2: hsl(264 76% 90%);
--purple-3: hsl(264 76% 77%);
--purple-4: hsl(264 76% 63%);
--purple-5: hsl(264 76% 50%);
--purple-6: hsl(264 76% 42%);
--purple-7: hsl(264 76% 34%);
--purple-8: hsl(264 76% 26%);
--purple-9: hsl(264 76% 18%);
--purple-10: hsl(264 76% 10%);
/* SLATE */
--slate-1: hsl(215 20% 97%);
--slate-2: hsl(215 20% 90%);
--slate-3: hsl(215 20% 77%);
--slate-4: hsl(215 20% 63%);
--slate-5: hsl(215 20% 50%);
--slate-6: hsl(215 20% 42%);
--slate-7: hsl(215 20% 34%);
--slate-8: hsl(215 20% 26%);
--slate-9: hsl(215 20% 18%);
--slate-10: hsl(215 20% 10%);
/* GRAY */
--gray-1: hsl(180 5% 97%);
--gray-2: hsl(180 5% 90%);
--gray-3: hsl(180 5% 77%);
--gray-4: hsl(180 5% 63%);
--gray-5: hsl(180 5% 50%);
--gray-6: hsl(180 5% 42%);
--gray-7: hsl(180 5% 34%);
--gray-8: hsl(180 5% 26%);
--gray-9: hsl(180 5% 18%);
--gray-10: hsl(180 5% 10%);
/* PINK */
--pink-1: hsl(330 81% 97%);
--pink-2: hsl(330 81% 90%);
--pink-3: hsl(330 81% 77%);
--pink-4: hsl(330 81% 63%);
--pink-5: hsl(330 81% 50%);
--pink-6: hsl(330 81% 42%);
--pink-7: hsl(330 81% 34%);
--pink-8: hsl(330 81% 26%);
--pink-9: hsl(330 81% 18%);
--pink-10: hsl(330 81% 10%);
/* TEAL */
--teal-1: hsl(189 72% 97%);
--teal-2: hsl(189 72% 90%);
--teal-3: hsl(189 72% 77%);
--teal-4: hsl(189 72% 63%);
--teal-5: hsl(189 72% 50%);
--teal-6: hsl(189 72% 42%);
--teal-7: hsl(189 72% 34%);
--teal-8: hsl(189 72% 26%);
--teal-9: hsl(189 72% 18%);
--teal-10: hsl(189 72% 10%);
/* BLACK */
--black-1: hsl(0 0% 0% / 0.1);
--black-2: hsl(0 0% 0% / 0.2);
--black-3: hsl(0 0% 0% / 0.3);
--black-4: hsl(0 0% 0% / 0.4);
--black-5: hsl(0 0% 0% / 0.5);
--black-6: hsl(0 0% 0% / 0.6);
--black-7: hsl(0 0% 0% / 0.7);
--black-8: hsl(0 0% 0% / 0.8);
--black-9: hsl(0 0% 0% / 0.9);
--black-10: hsl(0 0% 0% / 0.95);
/* WHITE */
--white-1: hsl(0 0% 100% / 0.1);
--white-2: hsl(0 0% 100% / 0.2);
--white-3: hsl(0 0% 100% / 0.3);
--white-4: hsl(0 0% 100% / 0.4);
--white-5: hsl(0 0% 100% / 0.5);
--white-6: hsl(0 0% 100% / 0.6);
--white-7: hsl(0 0% 100% / 0.7);
--white-8: hsl(0 0% 100% / 0.8);
--white-9: hsl(0 0% 100% / 0.9);
--white-10: hsl(0 0% 100% / 0.95);
/* ---------------------------------
TYPOGRAPHY
--------------------------------- */
/* FONT FAMILY */
--font-family-sans-serif: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-family-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
--font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
--font-family-inter: InterVariable, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
/* FONT SIZE */
--font-size-1: clamp(0.75rem, 1vw + 0.5rem, 0.875rem); /* 12px ~ 14px */
--font-size-2: clamp(0.875rem, 0.25vw + 0.8125rem, 1rem); /* 14px ~ 16px */
--font-size-3: clamp(1rem, 0.25rem + 1vw, 1.125rem); /* 16px ~ 18px */
--font-size-4: clamp(1.125rem, 1.08rem + 0.227vw, 1.25rem); /* 18px ~ 20px */
--font-size-5: clamp(1.25rem, 1rem + 0.667vw, 1.5rem); /* 20px ~ 24px */
--font-size-6: clamp(1.375rem, 1rem + 1vw, 1.75rem); /* 22px ~ 28px */
--font-size-7: clamp(1.5rem, 1.2727rem + 1.1364vw, 2.125rem); /* 24px ~ 34px */
--font-size-8: clamp(1.75rem, 1.477rem + 1.364vw, 2.5rem); /* 28px ~ 40px */
--font-size-9: clamp(2rem, 1.6667rem + 1.6667vw, 3rem); /* 32px ~ 48px */
--font-size-10: clamp(2.25rem, 1.705rem + 2.727vw, 3.75rem); /* 36px ~ 60px */
/* ICON */
--icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18 18 6M6 6l12 12' /%3E%3C/svg%3E");
--icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
--icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
--icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
/* LINE HEIGHT */
--line-height-1: 1.1;
--line-height-2: 1.2;
--line-height-3: 1.3;
--line-height-4: 1.45;
--line-height-5: 1.6;
--line-height-6: 1.75;
--line-height-7: 1.9;
--line-height-8: 2.05;
--line-height-9: 2.2;
--line-height-10: 2.35;
/* LETTER SPACING */
--letter-spacing-1: -0.075em;
--letter-spacing-2: -0.05em;
--letter-spacing-3: -0.035em;
--letter-spacing-4: -0.025em;
--letter-spacing-5: 0em;
--letter-spacing-6: 0.025em;
--letter-spacing-7: 0.035em;
--letter-spacing-8: 0.05em;
--letter-spacing-9: 0.075em;
--letter-spacing-10: 0.1em;
/* ---------------------------------
LAYOUT
--------------------------------- */
/* ASPECT RATIO */
--aspect-ratio-1: 9/16;
--aspect-ratio-2: 9/13;
--aspect-ratio-3: 8.5/11;
--aspect-ratio-4: 3/4;
--aspect-ratio-5: 1/1;
--aspect-ratio-6: 4/3;
--aspect-ratio-7: 11/8.5;
--aspect-ratio-8: 13/9;
--aspect-ratio-9: 16/9;
--aspect-ratio-10: 21/9;
/* CONTAINER */
--container-1: 480px;
--container-2: 600px;
--container-3: 720px;
--container-4: 840px;
--container-5: 960px;
--container-6: 1080px;
--container-7: 1280px;
--container-8: 1440px;
--container-9: 1600px;
--container-10: 1920px;
/* SIZE */
--size-1: 8px;
--size-2: 12px;
--size-3: 16px;
--size-4: 20px;
--size-5: 24px;
--size-6: 32px;
--size-7: 42px;
--size-8: 52px;
--size-9: 62px;
--size-10: 72px;
/* SPACE */
--space-1: 0.125rem; /* 2px */
--space-2: 0.25rem; /* 4px */
--space-3: 0.5rem; /* 8px */
--space-4: 0.75rem; /* 12px */
--space-5: 1rem; /* 16px */
--space-6: 1.25rem; /* 20px */
--space-7: 1.5rem; /* 24px */
--space-8: 1.75rem; /* 28px */
--space-9: 2rem; /* 32px */
--space-10: 2.25rem; /* 36px */
/* Z-INDEX */
--z-index-1: 1;
--z-index-2: 2;
--z-index-3: 3;
--z-index-4: 4;
--z-index-5: 5;
--z-index-6: 60;
--z-index-7: 70;
--z-index-8: 80;
--z-index-9: 90;
--z-index-10: 100;
/* ---------------------------------
EFFECTS
--------------------------------- */
/* BORDER RADIUS */
--border-radius-1: 2px;
--border-radius-2: 3px;
--border-radius-3: 4px;
--border-radius-4: 6px;
--border-radius-5: 8px;
--border-radius-6: 12px;
--border-radius-7: 16px;
--border-radius-8: 20px;
--border-radius-9: 24px;
--border-radius-10: 9999px;
/* BORDER WIDTH */
--border-width-1: 0.5px;
--border-width-2: 1px;
--border-width-3: 1.5px;
--border-width-4: 2px;
--border-width-5: 2.5px;
--border-width-6: 3px;
--border-width-7: 3.5px;
--border-width-8: 4px;
--border-width-9: 4.5px;
--border-width-10: 5px;
/* SHADOW */
--shadow-1: 0 1px 0 0 rgba(0, 0, 0, 0.04);
--shadow-2: 0 2px 3px 0 rgba(0, 0, 0, 0.08);
--shadow-3: 0 4px 6px 0 rgba(0, 0, 0, 0.07);
--shadow-4: 0 6px 8px 0 rgba(0, 0, 0, 0.06);
--shadow-5: 0 8px 12px 0 rgba(0, 0, 0, 0.05);
--shadow-6: 0 10px 16px 0 rgba(0, 0, 0, 0.05);
--shadow-7: 0 12px 20px 0 rgba(0, 0, 0, 0.06);
--shadow-8: 0 15px 30px 0 rgba(0, 0, 0, 0.07);
--shadow-9: 0 20px 50px 0 rgba(0, 0, 0, 0.08);
--shadow-10: 0 22px 60px 0 rgba(0, 0, 0, 0.10);
/* DURATION */
--duration-1: 50ms;
--duration-2: 75ms;
--duration-3: 100ms;
--duration-4: 150ms;
--duration-5: 200ms;
--duration-6: 250ms;
--duration-7: 300ms;
--duration-8: 400ms;
--duration-9: 500ms;
--duration-10: 1s;
/* DELAY */
--delay-1: 100ms;
--delay-2: 200ms;
--delay-3: 300ms;
--delay-4: 400ms;
--delay-5: 500ms;
--delay-6: 600ms;
--delay-7: 700ms;
--delay-8: 800ms;
--delay-9: 900ms;
--delay-10: 1s;
}
/* Reset
----------------------------------------------------------------------------- */
:where(html) {
font-family: InterVariable, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
font-feature-settings: 'liga' 1, 'calt' 1;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
body {
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul,
figure,
blockquote,
dl,
dd {
margin: 0;
}
img,
picture,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
max-width: 100%;
}
input,
button,
textarea,
select {
font: inherit;
}
:target {
scroll-margin-block: 6ex;
}
/* =========================================================
COMPONENTS
========================================================= */
/* ---------------------------------
SEMANTIC VARIABLES
--------------------------------- */
:root {
--cleat-container: var(--container-7);
--cleat-section-padding: 10% 5%;
--cleat-flow: var(--space-5);
--cleat-html-background-color: transparent;
--cleat-body-background-color: transparent;
--cleat-background-color: transparent;
--cleat-background-contrast-color: white;
--cleat-padding: var(--space-5);
--cleat-margin: var(--space-5);
--cleat-gap: var(--space-5);
--cleat-border-radius: var(--border-radius-5);
--cleat-shadow: var(--shadow-5);
--cleat-duration: var(--duration-5);
}
/* ---------------------------------
TYPOGRAPHY
--------------------------------- */
/* TYPOGRAPHY */
body {
color: var(--cleat-color);
background: var(--cleat-body-background-color);
max-width: none;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6, .display {
color: var(--cleat-color);
max-width: var(--cleat-character-length);
}
.display {
font-size: var(--font-size-10);
}
h1, .h1 {
font-size: var(--font-size-9);
}
h2, .h2 {
font-size: var(--font-size-8);
}
h3, .h3 {
font-size: var(--font-size-7);
}
h4, .h4 {
font-size: var(--font-size-6);
}
h5, .h5 {
font-size: var(--font-size-5);
}
h6, .h6 {
font-size: var(--font-size-4);
}
p, .p {
font-size: var(--font-size-3);
color: var(--cleat-color);
max-width: var(--cleat-character-length);
}
a {
color: var(--cleat-link-color);
text-decoration: var(--cleat-text-decoration);
&:hover {
color: var(--cleat-link-hover-color);
text-decoration: var(--cleat-text-decoration-hover);
}
}
.text-center {
text-align: center;
}
.list-style-none {
list-style: none;
padding-inline-start: 0;
}
/* BUTTON */
.button {
color: var(--cleat-color);
background: var(--cleat-background-contrast-color);
padding-block: calc(var(--cleat-padding) * .6) calc(var(--cleat-padding) * .75);
padding-block: calc(var(--cleat-padding) * .75);
padding-inline: calc(var(--cleat-padding) * 1.2);
margin-inline-end: var(--cleat-space);
margin-block: var(--cleat-space);
border-color: var(--cleat-border-color);
border-style: var(--cleat-border-style);
border-width: var(--cleat-border-width);
border-radius: var(--cleat-border-radius);
text-decoration: none;
font-weight: var(--cleat-font-weight);
letter-spacing: var(--cleat-letter-spacing);
line-height: 1;
display: inline-flex;
align-items: center;
gap: var(--space-2);
/* transition: color var(--cleat-transition), background var(--cleat-transition), border var(--cleat-transition); */
}
/* .button:hover {
color: var(--cleat-hover-color);
background: color-mix(in oklch, var(--cleat-background-contrast-color), black 10%);
text-decoration: none;
} */
/* TABLE */
.table-wrapper {
overflow: scroll;
--cleat-background-color: rgb(245, 243, 224);
--cleat-border-color: var(--blue-6);
}
table {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
margin-block-end: 10px;
}
th,
caption {
text-align: start;
}
caption {
padding-block-start: var(--cleat-space);
background: var(--cleat-background-color);
h1 {
padding: var(--cleat-space);
padding-block-end: var(--space-10);
text-align: center;
}
p {
border-block-start: 1px solid var(--cleat-border-color);
padding: 0 0.75rem 0.25rem;
text-transform: uppercase;
font-size: var(--font-size-1);
max-width: 100% !important;
}
}
thead {
border-block-style: double;
border-color: var(--cleat-border-color);
background: var(--cleat-background-color);
}
tfoot {
border-block-start: 1px solid var(--cleat-border-color);
background: var(--cleat-background-color);
}
th,
td {
background: var(--cleat-background-color);
border-color: var(--cleat-border-color);
padding: 0.25rem 0.75rem;
vertical-align: baseline;
}
tbody > * + * {
border-block-start: 1px solid var(--cleat-border-color);
}
tr > * + * {
border-inline-start: 1px solid var(--cleat-border-color);
}
tbody th {
background: var(--cleat-background-color);
}
thead th,
tfoot th {
background: var(--cleat-background-color);
text-transform: uppercase;
text-align: center;
font-size: var(--font-size-2);
padding-block-end: var(--cleat-space);
}
thead th {
vertical-align: bottom;
}
th:first-of-type {
width: 10rem;
}
th:first-child::after {
content: '';
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
width: 1px;
height: 100%;
background: var(--cleat-border-color);
}
/* ---------------------------------
LAYOUT
--------------------------------- */
/* BASICS */
html {
background: var(--cleat-html-background-color);
}
body {
background: var(--cleat-body-background-color);
color: var(--cleat-color);
}
main {
background: var(--cleat-background-color);
}
aside {
background: var(--cleat-background-color);
}
/* CONTAINER */
.container {
max-width: var(--container-7);
margin-inline: auto;
}
details {
display: block;
width: 100%;
background: white;
border: var(--border-width-1) solid var(--slate-2);
border-radius: var(--border-radius-5);
position: relative;
padding: var(--cleat-padding);
}
details summary {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
line-height: 1;
list-style-type: none;
cursor: pointer;
transition: color var(--cleat-duration);
}
details summary::-webkit-details-marker {
display: none;
}
details summary::marker {
display: none;
}
details summary::-moz-list-bullet {
list-style-type: none;
}
details summary:after {
position: absolute;
right: var(--cleat-padding);
display: block;
width: 1rem;
height: 1rem;
transform: rotate(-90deg);
background-image: var(--icon-chevron);
background-position: right center;
background-size: 1rem auto;
background-repeat: no-repeat;
content: "";
transition: transform var(--cleat-duration);
}
details summary:focus {outline:0}
details[open] > summary {margin-bottom:var(--pico-spacing)}
details[open] > summary:after {transform:rotate(0)}
/* FOOTER */
footer {
color: var(--cleat-color);
background: var(--cleat-background-color);
padding: var(--cleat-space);
a {
color: var(--cleat-link-color);
text-decoration: none;
&:hover {
color: var(--cleat-hover-link-color);
}
}
nav {
display: flex;
gap: var(--cleat-space);
font-size: var(--cleat-font-size);
font-weight: var(--cleat-font-weight);
letter-spacing: var(--cleat-letter-spacing);
}
.sub-footer {
padding-block-start: var(--cleat-space);
font-size: var(--cleat-font-size);
font-weight: var(--cleat-font-weight);
}
}
/* HEADER */
header {
color: var(--cleat-color);
background: var(--cleat-background-color);
padding: var(--cleat-space);
border-bottom: var(--cleat-border-width) var(--cleat-border-style) var(--cleat-border-color);
box-shadow: var(--cleat-shadow);
position: relative;
z-index: 10;
nav {
display: flex;
align-items: center;
gap: var(--cleat-space);
.logo {
display: inline-flex;
flex: 1;
font-size: var(--cleat-font-size);
img {
width: var(--cleat-width);
height: var(--cleat-height);
}
}
ul {
display: flex;
align-items: center;
gap: var(--cleat-space);
list-style: none;
padding: 0;
}
a {
color: var(--cleat-link-color);
font-size: var(--cleat-font-size);
font-weight: var(--cleat-font-weight);
letter-spacing: var(--cleat-letter-spacing);
text-decoration: var(--cleat-text-decoration);
&:hover {
color: var(--cleat-hover-link-color);
text-decoration: var(--cleat-text-decoration);
}
}
}
}
/* SECTION */
section {
padding: var(--cleat-section-padding);
color: var(--cleat-color);
background: var(--cleat-background-color);
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
color: var(--cleat-heading-color);
}
span {
color: var(--cleat-muted-color);
}
}
/* STACK */
.hstack {
display: flex;
flex-direction: row;
gap: var(--cleat-gap, 10px);
justify-content: flex-start;
align-items: center;
}
.vstack {
display: flex;
flex-direction: column;
gap: var(--cleat-gap, 10px);
justify-content: initial;
align-items: stretch;
}
.row-reverse { flex-direction: row-reverse; }
.column-reverse { flex-direction: column-reverse; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-around { justify-content: space-around; }
.justify-between { justify-content: space-between; }
.justify-evenly { justify-content: space-evenly; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.align-center { align-items: center; }
.align-stretch { align-items: stretch; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-stretch { align-self: stretch; }
.flex-grow { flex-grow: 1; }
.flex-grow-0 { flex-grow: 0; }
.flex-shrink { flex-shrink: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.wrap { flex-wrap: wrap; }
.no-wrap { flex-wrap: nowrap; }
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-6 { order: 6; }
.order-7 { order: 7; }
.order-8 { order: 8; }
.order-9 { order: 9; }
.order-10 { order: 10; }
@media (max-width: 960px) {
.sm\:vstack { flex-direction: column; }
.sm\:hstack { flex-direction: row; }
.sm\:row-reverse { flex-direction: row-reverse; }
.sm\:column-reverse { flex-direction: column-reverse; }
.sm\:justify-start { justify-content: flex-start; }
.sm\:justify-end { justify-content: flex-end; }
.sm\:justify-center { justify-content: center; }
.sm\:justify-around { justify-content: space-around; }
.sm\:justify-between { justify-content: space-between; }
.sm\:justify-evenly { justify-content: space-evenly; }
.sm\:align-start { align-items: flex-start; }
.sm\:align-end { align-items: flex-end; }
.sm\:align-center { align-items: center; }
.sm\:align-stretch { align-items: stretch; }
.sm\:self-start { align-self: flex-start; }
.sm\:self-end { align-self: flex-end; }
.sm\:self-stretch { align-self: stretch; }
.sm\:flex-grow { flex-grow: 1; }
.sm\:flex-grow-0 { flex-grow: 0; }
.sm\:flex-shrink { flex-shrink: 1; }
.sm\:flex-shrink-0 { flex-shrink: 0; }
.sm\:wrap { flex-wrap: wrap; }
.sm\:no-wrap { flex-wrap: nowrap; }
.sm\:order-1 { order: 1; }
.sm\:order-2 { order: 2; }
.sm\:order-3 { order: 3; }
.sm\:order-4 { order: 4; }
.sm\:order-5 { order: 5; }
.sm\:order-6 { order: 6; }
.sm\:order-7 { order: 7; }
.sm\:order-8 { order: 8; }
.sm\:order-9 { order: 9; }
.sm\:order-10 { order: 10; }
}
/* ---------------------------------
COMPONENTS
--------------------------------- */
/* CARD */
.card {
background: white;
padding: var(--space-9);
box-shadow: var(--cleat-shadow);
border: var(--border-width-1) solid var(--black-1);
border-radius: var(--border-radius-5)
}
.card > * + * {
margin-block-start: var(--cleat-flow);
}
.card p {
color: var(--slate-7);
line-height: 1.5;
}
/* =========================================================
UTILITY CLASSES
========================================================= */
/* ---------------------------------
TYPOGRAPHY
--------------------------------- */
/* FONT FAMILY */
.font-family-sans-serif { font-family: var(--font-family-sans-serif); }
.font-family-serif { font-family: var(--font-family-serif); }
.font-family-monospace { font-family: var(--font-family-monospace); }
.font-family-inter { font-family: var(--font-family-inter); }
/* FONT SIZE */
.font-size-1 { font-size: var(--font-size-1); }
.font-size-2 { font-size: var(--font-size-2); }
.font-size-3 { font-size: var(--font-size-3); }
.font-size-4 { font-size: var(--font-size-4); }
.font-size-5 { font-size: var(--font-size-5); }
.font-size-6 { font-size: var(--font-size-6); }
.font-size-7 { font-size: var(--font-size-7); }
.font-size-8 { font-size: var(--font-size-8); }
.font-size-9 { font-size: var(--font-size-9); }
.font-size-10 { font-size: var(--font-size-10); }
/* ICON */
.icon-x::before {
display: inline-flex;
width: var(--size-5);
height: var(--size-5);
background-image: var(--icon-x);
background-size: var(--size-5) auto;
background-repeat: no-repeat;
content: "";
}
.icon-search::before {
display: inline-flex;
width: var(--size-3);
height: var(--size-3);
background-image: var(--icon-search);
background-size: var(--size-3) auto;
background-repeat: no-repeat;
content: "";
vertical-align: -.125em;
}
.icon-chevron::before {
display: inline-flex;
width: var(--size-3);
height: var(--size-3);
background-image: var(--icon-search);
background-size: var(--size-3) auto;
background-repeat: no-repeat;
content: "";
vertical-align: -.125em;
}
/* LETTER SPACING */
.letter-spacing-1 { letter-spacing: var(--letter-spacing-1); }
.letter-spacing-2 { letter-spacing: var(--letter-spacing-2); }
.letter-spacing-3 { letter-spacing: var(--letter-spacing-3); }
.letter-spacing-4 { letter-spacing: var(--letter-spacing-4); }
.letter-spacing-5 { letter-spacing: var(--letter-spacing-5); }
.letter-spacing-6 { letter-spacing: var(--letter-spacing-6); }
.letter-spacing-7 { letter-spacing: var(--letter-spacing-7); }
.letter-spacing-8 { letter-spacing: var(--letter-spacing-8); }
.letter-spacing-9 { letter-spacing: var(--letter-spacing-9); }
.letter-spacing-10 { letter-spacing: var(--letter-spacing-10); }
/* LINE HEIGHT */
.line-height-1 { line-height: var(--line-height-1); }
.line-height-2 { line-height: var(--line-height-2); }
.line-height-3 { line-height: var(--line-height-3); }
.line-height-4 { line-height: var(--line-height-4); }
.line-height-5 { line-height: var(--line-height-5); }
.line-height-6 { line-height: var(--line-height-6); }
.line-height-7 { line-height: var(--line-height-7); }
.line-height-8 { line-height: var(--line-height-8); }
.line-height-9 { line-height: var(--line-height-9); }
.line-height-10 { line-height: var(--line-height-10); }
/* ---------------------------------
LAYOUT
--------------------------------- */
/* ASPECT RATIO */
.aspect-ratio-1 { aspect-ratio: var(--aspect-ratio-1); }
.aspect-ratio-2 { aspect-ratio: var(--aspect-ratio-2); }
.aspect-ratio-3 { aspect-ratio: var(--aspect-ratio-3); }
.aspect-ratio-4 { aspect-ratio: var(--aspect-ratio-4); }
.aspect-ratio-5 { aspect-ratio: var(--aspect-ratio-5); }
.aspect-ratio-6 { aspect-ratio: var(--aspect-ratio-6); }
.aspect-ratio-7 { aspect-ratio: var(--aspect-ratio-7); }
.aspect-ratio-8 { aspect-ratio: var(--aspect-ratio-8); }
.aspect-ratio-9 { aspect-ratio: var(--aspect-ratio-9); }
.aspect-ratio-10 { aspect-ratio: var(--aspect-ratio-10); }
/* CONTAINER */
.container-1 { max-width: var(--container-1); margin-inline: auto; }
.container-2 { max-width: var(--container-2); margin-inline: auto; }
.container-3 { max-width: var(--container-3); margin-inline: auto; }
.container-4 { max-width: var(--container-4); margin-inline: auto; }
.container-5 { max-width: var(--container-5); margin-inline: auto; }
.container-6 { max-width: var(--container-6); margin-inline: auto; }
.container-7 { max-width: var(--container-7); margin-inline: auto; }
.container-8 { max-width: var(--container-8); margin-inline: auto; }
.container-9 { max-width: var(--container-9); margin-inline: auto; }
.container-10 { max-width: var(--container-10); margin-inline: auto; }
/* DEBUG */
.debug * {
outline: 1px solid rgba(0, 0, 255, 0.25);
position: relative;
}
.debug *::before {
color: rgba(0, 0, 255, 0.5);
content: attr(class);
left: 0;
top: 0;
font-size: 12px;
font-weight: 400;
letter-spacing: normal;
line-height: 12px;
margin-top: -12px;
position: absolute;
white-space: nowrap;
}
/* GRID */
.grid-1 { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--cleat-gap); }
.grid-2 { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--cleat-gap); }
.grid-3 { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--cleat-gap); }
.grid-4 { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--cleat-gap); }
.grid-5 { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--cleat-gap); }
.grid-6 { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--cleat-gap); }
.grid-7 { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--cleat-gap); }
.grid-8 { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--cleat-gap); }
.grid-9 { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--cleat-gap); }
.grid-10 { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--cleat-gap); }
.sm\:grid-1 { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--cleat-gap); }
.sm\:grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--cleat-gap); }
.sm\:grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cleat-gap); }
.sm\:grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cleat-gap); }
.sm\:grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--cleat-gap); }
.sm\:grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--cleat-gap); }
.sm\:grid-7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--cleat-gap); }
.sm\:grid-8 { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--cleat-gap); }
.sm\:grid-9 { display: grid; grid-template-columns: repeat(9, 1fr); gap: var(--cleat-gap); }
.sm\:grid-10 { display: grid; grid-template-columns: repeat(10, 1fr); gap: var(--cleat-gap); }
@media (min-width: 960px) {
.grid-1 { display: grid; grid-template-columns: repeat(1, 1fr); gap: var(--cleat-gap); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--cleat-gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cleat-gap); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cleat-gap); }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--cleat-gap); }
.grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--cleat-gap); }
.grid-7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--cleat-gap); }
.grid-8 { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--cleat-gap); }
.grid-9 { display: grid; grid-template-columns: repeat(9, 1fr); gap: var(--cleat-gap); }
.grid-10 { display: grid; grid-template-columns: repeat(10, 1fr); gap: var(--cleat-gap); }
}
.gap { gap: var(--cleat-gap); }
.gap-0 { gap: 0; }
.gap-1 { gap: var(--size-1); }
.gap-2 { gap: var(--size-2); }
.gap-3 { gap: var(--size-3); }
.gap-4 { gap: var(--size-4); }
.gap-5 { gap: var(--size-5); }
.gap-6 { gap: var(--size-6); }
.gap-7 { gap: var(--size-7); }
.gap-8 { gap: var(--size-8); }
.gap-9 { gap: var(--size-9); }
.gap-10 { gap: var(--size-10); }
.column-gap { column-gap: var(--cleat-gap); }
.column-gap-0 { column-gap: 0; }
.column-gap-1 { column-gap: var(--size-1); }
.column-gap-2 { column-gap: var(--size-2); }
.column-gap-3 { column-gap: var(--size-3); }
.column-gap-4 { column-gap: var(--size-4); }
.column-gap-5 { column-gap: var(--size-5); }
.column-gap-6 { column-gap: var(--size-6); }
.column-gap-7 { column-gap: var(--size-7); }
.column-gap-8 { column-gap: var(--size-8); }
.column-gap-9 { column-gap: var(--size-9); }
.column-gap-10 { column-gap: var(--size-10); }
.row-gap { row-gap: var(--cleat-gap); }
.row-gap-0 { row-gap: 0; }
.row-gap-1 { row-gap: var(--size-1); }
.row-gap-2 { row-gap: var(--size-2); }
.row-gap-3 { row-gap: var(--size-3); }
.row-gap-4 { row-gap: var(--size-4); }
.row-gap-5 { row-gap: var(--size-5); }
.row-gap-6 { row-gap: var(--size-6); }
.row-gap-7 { row-gap: var(--size-7); }
.row-gap-8 { row-gap: var(--size-8); }
.row-gap-9 { row-gap: var(--size-9); }
.row-gap-10 { row-gap: var(--size-10); }
/* POSITION */
.absolute { position: absolute; }
.relative { position: relative; }
.static { position: static; }
.sticky { position: sticky; top: 6ex; }
.inset-0 { inset: 0; }
.inset-1 { inset: var(--size-1); }
.inset-2 { inset: var(--size-2); }
.inset-3 { inset: var(--size-3); }
.inset-4 { inset: var(--size-4); }
.inset-5 { inset: var(--size-5); }
.inset-6 { inset: var(--size-6); }
.inset-7 { inset: var(--size-7); }
.inset-8 { inset: var(--size-8); }
.inset-9 { inset: var(--size-9); }
.inset-10 { inset: var(--size-10); }
/* Size */
.size-1 { width: var(--size-1); height: var(--size-1); }
.size-2 { width: var(--size-2); height: var(--size-2); }
.size-3 { width: var(--size-3); height: var(--size-3); }
.size-4 { width: var(--size-4); height: var(--size-4); }
.size-5 { width: var(--size-5); height: var(--size-5); }
.size-6 { width: var(--size-6); height: var(--size-6); }
.size-7 { width: var(--size-7); height: var(--size-7); }
.size-8 { width: var(--size-8); height: var(--size-8); }
.size-9 { width: var(--size-9); height: var(--size-9); }
.size-10 { width: var(--size-10); height: var(--size-10); }
.w-1\/1 { width: 100%; }
.w-1\/2 { width: 50%; }
.w-1\/3 { width: 33.333333%; }
.w-1\/4 { width: 25%; }
.w-1\/5 { width: 20%; }
.w-1\/6 { width: 16.6666666%; }
.w-2\/3 { width: 66.6666666%; }
.w-3\/4 { width: 75%; }
.w-4\/5 { width: 80%; }
.w-5\/6 { width: 83.333333%; }
.h-1\/1 { height: 100%; }
.h-1\/2 { height: 50%; }
.h-1\/3 { height: 33.333333%; }
.h-1\/4 { height: 25%; }
.h-1\/5 { height: 20%; }
.h-1\/6 { height: 16.6666666%; }
.h-2\/3 { height: 66.6666666%; }
.h-3\/4 { height: 75%; }
.h-4\/5 { height: 80%; }
.h-5\/6 { height: 83.333333%; }
.w-100 { width: 100dvw; }
.w-75 { width: 75dvw; }
.w-50 { width: 50dvw; }
.w-25 { width: 25dvw; }
.w-0 { width: 0; }
.w-auto { width: auto; }
.h-100 { height: 100dvh; }
.h-75 { height: 75dvh; }
.h-50 { height: 50dvh; }
.h-25 { height: 25dvh; }
.h-0 { height: 0; }
.h-auto { height: auto; }
@media (max-width: 960px) {
.sm\:w-100 { width: 100dvw; }
.sm\:w-75 { width: 75dvw; }
.sm\:w-50 { width: 50dvw; }
.sm\:w-25 { width: 25dvw; }
.sm\:w-0 { width: 0; }
.sm\:w-auto { width: auto; }
.sm\:h-100 { height: 100dvh; }
.sm\:h-75 { height: 75dvh; }
.sm\:h-50 { height: 50dvh; }
.sm\:h-25 { height: 25dvh; }
.sm\:h-0 { height: 0; }
.sm\:h-auto { height: auto; }
}
/* SPACE */
.flow > * + * { margin-block-start: var(--cleat-flow); }
.flow-1 > * + * { margin-block-start: var(--space-1); }
.flow-2 > * + * { margin-block-start: var(--space-2); }
.flow-3 > * + * { margin-block-start: var(--space-3); }
.flow-4 > * + * { margin-block-start: var(--space-4); }
.flow-5 > * + * { margin-block-start: var(--space-5); }
.flow-6 > * + * { margin-block-start: var(--space-6); }
.flow-7 > * + * { margin-block-start: var(--space-7); }
.flow-8 > * + * { margin-block-start: var(--space-8); }
.flow-9 > * + * { margin-block-start: var(--space-9); }
.flow-10 > * + * { margin-block-start: var(--space-10); }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-7 { padding: var(--space-7); }
.p-8 { padding: var(--space-8); }
.p-9 { padding: var(--space-9); }
.p-10 { padding: var(--space-10); }
.py-1 { padding-block: var(--space-1); }
.py-2 { padding-block: var(--space-2); }
.py-3 { padding-block: var(--space-3); }
.py-4 { padding-block: var(--space-4); }
.py-5 { padding-block: var(--space-5); }
.py-6 { padding-block: var(--space-6); }
.py-7 { padding-block: var(--space-7); }
.py-8 { padding-block: var(--space-8); }
.py-9 { padding-block: var(--space-9); }
.py-10 { padding-block: var(--space-10); }
.px-1 { padding-inline: var(--space-1); }
.px-2 { padding-inline: var(--space-2); }
.px-3 { padding-inline: var(--space-3); }
.px-4 { padding-inline: var(--space-4); }
.px-5 { padding-inline: var(--space-5); }
.px-6 { padding-inline: var(--space-6); }
.px-7 { padding-inline: var(--space-7); }
.px-8 { padding-inline: var(--space-8); }
.px-9 { padding-inline: var(--space-9); }
.px-10 { padding-inline: var(--space-10); }
.pt-1 { padding-block-start: var(--space-1); }
.pt-2 { padding-block-start: var(--space-2); }
.pt-3 { padding-block-start: var(--space-3); }
.pt-4 { padding-block-start: var(--space-4); }
.pt-5 { padding-block-start: var(--space-5); }
.pt-6 { padding-block-start: var(--space-6); }
.pt-7 { padding-block-start: var(--space-7); }
.pt-8 { padding-block-start: var(--space-8); }
.pt-9 { padding-block-start: var(--space-9); }
.pt-10 { padding-block-start: var(--space-10); }
.pb-1 { padding-block-end: var(--space-1); }
.pb-2 { padding-block-end: var(--space-2); }
.pb-3 { padding-block-end: var(--space-3); }
.pb-4 { padding-block-end: var(--space-4); }
.pb-5 { padding-block-end: var(--space-5); }
.pb-6 { padding-block-end: var(--space-6); }
.pb-7 { padding-block-end: var(--space-7); }
.pb-8 { padding-block-end: var(--space-8); }
.pb-9 { padding-block-end: var(--space-9); }
.pb-10 { padding-block-end: var(--space-10); }
.ps-1 { padding-inline-start: var(--space-1); }
.ps-2 { padding-inline-start: var(--space-2); }
.ps-3 { padding-inline-start: var(--space-3); }
.ps-4 { padding-inline-start: var(--space-4); }
.ps-5 { padding-inline-start: var(--space-5); }
.ps-6 { padding-inline-start: var(--space-6); }
.ps-7 { padding-inline-start: var(--space-7); }
.ps-8 { padding-inline-start: var(--space-8); }
.ps-9 { padding-inline-start: var(--space-9); }
.ps-10 { padding-inline-start: var(--space-10); }
.pe-1 { padding-inline-end: var(--space-1); }
.pe-2 { padding-inline-end: var(--space-2); }
.pe-3 { padding-inline-end: var(--space-3); }
.pe-4 { padding-inline-end: var(--space-4); }
.pe-5 { padding-inline-end: var(--space-5); }
.pe-6 { padding-inline-end: var(--space-6); }
.pe-7 { padding-inline-end: var(--space-7); }
.pe-8 { padding-inline-end: var(--space-8); }
.pe-9 { padding-inline-end: var(--space-9); }
.pe-10 { padding-block-end: var(--space-10); }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }
.m-6 { margin: var(--space-6); }
.m-7 { margin: var(--space-7); }
.m-8 { margin: var(--space-8); }
.m-9 { margin: var(--space-9); }
.m-10 { margin: var(--space-10); }
.my-1 { margin-block: var(--space-1); }
.my-2 { margin-block: var(--space-2); }
.my-3 { margin-block: var(--space-3); }
.my-4 { margin-block: var(--space-4); }
.my-5 { margin-block: var(--space-5); }
.my-6 { margin-block: var(--space-6); }
.my-7 { margin-block: var(--space-7); }
.my-8 { margin-block: var(--space-8); }
.my-9 { margin-block: var(--space-9); }
.my-10 { margin-block: var(--space-10); }
.mx-1 { margin-inline: var(--space-1); }
.mx-2 { margin-inline: var(--space-2); }
.mx-3 { margin-inline: var(--space-3); }
.mx-4 { margin-inline: var(--space-4); }
.mx-5 { margin-inline: var(--space-5); }
.mx-6 { margin-inline: var(--space-6); }
.mx-7 { margin-inline: var(--space-7); }
.mx-8 { margin-inline: var(--space-8); }
.mx-9 { margin-inline: var(--space-9); }
.mx-10 { margin-inline: var(--space-10); }
.mt-1 { margin-block-start: var(--space-1); }
.mt-2 { margin-block-start: var(--space-2); }
.mt-3 { margin-block-start: var(--space-3); }
.mt-4 { margin-block-start: var(--space-4); }
.mt-5 { margin-block-start: var(--space-5); }
.mt-6 { margin-block-start: var(--space-6); }
.mt-7 { margin-block-start: var(--space-7); }
.mt-8 { margin-block-start: var(--space-8); }
.mt-9 { margin-block-start: var(--space-9); }
.mt-10 { margin-block-start: var(--space-10); }
.mb-1 { margin-block-end: var(--space-1); }
.mb-2 { margin-block-end: var(--space-2); }
.mb-3 { margin-block-end: var(--space-3); }
.mb-4 { margin-block-end: var(--space-4); }
.mb-5 { margin-block-end: var(--space-5); }
.mb-6 { margin-block-end: var(--space-6); }
.mb-7 { margin-block-end: var(--space-7); }
.mb-8 { margin-block-end: var(--space-8); }
.mb-9 { margin-block-end: var(--space-9); }
.mb-10 { margin-block-end: var(--space-10); }
.ms-1 { margin-inline-start: var(--space-1); }
.ms-2 { margin-inline-start: var(--space-2); }
.ms-3 { margin-inline-start: var(--space-3); }
.ms-4 { margin-inline-start: var(--space-4); }
.ms-5 { margin-inline-start: var(--space-5); }
.ms-6 { margin-inline-start: var(--space-6); }
.ms-7 { margin-inline-start: var(--space-7); }
.ms-8 { margin-inline-start: var(--space-8); }
.ms-9 { margin-inline-start: var(--space-9); }
.ms-10 { margin-inline-start: var(--space-10); }
.me-1 { margin-inline-end: var(--space-1); }
.me-2 { margin-inline-end: var(--space-2); }
.me-3 { margin-inline-end: var(--space-3); }
.me-4 { margin-inline-end: var(--space-4); }
.me-5 { margin-inline-end: var(--space-5); }
.me-6 { margin-inline-end: var(--space-6); }
.me-7 { margin-inline-end: var(--space-7); }
.me-8 { margin-inline-end: var(--space-8); }
.me-9 { margin-inline-end: var(--space-9); }
.me-10 { margin-block-end: var(--space-10); }
/* Z-INDEX */
.z-index-1 { z-index: var(--z-index-1); }
.z-index-2 { z-index: var(--z-index-2); }
.z-index-3 { z-index: var(--z-index-3); }
.z-index-4 { z-index: var(--z-index-4); }
.z-index-5 { z-index: var(--z-index-5); }
.z-index-6 { z-index: var(--z-index-6); }
.z-index-7 { z-index: var(--z-index-7); }
.z-index-8 { z-index: var(--z-index-8); }
.z-index-9 { z-index: var(--z-index-9); }
.z-index-10 { z-index: var(--z-index-10); }
/* ---------------------------------
EFFECTS
--------------------------------- */
/* BORDER RADIUS */
.border-radius-1 { border-radius: var(--border-radius-1); }
.border-radius-2 { border-radius: var(--border-radius-2); }
.border-radius-3 { border-radius: var(--border-radius-3); }
.border-radius-4 { border-radius: var(--border-radius-4); }
.border-radius-5 { border-radius: var(--border-radius-5); }
.border-radius-6 { border-radius: var(--border-radius-6); }
.border-radius-7 { border-radius: var(--border-radius-7); }
.border-radius-8 { border-radius: var(--border-radius-8); }
.border-radius-9 { border-radius: var(--border-radius-9); }
.border-radius-10 { border-radius: var(--border-radius-10); }
/* BORDER WIDTH */
.border-width-1 { border-width: var(--border-width-1); }
.border-width-2 { border-width: var(--border-width-2); }
.border-width-3 { border-width: var(--border-width-3); }
.border-width-4 { border-width: var(--border-width-4); }
.border-width-5 { border-width: var(--border-width-5); }
.border-width-6 { border-width: var(--border-width-6); }
.border-width-7 { border-width: var(--border-width-7); }
.border-width-8 { border-width: var(--border-width-8); }
.border-width-9 { border-width: var(--border-width-9); }
.border-width-10 { border-width: var(--border-width-10); }
/* SHADOW */
.shadow { box-shadow: var(--cleat-shadow); }
.shadow-1 { box-shadow: var(--shadow-1); }
.shadow-2 { box-shadow: var(--shadow-2); }
.shadow-3 { box-shadow: var(--shadow-3); }
.shadow-4 { box-shadow: var(--shadow-4); }
.shadow-5 { box-shadow: var(--shadow-5); }
.shadow-6 { box-shadow: var(--shadow-6); }
.shadow-7 { box-shadow: var(--shadow-7); }
.shadow-8 { box-shadow: var(--shadow-8); }
.shadow-9 { box-shadow: var(--shadow-9); }
.shadow-10 { box-shadow: var(--shadow-10); }
/* ANIMATION */
.fade-in { opacity: 0; animation: fadeIn 300ms ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-up { opacity: 0; animation: fadeUp 400ms ease-out forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(90px); } to { opacity: 1; transform: translateY(0); } }
.fade-down { opacity: 0; animation: fadeDown 400ms ease-out forwards; }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-90px); } to { opacity: 1; transform: translateY(0); } }
.fade-left { opacity: 0; animation: fadeLeft 400ms ease-out forwards; }
@keyframes fadeLeft { from { opacity: 0; transform: translateX(90px); } to { opacity: 1; transform: translateX(0); } }
.fade-right { opacity: 0; animation: fadeRight 400ms ease-out forwards; }
@keyframes fadeRight { from { opacity: 0; transform: translateX(-90px); } to { opacity: 1; transform: translateX(0); } }
.slide-in { animation: slideIn 400ms ease-out backwards; }
@keyframes slideIn { from { transform: translateX(-100dvw); } to { transform: translateX(0); } }
.slide-up { animation: slideUp 400ms ease-out backwards; }
@keyframes slideUp { from { transform: translateY(100dvw); } to { transform: translateX(0); } }
.slide-down { animation: slideDown 400ms ease-out backwards; }
@keyframes slideDown { from { transform: translateY(-100dvw); } to { transform: translateX(0); } }
.slide-left { animation: slideLeft 400ms ease-out backwards; }
@keyframes slideLeft { from { transform: translateX(100dvw); } to { transform: translateX(0); } }
.slide-right { animation: slideRight 400ms ease-out backwards; }
@keyframes slideRight { from { transform: translateX(-100dvw); } to { transform: translateX(0); } }
.fade-in-children { --duration: 300ms; }
.fade-in-children > * { opacity: 0; animation: fadeUp var(--duration) ease-out forwards; }
.fade-in-children :nth-child(1) { animation-delay: var(--delay-1); }
.fade-in-children :nth-child(2) { animation-delay: var(--delay-2); }
.fade-in-children :nth-child(3) { animation-delay: var(--delay-3); }
.fade-in-children :nth-child(4) { animation-delay: var(--delay-4); }
.fade-in-children :nth-child(5) { animation-delay: var(--delay-5); }
.fade-in-children :nth-child(6) { animation-delay: var(--delay-6); }
.fade-in-children :nth-child(7) { animation-delay: var(--delay-7); }
.fade-in-children :nth-child(8) { animation-delay: var(--delay-8); }
.fade-in-children :nth-child(9) { animation-delay: var(--delay-9); }
.fade-in-children :nth-child(10) { animation-delay: var(--delay-10); }
/* DURATION */
.duration-1 { animation-duration: var(--duration-1); --duration: var(--duration-1); }
.duration-2 { animation-duration: var(--duration-2); --duration: var(--duration-2); }
.duration-3 { animation-duration: var(--duration-3); --duration: var(--duration-3); }
.duration-4 { animation-duration: var(--duration-4); --duration: var(--duration-4); }
.duration-5 { animation-duration: var(--duration-5); --duration: var(--duration-5); }
.duration-6 { animation-duration: var(--duration-6); --duration: var(--duration-6); }
.duration-7 { animation-duration: var(--duration-7); --duration: var(--duration-7); }
.duration-8 { animation-duration: var(--duration-8); --duration: var(--duration-8); }
.duration-9 { animation-duration: var(--duration-9); --duration: var(--duration-9); }
.duration-10 { animation-duration: var(--duration-10); --duration: var(--duration-10); }
/* DELAY */
.delay-1 { animation-delay: var(--delay-1); }
.delay-2 { animation-delay: var(--delay-2); }
.delay-3 { animation-delay: var(--delay-3); }
.delay-4 { animation-delay: var(--delay-4); }
.delay-5 { animation-delay: var(--delay-5); }
.delay-6 { animation-delay: var(--delay-6); }
.delay-7 { animation-delay: var(--delay-7); }
.delay-8 { animation-delay: var(--delay-8); }
.delay-9 { animation-delay: var(--delay-9); }
.delay-10 { animation-delay: var(--delay-10); }