m |
m |
||
(20 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
− | main .instructorList .arrowMore { | + | .introContainer .memberDiv .memberName > a, main .instructorList .arrowMore, #bodyContent .instructor .instructorName a { |
cursor: pointer; | cursor: pointer; | ||
transition: transform 0.3s; | transition: transform 0.3s; | ||
} | } | ||
− | main .instructorList .arrowMore:hover { | + | .introContainer .memberDiv .memberName > a:hover, main .instructorList .arrowMore:hover, #bodyContent .instructor .instructorName a:hover { |
transform: translateY(-2px); | transform: translateY(-2px); | ||
+ | } | ||
+ | .introContainer .memberDiv .memberName > a:active, main .instructorList .arrowMore:active, #bodyContent .instructor .instructorName a:active { | ||
+ | transform: translateY(2px); | ||
} | } | ||
Line 16: | Line 19: | ||
.introContainer { | .introContainer { | ||
flex-direction: column-reverse; | flex-direction: column-reverse; | ||
− | justify-content: | + | justify-content: center; |
− | align-items: | + | align-items: center; |
− | + | height: calc(100vh + 8vw); | |
− | height: | + | background-image: url(https://static.igem.org/mediawiki/2020/7/7f/T--Vilnius-Lithuania--backgroundWaves.png); |
− | + | background-size: cover; | |
− | + | ||
− | + | ||
} | } | ||
@media (max-aspect-ratio: 1/1) { | @media (max-aspect-ratio: 1/1) { | ||
Line 34: | Line 35: | ||
.introContainer .heading { | .introContainer .heading { | ||
position: absolute; | position: absolute; | ||
− | font-size: | + | font-size: 12vh; |
− | top: | + | top: 6vw; |
+ | left: calc(24vw - 5vh); | ||
pointer-events: none; | pointer-events: none; | ||
font-family: "montserrat-black"; | font-family: "montserrat-black"; | ||
+ | color: #6281EF; | ||
text-align: center; | text-align: center; | ||
line-height: 1; | line-height: 1; | ||
+ | transition: left 0.3s cubic-bezier(0.5, 1, 0.89, 1), font-size 0.3s cubic-bezier(0.5, 1, 0.89, 1), top 0.3s cubic-bezier(0.5, 1, 0.89, 1); | ||
} | } | ||
.introContainer .heading div { | .introContainer .heading div { | ||
display: inline; | display: inline; | ||
} | } | ||
− | .introContainer .heading | + | .introContainer .heading.novideo { |
− | + | font-size: 10vh; | |
+ | left: 4vw; | ||
} | } | ||
.introContainer .heading.other { | .introContainer .heading.other { | ||
− | top: | + | top: 7vw; |
+ | left: calc(22vw - 5vh); | ||
+ | padding-top: unset; | ||
+ | color: transparent; | ||
+ | -webkit-text-stroke-width: 1px; | ||
+ | -webkit-text-stroke-color: #6281EF; | ||
+ | } | ||
+ | .introContainer .heading.other.novideo { | ||
+ | left: 2vw; | ||
} | } | ||
.introContainer .heading.other .invisible { | .introContainer .heading.other .invisible { | ||
Line 55: | Line 68: | ||
-webkit-text-stroke-color: transparent; | -webkit-text-stroke-color: transparent; | ||
} | } | ||
− | @media ( | + | @media (max-aspect-ratio: 1/1) { |
.introContainer .heading { | .introContainer .heading { | ||
− | font-size: | + | font-size: 10vw; |
+ | top: calc(43vh - 40vw); | ||
+ | left: 10vw; | ||
} | } | ||
.introContainer .heading br { | .introContainer .heading br { | ||
− | display: | + | display: none; |
+ | } | ||
+ | .introContainer .heading.novideo { | ||
+ | font-size: 8vw; | ||
+ | left: 18vw; | ||
+ | top: calc(6vh + 20px); | ||
+ | } | ||
+ | .introContainer .heading.other { | ||
+ | font-size: 10vw; | ||
+ | top: calc(43vh - 39vw); | ||
+ | left: 8vw; | ||
+ | } | ||
+ | .introContainer .heading.other.novideo { | ||
+ | font-size: 8vw; | ||
+ | left: 16vw; | ||
+ | top: calc(7vh + 20px); | ||
} | } | ||
} | } | ||
Line 68: | Line 98: | ||
background-image: unset; | background-image: unset; | ||
} | } | ||
− | .introContainer span { | + | .introContainer > span { |
position: absolute; | position: absolute; | ||
− | + | margin-bottom: 14vh; | |
− | + | left: calc(32vw - 5vh); | |
− | width: | + | width: calc(10vh + 36vw); |
− | height: | + | height: calc(10vh + 36vw); |
background-attachment: unset; | background-attachment: unset; | ||
background-position: center; | background-position: center; | ||
Line 80: | Line 110: | ||
align-self: center; | align-self: center; | ||
font-weight: bold; | font-weight: bold; | ||
+ | transition: left 0.3s, top 0.3s, width 0.3s, height 0.3s, transform 0.3s; | ||
} | } | ||
− | + | .introContainer > span video { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | .introContainer span video { | + | |
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
Line 95: | Line 119: | ||
border-radius: 1000px; | border-radius: 1000px; | ||
} | } | ||
− | .introContainer span.novideo video { | + | .introContainer > span.novideo { |
+ | left: 15vw; | ||
+ | width: calc(10vh + 30vw); | ||
+ | height: calc(10vh + 30vw); | ||
+ | } | ||
+ | .introContainer > span.novideo video { | ||
opacity: 0; | opacity: 0; | ||
} | } | ||
− | .introContainer span > div { | + | @media (max-aspect-ratio: 1/1) { |
+ | .introContainer > span { | ||
+ | top: 45vh; | ||
+ | transform: translateY(-50%); | ||
+ | left: 12vw; | ||
+ | width: 76vw; | ||
+ | height: 76vw; | ||
+ | } | ||
+ | .introContainer > span.novideo { | ||
+ | left: calc(35vw - 10vh); | ||
+ | top: calc(10vw + 20px); | ||
+ | padding-bottom: unset; | ||
+ | width: calc(20vh + 30vw); | ||
+ | height: calc(20vh + 30vw); | ||
+ | transform: translateY(0%); | ||
+ | } | ||
+ | } | ||
+ | .introContainer > span > div { | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
Line 109: | Line 155: | ||
border-radius: 1000px; | border-radius: 1000px; | ||
} | } | ||
− | .introContainer span > div.transition { | + | .introContainer > span > div.transition { |
opacity: 1; | opacity: 1; | ||
} | } | ||
Line 115: | Line 161: | ||
display: block; | display: block; | ||
position: absolute; | position: absolute; | ||
− | top: | + | margin-bottom: 14vh; |
− | left: | + | top: calc(35vh + 10vw); |
− | width: | + | left: 14vw; |
− | height: | + | width: 5vw; |
+ | height: 5vw; | ||
border: unset; | border: unset; | ||
opacity: 0; | opacity: 0; | ||
pointer-events: none; | pointer-events: none; | ||
background-image: url("https://static.igem.org/mediawiki/2020/8/89/T--Vilnius-Lithuania--play.svg"); | background-image: url("https://static.igem.org/mediawiki/2020/8/89/T--Vilnius-Lithuania--play.svg"); | ||
− | background-size: | + | background-size: 40% 40%; |
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
− | background-position: | + | background-position: 56% 50%; |
cursor: pointer; | cursor: pointer; | ||
padding: 0; | padding: 0; | ||
border-radius: 1000px; | border-radius: 1000px; | ||
background-color: #6281EF; | background-color: #6281EF; | ||
− | transition: | + | transition: 0.3s; |
} | } | ||
− | @media ( | + | @media (max-aspect-ratio: 1/1) { |
.introContainer button.introVideoPlay { | .introContainer button.introVideoPlay { | ||
− | top: | + | top: calc(40vw + 20px); |
− | left: calc( | + | left: calc(31.5vw - 10vh); |
+ | width: 5vh; | ||
+ | height: 5vh; | ||
} | } | ||
} | } | ||
Line 147: | Line 196: | ||
.introContainer .memberDiv { | .introContainer .memberDiv { | ||
position: absolute; | position: absolute; | ||
− | + | left: calc(50vw + 10vh); | |
− | width: | + | width: calc(40vw - 10vh); |
− | + | margin-bottom: 18vh; | |
color: #FAFAFC; | color: #FAFAFC; | ||
− | |||
transition: unset; | transition: unset; | ||
+ | font-family: "montserrat-light"; | ||
} | } | ||
.introContainer .memberDiv.transition { | .introContainer .memberDiv.transition { | ||
Line 164: | Line 213: | ||
.introContainer .memberDiv.alternative.transition { | .introContainer .memberDiv.alternative.transition { | ||
opacity: 1; | opacity: 1; | ||
− | |||
− | |||
− | |||
} | } | ||
.introContainer .memberDiv .memberName { | .introContainer .memberDiv .memberName { | ||
font-family: "montserrat-bold"; | font-family: "montserrat-bold"; | ||
− | font-size: | + | font-size: calc(2.2vw + 1vh); |
text-transform: uppercase; | text-transform: uppercase; | ||
+ | display: flex; | ||
+ | align-items: flex-end; | ||
+ | flex-wrap: wrap; | ||
} | } | ||
− | .introContainer .memberDiv . | + | .introContainer .memberDiv .memberName span { |
− | + | margin-right: calc((2.2vw + 1vh) * 0.5); | |
− | + | } | |
+ | .introContainer .memberDiv .memberName > a, #bodyContent .instructor .instructorName a { | ||
+ | display: inline-block; | ||
+ | width: calc((2.2vw + 1vh) * 0.8); | ||
+ | height: calc((2.2vw + 1vh) * 0.8); | ||
+ | padding-right: 0 !important; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2020/a/a8/T--Vilnius-Lithuania--iconLinkedIn.png) !important; | ||
+ | background-size: 100% !important; | ||
+ | background-position: center !important; | ||
+ | background-repeat: no-repeat; | ||
+ | margin-bottom: calc((2.2vw + 1vh) * 0.2); | ||
+ | } | ||
+ | |||
+ | #bodyContent .instructor .instructorName a { | ||
+ | background-image: url(https://static.igem.org/mediawiki/2020/d/de/T--Vilnius-Lithuania--iconLinkedInBlue.png) !important; | ||
+ | width: 1rem; | ||
+ | height: 1rem; | ||
+ | margin-left: 8px; | ||
+ | margin-bottom: 0; | ||
+ | } | ||
+ | .introContainer .memberDiv .memberRole, .introContainer .memberDiv .memberStudy { | ||
+ | font-size: calc(1.2vw + 1vh); | ||
text-transform: uppercase; | text-transform: uppercase; | ||
+ | margin: 8px 0 0; | ||
+ | } | ||
+ | .introContainer .memberDiv .memberStudy { | ||
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | .introContainer .memberDiv .memberQuestion { | ||
+ | font-family: "montserrat-bold"; | ||
+ | font-size: calc(1.2vw + 1vh); | ||
+ | margin-bottom: 8px; | ||
} | } | ||
.introContainer .memberDiv .memberFunFact { | .introContainer .memberDiv .memberFunFact { | ||
− | font-size: | + | font-size: calc(0.5vw + 1.5vh); |
− | + | ||
} | } | ||
− | @media (max-aspect-ratio: | + | .introContainer .memberDiv b { |
+ | font-family: "montserrat"; | ||
+ | box-shadow: inset 0 -0.5em 0 -1px #6281EF; | ||
+ | } | ||
+ | @media (max-aspect-ratio: 1/1) { | ||
.introContainer .memberDiv { | .introContainer .memberDiv { | ||
− | padding: 0 | + | padding: 0 10vw; |
left: 0; | left: 0; | ||
− | top: | + | top: 50vw; |
+ | display: flex; | ||
+ | flex-direction: column; | ||
+ | justify-content: center; | ||
+ | height: calc(100vh - 60vw); | ||
width: unset; | width: unset; | ||
+ | } | ||
+ | .introContainer .memberDiv .memberName { | ||
+ | font-size: 3.3vh; | ||
+ | } | ||
+ | .introContainer .memberDiv .memberName > a { | ||
+ | width: 2.6vh; | ||
+ | height: 2.6vh; | ||
+ | margin-bottom: 0.6vh; | ||
+ | } | ||
+ | .introContainer .memberDiv .memberRole { | ||
+ | font-size: 2.7vh; | ||
+ | } | ||
+ | .introContainer .memberDiv .memberQuestion, .introContainer .memberDiv .memberFunFact { | ||
+ | font-size: 2.2vh; | ||
} | } | ||
} | } | ||
.introContainer .bubbleList { | .introContainer .bubbleList { | ||
− | + | position: absolute; | |
+ | top: calc(90vh - 66px); | ||
width: 100%; | width: 100%; | ||
display: flex; | display: flex; | ||
flex-direction: row; | flex-direction: row; | ||
align-items: center; | align-items: center; | ||
− | justify-content: | + | justify-content: center; |
− | flex-wrap: | + | flex-wrap: wrap; |
box-sizing: border-box; | box-sizing: border-box; | ||
− | overflow-x: | + | overflow-x: hidden; |
overflow-y: hidden; | overflow-y: hidden; | ||
+ | padding: 16px; | ||
} | } | ||
.introContainer .bubbleList::after { | .introContainer .bubbleList::after { | ||
− | content: | + | content: unset; |
color: transparent; | color: transparent; | ||
} | } | ||
− | @media ( | + | @media (max-aspect-ratio: 121/66) { |
.introContainer .bubbleList { | .introContainer .bubbleList { | ||
− | + | max-width: calc(69vh + 120px); | |
− | flex-wrap: | + | top: calc(80vh - 96px); |
− | overflow-x: | + | } |
− | justify-content: | + | } |
+ | @media (max-aspect-ratio: 1/1) { | ||
+ | .introContainer .bubbleList { | ||
+ | max-width: unset; | ||
+ | flex-wrap: nowrap; | ||
+ | padding: unset; | ||
+ | overflow-x: auto; | ||
+ | justify-content: start; | ||
+ | top: calc(90vh - 40px); | ||
+ | padding: 0 8vw; | ||
} | } | ||
.introContainer .bubbleList::after { | .introContainer .bubbleList::after { | ||
− | content: | + | content: "."; |
} | } | ||
} | } | ||
− | .introContainer .bubbleList span { | + | .introContainer .bubbleList > span { |
cursor: pointer; | cursor: pointer; | ||
display: inline-flex; | display: inline-flex; | ||
Line 223: | Line 334: | ||
justify-content: center; | justify-content: center; | ||
background-position: center; | background-position: center; | ||
+ | background-size: cover; | ||
background-color: #6281EF; | background-color: #6281EF; | ||
− | border-radius: | + | border-radius: 1000px; |
− | + | ||
− | + | ||
− | + | ||
min-width: 10vh; | min-width: 10vh; | ||
min-height: 10vh; | min-height: 10vh; | ||
+ | max-width: 10vh; | ||
+ | max-height: 10vh; | ||
margin: 10px; | margin: 10px; | ||
transform: scale(1); | transform: scale(1); | ||
− | transition: transform 0.3s; | + | color: transparent; |
+ | transition: transform 0.3s, color 0.3s; | ||
+ | font-family: "montserrat-bold"; | ||
} | } | ||
− | .introContainer .bubbleList span:hover { | + | .introContainer .bubbleList > span > span { |
+ | font-size: 1rem; | ||
+ | z-index: 1; | ||
+ | pointer-events: none; | ||
+ | } | ||
+ | .introContainer .bubbleList > span::before { | ||
+ | content: ""; | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | background-color: transparent; | ||
+ | pointer-events: none; | ||
+ | transition: background-color 0.3s; | ||
+ | position: absolute; | ||
+ | border-radius: 1000px; | ||
+ | } | ||
+ | .introContainer .bubbleList > span:hover { | ||
transform: scale(1.2); | transform: scale(1.2); | ||
+ | color: #FAFAFC; | ||
+ | } | ||
+ | .introContainer .bubbleList > span:hover::before { | ||
+ | background-color: rgba(0, 0, 0, 0.4); | ||
} | } | ||
.introContainer .bubbleList::-webkit-scrollbar { | .introContainer .bubbleList::-webkit-scrollbar { | ||
Line 251: | Line 384: | ||
} | } | ||
.introContainer .suggestClick { | .introContainer .suggestClick { | ||
+ | position: absolute; | ||
z-index: 1; | z-index: 1; | ||
display: flex; | display: flex; | ||
align-items: flex-start; | align-items: flex-start; | ||
justify-content: center; | justify-content: center; | ||
− | |||
transition: opacity 0.5s, visibility 0.5s; | transition: opacity 0.5s, visibility 0.5s; | ||
} | } | ||
Line 263: | Line 396: | ||
} | } | ||
.introContainer .suggestClick span { | .introContainer .suggestClick span { | ||
+ | color: #FAFAFC; | ||
+ | margin-bottom: unset; | ||
border-radius: unset; | border-radius: unset; | ||
font-weight: unset; | font-weight: unset; | ||
Line 269: | Line 404: | ||
width: unset; | width: unset; | ||
height: unset; | height: unset; | ||
− | font-family: " | + | font-family: "montserrat-light"; |
− | font-size: | + | font-size: 2.5vh; |
align-self: start; | align-self: start; | ||
} | } | ||
Line 279: | Line 414: | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
background-position: center; | background-position: center; | ||
− | background-size: | + | background-size: 92%; |
− | width: | + | width: 8vh; |
− | height: | + | height: 8vh; |
margin-right: 8px; | margin-right: 8px; | ||
} | } | ||
Line 288: | Line 423: | ||
z-index: 2; | z-index: 2; | ||
width: 100%; | width: 100%; | ||
− | height: calc(100vh + | + | height: calc(100vh + 8vw); |
− | position: | + | top: 0; |
+ | position: absolute; | ||
content: ""; | content: ""; | ||
pointer-events: none; | pointer-events: none; | ||
Line 303: | Line 439: | ||
box-sizing: border-box; | box-sizing: border-box; | ||
flex-direction: column; | flex-direction: column; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2020/4/4b/T--Vilnius-Lithuania--backgroundWavesWhiteFade.png), url(https://static.igem.org/mediawiki/2020/8/82/T--Vilnius-Lithuania--backgroundWavesWhite.png); | ||
+ | background-repeat: no-repeat, repeat-y; | ||
+ | background-size: 100%, 100%; | ||
} | } | ||
main .heading2 { | main .heading2 { | ||
Line 308: | Line 447: | ||
font-size: 4vw; | font-size: 4vw; | ||
font-size: max(4vw, 18px); | font-size: max(4vw, 18px); | ||
− | line-height: | + | line-height: 0.8; |
text-transform: uppercase; | text-transform: uppercase; | ||
display: block; | display: block; | ||
Line 323: | Line 462: | ||
display: flex; | display: flex; | ||
flex-flow: row wrap; | flex-flow: row wrap; | ||
+ | align-items: center; | ||
justify-content: space-between; | justify-content: space-between; | ||
} | } | ||
Line 340: | Line 480: | ||
grid-template-rows: 10vw auto; | grid-template-rows: 10vw auto; | ||
width: 100%; | width: 100%; | ||
+ | column-gap: 4vw; | ||
} | } | ||
} | } | ||
main .instructorList .instructor img { | main .instructorList .instructor img { | ||
+ | object-fit: cover; | ||
width: 16vw; | width: 16vw; | ||
height: 16vw; | height: 16vw; | ||
border-radius: 1000px; | border-radius: 1000px; | ||
− | + | box-shadow: 4px 2px 20px 0px rgba(0, 0, 0, 0.4); | |
grid-column-start: 1; | grid-column-start: 1; | ||
grid-column-end: 2; | grid-column-end: 2; | ||
Line 365: | Line 507: | ||
width: 16vw; | width: 16vw; | ||
height: 16vw; | height: 16vw; | ||
− | |||
border-radius: 1000px; | border-radius: 1000px; | ||
background-color: #6281EF; | background-color: #6281EF; | ||
Line 416: | Line 557: | ||
grid-row-start: 3; | grid-row-start: 3; | ||
grid-row-end: 4; | grid-row-end: 4; | ||
+ | text-align: justify; | ||
} | } | ||
@media (max-width: 800px) { | @media (max-width: 800px) { | ||
Line 425: | Line 567: | ||
grid-row-end: 3; | grid-row-end: 3; | ||
} | } | ||
+ | } | ||
+ | main .instructorList .instructor .instructorAbout b { | ||
+ | font-family: "montserrat-light"; | ||
+ | box-shadow: inset 0 -0.5em 0 -1px #fcbd1b; | ||
} | } | ||
main .instructorList .arrowMore { | main .instructorList .arrowMore { | ||
Line 460: | Line 606: | ||
font-family: "montserrat-bold"; | font-family: "montserrat-bold"; | ||
font-size: 3vw; | font-size: 3vw; | ||
− | margin-left: | + | margin-left: 0vw; |
} | } | ||
@media (max-width: 800px) { | @media (max-width: 800px) { |
Latest revision as of 08:58, 18 December 2020
.introContainer .memberDiv .memberName > a, main .instructorList .arrowMore, #bodyContent .instructor .instructorName a {
cursor: pointer; transition: transform 0.3s;
} .introContainer .memberDiv .memberName > a:hover, main .instructorList .arrowMore:hover, #bodyContent .instructor .instructorName a:hover {
transform: translateY(-2px);
} .introContainer .memberDiv .memberName > a:active, main .instructorList .arrowMore:active, #bodyContent .instructor .instructorName a:active {
transform: translateY(2px);
}
body, html {
margin: 0; padding: 0; color: #222222; font-family: "lato-regular";
}
.introContainer {
flex-direction: column-reverse; justify-content: center; align-items: center; height: calc(100vh + 8vw); background-image: url(); background-size: cover;
} @media (max-aspect-ratio: 1/1) {
@-moz-document url-prefix() { .introContainer { min-height: 90vh; max-height: 90vh; } }
} .introContainer .heading {
position: absolute; font-size: 12vh; top: 6vw; left: calc(24vw - 5vh); pointer-events: none; font-family: "montserrat-black"; color: #6281EF; text-align: center; line-height: 1; transition: left 0.3s cubic-bezier(0.5, 1, 0.89, 1), font-size 0.3s cubic-bezier(0.5, 1, 0.89, 1), top 0.3s cubic-bezier(0.5, 1, 0.89, 1);
} .introContainer .heading div {
display: inline;
} .introContainer .heading.novideo {
font-size: 10vh; left: 4vw;
} .introContainer .heading.other {
top: 7vw; left: calc(22vw - 5vh); padding-top: unset; color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #6281EF;
} .introContainer .heading.other.novideo {
left: 2vw;
} .introContainer .heading.other .invisible {
color: transparent; -webkit-text-stroke-width: 0; -webkit-text-stroke-color: transparent;
} @media (max-aspect-ratio: 1/1) {
.introContainer .heading { font-size: 10vw; top: calc(43vh - 40vw); left: 10vw; } .introContainer .heading br { display: none; } .introContainer .heading.novideo { font-size: 8vw; left: 18vw; top: calc(6vh + 20px); } .introContainer .heading.other { font-size: 10vw; top: calc(43vh - 39vw); left: 8vw; } .introContainer .heading.other.novideo { font-size: 8vw; left: 16vw; top: calc(7vh + 20px); }
} .introContainer::before {
content: unset; display: none; background-image: unset;
} .introContainer > span {
position: absolute; margin-bottom: 14vh; left: calc(32vw - 5vh); width: calc(10vh + 36vw); height: calc(10vh + 36vw); background-attachment: unset; background-position: center; background-size: cover; overflow: hidden; align-self: center; font-weight: bold; transition: left 0.3s, top 0.3s, width 0.3s, height 0.3s, transform 0.3s;
} .introContainer > span video {
width: 100%; height: 100%; object-fit: cover; transition: opacity 400ms; border-radius: 1000px;
} .introContainer > span.novideo {
left: 15vw; width: calc(10vh + 30vw); height: calc(10vh + 30vw);
} .introContainer > span.novideo video {
opacity: 0;
} @media (max-aspect-ratio: 1/1) {
.introContainer > span { top: 45vh; transform: translateY(-50%); left: 12vw; width: 76vw; height: 76vw; } .introContainer > span.novideo { left: calc(35vw - 10vh); top: calc(10vw + 20px); padding-bottom: unset; width: calc(20vh + 30vw); height: calc(20vh + 30vw); transform: translateY(0%); }
} .introContainer > span > div {
width: 100%; height: 100%; position: absolute; top: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 400ms; border-radius: 1000px;
} .introContainer > span > div.transition {
opacity: 1;
} .introContainer button.introVideoPlay {
display: block; position: absolute; margin-bottom: 14vh; top: calc(35vh + 10vw); left: 14vw; width: 5vw; height: 5vw; border: unset; opacity: 0; pointer-events: none; background-image: url("https://static.igem.org/mediawiki/2020/8/89/T--Vilnius-Lithuania--play.svg"); background-size: 40% 40%; background-repeat: no-repeat; background-position: 56% 50%; cursor: pointer; padding: 0; border-radius: 1000px; background-color: #6281EF; transition: 0.3s;
} @media (max-aspect-ratio: 1/1) {
.introContainer button.introVideoPlay { top: calc(40vw + 20px); left: calc(31.5vw - 10vh); width: 5vh; height: 5vh; }
} .introContainer button.introVideoPlay.novideo {
pointer-events: unset; opacity: 1;
} .introContainer button.introVideoPlay:hover {
transform: scale(1.1);
} .introContainer .memberDiv {
position: absolute; left: calc(50vw + 10vh); width: calc(40vw - 10vh); margin-bottom: 18vh; color: #FAFAFC; transition: unset; font-family: "montserrat-light";
} .introContainer .memberDiv.transition {
opacity: 0; transition: opacity 400ms;
} .introContainer .memberDiv.alternative {
transition: opacity 400ms; opacity: 0;
} .introContainer .memberDiv.alternative.transition {
opacity: 1;
} .introContainer .memberDiv .memberName {
font-family: "montserrat-bold"; font-size: calc(2.2vw + 1vh); text-transform: uppercase; display: flex; align-items: flex-end; flex-wrap: wrap;
} .introContainer .memberDiv .memberName span {
margin-right: calc((2.2vw + 1vh) * 0.5);
} .introContainer .memberDiv .memberName > a, #bodyContent .instructor .instructorName a {
display: inline-block; width: calc((2.2vw + 1vh) * 0.8); height: calc((2.2vw + 1vh) * 0.8); padding-right: 0 !important; background-image: url() !important; background-size: 100% !important; background-position: center !important; background-repeat: no-repeat; margin-bottom: calc((2.2vw + 1vh) * 0.2);
}
- bodyContent .instructor .instructorName a {
background-image: url() !important; width: 1rem; height: 1rem; margin-left: 8px; margin-bottom: 0;
} .introContainer .memberDiv .memberRole, .introContainer .memberDiv .memberStudy {
font-size: calc(1.2vw + 1vh); text-transform: uppercase; margin: 8px 0 0;
} .introContainer .memberDiv .memberStudy {
margin-bottom: 20px;
} .introContainer .memberDiv .memberQuestion {
font-family: "montserrat-bold"; font-size: calc(1.2vw + 1vh); margin-bottom: 8px;
} .introContainer .memberDiv .memberFunFact {
font-size: calc(0.5vw + 1.5vh);
} .introContainer .memberDiv b {
font-family: "montserrat"; box-shadow: inset 0 -0.5em 0 -1px #6281EF;
} @media (max-aspect-ratio: 1/1) {
.introContainer .memberDiv { padding: 0 10vw; left: 0; top: 50vw; display: flex; flex-direction: column; justify-content: center; height: calc(100vh - 60vw); width: unset; } .introContainer .memberDiv .memberName { font-size: 3.3vh; } .introContainer .memberDiv .memberName > a { width: 2.6vh; height: 2.6vh; margin-bottom: 0.6vh; } .introContainer .memberDiv .memberRole { font-size: 2.7vh; } .introContainer .memberDiv .memberQuestion, .introContainer .memberDiv .memberFunFact { font-size: 2.2vh; }
} .introContainer .bubbleList {
position: absolute; top: calc(90vh - 66px); width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; box-sizing: border-box; overflow-x: hidden; overflow-y: hidden; padding: 16px;
} .introContainer .bubbleList::after {
content: unset; color: transparent;
} @media (max-aspect-ratio: 121/66) {
.introContainer .bubbleList { max-width: calc(69vh + 120px); top: calc(80vh - 96px); }
} @media (max-aspect-ratio: 1/1) {
.introContainer .bubbleList { max-width: unset; flex-wrap: nowrap; padding: unset; overflow-x: auto; justify-content: start; top: calc(90vh - 40px); padding: 0 8vw; } .introContainer .bubbleList::after { content: "."; }
} .introContainer .bubbleList > span {
cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background-position: center; background-size: cover; background-color: #6281EF; border-radius: 1000px; min-width: 10vh; min-height: 10vh; max-width: 10vh; max-height: 10vh; margin: 10px; transform: scale(1); color: transparent; transition: transform 0.3s, color 0.3s; font-family: "montserrat-bold";
} .introContainer .bubbleList > span > span {
font-size: 1rem; z-index: 1; pointer-events: none;
} .introContainer .bubbleList > span::before {
content: ""; display: block; width: 100%; height: 100%; background-color: transparent; pointer-events: none; transition: background-color 0.3s; position: absolute; border-radius: 1000px;
} .introContainer .bubbleList > span:hover {
transform: scale(1.2); color: #FAFAFC;
} .introContainer .bubbleList > span:hover::before {
background-color: rgba(0, 0, 0, 0.4);
} .introContainer .bubbleList::-webkit-scrollbar {
background-color: transparent; border-radius: 10px; height: 8px; width: 8px;
} .introContainer .bubbleList::-webkit-scrollbar-thumb {
background-color: #444444; border-radius: 10px;
} .introContainer .bubbleList::-webkit-scrollbar-corner {
background: transparent;
} .introContainer .suggestClick {
position: absolute; z-index: 1; display: flex; align-items: flex-start; justify-content: center; transition: opacity 0.5s, visibility 0.5s;
} .introContainer .suggestClick.hidden {
opacity: 0; pointer-events: none;
} .introContainer .suggestClick span {
color: #FAFAFC; margin-bottom: unset; border-radius: unset; font-weight: unset; position: static; top: unset; width: unset; height: unset; font-family: "montserrat-light"; font-size: 2.5vh; align-self: start;
} .introContainer .suggestClick::before {
content: ""; display: block; background-image: url(https://static.igem.org/mediawiki/2020/6/69/T--Vilnius-Lithuania--arrowBlueLeftDown.svg); background-repeat: no-repeat; background-position: center; background-size: 92%; width: 8vh; height: 8vh; margin-right: 8px;
}
.milkWave {
z-index: 2; width: 100%; height: calc(100vh + 8vw); top: 0; position: absolute; content: ""; pointer-events: none; background-position: bottom; background-origin: border-box; background-size: 100%; background-repeat: no-repeat; background-image: url(https://static.igem.org/mediawiki/2020/e/e7/T--Vilnius-Lithuania--milkTeam.svg);
}
main {
padding: 50px 10vw 96px; box-sizing: border-box; flex-direction: column; background-image: url(), url(); background-repeat: no-repeat, repeat-y; background-size: 100%, 100%;
} main .heading2 {
font-family: "montserrat-black"; font-size: 4vw; font-size: max(4vw, 18px); line-height: 0.8; text-transform: uppercase; display: block; width: 100%; text-align: end; color: #222222;
} main .heading2.other {
color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #222222;
} main .instructorList {
display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between;
} main .instructorList .instructor {
margin-top: 50px; display: grid; grid-template-columns: auto; grid-template-rows: 16vw 5vw auto; column-gap: 28px; row-gap: 4px; width: 20%; justify-items: center;
} @media (max-width: 800px) {
main .instructorList .instructor { grid-template-columns: 32vw auto; grid-template-rows: 10vw auto; width: 100%; column-gap: 4vw; }
} main .instructorList .instructor img {
object-fit: cover; width: 16vw; height: 16vw; border-radius: 1000px; box-shadow: 4px 2px 20px 0px rgba(0, 0, 0, 0.4); grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2;
} @media (max-width: 800px) {
main .instructorList .instructor img { width: 32vw; height: 32vw; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 3; }
} main .instructorList .instructor .filter {
width: 16vw; height: 16vw; border-radius: 1000px; background-color: #6281EF; mix-blend-mode: hue; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2;
} @media (max-width: 800px) {
main .instructorList .instructor .filter { width: 32vw; height: 32vw; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 3; }
} main .instructorList .instructor .instructorName {
display: flex; align-items: flex-end; font-size: 1.4vw; font-family: "montserrat-bold"; text-transform: uppercase; color: #6281EF; text-align: start; width: 100%; white-space: nowrap; /* risky */ grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3;
} @media (max-width: 800px) {
main .instructorList .instructor .instructorName { font-size: 4vw; grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; }
} main .instructorList .instructor .instructorAbout {
font-size: 1.6vw; font-family: "lato-light"; grid-column-start: 1; grid-column-end: 2; grid-row-start: 3; grid-row-end: 4; text-align: justify;
} @media (max-width: 800px) {
main .instructorList .instructor .instructorAbout { font-size: 3.6vw; grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; }
} main .instructorList .instructor .instructorAbout b {
font-family: "montserrat-light"; box-shadow: inset 0 -0.5em 0 -1px #fcbd1b;
} main .instructorList .arrowMore {
margin-top: 3em; width: 50%; height: 16vw; text-decoration: none; display: flex; align-items: center;
} @media (max-width: 800px) {
main .instructorList .arrowMore { width: 100%; height: 32vw; }
} main .instructorList .arrowMore::before {
content: ""; display: block; background-image: url(https://static.igem.org/mediawiki/2020/e/ea/T--Vilnius-Lithuania--arrowMore.svg); background-repeat: no-repeat; background-position: 5vw center; width: 16vw; height: 16vw;
} @media (max-width: 800px) {
main .instructorList .arrowMore::before { width: 32vw; height: 32vw; background-position: 10vw center; }
} main .instructorList .arrowMore span {
color: #222222; font-family: "montserrat-bold"; font-size: 3vw; margin-left: 0vw;
} @media (max-width: 800px) {
main .instructorList .arrowMore span { margin-left: 4vw; font-size: 5vw; }
}