/* include after impress-classes.css */ /* Now here is when interesting things start to appear. * * We set up styles with default font and nice gradient in the * background. And yes, there is a lot of repetition there because of * -prefixes but we don't want to leave anybody behind. */ body { font-family: sans-serif; color: rgb(255,255,255); min-height: 740px; background: rgb(0, 0, 0); } /* Now let's bring some text styles back ... */ b, strong { font-weight: bold } i, em { font-style: italic } /* ... and give links a nice look. */ a { color: inherit; text-decoration: none; padding: 0 0.1em; background: rgba(255,255,255,0.5); text-shadow: -1px -1px 2px rgba(100,100,100,0.9); border-radius: 0.2em; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } a:hover, a:focus { background: rgba(255,255,255,1); text-shadow: -1px -1px 2px rgba(100,100,100,0.5); } /* And now we start to style each step separately. I agree that this may be not the most efficient, object-oriented and scalable way of styling, but most of steps have quite a custom look and typography tricks here and there, so they had to be styled separately. First is the title step with a big

(no room for padding) and some 3D positioning along Z axis. / #title { padding: 0; } #title .try { font-size: 64px; position: absolute; top: -0.5em; left: 1.5em; -webkit-transform: translateZ(20px); -moz-transform: translateZ(20px); -ms-transform: translateZ(20px); -o-transform: translateZ(20px); transform: translateZ(20px); } #title h1 { font-size: 190px; -webkit-transform: translateZ(50px); -moz-transform: translateZ(50px); -ms-transform: translateZ(50px); -o-transform: translateZ(50px); transform: translateZ(50px); } #title .footnote { font-size: 32px; } / We also make other steps visible and give them a pointer cursor using the `impress-on-` class. */ .impress-on-overview .step { opacity: 0.9; cursor: none; } .impress-enabled { pointer-events: none } .impress-enabled #impress { pointer-events: auto }