Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
238 lines (195 sloc) 3.69 KB
$dev-mode: false;
html, body, .titles {
height: 100%;
}
html, body {
background-color: #dededd;
}
a {
display: inline-block;
text-decoration: none;
}
.titles {
visibility: visible;
}
.title-card {
height: 100%;
overflow: hidden;
@if not $dev-mode {
position: absolute;
} @else {
position: relative;
}
width: 100%;
}
@if $dev-mode {
.first-play {
.titles {
visibility: visible;
}
[role="contentinfo"] {
display: none;
}
}
} @else {
.first-play {
.titles {
visibility: hidden;
}
[role="contentinfo"] {
display: block;
}
}
}
[role="contentinfo"] {
@include box-sizing(border-box);
color: #626963;
display: none;
font-family: "Helvetica Neue", helvetica, arial, sans-serif;
padding: 0.8em 1.1em;
position: absolute;
width: 100%;
a {
text-decoration: underline;
}
header {
color: #000;
margin-bottom: 2em;
text-align: center;
}
h1 {
font-size: 2.8em;
font-weight: 100;
margin-bottom: 0.2em;
}
h2 {
font-size: 1.4em;
font-weight: 300;
}
p {
line-height: 1.2;
margin: 0 auto;
max-width: 650px;
padding-bottom: 1.2em;
}
.big-play-btn {
border-color: rgba(#1f1f1f, 0.8);
color: #000;
display: block;
font-size: 1.6em;
margin: 0 auto;
&:hover,
&:focus {
border-color: #000;
}
}
.big-btn-container {
margin-top: 0.8em;
text-align: center;
i {
font-size: 0.8em;
}
}
}
$duration: 36.54s;
$iteration: infinite;
@mixin on {
opacity: 1;
@include transform(translateX(0));
}
@mixin off {
opacity: 0;
@include transform(translateX(-100%))
}
@include keyframes (opener) {
0%, 22.9% {
@include on;
}
23%, 100% {
@include off;
}
}
@include keyframes (director) {
0%, 22.9%, 46%, 100% {
@include off;
}
23%, 45.9% {
@include on;
}
}
@include keyframes (bumper01) {
0%, 45.9%, 52%, 100% {
@include off;
}
46%, 51.9% {
@include on;
}
}
@include keyframes (photography) {
0%, 51.9%, 71%, 100% {
@include off;
}
52%, 70.9% {
@include on;
}
}
@include keyframes (twitter) {
0%, 70.9%, 100% {
@include off;
}
71%, 99.9% {
@include on;
}
}
.copy {
font-family: "Helvetica Neue", helvetica, arial, sans-serif;
font-size: 1.3em;
font-weight: 100;
letter-spacing: 0.07em;
position: relative;
text-transform: uppercase;
-webkit-text-size-adjust: none;
z-index: 90;
}
.composition {
overflow: hidden;
position: absolute;
height: 100%;
width: 100%;
}
.role {
display: block;
font-family: georgia, times, serif;
font-size: 0.85rem;
font-weight: 500;
margin-bottom: 0.5em;
}
@media screen and (min-width: 520px) {
.copy {
font-size: 2em;
}
}
@if not $dev-mode {
.opener {
@include animation(opener $duration $iteration);
}
.director {
@include animation(director $duration $iteration);
}
.bumper-01 {
@include animation(bumper01 $duration $iteration);
}
.photography {
@include animation(photography $duration $iteration);
}
.twitter {
@include animation(twitter $duration $iteration);
}
}
.paused {
.animated,
.title-card .animated {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
}