87 lines
1.6 KiB
CSS
87 lines
1.6 KiB
CSS
|
:root {
|
||
|
|
--page-bg: #eff5df;
|
||
|
|
--page-bg-2: #dbe8c6;
|
||
|
|
--panel-strong: #0a332d;
|
||
|
|
--panel-soft: #587169;
|
||
|
|
--border: rgba(7, 51, 44, 0.12);
|
||
|
|
--shadow:
|
||
|
|
0 24px 60px rgba(19, 43, 34, 0.12),
|
||
|
|
0 8px 20px rgba(19, 43, 34, 0.08);
|
||
|
|
--sans: 'Bahnschrift', 'Trebuchet MS', sans-serif;
|
||
|
|
--heading: 'Arial Black', 'Bahnschrift', sans-serif;
|
||
|
|
--mono: 'Consolas', 'Courier New', monospace;
|
||
|
|
font: 18px/1.5 var(--sans);
|
||
|
|
color: var(--panel-strong);
|
||
|
|
font-synthesis: none;
|
||
|
|
text-rendering: optimizeLegibility;
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
-moz-osx-font-smoothing: grayscale;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
html {
|
||
|
|
min-height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
min-height: 100vh;
|
||
|
|
background:
|
||
|
|
radial-gradient(circle at top left, rgba(255, 214, 10, 0.35), transparent 28%),
|
||
|
|
radial-gradient(circle at bottom right, rgba(11, 88, 73, 0.2), transparent 32%),
|
||
|
|
linear-gradient(180deg, var(--page-bg), var(--page-bg-2));
|
||
|
|
}
|
||
|
|
|
||
|
|
body::before {
|
||
|
|
content: '';
|
||
|
|
position: fixed;
|
||
|
|
inset: 0;
|
||
|
|
pointer-events: none;
|
||
|
|
background-image:
|
||
|
|
linear-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px),
|
||
|
|
linear-gradient(90deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px);
|
||
|
|
background-size: 48px 48px;
|
||
|
|
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 78%);
|
||
|
|
}
|
||
|
|
|
||
|
|
#root {
|
||
|
|
min-height: 100vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1,
|
||
|
|
h2,
|
||
|
|
h3,
|
||
|
|
p {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1,
|
||
|
|
h2,
|
||
|
|
h3 {
|
||
|
|
font-family: var(--heading);
|
||
|
|
letter-spacing: 0.02em;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
margin: 18px 0 14px;
|
||
|
|
font-size: clamp(2.8rem, 8vw, 5rem);
|
||
|
|
line-height: 0.94;
|
||
|
|
}
|
||
|
|
|
||
|
|
h2 {
|
||
|
|
font-size: clamp(1.6rem, 3vw, 2.2rem);
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
color: var(--panel-soft);
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 720px) {
|
||
|
|
:root {
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
}
|