2022-10-19 18:47:59 +03:00
|
|
|
@font-face {
|
|
|
|
font-family: "Manrope";
|
|
|
|
src: url("Manrope[wght].woff2") format('woff2');
|
2022-11-16 20:29:52 +02:00
|
|
|
font-weight: 125 950;
|
|
|
|
font-stretch: 75% 125%;
|
2022-10-19 18:47:59 +03:00
|
|
|
font-style: normal;
|
|
|
|
}
|
|
|
|
|
|
|
|
:root {
|
|
|
|
--background: #ffffff;
|
|
|
|
--foreground: #000000;
|
2022-11-16 20:29:52 +02:00
|
|
|
--accent: hsl(268, 65%, 60%);
|
|
|
|
--brand-0: hsl(228, 65%, 60%);
|
|
|
|
--brand-1: hsl(208, 65%, 60%);
|
|
|
|
--brand-2: hsl(188, 65%, 60%);
|
|
|
|
--brand-3: hsl(158, 65%, 40%);
|
|
|
|
--brand-4: hsl(138, 65%, 40%);
|
|
|
|
--brand-5: hsl(118, 65%, 40%);
|
2022-10-19 18:47:59 +03:00
|
|
|
|
|
|
|
--space-unit: 1em;
|
|
|
|
--space-xxs: calc(0.25 * var(--space-unit));
|
|
|
|
--space-xs: calc(0.5 * var(--space-unit));
|
|
|
|
--space-sm: calc(0.75 * var(--space-unit));
|
|
|
|
--space-norm: var(--space-unit);
|
|
|
|
--space-normplus: calc(var(--space-unit) + var(--space-sm));
|
|
|
|
--space-md: calc(1.25 * var(--space-unit));
|
|
|
|
--space-lg: calc(2 * var(--space-unit));
|
|
|
|
--space-xl: calc(3.25 * var(--space-unit));
|
|
|
|
--space-xxl: calc(5.25 * var(--space-unit));
|
|
|
|
|
|
|
|
--h1: 3.052rem;
|
|
|
|
--h2: 2.441rem;
|
|
|
|
--h3: 1.953rem;
|
|
|
|
--h4: 1.563rem;
|
|
|
|
--h5: 1.25rem;
|
|
|
|
--small: 0.8rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
html,
|
|
|
|
body {
|
2022-10-19 20:58:00 +03:00
|
|
|
font-size: 100%;
|
2022-10-19 18:47:59 +03:00
|
|
|
font-family: "Manrope", Arial, Helvetica, sans-serif;
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
font-weight: 400;
|
|
|
|
line-height: 1.75;
|
|
|
|
color: var(--foreground);
|
|
|
|
background-color: var(--background);
|
|
|
|
accent-color: var(--accent);
|
|
|
|
}
|
|
|
|
|
|
|
|
a {
|
|
|
|
color: var(--accent);
|
|
|
|
}
|
|
|
|
|
2022-10-19 20:58:00 +03:00
|
|
|
* {
|
|
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
|
2022-10-19 18:47:59 +03:00
|
|
|
.main-container {
|
2022-10-19 20:58:00 +03:00
|
|
|
width: clamp(200px, 100vw, 1000px);
|
|
|
|
margin: 28px auto;
|
|
|
|
padding: 36px;
|
2022-10-19 18:47:59 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
.branding-container {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
}
|
|
|
|
|
|
|
|
.branding-primary {
|
|
|
|
color: var(--background);
|
|
|
|
background-color: var(--foreground);
|
|
|
|
font-size: var(--h2);
|
|
|
|
flex-grow: 0;
|
|
|
|
padding: 0.5rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.branding-secondary {
|
|
|
|
font-size: var(--h2);
|
|
|
|
flex-grow: 0;
|
|
|
|
border: 1px solid black;
|
|
|
|
padding: 0.5rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.showcase-card {
|
|
|
|
margin-top: var(--space-xxs);
|
|
|
|
font-size: var(--h5);
|
|
|
|
}
|
|
|
|
|
2022-11-16 20:29:52 +02:00
|
|
|
.accent-card {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
padding: 28px;
|
|
|
|
margin: 18px;
|
|
|
|
border-radius: 28px;
|
|
|
|
background-color: var(--selected-color);
|
|
|
|
color: var(--background);
|
|
|
|
}
|
|
|
|
|
|
|
|
.accent-card .title {
|
|
|
|
font-size: var(--h3);
|
|
|
|
font-weight: 300;
|
|
|
|
}
|
|
|
|
|
|
|
|
.accent-card .title-hard {
|
|
|
|
font-size: var(--h3);
|
|
|
|
font-weight: 500;
|
|
|
|
}
|
|
|
|
|
|
|
|
.accent-card .link {
|
|
|
|
color: var(--background);
|
|
|
|
text-decoration: none;
|
|
|
|
font-size: var(--h2);
|
|
|
|
margin: 0;
|
|
|
|
margin-left: auto;
|
|
|
|
font-weight: 600;
|
|
|
|
}
|
|
|
|
|
2022-10-19 18:47:59 +03:00
|
|
|
/* scales */
|
|
|
|
|
|
|
|
p {
|
|
|
|
margin-bottom: 0.4rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
h1,
|
|
|
|
h2,
|
|
|
|
h3,
|
|
|
|
h4,
|
|
|
|
h5 {
|
2022-11-16 20:29:52 +02:00
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
|
2022-10-19 18:47:59 +03:00
|
|
|
font-weight: 400;
|
|
|
|
line-height: 1.3;
|
|
|
|
}
|
|
|
|
|
|
|
|
h1 {
|
|
|
|
font-size: var(--h1);
|
|
|
|
margin-top: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
h2 {
|
|
|
|
font-size: var(--h2);
|
|
|
|
}
|
|
|
|
|
|
|
|
h3 {
|
|
|
|
font-size: var(--h3);
|
|
|
|
}
|
|
|
|
|
|
|
|
h4 {
|
|
|
|
font-size: var(--h4);
|
|
|
|
}
|
|
|
|
|
|
|
|
h5 {
|
|
|
|
font-size: var(--h5);
|
|
|
|
}
|
|
|
|
|
|
|
|
small,
|
2022-11-16 20:29:52 +02:00
|
|
|
.text-small {
|
2022-10-19 18:47:59 +03:00
|
|
|
font-size: var(--small);
|
|
|
|
}
|