@media screen { .home > article { position: absolute; top: 32px; bottom: 0; left: 0; right: 0; } .home > article > .slide { width: 940px; padding: 0 10px; height: 100%; margin: 0 auto; } .home > article > .slide h2 { border-bottom: 0; padding-top: 0; margin: 0; } #intro { text-align: center; } #intro > div { padding-top: 24px; } .csstransforms #intro > div { padding-top: 0; position: absolute; top: 50%; left: 0; right: 0; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); } #intro h1 { position: static; font-size: 84px; font-weight: normal; margin: 0 0 8px 0; padding: 0 48px; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; font-family: "UltraRegular", Georgia, sans-serif; color: #000; text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2); } #intro h2 { font-size: 24px; letter-spacing: 2px; color: #999; font-weight: 100; text-shadow: 1px 1px 1px #fff; } #intro hgroup { margin-bottom: 32px; } #intro p { padding-bottom: 10px; } .download, .next, .cta { text-decoration: none; font-weight: bold; } .borderradius .download, .borderradius .next, .borderradius .cta { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .boxshadow .download, .boxshadow .next, .boxshadow .cta { -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3); box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3); } .boxshadow .download:hover, .boxshadow .download:focus, .boxshadow .next:hover, .boxshadow .next:focus, .boxshadow .cta:hover, .boxshadow .cta:focus { position: relative; top: 1px; left: 1px; -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); } .download, .cta { background: #599; padding: 5px 10px; margin-right: 4px; color: #fff; text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1); } .no-boxshadow .download:hover, .no-boxshadow .download:focus, .no-boxshadow .cta:hover, .no-boxshadow .cta:focus { background: #83b5b5; } .next { background: #ccc; color: #888; padding: 2px 4px; margin: 0 4px; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3); } .no-boxshadow .next:hover, .no-boxshadow .next:focus { background: #83b5b5; } #sample > pre { border: 1px solid #ddd; padding: 10px; background: #fff; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 40px rgba(0, 0, 0, 0.05) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 40px rgba(0, 0, 0, 0.05) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 40px rgba(0, 0, 0, 0.05) inset; position: relative; float: right; width: 435px; margin: 32px 0 16px 30px; } #sample > pre:before { position: absolute; content: ""; z-index: -2; top: 10px; bottom: 10px; left: 0; right: 0; -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); -moz-border-radius: 10px / 150px; border-radius: 10px / 150px; } #sample > pre > code { color: #aaa; } #sample > h2 { font-family: "UltraRegular", Georgia, serif; font-weight: normal; font-size: 36px; padding: 42px 0 24px 0; color: #000; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); } #sample .deck-previous, #sample .deck-before { color: #aaa; } #sample .deck-current { color: #444; } .sample-content { overflow: hidden; zoom: 1; font-size: 22px; text-shadow: 1px 1px 1px #fff; } .sample-content > p { margin-bottom: 1em; } .sample-content a { color: #599; text-decoration: none; } .sample-content a:hover, .sample-content a:focus { text-decoration: underline; } .goto-form { display: none; position: absolute; z-index: 3; bottom: 35px; left: 50%; margin-left: -140px; width: 260px; padding: 5px 10px; height: 25px; line-height: 25px; background: #fff; border: 1px solid #ddd; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .boxshadow .goto-form { -webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2); box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2); } .goto-form label { float: left; margin-right: 5px; } .goto-form input[type="submit"] { display: inline; } .goto-form:after { content: "deck.goto"; text-shadow: none; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 12px; height: 18px; line-height: 18px; padding: 0 6px; position: absolute; top: -25px; left: 50%; } .goto-form:before { content: ""; display: block; position: absolute; top: -7px; left: 50%; margin-left: 15px; width: 0; height: 0; border: 5px solid rgba(0, 0, 0, 0.5); border-color: rgba(0, 0, 0, 0.5) transparent transparent transparent; } #goto-slide { float: left; width: 130px; margin-right: 5px; height: 20px; } .deck-prev-link, .deck-next-link { display: none; position: absolute; z-index: 3; bottom: 38px; width: 24px; height: 24px; line-height: 24px; background: #fff; text-align: center; color: #aaa; text-decoration: none; border: 1px solid #ddd; font-weight: bold; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } .no-boxshadow .deck-prev-link:hover, .no-boxshadow .deck-prev-link:focus, .no-boxshadow .deck-next-link:hover, .no-boxshadow .deck-next-link:focus { border-color: #999; color: #444; } .deck-prev-link:after, .deck-next-link:after { content: "deck.navigation"; text-shadow: none; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 12px; font-weight: normal; height: 18px; line-height: 18px; padding: 0 6px; position: absolute; top: -25px; } .deck-prev-link:before, .deck-next-link:before { content: ""; display: block; position: absolute; top: -7px; width: 0; height: 0; border: 5px solid rgba(0, 0, 0, 0.5); border-color: rgba(0, 0, 0, 0.5) transparent transparent transparent; } .deck-prev-link { left: 50%; margin-left: -178px; } .boxshadow .deck-prev-link { -webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2); box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2); } .boxshadow .deck-prev-link:hover, .boxshadow .deck-prev-link:focus { bottom: 37px; -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); } .deck-prev-link:after { right: -10px; } .deck-prev-link:before { right: 7px; } .deck-next-link { left: 50%; margin-left: 153px; } .boxshadow .deck-next-link { -webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2); box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2); } .boxshadow .deck-next-link:hover, .boxshadow .deck-next-link:focus { bottom: 37px; -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); } .deck-next-link:after { left: -10px; } .deck-next-link:before { left: 7px; } .deck-status { display: none; position: absolute; z-index: 4; bottom: 8px; left: 50%; margin-left: -30px; width: 60px; text-align: center; color: #888; font-size: 14px; text-shadow: 1px 1px 1px #fff; } .deck-status:after { content: "deck.status"; text-shadow: none; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 12px; height: 18px; line-height: 18px; padding: 0 6px; position: absolute; bottom: 0px; left: 100%; } .deck-status:before { content: ""; display: block; position: absolute; bottom: 4px; right: 0; width: 0; height: 0; border: 5px solid rgba(0, 0, 0, 0.5); border-color: transparent rgba(0, 0, 0, 0.5) transparent transparent; } #now-what > h2 { font-family: "UltraRegular", Georgia, serif; font-weight: normal; font-size: 36px; padding: 42px 0 24px 0; color: #000; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); text-align: center; position: relative; z-index: 3; } #now-what > h2:after { content: ""; width: 1px; height: 24px; overflow: hidden; position: absolute; left: 50%; bottom: 0; background: #ddd; } #now-what > p { padding: 42px 0 16px 0; text-align: center; position: relative; z-index: 2; } #now-what > p:after { content: ""; width: 1px; height: 32px; overflow: hidden; position: absolute; left: 50%; top: 0; background: #ddd; } #now-what > p .download { font-size: 36px; padding: 10px 16px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .personas { overflow: hidden; zoom: 1; background: #fff; border: 1px solid #eee; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); } .boxshadow .personas { -webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2); -moz-box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2); box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2); } .borderradius .personas { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .personas > .slide { width: 25%; padding: 2% 4%; position: relative; top: 0; left: 0; z-index: 2; } .personas h3 { font-weight: 100; font-size: 24px; margin-bottom: 8px; color: #aaa; } .personas p { padding-bottom: 16px; } #noob { float: left; border-right: 1px solid #eee; } #badass { float: right; border-left: 1px solid #eee; } #in-between { margin: 0 auto; } #in-between p { padding-bottom: 0; } .on-slide-0 #sample > pre > code, .on-slide-1 #sample > pre > code { color: #fff; } .on-slide-1 #sample pre { position: relative; } .on-slide-1 #sample pre:after { content: "Use arrow keys to navigate"; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); color: #aaa; font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif; font-weight: normal; font-size: 24px; height: 32px; position: absolute; top: 50%; margin-top: -16px; left: 0; right: 0; text-align: center; } .touch .on-slide-1 #sample pre:after { content: "Swipe left/right to navigate"; } .on-slide-2 #sample > pre > code { color: #333; } .on-slide-0 .slide-state, .on-slide-1 .slide-state, .on-slide-2 .slide-state { position: absolute; left: -999em; top: -999em; } .on-slide-3 .slide-state { color: #c00; } .on-slide-0 .deck-state, .on-slide-1 .deck-state, .on-slide-2 .deck-state, .on-slide-3 .deck-state { position: absolute; left: -999em; top: -999em; } .on-slide-4 .deck-state { color: #c00; } .on-slide-5 .example-current { color: #c00; } .on-slide-6 .example-next { color: #c00; } .on-slide-7 .deck-status, .on-slide-8 .deck-status { display: block; } .on-slide-8 .goto-form, .on-slide-8 .deck-next-link, .on-slide-8 .deck-prev-link { display: block; } .csstransforms.csstransitions #intro.deck-previous, .csstransforms.csstransitions #intro.deck-before { left: 0; top: 0; right: 0; } .csstransforms.csstransitions #intro.deck-previous h1, .csstransforms.csstransitions #intro.deck-previous h2, .csstransforms.csstransitions #intro.deck-previous p, .csstransforms.csstransitions #intro.deck-before h1, .csstransforms.csstransitions #intro.deck-before h2, .csstransforms.csstransitions #intro.deck-before p { -webkit-transform: translate3d(-300%, 0, 0); -moz-transform: translate(-300%, 0); -ms-transform: translate(-300%, 0); -o-transform: translate(-300%, 0); transform: translate3d(-300%, 0, 0); } .csstransforms.csstransitions #intro h1 { -webkit-transition: -webkit-transform 300ms ease-in-out; -moz-transition: -moz-transform 300ms ease-in-out; -ms-transition: -ms-transform 300ms ease-in-out; -o-transition: -o-transform 300ms ease-in-out; transition: transform 300ms ease-in-out; } .csstransforms.csstransitions #intro h2 { -webkit-transition: -webkit-transform 300ms ease-in-out 100ms; -moz-transition: -moz-transform 300ms ease-in-out 100ms; -ms-transition: -ms-transform 300ms ease-in-out 100ms; -o-transition: -o-transform 300ms ease-in-out 100ms; transition: transform 300ms ease-in-out 100ms; } .csstransforms.csstransitions #intro p { -webkit-transition: -webkit-transform 300ms ease-in-out 200ms; -moz-transition: -moz-transform 300ms ease-in-out 200ms; -ms-transition: -ms-transform 300ms ease-in-out 200ms; -o-transition: -o-transform 300ms ease-in-out 200ms; transition: transform 300ms ease-in-out 200ms; } .csstransforms.csstransitions #sample.deck-next, .csstransforms.csstransitions #sample.deck-before:not(.deck-child-current) { left: 0; top: 0; right: 0; } .csstransforms.csstransitions #sample.deck-next h2, .csstransforms.csstransitions #sample.deck-next pre, .csstransforms.csstransitions #sample.deck-next .sample-content, .csstransforms.csstransitions #sample.deck-before:not(.deck-child-current) h2, .csstransforms.csstransitions #sample.deck-before:not(.deck-child-current) pre, .csstransforms.csstransitions #sample.deck-before:not(.deck-child-current) .sample-content { -webkit-transform: translate3d(0, -300%, 0); -moz-transform: translate(0, -300%); -ms-transform: translate(0, -300%); -o-transform: translate(0, -300%); transform: translate3d(0, -300%, 0); } .csstransforms.csstransitions #sample h2, .csstransforms.csstransitions #sample .sample-content { -webkit-transition: -webkit-transform 300ms ease-in-out 200ms; -moz-transition: -moz-transform 300ms ease-in-out 200ms; -ms-transition: -ms-transform 300ms ease-in-out 200ms; -o-transition: -o-transform 300ms ease-in-out 200ms; transition: transform 300ms ease-in-out 200ms; } .csstransforms.csstransitions #sample pre { -webkit-transition: -webkit-transform 300ms ease-in-out; -moz-transition: -moz-transform 300ms ease-in-out; -ms-transition: -ms-transform 300ms ease-in-out; -o-transition: -o-transform 300ms ease-in-out; transition: transform 300ms ease-in-out; } .csstransforms.csstransitions #sample .slide { visibility: visible; opacity: 0; -webkit-transition: color 300ms ease-in-out, opacity 300ms ease-in-out; -moz-transition: color 300ms ease-in-out, opacity 300ms ease-in-out; -ms-transition: color 300ms ease-in-out, opacity 300ms ease-in-out; -o-transition: color 300ms ease-in-out, opacity 300ms ease-in-out; transition: color 300ms ease-in-out, opacity 300ms ease-in-out; } .csstransforms.csstransitions #sample .deck-current, .csstransforms.csstransitions #sample .deck-before, .csstransforms.csstransitions #sample .deck-previous { opacity: 1; } .csstransforms.csstransitions .on-slide-4 .example-current, .csstransforms.csstransitions .on-slide-4 .example-next, .csstransforms.csstransitions .on-slide-5 .example-current, .csstransforms.csstransitions .on-slide-5 .example-next, .csstransforms.csstransitions .on-slide-6 .example-current, .csstransforms.csstransitions .on-slide-6 .example-next, .csstransforms.csstransitions .on-slide-7 .example-current, .csstransforms.csstransitions .on-slide-7 .example-next { -webkit-transition: color 600ms ease-in-out 0ms; -moz-transition: color 600ms ease-in-out 0ms; -ms-transition: color 600ms ease-in-out 0ms; -o-transition: color 600ms ease-in-out 0ms; transition: color 600ms ease-in-out 0ms; } .csstransforms.csstransitions .deck-status, .csstransforms.csstransitions .goto-form, .csstransforms.csstransitions .deck-next-link, .csstransforms.csstransitions .deck-prev-link { display: block; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: -webkit-transform 100ms ease-in-out; -moz-transition: -moz-transform 100ms ease-in-out; -ms-transition: -ms-transform 100ms ease-in-out; -o-transition: -o-transform 100ms ease-in-out; transition: transform 100ms ease-in-out; } .csstransforms.csstransitions .on-slide-7 .deck-status, .csstransforms.csstransitions .on-slide-8 .deck-status { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .csstransforms.csstransitions .on-slide-8 .goto-form, .csstransforms.csstransitions .on-slide-8 .deck-next-link, .csstransforms.csstransitions .on-slide-8 .deck-prev-link { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .csstransforms.csstransitions #now-what.deck-next, .csstransforms.csstransitions #now-what.deck-after { left: 0; top: 0; right: 0; } .csstransforms.csstransitions #now-what.deck-next .personas, .csstransforms.csstransitions #now-what.deck-after .personas { -webkit-transform: translate3d(-300%, 0, 0); -moz-transform: translate(-300%, 0); -ms-transform: translate(-300%, 0); -o-transform: translate(-300%, 0); transform: translate3d(-300%, 0, 0); } .csstransforms.csstransitions #now-what.deck-next h2, .csstransforms.csstransitions #now-what.deck-after h2 { -webkit-transform: translate3d(0, -1000%, 0); -moz-transform: translate(0, -1000%); -ms-transform: translate(0, -1000%); -o-transform: translate(0, -1000%); transform: translate3d(0, -1000%, 0); } .csstransforms.csstransitions #now-what .personas .slide { visibility: visible; -webkit-transition: opacity 200ms ease-in-out 0ms; -moz-transition: opacity 200ms ease-in-out 0ms; -ms-transition: opacity 200ms ease-in-out 0ms; -o-transition: opacity 200ms ease-in-out 0ms; transition: opacity 200ms ease-in-out 0ms; } .csstransforms.csstransitions #now-what .personas .slide.deck-next, .csstransforms.csstransitions #now-what .personas .slide.deck-after { opacity: 0; } .csstransforms.csstransitions #now-what .personas, .csstransforms.csstransitions #now-what h2 { -webkit-transition: -webkit-transform 300ms ease-in-out; -moz-transition: -moz-transform 300ms ease-in-out; -ms-transition: -ms-transform 300ms ease-in-out; -o-transition: -o-transform 300ms ease-in-out; transition: transform 300ms ease-in-out; } .csstransforms.csstransitions #now-what > p { left: 0; top: 0; visibility: visible; opacity: 0; -webkit-transition: opacity 300ms ease-in-out 0ms; -moz-transition: opacity 300ms ease-in-out 0ms; -ms-transition: opacity 300ms ease-in-out 0ms; -o-transition: opacity 300ms ease-in-out 0ms; transition: opacity 300ms ease-in-out 0ms; } .csstransforms.csstransitions #now-what > p.deck-current { opacity: 1; } .csstransforms.csstransitions .on-slide-10 #now-what .personas, .csstransforms.csstransitions .on-slide-10 #now-what h2 { -webkit-transition-delay: 200ms; -moz-transition-delay: 200ms; -ms-transition-delay: 200ms; -o-transition-delay: 200ms; transition-delay: 200ms; } .pointerevents.csstransforms.csstransitions .deck-current { z-index: auto; } .pointerevents.csstransforms.csstransitions .deck-after:not(.deck-child-current), .pointerevents.csstransforms.csstransitions .deck-before:not(.deck-child-current), .pointerevents.csstransforms.csstransitions .deck-previous:not(.deck-child-current), .pointerevents.csstransforms.csstransitions .deck-next:not(.deck-child-current) { pointer-events: none; } .pointerevents.csstransforms.csstransitions .deck-child-current .deck-before, .pointerevents.csstransforms.csstransitions .deck-child-current .deck-previous { pointer-events: auto; } .no-pointerevents.csstransforms.csstransitions .deck-current, .no-pointerevents.csstransforms.csstransitions .deck-child-current { z-index: 4; } .slide .slide { min-height: 0; height: auto; } } @media print { * { background: transparent !important; color: black !important; } a, a:visited { text-decoration: none; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } header, footer, #intro p, .goto-form, .deck-prev-link, .deck-next-link, .deck-status { display: none; } article { width: auto !important; font-size: 12pt; } article > .slide { page-break-after: always; } #intro { text-align: center; } #intro h1 { font-family: "UltraRegular", Georgia, sans-serif; font-size: 90pt; } #intro h2 { font-size: 24pt; } #sample pre { padding: 5px; width: 75%; } #sample h2 { font-family: "UltraRegular", Georgia, sans-serif; font-size: 24pt; margin: .5em 0; } #sample p { margin: 1em 0; width: 75%; } #sample span { display: inline !important; } #now-what h2 { font-family: "UltraRegular", Georgia, sans-serif; font-size: 24pt; margin: .5em 0 .25em 0; } #now-what p { margin: .25em 0 1em 0; width: 75%; } #now-what a { display: none; } }