💄 CSS setup.

results-summary-component/style.css

@@ -1,97 +1,29 @@
+@font-face {
+    font-family: 'Hanken Grotesk';
+    src: url('./assets/fonts/HankenGrotesk-VariableFont_wght.ttf') format('truetype-variations');
+    font-weight: 500 800;
+}
+
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    --c-red: hsl(0, 100%, 67%);
-  line-height: 1.5;
+    --c-yellow: hsl(39, 100%, 56%);
-  font-weight: 400;
+    --c-green: hsl(166, 100%, 37%);
+    --c-blue: hsl(234, 85%, 45%);
 
-  color-scheme: light dark;
+    --c-bg-main-start: hsl(252, 100%, 67%);
-  color: rgba(255, 255, 255, 0.87);
+    --c-bg-main-end: hsl(241, 81%, 54%);
-  background-color: #242424;
+    --c-bg-bubble-start: hsla(256, 72%, 46%, 1);
+    --c-bg-bubble-end: hsla(241, 72%, 46%, 0);
 
-  font-synthesis: none;
+    --c-n-white: hsl(0, 0%, 100%);
-  text-rendering: optimizeLegibility;
+    --c-n-pale-blue: hsl(221, 100%, 96%);
-  -webkit-font-smoothing: antialiased;
+    --c-n-lavender: hsl(241, 100%, 89%);
-  -moz-osx-font-smoothing: grayscale;
+    --c-n-gray-blue: hsl(224, 30%, 27%);
-  -webkit-text-size-adjust: 100%;
+
+    --f-size: 18px;
+    --f-family: 'Hanken Grotesk', serif;
+    --f-normal: 500;
+    --f-bold: 700;
+    --f-extra-bold: 800;
 }
 
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vanilla:hover {
-  filter: drop-shadow(0 0 2em #f7df1eaa);
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}