style.sass

{{ $fontAwesomeVersion := site.Params.assets.fontAwesomeVersion }}
{{ $fontAwesomeUrl     := printf "https://use.fontawesome.com/releases/v%s/css/all.css" $fontAwesomeVersion }}
@charset "utf-8"
@import url("https://fonts.googleapis.com/icon?family=Titillium+Web:300,400,600,700|Inconsolata:300,400,600,700")
@import url("{{ $fontAwesomeUrl }}")

// Misc
$twitter-blue: #1da1f3

// TiKV variables
$tikv-red: #ed1a3b
$tikv-blue: #353558
$light-blue: #3D3FEA
$footer-hover-blue: #00AEEF

@import "bulma/sass/utilities/initial-variables"
@import "bulma/sass/utilities/functions"
@import "bulma/sass/utilities/derived-variables"

$colors: mergeColorMaps(("twitter-blue": ($twitter-blue, $white)), $colors)

@import "bulma/bulma"
@import "bulma/sass/grid/columns"

// Bulma variable overrides
$red: $tikv-red
$blue: $tikv-blue
$primary: $red
$secondary: #0D0F2C
$link: $red
$danger: $orange
$btn-blue-color: $light-blue
$family-sans-serif: "Titillium Web", BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
$family-monospace: "Inconsolata", monosapce
$notification-padding: 1rem 1rem
$navbar-dropdown-radius: none
$navbar-dropdown-boxed-shadow: none
$navbar-dropdown-arrow: $primary !important
$base-width: 112px

// customize font-size
$P1: 16px
$H0: 32px
$H3: 20px
$H4: 18px
$LH: 1.75

// customize color
$M2: #F7F8F9
$B3: #172D72



=logo($times)
  margin: 0 auto
  width: $times * $base-width

.is-home-logo
  +logo(1.8)

  +tablet
    margin-bottom: 1.5rem

  +touch
    margin-bottom: 2rem

  +mobile
    +logo(1.5)

.is-cncf-logo
  +logo(3)
  margin: 3rem auto

.is-footer-image
  +logo(1)
  margin: 1rem auto 1rem 0

  +mobile
    margin: 1rem auto

=branded-button($bgColor)
  border: none
  background-color: $bgColor
  color: white

  &:hover
    background-color: darken($bgColor, 5%)

@mixin is-customized-card()
  height: 100%
  box-shadow: none
  border-radius: 10px

  .card-header
    padding: 2rem
    font-size: $H3
    box-shadow: none

    .card-header-title
      padding: 0

    .card-header-icon
      padding: 0

  .card-content
    padding: 0 2rem 2rem

    a:hover
      color: $light-blue
      text-decoration: underline



a
  color: $light-blue

.docs-content
  padding-bottom: 8rem

.section-title
  margin-bottom: 3rem !important
  font-size: $H0

.homepage-hero
  background: url('/img/homepage/hero-bg.svg') no-repeat
  background-size: cover
  background-position: center

  +mobile
    padding: 4rem 1.5rem !important

  .title
    width: max-content
    padding: 1rem 1rem 1rem 0
    font-size: 36px
    color: #ffffff
    line-height: 1.7
    background: linear-gradient(90deg, rgba(43, 88, 186, 0), rgba(17, 68, 163, 0.8) 50%)

    +mobile
      margin-top: 1rem
      padding: 1rem 0rem
      font-weight: bold
      width: auto

  .button
    margin-top: 2rem
    font-size: $H3
    font-weight: bold
    color: #113F9C
    border-radius: 10px

.homepage-intro
  .desc
    font-size: $P1
    line-height: 1.75

  .columns
    align-items: start

  .scenario
    margin-top: 2.5rem

  .scenario,
  .desc
    a
      color: $light-blue

      &:hover
        text-decoration: underline

.homepage-why-tikv
  background-color: $M2

  .card
    @include is-customized-card

.homepage-tikv-users
  .columns.is-variable
    --columnGap: 4rem

    +mobile
      --columnGap: 3rem

  .column
    flex: none
    width: 20%
    padding: 5rem

    +touch
      width: 50%

  a, a:hover
    color: $light-blue

  .button
    margin: 4rem
    color: #ffffff
    border: none
    background-color: $btn-blue-color

.homepage-get-started
  background-color: $M2

  .card
    @include is-customized-card

    .card-header
      padding: 1rem 2rem
      background-color: $light-blue
      border-radius: 10px 10px 0 0

      .card-header-title
        color: #ffffff

    .card-content
      padding-top: 1.5rem
      line-height: 2

    a
      color: #2C2C2C

      &:hover
        color: $light-blue
        text-decoration: underline

.hero.is-primary
    background-color: $B3

.toc
  padding: 1rem 0 3rem 2rem

  li
    font-size: 1.1rem

    a
      color: #000

      &.is-active
        color: $light-blue
        font-weight: 700

      &:hover
        color: $light-blue


  ul
    list-style: none !important
    ul
      margin-left: .5rem

    li > a
      margin-left: 1.4rem

.section-toc
  padding: 1rem 0 3rem 0
  border-right: 1px solid $grey-light
  margin-right: 1rem

  li
    line-height: 125%
    font-size: 1.5rem
    padding-right: 1.5rem

    & + li
      margin-top: 1rem

    &.is-active
      border-right: 2px solid $grey-light

      a
        color: $tikv-blue
        font-weight: 700
.menu-label
  font-weight: 700
.menu-list li ul
  margin: 0

.content
  &.is-blog-content
    margin-bottom: 8rem

  figure
    margin: 0 auto

    +tablet
      width: 70%

    +mobile
      width: 100%

    figcaption
      margin-top: .5rem
      font-style: normal

  ol, ul
    li .highlight
      margin-bottom: 1rem

.footer
  hr
    margin: 1rem 0
    height: 1px
    background-color: $footer-hover-blue

  .align-item-centered
    align-items: flex-end

    +mobile
      text-align: center

  li
    padding: 6px 0

  &.is-dark
    background-color: $secondary

    a
      color: $white
      font-size: 1.1rem

      &:hover
        color: $footer-hover-blue



// Ensures sticky footer glued to the bottom of the page
.page
  display: flex
  flex-direction: column
  min-height: 100vh

  .main
    flex: 1

.is-navbar-version
  margin-left: 1rem
  background-color: $light-blue
  color: white
  border: 1px solid $light-blue
  padding: .25rem .5rem
  border-radius: 5px

  & + .navbar-dropdown
    display: block
    position: absolute
    top: 100%
    background: white

.has-dropdown
  .navbar-dropdown
    display: none

    &.is-active
      display: block !important

.is-hoverable
  .navbar-link::after
    display: none

    +mobile
      display: block

.navbar-link
  color: #2C2C2C
  font-weight: bold

  &:hover
    color: $light-blue

.navbar-dropdown
  border-top: none
.section
  padding: 4rem 1.5rem 6rem

  &.is-black
    background-color: $black

.is-home-page
  .notification
    margin: 4rem 0

    p
      font-weight: bold
      font-size: 1.5rem !important

    a.is-link
      color: #2E2FFF !important
      text-decoration: none !important

      &:hover
        text-decoration: underline !important

    .buttons
      margin-top: 2.5rem

.highlight
  overflow-x: scroll

.iframe-figure
  width: 100% !important

.iframe-container
  overflow: hidden
  /* 16:9 aspect ratio */
  padding-top: 56.25%
  position: relative

.iframe-container iframe
   border: 0
   height: 100%
   left: 0
   position: absolute
   top: 0
   width: 100%