Team:XJTU-China/Template:XJTU-China/style

<style> @font-face {

   font-family: "montserrat";
   src: url(../fonts/Customized/Montserrat.ttf);
   font-weight: normal;

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

   font-family: "roboto";
   src: url(../fonts/Customized/Roboto.ttf);
   font-weight: normal;

font-style: normal; }

@font-face { font-family: 'icomoon'; src:url('../fonts/icomoon/icomoon.eot'); src:url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'), url('../fonts/icomoon/icomoon.woff') format('woff'), url('../fonts/icomoon/icomoon.ttf') format('truetype'), url('../fonts/icomoon/icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal; }

• {

   margin: 0;
   padding: 0;
   box-sizing: border-box;
   word-wrap: break-word;
   font-family: 'montserrat', sans-serif;

}

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

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

}

body {

   background: rgb(226, 231, 231);
   margin: 0 auto;
   overflow-x: hidden;

}

body a:hover {

   text-decoration: none;

}

body a:focus {

   outline: none;
   text-decoration: none;

}

1. logo{

   width: 100px;
   transition: .3s;

}

1. logo.sticky {

   width: 50px;

}

.header_area {

   padding: 40px 50px;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   z-index: 10;
   transition: background 0.4s, all 0.3s linear;

}

.navbar-toggler{

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

} .header_area.sticky {

   padding: 10px 20px;
   background-color: slategray;
   opacity: 0.9;
   /* opacity: 0.8; */

}

.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: 20px;
   text-transform: uppercase;
   color: snow;
   padding: 0px;
   display: inline-block;
   transition: all 0.3s ease-in-out;

}

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

   font-weight: 400;
   font-size: 15px;
   text-transform: uppercase;
   color: snow;
   padding: 0px;
   display: inline-block;
   transition: all 0.3s 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: lightblue;

}

.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;

}

@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 300ms 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 300ms ease-in;
       visibility: hidden;
       display: block;
       border: none;
       padding: 0px;
       border-radius: 0px;
   }

}

.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 400ms 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 0.4s linear;

}

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

   line-height: 45px;
   color: #222222;
   padding: 0px 30px;
   transition: all 150ms 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: lightblue;
   color: #fff;

}

@media (min-width: 992px) {

   .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: snow;

}

.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: #ffffff;
   -webkit-transform: translateY(70px);
   -moz-transform: translateY(70px);
   -ms-transform: translateY(70px);
   -o-transform: translateY(70px);
   transform: translateY(70px);
   -webkit-transition: all 0.3s ease 0s;
   -moz-transition: all 0.3s ease 0s;
   -o-transition: all 0.3s ease 0s;
   transition: all 0.3s 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: 70%;
   content: ;
   top: 0;
   left: 0;
   z-index: 1;

} .fixedBackground {

   height: 70vh;

}

.fixedBackgroundImg{

   background-image: url(../images/bg.jpg);
   width: 100%;
   height: 70%;
   position: absolute;
   top: 0;
   left: 0;
   background-size: cover;

}

.container.mainBox {

   position: relative;
   padding: 100px 200px 0 150px;
   text-align: justify;

}

.page{

   background-color: snow;
   padding: 4rem 6rem 5rem 4rem;
   margin: 0 0 1em 0;
   border-radius: 0.3em;
   box-shadow: 2px 2px 10px slategray;

}

.xjtuText{

   text-align: justify;

}

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

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

}

.xjtuText h1{

   text-transform: uppercase;
   margin-bottom: 1.1em;
   font-weight: 700;
   letter-spacing: 4px;

}

.xjtuText h2{

   text-transform: capitalize;
   font-weight: 600;
   margin-bottom: 1.1em;

} .xjtuText h3{

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

}

.xjtuText p{

   margin: 1.2em 0;
   font-size: 18px;
   line-height: 1.4em;
   color: #222222;

}

.banner {

   position: relative;
   /* width: 100%; */
   height: 100vh;
   background: url(../images/bg.jpg);
   background-size: cover;

}

.box {

   width: 100%;
   background: #ccc;

}

.progress {

   position: fixed;
   top: 0;
   left: 0;
   height: 5px;
   background: snow;
   z-index: 100;

}

.card:before {

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

}

.card {

   overflow: hidden;
   background-size: cover;
   border: 0;
   margin-top: 30px;

}

.card img {

   transition: 0.4s;

}

.card:hover img {

   transform: scale(1.02);

}

.align-padding-50-80 {

   padding: 50px 80px;

}

.align-padding-50-120 {

   padding: 50px 120px;

}

.linkBox {

   position: relative;
   /* padding: 10px 30px; */
   transition: 0.3s;

}

.linkBox:hover {

   transform: scale(1.06);

}

.linkBox-items {

   box-shadow: 2px 2px 5px slategray;
   /* padding: 10px 10px; */
   text-align: center;
   border-radius: 5px;
   max-width: 320px;
   min-height: 320px;
   min-width: 280px;

}

.linkBox-items:hover {

   border-color: #222;

}

.linkBox span {

   font-size: 4em;
   color: slategray;

}

.linkBox:hover span {

   color: lightblue;

}

.linkBox h4 {

   padding-top: 10px;
   font-size: 1.2em;
   color: #222;
   font-weight: 700;
   line-height: 1.5em;
   text-transform: capitalize;

}

footer:before {

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

}

footer {

   background: url(../images/footer-tryptophan-1.jpg) no-repeat center;
   background-size: cover;
   position: relative;
   overflow: hidden;

}

.footerBox {

   margin: 10px 50px;
   position: relative;

}

.footerBox a {

   letter-spacing: 20px;
   font-size: 2em;
   color: snow;

}

.footerBox h2 {

   margin-bottom: 20px;
   color: snow;
   font-weight: 700;

}

.footerBox hr {

   background: snow 4px;

}

.footerBox p{

   font-family: 'calibri',sans-serif;
   text-align: justify;
   letter-spacing: 1px;
   line-height: 1.2em;
   font-weight: 300;
   font-size: 20px;
   color: snow;
   margin-top: 1.5em;

}

.footer-logo {

   position: relative;
   font-weight: 700;
   color: snow;
   text-decoration: none;
   font-size: 2em;
   text-transform: uppercase;
   letter-spacing: 2px;
   transition: 0;

}

.app-icon {

   transition: ease-in-out 0.3s;

}

.app-icon:hover {

   color: lightblue;

}

/* codrops */

@font-face {

   font-weight: normal;
   font-style: normal;
   font-family: 'feathericons';
   src: url('../fonts/feathericons/feathericons.eot?-8is7zf');
   src: url('../fonts/feathericons/feathericons.eot?#iefix-8is7zf') format('embedded-opentype'),
    url('../fonts/feathericons/feathericons.woff?-8is7zf') format('woff'),
     url('../fonts/feathericons/feathericons.ttf?-8is7zf') format('truetype'),
      url('../fonts/feathericons/feathericons.svg?-8is7zf#feathericons') 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;
   margin: 10px 1%;
   min-width: 420px;
   max-width: 480px;
   max-height: 360px;
   width: 48%;
   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 {

   padding: 1em;
   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, .grid figure figcaption>a {

   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;

}

.grid figure h2 span {

   font-weight: 800;

}

.grid figure h2, .grid figure p {

   margin: 0;

}

.grid figure p {

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

}

/* Individual effects */

/*---------------*/

/***** Zoe *****/

/*---------------*/

figure.effect-zoe figcaption {

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

}

figure.effect-zoe h2 {

   float: left;

}

figure.effect-zoe p.icon-links a {

   float: right;
   color: #3c4a50;
   font-size: 1.4em;

}

figure.effect-zoe:hover p.icon-links a:hover, figure.effect-zoe:hover p.icon-links a:focus {

   color: #252d31;

}

figure.effect-zoe p.description {

   position: absolute;
   bottom: 8em;
   padding: 2em;
   color: #fff;
   text-transform: none;
   font-size: 90%;
   opacity: 0;
   -webkit-backface-visibility: hidden;
   /* Fix for Chrome 37.0.2062.120 (Mac) */
   -webkit-transition: opacity 0.35s;
   transition: opacity 0.35s;
   -webkit-backface-visibility: hidden;
   /* Fix for Chrome 37.0.2062.120 (Mac) */

}

figure.effect-zoe h2, figure.effect-zoe p.icon-links a {

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

}

figure.effect-zoe p.icon-links a span::before {

   display: inline-block;
   padding: 8px 10px;
   font-family: 'feathericons';
   speak: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

}

.icon-eye::before {

   content: '\e000';

}

.icon-paper-clip::before {

   content: '\e001';

}

.icon-heart::before {

   content: '\e024';

}

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 p.icon-links a {

   -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 p.icon-links a:nth-child(3) {

   -webkit-transition-delay: 0.1s;
   transition-delay: 0.1s;

}

figure.effect-zoe:hover p.icon-links a:nth-child(2) {

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

}

figure.effect-zoe:hover p.icon-links a:first-child {

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

}

/* --------------- */

/* ---segmenter--- */

/* --------------- */

.trigger-headline {

   top: 0;
   left: 0;
   position: absolute;
   font-size: 6vw;
   text-transform: uppercase;
   pointer-events: none;
   line-height: 1;
   width: 100%;
   height: 100%;
   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 span {

   display: inline-block;
   position: relative;
   padding: 0 5vw;
   -webkit-transition: opacity 2s, -webkit-transform 2s;
   transition: opacity 2s, transform 2s;
   -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
   transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
   -webkit-transition-delay: 0.7s;
   transition-delay: 0.7s;

}

.segmenter {

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

}

.segmenter__image {

   width: 100%;
   display: block;

}

.segmenter__background, .segmenter__pieces, .segmenter__piece-wrap, .segmenter__piece-parallax, .segmenter__piece {

   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   -webkit-transform-style: preserve-3d;
   transform-style: preserve-3d;

}

.segmenter__piece-parallax {

   -webkit-transition: -webkit-transform 0.2s ease-out;
   transition: transform 0.2s ease-out;

}

.segmenter__pieces {

   -webkit-perspective: 400px;
   perspective: 400px;

}

.segmenter__background, .segmenter__piece {

   background-size: cover;
   background-repeat: no-repeat;
   background-position: 50% 50%;

}

.segmenter__shadow {

   position: absolute;
   opacity: 0;
   box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.7);

}

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

1. to-top {

   display: block;
   position: fixed;
   bottom: 8%;
   right: 2%;
   z-index: 10;

}

1. to-top a{

   color: slategray;

}

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

   color: lightblue;

}

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

.hitLikeBtn {

   width: 45px;
   height: 45px;

} </style>