global.scss

@import 'normalize';
@import 'variables';
@import 'grid/gridlex-2.7.1';

// Modules
@import '../modules/zero/components/components.scss';
@import '../modules/docs-theme';

// Layouts
@import 'layouts/messagebanner';
@import 'layouts/section';
@import 'layouts/corkscrewBackground';
@import 'layouts/pageContainer';
@import 'layouts/dropdownOverrides';
@import 'layouts/paginationOverrides';
@import 'layouts/filterableOverrides';
@import 'layouts/userRequestsModals.scss';
@import '../components/navigation/navigation.scss';
@import '../components/footer/footer.scss';

// Components
@import '../components/button/button';
@import '../components/account/ctaCard/CTACard';
@import '../components/account/storageManager/storageManager';
@import '../components/account/filesManager/filesManager';
@import '../components/account/filesManager/fileRowItem';
@import '../components/tokens/tokenCreator/tokenCreator';
@import '../components/tokens/tokensManager/tokensManager';
@import '../components/tokens/tokensManager/tokenRowItem';
@import '../components/account/fileUploader/fileUploader';
@import '../components/cardlistblock/cardlistblock.scss';
@import '../components/card/card.scss';
@import '../components/textblock/textblock.scss';
@import '../components/imageblock/imageblock.scss';
@import '../components/accordionblock/accordionblock.scss';
@import '../components/hero/hero.scss';
@import '../components/messagebanner/messagebanner.scss';
@import '../components/codepreview/codepreview.scss';
@import '../components/breadcrumbs/breadcrumbs.scss';
@import '../components/scroll2top/scroll2top.scss';
@import '../components/gradientbackground/gradientbackground.scss';
@import '../components/tabs/tabs.scss';
@import '../components/callout/callout.scss';
@import '../components/w3link_form/w3link_form.scss';
@import '../components/w3link_gateway/w3link_gateway.scss';
@import '../components/customStorageForm/customStorageForm.scss';
@import '../components/search/search.scss';
@import '../components/account/accountBlockedModal/accountBlockedModal.scss';
@import '../components/accountPlansModal/accountPlansModal.scss';

// Pages
@import '../pages/index.scss';
@import '../pages/pricing.scss';
@import '../pages/faq.scss';
@import '../pages/terms.scss';
@import '../pages/sla.scss';
@import '../pages/404.scss';
@import '../pages/login';
@import '../pages/account';
@import '../pages/tokens';
@import '../pages/products/w3name/index.scss';
@import '../pages/products/w3link/index.scss';
@import '../pages/products/web3storage/index.scss';
@import '../pages/contact';

// Fonts
$fontAssetPath: '../assets/fonts';

// @font-face {
//   font-family: 'SuisseIntl';
//   src: url('#{$fontAssetPath}/SuisseIntl/SuisseIntl-Light.otf') format('opentype');
//   font-weight: 300;
//   font-display: swap;
// }

@font-face {
  font-family: 'SuisseIntl';
  src: url('#{$fontAssetPath}/subset-SuisseIntl-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

// @font-face {
//   font-family: 'SuisseIntl';
//   src: url('#{$fontAssetPath}/SuisseIntl/SuisseIntl-Medium.otf') format('opentype');
//   font-weight: 500;
//   font-display: swap;
// }

@font-face {
  font-family: 'SuisseIntl';
  src: url('#{$fontAssetPath}/subset-SuisseIntl-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SuisseIntl';
  src: url('#{$fontAssetPath}/subset-SuisseIntl-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

// @font-face {
//   font-family: 'Suisse Intl Mono';
//   src: url('#{$fontAssetPath}/SuisseIntlMono/SuisseIntlMono-Thin.otf') format('opentype');
//   font-weight: 300;
//   font-display: swap;
// }

@font-face {
  font-family: 'Suisse Intl Mono';
  src: url('#{$fontAssetPath}/subset-SuisseIntlMono-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

// @font-face {
//   font-family: 'Suisse Intl Mono';
//   src: url('#{$fontAssetPath}/SuisseIntlMono/SuisseIntlMono-Bold.otf') format('opentype');
//   font-weight: 700;
//   font-display: swap;
// }

html,
body {
  font-family: $font_Primary, helvetica, sans-serif;
  font-size: 16px;
  font-weight: $fontWeight_Regular;
  line-height: $leading_Regular;
  color: $ebony;
  @include background_Light;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  &.no-scroll {
    overflow-y: hidden;
  }
  &.no-cursor {
    cursor: none;
  }
  * {
    box-sizing: border-box;
    &:before,
    &:after {
      box-sizing: border-box;
    }
  }
}

a,
button,
ul {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
  padding: 0;
  margin: 0;
  border: 0;
}

a,
button {
  cursor: pointer;
}

::-webkit-file-upload-button {
  cursor: pointer;
}

//  Next & Grid
body:not(.docs-site) #__next {
  position: relative;
  z-index: 2;
  overflow-x: hidden;
}

#master-container {
  position: relative;
  &.product-app {
    min-height: 100vh;
    display: flex;
    flex-flow: column nowrap;
    background-color: $ebony;
    @include background_Dark;
  }
}

[class~='grid'],
[class*='grid-'],
[class*='grid_'] {
  width: $containerWidth;
  margin: 0 auto;
  @include customMaxMQ($containerWidth) {
    padding-left: clamp(2rem, 8vw, 6rem);
    padding-right: clamp(2rem, 8vw, 6rem);
    width: 100%;
  }
  &[class*='-noGutter'] {
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
  }
  &.full {
    width: 100%;
    padding: 0 0.5rem;
    &.maxed {
      max-width: 90rem;
    }
  }
  &.no-padding {
    padding: 0;
  }
  [class~='grid'],
  [class*='grid-'],
  [class*='grid_'] {
    width: 100%;
    padding: 0;
  }
}

// Typography
h1,
.h1 {
  @include h1;
  line-height: leading(55, 45);
}

h2,
.h2 {
  @include h2;
}

h3,
.h3 {
  @include h3;
}

h4,
.h4 {
  @include h4;
}

h5,
.h5 {
  @include h5;
}

.table-heading {
  padding: 0 2rem 2rem;
  font-size: 1.875rem;
}

.app-back-link {
  font-size: 14px;
  position: absolute;
  left: 2rem;
  top: 0;
  color: rgba($color: #fff, $alpha: 0.5);
  display: flex;
  align-items: center;
  gap: 5px;
  &:before {
    content: '←';
    margin-top: -2px;
  }

  @media screen and (max-width: 960px) {
    position: relative;
  }
}

// Components
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
}

// Layout
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
}

.table-tooltip.rc-tooltip {
  opacity: 1;
}

.table-tooltip .rc-tooltip-content {
  position: relative;
  bottom: 4px;
}

.table-tooltip .rc-tooltip-content .rc-tooltip-arrow {
  border-top-color: #fc6553;
}

@keyframes appear-bottom-then-go-away {
  from {
    opacity: 1;
    transform: translateY(100%);
  }
  20% {
    opacity: 1;
    transform: translateY(0);
  }
  80% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}

.appear-bottom-then-go-away {
  animation: appear-bottom-then-go-away 3s ease-in-out both;
}

@keyframes grow-width {
  from {
    width: 0;
  }
}

.grow-width {
  animation: grow-width 1s ease-in-out both;
}

.prose h1 > a,
.prose h2 > a,
.prose h3 > a,
.prose h4 > a {
  text-decoration: none;
}

.image-full-width {
  width: 100%;
}

.hidden {
  display: none;
}

// responsive hiding
.medium-down-only {
  display: none;
  @include medium {
    display: inherit;
  }
}
.medium-up-only {
  @include medium {
    display: none;
  }
}

.gap-1 {
  grid-gap: 0 1rem;
}
.gap-2 {
  grid-gap: 0 2rem;
}
.gap-3 {
  grid-gap: 0 3rem;
}
.gap-4 {
  grid-gap: 0 4rem;
}