/* --------------------------------
Primary style
*/
@font-face{
font-family: Ubuntu; src: url("../fonts/Ubuntu.ttf");
}
html * {
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
- , *:after, *:before {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
body {
font-size: 100%; font-family: "Ubuntu", sans-serif; color: #3e3947; background-color: white;
}
body, html {
height: 100%;
}
a {
color: #3e3947; text-decoration: none;
}
img {
max-width: 100%;
}
/* --------------------------------
Modules - reusable parts of our design
*/
.cd-img-replace {
/* replace text with a background-image */ display: inline-block; overflow: hidden; text-indent: 100%; white-space: nowrap;
}
/* --------------------------------
Main components
*/
.cd-section {
min-height: 100%; position: relative; padding: 2em 0;
} .cd-section:nth-of-type(odd) {
background-color: #3e3947;
} .cd-section:nth-of-type(odd) p {
color: #898099;
} .cd-section:nth-of-type(even) {
background-color: #745360;
} .cd-section:nth-of-type(even) p {
color: #bda3ad;
} /*.cd-section h1, .cd-section p {*/ /* position: absolute;*/ /* left: 50%;*/ /* top: 50%;*/ /* bottom: auto;*/ /* right: auto;*/ /* -webkit-transform: translateX(-50%) translateY(-50%);*/ /* -moz-transform: translateX(-50%) translateY(-50%);*/ /* -ms-transform: translateX(-50%) translateY(-50%);*/ /* -o-transform: translateX(-50%) translateY(-50%);*/ /* transform: translateX(-50%) translateY(-50%);*/ /* width: 90%;*/ /* max-width: 768px;*/ /* text-align: center;*/ /*}*/ .cd-section h1, .cd-section p {
position: relative; /*position: absolute;*/ /*left: 50%;*/ /*top: 50%;*/ bottom: auto; /*right: auto;*/ /*-webkit-transform: translateX(-50%) translateY(-50%);*/ /*-moz-transform: translateX(-50%) translateY(-50%);*/ /*-ms-transform: translateX(-50%) translateY(-50%);*/ /*-o-transform: translateX(-50%) translateY(-50%);*/ /*transform: translateX(-50%) translateY(-50%);*/ /*width: 90%;*/ /*max-width: 768px;*/ /*text-align: center;*/
} .cd-section h1#description {
color: red; font-weight: 300; text-transform: uppercase; /*font-size: 200px;*/ font-size: 10.25rem;
} .cd-section p {
line-height: 1.6;
}
/*/*/ @media only screen and (min-width: 768px) {
.cd-section h1 { font-size: 30px; font-size: 1.875rem; } .cd-section p { font-size: 20px; font-size: 1.25rem; line-height: 2; }
}
.cd-scroll-down {
position: absolute; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); bottom: 20px; width: 38px; height: 44px; background: url("../img/cd-arrow-bottom.svg") no-repeat center center;
}
/* No Touch devices */ .cd-nav-trigger {
display: none;
}
.no-touch #cd-vertical-nav {
position: fixed; right: 40px; top: 25%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: 1;
} .no-touch #cd-vertical-nav li {
text-align: right;
} .no-touch #cd-vertical-nav a {
display: inline-block; /* prevent weird movements on hover when you use a CSS3 transformation - webkit browsers */ -webkit-backface-visibility: hidden; backface-visibility: hidden;
} .no-touch #cd-vertical-nav a:after {
content: ""; display: table; clear: both;
} .no-touch #cd-vertical-nav a span {
float: right; display: inline-block; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -ms-transform: scale(0.6); -o-transform: scale(0.6); transform: scale(0.6);
} .no-touch #cd-vertical-nav a.is-selected span {
-webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);
}
.no-touch #cd-vertical-nav a:hover span {
-webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);
} /*.no-touch #cd-vertical-nav a:hover .cd-label {*/ /* opacity: 1;*/ /*}*/
.no-touch #cd-vertical-nav a.is-selected .cd-label {
opacity: 1;
}
.no-touch #cd-vertical-nav a.is-selected .cd-dot {
/*点到达时的颜色*/ background-color: white;
} .no-touch #cd-vertical-nav .cd-dot {
position: relative; /* we set a top value in order to align the dot with the label. If you change label's font, you may need to change this top value*/ top: 13px; height: 12px; width: 12px; border-radius: 50%; /*点未到达时的颜色*/ background-color: dodgerblue; -webkit-transition: -webkit-transform 0.2s, background-color 0.5s; -moz-transition: -moz-transform 0.2s, background-color 0.5s; transition: transform 0.2s, background-color 0.5s; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%;
} .no-touch #cd-vertical-nav .cd-label {
position: relative; margin-right: 10px; /*padding: .4em .5em;*/ padding: 0; color: white; font-size: 34px; /*font-size: 0.875rem;*/ -webkit-transition: -webkit-transform 0.2s, opacity 0.2s; -moz-transition: -moz-transform 0.2s, opacity 0.2s; transition: transform 0.2s, opacity 0.2s; /*文字未hover时的透明度*/ opacity: 0.5; -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%;
}
/* Touch devices */ .touch .cd-nav-trigger {
display: block; z-index: 2; position: fixed; bottom: 30px; right: 5%; height: 44px; width: 44px; border-radius: 0.25em; background: rgba(255, 255, 255, 0.9);
} .touch .cd-nav-trigger span {
position: absolute; height: 4px; width: 4px; background-color: #3e3947; border-radius: 50%; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
} .touch .cd-nav-trigger span::before, .touch .cd-nav-trigger span::after {
content: ; height: 100%; width: 100%; position: absolute; left: 0; background-color: inherit; border-radius: inherit;
} .touch .cd-nav-trigger span::before {
top: -9px;
} .touch .cd-nav-trigger span::after {
bottom: -9px;
}
.touch #cd-vertical-nav {
position: fixed; z-index: 1; right: 5%; bottom: 30px; width: 90%; max-width: 400px; max-height: 90%; overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; border-radius: 0.25em; background-color: rgba(255, 255, 255, 0.9);
} .touch #cd-vertical-nav a {
display: block; padding: 1em; border-bottom: 1px solid rgba(62, 57, 71, 0.1);
} .touch #cd-vertical-nav a span:first-child {
display: none;
} .touch #cd-vertical-nav a.is-selected span:last-child {
color: #d88683;
} .touch #cd-vertical-nav.open {
-webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);
} .touch #cd-vertical-nav.open + .cd-nav-trigger {
background-color: transparent;
} .touch #cd-vertical-nav.open + .cd-nav-trigger span {
background-color: rgba(62, 57, 71, 0);
} .touch #cd-vertical-nav.open + .cd-nav-trigger span::before, .touch #cd-vertical-nav.open + .cd-nav-trigger span::after {
background-color: #3e3947; height: 3px; width: 20px; border-radius: 0; left: -8px;
} .touch #cd-vertical-nav.open + .cd-nav-trigger span::before {
-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 1px;
} .touch #cd-vertical-nav.open + .cd-nav-trigger span::after {
-webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); bottom: 0;
} .touch #cd-vertical-nav li:last-child a {
border-bottom: none;
}
@media only screen and (min-width: 768px) {
.touch .cd-nav-trigger, .touch #cd-vertical-nav { bottom: 40px; }
}