patek.cz/themes/patek/assets/css/main.scss

// Bulma customization

$primary: #0b2a37;
$link-light: #2EA1FF;

// /Bulma customization

// Bulma import
@import "./bulma/bulma.sass";
// /Bulma import


@import "logo-generator";

// Custom styles
a {
  transition: color 0.2s, background-color 0.2s;
}
.big-logo {
  font-size: 80px;
  color: $primary-invert;
  &:hover {
    color: darken($primary-invert, 10);
  }
}

#landing {
  background-color: $primary;
  color: $primary-invert;
  .patek-logo-top {
    text-align: center;
    font-size: 70px;
    padding-top: 40px;
    padding-bottom: 30px;
  }
  .intro {
    text-align: center;
    font-family: 'Fira Code';
    padding-bottom: 30px;
    font-size: 1.3em;
  }
  a {
    color: white !important;
    width: 100%;
  }
  .column {
    display: flex;
    justify-content: center;
  }
  .big-buttons {
    max-width: 62em;
    overflow: hidden;
  }
  .big-button {
    width: 100%;
    height: 12em;
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 1em;
    font-family: 'Fira Code';
    transition: transform 0.4s;
    border-radius: 5px;
    font-weight: 500;
    max-width: 30em;
    @include mobile {
      font-size: 0.75em;
    }
    &:hover {
      transform: scale(1.02);
      cursor: pointer;
      color: white;
    }
    h1 {
      font-size: 4em;
      font-weight: 500;
      patek-logo {
        position: relative;
        top: -10px;
      }
    }
    .front, .back {
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      transition: opacity 0.4s, height 0.4s;
    }
    .front {
      height: 100%;
      opacity: 1;
    }
    .back {
      height: 0;
      opacity: 0;
    }
    &:hover, &:focus {
      .front {
        height: 0;
        opacity: 0;
      }
      .back {
        height: 100%;
        opacity: 1;
      }
    }
  }
}

.footer {
  background-color: $primary;
  color: $primary-invert;
  text-align: center;
  font-family: 'Fira Code';
  font-size: smaller;
  h2 {
    color: $primary-invert;
  }
  a {
    color: $link-light;
    &:hover {
      color: white;
    }
  }
  .social {
    a {
      color: white;
      &:hover {
        color: $link-light;
      }
    }
  }
}
.author-media {
  margin-bottom: 15px;
  flex-wrap: wrap;
  .media-left {
     padding-bottom: 1em;
  }
  .media-content {
    overflow: hidden;
  }
}

.pageTitle.title {
  font-weight: 300;
  font-size: 40px;
  margin-bottom: 10px;
}
.column .pageTitle.title {
  font-size: 30px;

}
.pageHeader {
  margin-bottom: 40px;
}
h1,h2,h3,h4,h5,h6,.title {
  font-weight: 300;
}
h2 a {
  color: $text;
}
.box h2 a {
  color: $link;
  &:hover {
    color: $link-hover;
  }
}
.separateWithCommas + .separateWithCommas:before {
  content: ", ";
}
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6, .content .title {
  font-weight: 300;
  padding-top: 60px;
  margin-top: calc(1.1428em - 60px) !important;
  &:first-child {
    margin-top: -60px !important;
  }
}
.header-link {
  margin-right: 0.3em;
  color: $link;
}
#content.dark-mode {
  &, .box, .card, .card .navbar, .card .label, input, button:not(.is-primary) {
    background-color: $black-ter;
    color: white;
    a {
      color: $link-light;
      &:hover {
        color: white !important;
      }
    }
  }
  h1, h2, h3, h4, h5, h6, ::placeholder {
    color: white;
  }
  .container > .pageHeader > h2.pageTitle.title > a {
    color: white;
  }
  strong, b {
    color: white;
  }
  button svg path {
    fill: white;
  }
  .pagination-link {
    color: white;
    &.is-current {
      color: black;
      background-color: $link-light;
    }
  }
  .has-text-grey {
    color: $grey-light !important;
  }

}
#content {
  min-height: 90vh;
}
.logo404 {
  font-size: 150px;
}
@include mobile {
  .logo404 {
    font-size: 95px;
  }
}
// "Stolen" from my own code for gbl.cz:
@include desktop {
  .navbar-item {
    &.is-active .navbar-dropdown, &.is-hoverable .navbar-dropdown {
      display: block;
      visibility: hidden;
      filter: alpha(opacity=0);
      opacity: 0;
      -webkit-transition: 400ms ease;
      -moz-transition: 400ms ease;
      -o-transition: 400ms ease;
      transition: 400ms ease;
    }

    &.is-hoverable:hover .navbar-dropdown {
      opacity: 1;
      filter: alpha(opacity=100);
      visibility: visible;
    }
  }
}
// /Stolen
.is-construction {
  position: relative;
  padding: 12px 0;
  text-align: center;
  background-color: yellow;
  color: black;
  font-family: 'Fira Code';
  &:before, &:after {
    content: '';
    position: absolute;
    display: block;
    height: 12px;
    width: 100%;
    background: repeating-linear-gradient(
        -45deg,
        black,
        black 12px,
        yellow 10px,
        yellow 23px
    );
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-bottom: 0;
  }
  &:before {
    top: 0;
  }
  &:after {
    bottom: 0;
  }
}
.sponsors {
  padding-top: 30px;
}
.sponsor {
  display: flex;
  justify-content: center;
  a {
    display: flex;
    transition: transform 0.4s;
    &:hover {
      transform: scale(1.07);
    }
  }
  &:not(:last-child) {
    margin-right: 1rem;
  }
}
@include desktop {
  .content img {
    max-height: 30rem;
  }
}
.has-margin-bottom-1em {
  margin-bottom: 1em;
}

patek-logo {
  // Fallback in case CustomElements or JS aren't available.
  font-family: 'Fira Code', monospace;
  font-weight: bold;
}

.has-text-grey {
  // To make the color constrast enought with white to pass the WCAG AA requirements
  color: #737373 !important;
}
// /Custom styles

.patek-logo-top {
  position: relative;
}
.patek-logo-top .online-notice {
  white-space: nowrap;
  position: absolute;
  display: inline-block;
  font-size: 2rem;
  padding: 0px 5px;
  border-radius: 3px;
  background-color: red;
  font-family: 'Fira Code', monospace;
  transform: rotate(-27deg) translate(-190px, -50px);
}