Team:Aalto-Helsinki

  • {
 margin: 0px;
 padding: 0px;
 box-sizing: border-box;

}

/* NAVIGATION STYLING */

.navbar {

 display: flex;
 flex-direction: column;
 position: fixed;
 height: 100vh;
 width: 15vw;
 font-family: "Graphie", sans-serif;
 font-size: 1.1em;
 background-color: rgb(255, 255, 255, 0.5);

}

.logo {

 display: flex;
 height: 6vh;
 width: 6vw;
 padding-left: 1.5vw;
 margin-top: 5vh;
 position: absolute;

}

.navigation {

 display: flex;
 flex-direction: column;
 position: fixed;
 justify-content: center;
 align-items: left;
 text-align: left;
 height: 100vh;
 width: 15vw;
 z-index: 2;

}

.navigation a {

 text-decoration: none;
 font-size: 0.8em;
 font-weight: 600;
 color: black;

}

.navigation a:hover {

 color: grey;

}

.navigation button {

 background: none;
 border: none;
 cursor: pointer;
 font-size: 1.1em;
 font-family: "roc-grotesk-wide", sans-serif;
 height: 6vh;
 font-weight: 450;

}

/*

.projects {

 position: relative;
 display: flex;
 flex-direction: row;
 width: 30vw;

}

.projects ul {

 top: 0;
 margin-left: 15vw;
 font-size: 1.4em;
 position: fixed;
 list-style: none;
 opacity: 1;
 width: 15vw;
 height: 100vh;
 text-align: left;
 pointer-events: none;
 background-color: rgb(192, 190, 190, 0.5);

}

.projects li {

 height: 7.5vh;
 margin-left: 3vw;

}

.projects button:focus + ul {

 opacity: 1;
 pointer-events: all;
 transition: 0.4s ease;

}

  • /

.slider {

 display: flex;
 flex-direction: column;
 position: absolute;
 justify-content: center;
 align-items: center;
 text-align: left;
 height: 100vh;
 width: 15vw;
 margin-left: 15vw;
 background-color: rgb(230, 230, 230, 0.4);
 font-family: "roc-grotesk-wide", sans-serif;
 font-size: 1.1em;
 opacity: 0;

}

.slider li {

 list-style: none;
 height: 5vh;
 color: black;

}

.navigation #b1:hover + #slide1, .navigation #b2:hover + #slide2, .navigation #b3:hover + #slide3, .navigation #b4:hover + #slide4, .navigation #b5:hover + #slide5 {

 opacity: 1;
 transition: ease 1s;
 position: absolute;
 pointer-events: all;

}

  1. slide1:hover {
 opacity: 1;

}

.media {

 display: flex;
 flex-direction: column;
 justify-content: center;
 padding-top: 10vh;
 font-size: 0.6em;

}

.icon {

 display: flex;
 flex-direction: row;
 justify-content: center;

}

.media img {

 height: 6vh;
 width: 3vw;

}

.burger {

 display: none;
 cursor: pointer;

}

.burger div {

 width: 50px;
 height: 5px;
 background-color: black;
 margin: 5px;
 transition: all 0.3s ease;

}

.nav-active {

 transform: translateX(0%);

}

@keyframes navLinkFade {

 from {
   opacity: 0;
   transform: translateX(50px);
 }
 to {
   opacity: 1;
   transform: translateX(0px);
 }

}

.toggle .l1 {

 transform: rotate(-40deg) translate(-10px, 5px);

} .toggle .l2 {

 opacity: 0;

} .toggle .l3 {

 transform: rotate(40deg) translate(-10px, -5px);

}

/* MOBILE VERSION ADJUSTMENTS */

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

 body {
   overflow-x: hidden;
 }
 .nav-links {
   position: absolute;
   right: 0px;
   height: 100vh;
   top: 20vh;
   display: flex;
   flex-direction: column;
   width: 100%;
   transform: translateX(100%);
   background-color: black;
   transition: transform 0.5s ease-in;
 }
 .nav-links div {
   width: 80vw;
   justify-content: center;
   align-items: center;
 }
 .nav-links li {
   opacity: 0;
 }
 .nav-links a,
 .nav-links button {
   text-decoration: none;
   color: white;
 }
 .logo {
   margin-top: 100px;
   margin-left: 20px;
   position: relative;
   transform: rotate(0deg);
 }
 .project ul,
 .lab ul,
 .human-practices ul,
 .goals ul,
 .team ul,
 .medals ul {
   width: 80%;
   display: flex;
   color: white;
   height: 10vh;
   flex-direction: row;
   justify-content: space-around;
 }
 .burger {
   display: block;
 }

}

/* .loader {

 position: fixed;
 top: 0;
 left: 0;
 background-color: white;
 height: 100%;
 width: 100%;
 display: flex;
 justify-content: center;
 align-items: center;

}

.preload {

 animation: disappear 0.5s forwards;

}

@keyframes disappear {

 100% {
   opacity: 0;
   visibility: hidden;
 }

}

  • /

/* HEADER STYLING */

.header-container {

 display: flex;
 flex-direction: column;
 height: 100vh;
 width: 100vw;

}

.header-overlay {

 display: flex;
 flex-direction: column;
 height: 100vh;
 width: 85vw;
 margin-left: 15vw;
 justify-content: center;
 align-items: center;
 top: 0;
 left: 0;
 z-index: 0;

}

.header-content {

 padding-top: 15vh;
 width: 50vw;
 margin-left: 15vw;
 position: relative;
 color: black;
 font-family: "Graphie", sans-serif;

}

.header-content img {

 height: 50px;
 width: 50px;

}

.header-content h1 {

 font-size: 100px;
 margin-bottom: 0;

}

.header-content p {

 font-size: 1.5em;
 line-height: 2;
 display: block;
 padding-bottom: 2rem;
 font-family: "roc-grotesk-wide", sans-serif;

}

.fullscreen-video-wrap {

 position: absolute;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 overflow: hidden;
 z-index: -1;

}

.fullscreen-image {

 position: absolute;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 overflow: hidden;
 object-fit: contain;
 z-index: -1;

}

.fullscreen-image img {

 min-width: 100%;
 min-height: 100%;
 opacity: 0.5;

}

.fullscreen-video-wrap video {

 position: relative;
 width: 100%;
 min-height: 100%;
 top: 0;
 opacity: 0.4;
 object-fit: cover;

}

/*HOMEPAGE + LAYOUT STYLING*/

.fullpage {

 display: flex;
 flex-direction: column;
 width: 100vw;
 justify-content: space-evenly;

}

.homepage {

 display: flex;
 flex-direction: column;
 width: 85vw;
 margin-left: 15vw;
 align-items: center;

}

.home-content {

 display: flex;
 flex-direction: row;
 padding-top: 20vh;
 min-height: 100vh;
 width: 80vw;
 text-align: justify;
 align-items: center;
 font-size: 1.2em;
 line-height: 1.6em;
 font-family: "Graphie", sans-serif;

}

.promovideo {

 display: flex;
 flex-direction: column;
 align-items: center;
 padding-top: 20vh;
 padding-bottom: 20vh;
 font-family: "Graphie", sans-serif;
 font-size: 1.6em;

}

.promovideo video {

 width: 60vw;

}

.home-content h2 {

 text-align: left;
 font-size: 3.6em;
 font-family: "Graphie", sans-serif;
 font-weight: 900;
 color: rgb(0, 0, 0);
 position: relative;
 padding-bottom: 5vh;
 line-height: 2.1em;

}

.home-content h1 {

 text-align: left;
 font-family: "graphie", sans-serif;
 font-weight: 900;
 font-size: 2em;
 letter-spacing: 0.1vh;
 text-transform: uppercase;
 position: relative;
 line-height: 1em;

}

.home-info {

 width: 40vw;
 height: 100vh;
 justify-content: left;
 padding-right: 5vw;
 padding-left: 5vw;
 font-size: 1.2em;

}

.home-visuals {

 width: 40vw;
 height: 100vh;

}

.home-visuals video {

 width: 40vw;
 height: 50vh;
 position: absolute;
 opacity: 0.8;

}

  1. home2 h1 {
 text-align: right;
 font-size: 2em;

}

  1. home22 p {
 text-align: right;

}

.home-btn {

 display: block;
 background: white;
 border: 2px solid black;
 color: black;
 font-size: 1.2rem;
 font-weight: 900;
 padding: 1rem 2rem;
 text-decoration: none;
 width: 18vw;

}

/* BASIC PAGE LAYOUT */

.section {

 height: 100vh;
 width: 100vw;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 padding-bottom: 5vh;

}

  1. s1 {
 color: black;

}

.content {

 width: 70vw;
 margin-left: 15vw;
 font-size: 1.3em;
 line-height: 1.6em;
 font-family: "Helvetica", sans-serif;
 text-align: justify;

}

.content h2 {

 font-size: 1.4em;
 line-height: 2.5em;
 font-family: "roc-grotesk-wide", sans-serif;
 padding-bottom: 5vh;
 text-align: left;

}

.page-navigation {

 display: flex;
 flex-direction: row;
 margin: 0;
 padding: 0;
 position: fixed;
 top: 7.5vh;
 transform: translateX(-50%);
 right: 0;
 list-style: none;
 height: 10vh;

}

.page-navigation li {

 justify-content: center;
 width: 12px;
 height: 12px;
 background-color: white;
 border: 2px solid rgb(0, 0, 0);
 border-radius: 58%;
 margin-left: 150px;
 transition: all 0.3s;

}

.page-navigation li h1 {

 margin-top: 2vh;
 width: 60px;
 font-family: "Graphie", sans-serif;
 font-size: 0.7em;
 font-style: normal;
 overflow: visible;
 text-align: left;
 color: black;
 opacity: 0;
 transition: all 0.3s;

}

.page-navigation li:hover, .page-navigation li.selected {

 background-color: black;
 cursor: pointer;

}

.page-navigation:hover {

 background-color: rgb(255, 255, 255, 0.8);
 cursor: pointer;

}

.page-navigation:hover h1 {

 opacity: 1;

}

.page-navigation li h1:hover {

 opacity: 1;

}

/* SPONSORS CAROUSEL */

.bottom {

 display: flex;
 flex-direction: column;
 width: 100vw;
 height: 40vh;

}

.text {

 display: flex;
 flex-direction: column;
 width: 80vw;
 margin-left: 15vw;
 justify-content: center;
 align-items: center;
 font-family: "roc-grotesk-wide", sans-serif;
 font-size: 1.1em;
 color: rgb(153, 147, 147);

}

.carousel {

 display: flex;
 width: 80vw;
 height: 25vh;
 margin-left: 15vw;
 margin-bottom: 5vh;
 position: relative;
 background: white;
 overflow: hidden;
 padding-top: 5vh;

}

.sponsors {

 height: 30vh;
 display: flex;
 flex-direction: row;
 animation: slideshow 25s linear infinite;

}

.sponsors a img {

 height: 20vh;
 max-width: 30vw;
 padding-right: 1vw;
 padding-left: 1vw;

}

.sponsors-long {

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

}

.sponsors-long a img {

 position: relative;
 min-width: 20vw;
 height: 10vh;
 padding-bottom: 5vh;

}

@keyframes slideshow {

 0% {
   transform: translateX(0%);
 }
 100% {
   transform: translateX(-100%);
 }

}

/* TEAM PAGE STYLING */

.team-section {

 min-height: 100vh;
 width: 100vw;
 font-family: "roc-grotesk-wide", sans-serif;

}

.title {

 height: 30vh;
 width: 80vw;
 margin-left: 20vw;
 padding-top: 15vh;
 text-align: center;
 font-size: 2.5em;

}

.row {

 display: flex;
 flex-direction: row;
 height: 100vh;
 margin-left: 20vw;
 width: 80vw;
 padding-bottom: 10vh;
 padding-top: 10vh;

}

.bio {

 position: relative;
 align-items: center;
 width: 40vw;
 height: 80vh;
 text-align: center;

}

.bio-img img {

 width: 28vw;
 height: 80vh;
 box-shadow: 10px 10px grey;
 object-fit: cover;

}

.img-overlay {

 position: absolute;
 width: 28vw;
 height: 80vh;
 top: 0;
 background-color: rgb(0, 0, 0, 0.6);
 color: white;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 text-align: justify;
 opacity: 0;
 transition: opacity 0.25s;
 font-size: 1.2em;
 font-family: "Graphie", sans-serif;
 margin-left: 6vw;

}

.img-overlay:hover {

 opacity: 1;

}

.img-overlay p {

 width: 20vw;

}

.bio h4 {

 font-family: "roc-grotesk-wide", sans-serif;
 text-decoration: none;
 font-size: 1.7em;
 padding-top: 2vh;

}

.bio p {

 padding-top: 2vh;

}

Aalto-Helsinki Team Wiki