Difference between revisions of "Template:XJTU-China/style"

 
(249 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
<html>
 +
<style>
 +
/* --------------- */
 +
/* common settings */
 +
/* --------------- */
 
@font-face {
 
@font-face {
 
     font-family: "montserrat";
 
     font-family: "montserrat";
Line 8: Line 13:
 
     font-family: "roboto";
 
     font-family: "roboto";
 
     src: url('https://static.igem.org/mediawiki/2021/c/cb/T--XJTU-China--roboto.ttf') format('truetype');
 
     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: "angella";
 +
    src: url('https://static.igem.org/mediawiki/2021/a/a7/T--XJTU-China--angella_white_otf.otf') format('opentype'),
 +
        url('https://static.igem.org/mediawiki/2021/e/e8/T--XJTU-China--angella_white.ttf') format('truetype');
 +
    font-weight: normal;
 +
font-style: normal;
 +
}
 +
@font-face {
 +
    font-family: "eras";
 +
    src: url('https://static.igem.org/mediawiki/2021/7/70/T--XJTU-China--eras_md.ttf') format('truetype');
 +
    font-weight: normal;
 +
font-style: normal;
 +
}
 +
@font-face {
 +
    font-family: "britanic";
 +
    src: url('https://static.igem.org/mediawiki/2021/8/81/T--XJTU-China--britanic.ttf') format('truetype');
 
     font-weight: normal;
 
     font-weight: normal;
 
font-style: normal;
 
font-style: normal;
Line 23: Line 47:
 
}
 
}
  
−
h1,h2,h3,h4,h5,h6{
+
* {
−
    font-family: 'roboto',sans-serif;
+
−
}
+
−
 
+
−
body {
+
 
     margin: 0;
 
     margin: 0;
 
     padding: 0;
 
     padding: 0;
 
     box-sizing: border-box;
 
     box-sizing: border-box;
 
     word-wrap: break-word;
 
     word-wrap: break-word;
−
     font-family: 'montserrat', sans-serif;
+
}
−
     background: rgb(226, 231, 231);
+
:root{
 +
     --iGEMgreen: #2a9661;
 +
    --fdtbrown:#f58f5f;
 +
     --d: 700ms;
 +
    --e: cubic-bezier(0.19, 1, 0.22, 1);
 +
}
 +
 
 +
body {
 
     margin: 0 auto;
 
     margin: 0 auto;
 
     overflow-x: hidden;
 
     overflow-x: hidden;
Line 48: Line 75:
 
}
 
}
  
−
#logo{
+
div#content.mw-body
−
     width: 100px;
+
{
−
    transition: .3s;
+
     background-color: snow!important;
 
}
 
}
  
−
#logo.sticky {
+
a.anchor{
−
     width: 50px;
+
     display: block;
 +
    position: relative;
 +
    top: -150px;
 +
    visibility: hidden;
 
}
 
}
  
−
.logo{
+
.logoHolder{
−
     width: 100px;
+
    position: fixed;
−
     transition: .3s;
+
    left: 10px;
 +
    top: 26px;
 +
     width: 170px;
 +
    height: 170px;
 +
    padding: 10px;
 +
    background-color: rgba(255, 255, 255, 0);
 +
    border-radius: 50%;
 +
    cursor: pointer;
 +
     transition: .2s;
 +
    z-index: 500;
 
}
 
}
  
−
.logo.sticky{
+
.logoHolder.sticky{
−
     width: 50px;
+
     width: 130px;
 +
    height: 130px;
 +
    background-color: #4b5165;
 +
    /* opacity: 0.9; */
 +
    box-shadow: 0px 4px 5px 0px #454959!important;
 
}
 
}
  
 
.header_area {
 
.header_area {
−
     padding: 40px 50px;
+
     padding: 2.5em 1.2em;
 
     position: fixed;
 
     position: fixed;
−
     top: 0;
+
     top: 16px;
 
     left: 0;
 
     left: 0;
−
    padding-top: 60px;
 
 
     width: 100%;
 
     width: 100%;
 
     display: flex;
 
     display: flex;
 
     align-items: center;
 
     align-items: center;
 
     justify-content: space-between;
 
     justify-content: space-between;
−
    z-index: 10;
+
     transition: background 0.3s, all 0.2s linear;
−
     transition: background 0.4s, all 0.3s linear;
+
    z-index: 300;
 +
}
 +
 
 +
.header_area .spacer{
 +
    width: 150px;
 
}
 
}
  
Line 85: Line 131:
 
     justify-content: right;
 
     justify-content: right;
 
     align-items:center;
 
     align-items:center;
 +
    color: #222!important;
 
}
 
}
 +
 +
.navbar-toggler.sticky {
 +
    color: snow;
 +
}
 +
 
.header_area.sticky {
 
.header_area.sticky {
−
     padding: 10px 20px;
+
     padding: 0.8em 1em;
−
     background-color: slategray;
+
     background-color: #4b5165;
−
     opacity: 0.9;
+
     box-shadow: 0px 2px 5px #454959!important;
−
    /* opacity: 0.8; */
+
 
}
 
}
  
Line 105: Line 156:
  
 
.header_area .navbar .nav .nav-item .nav-link {
 
.header_area .navbar .nav .nav-item .nav-link {
 +
    font-family: 'britanic'!important;
 
     font-weight: 600;
 
     font-weight: 600;
−
     font-size: 20px;
+
     font-size: 21px;
 
     text-transform: uppercase;
 
     text-transform: uppercase;
 
     color: snow;
 
     color: snow;
 
     padding: 0px;
 
     padding: 0px;
 
     display: inline-block;
 
     display: inline-block;
−
     transition: all 0.3s ease-in-out;
+
     transition: all 0.2s ease-in-out;
 
}
 
}
  
 
.header_area.sticky .navbar .nav .nav-item .nav-link {
 
.header_area.sticky .navbar .nav .nav-item .nav-link {
−
     font-weight: 400;
+
     font-weight: 600;
−
     font-size: 15px;
+
     font-size: 16px;
 
     text-transform: uppercase;
 
     text-transform: uppercase;
 
     color: snow;
 
     color: snow;
 
     padding: 0px;
 
     padding: 0px;
 
     display: inline-block;
 
     display: inline-block;
−
     transition: all 0.3s ease-in-out;
+
     transition: all 0.2s ease-in-out;
 
}
 
}
  
Line 130: Line 182:
 
.header_area .navbar .nav .nav-item:hover .nav-link,
 
.header_area .navbar .nav .nav-item:hover .nav-link,
 
.header_area .navbar .nav .nav-item.active .nav-link {
 
.header_area .navbar .nav .nav-item.active .nav-link {
−
     color: lightblue;
+
     color: var(--iGEMgreen);
 
}
 
}
  
Line 144: Line 196:
 
     margin: 0px;
 
     margin: 0px;
 
     background: #fff;
 
     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;
 
−
    }
 
 
}
 
}
  
Line 190: Line 210:
 
     z-index: 3;
 
     z-index: 3;
 
     opacity: 0;
 
     opacity: 0;
−
     transition: all 400ms linear;
+
     transition: all .3s linear;
 
}
 
}
  
Line 199: Line 219:
 
     border-bottom: 1px solid #ededed;
 
     border-bottom: 1px solid #ededed;
 
     margin-left: 0px;
 
     margin-left: 0px;
−
     transition: all 0.4s linear;
+
     transition: all .3s linear;
 
}
 
}
  
 
.header_area .navbar .nav .nav-item.submenu ul .nav-item .nav-link {
 
.header_area .navbar .nav .nav-item.submenu ul .nav-item .nav-link {
 +
    font-weight: 500;
 +
    font-size: 16px;
 
     line-height: 45px;
 
     line-height: 45px;
 
     color: #222222;
 
     color: #222222;
 
     padding: 0px 30px;
 
     padding: 0px 30px;
−
     transition: all 150ms linear;
+
     transition: all 100ms linear;
 
     display: block;
 
     display: block;
 
     margin-right: 0px;
 
     margin-right: 0px;
Line 216: Line 238:
  
 
.header_area .navbar .nav .nav-item.submenu ul .nav-item:hover .nav-link {
 
.header_area .navbar .nav .nav-item.submenu ul .nav-item:hover .nav-link {
−
     background: lightblue;
+
     background: var(--iGEMgreen);
 
     color: #fff;
 
     color: #fff;
 
}
 
}
  
 
@media (min-width: 992px) {
 
@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 {
 
     .header_area .navbar .nav .nav-item.submenu:hover ul {
 
         visibility: visible;
 
         visibility: visible;
Line 240: Line 291:
 
     line-height: 60px;
 
     line-height: 60px;
 
     display: inline-block;
 
     display: inline-block;
−
     color: snow;
+
     color: var(--fdtbrown);
 
}
 
}
  
Line 253: Line 304:
 
     left: 0;
 
     left: 0;
 
     right: 0;
 
     right: 0;
−
     background: #ffffff;
+
     background: var(--fdtbrown);
 
     -webkit-transform: translateY(70px);
 
     -webkit-transform: translateY(70px);
 
     -moz-transform: translateY(70px);
 
     -moz-transform: translateY(70px);
Line 259: Line 310:
 
     -o-transform: translateY(70px);
 
     -o-transform: translateY(70px);
 
     transform: translateY(70px);
 
     transform: translateY(70px);
−
     -webkit-transition: all 0.3s ease 0s;
+
     -webkit-transition: all 0.2s ease 0s;
−
     -moz-transition: all 0.3s ease 0s;
+
     -moz-transition: all 0.2s ease 0s;
−
     -o-transition: all 0.3s ease 0s;
+
     -o-transition: all 0.2s ease 0s;
−
     transition: all 0.3s ease 0s;
+
     transition: all 0.2s ease 0s;
 
     box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.1);
 
     box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.1);
 
}
 
}
Line 276: Line 327:
  
 
.fixedBackground:before {
 
.fixedBackground:before {
−
     background: rgba(0, 0, 0, 0.25);
+
     background: rgba(0, 0, 0, 0.15);
 
     position: absolute;
 
     position: absolute;
 
     width: 100%;
 
     width: 100%;
Line 287: Line 338:
 
.fixedBackground {
 
.fixedBackground {
 
     height: 70vh;
 
     height: 70vh;
 +
    background-color: white;
 
}
 
}
  
Line 296: Line 348:
 
     left: 0;
 
     left: 0;
 
     background-size: cover;
 
     background-size: cover;
 +
    display: flex;
 +
    justify-content: center;
 +
    align-items: center;
 
}
 
}
  
 +
.pageHeadline {
 +
    position: relative;
 +
    display: flex;
 +
    justify-content: center;
 +
    align-items: center;
 +
    width: 100vw;
 +
    height: 70vh;
 +
    z-index: 2;
 +
}
 +
 +
.pageHeadline span{
 +
    position: relative;
 +
    top: 6%;
 +
    height: 72px;
 +
    width: 62%;
 +
    text-align: center;
 +
    font-family: 'britanic';
 +
    font-size: 72px;
 +
    letter-spacing: 10px;
 +
    text-transform: uppercase;
 +
    color: snow;
 +
    border-bottom: 5px solid snow;
 +
}
  
 
.container.mainBox {
 
.container.mainBox {
 
     position: relative;
 
     position: relative;
−
     padding: 100px 200px 0 150px;
+
     padding: 100px 10px;
 +
    margin: 0;
 
     text-align: justify;
 
     text-align: justify;
 +
    background-color: #21242d;
 
}
 
}
  
 +
.container.mainBox.bg-white {
 +
    background-color: white !important;
 +
}
  
−
.xjtuText{
+
.wallpaper-bg{
−
     border-radius: "";
+
     background-image: url(https://static.igem.org/mediawiki/2021/1/17/T--XJTU-China--wallpaper.jpg);
−
    box-shadow: "";
+
     background-size: 90%;
−
    background-color: "";
+
−
    padding-left: 4em;
+
−
     margin: 0 0 1em 0;
+
−
    text-align: justify;
+
 
}
 
}
  
 
.page{
 
.page{
−
     border-radius: 0.3em;
+
     border-radius: 20px;
−
     box-shadow: 2px 2px 10px slategray;
+
     padding: 1em 0;
−
     background-color: snow;
+
     background-color: #2e323e !important;
−
     padding: 4em 4rem;
+
    z-index: 202;
 +
}
 +
.page-light{
 +
    border-radius: 20px;
 +
     padding: 1em 0;
 +
    background-color: rgba(250,250,250,0.9) !important;
 
     z-index: 2;
 
     z-index: 2;
 
}
 
}
  
 +
hr.glyph {
 +
    overflow: visible; /* For IE */
 +
    margin-top: 5rem;
 +
    margin-bottom: 2rem;
 +
    padding: 0;
 +
    border: none;
 +
    border-top: medium double white;
 +
    color: white;
 +
    text-align: center;
 +
}
 +
hr.glyph:after {
 +
    font-family: 'britanic';
 +
    content: "§";
 +
    display: inline-block;
 +
    position: relative;
 +
    top: -0.7em;
 +
    font-size: 1.5em;
 +
    padding: 0 0.25em;
 +
    background: #2e323e;
 +
    color: white;
 +
}
  
 +
.centerize {
 +
    display: flex !important;
 +
    justify-content: center !important;
 +
    align-items: center !important;
 +
    text-align: center !important;
 +
}
  
−
.xjtuText h1,.xjtuText h2,.xjtuText h3{
+
.xjtuText h1,.xjtuText h2,.xjtuText h3, .xjtuText h4{
−
     font-family: 'montserrat',sans-serif !important;
+
     font-family: 'britanic',sans-serif !important;
 
}
 
}
  
 
.xjtuText h1{
 
.xjtuText h1{
 +
    color: #7298ff;
 
     text-transform: uppercase;
 
     text-transform: uppercase;
−
     font-weight: 700;
+
     font-weight: 600;
−
     letter-spacing: 4px;
+
     letter-spacing: 3px;
 +
    text-align: center;
 
}
 
}
  
 
.xjtuText h2{
 
.xjtuText h2{
 +
    color: var(--fdtbrown);
 
     text-transform: capitalize;
 
     text-transform: capitalize;
−
     font-weight: 600;
+
     font-weight: 500;
 
}
 
}
 
.xjtuText h3{
 
.xjtuText h3{
−
     text-transform: capitalize;
+
     color: #acde92;
−
     font-weight: 500;
+
     font-weight: 400;
 +
}
 +
.xjtuText h4,
 +
.xjtuText h5{
 +
    color: white;
 
}
 
}
  
 
.xjtuText p{
 
.xjtuText p{
−
     font-family: 'roboto',sans-serif !important;
+
     font-family: 'eras',sans-serif !important;
−
     margin: 1.5rem 0;
+
     padding: 0 5%;
−
     font-size: 22px !important;
+
     font-size: 18px !important;
 
     line-height: 1.5em;
 
     line-height: 1.5em;
−
     color: #222222;
+
     color: snow;
 
}
 
}
  
 +
.xjtuText p b{
 +
    color: #7298ff !important;
 +
}
  
−
.banner {
+
.xjtuText p a {
−
     position: relative;
+
     color: #7298ff;
−
     height: 100vh;
+
     text-decoration-line: underline;
−
    background: url("https://static.igem.org/mediawiki/2021/f/fd/T--XJTU-China--bg.jpg");
+
     text-transform: capitalize;
−
     background-size: cover;
+
 
}
 
}
  
 +
.xjtuText p.nav{
 +
    font-size: 1.2em!important;
 +
    font-weight: bold;
 +
}
  
 +
.xjtuText h3 a {
 +
    color: inherit;
 +
    text-decoration: inherit;
 +
}
  
−
.box {
+
.xjtuText a.nav{
−
     width: 100%;
+
     text-decoration: none;
−
     background: #ccc;
+
     font-size: 1.2em;
 
}
 
}
  
−
.progress {
+
.xjtuText .imgWrapper {
−
     position: fixed;
+
     display: flex;
−
     top: 16px;
+
     flex-direction: column;
−
     left: 0;
+
     justify-content: center;
−
     height: 5px;
+
     align-items: center;
−
     background: snow;
+
     font-size: inherit;
 
}
 
}
  
−
.card:before {
+
.xjtuText .imgWrapper img{
−
     content: '';
+
    display: block;
 +
}
 +
 
 +
.xjtuText .imgWrapper .description{
 +
     margin-top: 1%;
 +
    color: grey;
 +
    font-family: 'eras';
 +
    font-size: 80%;
 +
    font-weight: 400;
 +
    text-align: center;
 +
}
 +
 
 +
.xjtuText .imgWrapper .description .tag{
 +
    color: black;
 +
}
 +
 
 +
.xjtuText .hoverHighlight::before {
 +
    transform: scaleX(0);
 +
    transform-origin: bottom right;
 +
}
 +
 
 +
.xjtuText .hoverHighlight:hover::before{
 +
    transform: scaleX(1);
 +
    transform-origin: bottom left;
 +
}
 +
 
 +
.xjtuText .hoverHighlight::before {
 +
    content: " ";
 +
    display: block;
 
     position: absolute;
 
     position: absolute;
−
     background: rgba(0, 0, 0, 0.3);
+
     top: 0; right: 0; bottom: 0; left: 0;
−
     width: 100%;
+
     inset: 0 0 0 0;
−
     height: 100%;
+
     background: hsl(200 100% 80%);
−
     top: 0;
+
     z-index: -1;
−
     left: 0;
+
     transition: transform .3s ease;
 
}
 
}
  
−
.card {
+
.xjtuText .underline {
−
     overflow: hidden;
+
     text-decoration: underline !important;
−
    background-size: cover;
+
−
    border: 0;
+
−
    margin-top: 30px;
+
 
}
 
}
  
−
.card img {
+
.xjtuText .sup {
−
     transition: 0.4s;
+
     vertical-align: super;
 +
    font-size: 0.8em;
 
}
 
}
  
−
.card:hover img {
+
.xjtuText .sub {
−
     transform: scale(1.02);
+
     vertical-align: sub;
 +
    font-size: 0.8em;
 
}
 
}
  
−
.align-padding-50-80 {
+
.xjtuText ul {
−
     padding: 50px 80px;
+
    font-family: 'eras', sans-serif !important;
 +
     color: white;
 +
    font-size: 18px;
 
}
 
}
  
−
.align-padding-50-120 {
+
img.hoverLarger {
−
     padding: 50px 120px;
+
    cursor: zoom-in;
 +
    transition: 1s;
 +
}
 +
 
 +
img.hoverLarger:hover{
 +
    transition: 1s;
 +
    transform: scale(1.3);
 +
}
 +
 
 +
.highlightBox {
 +
    width: 95%;
 +
    background-color: #3a3f4f;
 +
    padding: 1em;
 +
    border-radius: 15px;
 +
}
 +
 
 +
.highlightBox-light {
 +
    width: 95%;
 +
    background-color: rgba(250,250,250,0.8);
 +
     padding: 1em;
 +
    border-radius: 15px;
 +
}
 +
 
 +
.card.card-dark {
 +
    background-color: #3a3f4f;
 +
}
 +
 
 +
@media (max-width:768px) {
 +
    .page,.page-light{
 +
        padding: 20px 30px;
 +
    }
 
}
 
}
  
Line 414: Line 601:
 
     margin-top: 1em;
 
     margin-top: 1em;
 
     padding: 1em 1em;
 
     padding: 1em 1em;
−
     transition: 0.3s;
+
     transition: 0.2s;
−
}
+
     cursor: pointer;
−
 
+
−
.linkBox:hover {
+
−
     transform: scale(1.06);
+
 
}
 
}
  
 
.linkBox-items {
 
.linkBox-items {
−
     box-shadow: 2px 2px 5px slategray;
+
     box-shadow: 2px 2px 5px #454959;
 +
    background-color: #3a3f4f;
 
     text-align: center;
 
     text-align: center;
 
     border-radius: 5px;
 
     border-radius: 5px;
Line 428: Line 613:
  
 
.linkBox-items:hover {
 
.linkBox-items:hover {
−
     border-color: #222;
+
     border-color: #7298ff;
 
}
 
}
  
 
.linkBox span {
 
.linkBox span {
 
     font-size: 4em;
 
     font-size: 4em;
−
     color: slategray;
+
     color: #5472c3;
 
}
 
}
  
−
.linkBox:hover span {
 
−
    color: lightblue;
 
−
}
 
  
 
.linkBox h4 {
 
.linkBox h4 {
 
     padding-top: 10px;
 
     padding-top: 10px;
 +
    font-family: 'eras', sans-serif !important;
 
     font-size: 1.2em;
 
     font-size: 1.2em;
−
     color: #222;
+
     color: #5472c3;
−
     font-weight: 700;
+
     font-weight: 600!important;
 
     line-height: 1.5em;
 
     line-height: 1.5em;
 
     text-transform: capitalize;
 
     text-transform: capitalize;
 
}
 
}
  
−
 
+
.linkBox-items:hover span,
−
footer:before {
+
.linkBox-items:hover h4 {
−
    background: rgba(0, 0, 0, 0.58);
+
     color: #7298ff;
−
    position: absolute;
+
−
    width: 100%;
+
−
    height: 100%;
+
−
    content: '';
+
−
    top: 0;
+
−
     left: 0;
+
 
}
 
}
  
 
footer {
 
footer {
−
     background: no-repeat center;
+
     padding-top: 50px;
−
     background-size: cover;
+
    padding-bottom: 20px;
 +
     background-color: #222;
 
     position: relative;
 
     position: relative;
 
     overflow: hidden;
 
     overflow: hidden;
 
}
 
}
  
−
.footerBox {
+
footer h1, footer h2,
−
     margin: 10px 50px;
+
footer h3, footer h4 {
−
    position: relative;
+
     color: snow !important;
 
}
 
}
  
−
.footerBox a {
+
footer .follow,
−
     letter-spacing: 20px;
+
footer .sponsor,
−
     font-size: 2em;
+
footer .contact{
 +
     text-align: center;
 +
     align-items: center;
 
     color: snow;
 
     color: snow;
 
}
 
}
  
−
.footerBox h2 {
+
footer .sponsor{
−
     margin-bottom: 20px;
+
     height: 250px;
−
    color: snow;
+
−
    font-weight: 700;
+
 
}
 
}
  
−
.footerBox hr {
+
footer .sponsor a>img{
−
     background: snow 4px;
+
     opacity: 0.75;
 
}
 
}
  
−
.footerBox p{
+
footer .sponsor a>img:hover{
−
     font-family: 'roboto',sans-serif;
+
     opacity: 1;
−
    text-align: justify;
+
}
−
    letter-spacing: 1px;
+
 
−
    line-height: 1.2em;
+
footer .love{
−
     font-weight: 300;
+
     font-family: 'Times New Roman', Times, serif;
−
     font-size: 20px;
+
     font-size: 16px;
 
     color: snow;
 
     color: snow;
−
     margin-top: 1.5em;
+
     height: 30px;
 
}
 
}
  
−
.footer-logo {
+
footer .love>.left{
 
     position: relative;
 
     position: relative;
−
     font-weight: 700;
+
     left: 0;
−
     color: snow;
+
     padding: 0;
−
     text-decoration: none;
+
}
−
     font-size: 2em;
+
 
 +
footer .love>.right{
 +
     position: relative;
 +
     right: 0;
 +
    padding: 0;
 +
}
 +
 
 +
footer .follow h4,
 +
footer .sponsor h4,
 +
footer .contact h4{
 
     text-transform: uppercase;
 
     text-transform: uppercase;
−
     letter-spacing: 2px;
+
     font-family: "britanic", sans-serif;
−
     transition: 0;
+
     padding-bottom: 1em!important;
 
}
 
}
  
−
.app-icon {
+
footer .contact address{
−
     transition: ease-in-out 0.3s;
+
     font-family: 'eras', sans-serif;
 +
    font-size: 18px;
 +
    line-height: 28px;
 +
}
 +
footer .contact a{
 +
    color: inherit;
 
}
 
}
  
−
.app-icon:hover {
+
footer .love span.fa-heart{
−
     color: lightblue;
+
     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-instagram:hover {
 +
    color: #c13584;
 +
}
 +
.app-icon a .fa-weixin:hover {
 +
    color: #04BE02;
 +
}
 +
 +
/* ------- */
 
/* codrops */
 
/* codrops */
 +
/* ------- */
 +
 +
/* --------------------- */
 +
/* -----TiptoolAnimation------ */
 +
 +
.tooltip__neo {
 +
position: relative;
 +
display: inline-block;
 +
}
 +
 +
.tooltip__trigger {
 +
cursor: pointer;
 +
position: relative;
 +
}
 +
 +
.tooltip__trigger-text {
 +
display: block;
 +
padding: 0.85em;
 +
pointer-events: none;
 +
}
 +
 +
.tooltip__base {
 +
position: absolute;
 +
bottom: 1em;
 +
left: 15%;
 +
margin-left: -150px;
 +
width: 480px;
 +
height: 360px;
 +
display: flex;
 +
    align-items: center;
 +
    justify-content: center;
 +
opacity: 0;
 +
pointer-events: none;
 +
}
 +
 +
.tooltip__content {
 +
color: #4a4a4a!important;
 +
display: flex;
 +
position: relative;
 +
align-items: center;
 +
justify-content: center;
 +
width: 80%;
 +
padding: 0 1em;
 +
opacity: 0;
 +
font-size: 0.6em;
 +
    line-height: 1.2em;
 +
}
 +
 +
.tooltip__shape,
 +
.tooltip__deco {
 +
position: absolute;
 +
width: 100%;
 +
height: 100%;
 +
top: 0;
 +
left: 0;
 +
}
 +
 +
.tooltip__shape {
 +
fill: #eee;
 +
}
 +
 +
/* --------------------- */
 +
/* -----Tilteffect------ */
 +
 +
 +
.tilter {
 +
display: block;
 +
position: relative;
 +
width: 240px;
 +
height: 320px;
 +
color: #fff !important;
 +
flex: none;
 +
perspective: 1000px;
 +
}
 +
 +
.tilter * {
 +
pointer-events: none;
 +
}
 +
 +
.tilter:hover,
 +
.tilter:focus {
 +
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 !important;
 +
line-height: 1;
 +
}
 +
 +
.tilter__description {
 +
margin: 1em 0 0 0;
 +
    font-family: 'roboto', sans-serif !important;
 +
font-size: 0.85em!important;
 +
letter-spacing: 0.15em;
 +
}
 +
.tilter .tilter__figure::before {
 +
box-shadow: 0 30px 20px rgba(0,0,0,0.5);
 +
}
  
 +
/* --------------------- */
 +
/* -----hovereffect----- */
 
@font-face {
 
@font-face {
 
     font-weight: normal;
 
     font-weight: normal;
Line 537: Line 926:
 
     margin: 0 auto;
 
     margin: 0 auto;
 
     padding: 1em 0 4em;
 
     padding: 1em 0 4em;
−
     max-width: 1900vw;
+
     max-width: 100%;
 
     list-style: none;
 
     list-style: none;
 
     text-align: center;
 
     text-align: center;
Line 549: Line 938:
 
     float: left;
 
     float: left;
 
     overflow: hidden;
 
     overflow: hidden;
−
    margin: 10px 1%;
 
−
    min-width: 420px;
 
−
    max-width: 480px;
 
−
    max-height: 360px;
 
−
    width: 48%;
 
 
     background: #3085a3;
 
     background: #3085a3;
 
     text-align: center;
 
     text-align: center;
−
     cursor: pointer;
+
     cursor: default;
 
}
 
}
  
Line 568: Line 952:
  
 
.grid figure figcaption {
 
.grid figure figcaption {
−
    padding: 1em;
 
 
     color: #fff;
 
     color: #fff;
 
     text-transform: uppercase;
 
     text-transform: uppercase;
Line 581: Line 964:
 
}
 
}
  
−
.grid figure figcaption,
+
.grid figure figcaption {
−
.grid figure figcaption>a {
+
 
     position: absolute;
 
     position: absolute;
 
     top: 0;
 
     top: 0;
Line 604: Line 986:
 
     word-spacing: -0.15em;
 
     word-spacing: -0.15em;
 
     font-weight: 300;
 
     font-weight: 300;
 +
    margin: 0;
 
}
 
}
  
 
.grid figure h2 span {
 
.grid figure h2 span {
−
     font-weight: 800;
+
     font-weight: 700;
 
}
 
}
  
Line 617: Line 1,000:
 
.grid figure p {
 
.grid figure p {
 
     letter-spacing: 1px;
 
     letter-spacing: 1px;
−
     font-size: 68.5%;
+
     font-size: 68%;
 
}
 
}
  
 +
/* zoe */
  
−
/* Individual effects */
+
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;
−
 
+
    }
−
/***** Zoe *****/
+
   
−
 
+
}
−
 
+
−
/*---------------*/
+
  
 
figure.effect-zoe figcaption {
 
figure.effect-zoe figcaption {
 
     top: auto;
 
     top: auto;
 
     bottom: 0;
 
     bottom: 0;
−
    padding: 1em;
 
 
     height: 3.75em;
 
     height: 3.75em;
−
     background: #fff;
+
     background: snow;
 
     color: #3c4a50;
 
     color: #3c4a50;
−
     -webkit-transition: -webkit-transform 0.35s;
+
     -webkit-transition: -webkit-transform 0.25s;
−
     transition: transform 0.35s;
+
     transition: transform 0.25s;
 
     -webkit-transform: translate3d(0, 100%, 0);
 
     -webkit-transform: translate3d(0, 100%, 0);
 
     transform: translate3d(0, 100%, 0);
 
     transform: translate3d(0, 100%, 0);
Line 649: Line 1,035:
 
}
 
}
  
−
figure.effect-zoe p.icon-links a {
+
figure.effect-zoe .hitLikeBtn {
 
     float: right;
 
     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 {
 
figure.effect-zoe p.description {
 
     position: absolute;
 
     position: absolute;
−
     bottom: 8em;
+
     bottom: 7em;
−
     padding: 2em;
+
     padding: 1em;
−
     color: #fff;
+
     color: snow;
 
     text-transform: none;
 
     text-transform: none;
−
     font-size: 90%;
+
    font-family: 'eras',sans-serif!important;
 +
     font-size: 16px!important;
 
     opacity: 0;
 
     opacity: 0;
 
     -webkit-backface-visibility: hidden;
 
     -webkit-backface-visibility: hidden;
 
     /* Fix for Chrome 37.0.2062.120 (Mac) */
 
     /* Fix for Chrome 37.0.2062.120 (Mac) */
 
     -webkit-transition: opacity 0.35s;
 
     -webkit-transition: opacity 0.35s;
−
     transition: opacity 0.35s;
+
     transition: opacity 0.25s;
 
     -webkit-backface-visibility: hidden;
 
     -webkit-backface-visibility: hidden;
 
     /* Fix for Chrome 37.0.2062.120 (Mac) */
 
     /* Fix for Chrome 37.0.2062.120 (Mac) */
 
}
 
}
  
−
figure.effect-zoe h2,
+
figure.effect-zoe h2{
−
figure.effect-zoe p.icon-links a {
+
     -webkit-transition: -webkit-transform 0.25s;
−
     -webkit-transition: -webkit-transform 0.35s;
+
     transition: transform 0.25s;
−
     transition: transform 0.35s;
+
 
     -webkit-transform: translate3d(0, 200%, 0);
 
     -webkit-transform: translate3d(0, 200%, 0);
 
     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';
 
 
}
 
}
  
Line 715: Line 1,073:
 
figure.effect-zoe:hover figcaption,
 
figure.effect-zoe:hover figcaption,
 
figure.effect-zoe:hover h2,
 
figure.effect-zoe:hover h2,
−
figure.effect-zoe:hover p.icon-links a {
+
figure.effect-zoe:hover .lottiebtn {
 
     -webkit-transform: translate3d(0, 0, 0);
 
     -webkit-transform: translate3d(0, 0, 0);
 
     transform: translate3d(0, 0, 0);
 
     transform: translate3d(0, 0, 0);
Line 723: Line 1,081:
 
     -webkit-transition-delay: 0.05s;
 
     -webkit-transition-delay: 0.05s;
 
     transition-delay: 0.05s;
 
     transition-delay: 0.05s;
 +
    color: inherit;
 
}
 
}
  
−
figure.effect-zoe:hover p.icon-links a:nth-child(3) {
+
figure.effect-zoe:hover .lottiebtn:nth-child(2) {
−
    -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;
 
     -webkit-transition-delay: 0.15s;
 
     transition-delay: 0.15s;
 
     transition-delay: 0.15s;
 
}
 
}
  
−
figure.effect-zoe:hover p.icon-links a:first-child {
+
figure.effect-zoe:hover .lottiebtn:first-child {
 
     -webkit-transition-delay: 0.2s;
 
     -webkit-transition-delay: 0.2s;
 
     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);
 +
}
  
−
/* ---segmenter--- */
+
@media (max-width:768px) {
 +
    figure.effect-zoe figcaption h2{
 +
        font-size: 1rem;
 +
    }
 +
    figure.effect-zoe figcaption {
 +
        height: 2em;
 +
    }
 +
}
  
−
 
+
.headline-left,
−
/* --------------- */
+
.headline-right {
−
 
+
−
.trigger-headline {
+
−
    top: 0;
+
−
    left: 0;
+
 
     position: absolute;
 
     position: absolute;
−
     font-size: 6vw;
+
     font-family: 'angella',sans-serif;
−
    text-transform: uppercase;
+
 
     pointer-events: none;
 
     pointer-events: none;
 
     line-height: 1;
 
     line-height: 1;
−
     width: 100%;
+
     width: 100vw;
−
     height: 100%;
+
     height: 100vh;
 
     display: -webkit-flex;
 
     display: -webkit-flex;
 
     display: -ms-flexbox;
 
     display: -ms-flexbox;
Line 768: Line 1,130:
 
     margin: 0;
 
     margin: 0;
 
     color: snow;
 
     color: snow;
−
     z-index: 500;
+
     text-shadow: 2px 2px 10px #222;
 +
}
 +
.headline-left{
 +
    top: -10vh;
 +
    left: -11vw;
 +
    font-size: 13vw;
 
}
 
}
  
−
.trigger-headline span {
+
.headline-right {
−
     display: inline-block;
+
     top: 15vh;
−
     position: relative;
+
     right: -6vw;
−
    padding: 0 5vw;
+
     font-size: 19vw;
−
    -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;
+
 
}
 
}
  
−
 
+
#canvas {
−
.segmenter {
+
    position: relative;
 +
    top: 7px;
 +
    overflow: hidden;
 
     width: 100vw;
 
     width: 100vw;
 
     height: 100vh;
 
     height: 100vh;
−
    position: relative;
+
     background-color: #333;
−
    overflow: hidden;
+
−
     background-size: cover;
+
−
    z-index: -1;
+
 
}
 
}
 +
/* --------- */
 +
/* 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;
 +
}
  
−
.segmenter__image {
+
.dialog {
−
    width: 100%;
+
position: fixed;
−
    display: block;
+
display: -webkit-flex;
 +
display: flex;
 +
-webkit-align-items: center;
 +
align-items: center;
 +
-webkit-justify-content: center;
 +
justify-content: center;
 +
pointer-events: none;
 
}
 
}
  
−
.segmenter__background,
+
.dialog--open
−
.segmenter__pieces,
+
{
−
.segmenter__piece-wrap,
+
     z-index: 999;
−
.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 {
+
.dialog__overlay {
−
    -webkit-transition: -webkit-transform 0.2s ease-out;
+
position: absolute;
−
    transition: transform 0.2s ease-out;
+
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;
 
}
 
}
  
−
.segmenter__pieces {
+
.dialog--open .dialog__overlay {
−
    -webkit-perspective: 400px;
+
opacity: 1;
−
    perspective: 400px;
+
pointer-events: auto;
 
}
 
}
  
−
.segmenter__background,
+
.dialog__content {
−
.segmenter__piece {
+
width: 50%;
−
    background-size: cover;
+
height: 70%;
−
    background-repeat: no-repeat;
+
background: snow;
−
    background-position: 50% 50%;
+
padding: 4em;
 +
text-align: center;
 +
position: relative;
 +
z-index: 5;
 +
opacity: 0;
 +
overflow-y: scroll;
 
}
 
}
  
−
.segmenter__shadow {
+
.dialog--open .dialog__content {
−
    position: absolute;
+
pointer-events: auto;
−
    opacity: 0;
+
−
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.7);
+
 
}
 
}
  
 +
.dialogButton{
 +
width: 200px;
 +
border: solid 2px #2347a3;
 +
background-color: #2347a3;
 +
    color: snow;
 +
    border-radius: 5px;
 +
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----- */
 
/* -----to-top btn----- */
  
 
#to-top {
 
#to-top {
 +
    cursor: pointer;
 
     display: block;
 
     display: block;
 
     position: fixed;
 
     position: fixed;
−
     bottom: 8%;
+
     bottom: 40px;
−
     right: 2%;
+
     right: 20px;
−
     z-index: 10;
+
     z-index: 100;
 
}
 
}
 
#to-top a{
 
#to-top a{
−
     color: slategray;
+
     color: #2347a3;
 
}
 
}
  
 
#to-top a:active,
 
#to-top a:active,
 
#to-top a:hover{
 
#to-top a:hover{
−
     color: lightblue;
+
     color: #3151a3;
 +
    ;
 
}
 
}
  
−
 
+
@media (max-width:768px){
 +
    #to-top{
 +
        bottom: 20px;
 +
        right: 10px;
 +
    }
 +
}
 
/* ----animateBtn------ */
 
/* ----animateBtn------ */
  
−
 
+
.hitLikeBtn, .viewBtn {
−
.hitLikeBtn {
+
    cursor: pointer;
−
     width: 45px;
+
     width: 90px;
−
     height: 45px;
+
     height: 90px;
 +
    margin-bottom: -10px;
 
}
 
}
 +
</style>
 +
</html>

Latest revision as of 08:59, 21 October 2021