// Cascading Style Sheet for http://www.spigler.net/stefano // MOBILE SIZED $MAXWIDTH: 500px; $COLOR: #208AD5; //107FC9 @mixin transition($args...) { -webkit-transition: $args; -moz-transition: $args; -ms-transition: $args; -o-transition: $args; transition: $args; } @font-face { font-family: latex; src: url("../fonts/CMSerif/cmunrm.woff"); } @font-face { font-family: font_cursive; src: url("../fonts/cursive.ttf"); } *, *:before, *:after { box-sizing: border-box; } a { cursor: pointer; } html { height: 100%; background-color: #FFF; } div { padding: 0; margin: 0; overflow: hidden !important; } body { height: 100%; padding: 0; margin: 0; max-width: $MAXWIDTH !important; overflow: scroll; background-color: #FFF; & > #toplink { z-index: 10; position: fixed; right: -20vw; width: 33vw; bottom: 13vw; height: 7.5vw; padding: 0.5vw 0 0 1.8vw; transform: rotate(90deg); text-align: center; color: #FFF; background-color: $COLOR; border: none; font-weight: 700; font-size: 4vw; line-height: 6vw; font-family: 'Open Sans', sans-serif; text-decoration: none; &:link, &:visited { color: inherit; } display: block; @include transition(all 0.2s ease-in-out 0s); & > a { display: block; width: 4.3vw; height: 2.1vw; @include transition(all 0.2s ease-in-out 0s); &:hover { background-color: $COLOR; color: #FFF; } } } & > main > div { opacity: 0; @include transition(opacity 0.4s ease-in-out 0s); overflow: auto; background-color: #FFF; &:nth-of-type(2n+1) { background-color: #FFF; } &:nth-of-type(2n) { background-color: #FAFAFA; } border: none; width: 100%; text-align: justify; max-width: $MAXWIDTH; padding: 3vw 2vw 4vw 2vw; font-weight: 400; font-size: 4.5vw; line-height: 7vw; font-family: 'Open Sans', sans-serif; & a { color: $COLOR !important; font-weight: 700; text-decoration: none; border-bottom: 1px solid $COLOR; &:link, &:visited { color: inherit; } } & > section > div { font-size: 5vw; line-height: 7vw; font-family: 'Source Sans Pro', sans-serif; padding: 6vw 2vw 0 24vw; margin-bottom: 10vw; & > span:first-child { float: left; font-size: 4vw; line-height: 8vw; clear: left; display: inline-block; text-align: right; padding: 0 1vw 0 0; margin: -8.5vw 0 0 -25vw; width: 30vw; } & hr { border: none; margin: 10px; padding: 0; } & emph { color: #444; font-weight: 300; } & i { font-weight: 300; } & a { text-decoration: none; border-bottom: 1px solid $COLOR !important; font-weight: 400 !important; } } &:nth-last-of-type(1) { min-height: 0 !important; height: 20vw; padding: 4.5vw 0 0 0; text-align: center; font-size: 3.5vw; line-height: 5vw; color: #888; opacity: 1; & a { font-weight: 400; border: none; } } &:nth-of-type(1) { height: 20vw !important; min-height: 0 !important; background-color: #FFF; color: #000; padding-top: 4vw 0; text-align: center; & > span { position: absolute; top: 8.5vw; right: 34vw; background-color: inherit; display: block; text-align: center; font-size: 6vw; line-height: 3vw; font-family: 'Anonymous Pro', monospace; font-weight: bold; } & > a { display: none; } } & > iframe { margin: 0 7vw 5vw 7vw; width: 80vw; height: 57vw; } & > iframe + section { width: 80vw !important; margin: 0 7vw; } & figure { width: 80vw; margin: 0 7vw 5vw 7vw; & > img { width: 100%; border: 1px solid #000; } & > figcaption { position: relative; width: 100%; margin: 0; font-size: 4vw; line-height: 5vw; font-weight: 300; font-family: 'Source Sans Pro', sans-serif; } } & input { border-radius: 0; border: 1px solid #AAA; border-bottom: 1px solid #DDD; border-right: 1px solid #DDD; height: 7vw; font-family: 'Anonymous Pro', monospace; font-size: 5vw !important; } & textarea { border: 1px solid #AAA; border-bottom: 1px solid #DDD; border-right: 1px solid #DDD; width: 100%; height: 30vw; margin: 3vw 0; font-family: 'Source Sans Pro', sans-serif; font-size: 5vw; } & table td { font-size: 5vw; font-family: 'Source Sans Pro', sans-serif; padding-left: 1.4vw; } & #logos { display: none; } } & #photo { display: none; } } hr { border: none; border-top: 1px solid #CCCCCC; margin: 0; padding: 0; } h1 { font-family: 'Raleway', sans-serif; font-size: 8vw; line-height: 10vw; width: 100%; text-align: center; display: block; padding: 0 0 0.7vw 0; font-weight: normal; margin: 0; } h6 { font-size: 4vw; width: 100%; text-align: center; display: block; padding: 2vw 0 0 0; font-weight: normal; margin: 0; } abbr { font-family: 'Anonymous Pro', monospace; font-weight: 700; font-size: 6vw; border-bottom: 3px dotted $COLOR; text-decoration: none; } #notify { @include transition(all 0.2s ease-in-out 0s); visibility: hidden; opacity: 0; position: fixed; width: 100%; height: 100%; background-color: #FFF; text-align: center; display: block; font-family: 'Source Sans Pro', sans-serif; font-size: 5vw; line-height: 7vw; & > a { color: $COLOR; text-decoration: none; font-weight: bold; border: none; position: absolute; display: block; right: 1.07vw; bottom: 0.7vw; } }