static/js/page/index/index.scss

@import '../../../css/_config';
@import '../../../css/_utils';
@import '../../../css/com/_bits/_pre';
@import '../../../css/com/_bits/_code';
@import '../../../css/com/_syntax-highlight/_syntax-highlight_dark';
@import "../../../js/components/-vars-spaces";
@import "../../../js/components/kto-text";

a, a:hover  {
  color: #7F52FF;
}

.page_restyled_v2,
.page_restyled_v2 body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  min-width: 305px;
}

.kto-heading {
  max-width: 960px;
}

.kto-overview-section {
  font-family: Inter, Arial, sans-serif;
  color: #27282C;

  padding-top: 62px;
}

.page__index-new .g-layout,
.page__index-new .g-footer-layout, {
  padding-left: var(--s-space);
  padding-right: var(--s-space);
  box-sizing: border-box;

  width: auto;
  min-width: auto;
  max-width: 1480px;

  @media (max-width: $breakpoint-xs) {
    padding-left: var(--s-space);
    padding-right: var(--s-space);
  }
}

.kto-heading_size_hero {
  margin-bottom: var(--m-space);
}

.kto-heading_size_h1 {
  margin-bottom: var(--m-space);

  @media(max-width: $breakpoint-xs) { margin-bottom: var(--s-space); }
}

.kto-heading_size_h4 {
  margin-bottom: var(--m-space);
  @media(max-width: $breakpoint-xs) { margin-bottom: var(--xs-space); }
}

.kto-overview-section_mode_dark {
  background-color: #27282C;
  color: #F4F4F4;
}

.kto-overview-section_mode_grey {
  background: #F5F5F5;
}

.kto-overview-section a.kto-button,
.kto-overview-section a.kto-button:hover,
.kto-overview-section a.kto-button:active,
.kto-overview-section a.kto-button:visited,
.kto-overview-section a.kto-button:any-link {
  text-decoration: none;
}

.kto-overview-section__title {
  font-weight: bold;
  font-size: 45px;
  line-height: 52px;
}

.kto-overview-section__title_size_s {
  margin-bottom: var(--m-space);
}

@import "kotlin-intro-section";
@import "kotlin-banner-section";
@import "kotlin-news-section";
@import "kotlin-jump-section";
@import "kotlin-code-examples-section";
@import "kotlin-why-section";
@import "kotlin-highlights-section";
@import "kotlin-stay-in-touch-section";

.kotlin-get-started-section {
  padding: var(--l-space) 0;
  color: #fff;
  background: #7f52ff radial-gradient(89.53% 145.96% at 0.34% 100.79%, #EF4857 0%, #DE4970 17.58%, #B44DB0 50.31%, #7F52FF 97.03%);
  background-color: #7f52ff;
}

.kotlin-get-started-section__title {
  padding: var(--xxl-space) 0 0;
}

.kotlin-get-started-section__text {
  margin: var(--m-space) 0 var(--l-space);
  font-size: 31px;
  line-height: 42px;
}

.kjq-tabs-tab__tabs {
  display: flex;

  overflow-x: scroll;

  .page_js_yes & {
    overflow: hidden;
  }

  -moz-user-select:none;
  -webkit-user-select:none;
  user-select:none;

  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

.kjq-tabs-tab__tabs-item {
  margin-right: var(--s-space);
  border-bottom: 2px solid rgba(39, 40, 44, 0.2);
  padding: var(--xs-space) 0;
  cursor: pointer;
}
.kjq-tabs-tab__tabs-item:hover {
  border-bottom-color: #27282C;
}

.kjq-tabs-tab__tabs-item_active,
.kjq-tabs-tab__tabs-item_active:hover {
  color: #7F52FF;
  border-color: #7F52FF;
  cursor: default;
}

.kjq-tabs-tab__tabs-item:last-of-type {
  margin-right: 0;
}

.kjq-tabs_inited .kjq-tabs-tab_inactive {
  display: none;
}

.kjq-tabs_size_s > .kjq-tabs-tab__tabs {
  @include kto-text;
  @include kto-text_size_s;

  margin-bottom: var(--s-space);
}

.kto-overview-youtube {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

.kto-overview-youtube > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.kotlin-banner-section_first {
  display: block;
  padding-bottom: var(--xxl-space);
}

#try-kotlin-examples {
  padding-top: 0;
  padding-bottom: var(--xxxl-space);
}

#kotlin-values-examples {
  display: none;
  padding-top: 0;
  padding-bottom: var(--xxxl-space);
}

.experiment2-kotlin-values {
  &__variant-1 {
    /** by default **/

  }

  &__variant-2 {
    #try-kotlin-examples {
      display: none;
    }

    #kotlin-values-examples {
      display: block;
    }
  }
}