laconic-dot-com/src/css/global.scss

@import './normalize.css';
@import './fonts.css';
@import './helpers';

:root {
  --inspect-color: #f00;
  --font-system: -apple-system, blinkmacsystemfont, segoe ui, roboto, oxygen,
    ubuntu, cantarell, fira sans, droid sans, helvetica neue, sans-serif;
  --font-tt-hoves: 'TT Hoves', var(--font-system);
  --font-arthemys: 'Arthemys Display', var(--font-system);
  --font-dm-mono: 'DM Mono', var(--font-system);

  // Fonts
  --font-heading: var(--font-arthemys);

  // Colors
  --color-accent: #0000f4;
  --color-black: #040404;
  --color-white: #fbfbfb;
  --color-grey-light: #8e8e8e;
  --color-grey-lightness: #dedede;

  // Duration
  --duration-normal: 0.525s;
  --duration-fast: 0.262s;

  // Bezier
  --ease: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-button: cubic-bezier(0.3, 1, 0.8, 1);

  // Transition
  --normal-transition: var(--duration-fast) var(--ease);

  /* Main */
  --main-padding-top: #{tovw(13px, 'default', 13px)};
  --main-padding-side: #{tovw(57px, 'default', 16px)};

  /* Header */
  --header-height: #{tovw(71px)};
}

*,
*:active,
*:focus {
  box-sizing: border-box;
}

html {
  box-sizing: border-box;
  background-color: var(--color-black);
  text-rendering: geometricprecision;
  line-height: 1.15;
  color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-font-smoothing: antialiased;
  font-variant-ligatures: common-ligatures;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height) + 30px);

  &.no-animation {
    * {
      animation-play-state: paused;
    }
  }
}

html.has-custom-cursor,
html.has-custom-cursor *,
html.has-custom-cursor::after,
html.has-custom-cursor ::after,
html.has-custom-cursor::before,
html.has-custom-cursor ::before {
  cursor: none !important;
}

body {
  overflow-x: hidden;
  background-color: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-tthoves);
}

body:not(.user-is-tabbing) button:focus,
body:not(.user-is-tabbing) input:focus,
body:not(.user-is-tabbing) select:focus,
body:not(.user-is-tabbing) textarea:focus {
  outline: none;
}

:focus-visible {
  outline: tovw(2px, 'default', 2px) dashed var(--color-accent);
}

::selection {
  background: var(--color-accent);
  color: var(--color-black);
}

p {
  font-size: tovw(24px, 'default', 18px);
  font-family: var(--font-tt-hoves);
  line-height: 1.32;
}

.highlight {
  color: var(--color-accent);
}

.sr-only {
  position: absolute;
  border: 0;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0, 0, 0, 0);
}

.hide-on-mobile {
  @include respond-to('mobile') {
    display: none !important;
  }

  display: inherit !important;
}

.hide-on-desktop {
  display: initial !important;
  @media screen and (min-width: 901px) {
    display: none !important;
  }
}

.select {
  height: 100% !important;
  display: flex !important;

  .select__control {
    @include respond-to('mobile') {
      margin-top: tovw(20px, 'default', 16px) !important;
    }

    appearance: none !important;
    width: 100% !important;
    min-height: unset !important;
    place-self: end !important;
    font-size: tovw(24px, 'default', 18px) !important;
    padding: tovw(16px, 'default', 11px) tovw(10px, 'default', 7px) !important;
    background: rgb(142 142 142 / 0.1) !important;
    border: tovw(1px, 'default', 1px) solid transparent !important;
    border-radius: tovw(8px, 'default', 8px) !important;
    transition: unset !important;

    &:hover {
      border: tovw(1px, 'default', 1px) solid transparent !important;
    }

    &--is-focused {
      border: tovw(1px, 'default', 1px) solid var(--color-accent) !important;
      box-shadow: unset !important;
      background: rgb(0 0 244 / 0.1) !important;
      transition: all 250ms !important;
    }
  }

  &__indicator-separator {
    display: none !important;
  }

  &__option {
    color: var(--color-grey-light) !important;

    &--is-focused {
      color: white !important;
      background-color: unset !important;
    }

    &--is-selected {
      background-color: unset !important;
      color: white !important;
    }
  }

  [class$='-menu'] {
    background: rgb(0 0 0 / 0.2) !important;
    backdrop-filter: blur(16px) !important;
    font-size: tovw(24px, 'default', 18px) !important;
    margin: 0 !important;

    @-moz-document url-prefix("") {
      background-color: var(--color-black) !important;
    }
  }

  [class$='-indicatorContainer'] {
    padding: 0 tovw(8px, 'default', 2px) !important;
  }

  [class$='-ValueContainer'],
  [class$='-Input'] {
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  &__value-container,
  &__input-container {
    padding: 0 !important;
    margin: 0 !important;
  }

  &__single-value {
    color: var(--color-white) !important;
  }

  &__placeholder {
    color: var(--color-grey-light) !important;
  }
}