Template:HZAU-China/CSS/style
/* --------------------------------
Primary style
*/
- , *::after, *::before {
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem; font-family: "Open Sans", sans-serif; color: #363558; background-color: #1c1726;
}
a {
color: #544173; text-decoration: none;
}
h1, h2 {
font-family: "Vollkorn", serif;
}
/* --------------------------------
Patterns - reusable parts of our design
*/
.overflow-hidden {
overflow: hidden;
}
/* --------------------------------
Header
*/
/*header {
height: 170px; line-height: 170px; text-align: center; background: #ffffff;
} header h1 {
font-size: 2.2rem; color: #363558;
} @media only screen and (min-width: 600px) {
header { height: 200px; line-height: 200px; } header h1 { font-size: 3rem; }
}*/
/* --------------------------------
Main content
*/
.cd-main {
overflow-x: hidden;
} .cd-main::before {
/* never visible - this is used in jQuery to check the current MQ */ display: none; content: 'mobile';
} .cd-main > * {
-webkit-transition: -webkit-transform 0.5s 0.4s; -moz-transition: -moz-transform 0.5s 0.4s; transition: transform 0.5s 0.4s;
} .cd-main.fold-is-open > * {
/* on mobile - translate .cd-main content to the right when the .cd-folding-panel is open */ -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-transition: -webkit-transform 0.5s 0s; -moz-transition: -moz-transform 0.5s 0s; transition: transform 0.5s 0s;
} @media only screen and (min-width: 600px) {
.cd-main.fold-is-open > * { -webkit-transform: translateX(600px); -moz-transform: translateX(600px); -ms-transform: translateX(600px); -o-transform: translateX(600px); transform: translateX(600px); }
} @media only screen and (min-width: 1100px) {
.cd-main::before { /* never visible - this is used in jQuery to check the current MQ */ content: 'desktop'; } .cd-main.fold-is-open > * { /* reset style - on bigger devices we translate the gallery items */ -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
}
.cd-gallery::after {
clear: both; content: ""; display: table;
} .cd-gallery::before {
/* this is the dark layer covering the .cd-gallery when the .cd-folding-panel is open */ display: block; content: ; position: absolute; z-index: 1; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(28, 23, 38, 0.6); opacity: 0; visibility: hidden; -webkit-transition: opacity 0.5s 0.4s, visibility 0s 0.9s; -moz-transition: opacity 0.5s 0.4s, visibility 0s 0.9s; transition: opacity 0.5s 0.4s, visibility 0s 0.9s;
} .fold-is-open .cd-gallery::before {
visibility: visible; opacity: 1; -webkit-transition: opacity 0.5s 0s, visibility 0s 0s; -moz-transition: opacity 0.5s 0s, visibility 0s 0s; transition: opacity 0.5s 0s, visibility 0s 0s;
}
.cd-item {
width: 100%; height: 300px; text-align: center; /* Force Hardware Acceleration */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.5s 0.4s; -moz-transition: -moz-transform 0.5s 0.4s; transition: transform 0.5s 0.4s;
} .cd-item > a {
display: table; height: 100%; width: 100%; overflow: hidden; color: #ffffff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
} .cd-item > a.dark-text {
color: #363558;
} .cd-item > a.dark-text b {
border-color: #363558;
} .cd-item div {
display: table-cell; vertical-align: middle;
} .cd-item:nth-of-type(1) {
background-color: #363558;
} .cd-item:nth-of-type(2) {
background-color: #544173;
} .cd-item:nth-of-type(3) {
background-color: #dadcdc;
} .cd-item:nth-of-type(4) {
background-color: #65d29b;
} .cd-item h2 {
font-size: 2.2rem;
} .cd-item p {
line-height: 1.2; font-size: 1.4rem; opacity: 0.6; padding: 1em 0;
} .cd-item b {
display: inline-block; font-size: 1.2rem; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; padding: 1em 1.3em; border-radius: 50em; border: 1px solid #ffffff;
} @media only screen and (min-width: 1100px) {
.cd-item { width: 50%; float: left; height: 520px; -webkit-transition: -webkit-transform 0.5s 0.4s; -moz-transition: -moz-transform 0.5s 0.4s; transition: transform 0.5s 0.4s; } .cd-item h2 { font-size: 3rem; } .cd-item p { font-size: 1.6rem; } .cd-item h2, .cd-item p { -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); -webkit-transition: -webkit-transform 0.3s 0.1s; -moz-transition: -moz-transform 0.3s 0.1s; transition: transform 0.3s 0.1s; } .cd-item b { opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); -webkit-transition: opacity 0.3s 0s, -webkit-transform 0.3s 0s; -moz-transition: opacity 0.3s 0s, -moz-transform 0.3s 0s; transition: opacity 0.3s 0s, transform 0.3s 0s; } .no-touch .cd-item a:hover h2, .no-touch .cd-item a:hover p { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.3s 0s; -moz-transition: -moz-transform 0.3s 0s; transition: transform 0.3s 0s; } .no-touch .cd-item a:hover b { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity 0.3s 0.1s, -webkit-transform 0.3s 0.1s; -moz-transition: opacity 0.3s 0.1s, -moz-transform 0.3s 0.1s; transition: opacity 0.3s 0.1s, transform 0.3s 0.1s; } .fold-is-open .cd-item { -webkit-transition: -webkit-transform 0.5s 0s; -moz-transition: -moz-transform 0.5s 0s; transition: transform 0.5s 0s; -webkit-transform: translateX(-400px); -moz-transform: translateX(-400px); -ms-transform: translateX(-400px); -o-transform: translateX(-400px); transform: translateX(-400px); } .fold-is-open .cd-item:nth-of-type(2n) { -webkit-transform: translateX(400px); -moz-transform: translateX(400px); -ms-transform: translateX(400px); -o-transform: translateX(400px); transform: translateX(400px); }
}
/* --------------------------------
folding panel
*/
.cd-folding-panel {
position: fixed; z-index: 1; top: 0; left: 0; height: 100vh; width: 100%; visibility: hidden; overflow: hidden; -webkit-transition: visibility 0s 0.9s; -moz-transition: visibility 0s 0.9s; transition: visibility 0s 0.9s;
} .cd-folding-panel .fold-left, .cd-folding-panel .fold-right {
/* the :after elements of .fold-left and .fold-right are the 2 fold sides */ width: 100%; height: 100vh; overflow: hidden; position: relative; /* enable a 3D-space for children elements */ -webkit-perspective: 2000px; -moz-perspective: 2000px; perspective: 2000px;
} .cd-folding-panel .fold-left::after, .cd-folding-panel .fold-right::after {
/* 2 fold sides */ content: ; position: absolute; top: 0; left: 0; height: 100%; width: 100%; /* Force Hardware Acceleration */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.5s 0.4s, background-color 0.5s 0.4s; -moz-transition: -moz-transform 0.5s 0.4s, background-color 0.5s 0.4s; transition: transform 0.5s 0.4s, background-color 0.5s 0.4s;
} .cd-folding-panel .fold-right {
-webkit-perspective-origin: 0% 50%; -moz-perspective-origin: 0% 50%; perspective-origin: 0% 50%;
} .cd-folding-panel .fold-right::after {
-webkit-transform-origin: right center; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; -webkit-transform: translateX(-100%) rotateY(-90deg); -moz-transform: translateX(-100%) rotateY(-90deg); -ms-transform: translateX(-100%) rotateY(-90deg); -o-transform: translateX(-100%) rotateY(-90deg); transform: translateX(-100%) rotateY(-90deg); background-color: #c0c3c3;
} .cd-folding-panel .fold-left {
/* on mobile only the right fold side is visible */ display: none;
} .cd-folding-panel .fold-left::after {
background-color: #f9fafa;
} .cd-folding-panel .cd-close {
/* 'X' close icon */ position: absolute; z-index: 1; display: inline-block; top: 10px; right: 10px; height: 44px; width: 44px; /* image replacement */ overflow: hidden; text-indent: 100%; white-space: nowrap; opacity: 0; -webkit-transition: opacity 0.2s 0s; -moz-transition: opacity 0.2s 0s; transition: opacity 0.2s 0s;
} .cd-folding-panel .cd-close::after, .cd-folding-panel .cd-close::before {
/* lines of 'X' icon */ content: ; position: absolute; height: 3px; width: 32px; left: 50%; top: 50%; background-color: #544173; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; transition: opacity 0.2s;
} .cd-folding-panel .cd-close::after {
-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg); -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg); -o-transform: translateX(-50%) translateY(-50%) rotate(45deg); transform: translateX(-50%) translateY(-50%) rotate(45deg);
} .cd-folding-panel .cd-close::before {
-webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg); -moz-transform: translateX(-50%) translateY(-50%) rotate(-45deg); -ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg); -o-transform: translateX(-50%) translateY(-50%) rotate(-45deg); transform: translateX(-50%) translateY(-50%) rotate(-45deg);
} .cd-folding-panel.is-open {
visibility: visible; -webkit-transition: visibility 0s 0s; -moz-transition: visibility 0s 0s; transition: visibility 0s 0s;
} .cd-folding-panel.is-open .fold-right::after, .cd-folding-panel.is-open .fold-left::after {
-webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.5s 0s, background-color 0.5s 0s; -moz-transition: -moz-transform 0.5s 0s, background-color 0.5s 0s; transition: transform 0.5s 0s, background-color 0.5s 0s;
} .cd-folding-panel.is-open .fold-right::after {
background-color: #f9fafa;
} .cd-folding-panel.is-open .cd-close {
opacity: 1; -webkit-transition: opacity 0.2s 0.5s; -moz-transition: opacity 0.2s 0.5s; transition: opacity 0.2s 0.5s;
} @media only screen and (min-width: 600px) {
.cd-folding-panel { width: 600px; }
} @media only screen and (min-width: 1100px) {
.cd-folding-panel { left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); width: 800px; } .cd-folding-panel .fold-left, .cd-folding-panel .fold-right { width: 50%; float: left; height: 100%; } .cd-folding-panel .fold-right { /* change perspective-origin so that the 2 fold sides have the same vanishing point */ -webkit-perspective-origin: 0% 50%; -moz-perspective-origin: 0% 50%; perspective-origin: 0% 50%; } .cd-folding-panel .fold-right::after { -webkit-transform-origin: right center; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; -webkit-transform: translateX(-100%) rotateY(-90deg); -moz-transform: translateX(-100%) rotateY(-90deg); -ms-transform: translateX(-100%) rotateY(-90deg); -o-transform: translateX(-100%) rotateY(-90deg); transform: translateX(-100%) rotateY(-90deg); } .cd-folding-panel .fold-left { display: block; /* change perspective-origin so that the 2 fold sides have the same vanishing point */ -webkit-perspective-origin: 100% 50%; -moz-perspective-origin: 100% 50%; perspective-origin: 100% 50%; } .cd-folding-panel .fold-left::after { -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; -webkit-transform: translateX(100%) rotateY(90deg); -moz-transform: translateX(100%) rotateY(90deg); -ms-transform: translateX(100%) rotateY(90deg); -o-transform: translateX(100%) rotateY(90deg); transform: translateX(100%) rotateY(90deg); }
}
.cd-fold-content {
position: absolute; top: 0; left: 0; height: 100%; width: 100%; padding: 4em 2em; visibility: hidden; -webkit-transition: visibility 0s 0.4s; -moz-transition: visibility 0s 0.4s; transition: visibility 0s 0.4s;
} .cd-fold-content > * {
opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px);
} .cd-fold-content h2 {
font-size: 2.4rem; -webkit-transition: -webkit-transform 0.2s 0.2s, opacity 0.2s 0.2s; -moz-transition: -moz-transform 0.2s 0.2s, opacity 0.2s 0.2s; transition: transform 0.2s 0.2s, opacity 0.2s 0.2s;
} .cd-fold-content p, .cd-fold-content em {
line-height: 1.6;
} .cd-fold-content em {
display: inline-block; margin: 1em 0; font-family: "Vollkorn", serif; font-size: 1.8rem; color: #7a78ae; -webkit-transition: -webkit-transform 0.2s 0.1s, opacity 0.2s 0.1s; -moz-transition: -moz-transform 0.2s 0.1s, opacity 0.2s 0.1s; transition: transform 0.2s 0.1s, opacity 0.2s 0.1s;
} .cd-fold-content p {
margin-bottom: 1em; font-size: 1.4rem; -webkit-transition: -webkit-transform 0.2s 0s, opacity 0.2s 0s; -moz-transition: -moz-transform 0.2s 0s, opacity 0.2s 0s; transition: transform 0.2s 0s, opacity 0.2s 0s;
} .is-open .cd-fold-content {
overflow-y: auto; -webkit-overflow-scrolling: touch; visibility: visible; -webkit-transition: visibility 0s 0.5s; -moz-transition: visibility 0s 0.5s; transition: visibility 0s 0.5s;
} .is-open .cd-fold-content > * {
opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);
} .is-open .cd-fold-content h2 {
-webkit-transition: -webkit-transform 0.2s 0.5s, opacity 0.2s 0.5s; -moz-transition: -moz-transform 0.2s 0.5s, opacity 0.2s 0.5s; transition: transform 0.2s 0.5s, opacity 0.2s 0.5s;
} .is-open .cd-fold-content em {
-webkit-transition: -webkit-transform 0.2s 0.6s, opacity 0.2s 0.6s; -moz-transition: -moz-transform 0.2s 0.6s, opacity 0.2s 0.6s; transition: transform 0.2s 0.6s, opacity 0.2s 0.6s;
} .is-open .cd-fold-content p {
-webkit-transition: -webkit-transform 0.2s 0.7s, opacity 0.2s 0.7s; -moz-transition: -moz-transform 0.2s 0.7s, opacity 0.2s 0.7s; transition: transform 0.2s 0.7s, opacity 0.2s 0.7s;
} @media only screen and (min-width: 600px) {
.cd-fold-content h2 { font-size: 3.2rem; }
} @media only screen and (min-width: 1100px) {
.cd-fold-content { padding: 4em; } .cd-fold-content > * { -webkit-transform: translateY(40px); -moz-transform: translateY(40px); -ms-transform: translateY(40px); -o-transform: translateY(40px); transform: translateY(40px); } .cd-fold-content em { font-size: 2.2rem; } .cd-fold-content p { font-size: 1.6rem; }
}
/* --------------------------------
Javascript disabled
*/
.no-js .cd-fold-content.single-page {
position: static; visibility: visible; height: auto; background-color: #dadcdc;
} .no-js .cd-fold-content.single-page > * {
opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);
}