lumeweb.com/src/styles/global.scss

@import "mixins.scss";

@import url("https://fonts.googleapis.com/css?family=Jaldi:400|JetBrains+Mono:400,700|IBM+Plex+Sans+Devanagari:400");

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --primary-dark: rgba(0 0 0 100%);
  --primary-light: rgba(255 255 255 100%);
  --black: rgba(0 0 0);
  --blue-charcoal: rgba(1 14 16);
  --blue-charcoal-2: rgba(3 21 24);
  --aquamarine: rgba(122 252 187);
  --cloud: rgba(199 199 199);
  --alto: rgba(217 217 217);
  --white: rgba(255 255 255);
  --font-size-s: 10.25rem; /* 20px */
  --font-size-m: 1.3125rem; /* 21px */
  --font-size-l: 1.5625rem; /* 25px */
  --font-size-xl: 1.875rem; /* 30px */
  --font-size-xxl: 2rem; /* 32px */
  --font-size-xxxl: 2.8125rem; /* 45px */
  --font-size-xxxxl: 6.25rem; /* 100px */
  --font-family-ibm-plex-sans-devanagari: "IBM Plex Sans Devanagari";
  --font-family-jaldi: "Jaldi";
  --font-family-jetbrains-mono: "JetBrains Mono";
}

html {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 20rem;
  scroll-behavior: smooth;
}

body {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-family: "JetBrains Mono", sans-serif;
  background-color: rgb(3 20 24);
  color: white;
}

main {
  flex-grow: 1;
}

a {
  transition: color 200ms;
}

.body-block {
  align-items: center;
  display: flex;
  gap: 78px;
}

.centered {
  display: grid;
  place-items: center;
  overflow: hidden;
  height: auto;
  margin-bottom: 1.5vh;
}

.title {
  height: 57px;
  letter-spacing: -1.5px;
  line-height: 102px;
  white-space: nowrap;
}

h2 {
  @include fluid-font(1rem, 2rem); /* 16px - 32px  */
  color: var(--aquamarine);
  text-transform: uppercase;
}

h3 {
  font-size: calc(30px + (45 - 30) * ((100vw - 300px) / (1600 - 300)));
}

h4 {
  font-size: calc(15px + (21 - 15) * ((100vw - 300px) / (1600 - 300)));
  color: var(--cloud);
  font-family: var(--font-family-jaldi);
  font-weight: 400;
  font-style: normal;
  max-width: 550px;
  margin-top: 0.5em;
  line-height: 35px;
}

h5 {
  font-size: calc(15px + (29 - 15) * ((100vw - 300px) / (1600 - 300)));
  color: var(--white);
  font-family: var(--font-family-jaldi);
  font-weight: 400;
  font-style: normal;
  max-width: 300;
  line-height: 2rem;
}

h6 {
  font-size: calc(15px + (19 - 15) * ((100vw - 300px) / (1600 - 300)));
  color: var(--cloud);
  font-family: var(--font-family-jaldi);
  font-weight: 100;
  font-style: normal;
  max-width: 300;
}

.container {
  max-width: 1240px;
  margin: auto;
  padding: 0 1rem;
}

.btn-main {
    display: inline-block;
    color: var(--black);
    background: var(--aquamarine);
    border: 1px solid var(--aquamarine);
    padding: 0.5em 0.8em;
    border-radius: 0.25em;
    transition: color 200ms, background 200ms;

    &:hover {
        color: var(--white);
        background: transparent;
    }
}

@media screen and (width <= 1050px) {
  .left {
    display: flex;
    position: relative;
    overflow: hidden;
    white-space: normal;
  }

  .h2-alignment {
    margin-left: -10em;
  }

  h5 {
    font-size: calc(20px + (29 - 15) * ((100vw - 300px) / (1600 - 300)));
    color: var(--white);
    font-family: var(--font-family-jaldi);
    font-weight: 400;
    font-style: normal;
    max-width: 300;
    line-height: 2rem;
  }

  h6 {
    font-size: calc(17px + (19 - 15) * ((100vw - 300px) / (1600 - 300)));
    color: var(--cloud);
    font-family: var(--font-family-jaldi);
    font-weight: 100;
    font-style: normal;
    max-width: 300;
  }
}

main.vision {
  &::before {
    content: "";
    position: absolute;
    width: 1031px;
    height: 733px;
    top: 0;
    left: 50%;
    margin-left: -515.5px;
    z-index: -1;
    background: url(../assets/vision-bg.png);
    background-size: contain;
  }
}