101 lines
2.2 KiB
Plaintext
101 lines
2.2 KiB
Plaintext
<style is:global>
|
|
:root {
|
|
--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-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) 95%, */
|
|
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%
|
|
);
|
|
|
|
--fs-page-title: clamp(2.5rem, 5vw + 1rem, 5.625rem);
|
|
|
|
--fs-md: clamp(1.125rem, 2vw, 1.25rem);
|
|
--fs-lg: clamp(1.25rem, 2vw, 1.5rem);
|
|
--fs-xl: clamp(2.5rem, 2.5vw + 2.5rem, 4.75rem);
|
|
|
|
--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: 112.5rem;
|
|
--padding-x: 1.5rem;
|
|
|
|
@media screen and (min-width: 50rem) {
|
|
--padding-x: 3rem;
|
|
}
|
|
|
|
@media screen and (min-width: 64rem) {
|
|
--padding-x: 5rem;
|
|
}
|
|
}
|
|
|
|
body {
|
|
background-color: var(--clr-dark-400);
|
|
color: white;
|
|
font-family: var(--font-poppins);
|
|
}
|
|
|
|
* {
|
|
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;
|
|
|
|
* {
|
|
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);
|
|
}
|
|
|
|
.char,
|
|
.line {
|
|
will-change: transform, opacity;
|
|
}
|
|
</style>
|