@kitconcept/volto-light-theme 2.0.0 → 2.1.0

package/src/theme/_fonts.scss

@@ -0,0 +1,317 @@
+// Inter font family
+@font-face {
+  font-family: 'Inter';
+  //font-style: thin;
+  font-weight: 100;
+  src: local('Inter');
+  src: url('./fonts/Inter-Thin.ttf');
+  src: url('./fonts/Inter-Thin.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Inter';
+  // font-style: extra-light;
+  font-weight: 200;
+  src: local('Inter');
+  src: url('./fonts/Inter-ExtraLight.ttf');
+  src: url('./fonts/Inter-ExtraLight.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Inter';
+  //font-style: light;
+  font-weight: 300;
+  src: local('Inter');
+  src: url('./fonts/Inter-Light.ttf');
+  src: url('./fonts/Inter-Light.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal; //regular
+  font-weight: 400;
+  src: local('Inter');
+  src: url('./fonts/Inter-Regular.ttf');
+  src: url('./fonts/Inter-Regular.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Inter';
+  //font-style: medium;
+  font-weight: 500;
+  src: local('Inter');
+  src: url('./fonts/Inter-Medium.ttf');
+  src: url('./fonts/Inter-Medium.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Inter';
+  // font-style: semi-bold;
+  font-weight: 600;
+  src: local('Inter');
+  src: url('./fonts/Inter-SemiBold.ttf');
+  src: url('./fonts/Inter-SemiBold.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Inter';
+  //font-style: bold;
+  font-weight: 700;
+  src: local('Inter');
+  src: url('./fonts/Inter-Bold.ttf');
+  src: url('./fonts/Inter-Bold.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Inter';
+  // font-style: extra-bold;
+  font-weight: 800;
+  src: local('Inter');
+  src: url('./fonts/Inter-ExtraBold.ttf');
+  src: url('./fonts/Inter-ExtraBold.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Inter';
+  // font-style: black;
+  font-weight: 900;
+  src: local('Inter');
+  src: url('./fonts/Inter-Black.ttf');
+  src: url('./fonts/Inter-Black.ttf') format('truetype');
+}
+
+// //
+// Metropolis Font
+// //
+
+// @font-face {
+//   font-family: 'Metropolis Extra';
+//   src: url('./fonts/metropolis/Metropolis-ExtraLightItalic.eot');
+//   src: local('Metropolis Extra Light Italic'), local('Metropolis-ExtraLightItalic'),
+//       url('./fonts/metropolis/Metropolis-ExtraLightItalic.eot?#iefix') format('embedded-opentype'),
+//       url('./fonts/metropolis/Metropolis-ExtraLightItalic.woff2') format('woff2'),
+//       url('./fonts/metropolis/Metropolis-ExtraLightItalic.woff') format('woff'),
+//       url('./fonts/metropolis/Metropolis-ExtraLightItalic.ttf') format('truetype');
+//   font-weight: 200;
+//   font-style: italic;
+// }
+
+@font-face {
+  font-family: 'Metropolis';
+  font-style: italic;
+  font-weight: normal;
+  src: url('./fonts/metropolis/Metropolis-RegularItalic.eot');
+  src:
+    local('Metropolis Regular Italic'),
+    local('Metropolis-RegularItalic'),
+    url('./fonts/metropolis/Metropolis-RegularItalic.eot?#iefix')
+      format('embedded-opentype'),
+    url('./fonts/metropolis/Metropolis-RegularItalic.woff2') format('woff2'),
+    url('./fonts/metropolis/Metropolis-RegularItalic.woff') format('woff'),
+    url('./fonts/metropolis/Metropolis-RegularItalic.ttf') format('truetype');
+}
+
+// @font-face {
+//   font-family: 'Metropolis Semi';
+//   src: url('./fonts/metropolis/Metropolis-SemiBoldItalic.eot');
+//   src: local('Metropolis Semi Bold Italic'), local('Metropolis-SemiBoldItalic'),
+//       url('./fonts/metropolis/Metropolis-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
+//       url('./fonts/metropolis/Metropolis-SemiBoldItalic.woff2') format('woff2'),
+//       url('./fonts/metropolis/Metropolis-SemiBoldItalic.woff') format('woff'),
+//       url('./fonts/metropolis/Metropolis-SemiBoldItalic.ttf') format('truetype');
+//   font-weight: 600;
+//   font-style: italic;
+// }
+
+// @font-face {
+//   font-family: 'Metropolis';
+//   src: url('./fonts/metropolis/Metropolis-BlackItalic.eot');
+//   src: local('Metropolis Black Italic'), local('Metropolis-BlackItalic'),
+//       url('./fonts/metropolis/Metropolis-BlackItalic.eot?#iefix') format('embedded-opentype'),
+//       url('./fonts/metropolis/Metropolis-BlackItalic.woff2') format('woff2'),
+//       url('./fonts/metropolis/Metropolis-BlackItalic.woff') format('woff'),
+//       url('./fonts/metropolis/Metropolis-BlackItalic.ttf') format('truetype');
+//   font-weight: 900;
+//   font-style: italic;
+// }
+
+// @font-face {
+//   font-family: 'Metropolis';
+//   src: url('./fonts/metropolis/Metropolis-ThinItalic.eot');
+//   src: local('Metropolis Thin Italic'), local('Metropolis-ThinItalic'),
+//       url('./fonts/metropolis/Metropolis-ThinItalic.eot?#iefix') format('embedded-opentype'),
+//       url('./fonts/metropolis/Metropolis-ThinItalic.woff2') format('woff2'),
+//       url('./fonts/metropolis/Metropolis-ThinItalic.woff') format('woff'),
+//       url('./fonts/metropolis/Metropolis-ThinItalic.ttf') format('truetype');
+//   font-weight: 100;
+//   font-style: italic;
+// }
+
+// @font-face {
+//   font-family: 'Metropolis Extra';
+//   src: url('./fonts/metropolis/Metropolis-ExtraBold.eot');
+//   src: local('Metropolis Extra Bold'), local('Metropolis-ExtraBold'),
+//       url('./fonts/metropolis/Metropolis-ExtraBold.eot?#iefix') format('embedded-opentype'),
+//       url('./fonts/metropolis/Metropolis-ExtraBold.woff2') format('woff2'),
+//       url('./fonts/metropolis/Metropolis-ExtraBold.woff') format('woff'),
+//       url('./fonts/metropolis/Metropolis-ExtraBold.ttf') format('truetype');
+//   font-weight: 800;
+//   font-style: normal;
+// }
+
+// @font-face {
+//   font-family: 'Metropolis Semi';
+//   src: url('./fonts/metropolis/Metropolis-SemiBold.eot');
+//   src: local('Metropolis Semi Bold'), local('Metropolis-SemiBold'),
+//       url('./fonts/metropolis/Metropolis-SemiBold.eot?#iefix') format('embedded-opentype'),
+//       url('./fonts/metropolis/Metropolis-SemiBold.woff2') format('woff2'),
+//       url('./fonts/metropolis/Metropolis-SemiBold.woff') format('woff'),
+//       url('./fonts/metropolis/Metropolis-SemiBold.ttf') format('truetype');
+//   font-weight: 600;
+//   font-style: normal;
+// }
+
+@font-face {
+  font-family: 'Metropolis';
+  font-style: italic;
+  font-weight: 500;
+  src: url('./fonts/metropolis/Metropolis-MediumItalic.eot');
+  src:
+    local('Metropolis Medium Italic'),
+    local('Metropolis-MediumItalic'),
+    url('./fonts/metropolis/Metropolis-MediumItalic.eot?#iefix')
+      format('embedded-opentype'),
+    url('./fonts/metropolis/Metropolis-MediumItalic.woff2') format('woff2'),
+    url('./fonts/metropolis/Metropolis-MediumItalic.woff') format('woff'),
+    url('./fonts/metropolis/Metropolis-MediumItalic.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Metropolis';
+  font-style: normal;
+  font-weight: 500;
+  src: url('./fonts/metropolis/Metropolis-Medium.eot');
+  src:
+    local('Metropolis Medium'),
+    local('Metropolis-Medium'),
+    url('./fonts/metropolis/Metropolis-Medium.eot?#iefix')
+      format('embedded-opentype'),
+    url('./fonts/metropolis/Metropolis-Medium.woff2') format('woff2'),
+    url('./fonts/metropolis/Metropolis-Medium.woff') format('woff'),
+    url('./fonts/metropolis/Metropolis-Medium.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Metropolis';
+  font-style: italic;
+  font-weight: 300;
+  src: url('./fonts/metropolis/Metropolis-LightItalic.eot');
+  src:
+    local('Metropolis Light Italic'),
+    local('Metropolis-LightItalic'),
+    url('./fonts/metropolis/Metropolis-LightItalic.eot?#iefix')
+      format('embedded-opentype'),
+    url('./fonts/metropolis/Metropolis-LightItalic.woff2') format('woff2'),
+    url('./fonts/metropolis/Metropolis-LightItalic.woff') format('woff'),
+    url('./fonts/metropolis/Metropolis-LightItalic.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Metropolis';
+  font-style: normal;
+  font-weight: 300;
+  src: url('./fonts/metropolis/Metropolis-Light.eot');
+  src:
+    local('Metropolis Light'),
+    local('Metropolis-Light'),
+    url('./fonts/metropolis/Metropolis-Light.eot?#iefix')
+      format('embedded-opentype'),
+    url('./fonts/metropolis/Metropolis-Light.woff2') format('woff2'),
+    url('./fonts/metropolis/Metropolis-Light.woff') format('woff'),
+    url('./fonts/metropolis/Metropolis-Light.ttf') format('truetype');
+}
+
+// @font-face {
+//   font-family: 'Metropolis';
+//   src: url('./fonts/metropolis/Metropolis-Black.eot');
+//   src: local('Metropolis Black'), local('Metropolis-Black'),
+//       url('./fonts/metropolis/Metropolis-Black.eot?#iefix') format('embedded-opentype'),
+//       url('./fonts/metropolis/Metropolis-Black.woff2') format('woff2'),
+//       url('./fonts/metropolis/Metropolis-Black.woff') format('woff'),
+//       url('./fonts/metropolis/Metropolis-Black.ttf') format('truetype');
+//   font-weight: 900;
+//   font-style: normal;
+// }
+
+// @font-face {
+//   font-family: 'Metropolis';
+//   src: url('./fonts/metropolis/Metropolis-Thin.eot');
+//   src: local('Metropolis Thin'), local('Metropolis-Thin'),
+//       url('./fonts/metropolis/Metropolis-Thin.eot?#iefix') format('embedded-opentype'),
+//       url('./fonts/metropolis/Metropolis-Thin.woff2') format('woff2'),
+//       url('./fonts/metropolis/Metropolis-Thin.woff') format('woff'),
+//       url('./fonts/metropolis/Metropolis-Thin.ttf') format('truetype');
+//   font-weight: 100;
+//   font-style: normal;
+// }
+
+// @font-face {
+//   font-family: 'Metropolis Extra';
+//   src: url('./fonts/metropolis/Metropolis-ExtraBoldItalic.eot');
+//   src: local('Metropolis Extra Bold Italic'), local('Metropolis-ExtraBoldItalic'),
+//       url('./fonts/metropolis/Metropolis-ExtraBoldItalic.eot?#iefix') format('embedded-opentype'),
+//       url('./fonts/metropolis/Metropolis-ExtraBoldItalic.woff2') format('woff2'),
+//       url('./fonts/metropolis/Metropolis-ExtraBoldItalic.woff') format('woff'),
+//       url('./fonts/metropolis/Metropolis-ExtraBoldItalic.ttf') format('truetype');
+//   font-weight: 800;
+//   font-style: italic;
+// }
+
+// @font-face {
+//   font-family: 'Metropolis Extra';
+//   src: url('./fonts/metropolis/Metropolis-ExtraLight.eot');
+//   src: local('Metropolis Extra Light'), local('Metropolis-ExtraLight'),
+//       url('./fonts/metropolis/Metropolis-ExtraLight.eot?#iefix') format('embedded-opentype'),
+//       url('./fonts/metropolis/Metropolis-ExtraLight.woff2') format('woff2'),
+//       url('./fonts/metropolis/Metropolis-ExtraLight.woff') format('woff'),
+//       url('./fonts/metropolis/Metropolis-ExtraLight.ttf') format('truetype');
+//   font-weight: 200;
+//   font-style: normal;
+// }
+
+@font-face {
+  font-family: 'Metropolis';
+  font-style: normal;
+  font-weight: bold;
+  src: url('./fonts/metropolis/Metropolis-Bold.eot');
+  src:
+    local('Metropolis Bold'),
+    local('Metropolis-Bold'),
+    url('./fonts/metropolis/Metropolis-Bold.eot?#iefix')
+      format('embedded-opentype'),
+    url('./fonts/metropolis/Metropolis-Bold.woff2') format('woff2'),
+    url('./fonts/metropolis/Metropolis-Bold.woff') format('woff'),
+    url('./fonts/metropolis/Metropolis-Bold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Metropolis';
+  font-style: normal;
+  font-weight: normal;
+  src: url('./fonts/metropolis/Metropolis-Regular.eot');
+  src:
+    local('Metropolis Regular'),
+    local('Metropolis-Regular'),
+    url('./fonts/metropolis/Metropolis-Regular.eot?#iefix')
+      format('embedded-opentype'),
+    url('./fonts/metropolis/Metropolis-Regular.woff2') format('woff2'),
+    url('./fonts/metropolis/Metropolis-Regular.woff') format('woff'),
+    url('./fonts/metropolis/Metropolis-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Metropolis';
+  font-style: italic;
+  font-weight: bold;
+  src: url('./fonts/metropolis/Metropolis-BoldItalic.eot');
+  src:
+    local('Metropolis Bold Italic'),
+    local('Metropolis-BoldItalic'),
+    url('./fonts/metropolis/Metropolis-BoldItalic.eot?#iefix')
+      format('embedded-opentype'),
+    url('./fonts/metropolis/Metropolis-BoldItalic.woff2') format('woff2'),
+    url('./fonts/metropolis/Metropolis-BoldItalic.woff') format('woff'),
+    url('./fonts/metropolis/Metropolis-BoldItalic.ttf') format('truetype');
+}

package/src/theme/_header.scss

@@ -21,7 +21,7 @@
       align-self: center;
       justify-content: center;
 
-      @media only screen and (max-width: 1021px) {
+      @media only screen and (max-width: $largest-mobile-screen) {
         display: none;
       }
 
@@ -134,7 +134,7 @@
         transition:
           top 500ms ease-in-out,
           height 600ms ease-in-out;
-        transition-property: top height;
+        transition-property: top, height;
 
         &.active {
           top: 0;
@@ -306,7 +306,6 @@
     display: flex;
     min-height: initial;
     padding: 0;
-    padding: 0;
     margin: 0;
     font-size: 20px;
     list-style: none;
@@ -401,8 +400,13 @@
         position: absolute;
         top: 27px;
         right: 75px;
+        border: 0;
+        margin-left: 28px;
         color: $black;
         cursor: pointer;
+        &:focus {
+          outline: 1px solid $black;
+        }
       }
 
       &-inner {
@@ -505,10 +509,6 @@
       }
     }
   }
-
-  .icon {
-    margin-left: 28px;
-  }
 }
 
 /* Fat menu in Edit mode */
@@ -528,6 +528,14 @@
 
 // Mobile Navigation
 
+// applies on body when menu is open
+.has-menu-open {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
 .mobile-nav {
   .ui.basic.button.search {
     padding: 15px;
@@ -543,8 +551,10 @@
 
   .hamburger-inner,
   .hamburger-inner:before,
-  .hamburger-inner:after {
-    height: 5px;
+  .hamburger-inner:after,
+  .hamburger:before,
+  .hamburger:after {
+    height: 4px;
     border-radius: 0;
   }
 }
@@ -600,7 +610,6 @@
   top: 135px;
   right: 0;
   display: flex;
-  display: flex;
   width: 100vw;
   height: calc(100vh - 110px);
   flex-direction: column;
@@ -614,9 +623,10 @@
   overflow-y: auto;
   text-align: left;
 
-  @media only screen and (max-width: $computer-breakpoint) {
-    top: calc(157px + 1rem); // Adjusting the margin top of the logo
-  }
+  // commented since it is overriden by next media query
+  //@media only screen and (max-width: $computer-breakpoint) {
+  //  top: calc(157px + 1rem); // Adjusting the margin top of the logo
+  //}
 
   @media only screen and (max-width: $computer-breakpoint) {
     top: calc(135px + 1rem); // Adjusting the margin top of the logo
@@ -804,10 +814,9 @@
   height: calc(100vh - 158px);
 }
 
-.menu-drawer-enter {
+.menu-drawer {
   opacity: 0;
-  /* transform: translate(-100%, 0%); */
-  transition: opacity 500ms;
+  visibility: hidden;
 }
 
 .menu-drawer-enter.menu-drawer-enter-active {
@@ -816,6 +825,12 @@
   transition:
     transform 0.5s cubic-bezier(0.09, 0.11, 0.24, 0.91),
     opacity 500ms;
+  visibility: visible;
+}
+
+.menu-drawer-enter-done {
+  opacity: 1;
+  visibility: visible;
 }
 
 .menu-drawer-exit {
@@ -824,6 +839,7 @@
   transition:
     transform 0.5s cubic-bezier(0.09, 0.11, 0.24, 0.91),
     opacity 500ms;
+  visibility: visible;
 }
 
 .menu-drawer-exit.menu-drawer-exit-active {

package/src/theme/_layout.scss

@@ -1,16 +1,9 @@
 :root {
-  --layout-container-width: 1440px;
-  --default-container-width: 940px;
-  --narrow-container-width: 620px;
+  --layout-container-width: #{$layout-container-width};
+  --default-container-width: #{$default-container-width};
+  --narrow-container-width: #{$narrow-container-width};
 }
 
-// Container queries still do not work with CSS custom properties
-// They should be exact numbers
-// For now, maintain in sync with the above
-$layout-container-width: 1440px !default;
-$default-container-width: 940px !default;
-$narrow-container-width: 620px !default;
-
 @mixin narrow-container-width() {
   max-width: var(--narrow-container-width);
   margin-right: auto;
@@ -22,7 +15,7 @@ $narrow-container-width: 620px !default;
   margin-right: auto;
   margin-left: auto;
 
-  // This is mostly aesthetical if you don't want to "see" the jump
+  // This is mostly cosmetics if you don't want to "see" the jump
   // but a nice animation instead - PoC (WIP)
   // @media only screen and (max-width: #{$default-container-width + 5px}) {
   //   margin-right: 5px;
@@ -51,7 +44,7 @@ $narrow-container-width: 620px !default;
   }
 }
 
-// Container adjustments for dealing correctly with absoluted elements
+// Container adjustments for dealing correctly with absolute positioned elements
 @mixin container-preference-order($zindex) {
   position: relative;
   z-index: $zindex;
@@ -125,28 +118,18 @@ footer {
 .content-area .a.container {
   a.external:after,
   a.external:after {
-    display: inline;
-    width: 11px;
-    height: 11px;
+    @include external-link-icon();
     margin-top: -25px;
     margin-left: 3px;
-    content: '\a0'
-      url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='external-link-alt' class='svg-inline--fa fa-external-link-alt fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 512 512'%3E%3Cpath fill='%23007EB1' d='M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z'%3E%3C/path%3E%3C/svg%3E");
-    white-space: nowrap;
   }
 }
 .content-area #page-edit .ui.container,
 .content-area .a.container {
   a.external:after,
   a.external:after {
-    display: inline;
-    width: 11px;
-    height: 11px;
+    @include external-link-icon();
     margin-top: -25px;
     margin-left: 3px;
-    content: '\a0'
-      url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='external-link-alt' class='svg-inline--fa fa-external-link-alt fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 512 512'%3E%3Cpath fill='%23007EB1' d='M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z'%3E%3C/path%3E%3C/svg%3E");
-    white-space: nowrap;
   }
 }
 

package/src/theme/_sitemap.scss

@@ -0,0 +1,25 @@
+@use 'sass:map';
+.section-sitemap {
+  #page-sitemap {
+    h1 {
+      @include page-title();
+    }
+
+    ul {
+      li.with-children {
+        a {
+          font-weight: $bold;
+          line-height: map.get($line-heights, 3xl);
+          text-decoration: none;
+        }
+        ul {
+          li {
+            a {
+              font-weight: $regular;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/theme/_typo-custom.scss

@@ -159,76 +159,3 @@ h4 {
     user-select: none;
   }
 }
-
-@font-face {
-  font-family: 'Inter';
-  font-style: thin;
-  font-weight: 100;
-  src: local('Inter');
-  src: url('./fonts/Inter-Thin.ttf');
-  src: url('./fonts/Inter-Thin.ttf') format('truetype');
-}
-@font-face {
-  font-family: 'Inter';
-  // font-style: extra-light;
-  font-weight: 200;
-  src: local('Inter');
-  src: url('./fonts/Inter-ExtraLight.ttf');
-  src: url('./fonts/Inter-ExtraLight.ttf') format('truetype');
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: light;
-  font-weight: 300;
-  src: local('Inter');
-  src: url('./fonts/Inter-Light.ttf');
-  src: url('./fonts/Inter-Light.ttf') format('truetype');
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: normal; //regular
-  font-weight: 400;
-  src: local('Inter');
-  src: url('./fonts/Inter-Regular.ttf');
-  src: url('./fonts/Inter-Regular.ttf') format('truetype');
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: medium;
-  font-weight: 500;
-  src: local('Inter');
-  src: url('./fonts/Inter-Medium.ttf');
-  src: url('./fonts/Inter-Medium.ttf') format('truetype');
-}
-@font-face {
-  font-family: 'Inter';
-  // font-style: semi-bold;
-  font-weight: 600;
-  src: local('Inter');
-  src: url('./fonts/Inter-SemiBold.ttf');
-  src: url('./fonts/Inter-SemiBold.ttf') format('truetype');
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: bold;
-  font-weight: 700;
-  src: local('Inter');
-  src: url('./fonts/Inter-Bold.ttf');
-  src: url('./fonts/Inter-Bold.ttf') format('truetype');
-}
-@font-face {
-  font-family: 'Inter';
-  // font-style: extra-bold;
-  font-weight: 800;
-  src: local('Inter');
-  src: url('./fonts/Inter-ExtraBold.ttf');
-  src: url('./fonts/Inter-ExtraBold.ttf') format('truetype');
-}
-@font-face {
-  font-family: 'Inter';
-  // font-style: black;
-  font-weight: 900;
-  src: local('Inter');
-  src: url('./fonts/Inter-Black.ttf');
-  src: url('./fonts/Inter-Black.ttf') format('truetype');
-}