learnk8s.io/assets/style.css

.trapezoid-1,
.trapezoid-2,
.trapezoidr-1 {
  position: relative;
  z-index: 0;
  background-color: transparent;
}

.trapezoid-1::after,
.trapezoid-2::after,
.trapezoidr-1::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  content: ' ';
  background-size: cover;
  background-repeat: no-repeat;
}

.trapezoid-2::after {
  background-position: left bottom;
  height: 155%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMinYMax slice' viewBox='0 0 100 200'%3E%3Cpolygon points='100 0 0 0 0 200 100 142 100 0' fill='%23569ad1'/%3E%3C/svg%3E");
}

.trapezoid-1::after {
  background-position: left bottom;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMinYMax slice' viewBox='0 0 100 200'%3E%3Cpolygon points='100 0 0 0 0 200 100 190 100 0' fill='%23569ad1'/%3E%3C/svg%3E");
}

.trapezoidr-1::after {
  background-position: left top;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMinYMax slice' viewBox='0 0 100 200'%3E%3Cpolygon points='100,4 0,0 0,200 100,200' fill='%23569ad1'/%3E%3C/svg%3E");
}

@media screen and (min-width: 64em) {
  .trapezoid-2-l {
    position: relative;
    z-index: 0;
    background-color: transparent;
  }
  .trapezoid-2-l::after {
    background-position: left bottom;
    height: 155%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMinYMax slice' viewBox='0 0 100 200'%3E%3Cpolygon points='100 0 0 0 0 200 100 142 100 0' fill='%23569ad1'/%3E%3C/svg%3E");
  }
}

.triangle-1 {
  position: relative;
  z-index: 1;
}

.triangle-1::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-position: right bottom;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon fill='%23569AD1' height='100px' width='100px' points='0,100 100,0 100,100'/%3E%3C/svg%3E");
  top: 0;
  left: 0;
}

/* RATIO IS WIDTH * 0.1 */
.i-medium-cargo {
  width: 15rem;
  height: 0;
  padding-bottom: 80%;
}
.i-loading-cargos {
  width: 35rem;
  height: 0;
  padding-bottom: 100%;
}
.i-training {
  width: 35rem;
  height: 0;
  padding-bottom: 100%;
}
.i-together {
  width: 17.5rem;
  height: 0;
  padding-bottom: 154.28%;
}
.i-containers {
  width: 20rem;
  height: 0;
  padding-bottom: 46.67%;
}
.i-cat-and-dog {
  width: 13rem;
  height: 0;
  padding-bottom: 84.61%;
}
.i-whiteboard {
  width: 10rem;
  height: 0;
  padding-bottom: 148.75%;
}
.i-team {
  width: 15rem;
  height: 0;
  padding-bottom: 100%;
}
.i-small-cargo {
  width: 11rem;
  height: 0;
  padding-bottom: 81.82%;
}
.i-more-cargo-loading {
  width: 11rem;
  height: 0;
  padding-bottom: 63.07%;
}
.i-cloud-providers {
  width: 3rem;
  height: 0;
  padding-bottom: 75%;
}
.i-rocks {
  width: 19em;
  height: 0;
  padding-bottom: 100%;
}
.i-academy {
  width: 35em;
  height: 0;
  padding-bottom: 100%;
}
.i-nope {
  width: 20em;
  height: 0;
  padding-bottom: 100%;
}
.i-onfire {
  width: 30em;
  height: 0;
  padding-bottom: 100%;
}
/* END RATIO */

.reverse-dim {
  opacity: 0.7;
  transition: opacity 0.5 ease-in;
}
.reverse-dim:hover {
  opacity: 1;
}

.illustration-containers {
  left: -100%;
  bottom: 6em;
}

.illustration {
  width: 20rem;
}

.absolute-center {
  margin-left: 50%;
  transform: translateX(-50%);
}

.ribbon,
.ribbon-module {
  position: relative;
}

.ribbon-module::after,
.ribbon::after {
  position: absolute;
  top: -1em;
  left: -2em;
  content: 'NEW!';
  background-color: #ff4136;
  color: white;
  padding: 0.125em;
  transform: rotate(-25deg);
  font-weight: bold;
  border-radius: 0.125em;
}

.ribbon-module::after {
  top: 0;
  left: 0;
}

@media screen and (min-width: 32em) {
  .illustration {
    width: 25rem;
  }
}

@media screen and (min-width: 64em) {
  .illustration {
    width: 40rem;
  }
}

.module .details.toggle-collapse {
  height: 0;
  max-height: 0;
  overflow: hidden;
}

.controls .close {
  display: inline-block;
}

.controls .open {
  display: none;
}

.module .controls.toggle-collapse .close {
  display: none;
}
.module .controls.toggle-collapse .open {
  display: inline-block;
}

.events .europe,
.events .america,
.events .asia,
.events .australia {
  display: none;
}

#america:checked ~ .legend .america,
#all:checked ~ .legend .all,
#europe:checked ~ .legend .europe,
#asia:checked ~ .legend .asia,
#australia:checked ~ .legend .australia {
  font-weight: bold;
  color: white;
  background-color: #3a89c9;
  border-bottom-color: #19507c;
}

#all:checked ~ .events li,
#america:checked ~ .events .america,
#europe:checked ~ .events .europe,
#asia:checked ~ .events .asia,
#australia:checked ~ .events .australia {
  display: block;
}

.translate-100-100 {
  transform: translate(100%, 100%);
}

.restart {
  border-style: solid;
  border-width: 1px;
  display: inline-block;
  font-size: 0.75rem;
  border-color: #00449e;
  color: #00449e;
  border-radius: 0.125rem;
  cursor: pointer;
}
.restart span {
  display: inline-block;
  text-transform: uppercase;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.restart.inactive {
  border-color: #aaa;
  color: #aaa;
}

@media screen and (min-width: 32em) {
  .restart {
    position: absolute;
    bottom: 2rem;
    left: 0;
  }
}

.table th:empty {
  background: none;
}

.more-content {
  position: relative;
}

.more-content::after {
  content: ' ';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 5%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.19791666666666663) 100%);
}

@media screen and (min-width: 64em) {
  .more-content {
    position: static;
  }
  .more-content::after {
    position: static;
    height: 0;
    background: none;
    width: 0;
  }
}

@media screen and (max-width: 64em) {
  #main-menu .reveal {
    display: none;
    background-color: #001b44;
  }

  #main-menu:target .reveal {
    display: inherit;
  }
}

.hamburger-icon {
  position: relative;
  display: inline-block;
  width: 1.625em;
  height: 0.213em;
  background: #fff;
  border-radius: 0.2rem;
}

.hamburger-icon::before,
.hamburger-icon::after {
  content: '';
  position: absolute;
}

.hamburger-icon::before,
.hamburger-icon::after {
  width: 1.625em;
  height: 0.213em;
  background: #fff;
}

.hamburger-icon::before {
  top: -0.625em;
}

.hamburger-icon::after {
  bottom: -0.625em;
}

.x-icon {
  position: relative;
  display: inline-block;
  width: 1.625em;
  height: 0.213em;
}

.x-icon::before,
.x-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -0.106em;
}

.x-icon::before,
.x-icon::after {
  width: 1.625em;
  height: 0.213em;
  background: #fff;
}

.x-icon::before {
  transform: rotate(45deg);
}

.x-icon::after {
  transform: rotate(-45deg);
}
/* <best practices> */
.tick-checkbox:checked {
  background: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzAgMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iIzNCREJCOCIgZmlsbC1ydWxlPSJldmVub2RkIj48Y2lyY2xlIGZpbGwtb3BhY2l0eT0iLjIiIGN4PSIxNSIgY3k9IjE1IiByPSIxNSIvPjxwYXRoIGQ9Ik0yMi42MSAxMi4xMTZjMCAuMjM1LS4wOTQuNDctLjI2My42NGwtOC4wOTkgOC4wOThhLjkxMy45MTMgMCAwIDEtMS4yOCAwbC00LjY5LTQuNjlhLjkxMy45MTMgMCAwIDEgMC0xLjI4bDEuMjgtMS4yOGEuOTEzLjkxMyAwIDAgMSAxLjI4MSAwbDIuNzcgMi43NzcgNi4xNzctNi4xODZhLjkxMy45MTMgMCAwIDEgMS4yOCAwbDEuMjggMS4yOGMuMTcuMTcuMjY1LjQwNS4yNjUuNjR6Ii8+PC9nPjwvc3ZnPg==');
  border: none;
}
.tick-checkbox:checked ~ span {
  text-decoration: line-through;
  color: lightgray;
}
/* RESPONSIVE ARROWS */
.arr-right {
  border: solid currentColor;
  border-width: 0 0.2em 0.2em 0;
  display: inline-block;
  padding: 0.4em;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.arr-left {
  border: solid currentColor;
  border-width: 0 0.2em 0.2em 0;
  display: inline-block;
  padding: 0.4em;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
.arr-up {
  border: solid currentColor;
  border-width: 0 0.2em 0.2em 0;
  display: inline-block;
  padding: 0.4em;
  transform: rotate(-135deg) translate(-0.2em, -0.2em);
  -webkit-transform: rotate(-135deg) translate(-0.2em, -0.2em);
}
.arr-down {
  border: solid currentColor;
  border-width: 0 0.2em 0.2em 0;
  display: inline-block;
  padding: 0.4em;
  transform: rotate(45deg) translate(-0.2em, -0.2em);
  -webkit-transform: rotate(45deg) translate(-0.2em, -0.2em);
}
/* </best practices> */

.new-hero {
  border-bottom-right-radius: 80% 36%;
  border-bottom-left-radius: 0% 52%;
  background: linear-gradient(180deg, hsl(206.79999999999995, 57.2%, 57.8%) 18%, hsl(206, 56%, 50%) 72%);
}

/* slides */
input[type='checkbox']:checked ~ .checked-reveal {
  display: block;
}
input[type='checkbox']:checked ~ .checked-hide {
  display: none;
}
input[type='radio']:checked ~ .checked-reveal {
  display: block;
}

.pagination-icon {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 0.125rem;
  display: inline-block;
  width: 0.4rem;
}

.numbered {
  counter-reset: my-awesome-counter;
}
.numbered li {
  counter-increment: my-awesome-counter;
}
.numbered li::before {
  content: counter(my-awesome-counter);
  background: #662974;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  line-height: 2rem;
  color: white;
  text-align: center;
  margin-right: 0.5rem;
  font-weight: bold;
  float: left;
}
.feedback {
  column-count: 1;
}
@media screen and (min-width: 32em) and (max-width: 64em) {
  .feedback {
    column-count: 2;
  }
}
@media screen and (min-width: 64em) {
  .feedback {
    column-count: 4;
  }
}

.table-label::before {
  content: attr(data-label) ': ';
  font-weight: bold;
}
@media screen and (min-width: 32em) {
  .table-label::before {
    content: '';
  }
}