83 lines
1.9 KiB
CSS
83 lines
1.9 KiB
CSS
/*
|
||
* Design Sizes:
|
||
* Mobile: 375x2615
|
||
* Tablet: 768 × 1760
|
||
* Desktop: 1440 × 1845
|
||
*/
|
||
|
||
*,
|
||
::before,
|
||
::after {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:root {
|
||
/* Colors */
|
||
--col-medium-purple: hsla(234, 25%, 52%, 1);
|
||
--col-dark-purple: hsla(234, 53%, 16%, 1);
|
||
--col-light-purple: hsla(233, 10%, 56%, 1);
|
||
|
||
--col-hot-pink: hsla(341, 92%, 62%, 1);
|
||
--col-light-pink: hsla(341, 100%, 83%, 1);
|
||
|
||
--col-white: hsla(0, 0%, 100%, 1);
|
||
|
||
--col-orange-to-pink: linear-gradient(180deg, #ff6f48 0.04%, #f02aa6 100%);
|
||
--col-purple-to-pink: linear-gradient(180deg, #4851ff 0%, #f02aa6 99.92%);
|
||
|
||
--col-orange-to-pink-hover: linear-gradient(
|
||
0deg,
|
||
rgba(255, 255, 255, 0.5),
|
||
rgba(255, 255, 255, 0.5)
|
||
),
|
||
linear-gradient(180deg, #ff6f48 0%, #f02aa6 100%);
|
||
--col-purple-to-pink-hover: linear-gradient(
|
||
0deg,
|
||
rgba(255, 255, 255, 0.5),
|
||
rgba(255, 255, 255, 0.5)
|
||
),
|
||
linear-gradient(180deg, #4851ff -54.32%, #f02aa6 100%);
|
||
|
||
--col-white-to-off-white: linear-gradient(180deg, #ffffff 0%, #f0f1ff 100%);
|
||
|
||
/* Typography */
|
||
--fs-heading-xl: 3.5rem;
|
||
--lh-heading-xl: 71px;
|
||
--fw-headings: 800;
|
||
|
||
--fs-heading-l: 2.5rem;
|
||
--lh-heading-l: 3.1875rem;
|
||
|
||
--fs-heading-m: 2rem;
|
||
--lh-heading-m: 2.5rem;
|
||
|
||
--fs-heading-s: 1.5rem;
|
||
--lh-heading-s: 1.75rem;
|
||
|
||
--fs-body-m: 1.125rem;
|
||
--lh-body-m: 1.75rem;
|
||
--fw-body-m: 500;
|
||
|
||
--fs-body-s: 1rem;
|
||
--lh-body-s: 1.625rem; /* design system says 28px / 1.75rem, but in the elements themselves its 26px / 1.625rem */
|
||
--fw-body-s: 700;
|
||
/* Sizing */
|
||
|
||
--border-radius: 1.75rem;
|
||
|
||
/* Other */
|
||
}
|
||
|
||
body {
|
||
min-height: 100vh;
|
||
font-family: "Plus Jakarta Sans", sans-serif;
|
||
}
|
||
|
||
@media screen and (min-width: 768px) {
|
||
}
|
||
|
||
@media screen and (min-width: 1440px) {
|
||
}
|