@import 'vars'; @import 'mixins'; @import 'font-awesome.min.css'; @import url('http://fonts.googleapis.com/css?family=Lato:300,700'); /* Drift by Pixelarity pixelarity.com @pixelarity License: pixelarity.com/license */ /* Basic */ body { background: $color-bg; &.is-loading * { @include vendor-property('animation', 'none !important'); @include vendor-property('transition', 'none !important'); } } body, input, select, textarea { color: $color-fg; font-family: $font-family; font-size: 15pt; font-weight: $font-weight; line-height: 1.75em; } a { @include vendor-property('transition', 'color #{$duration-transition} ease-in-out, border-color #{$duration-transition} ease-in-out'); color: $color-accent-bg; text-decoration: none; border-bottom: dotted 1px; &:hover { text-decoration: none; color: $color-accent-bg !important; border-bottom-color: transparent; } } strong, b { color: $color-fg-bold; font-weight: $font-weight-bold; } em, i { font-style: italic; } p { margin: 0 0 $size-element-margin 0; } h1, h2, h3, h4, h5, h6 { color: $color-fg-bold; font-weight: $font-weight-bold; line-height: 1em; margin: 0 0 ($size-element-margin * 0.5) 0; letter-spacing: -0.01em; a { color: inherit; text-decoration: none; } } h2 { font-size: 1.75em; line-height: 1.5em; } h3 { font-size: 1.25em; line-height: 1.5em; } h4 { font-size: 1.1em; line-height: 1.5em; } h5 { font-size: 0.9em; line-height: 1.5em; } h6 { font-size: 0.7em; line-height: 1.5em; } sub { font-size: 0.8em; position: relative; top: 0.5em; } sup { font-size: 0.8em; position: relative; top: -0.5em; } hr { border: 0; border-bottom: solid $size-border-width $color-border; // This is the *only* instance where we need to rely on margin collapse. margin: $size-element-margin 0; &.major { margin: ($size-element-margin * 1.5) 0; } } blockquote { border-left: solid ($size-border-width * 4) $color-border; font-style: italic; margin: 0 0 $size-element-margin 0; padding: 0.5em 0 0.5em 2em; } code { background: $color-border-bg; border-radius: $size-border-radius; border: solid $size-border-width $color-border; font-family: $font-family-fixed; font-size: 0.9em; margin: 0 0.25em; padding: 0.25em 0.65em; } pre { -webkit-overflow-scrolling: touch; font-family: $font-family-fixed; font-size: 0.9em; margin: 0 0 $size-element-margin 0; code { display: block; line-height: 1.75em; padding: 1em 1.5em; overflow-x: auto; } } .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } /* Section/Article */ section, article { &.special { text-align: center; } } header { p { color: $color-fg-light; position: relative; margin: 0 0 ($size-element-margin * 0.75) 0; } h2 + p { font-size: 1.25em; margin-top: -1em; line-height: 1.75em; } h3 + p { font-size: 1.1em; margin-top: -0.85em; line-height: 1.5em; } h4 + p, h5 + p, h6 + p { font-size: 0.9em; margin-top: -0.75em; line-height: 1.5em; } &.major { text-align: center; h2 { font-size: 2.35em; } p { margin: -1em 0 3.5em 0; } } } /* Form */ form { margin: 0 0 $size-element-margin 0; } label { color: $color-fg-bold; display: block; font-size: 0.9em; font-weight: $font-weight-bold; margin: 0 0 ($size-element-margin * 0.5) 0; } input[type="text"], input[type="password"], input[type="email"], select, textarea { @include vendor-property('appearance', 'none'); background: $color-border-bg; border-radius: $size-border-radius; border: none; border: solid $size-border-width $color-border; color: inherit; display: block; outline: 0; padding: 0 1em; text-decoration: none; width: 100%; &:invalid { box-shadow: none; } &:focus { border-color: $color-accent-bg; box-shadow: 0 0 0 $size-border-width $color-accent-bg; } } .select-wrapper { @include icon; display: block; position: relative; &:before { content: '\f078'; color: $color-border; display: block; height: $size-element-height; line-height: $size-element-height; pointer-events: none; position: absolute; right: 0; text-align: center; top: 0; width: $size-element-height; } select::-ms-expand { display: none; } } input[type="text"], input[type="password"], input[type="email"], select { height: $size-element-height; } textarea { padding: 0.75em 1em; } input[type="checkbox"], input[type="radio"], { @include vendor-property('appearance', 'none'); display: block; float: left; margin-right: -2em; opacity: 0; width: 1em; z-index: -1; & + label { @include icon; color: $color-fg; cursor: pointer; display: inline-block; font-size: 1em; font-weight: $font-weight; padding-left: ($size-element-height * 0.6) + 0.75em; padding-right: 0.75em; position: relative; &:before { background: $color-border-bg; border-radius: $size-border-radius; border: solid $size-border-width $color-border; content: ''; display: inline-block; height: ($size-element-height * 0.6); left: 0; line-height: ($size-element-height * 0.575); position: absolute; text-align: center; top: 0; width: ($size-element-height * 0.6); } } &:checked + label { &:before { background: $color-accent2-bg; border-color: $color-accent2-bg; color: $color-accent2-fg-bold; content: '\f00c'; } } &:focus + label { &:before { border-color: $color-accent-bg; box-shadow: 0 0 0 $size-border-width $color-accent-bg; } } } input[type="checkbox"] { & + label { &:before { border-radius: $size-border-radius; } } } input[type="radio"] { & + label { &:before { border-radius: 100%; } } } ::-webkit-input-placeholder { color: $color-fg-light !important; opacity: 1.0; } :-moz-placeholder { color: $color-fg-light !important; opacity: 1.0; } ::-moz-placeholder { color: $color-fg-light !important; opacity: 1.0; } :-ms-input-placeholder { color: $color-fg-light !important; opacity: 1.0; } .formerize-placeholder { color: $color-fg-light !important; opacity: 1.0; } /* Box */ .box { border-radius: $size-border-radius; border: solid $size-border-width $color-border; margin-bottom: $size-element-margin; padding: $size-element-margin; > :last-child, > :last-child > :last-child, > :last-child > :last-child > :last-child { margin-bottom: 0; } &.alt { border: 0; border-radius: 0; padding: 0; } &.post { margin-left: auto; margin-right: auto; text-align: center; .image { &:first-child { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin: ($size-element-margin * -1) 0 $size-element-margin ($size-element-margin * -1); width: calc(100% + #{$size-element-margin * 2}); img { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } } } } } /* Icon */ .icon { @include icon; border-bottom: none; position: relative; > .label { display: none; } } /* Image */ .image { border-radius: $size-border-radius; border: 0; display: inline-block; position: relative; img { position: relative; border-radius: $size-border-radius; display: block; } &.left { float: left; padding: 0 1.5em 1em 0; top: 0.25em; } &.right { float: right; padding: 0 0 1em 1.5em; top: 0.25em; } &.left, &.right { max-width: 40%; img { width: 100%; } } &.fit { display: block; margin: 0 0 $size-element-margin 0; width: 100%; img { display: block; width: 100%; } } } /* List */ ol { list-style: decimal; margin: 0 0 $size-element-margin 0; padding-left: 1.25em; li { padding-left: 0.25em; } } ul { list-style: disc; margin: 0 0 $size-element-margin 0; padding-left: 1em; li { padding-left: 0.5em; } &.alt { list-style: none; padding-left: 0; li { border-top: solid $size-border-width $color-border; padding: 0.5em 0; &:first-child { border-top: 0; padding-top: 0; } } } &.icons { cursor: default; list-style: none; padding-left: 0; li { display: inline-block; padding: 0 1.25em 0 0; &:last-child { padding-right: 0 !important; } .icon { border-radius: $size-border-radius; border: solid $size-border-width $color-border; color: $color-fg-light !important; display: inline-block; font-size: 1.25em; height: 2.75em; line-height: 2.75em; text-align: center; width: 2.75em; } a.icon { @include vendor-property('transition', 'background-color #{$duration-transition} ease-in-out, color #{$duration-transition} ease-in-out'); &:hover { background-color: $color-border-bg; } &:active { background-color: $color-border2-bg; } } } } &.actions { cursor: default; list-style: none; padding-left: 0; li { display: inline-block; padding: 0 ($size-element-margin * 0.5) 0 0; vertical-align: middle; &:last-child { padding-right: 0; } } &.small { li { padding: 0 ($size-element-margin * 0.25) 0 0; } } &.vertical { li { display: block; padding: ($size-element-margin * 0.5) 0 0 0; &:first-child { padding-top: 0; } > * { margin-bottom: 0; } } &.small { li { padding: ($size-element-margin * 0.25) 0 0 0; &:first-child { padding-top: 0; } } } } &.fit { display: table; margin-left: ($size-element-margin * -0.5); padding: 0; table-layout: fixed; width: calc(100% + #{($size-element-margin * 0.5)}); li { display: table-cell; padding: 0 0 0 ($size-element-margin * 0.5); > * { margin-bottom: 0; } } &.small { margin-left: ($size-element-margin * -0.25); width: calc(100% + #{($size-element-margin * 0.25)}); li { padding: 0 0 0 ($size-element-margin * 0.25); } } } } &.menu { line-height: 1em; list-style: none; padding: 0; li { border-left: solid 1px $color-border; display: inline-block; margin-left: 1em; padding-left: 1em; &:first-child { border-left: 0; margin-left: 0; padding-left: 0; } } } } dl { margin: 0 0 $size-element-margin 0; } /* Table */ .table-wrapper { -webkit-overflow-scrolling: touch; overflow-x: auto; } table { margin: 0 0 $size-element-margin 0; width: 100%; tbody { tr { border: solid $size-border-width $color-border; border-left: 0; border-right: 0; &:nth-child(2n + 1) { background-color: $color-border-bg; } } } td { padding: 0.75em 0.75em; } th { color: $color-fg-bold; font-size: 0.9em; font-weight: $font-weight-bold; padding: 0 0.75em 0.75em 0.75em; text-align: left; } thead { border-bottom: solid ($size-border-width * 2) $color-border; } tfoot { border-top: solid ($size-border-width * 2) $color-border; } &.alt { border-collapse: separate; tbody { tr { td { border: solid $size-border-width $color-border; border-left-width: 0; border-top-width: 0; &:first-child { border-left-width: $size-border-width; } } &:first-child { td { border-top-width: $size-border-width; } } } } thead { border-bottom: 0; } tfoot { border-top: 0; } } } /* Button */ input[type="submit"], input[type="reset"], input[type="button"], .button { @include vendor-property('appearance', 'none'); @include vendor-property('transition', 'background-color #{$duration-transition} ease-in-out, color #{$duration-transition} ease-in-out'); background-color: transparent; border-radius: $size-border-radius; border: solid $size-border-width $color-border !important; color: $color-fg-bold !important; cursor: pointer; display: inline-block; font-size: 0.8em; font-weight: $font-weight-bold; height: 3.5em; letter-spacing: 0.1em; line-height: 3.5em; overflow: hidden; padding: 0 2em; text-align: center; text-decoration: none; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; &:hover { background-color: $color-border-bg; color: $color-fg-bold !important; } &:active { background-color: $color-border2-bg; } &.icon { padding-left: 1.35em; &:before { margin-right: 0.5em; } } &.fit { display: block; margin: 0 0 ($size-element-margin * 0.5) 0; width: 100%; } &.small { font-size: 0.8em; } &.big { font-size: 1em; height: 3.5em; line-height: 3.5em; padding: 0 2.25em; } &.special { background-color: $color-accent-bg; color: $color-accent-fg-bold !important; &:hover { background-color: lighten($color-accent-bg, 5); } &:active { background-color: darken($color-accent-bg, 5); } } &.disabled, &:disabled { background-color: $color-fg !important; box-shadow: inset 0 -0.15em 0 0 rgba(0,0,0,0.15); color: $color-bg !important; cursor: default; opacity: 0.25; } } /* Feature */ .feature { @include icon; padding-left: 6.5em; position: relative; text-align: left; &:before { border-radius: $size-border-radius; border: solid $size-border-width $color-border; color: $color-accent-bg; display: inline-block; font-size: 2.25em; height: 2em; left: 0; line-height: 2em; position: absolute; text-align: center; top: 0; width: 2em; } h3 { margin: 0 0 ($size-element-margin * 0.35) 0; } } /* Slider */ .slider { position: relative; .viewer { position: relative; border-radius: $size-border-radius; border: solid 1.5em #fff; height: 20em; margin: 0 auto; overflow: hidden; width: 80%; } .slide { img { border-radius: $size-border-radius * 0.75; display: block; width: 100%; } } .nav-next, .nav-previous { @include icon; background: #fff; border-radius: 100%; color: #ddd; cursor: pointer; display: block; font-size: 3em; height: 1.25em; line-height: 1.15em; margin-top: -0.5em; position: absolute; text-align: center; top: 50%; width: 1.25em; &:before { position: relative; } } .nav-next { right: 0; &:before { content: '\f105'; right: -0.05em; } } .nav-previous { left: 0; &:before { content: '\f104'; left: -0.05em; } } } /* Wrapper */ .wrapper { padding: 5em 0 3em 0; &.style1 { background: #f2f2f2; .box { background: #ffffff; border: 0; } } &.style2 { background: #ffffff; } &.style3 { background: $color-accent-bg; color: $color-accent-fg; h1, h2, h3, h4, h5, h6 { color: $color-accent-fg-bold; } header { p { color: $color-accent-fg-light; } } .button { border-color: $color-accent-border !important; color: $color-accent-fg-bold !important; &:hover { background-color: $color-accent-border-bg; } &:active { background-color: $color-accent-border2-bg; } } } } /* Header */ #skel-layers-wrapper { padding-top: 3em; } body.landing { #skel-layers-wrapper { padding-top: 0; } } @include vendor-keyframes('reveal-header') { 0% { top: -5em; } 100% { top: 0; } } #header { background-color: #fff; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); color: inherit; cursor: default; height: 3em; left: 0; line-height: 3em; position: fixed; top: 0; width: 100%; z-index: 10000; &.reveal { @include vendor-property('animation', 'reveal-header 0.5s'); } &.alt { @include vendor-property('animation', 'none'); background-color: transparent; box-shadow: none; color: #fff; } h1 { color: inherit; font-size: 1em; height: inherit; left: 1.25em; line-height: inherit; margin: 0; padding: 0; position: absolute; top: 0; span { font-weight: $font-weight; } a { border: 0; } } nav { height: inherit; line-height: inherit; position: absolute; right: 1.5em; top: 0; vertical-align: middle; > ul { list-style: none; margin: 0; padding-left: 0; > li { border-radius: $size-border-radius; display: inline-block; margin-left: 2em; padding-left: 0; a { border: 0; color: inherit; display: inline-block; text-decoration: none; &.icon { &:before { margin-right: 0.5em; } } } &:first-child { margin-left: 0; } .button { height: 2.25em; line-height: 2.25em; margin-bottom: 0; padding: 0 1em; position: relative; top: -0.075em; vertical-align: middle; } > ul { display: none; } } } } .container { position: relative; h1 { left: 0; } nav { right: 0; } } } .dropotron { background: #fff; border-radius: $size-border-radius; box-shadow: 0 0 3px 1px rgba(0,0,0,0.05); list-style: none; margin-top: -0.75em; min-width: 10em; padding: 0.75em 0; li { padding: 0; a { @include vendor-property('transition', 'none !important'); border: 0; box-shadow: inset 0 1px 0 0 $color-border2-bg; color: inherit; display: block; line-height: 2.25em; padding: 0 1em; } &:first-child { > a { box-shadow: none; } } &.active, &:hover { > a { background: $color-accent-bg; color: $color-accent-fg-bold !important; } } } &.level-0 { font-size: 0.9em; margin-top: 1em; &:before { -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); background: #fff; content: ''; display: block; height: 0.75em; position: absolute; right: 1.5em; top: -0.375em; width: 0.75em; box-shadow: inset 1px 1px 0 0 rgba(0,0,0,0.075); box-shadow: -1px -1px 2px 0 rgba(0,0,0,0.05); } } } /* Banner */ #banner { background-attachment: scroll, fixed; background-color: $color-accent2-bg; background-image: url('images/overlay.png'), url('../images/banner.jpg'); background-position: top left, center center; background-repeat: repeat, no-repeat; background-size: auto, cover; color: $color-accent2-fg; padding: 16em 0; position: relative; text-align: center; &:after { @include vendor-property('transition', 'opacity 2s ease-in-out'); background: darken($color-accent2-bg, 5); content: ''; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; z-index: 1; } :last-child { margin-bottom: 0; } h1, h2, h3, h4, h5, h6 { color: $color-accent2-fg-bold; } .inner { position: relative; z-index: 2; } .button { border-color: $color-accent2-border !important; color: $color-accent2-fg-bold !important; &:hover { background-color: $color-accent2-border-bg; } &:active { background-color: $color-accent2-border2-bg; } } h2 { font-size: 3.25em; line-height: 1.25em; margin: 0 0 0.5em 0; padding: 0; } p { font-size: 1.5em; margin-bottom: 1.75em; } } body.is-loading { #banner { &:after { opacity: 1.0; } } } /* One */ #one { padding-bottom: 0; .slider { .viewer { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; } .slide { img { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } } } } /* Main */ #main { > .container { position: relative; background: #ffffff; border-radius: $size-border-radius; margin-bottom: $size-element-margin; padding: ($size-element-margin * 1.5); > :last-child, > :last-child > :last-child, > :last-child > :last-child > :last-child { margin-bottom: 0; } } } /* CTA */ #cta { padding: 4em 0; text-align: center; vertical-align: middle; h2 { display: inline-block; margin: 0 1em 0 0; vertical-align: middle; } .actions { display: inline-block; margin: 0; } } /* Footer */ #footer { color: $color-fg-light; padding: 4em 0; text-align: center; .icons { margin: 0 0 ($size-element-margin * 2) 0; } .menu { a { color: inherit; } } .copyright { font-size: 0.8em; } }