@import 'vars'; @import 'mixins'; @import 'font-awesome.min.css'; @import url('http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,300italic,400italic'); /* Alpha by HTML5 UP html5up.net | @n33co Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */ /* Basic */ body { background: $color-bg; } body, input, select, textarea { color: $color-fg; font-family: $font-family; font-size: 16pt; font-weight: $font-weight; line-height: 1.65em; letter-spacing: -0.015em; } a { @include vendor-property('transition', 'color #{$duration-transition} ease-in-out, border-bottom-color #{$duration-transition} ease-in-out'); border-bottom: dotted 1px; color: $color-accent2-bg; text-decoration: none; &:hover { 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; line-height: 1em; margin: 0 0 ($size-element-margin * 0.25) 0; a { color: inherit; text-decoration: none; } } h2 { font-size: 2.25em; line-height: 1.5em; letter-spacing: -0.035em; } h3 { font-size: 1.75em; line-height: 1.5em; letter-spacing: -0.025em; } h4 { font-size: 1.1em; line-height: 1.5em; letter-spacing: 0; } h5 { font-size: 0.9em; line-height: 1.5em; letter-spacing: 0; } h6 { font-size: 0.7em; line-height: 1.5em; letter-spacing: 0; } 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 2px $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 4px $color-border; font-style: italic; margin: 0 0 $size-element-margin 0; padding: 0.5em 0 0.5em 2em; } pre { -webkit-overflow-scrolling: touch; background: $color-border-bg; border-radius: $size-border-radius; border: solid 1px $color-border; font-family: $font-family-fixed; font-size: 0.9em; line-height: 1.75em; margin: 0 0 $size-element-margin 0; overflow-x: auto; padding: 1em 1.5em; } code { background: $color-border-bg; border-radius: $size-border-radius; border: solid 1px $color-border; font-family: $font-family-fixed; font-size: 0.9em; margin: 0 0.25em; padding: 0.25em 0.65em; } .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; font-style: italic; } h2 + p { font-size: 1.25em; margin-top: -1em; line-height: 1.5em; } h3 + p { font-size: 1.1em; margin-top: -0.85em; line-height: 1.5em; } h4 + p, h5 + p, h6 + p { font-size: 0.8em; margin-top: -0.5em; line-height: 1.5em; } &.major { padding: 1em 0; text-align: center; h2 { margin: 0; } p { display: inline-block; border-top: solid 2px $color-border; color: $color-fg; margin: 1.5em 0 0 0; padding: 1.5em 0 0 0; font-style: normal; } } } footer { } /* Form */ form { margin: 0 0 $size-element-margin 0; } label { color: $color-fg-bold; display: block; font-size: 0.9em; font-weight: $font-weight; 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: solid 1px $color-border; color: inherit; display: block; outline: 0; padding: 0 1em; text-decoration: none; width: 100%; &:invalid { box-shadow: none; } &:focus { border-color: $color-accent2-bg; box-shadow: 0 0 0 2px $color-accent2-bg; } } .select-wrapper { @include icon; display: block; position: relative; &:before { color: $color-border; content: '\f078'; 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 1px $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-accent1-bg; border-color: $color-accent1-bg; color: $color-accent2-fg-bold; content: '\f00c'; } } &:focus + label { &:before { border-color: $color-accent2-bg; box-shadow: 0 0 0 1px $color-accent2-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-padding: 3em; .box { background: #fff; border-radius: $size-border-radius; box-shadow: 0 2px 0 0 $color-border; margin: 0 0 $size-element-margin 0; padding: $box-padding; > :last-child { margin-bottom: 0; } &.alt { background: none !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 0 $size-element-margin 0; padding: 0 !important; } &.features { .features-row { border-top: solid 2px $color-border; position: relative; &:after { clear: both; content: ''; display: block; } section { float: left; padding: $box-padding; width: 50%; :last-child { margin-bottom: 0; } &:nth-child(2n) { &:before { background: $color-border; content: ''; display: block; height: 100%; margin-left: -3em; position: absolute; top: 0; width: 2px; } padding-right: 0; } &:nth-child(2n-1) { padding-left: 0; } } &:first-child { border-top: 0; section { padding-top: 0; } } &:last-child { padding-bottom: 0; section { padding-bottom: 0; } } } } &.special { text-align: center; } .image { &.featured { border-radius: 0; display: block; margin: $box-padding 0 $box-padding ($box-padding * -1); position: relative; width: calc(100% + #{$box-padding * 2}); img { border-radius: 0; display: block; width: 100%; } &:first-child { border-radius: $size-border-radius $size-border-radius 0 0; margin-bottom: $box-padding; margin-top: $box-padding * -1; img { border-radius: $size-border-radius $size-border-radius 0 0; } } &:last-child { border-radius: 0 0 $size-border-radius $size-border-radius; margin-bottom: $box-padding * -1; margin-top: $box-padding; img { border-radius: 0 0 $size-border-radius $size-border-radius; } } } } } /* Icon */ .icon { @include icon; border-bottom: none; position: relative; > .label { display: none; } &.major { background: $color-accent1-bg; border-radius: 100%; color: $color-accent1-fg-bold; cursor: default; display: inline-block; height: 5.5em; line-height: 5.5em; margin: 0 0 $size-element-margin 0; width: 5.5em; &:before { font-size: 2.5em; } &.accent1 { background: $color-accent1-bg; color: $color-accent1-fg-bold; } &.accent2 { background: $color-accent2-bg; color: $color-accent2-fg-bold; } &.accent3 { background: $color-accent3-bg; color: $color-accent3-fg-bold; } &.accent4 { background: $color-accent4-bg; color: $color-accent4-fg-bold; } &.accent5 { background: $color-accent5-bg; color: $color-accent5-fg-bold; } } } /* Image */ .image { border-radius: $size-border-radius; border: 0; display: inline-block; position: relative; img { 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; } &.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 1px $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; } .icon { color: inherit; &:before { font-size: 1.75em; } } } } &.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); } } } } } 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 1px $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; padding: 0 0.75em 0.75em 0.75em; text-align: left; } thead { border-bottom: solid 2px $color-border; } tfoot { border-top: solid 2px $color-border; } &.alt { border-collapse: separate; tbody { tr { td { border: solid 1px $color-border; border-left-width: 0; border-top-width: 0; &:first-child { border-left-width: 1px; } } &:first-child { td { border-top-width: 1px; } } } } 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: $color-accent1-bg; border-radius: $size-border-radius; border: 0; color: $color-accent1-fg-bold; cursor: pointer; display: inline-block; font-weight: $font-weight-bold; height: $size-element-height; line-height: $size-element-height; padding: 0 2em; text-align: center; text-decoration: none; white-space: nowrap; &:hover { background-color: lighten($color-accent1-bg, 5); } &:active { background-color: darken($color-accent1-bg, 5); } &.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; height: ($size-element-height * 0.9); line-height: ($size-element-height * 0.9); } &.big { font-size: 1.25em; height: ($size-element-height * 0.9); line-height: ($size-element-height * 0.9); } &.alt { background-color: transparent; box-shadow: inset 0 0 0 2px $color-border; color: $color-fg; &:hover { background-color: $color-border-bg; } &:active { background-color: $color-border2-bg; } &.icon { &:before { color: $color-fg-light; } } } &.special { background-color: $color-accent2-bg; color: $color-accent2-fg-bold !important; &:hover { background-color: lighten($color-accent2-bg, 5); } &:active { background-color: darken($color-accent2-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; } } /* 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-header-bg; color: $color-header-fg; cursor: default; height: 3.25em; left: 0; line-height: 3.25em; position: fixed; top: 0; width: 100%; z-index: 10000; h1 { color: inherit; height: inherit; left: 1.25em; line-height: inherit; margin: 0; padding: 0; position: absolute; top: 0; a { color: $color-header-fg-bold; font-weight: $font-weight-bold; border: 0; } } nav { height: inherit; line-height: inherit; position: absolute; right: 0.75em; top: 0; vertical-align: middle; > ul { list-style: none; margin: 0; padding-left: 0; > li { display: inline-block; padding-left: 0; > ul { display: none; } a { display: inline-block; height: 2em; line-height: 1.95em; padding: 0 1em; border-radius: $size-border-radius; } a:not(.button) { color: $color-header-fg-bold; display: inline-block; text-decoration: none; border: 0; &.icon { &:before { color: $color-header-fg-light; margin-right: 0.5em; } } } &:first-child { margin-left: 0; } &.active { a:not(.button) { background-color: transparentize($color-header-fg-light, 0.75); } } .button { margin: 0 0 0 0.5em; position: relative; } } } } input[type="submit"], input[type="reset"], input[type="button"], .button { background-color: transparent; box-shadow: inset 0 0 0 2px $color-header-fg-light; color: $color-header-fg-bold; &:hover { background-color: transparentize($color-header-fg-light, 0.75); } &:active { background-color: transparentize($color-header-fg-light, 0.5); } } .container { position: relative; h1 { left: 0; } nav { right: 0; } } &.reveal { @include vendor-property('animation', 'reveal-header 0.5s'); } &.alt { @include vendor-property('animation', 'none'); background: none; color: rgba(255,255,255,0.75); position: absolute; nav { > ul { > li { a:not(.button) { &.icon { &:before { color: rgba(255,255,255,0.75); } } } &.active { a:not(.button) { background-color: rgba(255,255,255,0.2); } } } } } input[type="submit"], input[type="reset"], input[type="button"], .button { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5); &:hover { background-color: rgba(255,255,255,0.1); } &:active { background-color: rgba(255,255,255,0.2); } } } } .dropotron { background: #fff; border-radius: $size-border-radius; box-shadow: 0 2px 0 0 rgba(0,0,0,0.065), inset 0 -1px 0 0 #fff, inset 0 0 0 1px transparentize($color-border, 0.5); list-style: none; margin: calc(-0.5em + 1px) 0 0 1px; padding: 0.5em 0; width: 11em; li { padding: 0; a, span { @include vendor-property('transition', 'none'); border: 0; border-top: solid 1px #f2f2f2; color: inherit; display: block; padding: 0.15em 1em; } &:first-child { > a, > span { border-top: 0; } } &.active, &:hover { > a, > span { background: $color-accent2-bg; color: $color-accent2-fg-bold; } } } &.level-0 { font-size: 0.9em; margin: 1em 0 0 0; &:before { @include vendor-property('transform', 'rotate(45deg)'); background: #fff; border: solid 1px transparentize($color-border, 0.5); border-bottom: 0; border-right: 0; box-shadow: -0.25em -0.125em 0.125em 0 rgba(0,0,0,0.015); content: ''; display: block; height: 0.75em; position: absolute; right: 1.25em; top: -0.375em; width: 0.75em; z-index: 0; } } } /* Banner */ #banner { background-attachment: scroll, fixed; background-color: #666; 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: #fff; padding: 12em 0 20em 0; text-align: center; :last-child { margin-bottom: 0; } h2, h3, h4, h5, h6 { color: #fff; } h2 { font-size: 3.5em; line-height: 1em; margin: 0 0 0.5em 0; padding: 0; } p { font-size: 1.25em; margin-bottom: 1.75em; } input[type="submit"], input[type="reset"], input[type="button"], .button { background-color: transparent; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5); color: #fff; min-width: 12em; &:hover { background-color: rgba(255,255,255,0.1); } &:active { background-color: rgba(255,255,255,0.2); } &.special { background: #fff; color: #666 !important; } } } /* Main */ #main { padding: 4em 0; > header { text-align: center; margin: 0 0 3em 0; h2 { font-size: 2.75em; margin: 0; } p { border-top: solid 2px $color-border; color: $color-fg; display: inline-block; font-style: normal; margin: 1em 0 0 0; padding: 1em 0 1.25em 0; } } } body.landing { #main { margin-top: -14em; } } /* Footer */ #footer { background: #f0f0f0; padding: 4em 0 6em 0; text-align: center; .icons { a { @include vendor-property('transition', 'opacity #{$duration-transition} ease-in-out'); opacity: 0.35; &:hover { opacity: 0.75; } } } .copyright { color: $color-fg-light; font-size: 0.9em; line-height: 1em; margin: 2em 0 0 0; padding: 0; text-align: center; a { color: inherit; } li { border-left: solid 1px $color-border2; display: inline-block; list-style: none; margin-left: 1em; padding-left: 1em; &:first-child { border-left: 0; margin-left: 0; padding-left: 0; } } } } /* CTA */ #cta { background: $color-accent2-bg; color: $color-accent2-fg; padding: 3.5em 0 4em 0; text-align: center; h2, h3, h4, h5, h6 { color: inherit; } form { margin: 0 auto; max-width: 100%; width: 25em; } input[type="submit"], input[type="reset"], input[type="button"], .button { box-shadow: none; background: #fff; color: $color-accent2-bg; } input[type="text"], input[type="password"], input[type="email"], select, textarea { color: $color-accent2-fg-bold; background: rgba(255,255,255,0.15); border: 0; &:focus { box-shadow: inset 0 0 0 2px #fff; } } ::-webkit-input-placeholder { color: rgba(255,255,255,0.75) !important; } :-moz-placeholder { color: rgba(255,255,255,0.75) !important; } ::-moz-placeholder { color: rgba(255,255,255,0.75) !important; } :-ms-input-placeholder { color: rgba(255,255,255,0.75) !important; } .formerize-placeholder { color: rgba(255,255,255,0.75) !important; } }