Template:XJTU-China/style

/* --------------- */ /* common settings */ /* --------------- */ @font-face {

   font-family: "montserrat";
   src: url('https://static.igem.org/mediawiki/2021/4/46/T--XJTU-China--montserrat.ttf') format('truetype');
   font-weight: normal;

font-style: normal; } @font-face {

   font-family: "roboto";
   src: url('https://static.igem.org/mediawiki/2021/c/cb/T--XJTU-China--roboto.ttf') format('truetype');
   font-weight: normal;

font-style: normal; }

@font-face { font-family: 'icomoon'; src:url('https://static.igem.org/mediawiki/2021/3/30/T--XJTU-China--icomoon.eot'); src:url('https://static.igem.org/mediawiki/2021/3/30/T--XJTU-China--icomoon.eot') format('embedded-opentype'), url('https://static.igem.org/mediawiki/2021/3/34/T--XJTU-China--icomoon.woff') format('woff'), url('https://static.igem.org/mediawiki/2021/5/58/T--XJTU-China--icomoon.ttf') format('truetype'), url('https://static.igem.org/mediawiki/2021/d/d4/T--XJTU-China--icomoon.svg') format('svg'); font-weight: normal; font-style: normal; }

• {

   margin: 0;
   padding: 0;
   box-sizing: border-box;
   word-wrap: break-word;

}

root{

   --iGEMgreen: #2a9661;
   --fdtbrown:#e59572;
   --lightpink:#fdc4b6;
   --nectarinered:#ea7070;

}

body {

   margin: 0 auto;
   overflow-x: hidden;

}

body a:hover {

   text-decoration: none;

}

body a:focus {

   outline: none;
   text-decoration: none;

}

h1,h2,h3,h4,h5,h6{

   font-family: 'roboto',sans-serif;
   color: snow;

}

div#content.mw-body {

   background-color: snow!important;

}

.logo{

   cursor: pointer;
   width: 150px;
   transition: .2s;

}

.logo.sticky{

   width: 90px;

}

.header_area {

   padding: 1em 1.2em;
   position: fixed;
   top: 16px;
   left: 0;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   transition: background 0.3s, all 0.2s linear;
   z-index: 300;

}

.navbar-toggler{

   border: none;
   text-align: right;
   justify-content: right;
   align-items:center;

} .header_area.sticky {

   padding: 0 1em;
   background-color: snow;
   opacity: 0.9;
   box-shadow: 2px 2px 5px slategray!important;

}

.header_area .navbar {

   background: transparent;
   padding: 0px;
   border: 0px;
   border-radius: 0px;

}

.header_area .navbar .nav .nav-item {

   margin-right: 45px;

}

.header_area .navbar .nav .nav-item .nav-link {

   font-weight: 600;
   font-size: 21px;
   text-transform: uppercase;
   color: snow;
   padding: 0px;
   display: inline-block;
   transition: all 0.2s ease-in-out;

}

.header_area.sticky .navbar .nav .nav-item .nav-link {

   font-weight: 600;
   font-size: 16px;
   text-transform: uppercase;
   color: #222;
   padding: 0px;
   display: inline-block;
   transition: all 0.2s ease-in-out;

}

.header_area .navbar .nav .nav-item .nav-link:after {

   display: none;

}

.header_area .navbar .nav .nav-item:hover .nav-link, .header_area .navbar .nav .nav-item.active .nav-link {

   color: var(--iGEMgreen);

}

.header_area .navbar .nav .nav-item.submenu {

   position: relative;

}

.header_area .navbar .nav .nav-item.submenu ul {

   border: none;
   padding: 0px;
   border-radius: 0px;
   box-shadow: none;
   margin: 0px;
   background: #fff;

}

.header_area .navbar .nav .nav-item.submenu ul:before {

   content: "";
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 10px 10px 0 10px;
   border-color: #eeeeee transparent transparent transparent;
   position: absolute;
   right: 24px;
   top: 45px;
   z-index: 3;
   opacity: 0;
   transition: all .3s linear;

}

.header_area .navbar .nav .nav-item.submenu ul .nav-item {

   display: block;
   float: none;
   margin-right: 0px;
   border-bottom: 1px solid #ededed;
   margin-left: 0px;
   transition: all .3s linear;

}

.header_area .navbar .nav .nav-item.submenu ul .nav-item .nav-link {

   font-weight: 500;
   font-size: 16px;
   line-height: 45px;
   color: #222222;
   padding: 0px 30px;
   transition: all 100ms linear;
   display: block;
   margin-right: 0px;

}

.header_area .navbar .nav .nav-item.submenu ul .nav-item:last-child {

   border-bottom: none;

}

.header_area .navbar .nav .nav-item.submenu ul .nav-item:hover .nav-link {

   background: var(--iGEMgreen);
   color: #fff;

}

@media (min-width: 992px) {

   .header_area .navbar .nav .nav-item.submenu ul {
       position: absolute;
       top: 120%;
       left: 0px;
       min-width: 200px;
       text-align: left;
       opacity: 0;
       transition: all 200ms ease-in;
       visibility: hidden;
       display: block;
       border: none;
       padding: 0px;
       border-radius: 0px;
   }

   .header_area .navbar .nav .nav-item.submenu.end ul {
       position: absolute;
       top: 120%;
       left: -70px;
       min-width: 200px;
       text-align: left;
       opacity: 0;
       transition: all 200ms ease-in;
       visibility: hidden;
       display: block;
       border: none;
       padding: 0px;
       border-radius: 0px;
   }
   .header_area .navbar .nav .nav-item.submenu:hover ul {
       visibility: visible;
       opacity: 1;
       top: 100%;
   }

}

.header_area .navbar .nav .nav-item.submenu:hover ul .nav-item {

   margin-top: 0px;

}

.header_area .navbar .nav .nav-item:last-child {

   margin-right: 0px;

}

.header_area .navbar .search {

   font-size: 12px;
   line-height: 60px;
   display: inline-block;
   color: var(--fdtbrown);

}

.header_area .navbar .search i {

   font-weight: 600;

}

.header_area.navbar_fixed .main_menu {

   position: fixed;
   width: 100%;
   top: -70px;
   left: 0;
   right: 0;
   background: var(--fdtbrown);
   -webkit-transform: translateY(70px);
   -moz-transform: translateY(70px);
   -ms-transform: translateY(70px);
   -o-transform: translateY(70px);
   transform: translateY(70px);
   -webkit-transition: all 0.2s ease 0s;
   -moz-transition: all 0.2s ease 0s;
   -o-transition: all 0.2s ease 0s;
   transition: all 0.2s ease 0s;
   box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.1);

}

.header_area.navbar_fixed .main_menu .navbar .nav .nav-item .nav-link {

   line-height: 70px;

}

.main{

   min-height: 100vh;

}

.fixedBackground:before {

   background: rgba(0, 0, 0, 0.25);
   position: absolute;
   width: 100%;
   height: 70vh;
   content: ;
   top: 0;
   left: 0;

} .fixedBackground {

   height: 70vh;

}

.fixedBackgroundImg{

   width: 100%;
   height: 70vh;
   position: absolute;
   top: 0;
   left: 0;
   background-size: cover;

}

.teamIntro hgroup h2{

   font-family: 'montserrat',sans-serif;
   font-weight: 600;

}

.container.mainBox {

   position: relative;
   padding: 100px 10px;
   margin: 0;
   text-align: justify;

}

.xjtuText{

   border-radius: "";
   box-shadow: "";
   background-color: "";
   margin: 0 0 1em 0;
   text-align: justify;

}

.page{

   border-radius: 0.3em;
   box-shadow: 2px 2px 20px slategray;
   background-color: snow !important;
   padding: 40px 60px!important;
   z-index: 2;

}

.xjtuText h1,.xjtuText h2,.xjtuText h3{

   font-family: 'montserrat',sans-serif !important;

}

.xjtuText h1{

   color: var(--iGEMgreen);
   text-transform: uppercase;
   font-weight: 600;
   letter-spacing: 3px;

}

.xjtuText h2{

   color: var(--fdtbrown);
   text-transform: capitalize;
   font-weight: 500;

} .xjtuText h3{

   text-transform: capitalize;
   font-weight: 400;

}

.xjtuText p{

   font-family: 'montserrat',sans-serif !important;
   padding-top: 150px;
   margin-top: -150px;
   font-size: 18px !important;
   line-height: 1.5em;
   color: #222222;

}

.xjtuText p.green b{

   color: var(--iGEMgreen) !important;

} .xjtuText p.brown b{

   color: var(--fdtbrown)!important;

}

@media (max-width:768px) {

   .page{
       padding: 20px 30px;
   }

}

.box {

   width: 100%;
   background: #ccc;

}

.progress {

   position: fixed;
   top: 16px;
   left: 0;
   height: 5px;
   background: var(--fdtbrown);
   z-index: 20;

}

.align-padding-50-80 {

   padding: 50px 80px;

}

.align-padding-50-120 {

   padding: 50px 120px;

}

.linkBox {

   position: relative;
   min-width: 240px;
   min-height: 240px;
   margin-top: 1em;
   padding: 1em 1em;
   transition: 0.2s;

}

.linkBox:hover {

   transform: scale(1.06);

}

.linkBox-items {

   box-shadow: 2px 2px 5px slategray;
   text-align: center;
   border-radius: 5px;

}

.linkBox-items:hover {

   border-color: #222;

}

.linkBox span {

   font-size: 4em;
   color: #222;

}

.linkBox:hover span {

   color: slategray;

}

.linkBox h4 {

   padding-top: 10px;
   font-size: 1.2em;
   color: slategray;
   font-weight: 500!important;
   line-height: 1.5em;
   text-transform: capitalize;

}

footer {

   padding-top: 50px;
   padding-bottom: 20px;
   background-color: #222;
   position: relative;
   overflow: hidden;

}

footer .follow, footer .sponsor, footer .contact{

   text-align: center;
   align-items: center;
   color: snow;

}

footer .sponsor{

   height: 240px;

}

footer .love{

   font-family: 'Times New Roman', Times, serif;
   font-size: 16px;
   color: snow;
   height: 30px;

}

footer .love>.left{

   position: relative;
   left: 0;
   padding: 0;

}

footer .love>.right{

   position: relative;
   right: 0;
   padding: 0;

}

footer .follow h4, footer .sponsor h4, footer .contact h4{

   text-transform: uppercase;
   font-family: "montserrat", sans-serif;
   padding-bottom: 1em!important;

}

footer .contact p{

   font-family: 'roboto',sans-serif!important;
   font-size: 20px!important;
   text-align: center!important;

}

footer .contact ul li{

   font-family: 'Times New Roman', Times, serif;
   list-style: none;
   font-size: 18px;
   line-height: 22px;
   margin-bottom: 1em;

}

footer .love span.fa-heart{

   color: red!important;

}

footer .app-icon a {

   color: snow;
   font-size: 2em;

}

footer .love a#marqueeBox{

   font-family: 'montserrat', sans-serif;
   font-size: 20px;
   color: snow;

}

.app-icon a{

   padding: 0 10px;
   transition: ease-in-out 0.2s;

}

.app-icon a .fa-twitter-square:hover {

   color: #45cbf4

} .app-icon a .fa-youtube-square:hover {

   color:#ff0000

} .app-icon a .fa-instagram:hover {

   color: #c13584;

} .app-icon a .fa-weixin:hover {

   color: #04BE02;

} .app-icon a .fa-weibo:hover {

   color: #d6ae28;

} .app-icon a .fa-envelope:hover {

   color: #e09508;

}

/* ------- */ /* codrops */ /* ------- */

/* --------------------- */ /* -----Tilteffect------ */ .tiltBox { display: flex; justify-content: center; margin-top: 2em; }

.tilter { display: block; position: relative; width: 240px; height: 320px; color: #fff; flex: none; perspective: 1000px; }

.tilter * { pointer-events: none; }

.tilter:hover, .tilter:focus { color: #fff; outline: none; }

.tilter__figure, .tilter__image { margin: 0; width: 100%; height: 100%; display: block; }

.tilter__figure > * { transform: translateZ(0px); /* Force correct stacking order */ }

.smooth .tilter__figure, .smooth .tilter__deco--overlay, .smooth .tilter__deco--lines, .smooth .tilter__deco--shine div, .smooth .tilter__caption { transition: transform 0.2s ease-out; }

.tilter__figure { position: relative; }

.tilter__figure::before { content: ; position: absolute; width: 90%; height: 90%; top: 5%; left: 5%; box-shadow: 0 30px 20px rgba(35,32,39,0.5); }

.tilter__deco { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }

.tilter__deco--overlay { background-image: linear-gradient(45deg, rgba(226, 60, 99, 0.4), rgba(145, 58, 252, 0.4), rgba(16, 11, 192, 0.4)); }

.tilter__deco--shine div { position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%); }

.tilter__deco--lines { fill: none; stroke: #fff; stroke-width: 1.5px; }

.tilter__caption { position: absolute; bottom: 0; width: 100%; padding: 4em 2em; }

.tilter__title { margin: 0; font-weight: normal; font-size: 1.8em; font-family: 'Abril Fatface', serif; line-height: 1; }

.tilter__description { margin: 1em 0 0 0; font-size: 0.85em; letter-spacing: 0.15em; } .tilter .tilter__figure::before { box-shadow: 0 30px 20px rgba(0,0,0,0.5); }

/* --------------------- */ /* -----hovereffect----- */ @font-face {

   font-weight: normal;
   font-style: normal;
   font-family: 'feathericons';
   src: url('https://static.igem.org/mediawiki/2021/c/c1/T--XJTU-China--feathericons.eot');
   src: url('https://static.igem.org/mediawiki/2021/c/c1/T--XJTU-China--feathericons.eot') format('embedded-opentype'),
    url('https://static.igem.org/mediawiki/2021/5/52/T--XJTU-China--feathericons.woff') format('woff'),
     url('https://static.igem.org/mediawiki/2021/e/eb/T--XJTU-China--feathericons.ttf') format('truetype'),
      url('https://static.igem.org/mediawiki/2021/9/9a/T--XJTU-China--feathericons.svg') format('svg');

}

.grid {

   position: relative;
   margin: 0 auto;
   padding: 1em 0 4em;
   max-width: 1900vw;
   list-style: none;
   text-align: center;

}

/* Common style */

.grid figure {

   position: relative;
   float: left;
   overflow: hidden;
   background: #3085a3;
   text-align: center;
   cursor: pointer;

}

.grid figure img {

   position: relative;
   display: block;
   min-height: 100%;
   max-width: 100%;
   opacity: 0.8;

}

.grid figure figcaption {

   color: #fff;
   text-transform: uppercase;
   font-size: 1.25em;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;

}

.grid figure figcaption::before, .grid figure figcaption::after {

   pointer-events: none;

}

.grid figure figcaption {

   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;

}

/* Anchor will cover the whole item by default */

.grid figure figcaption>a {

   z-index: 1000;
   text-indent: 200%;
   white-space: nowrap;
   font-size: 0;
   opacity: 0;

}

.grid figure h2 {

   word-spacing: -0.15em;
   font-weight: 300;
   margin: 0;

}

.grid figure h2 span {

   font-weight: 800;

}

.grid figure h2, .grid figure p {

   margin: 0;

}

.grid figure p {

   letter-spacing: 1px;
   font-size: 68%;

}

/* zoe */

figure.effect-zoe {

   display: flex;
   justify-content: center;
   margin-left: 0.5rem!important;
   margin-right: 0.5rem!important;

}

@media (max-width:1200px) {

   figure.effect-zoe{
       float: inherit;
   }
   

}

figure.effect-zoe figcaption {

   top: auto;
   bottom: 0;
   height: 3.75em;
   background: snow;
   color: #3c4a50;
   -webkit-transition: -webkit-transform 0.25s;
   transition: transform 0.25s;
   -webkit-transform: translate3d(0, 100%, 0);
   transform: translate3d(0, 100%, 0);

}

figure.effect-zoe h2 {

   float: left;

}

figure.effect-zoe .hitLikeBtn {

   float: right;

}

figure.effect-zoe p.description {

   position: absolute;
   bottom: 8em;
   padding: 2em;
   color: snow;
   text-transform: none;
   font-family: 'roboro',sans-serif!important;
   font-size: 16px!important;
   opacity: 0;
   -webkit-backface-visibility: hidden;
   /* Fix for Chrome 37.0.2062.120 (Mac) */
   -webkit-transition: opacity 0.35s;
   transition: opacity 0.25s;
   -webkit-backface-visibility: hidden;
   /* Fix for Chrome 37.0.2062.120 (Mac) */

}

figure.effect-zoe h2{

   -webkit-transition: -webkit-transform 0.25s;
   transition: transform 0.25s;
   -webkit-transform: translate3d(0, 200%, 0);
   transform: translate3d(0, 200%, 0);

}

figure.effect-zoe h2 {

   display: inline-block;

}

figure.effect-zoe:hover p.description {

   opacity: 1;

}

figure.effect-zoe:hover figcaption, figure.effect-zoe:hover h2, figure.effect-zoe:hover .lottiebtn {

   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);

}

figure.effect-zoe:hover h2 {

   -webkit-transition-delay: 0.05s;
   transition-delay: 0.05s;

}

figure.effect-zoe:hover .lottiebtn:nth-child(2) {

   -webkit-transition-delay: 0.15s;
   transition-delay: 0.15s;

}

figure.effect-zoe:hover .lottiebtn:first-child {

   -webkit-transition-delay: 0.2s;
   transition-delay: 0.2s;

}

figure.effect-zoe img, figure.effect-zoe:hover img{

   transition: .2s;

}

figure.effect-zoe:hover img{

   transform: scale(1.2);

}

@media (max-width:768px) {

   figure.effect-zoe figcaption h2{
       font-size: 1rem;
   }
   figure.effect-zoe figcaption {
       height: 2em;
   }

}

.trigger-headline {

   position: absolute;
   top: 16px;
   left: 0;
   font-family: 'montserrat',sans-serif;
   font-size: 8vw;
   text-transform: uppercase;
   pointer-events: none;
   line-height: 1;
   width: 100vw;
   height: 100vh;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
   justify-content: center;
   margin: 0;
   color: snow;

}

.trigger-headline-hidden{

   opacity: 0;

}

.bannerImg {

   width: 100vw;
   height: 100vh;
   position: relative;
   overflow: hidden;
   background-size: cover;

}

/* --------- */ /* Decorative Letter Animations */

.shapes { position: fixed; top: 0; left: 0; }

@media screen and (max-width: 40em) { .slideshow .word { font-size: 2em; } } /* -------------------- */ /* dailogs */ .dialog, .dialog__overlay { width: 100%; height: 100%; top: 0; left: 0; }

.dialog { position: fixed; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; pointer-events: none; }

.dialog__overlay { position: absolute; z-index: 1; background: rgba(55, 58, 71, 0.9); opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; -webkit-backface-visibility: hidden; }

.dialog--open .dialog__overlay { opacity: 1; pointer-events: auto; }

.dialog__content { width: 50%; height: 70%; background: snow; padding: 4em; text-align: center; position: relative; z-index: 5; opacity: 0; overflow-y: scroll; }

.dialog--open .dialog__content { pointer-events: auto; }

.dialog__description{ }

.dialogButton{ width: 200px; border: solid 2px; border-color: rgb(176, 40, 218); background-color: snow; padding: .5em; font-family: 'montserrat'; font-size: 20px; text-transform: uppercase; cursor: pointer; transition: border 1s; }

.dialogButton:hover{ border-image: linear-gradient(40deg, #2812da 0%, #e82aa3 100%) 2 2; }

/* Content */ .dialog h2 { color: black; margin: 0; font-weight: 400; font-size: 2em; padding: 0 0 2em; margin: 0; }

/* Sandra */ .dialog.dialog--open .dialog__content, .dialog.dialog--close .dialog__content { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }

.dialog.dialog--open .dialog__content { -webkit-animation-name: anim-open; animation-name: anim-open; }

.dialog.dialog--close .dialog__content { -webkit-animation-name: anim-close; animation-name: anim-close; }

@-webkit-keyframes anim-open { 0% { opacity: 0; -webkit-transform: scale3d(1.1, 1.1, 1); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); } }

@keyframes anim-open { 0% { opacity: 0; -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } }

@-webkit-keyframes anim-close { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: scale3d(0.9, 0.9, 1); } }

@keyframes anim-close { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: scale3d(0.9, 0.9, 1); transform: scale3d(0.9, 0.9, 1); } }

/* ---------- */ /* components */ /* ---------- */

/* -----to-top btn----- */

1. to-top {

   cursor: pointer;
   display: block;
   position: fixed;
   bottom: 40px;
   right: 20px;
   z-index: 100;

}

1. to-top a{

   color: slategray;

}

1. to-top a:active,
2. to-top a:hover{

   color: var(--iGEMgreen);

}

@media (max-width:768px){

   #to-top{
       bottom: 20px;
       right: 10px;
   }

} /* ----animateBtn------ */

.hitLikeBtn, .viewBtn {

   cursor: pointer;
   width: 90px;
   height: 90px;
   margin-bottom: -10px;

}