: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.6913rem, 0.6902rem + 0.0054vw, 0.6944rem);
--font-size-2: clamp(0.7775rem, 0.7582rem + 0.0967vw, 0.8331rem);
--font-size-3: clamp(0.875rem, 0.8315rem + 0.2174vw, 1rem);
--font-size-4: clamp(0.9844rem, 0.9094rem + 0.375vw, 1.2rem);
--font-size-5: clamp(1.1075rem, 0.9918rem + 0.5783vw, 1.44rem);
--font-size-6: clamp(1.2456rem, 1.0778rem + 0.8391vw, 1.7281rem);
--font-size-7: clamp(1.4019rem, 1.1682rem + 1.1685vw, 2.0738rem);
--font-size-8: clamp(1.5769rem, 1.2599rem + 1.5848vw, 2.4881rem);
--font-size-9: clamp(1.7738rem, 1.352rem + 2.1087vw, 2.9863rem);
--font-size-10: clamp(1.9956rem, 1.4435rem + 3.7609vw, 6.5831rem);
/* 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;
/* 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;
/* ---------------------------------
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;
/* BREAKPOINT */
--breakpoint-1: 320px;
--breakpoint-2: 480px;
--breakpoint-3: 640px;
--breakpoint-4: 800px;
--breakpoint-5: 960px;
--breakpoint-6: 1120px;
--breakpoint-7: 1280px;
--breakpoint-8: 1440px;
--breakpoint-9: 1600px;
--breakpoint-10: 1760px;
/* 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: clamp(0.125rem, 0.125rem + 0vw, 0.125rem);
--space-2: clamp(0.3125rem, 0.2908rem + 0.1087vw, 0.375rem);
--space-3: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
--space-4: clamp(0.8125rem, 0.7908rem + 0.1087vw, 0.875rem);
--space-5: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
--space-6: clamp(1.375rem, 1.3315rem + 0.2174vw, 1.5rem);
--space-7: clamp(1.8125rem, 1.7473rem + 0.3261vw, 2rem);
--space-8: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
--space-9: clamp(2.9375rem, 2.8288rem + 0.5435vw, 3.25rem);
--space-10: clamp(4.25rem, 4.0761rem + 0.8696vw, 4.75rem);
/* 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);
/* TRANSITION */
--transition-1: 50ms;
--transition-2: 75ms;
--transition-3: 100ms;
--transition-4: 150ms;
--transition-5: 200ms;
--transition-6: 250ms;
--transition-7: 300ms;
--transition-8: 400ms;
--transition-9: 500ms;
--transition-10: 600ms;
}
:where(html) {
--cleat-color: var(--slate-5);
--cleat-background-color: var(--white);
--cleat-heading-color: var(--slate-10);
--cleat-strong-color: var(--slate-7);
--cleat-muted-color: var(--slate-3);
--cleat-link-color: seagreen;
--cleat-link-hover-color: mediumseagreen;
--cleat-text-decoration: none;
--cleat-text-decoration-hover: underline;
--cleat-font-family: "draft_paperregular", var(--font-family-sans-serif);
--cleat-font-size: var(--font-size-4);
--cleat-font-weight: 400;
--cleat-letter-spacing: var(--letter-spacing-5);
--cleat-line-height: var(--line-height-6);
--cleat-character-length: 70ch;
--cleat-container: var(--container-7);
--cleat-space: var(--space-5);
--cleat-space-y: var(--cleat-space);
--cleat-space-x: var(--cleat-space);
--cleat-margin-block-start: var(--cleat-space);
--cleat-margin-block-end: var(--cleat-space);
--cleat-border-width: 1px;
--cleat-border-style: solid;
--cleat-border-color: var(--black-5);
--cleat-border-radius: var(--border-radius-5);
--cleat-border: 1px solid var(--black-5);
--cleat-shadow: var(--shadow-1);
--cleat-transition: var(--transition-5) ease-in-out;
--cleat-width: var(--size-5);
--cleat-height: var(--size-5);
}
html {
--cleat-background-color: rgb(93, 163, 124);
}
body {
--cleat-background-color: rgb(93, 163, 124);
}
main {
--cleat-background-color: white;
}
section, .section {
--cleat-space-y: var(--space-10);
--cleat-space-x: var(--space-5);
}
.bg-primary {
--cleat-color: var(--white-8);
--cleat-background-color: var(--blue);
--cleat-heading-color: var(--blue-10);
--cleat-strong-color: var(--blue-9);
--cleat-muted-color: var(--white-5);
--cleat-link-color: var(--blue-9);
}
.bg-secondary {
--cleat-color: var(--white-8);
--cleat-background-color: var(--pink);
--cleat-heading-color: var(--pink-9);
--cleat-strong-color: var(--white-10);
--cleat-muted-color: var(--white-5);
--cleat-link-color: var(--pink-8);
}
.bg-tertiary {
--cleat-color: var(--white-8);
--cleat-background-color: seagreen;
--cleat-heading-color: var(--green-10);
--cleat-strong-color: var(--white-10);
--cleat-muted-color: var(--white-5);
--cleat-link-color: var(--green-10);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
--cleat-font-family: "draft_paperregular", var(--font-family-sans-serif);
--cleat-font-weight: 400;
--cleat-letter-spacing: var(--letter-spacing-7);
--cleat-line-height: var(--line-height-1);
--cleat-margin-block-start: var(--space-8);
--cleat-margin-block-end: var(--space-4);
}
.display {
--cleat-font-size: var(--font-size-10);
}
h1, .h1 {
--cleat-font-size: var(--font-size-9);
}
h2, .h2 {
--cleat-font-size: var(--font-size-8);
}
h3, .h3 {
--cleat-font-size: var(--font-size-7);
}
h4, .h4 {
--cleat-font-size: var(--font-size-6);
}
h5, .h5 {
--cleat-font-size: var(--font-size-5);
}
h6, .h6 {
--cleat-font-size: var(--font-size-4);
}
button, .button {
--cleat-color: var(--white-8);
--cleat-background-color: var(--red);
--cleat-border-color: var(--red);
--cleat-hover-color: var(--red-6);
--cleat-hover-background-color: transparent;
--cleat-hover-border-color: var(--red-6);
--cleat-font-weight: 600;
--cleat-letter-spacing: var(--letter-spacing-4);
}
button.secondary, .button.secondary {
--cleat-color: var(--white-8);
--cleat-background-color: var(--teal);
--cleat-border-color: var(--teal);
--cleat-hover-color: var(--teal-6);
--cleat-hover-background-color: transparent;
--cleat-hover-border-color: var(--teal-6);
}
header {
--cleat-color: seagreen;
--cleat-background-color: white;
--cleat-link-color: seagreen;
--cleat-hover-link-color: mediumseagreen;
--cleat-border-width: var(--border-width-1);
--cleat-border-color: var(--slate-2);
--cleat-shadow: var(--shadow-5);
}
.logo {
--cleat-font-family: "draft_paperregular";
--cleat-font-size: var(--font-size-6);
--cleat-width: 180px;
--cleat-height: auto;
}
header nav {
--cleat-font-family: "draft_paperregular";
--cleat-font-weight: 400;
--cleat-letter-spacing: var(--letter-spacing-3);
--cleat-text-decoration: none;
--cleat-space: var(--space-7);
}
footer {
--cleat-color: var(--black-5);
--cleat-link-color: var(--black-5);
--cleat-hover-link-color: var(--black-10);
--cleat-font-size: var(--font-size-3);
--cleat-font-weight: 600;
--cleat-letter-spacing: var(--letter-spacing-3);
--cleat-space: var(--space-9);
}
.sub-footer {
--cleat-font-size: var(--font-size-2);
--cleat-font-weight: 400;
}
/* 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;
}
html {
background: var(--cleat-background-color);
}
body {
background: var(--cleat-background-color);
color: var(--cleat-color);
}
main {
background: var(--cleat-background-color);
}
aside {
background: var(--cleat-background-color);
}
body, .logo,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display, hgroup,
p, .p, a, strong, b, i, u, s, del, mark, small, sub, sup, span,
ol, ul, li, dl, dt, dd, menu,
details, summary, abbr, address, time,
figure, blockquote, figcaption, cite, q,
code, kbd, pre,
form, label, input, textarea, select, optgroup, option, fieldset, legend, button, .button,
table, caption, tr, th, td {
font-family: var(--cleat-font-family);
font-size: var(--cleat-font-size);
font-weight: var(--cleat-font-weight);
letter-spacing: var(--cleat-letter-spacing);
line-height: var(--cleat-line-height);
}
body {
color: var(--cleat-color);
background: var(--cleat-background-color);
max-width: none;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6, .display {
color: var(--cleat-color);
margin-block-end: var(--cleat-margin-block-end);
max-width: var(--cleat-character-length);
}
p, .p {
color: var(--cleat-color);
margin-block-end: var(--cleat-margin-block-end);
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);
}
}
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 {
padding-block: var(--cleat-space-y);
padding-inline: var(--cleat-space-x);
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);
}
}
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);
}
}
.button {
color: var(--cleat-color);
background: var(--cleat-background-color);
padding-block: calc(var(--cleat-space) * .6) calc(var(--cleat-space) * .75);
padding-inline: calc(var(--cleat-space) * 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-block;
transition: color var(--cleat-transition), background var(--cleat-transition), border var(--cleat-transition);
&:hover {
color: var(--cleat-hover-color);
background: var(--cleat-hover-background-color);
text-decoration: none;
}
}
.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);
}
.container {
max-width: var(--cleat-container);
margin-inline: auto;
}
.justify-center {
justify-content: center;
}
.text-center {
text-align: center;
}