99 lines
2.5 KiB
Plaintext
99 lines
2.5 KiB
Plaintext
<style is:global>
|
|
@import url("../styles/poppins.css");
|
|
|
|
:root {
|
|
--font-sans:
|
|
"Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
|
|
sans-serif;
|
|
|
|
/* --fs-md: clamp(1.25rem, 0.25vw + 1rem, 2.5rem); */
|
|
--fs-md: 1.25rem;
|
|
|
|
/* --fs-page-title: 5.625rem; */
|
|
--fs-page-title: clamp(3rem, 5.5vw + 1rem, 8rem);
|
|
|
|
--leading-title: 1.1;
|
|
--leading-subtitle: 1.2;
|
|
--leading-tightest: 0.8;
|
|
--leading-paragraph: 1.5;
|
|
--tracking-tight: -0.0625rem;
|
|
--tracking-narrow: -0.09375rem;
|
|
|
|
--base-grid: repeat(12, 1fr);
|
|
--max-content-width: 1920px;
|
|
|
|
--clr-light-400: oklch(100% 0.00011 271.152);
|
|
--clr-light-500: oklch(from var(--clr-light-400) calc(l - 0.1) c h);
|
|
--clr-light-600: oklch(from var(--clr-light-400) calc(l - 0.3) c h);
|
|
--clr-dark-400: oklch(13.306% 0.006 17.794);
|
|
--clr-ts-red-400: oklch(65.135% 0.21964 28.111);
|
|
|
|
--gradient-page-title: linear-gradient(
|
|
to bottom,
|
|
oklch(from var(--clr-light-400) l c h),
|
|
oklch(from var(--clr-light-400) calc(l - 0.05) c h),
|
|
oklch(from var(--clr-light-400) calc(l - 0.15) c h),
|
|
oklch(from var(--clr-light-400) calc(l - 0.15) c h),
|
|
oklch(from var(--clr-light-400) calc(l - 0.15) c h),
|
|
oklch(from var(--clr-light-400) calc(l - 0.35) c h),
|
|
oklch(from var(--clr-light-400) calc(l - 0.75) c h)
|
|
);
|
|
|
|
--gradient-heading: linear-gradient(
|
|
to bottom,
|
|
oklch(from var(--clr-light-400) calc(l - 0.05) c h),
|
|
oklch(from var(--clr-light-400) calc(l - 0.1) c h) 30%,
|
|
oklch(from var(--clr-light-400) calc(l - 0.1) c h) 70%,
|
|
/* oklch(from var(--clr-light-400) calc(l - 0.5) c h) 80%, */
|
|
oklch(from var(--clr-light-400) calc(l - 0.7) c h) 100%
|
|
);
|
|
|
|
--gradient-overlay: linear-gradient(
|
|
to bottom,
|
|
oklch(0% 0 0 / 0.3) 0%,
|
|
oklch(0% 0 0 / 0) 40%,
|
|
oklch(0% 0 0 / 0.3) 100%
|
|
);
|
|
}
|
|
|
|
body {
|
|
background-color: var(--clr-dark-400);
|
|
color: white;
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.heading-gradient {
|
|
background: var(--gradient-heading);
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
p {
|
|
color: var(--clr-light-500);
|
|
}
|
|
|
|
a {
|
|
color: var(--clr-light-400);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:focus {
|
|
border-radius: 0.25rem;
|
|
border: 2px solid var(--clr-ts-red-400);
|
|
}
|
|
</style>
|