Global and reusable stylings

src/styles/colors.scss

@@ -1,14 +1,16 @@
 :root {
-  --primary: #9fef00;
+  --primary: #d6fb41;
   --primary-lighter: #cff97a;
   --text-color: #ffffff;
-  --text-color-secondary: #a4b1cd;
+  --text-color-secondary: #ffffffb6;
-  --background: #141d2b;
+  --text-color-thirdly: #ffffff5b;
+  --background: #111211;
   --background-darker: #111927;
   --background-lighter: #1a2332;
+  --background-50: #11121180;
   --bg-shadow-color: #0f1620;
   --fg-shadow-color: #456602;
-  --primary-transparent: #9fef0030;
+  --primary-transparent: #d6fb4130;
 
   // Action Colors
   --info: #04e4f4;

src/styles/global.scss

@@ -1,6 +1,7 @@
 /* Global Stylesheet */
-
+@import './colors.scss';
 @import './media-queries.scss';
+@import './typography.scss';
 
 /* CSS Reset - Normalize dimensions and spacing across browsers */
 *,
@@ -9,21 +10,29 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
+  font-family: inherit;
+}
+
+::selection {
+  background: var(--primary);
+  color: var(--background);
 }
 
 /* HTML and body basic setup */
 html {
-  font-size: 16px; // Default text size; consider accessibility and user preferences
+  font-size: 16px;
-  scroll-behavior: smooth; // Smooth scrolling on click to hash links
+  scroll-behavior: smooth;
 }
 
 body {
-  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
+  font-family: 'Hubot Sans', 'Inter', 'Helvetica Neue', Arial, sans-serif;
   line-height: 1;
   color: var(--text-color);
   background: var(--background);
   overflow-x: hidden;
   font-weight: 400;
+  margin: 0;
+  min-height: 100vh;
 }
 
 /* Links */
@@ -70,22 +79,19 @@ input, button, textarea, select {
 }
 
 /* Utility Classes */
-.text-center {
+.text-center { text-align: center; }
-  text-align: center;
+.hidden { display: none; }
-}
+.bold { font-weight: 600; }
-.hidden {
+.italic { font-style: italic; }
-  display: none;
+.underline { text-decoration: underline; }
-}
+.uppercase { text-transform: uppercase; }
 
-/* Responsive Design - Example of a simple breakpoint */
 @media (max-width: 768px) {
   html {
-    font-size: 14px; // Smaller font size on smaller screens
+    font-size: 14px;
   }
 }
 
-
-
 h1, h2, h3, h4, h5, h6 {
   margin-top: 0;
   margin-bottom: 0.5em;
@@ -100,6 +106,13 @@ h4 { font-size: 1.2rem; }
 h5 { font-size: 1rem; }
 h6 { font-size: 0.85rem; }
 
+// Responsive font sizes
+@media (max-width: 768px) {
+  h1 { font-size: 2rem; }
+  h2 { font-size: 1.6rem; }
+  h3 { font-size: 1.4rem; }
+}
+
 p {
   margin-top: 0;
   margin-bottom: 1em;
@@ -113,11 +126,4 @@ a {
   }
 }
 
-// Responsive font sizes
-@media (max-width: 768px) {
-  h1 { font-size: 2rem; }
-  h2 { font-size: 1.6rem; }
-  h3 { font-size: 1.4rem; }
-  // Adjust more as necessary
-}
 

src/styles/typography.scss

@@ -1,62 +1,164 @@
 @font-face {
   font-family: 'Inter';
-  src: url('../assets/fonts/Inter-Thin.ttf') format('truetype');
+  src: url('/fonts/Inter-Thin.ttf') format('truetype');
   font-weight: 100;
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
   font-family: 'Inter';
-  src: url('../assets/fonts/Inter-ExtraLight.ttf') format('truetype');
+  src: url('/fonts/Inter-ExtraLight.ttf') format('truetype');
   font-weight: 200;
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
   font-family: 'Inter';
-  src: url('../assets/fonts/Inter-Light.ttf') format('truetype');
+  src: url('/fonts/Inter-Light.ttf') format('truetype');
   font-weight: 300;
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
   font-family: 'Inter';
-  src: url('../assets/fonts/Inter-Regular.ttf') format('truetype');
+  src: url('/fonts/Inter-Regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
   font-family: 'Inter';
-  src: url('../assets/fonts/Inter-Medium.ttf') format('truetype');
+  src: url('/fonts/Inter-Medium.ttf') format('truetype');
   font-weight: 500;
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
   font-family: 'Inter';
-  src: url('../assets/fonts/Inter-SemiBold.ttf') format('truetype');
+  src: url('/fonts/Inter-SemiBold.ttf') format('truetype');
   font-weight: 600;
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
   font-family: 'Inter';
-  src: url('../assets/fonts/Inter-Bold.ttf') format('truetype');
+  src: url('/fonts/Inter-Bold.ttf') format('truetype');
   font-weight: 700;
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
   font-family: 'Inter';
-  src: url('../assets/fonts/Inter-ExtraBold.ttf') format('truetype');
+  src: url('/fonts/Inter-ExtraBold.ttf') format('truetype');
   font-weight: 800;
   font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
   font-family: 'Inter';
-  src: url('../assets/fonts/Inter-Black.ttf') format('truetype');
+  src: url('/fonts/Inter-Black.ttf') format('truetype');
   font-weight: 900;
   font-style: normal;
+  font-display: swap;
 }
+
+// Regular Weights and Styles
+@font-face {
+  font-family: 'Hubot Sans';
+  src: url('/fonts/Hubot-Sans/WOFF2/HubotSans-Regular.woff2') format('woff2'),
+       url('/fonts/Hubot-Sans/TTF/HubotSans-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Hubot Sans';
+  src: url('/fonts/Hubot-Sans/WOFF2/HubotSans-Italic.woff2') format('woff2'),
+       url('/fonts/Hubot-Sans/TTF/HubotSans-Italic.ttf') format('truetype');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Hubot Sans';
+  src: url('/fonts/Hubot-Sans/WOFF2/HubotSans-Bold.woff2') format('woff2'),
+       url('/fonts/Hubot-Sans/TTF/HubotSans-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Hubot Sans';
+  src: url('/fonts/Hubot-Sans/WOFF2/HubotSans-BoldItalic.woff2') format('woff2'),
+       url('/fonts/Hubot-Sans/TTF/HubotSans-BoldItalic.ttf') format('truetype');
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
+// Light, Medium, and ExtraBold variants
+@font-face {
+  font-family: 'Hubot Sans';
+  src: url('/fonts/Hubot-Sans/WOFF2/HubotSans-Light.woff2') format('woff2'),
+       url('/fonts/Hubot-Sans/TTF/HubotSans-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Hubot Sans';
+  src: url('/fonts/Hubot-Sans/WOFF2/HubotSans-LightItalic.woff2') format('woff2'),
+       url('/fonts/Hubot-Sans/TTF/HubotSans-LightItalic.ttf') format('truetype');
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Hubot Sans';
+  src: url('/fonts/Hubot-Sans/WOFF2/HubotSans-Medium.woff2') format('woff2'),
+       url('/fonts/Hubot-Sans/TTF/HubotSans-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Hubot Sans';
+  src: url('/fonts/Hubot-Sans/WOFF2/HubotSans-MediumItalic.woff2') format('woff2'),
+       url('/fonts/Hubot-Sans/TTF/HubotSans-MediumItalic.ttf') format('truetype');
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Hubot Sans';
+  src: url('/fonts/Hubot-Sans/WOFF2/HubotSans-ExtraBold.woff2') format('woff2'),
+       url('/fonts/Hubot-Sans/TTF/HubotSans-ExtraBold.ttf') format('truetype');
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Hubot Sans';
+  src: url('/fonts/Hubot-Sans/WOFF2/HubotSans-ExtraBoldItalic.woff2') format('woff2'),
+       url('/fonts/Hubot-Sans/TTF/HubotSans-ExtraBoldItalic.ttf') format('truetype');
+  font-weight: 800;
+  font-style: italic;
+  font-display: swap;
+}
+