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

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;

}