Difference between revisions of "Template:Vilnius-Lithuania/CSS/Engineering"

 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
.contentBlock .content .downloadButton, .contentBlock .content .sectionButtons div, .contentBlock .content .prevButton,
+
body, html {
−
.contentBlock .content .nextButton, .calendarbutton {
+
   margin: 0;
−
   -moz-user-select: none;
+
   padding: 0;
−
   -webkit-user-select: none;
+
   color: #222222;
−
   -ms-user-select: none;
+
   font-family: "lato-regular";
−
   user-select: none;
+
 
}
 
}
  
−
.contentBlock .content .downloadButton, .contentBlock .content .sectionButtons div, .contentBlock .content .prevButton,
+
.introContainer {
−
.contentBlock .content .nextButton {
+
  height: 100vh;
 +
  width: 100%;
 +
  background-color: #121212;
 +
  position: fixed;
 +
  z-index: 2;
 +
}
 +
.introContainer .intro-section {
 +
  display: flex;
 +
  justify-content: center;
 +
  align-items: center;
 +
}
 +
.introContainer #engineering-cycle {
 +
  height: 100%;
 +
}
 +
.introContainer #engineering-cycle svg {
 +
  height: 70vh;
 +
  width: auto;
 +
  max-width: 80vw;
 +
  will-change: transform;
 +
}
 +
.introContainer #dtp-cycle svg {
 +
  height: 80vh;
 +
  width: auto;
 +
  will-change: transform;
 +
}
 +
.introContainer #dtp-cycle svg ellipse {
 
   cursor: pointer;
 
   cursor: pointer;
−
  transition: transform 0.3s;
 
 
}
 
}
−
.contentBlock .content .downloadButton:hover, .contentBlock .content .sectionButtons div:hover, .contentBlock .content .prevButton:hover,
+
.introContainer #dtp-cycle svg tspan {
−
.contentBlock .content .nextButton:hover {
+
   pointer-events: none;
−
   transform: translateY(-2px);
+
 
}
 
}
−
.contentBlock .content .downloadButton:active, .contentBlock .content .sectionButtons div:active, .contentBlock .content .prevButton:active,
+
.introContainer svg .A {
−
.contentBlock .content .nextButton:active {
+
  stroke: #6281ef;
−
   transform: translateY(2px);
+
}
 +
.introContainer svg .B {
 +
  fill: #121212;
 +
}
 +
.introContainer svg .C {
 +
  font-family: "montserrat-light", sans-serif;
 +
}
 +
.introContainer svg .D {
 +
  font-family: "montserrat-bold", sans-serif;
 +
}
 +
.introContainer svg .E {
 +
  fill: #fafafc;
 +
}
 +
.introContainer svg .F {
 +
  stroke-width: 5;
 +
}
 +
.introContainer svg .G {
 +
  font-size: 31px;
 +
}
 +
.introContainer svg .H {
 +
  font-weight: 300;
 +
}
 +
.introContainer svg .I {
 +
  stroke-linejoin: round;
 +
}
 +
.introContainer svg .J {
 +
  stroke-width: 9;
 +
}
 +
.introContainer svg .K {
 +
  fill: none;
 +
}
 +
.introContainer svg .L {
 +
  stroke: #fafafc;
 +
}
 +
.introContainer svg .M {
 +
  stroke-width: 3;
 +
}
 +
.introContainer svg .N {
 +
   font-size: 38px;
 
}
 
}
  
−
body, html {
+
.spacer {
−
   margin: 0;
+
   height: 100vh;
−
   padding: 0;
+
   background-color: #121212;
−
   color: #222222;
+
   position: absolute;
−
   font-family: "lato-regular";
+
   top: 100vh;
 +
  width: 100%;
 +
  z-index: 1;
 
}
 
}
  
−
.contentBlock {
+
main {
−
   width: 54vw;
+
  height: fit-content;
 +
  background-color: #fafafc;
 +
  position: absolute;
 +
  top: 200vh;
 +
   width: 100%;
 +
  z-index: 3;
 +
  font-family: "lato-light", sans-serif !important;
 
}
 
}
−
@media (max-width: 900px) {
+
main p b {
−
   .contentBlock {
+
  font-family: "lato-regular", sans-serif;
−
    margin-right: 0;
+
   color: #000;
−
    width: unset;
+
}
−
   }
+
main p a:not(.citation) {
 +
  text-decoration: none;
 +
  font-variant-position: normal;
 +
   color: #121212;
 +
  box-shadow: inset 0 -0.5em 0 -1px #fcbd1b;
 +
  transition: 0.3s ease-out;
 +
}
 +
main p a:not(.citation):hover {
 +
  box-shadow: inset 0 -1.2em 0 -1px #fcbd1b;
 
}
 
}
−
.contentBlock .content {
+
main section {
 
   display: flex;
 
   display: flex;
 +
  justify-content: center;
 
   flex-direction: column;
 
   flex-direction: column;
−
   align-items: stretch;
+
   align-items: center;
−
   min-height: 700px;
+
   width: calc(100% - 280px);
 +
  margin: 0 90px 0 190px;
 
}
 
}
−
@media (max-width: 900px) {
+
@media screen and (max-width: 767px) {
−
   .contentBlock .content {
+
   main section {
−
     margin: unset;
+
     width: 100vw;
−
     box-shadow: unset;
+
     margin: 0 auto;
−
    padding: 30px;
+
 
   }
 
   }
 
}
 
}
−
.contentBlock .content .heading {
+
main section h1 {
−
  font-size: 1.5rem;
+
   font-family: "montserrat-light", sans-serif;
−
   font-family: "montserrat-bold";
+
 
   text-transform: uppercase;
 
   text-transform: uppercase;
−
   text-align: center;
+
   font-size: 2.5em;
 
}
 
}
−
.contentBlock .content .heading:first-child {
+
main section .section-title h1 {
−
   margin-top: 28px;
+
   margin-block-end: 0em;
 +
  font-size: 3.5em;
 
}
 
}
−
.contentBlock .content .downloadButton {
+
@media screen and (max-width: 767px) {
−
  display: flex;
+
   main section .section-title h1 {
−
  align-items: center;
+
    font-size: 2em;
−
   justify-content: center;
+
   }
−
  align-self: center;
+
−
  color: #FAFAFC;
+
−
  background-color: #6281EF;
+
−
  font-family: "lato-heavy";
+
−
  font-size: 1.3rem;
+
−
   text-transform: uppercase;
+
−
  padding: 8px 52px;
+
−
  border-radius: 10px;
+
−
  margin: 16px 0 64px;
+
−
  box-shadow: 0 16px 32px -12px #6584ef;
+
−
  transition: box-shadow 0.3s, transform 0.3s;
+
−
  overflow: hidden;
+
 
}
 
}
−
.contentBlock .content .downloadButton:hover {
+
main section .section-title svg {
−
   box-shadow: 0 18px 40px -14px #6584ef;
+
   width: 100px;
 
}
 
}
−
.contentBlock .content .downloadButton::after {
+
main section .section-title .right {
−
  content: "PDF";
+
   display: block !important;
−
  color: transparent;
+
   padding: 100px 0 0 !important;
−
   display: block;
+
−
  background-color: rgba(0, 0, 0, 0.1);
+
−
   padding: inherit;
+
−
  position: absolute;
+
−
  opacity: 0;
+
−
  transition: opacity 0.3s;
+
−
  pointer-events: none;
+
 
}
 
}
−
.contentBlock .content .downloadButton:active::after {
+
main section .iteration-title {
−
   opacity: 1;
+
  font-family: "montserrat-black", sans-serif !important;
 +
  display: grid;
 +
  margin-block-start: 0em;
 +
  margin-block-end: 0em;
 +
  font-size: 2.3em;
 +
}
 +
@media screen and (max-width: 767px) {
 +
   main section .iteration-title {
 +
    font-size: 1.9em;
 +
    padding-top: 30px;
 +
  }
 
}
 
}
−
.contentBlock .content .sectionButtons {
+
main section .row {
 +
  display: flex;
 +
  width: 100%;
 +
}
 +
main section .row .left,
 +
main section .row .right {
 
   display: flex;
 
   display: flex;
−
  justify-content: stretch;
 
 
   align-items: center;
 
   align-items: center;
−
   margin: 20px -40px;
+
   padding: 20px 0px;
 
}
 
}
−
@media (max-width: 900px) {
+
main section .row .line-divider {
−
   .contentBlock .content .sectionButtons {
+
  display: flex;
−
     margin: 20px -30px;
+
  width: 20%;
 +
  justify-content: center;
 +
  align-items: center;
 +
}
 +
@media screen and (max-width: 767px) {
 +
   main section .row .line-divider {
 +
     width: 15%;
 +
    justify-content: initial;
 
   }
 
   }
 
}
 
}
−
.contentBlock .content .sectionButtons div {
+
main section .row .line-divider.nonCenter {
−
   padding: 16px 2px;
+
   align-items: initial;
−
  font-size: 1.4rem;
+
   z-index: 2;
−
  box-shadow: 0 4px 32px -12px #d5d5d5;
+
−
  flex-grow: 1;
+
−
  text-align: center;
+
−
  font-family: "montserrat-bold";
+
−
   background-color: #FAFAFC;
+
−
  transition: color 0.5s, background-color 0.5s, box-shadow 0.3s, transform 0.3s;
+
 
}
 
}
−
.contentBlock .content .sectionButtons div:hover {
+
main section .row .line-divider .line {
−
   box-shadow: 0 6px 40px -14px #d5d5d5;
+
   width: 7px;
 +
  background-color: #6281ef;
 +
  height: 100%;
 
}
 
}
−
@media (max-width: 1024px) {
+
@media screen and (max-width: 767px) {
−
   .contentBlock .content .sectionButtons div {
+
   main section .row .line-divider .line.mobile-curve {
−
     font-size: 1.1rem;
+
     width: 0;
 
   }
 
   }
 
}
 
}
−
@media (max-width: 900px) {
+
main section .row .line-divider .circle {
−
   .contentBlock .content .sectionButtons div {
+
  width: 35px;
−
    font-size: 0.9rem;
+
   height: 35px;
−
   }
+
  border-radius: 40px;
 +
  background-color: #FFD762;
 +
  position: absolute;
 +
  display: flex;
 +
  align-items: center;
 +
  justify-content: center;
 +
  font-family: "montserrat-black", sans-serif !important;
 +
   opacity: 0;
 
}
 
}
−
.contentBlock .content .sectionButtons div.active {
+
main section .row .line-divider .circle.top {
−
   color: #FAFAFC;
+
   margin-top: -15px;
−
   background-color: #6281EF;
+
   width: 20px;
−
   box-shadow: 0 4px 32px -12px #6584ef;
+
   height: 20px;
 +
  opacity: 1;
 
}
 
}
−
.contentBlock .content .sectionButtons div.active:hover {
+
@media screen and (max-width: 767px) {
−
  box-shadow: 0 6px 40px -14px #6584ef;
+
  main section .row .line-divider .circle.top {
 +
    visibility: hidden;
 +
  }
 
}
 
}
−
.contentBlock .content .weekName {
+
@media screen and (max-width: 767px) {
−
  font-family: "montserrat-bold";
+
  main section .row .line-divider .circle {
−
  font-size: 1.4rem;
+
    width: 8vw;
−
   margin: 10px 0;
+
    height: 8vw;
 +
    transform: translateX(55%);
 +
    font-family: "montserrat-light", sans-serif !important;
 +
   }
 
}
 
}
−
.contentBlock .content .weekName::after {
+
main section .row .left {
−
   content: "";
+
   width: 20%;
−
   display: block;
+
   justify-content: flex-end;
−
  margin: 12px 0;
+
   text-transform: uppercase;
−
  height: 3px;
+
−
  width: 160px;
+
−
   background-color: #6281EF;
+
 
}
 
}
−
.contentBlock .content .weekContent {
+
@media screen and (max-width: 767px) {
−
  font-size: 1.2rem;
+
  main section .row .left {
−
  line-height: 1.4;
+
    background-color: #121212;
 +
    color: #FAFAFC;
 +
    width: 15%;
 +
    justify-content: center;
 +
    z-index: 2;
 +
  }
 
}
 
}
−
.contentBlock .content .weekContent .subscript {
+
main section .row .left h1 {
−
   font-size: 0.3em;
+
   cursor: pointer;
−
  vertical-align: bottom;
+
 
}
 
}
−
.contentBlock .content .weekButtons {
+
@media screen and (max-width: 767px) {
−
   display: flex;
+
   main section .row .left h1 {
−
  flex-direction: row;
+
    text-orientation: sideways;
−
  justify-content: space-between;
+
   }
−
   flex-grow: 1;
+
−
  align-items: flex-end;
+
 
}
 
}
−
.contentBlock .content .prevButton,
+
main section .row .left .iteration-nr {
−
.contentBlock .content .nextButton {
+
   margin-block-end: 0em;
−
   margin-top: 32px;
+
   margin-block-start: 0em;
−
   cursor: pointer;
+
   font-size: 2.1vw;
−
  display: flex;
+
   text-align: right;
−
  flex-direction: row;
+
−
   align-items: center;
+
−
   font-family: "montserrat-bold";
+
 
}
 
}
−
@media (max-width: 480px) {
+
@media screen and (max-width: 767px) {
−
   .contentBlock .content .prevButton span,
+
   main section .row .left .iteration-nr {
−
.contentBlock .content .nextButton span {
+
 
     display: none;
 
     display: none;
 
   }
 
   }
 
}
 
}
−
.contentBlock .content .prevButton::before,
+
main section .row .left svg {
−
.contentBlock .content .nextButton::after {
+
   position: absolute;
−
   content: "";
+
   opacity: 0;
−
  display: block;
+
−
  background-image: url(https://static.igem.org/mediawiki/2020/7/7a/T--Vilnius-Lithuania--arrowNext2.svg);
+
−
  background-repeat: no-repeat;
+
−
  background-position: center;
+
−
  background-size: 91%;
+
−
  width: 64px;
+
−
  height: 40px;
+
−
   margin-top: 1px;
+
 
}
 
}
−
.contentBlock .content .nextButton span {
+
main section .row .left svg#click-info-desktop {
−
   text-align: end;
+
  width: 100px;
 +
  transform: translate(-170px, -44px);
 +
   text-transform: initial;
 
}
 
}
−
.contentBlock .content .prevButton::before {
+
main section .row .left svg.visible {
−
   transform: scaleX(-1);
+
   opacity: 1;
−
  margin-right: 8px;
+
 
}
 
}
−
.contentBlock .content .nextButton::after {
+
@media screen and (max-width: 767px) {
−
  margin-left: 8px;
+
  main section .row .left.mobile-curve {
 +
    border-top: solid 7px #6281ef;
 +
  }
 
}
 
}
−
.contentBlock .content a.button-wrapper {
+
main section .row .right {
−
   align-self: center;
+
   width: 60%;
 +
  display: block;
 
}
 
}
−
.contentBlock::after {
+
@media screen and (max-width: 767px) {
 +
  main section .row .right {
 +
    width: 70%;
 +
    padding: 0;
 +
  }
 +
}
 +
main section .row .right .iteration-nr {
 
   display: none;
 
   display: none;
−
  content: unset;
 
 
}
 
}
−
 
+
main section .row .right .iteration-nr.mobile {
−
@media (max-width: 900px) {
+
  cursor: pointer;
−
   main {
+
}
−
     padding-bottom: 300px;
+
@media screen and (max-width: 767px) {
−
     justify-content: center;
+
   main section .row .right .iteration-nr.mobile {
 +
     font-size: 1.3em;
 +
     display: block;
 +
    margin-top: 0.83em;
 +
    margin-bottom: 0.83em !important;
 
   }
 
   }
 
}
 
}
−
 
+
main section .row .right svg#click-info-mobile {
−
.sideBlockOverlay {
+
   width: 70px;
−
   position: fixed;
+
   transform: translate(140px, -50px);
−
   top: 0;
+
   position: absolute;
−
   left: 0;
+
−
  right: 0;
+
−
  bottom: 0;
+
−
  pointer-events: none;
+
 
   opacity: 0;
 
   opacity: 0;
−
  z-index: 19;
 
−
  background-color: rgba(0, 0, 0, 0.5);
 
−
  transition: opacity 0.5s;
 
 
}
 
}
−
@media (max-width: 900px) {
+
main section .row .right svg.visible {
−
   .sideBlockOverlay.open {
+
  opacity: 1 !important;
−
     opacity: 1;
+
}
−
     pointer-events: unset;
+
main section .row .right img {
 +
  width: 100%;
 +
  box-shadow: 1px 1px 10px #00000029;
 +
}
 +
main section .row .iteration-part {
 +
  text-align: right;
 +
}
 +
@media screen and (max-width: 767px) {
 +
   main section .row .iteration-part {
 +
     transform: rotate(-90deg);
 +
     margin-block-end: 0em;
 +
    margin-block-start: 0em;
 +
    z-index: 9;
 +
    margin-left: 80%;
 +
    color: #fafafc;
 
   }
 
   }
 
}
 
}
−
 
+
main section .row .iteration-desc b {
−
.sideBlock {
+
   font-family: "lato-regular", sans-serif !important;
−
   background-color: #222222;
+
−
  color: #FAFAFC;
+
−
  padding: 44px 34px 24px;
+
−
  box-sizing: border-box;
+
−
  margin: 200px 60px 0 50px;
+
−
  text-transform: unset;
+
−
  display: flex;
+
−
  flex-direction: column;
+
−
  align-items: stretch;
+
−
  min-width: 321px;
+
 
}
 
}
−
@media (max-width: 1024px) {
+
@media screen and (max-width: 767px) {
−
   .sideBlock {
+
   main section .row .iteration-desc {
−
     margin: 374px 40px 0 50px;
+
     padding: 10px 20px 10px 0;
 
   }
 
   }
 
}
 
}
−
@media (max-width: 900px) {
+
@media screen and (max-width: 767px) {
−
   .sideBlock {
+
   main section .row .box-mobile {
−
     position: fixed;
+
     width: calc(7.5vw - 3.5px);
−
    bottom: 0;
+
     position: relative;
−
    padding: 24px 24px 60px;
+
     display: flex;
−
    border-radius: 0;
+
     background-color: #121212;
−
     float: unset;
+
     width: 50%;
−
     margin: 0;
+
     height: 100%;
−
     z-index: 20;
+
−
     width: 100%;
+
−
     text-align: center;
+
−
    transition: transform 0.5s;
+
−
    top: unset;
+
−
    transform: translateY(100%);
+
−
    max-width: unset;
+
 
   }
 
   }
−
   .sideBlock.open {
+
}
−
     transform: translateY(0);
+
@media screen and (max-width: 767px) {
 +
   main section .row .box-mobile.mobile-curve {
 +
     border-top: solid 7px #6281ef;
 +
    border-top-right-radius: 37px;
 +
    border-right: solid 7px #6281ef;
 
   }
 
   }
 
}
 
}
−
.sideBlock .title {
+
main section .section-iteration .left {
−
   font-family: "montserrat-bold";
+
   padding: 10px 0;
−
  font-size: 1.3rem;
+
 
}
 
}
−
.sideBlock .title::after {
+
main section .section-iteration .right {
−
  content: "";
+
 
   display: block;
 
   display: block;
−
  margin: 6px 0;
 
−
  height: 2px;
 
−
  width: 100px;
 
−
  background-color: #6281EF;
 
 
}
 
}
−
@media (max-width: 900px) {
+
main section .accordion {
−
   .sideBlock .title {
+
   overflow: hidden;
−
    display: flex;
+
  max-height: 0;
−
    flex-direction: column;
+
   transition: max-height 0.2s ease-out;
−
    align-items: center;
+
−
   }
+
−
  .sideBlock .title::after {
+
−
    margin: 6px 0 16px;
+
−
    width: 100px;
+
−
  }
+
 
}
 
}
−
.sideBlock .months {
+
main section .accordion.visible {
−
   font-family: "lato-heavy";
+
   max-height: initial;
−
  display: grid;
+
−
  grid-template-columns: repeat(5, 1fr);
+
−
  margin-bottom: 20px;
+
−
  justify-items: center;
+
 
}
 
}
−
.sideBlock .months span {
+
main section .accordion.visible .circle {
−
   width: 39px;
+
   opacity: 1;
−
  padding: 4px;
+
−
  box-sizing: border-box;
+
−
  text-align: center;
+
−
  cursor: pointer;
+
 
}
 
}
−
.sideBlock .months span::after {
+
main section #separator {
−
   content: "";
+
   transition-duration: 0.2s;
−
  display: block;
+
   transition-timing-function: ease-out;
−
  height: 2px;
+
   height: fit-content;
−
  width: 28px;
+
−
  margin: 2px auto 0;
+
−
   background-color: transparent;
+
−
   transition: background-color 0.5s;
+
 
}
 
}
−
.sideBlock .months span.active::after, .sideBlock .months span:hover::after {
+
 
−
   background-color: #6281EF;
+
section .section-part {
 +
   width: 100%;
 
}
 
}
−
.sideBlock .days {
+
section .section-part .full-iteration {
−
   justify-items: stretch;
+
   width: 100%;
−
  align-items: stretch;
+
−
  display: grid;
+
−
  grid-template-columns: repeat(7, 1fr);
+
−
  grid-template-rows: repeat(6, 1fr);
+
 
}
 
}
−
.sideBlock .days span {
+
section .section-part .full-iteration:first-child .left,
−
  cursor: pointer;
+
section .section-part .full-iteration:first-child .right {
−
  text-align: center;
+
   padding-top: 30px;
−
   height: 22px;
+
 
}
 
}
−
.sideBlock .days span.dark {
+
section .section-part .full-iteration:last-child .left,
−
   color: #BBBBBB;
+
section .section-part .full-iteration:last-child .right {
 +
   padding-bottom: 30px;
 
}
 
}
−
.sideBlock .days span.darker {
+
section#overview {
−
  color: #666;
+
max-width: calc(100% - 330px);
−
  cursor: default;
+
margin: 0px auto 60px auto;
 +
width: 60vw;
 
}
 
}
−
.sideBlock .days .hover {
+
section#overview .overview-wrapper {
−
   pointer-events: none;
+
   padding: 20px 40px;
−
   margin-top: calc(-3px + 22px * 0);
+
   box-shadow: 0 0 5px #00000029;
−
  margin-left: -11px;
+
   box-sizing: border-box;
−
  padding: 2px;
+
padding: 40px 60px;
−
  width: calc(100% - 48px);
+
−
  height: 22px;
+
−
  background-color: #6281EF;
+
−
   mix-blend-mode: lighten;
+
−
  border-radius: 20px;
+
−
  position: absolute;
+
−
  transition: margin-top 0.3s, visibility 0.3s, opacity 0.3s;
+
 
}
 
}
−
.sideBlock .days .hover.invisible {
+
section#overview .overview-wrapper h2 {
−
   visibility: hidden;
+
   text-transform: uppercase;
−
   opacity: 0;
+
   font-family: "montserrat-bold", sans-serif;
 +
padding: 30px 0;
 +
font-size: 2.5em;
 
}
 
}
−
@media (max-width: 900px) {
+
@media screen and (max-width: 767px) {
−
   .sideBlock .days .hover {
+
   section#overview .overview-wrapper {
−
     margin-left: -3px;
+
     padding: 15px 30px;
 +
    box-shadow: none;
 
   }
 
   }
 
}
 
}
−
 
+
section#overview .overview-wrapper p {
−
.calendarbutton {
+
   font-family: "lato-light", sans-serif;
−
   font-family: "montserrat-bold";
+
font-size: 1.5em;
−
   display: none;
+
}
−
   position: fixed;
+
section#overview .overview-wrapper p b {
−
   bottom: -60px;
+
   font-family: "lato-regular", sans-serif;
−
   height: 60px;
+
}
−
   color: #FAFAFC;
+
@media screen and (max-width: 767px) {
 +
   section#overview {
 +
    width: 80vw;
 +
   }
 +
}
 +
section#overview button {
 +
  padding: 40px;
 +
   font-size: 3vh;
 +
   font-family: "montserrat-bold", sans-serif;
 
   text-transform: uppercase;
 
   text-transform: uppercase;
 +
  background-color: #6281ef;
 +
  border-radius: 80px;
 +
  border: none;
 +
  color: #fafafc;
 +
  margin: 20px;
 +
  cursor: pointer;
 +
  box-shadow: 0 16px 32px -12px #3658cf;
 +
  transition: 0.3s ease-out;
 +
  position: relative;
 +
  top: 0;
 +
}
 +
section#overview button:hover {
 +
  top: -5px;
 +
  box-shadow: 0 16px 32px -16px #3658cf;
 +
}
 +
 +
.milkWave svg {
 +
  margin-top: -60px;
 +
}
 +
.milkWave svg path {
 +
  fill: #fafafc;
 +
}
 +
 +
a.citation {
 +
  color: #2e64ec;
 +
  text-decoration: none;
 
   text-align: center;
 
   text-align: center;
−
  font-size: 1.3rem;
 
−
  width: 100%;
 
−
  box-sizing: border-box;
 
−
  padding: 16px;
 
 
   cursor: pointer;
 
   cursor: pointer;
−
   background-color: #222222;
+
   font-size: 0.6em;
−
   transition: 0.5s;
+
   vertical-align: super;
 
}
 
}
−
.calendarbutton.notshow {
+
 
−
   bottom: -60px;
+
.iteration-nr {
 +
   box-shadow: inset 0 0em 0 -1px #fcbd1b;
 +
  transition: 0.3s ease-out;
 
}
 
}
−
.calendarbutton.open {
+
.iteration-nr:hover {
−
   bottom: 0px;
+
   box-shadow: inset 0 -0.5em 0 -1px #fcbd1b;
 
}
 
}
−
@media (max-width: 900px) {
+
 
−
   .calendarbutton {
+
.references {
−
    display: block;
+
  font-size: 1.9rem;
−
    z-index: 21;
+
}
−
    bottom: 0px;
+
.references svg {
−
    transition: bottom 0.3s;
+
   max-width: 100px;
−
   }
+
}
 +
.references h3 {
 +
  margin-block-start: 0em;
 +
  font-size: 0.8em;
 +
  font-family: "montserrat-bold", sans-serif;
 +
}
 +
.references ol {
 +
  margin: initial;
 +
  padding-inline-start: 10px;
 +
}
 +
.references ol li {
 +
  font-size: 0.4em;
 +
   font-family: "lato-light", sans-serif;
 +
}
 +
.references ol li::marker {
 +
  color: initial;
 +
  font-family: "lato-light", sans-serif;
 +
  font-size: 1em;
 
}
 
}

Latest revision as of 03:10, 28 October 2020

body, html { 

 margin: 0;
 padding: 0;
 color: #222222;
 font-family: "lato-regular";

}

.introContainer { 

 height: 100vh;
 width: 100%;
 background-color: #121212;
 position: fixed;
 z-index: 2;

} .introContainer .intro-section { 

 display: flex;
 justify-content: center;
 align-items: center;

} .introContainer #engineering-cycle { 

 height: 100%;

} .introContainer #engineering-cycle svg { 

 height: 70vh;
 width: auto;
 max-width: 80vw;
 will-change: transform;

} .introContainer #dtp-cycle svg { 

 height: 80vh;
 width: auto;
 will-change: transform;

} .introContainer #dtp-cycle svg ellipse { 

 cursor: pointer;

} .introContainer #dtp-cycle svg tspan { 

 pointer-events: none;

} .introContainer svg .A { 

 stroke: #6281ef;

} .introContainer svg .B { 

 fill: #121212;

} .introContainer svg .C { 

 font-family: "montserrat-light", sans-serif;

} .introContainer svg .D { 

 font-family: "montserrat-bold", sans-serif;

} .introContainer svg .E { 

 fill: #fafafc;

} .introContainer svg .F { 

 stroke-width: 5;

} .introContainer svg .G { 

 font-size: 31px;

} .introContainer svg .H { 

 font-weight: 300;

} .introContainer svg .I { 

 stroke-linejoin: round;

} .introContainer svg .J { 

 stroke-width: 9;

} .introContainer svg .K { 

 fill: none;

} .introContainer svg .L { 

 stroke: #fafafc;

} .introContainer svg .M { 

 stroke-width: 3;

} .introContainer svg .N { 

 font-size: 38px;

}

.spacer { 

 height: 100vh;
 background-color: #121212;
 position: absolute;
 top: 100vh;
 width: 100%;
 z-index: 1;

}

main { 

 height: fit-content;
 background-color: #fafafc;
 position: absolute;
 top: 200vh;
 width: 100%;
 z-index: 3;
 font-family: "lato-light", sans-serif !important;

} main p b { 

 font-family: "lato-regular", sans-serif;
 color: #000;

} main p a:not(.citation) { 

 text-decoration: none;
 font-variant-position: normal;
 color: #121212;
 box-shadow: inset 0 -0.5em 0 -1px #fcbd1b;
 transition: 0.3s ease-out;

} main p a:not(.citation):hover { 

 box-shadow: inset 0 -1.2em 0 -1px #fcbd1b;

} main section { 

 display: flex;
 justify-content: center;
 flex-direction: column;
 align-items: center;
 width: calc(100% - 280px);
 margin: 0 90px 0 190px;

} @media screen and (max-width: 767px) { 

 main section {
   width: 100vw;
   margin: 0 auto;
 }

} main section h1 { 

 font-family: "montserrat-light", sans-serif;
 text-transform: uppercase;
 font-size: 2.5em;

} main section .section-title h1 { 

 margin-block-end: 0em;
 font-size: 3.5em;

} @media screen and (max-width: 767px) { 

 main section .section-title h1 {
   font-size: 2em;
 }

} main section .section-title svg { 

 width: 100px;

} main section .section-title .right { 

 display: block !important;
 padding: 100px 0 0 !important;

} main section .iteration-title { 

 font-family: "montserrat-black", sans-serif !important;
 display: grid;
 margin-block-start: 0em;
 margin-block-end: 0em;
 font-size: 2.3em;

} @media screen and (max-width: 767px) { 

 main section .iteration-title {
   font-size: 1.9em;
   padding-top: 30px;
 }

} main section .row { 

 display: flex;
 width: 100%;

} main section .row .left, main section .row .right { 

 display: flex;
 align-items: center;
 padding: 20px 0px;

} main section .row .line-divider { 

 display: flex;
 width: 20%;
 justify-content: center;
 align-items: center;

} @media screen and (max-width: 767px) { 

 main section .row .line-divider {
   width: 15%;
   justify-content: initial;
 }

} main section .row .line-divider.nonCenter { 

 align-items: initial;
 z-index: 2;

} main section .row .line-divider .line { 

 width: 7px;
 background-color: #6281ef;
 height: 100%;

} @media screen and (max-width: 767px) { 

 main section .row .line-divider .line.mobile-curve {
   width: 0;
 }

} main section .row .line-divider .circle { 

 width: 35px;
 height: 35px;
 border-radius: 40px;
 background-color: #FFD762;
 position: absolute;
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: "montserrat-black", sans-serif !important;
 opacity: 0;

} main section .row .line-divider .circle.top { 

 margin-top: -15px;
 width: 20px;
 height: 20px;
 opacity: 1;

} @media screen and (max-width: 767px) { 

 main section .row .line-divider .circle.top {
   visibility: hidden;
 }

} @media screen and (max-width: 767px) { 

 main section .row .line-divider .circle {
   width: 8vw;
   height: 8vw;
   transform: translateX(55%);
   font-family: "montserrat-light", sans-serif !important;
 }

} main section .row .left { 

 width: 20%;
 justify-content: flex-end;
 text-transform: uppercase;

} @media screen and (max-width: 767px) { 

 main section .row .left {
   background-color: #121212;
   color: #FAFAFC;
   width: 15%;
   justify-content: center;
   z-index: 2;
 }

} main section .row .left h1 { 

 cursor: pointer;

} @media screen and (max-width: 767px) { 

 main section .row .left h1 {
   text-orientation: sideways;
 }

} main section .row .left .iteration-nr { 

 margin-block-end: 0em;
 margin-block-start: 0em;
 font-size: 2.1vw;
 text-align: right;

} @media screen and (max-width: 767px) { 

 main section .row .left .iteration-nr {
   display: none;
 }

} main section .row .left svg { 

 position: absolute;
 opacity: 0;

} main section .row .left svg#click-info-desktop { 

 width: 100px;
 transform: translate(-170px, -44px);
 text-transform: initial;

} main section .row .left svg.visible { 

 opacity: 1;

} @media screen and (max-width: 767px) { 

 main section .row .left.mobile-curve {
   border-top: solid 7px #6281ef;
 }

} main section .row .right { 

 width: 60%;
 display: block;

} @media screen and (max-width: 767px) { 

 main section .row .right {
   width: 70%;
   padding: 0;
 }

} main section .row .right .iteration-nr { 

 display: none;

} main section .row .right .iteration-nr.mobile { 

 cursor: pointer;

} @media screen and (max-width: 767px) { 

 main section .row .right .iteration-nr.mobile {
   font-size: 1.3em;
   display: block;
   margin-top: 0.83em;
   margin-bottom: 0.83em !important;
 }

} main section .row .right svg#click-info-mobile { 

 width: 70px;
 transform: translate(140px, -50px);
 position: absolute;
 opacity: 0;

} main section .row .right svg.visible { 

 opacity: 1 !important;

} main section .row .right img { 

 width: 100%;
 box-shadow: 1px 1px 10px #00000029;

} main section .row .iteration-part { 

 text-align: right;

} @media screen and (max-width: 767px) { 

 main section .row .iteration-part {
   transform: rotate(-90deg);
   margin-block-end: 0em;
   margin-block-start: 0em;
   z-index: 9;
   margin-left: 80%;
   color: #fafafc;
 }

} main section .row .iteration-desc b { 

 font-family: "lato-regular", sans-serif !important;

} @media screen and (max-width: 767px) { 

 main section .row .iteration-desc {
   padding: 10px 20px 10px 0;
 }

} @media screen and (max-width: 767px) { 

 main section .row .box-mobile {
   width: calc(7.5vw - 3.5px);
   position: relative;
   display: flex;
   background-color: #121212;
   width: 50%;
   height: 100%;
 }

} @media screen and (max-width: 767px) { 

 main section .row .box-mobile.mobile-curve {
   border-top: solid 7px #6281ef;
   border-top-right-radius: 37px;
   border-right: solid 7px #6281ef;
 }

} main section .section-iteration .left { 

 padding: 10px 0;

} main section .section-iteration .right { 

 display: block;

} main section .accordion { 

 overflow: hidden;
 max-height: 0;
 transition: max-height 0.2s ease-out;

} main section .accordion.visible { 

 max-height: initial;

} main section .accordion.visible .circle { 

 opacity: 1;

} main section #separator { 

 transition-duration: 0.2s;
 transition-timing-function: ease-out;
 height: fit-content;

}

section .section-part { 

 width: 100%;

} section .section-part .full-iteration { 

 width: 100%;

} section .section-part .full-iteration:first-child .left, section .section-part .full-iteration:first-child .right { 

 padding-top: 30px;

} section .section-part .full-iteration:last-child .left, section .section-part .full-iteration:last-child .right { 

 padding-bottom: 30px;

} section#overview { max-width: calc(100% - 330px); margin: 0px auto 60px auto; width: 60vw; } section#overview .overview-wrapper { 

 padding: 20px 40px;
 box-shadow: 0 0 5px #00000029;
 box-sizing: border-box;

padding: 40px 60px; } section#overview .overview-wrapper h2 { 

 text-transform: uppercase;
 font-family: "montserrat-bold", sans-serif;

padding: 30px 0; font-size: 2.5em; } @media screen and (max-width: 767px) { 

 section#overview .overview-wrapper {
   padding: 15px 30px;
   box-shadow: none;
 }

} section#overview .overview-wrapper p { 

 font-family: "lato-light", sans-serif;

font-size: 1.5em; } section#overview .overview-wrapper p b { 

 font-family: "lato-regular", sans-serif;

} @media screen and (max-width: 767px) { 

 section#overview {
   width: 80vw;
 }

} section#overview button { 

 padding: 40px;
 font-size: 3vh;
 font-family: "montserrat-bold", sans-serif;
 text-transform: uppercase;
 background-color: #6281ef;
 border-radius: 80px;
 border: none;
 color: #fafafc;
 margin: 20px;
 cursor: pointer;
 box-shadow: 0 16px 32px -12px #3658cf;
 transition: 0.3s ease-out;
 position: relative;
 top: 0;

} section#overview button:hover { 

 top: -5px;
 box-shadow: 0 16px 32px -16px #3658cf;

}

.milkWave svg { 

 margin-top: -60px;

} .milkWave svg path { 

 fill: #fafafc;

}

a.citation { 

 color: #2e64ec;
 text-decoration: none;
 text-align: center;
 cursor: pointer;
 font-size: 0.6em;
 vertical-align: super;

}

.iteration-nr { 

 box-shadow: inset 0 0em 0 -1px #fcbd1b;
 transition: 0.3s ease-out;

} .iteration-nr:hover { 

 box-shadow: inset 0 -0.5em 0 -1px #fcbd1b;

}

.references { 

 font-size: 1.9rem;

} .references svg { 

 max-width: 100px;

} .references h3 { 

 margin-block-start: 0em;
 font-size: 0.8em;
 font-family: "montserrat-bold", sans-serif;

} .references ol { 

 margin: initial;
 padding-inline-start: 10px;

} .references ol li { 

 font-size: 0.4em;
 font-family: "lato-light", sans-serif;

} .references ol li::marker { 

 color: initial;
 font-family: "lato-light", sans-serif;
 font-size: 1em;

}