Newer
Older
* @author Hakim El Hattab
*/
/*********************************************
* FONT-FACE DEFINITIONS
*********************************************/
@font-face {
font-family: 'League Gothic';
src: url('../assets/fonts/leaguegothic/league_gothic-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/*********************************************
* GLOBAL STYLES
*********************************************/
html, body {
position: relative;
font-family: 'Lato', Times, 'Times New Roman', serif;
font-weight: 200;
letter-spacing: -0.02em;
color: #eee;
min-height: 600px;
background: #555a5f;
background: -moz-radial-gradient(center, ellipse cover, #555a5f 0%, #1c1e20 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#555a5f), color-stop(100%,#1c1e20));
background: -webkit-radial-gradient(center, ellipse cover, #555a5f 0%,#1c1e20 100%);
background: -o-radial-gradient(center, ellipse cover, #555a5f 0%,#1c1e20 100%);
background: -ms-radial-gradient(center, ellipse cover, #555a5f 0%,#1c1e20 100%);
background: radial-gradient(center, ellipse cover, #555a5f 0%,#1c1e20 100%);
}
/*********************************************
* HEADERS
*********************************************/
h1, h2, h3, h4 {
margin: 0 0 20px 0;
color: #eee;
font-family: 'League Gothic', sans-serif;
text-shadow: 0px 0px 6px rgba(0,0,0,0.2);
}
h1 { font-size: 136px; }
h2 { font-size: 76px; }
h3 { font-size: 56px; }
h4 { font-size: 36px; }
h1.inverted,
h2.inverted,
h3.inverted,
h4.inverted {
color: #fff;
text-shadow: 0px 0px 2px rgba(0,0,0,0.2);
}
h1 {
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 20px 20px rgba(0,0,0,.15);
/*********************************************
* VIEW FRAGMENTS
*********************************************/
#reveal section .fragment {
opacity: 0;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#reveal section .fragment.visible {
opacity: 1;
}
/*********************************************
* DEFAULT ELEMENT STYLES
*********************************************/
font-weight: normal;
}
strong, b {
font-weight: bold;
}
em, i {
font-style: italic;
}
ol, ul {
display: inline-block;
text-align: left;
margin: 0 auto;
}
ol {
list-style: decimal;
list-style-position: inside;
}
ul {
list-style: disc;
}
p {
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
blockquote {
display: block;
position: relative;
width: 70%;
margin: 5px auto;
padding: 5px;
font-style: italic;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
}
blockquote:before {
content: '“';
}
blockquote:after {
content: '”';
}
pre {
display: block;
position: relative;
width: 90%;
margin: 10px auto;
text-align: left;
font-size: 14px;
font-family: monospace;
line-height: 1.1em;
word-wrap: break-word;
box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
}
code {
font-family: monospace;
}
small {
font-size: 60%;
line-height: 1em;
vertical-align: top;
}
q {
font-style: italic;
}
q:before {
content: '“';
}
q:after {
content: '”';
}
color: hsl(185, 85%, 50%);
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
color: hsl(185, 85%, 70%);
background: hsla(185, 25%, 20%, 0.4);
margin: 30px 0 0 0;
background: rgba(255,255,255,0.12);
border: 4px solid #eee;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
}
a.image:hover img {
background: rgba(255,255,255,0.2);
border-color: #13DAEC;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
-o-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
/*********************************************
* CONTROLS
*********************************************/
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
.controls {
display: none;
position: fixed;
width: 100px;
height: 100px;
right: 0;
bottom: 0;
}
.controls a {
font-size: 30px;
position: absolute;
opacity: 0.1;
color: #fff;
}
.controls a.enabled {
opacity: 0.6;
color: hsl(185, 85%, 70%);
text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3);
}
.controls a.enabled:active {
margin-top: 1px;
}
.controls .left {
top: 30px;
}
.controls .right {
left: 60px;
top: 30px;
}
.controls .up {
left: 30px;
}
.controls .down {
left: 30px;
top: 60px;
/*********************************************
* PROGRESS BAR
*********************************************/

Hakim El Hattab
committed
.progress {
height: 4px;
width: 100%;
bottom: 0;
left: 0;

Hakim El Hattab
committed
background: rgba(0,0,0,0.2);

Hakim El Hattab
committed
.progress span {
display: block;
background: hsl(185, 85%, 50%);
height: 100%;
width: 0px;
-webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);

Hakim El Hattab
committed
-o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}
/*********************************************
* ROLLING LINKS
*********************************************/
.roll {
display: inline-block;
overflow: hidden;
vertical-align: top;
-webkit-perspective: 400px;
-moz-perspective: 400px;
perspective: 400px;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
.roll:hover {
background: none;
text-shadow: none;
}
.roll span {
display: block;
position: relative;
padding: 0 2px;
pointer-events: none;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
transition: all 400ms ease;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.roll:hover span {
background: rgba(0,0,0,0.5);
-webkit-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
-moz-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
-ms-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
}
.roll span:after {
content: attr(data-title);
display: block;
position: absolute;
left: 0;
top: 0;
padding: 0 2px;
color: #fff;
background: hsl(185, 60%, 35%);
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
-moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
-ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}
/*********************************************
* SLIDES
*********************************************/
position: absolute;
width: 900px;
height: 600px;
left: 50%;
top: 50%;
margin-left: -450px;
margin-top: -320px;
padding: 20px 0px;
text-align: center;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;
perspective: 600px;
-webkit-perspective-origin: 50% 25%;
-moz-perspective-origin: 50% 25%;
-ms-perspective-origin: 50% 25%;
perspective-origin: 50% 25%;
}
#reveal>section,
#reveal>section>section {
display: none;
position: absolute;
width: 100%;
min-height: 600px;
z-index: 10;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-ms-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}
display: block;
z-index: 11;
opacity: 1;
}
/*********************************************
* DEFAULT TRANSITION
*********************************************/
display: block;
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
}
display: block;
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
}
#reveal section>section.past {
display: block;
opacity: 0;
-webkit-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
-moz-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
-ms-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
}
#reveal section>section.future {
display: block;
opacity: 0;
-webkit-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
-moz-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
-ms-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
}
/*********************************************
* CONCAVE TRANSITION
*********************************************/
.concave #reveal>section.past {
-webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
}
.concave #reveal>section.future {
-webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
}
.concave #reveal section>section.past {
-webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
-moz-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
-ms-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
}
.concave #reveal section>section.future {
-webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
-moz-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
-ms-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
}
/*********************************************
* LINEAR TRANSITION
*********************************************/
.linear #reveal>section.past {
-webkit-transform: translate(-150%, 0);
-moz-transform: translate(-150%, 0);
-ms-transform: translate(-150%, 0);
-o-transform: translate(-150%, 0);
transform: translate(-150%, 0);
}
.linear #reveal>section.future {
-webkit-transform: translate(150%, 0);
-moz-transform: translate(150%, 0);
-ms-transform: translate(150%, 0);
-o-transform: translate(150%, 0);
transform: translate(150%, 0);
}
.linear #reveal section>section.past {
-webkit-transform: translate(0, -150%);
-moz-transform: translate(0, -150%);
-ms-transform: translate(0, -150%);
-o-transform: translate(0, -150%);
transform: translate(0, -150%);
}
.linear #reveal section>section.future {
-webkit-transform: translate(0, 150%);
-moz-transform: translate(0, 150%);
-ms-transform: translate(0, 150%);
-o-transform: translate(0, 150%);
transform: translate(0, 150%);
}
/*********************************************
* BOX TRANSITION
*********************************************/
margin-top: -350px;
-webkit-perspective-origin: 50% 25%;
-moz-perspective-origin: 50% 25%;
-ms-perspective-origin: 50% 25%;
perspective-origin: 50% 25%;
-webkit-perspective: 1300px;
-moz-perspective: 1300px;
-ms-perspective: 1300px;
perspective: 1300px;
}
padding: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.box #reveal section:not(.stack):before {
content: '';
position: absolute;
display: block;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: #292929;
border-radius: 4px;
-webkit-transform: translateZ( -20px );
-moz-transform: translateZ( -20px );
-ms-transform: translateZ( -20px );
-o-transform: translateZ( -20px );
transform: translateZ( -20px );
}
.box #reveal section:not(.stack):after {
content: '';
position: absolute;
display: block;
width: 90%;
height: 30px;
left: 5%;
bottom: 0;
background: none;
z-index: 1;
border-radius: 4px;
box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
-webkit-transform: translateZ(-90px) rotateX( 65deg );
-moz-transform: translateZ(-90px) rotateX( 65deg );
-ms-transform: translateZ(-90px) rotateX( 65deg );
-o-transform: translateZ(-90px) rotateX( 65deg );
transform: translateZ(-90px) rotateX( 65deg );
}
.box #reveal section.stack {
padding: 0;
background: none;
}
.box #reveal>section.past {
-webkit-transform-origin: 100% 0%;
-moz-transform-origin: 100% 0%;
-ms-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
-moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
-ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
transform: translate3d(-100%, 0, 0) rotateY(-90deg);
}
.box #reveal>section.future {
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: translate3d(100%, 0, 0) rotateY(90deg);
-moz-transform: translate3d(100%, 0, 0) rotateY(90deg);
-ms-transform: translate3d(100%, 0, 0) rotateY(90deg);
transform: translate3d(100%, 0, 0) rotateY(90deg);
}
.box #reveal section>section.past {
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: translate3d(0, -100%, 0) rotateX(90deg);
-moz-transform: translate3d(0, -100%, 0) rotateX(90deg);
-ms-transform: translate3d(0, -100%, 0) rotateX(90deg);
transform: translate3d(0, -100%, 0) rotateX(90deg);
}
.box #reveal section>section.future {
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg);
-moz-transform: translate3d(0, 100%, 0) rotateX(-90deg);
-ms-transform: translate3d(0, 100%, 0) rotateX(-90deg);
transform: translate3d(0, 100%, 0) rotateX(-90deg);
}
/*********************************************
* PAGE TRANSITION
*********************************************/
margin-top: -350px;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
-webkit-perspective: 3000px;
-moz-perspective: 3000px;
-ms-perspective: 3000px;
perspective: 3000px;
}
padding: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.page #reveal section.past {
z-index: 12;
}
.page #reveal section:not(.stack):before {
content: '';
position: absolute;
display: block;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: #292929;
-webkit-transform: translateZ( -20px );
-moz-transform: translateZ( -20px );
-ms-transform: translateZ( -20px );
-o-transform: translateZ( -20px );
transform: translateZ( -20px );
}
.page #reveal section:not(.stack):after {
content: '';
position: absolute;
display: block;
width: 90%;
height: 30px;
left: 5%;
bottom: 0;
background: none;
z-index: 1;
border-radius: 4px;
box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
-webkit-transform: translateZ(-90px) rotateX( 65deg );
}
.page #reveal section.stack {
padding: 0;
background: none;
}
.page #reveal>section.past {
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
-moz-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
-ms-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
transform: translate3d(-40%, 0, 0) rotateY(-80deg);
}
.page #reveal>section.future {
-webkit-transform-origin: 100% 0%;
-moz-transform-origin: 100% 0%;
-ms-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.page #reveal section>section.past {
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: translate3d(0, -40%, 0) rotateX(80deg);
-moz-transform: translate3d(0, -40%, 0) rotateX(80deg);
-ms-transform: translate3d(0, -40%, 0) rotateX(80deg);
transform: translate3d(0, -40%, 0) rotateX(80deg);
}
.page #reveal section>section.future {
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/*********************************************
* NEON THEME
*********************************************/
.neon a,
.neon a:hover,
.neon .controls a.enabled {
color: #5de048;
}
.neon .progress span,
.neon .roll span:after {
background: #5de048;
}
a.image:hover img {
border-color: #5de048;
}
/*********************************************
* OVERVIEW
*********************************************/
.overview #reveal section {
padding: 20px 0;
opacity: 1;
cursor: pointer;
background: rgba(0,0,0,0.1);
}
.overview #reveal section:after,
.overview #reveal section:before {
display: none !important;
}
.overview #reveal section>section {
opacity: 1;
cursor: pointer;
}
.overview #reveal section:hover {
background: rgba(0,0,0,0.3);
}
.overview #reveal section.present {
background: rgba(0,0,0,0.3);
}
.overview #reveal section.stack {
background: none;
padding: 0;
}