/* --------------------------------
Primary style
-------------------------------- */
*, *::after, *::before {
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
font-family: sans-serif;
background-color: #ffffff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
text-decoration: none;
}
/* --------------------------------
Shared style
-------------------------------- */
.cd-btn {
display: inline-block;
padding: 1.6em 2.4em;
font-size: 1.4rem;
letter-spacing: .15em;
font-weight: 700;
text-transform: uppercase;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
transition: box-shadow .3s;
}
.cd-btn:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
h1 {
line-height: 1;
}
/* Main Content */
.cd-main-content {
position: relative;
z-index: 1;
width: 100%;
height: 100vh;
/* vertically align its content */
display: table;
}
.cd-main-content .center {
/* vertically align inside parent element */
display: table-cell;
vertical-align: middle;
text-align: center;
}
/* Modal Window */
.cd-modal {
position: fixed;
top: 0;
left: 0;
z-index: 3;
height: 100%;
width: 100%;
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-modal .modal-content {
height: 100%;
overflow-y: auto;
padding: 3em 5%;
}
.cd-modal h1, .cd-modal h2 {
text-align: center;
}
.cd-modal p {
line-height: 1.6;
margin: 2em auto;
max-width: 800px;
}
.cd-modal .modal-close {
/* 'X' icon */
position: absolute;
z-index: 1;
top: 20px;
right: 5%;
height: 45px;
width: 45px;
border-radius: 50%;
overflow: hidden;
white-space: nowrap;
text-indent: 100%;
color: transparent;
visibility: hidden;
opacity: 0;
transform: scale(0);
transition: transform .3s 0s, visibility 0s .3s, opacity .3s 0s;
}
.cd-modal .modal-close::before, .cd-modal .modal-close::after {
content: '';
display: inline-block;
position: absolute;
height: 2px;
width: 20px;
top: calc(50% - 1px);
left: calc(50% - 10px);
}
.cd-modal .modal-close::before {
transform: rotate(45deg);
}
.cd-modal .modal-close::after {
transform: rotate(-45deg);
}
.cd-modal.visible {
opacity: 1;
visibility: visible;
transition: opacity .7s, visibility 0s;
}
.cd-modal.visible .modal-content {
/* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
-webkit-overflow-scrolling: touch;
}
.cd-modal.visible .modal-close {
visibility: visible;
opacity: 1;
transition: transform .3s 0s, visibility 0s 0s, opacity .3s 0s;
transform: scale(1);
}
@media only screen and (min-width: 1100px) {
.cd-modal .modal-content {
padding: 6em 5%;
}
.cd-modal .modal-close {
height: 60px;
width: 60px;
}
.cd-modal .modal-close::before, .cd-modal .modal-close::after {
height: 2px;
width: 26px;
top: calc(50% - 1px);
left: calc(50% - 13px);
}
.cd-modal p {
font-size: 2rem;
}
}
/* Transition Layer */
.cd-transition-layer {
position: fixed;
top: 0;
left: 0;
z-index: 2;
height: 100%;
width: 100%;
opacity: 0;
visibility: hidden;
overflow: hidden;
}
.cd-transition-layer .bg-layer {
position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-2%);
/* its dimentions will be overwritten using jQuery to proportionally fit the viewport */
height: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: 0 0;
}
.cd-transition-layer.visible {
opacity: 1;
visibility: visible;
}
.cd-transition-layer.visible .bg-layer {
transform: translateY(-50%) translateX(-98%);
}
.cd-transition-layer.opening .bg-layer, .cd-transition-layer.closing .bg-layer {
animation-duration: .8s;
animation-fill-mode: forwards;
}
.no-cssanimations .cd-transition-layer {
display: none;
}
/* --------------------------------
Gooey Effect
-------------------------------- */
.gooey-transition {
font-family: "PT Sans", sans-serif;
color: #ffffff;
}
.gooey-transition h1, .gooey-transition h2 {
margin-bottom: .4em;
font-size: 4rem;
font-weight: 700;
font-family: "Averia Sans Libre", cursive;
}
.gooey-transition .cd-btn {
background: #cdf199;
color: #053644;
border-radius: 50em;
}
.gooey-transition .cd-main-content {
background: #053644;
}
.gooey-transition .cd-modal {
background: #466c5e;
}
.gooey-transition .cd-modal .modal-content {
color: #ffffff;
}
.gooey-transition .cd-modal .modal-close::before,
.gooey-transition .cd-modal .modal-close::after {
background: #ffffff;
}
.gooey-transition .cd-modal .modal-close {
background: #3c5c50;
}
.gooey-transition .cd-modal .modal-close:hover {
background: #314c42;
}
.gooey-transition .cd-transition-layer .bg-layer {
/* sprite composed of 25 frames */
width: 2500%;
background-image: url(6-gooey.png);
}
.gooey-transition .cd-transition-layer.opening .bg-layer {
animation: cd-sequence 0.8s steps(24) forwards;
}
.gooey-transition .cd-transition-layer.closing .bg-layer {
animation: cd-sequence 0.8s steps(24) forwards reverse;
}
@media only screen and (min-width: 768px) {
.gooey-transition h1 {
font-size: 8rem;
}
.gooey-transition h2 {
font-size: 6rem;
}
}
/* --------------------------------
Animations
-------------------------------- */
@keyframes cd-sequence {
0% {
/* translateX(-2%) is used to horizontally center the first frame inside the viewport */
transform: translateY(-50%) translateX(-2%);
}
100% {
/* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport */
transform: translateY(-50%) translateX(-98%);
}
}
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 337