@import 'libs/vars'; @import 'libs/functions'; @import 'libs/mixins'; @import url('font-awesome.min.css'); @import url(“fonts.googleapis.com/css?family=Raleway:400,400italic,700,800”);
/*
Highlights by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
@import "libs/skel"; @include skel-breakpoints(( large: '(max-width: 1680px)', medium: '(max-width: 980px)', small: '(max-width: 736px)', xsmall: '(max-width: 480px)' )); @include skel-layout(( reset: 'full', boxModel: 'border', grid: ( gutters: 1.5em ), conditionals: true, containers: 35em, breakpoints: ( large: ( ), medium: ( containers: 80%, ), small: ( grid: ( gutters: 1em ), ), xsmall: ( containers: 100%, ) ) )); @mixin minHeight($tb, $pad) { min-height: calc( 100vh - #{ $tb + (($tb - _size(element-margin)) + $pad) } ); } $size-padding-tb: 5em; $size-padding-lr: 2.5em;
/* Basic */
html { background-color: _palette(accent2, bg); background-attachment: fixed, fixed; background-image: url('images/overlay.png'), url('../../assets/images/bg.jpg'); background-position: top left, center center; background-repeat: repeat, none; background-size: auto, cover; } html { &.is-loading { body { *, *:before, *:after { @include vendor('animation', 'none !important'); @include vendor('transition', 'none !important'); } } } &.is-touch { height: 100vh; overflow: hidden; #wrapper { -webkit-backface-visibility: hidden; -webkit-overflow-scrolling: touch; -webkit-transform: translate3d(0,0,0); height: 100vh; overflow: auto; } } } body, input, select, textarea { color: _palette(fg); font-family: _font(family); font-size: 15pt; font-weight: _font(weight); line-height: 1.75em; } a { @include vendor('transition', ('color #{_duration(transition)} ease-in-out', 'border-bottom-color #{_duration(transition)} ease-in-out')); border-bottom: dotted 1px; color: _palette(accent1, bg); text-decoration: none; &:hover { border-bottom-color: transparent !important; color: _palette(accent1, bg) !important; text-decoration: none; } } strong, b { color: _palette(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: _palette(fg-bold); font-weight: _font(weight-heavy); letter-spacing: 0.075em; line-height: 1em; margin: 0 0 (_size(element-margin) * 0.5) 0; text-transform: uppercase; a { color: inherit; text-decoration: none; } } h2 { font-size: 1.75em; line-height: 1.5em; } h3 { font-size: 1em; line-height: 1.5em; } h4 { font-size: 0.9em; line-height: 1.5em; } h5 { font-size: 0.8em; 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 1px _palette(border); margin: _size(element-margin) 0; &.major { margin: (_size(element-margin) * 1.5) 0; } } blockquote { border-left: solid 6px _palette(border); font-style: italic; margin: 0 0 _size(element-margin) 0; padding: 0.5em 0 0.5em 1.5em; } code { background: _palette(border-bg); 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; }
/* Loader */
// Spinner @include keyframes('spinner-show') { 0% { opacity: 0; } 100% { opacity: 1; } } @include keyframes('spinner-hide') { 0% { color: _palette(accent2, fg-lighter); z-index: _misc(z-index-base) + 1; @include vendor('transform', 'scale(1) rotate(0deg)'); } 99% { color: _palette(accent2, bg); z-index: _misc(z-index-base) + 1; @include vendor('transform', 'scale(0.5) rotate(360deg)'); } 100% { color: _palette(accent2, bg); z-index: -1; @include vendor('transform', 'scale(0) rotate(360deg)'); } } @include keyframes('spinner-rotate') { 0% { @include vendor('transform', 'scale(1) rotate(0deg)'); } 100% { @include vendor('transform', 'scale(1) rotate(360deg)'); } } // Overlay @include keyframes('overlay-hide') { 0% { opacity: 1; z-index: _misc(z-index-base); } 15% { opacity: 1; z-index: _misc(z-index-base); } 99% { opacity: 0; z-index: _misc(z-index-base); } 100% { opacity: 0; z-index: -1; } } html { body { @include icon; // Spinner (inactive) &:before { @include vendor('animation', ('spinner-show 1.5s 1 0.25s ease forwards', 'spinner-hide 0.25s ease-in-out forwards !important')); @include vendor('transform-origin', '50% 50%'); color: _palette(accent2, fg-lighter); content: '\f1ce'; cursor: default; display: block; font-size: 2em; height: 2em; left: 50%; opacity: 0; line-height: 2em; margin: -1em 0 0 -1em; position: fixed; text-align: center; top: 50%; width: 2em; z-index: -1; } // Overlay (inactive) &:after { @include vendor('animation', 'overlay-hide #{_duration(loader-fadein)} ease-in forwards !important'); background: _palette(accent2, bg); content: ''; display: block; height: 100%; left: 0; opacity: 0; position: fixed; top: 0; width: 100%; z-index: -1; } } &.is-loading { body { // Spinner (active) &:before { @include vendor('animation', ('spinner-show 1.5s 1 0.25s ease forwards', 'spinner-rotate 0.75s infinite linear !important')); z-index: _misc(z-index-base) + 1; } // Overlay (active) &:after { @include vendor('animation', 'none !important'); opacity: 1; z-index: _misc(z-index-base); } } } } @media (-webkit-min-device-pixel-ratio: 2) { html { body { &:before { line-height: 2.025em; } } } }
/* Section/Article */
section, article { &.special { text-align: center; } } header { p { color: _palette(fg-light); letter-spacing: 0.05em; text-transform: uppercase; } h1 + p { margin-top: (_size(element-margin) * -0.5); } h2 + p { margin-top: (_size(element-margin) * -0.5); } h3 + p { margin-top: (_size(element-margin) * -0.4); } h4 + p, h5 + p, h6 + p { font-size: 0.8em; margin-top: (_size(element-margin) * -0.3); } &.major { text-align: center; h1, h2, h3, h4, h5, h6 { position: relative; &:after { background: _palette(border); content: ''; display: block; height: 2px; margin: 0.75em auto 0 auto; position: relative; width: 4em; } } p { margin-top: 0; } } }
/* Form */
form { margin: 0 0 _size(element-margin) 0; } label { color: _palette(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('appearance', 'none'); background: _palette(border2-bg); border-radius: 0; border: none; color: inherit; display: block; outline: 0; padding: 0 1em; text-decoration: none; width: 100%; &:invalid { box-shadow: none; } &:focus { box-shadow: inset 0 0 0 2px _palette(accent1, bg); } } .select-wrapper { @include icon; display: block; position: relative; &:before { color: _palette(fg-light); 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('appearance', 'none'); display: block; float: left; margin-right: -2em; opacity: 0; width: 1em; z-index: -1; & + label { @include icon; color: _palette(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: _palette(border2-bg); 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: _palette(accent2, bg); color: _palette(accent2, fg-bold); content: '\f00c'; } } &:focus + label { &:before { box-shadow: inset 0 0 0 2px _palette(accent1, bg); } } } input[type="checkbox"] { & + label { &:before { } } } input[type="radio"] { & + label { &:before { border-radius: 100%; } } } ::-webkit-input-placeholder { color: _palette(fg-light) !important; opacity: 1.0; } :-moz-placeholder { color: _palette(fg-light) !important; opacity: 1.0; } ::-moz-placeholder { color: _palette(fg-light) !important; opacity: 1.0; } :-ms-input-placeholder { color: _palette(fg-light) !important; opacity: 1.0; } .formerize-placeholder { color: _palette(fg-light) !important; opacity: 1.0; }
/* Box */
.box { border: solid 2px _palette(border); margin-bottom: _size(element-margin); padding: 1.5em; > :last-child, > :last-child > :last-child, > :last-child > :last-child > :last-child { margin-bottom: 0; } &.alt { border: 0; border-radius: 0; padding: 0; } }
/* Icon */
.icon { @include icon; border-bottom: none; position: relative; > .label { display: none; } &.major { display: block; margin: 0 0 (_size(element-margin) * 0.5) 0; &:before { font-size: 2.5em; } } }
/* Image */
.image { border: 0; display: inline-block; position: relative; &:before { background: url('images/overlay.png'); content: ''; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } img { display: block; } &.left { float: left; margin: 0 1.5em 1em 0; top: 0.25em; } &.right { float: right; margin: 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 { 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 _palette(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.5em 0 0; &:last-child { padding-right: 0; } .icon { &:before { font-size: 1.5em; } } } } &.icons-grid { list-style: none; padding: 0; position: relative; li { display: block; float: left; padding: (_size(element-margin) * 1.5) 0; width: 50%; h3 { margin: 0; } &:nth-child(2n + 1) { box-shadow: inset -1px 0 0 0 _palette(border), 1px 0 0 0 _palette(border); } &:nth-child(2n + 3) { &:before { background: _palette(border); content: ''; display: block; height: 2px; margin-top: (_size(element-margin) * -1.5); position: absolute; width: 100%; } } } &:after { clear: both; content: ''; display: block; } } &.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; min-width: 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 _palette(border); border-left: 0; border-right: 0; &:nth-child(2n + 1) { background-color: _palette(border-bg); } } } td { padding: 0.75em 0.75em; } th { color: _palette(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 2px _palette(border); } tfoot { border-top: solid 2px _palette(border); } &.alt { border-collapse: separate; tbody { tr { td { border: solid 1px _palette(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, .button { @include vendor('appearance', 'none'); @include vendor('transition', ('background-color #{_duration(transition)} ease-in-out', 'color #{_duration(transition)} ease-in-out')); background-color: transparent; border-radius: 0; border: 0; box-shadow: inset 0 0 0 2px _palette(border); color: _palette(fg-bold) !important; cursor: pointer; display: inline-block; font-weight: _font(weight-bold); height: _size(element-height); letter-spacing: 0.05em; line-height: (_size(element-height) * 1.05); padding: 0 2em; text-align: center; text-decoration: none; text-transform: uppercase; white-space: nowrap; &:hover { background-color: _palette(border-bg); color: _palette(fg-bold) !important; } &:active { background-color: _palette(border2-bg); color: _palette(fg-bold) !important; } &.icon { padding-left: 1.35em; &:before { color: _palette(fg-light); 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: 1.35em; } &.special { background-color: _palette(accent1, bg); border: 0; box-shadow: none; color: _palette(accent1, fg-bold) !important; &:hover { background-color: lighten(_palette(accent1, bg), 5); } &:active { background-color: darken(_palette(accent1, bg), 5); } &.icon { &:before { color: _palette(accent1, fg-light); } } } &.disabled, &:disabled { background-color: _palette(fg) !important; box-shadow: none !important; color: _palette(bg) !important; cursor: default; opacity: 0.25; } }
/* Main BG */
.main-bg { @include vendor('transition', 'opacity #{_duration(bg-fadein)} ease-out'); background-attachment: fixed, fixed; background-position: top left, center center; background-repeat: repeat, none; background-size: auto, cover; height: 100%; left: 0; opacity: 0; position: fixed; top: 0; width: 100%; z-index: -1; &.active { opacity: 1; } }
/* Main */
.main { position: relative; .image.primary { display: none; } .container { @include padding($size-padding-tb, $size-padding-lr, (0, 0, 5em, 0)); background: transparentize(_palette(bg), 0.05); box-shadow: inset 0 1px 0 0 _palette(border); &:before { @include minHeight($size-padding-tb, 5em); content: ''; display: inline-block; vertical-align: middle; width: 1px; } .content { display: inline-block; margin-right: 1px; vertical-align: middle; width: calc(100% - 10px); } } .goto-next { @include vendor('transition', 'background-color #{_duration(transition)} ease-in-out'); background-color: _palette(border-bg); background-image: url('images/arrow.svg'); background-position: center center; background-repeat: no-repeat; border-radius: 100%; border: 0; bottom: 3em; display: block; height: 4em; left: 50%; line-height: 4em; margin-left: -2em; overflow: hidden; position: absolute; text-indent: 4em; white-space: nowrap; width: 4em; &:hover { background-color: _palette(border2-bg); } } }
/* Header */
#header { height: 100vh; position: relative; text-align: center; &:after { content: ''; display: inline-block; height: 100vh; vertical-align: middle; } header { color: _palette(alt, fg); display: inline-block; padding-bottom: (_size(element-height) + ($size-padding-lr * 2)); vertical-align: middle; h1, h2, h3, h4, h5, h6, strong, b { color: _palette(alt, fg-bold); } a { color: inherit; &:hover { color: _palette(alt, fg-bold) !important; } } h1 { font-size: 3em; line-height: 1.25em; margin: 0; &:after { margin-top: 0.5em; } } p { color: _palette(alt, fg-bold); font-weight: _font(weight-bold); margin: (_size(element-margin) * 0.75) 0 0 0; } } .container { background: transparentize(_palette(bg), 0.05); bottom: 0; left: 50%; margin-left: -17.5em; padding: $size-padding-lr; position: absolute; > :last-child { margin-bottom: 0; } .button { min-width: 12em; } } }
/* Footer */
#footer { min-height: 100vh; padding: 0 0 12em 0; position: relative; text-align: center; .container { @include padding($size-padding-tb, $size-padding-lr); background: transparentize(_palette(bg), 0.05); box-shadow: inset 0 1px 0 0 _palette(border); } footer { bottom: _size(element-margin); color: _palette(alt, fg); left: 0; position: absolute; text-align: center; width: 100%; h1, h2, h3, h4, h5, h6, strong, b { color: _palette(alt, fg-bold); } a { color: inherit; &:hover { color: _palette(alt, fg-bold) !important; } } .copyright { font-size: 0.8em; line-height: 1em; padding: 0; li { border-left: solid 1px _palette(alt, fg-lighter); display: inline-block; margin: 0 0 0 1em; padding: 0 0 0 1em; &:first-child { border-left: 0; margin-left: 0; padding-left: 0; } } } } }
/* Large */
@include breakpoint(large) { /* Basic */ body, input, select, textarea { font-size: 12pt; } }
/* Medium */
@include breakpoint(medium) { $size-padding-tb: 3em; $size-padding-lr: 3em; /* Main BG */ .main-bg { display: none; } /* Main */ .main { .image.primary { display: block; margin: 0 0 (_size(element-margin) * 2) 0; } .container { @include padding($size-padding-tb, $size-padding-lr, (0, 0, 7em, 0)); &:before { display: none; } } } /* Header */ #header { header { padding-bottom: (_size(element-height) + ($size-padding-lr * 2)); width: 80%; } .container { margin-left: -40%; padding: $size-padding-lr; } } /* Footer */ #footer { min-height: 0; padding: 0; .container { @include padding($size-padding-tb, $size-padding-lr); } footer { @include padding($size-padding-tb, $size-padding-lr); bottom: auto; position: relative; } } }
/* Small */
@include breakpoint(small) { $size-padding-tb: 3em; $size-padding-lr: 1.5em; /* Basic */ h2 { font-size: 1.35em; } /* Main */ .main { .container { @include padding($size-padding-tb, $size-padding-lr); .image.primary:first-child { margin: (($size-padding-tb - $size-padding-lr) * -1) 0 (_size(element-margin) * 1.25) 0; } } .goto-next { display: none; } } /* Header */ #header { height: 80vh; &:after { height: 80vh; } header { padding-bottom: 0; h1 { font-size: 2em; } p { margin-top: 1em; } } .container { display: none; } } /* Footer */ #footer { .container { @include padding($size-padding-tb, $size-padding-lr); } } }
/* XSmall */
@include breakpoint(xsmall) { $size-padding-tb: 3em; $size-padding-lr: 1em; /* Basic */ html, body { min-width: 320px; } /* List */ ul { &.actions { margin: 0 0 _size(element-margin) 0; li { display: block; padding: (_size(element-margin) * 0.5) 0 0 0; text-align: center; width: 100%; &:first-child { padding-top: 0; } > * { margin: 0 !important; width: 100%; } } &.small { li { padding: (_size(element-margin) * 0.25) 0 0 0; &:first-child { padding-top: 0; } } } } &.icons-grid { li { box-shadow: inset 0 1px 0 0 _palette(border) !important; float: none; margin: _size(element-margin) 0 0 0; padding: _size(element-margin) 0 0 0; width: 100%; &:first-child { box-shadow: none !important; margin-top: 0; padding: (_size(element-margin) * 0.5) 0 0 0; } &:nth-child(2n + 1) { box-shadow: none; } &:nth-child(2n + 3) { &:before { display: none; } } } } } /* Button */ input[type="submit"], input[type="reset"], input[type="button"], button, .button { padding: 0; &.icon { padding-left: 0; } } /* Main */ .main { .container { @include padding($size-padding-tb, $size-padding-lr); .image.primary:first-child { margin: (($size-padding-tb - $size-padding-lr) * -1) 0 (_size(element-margin) * 1.25) 0; } } } /* Footer */ #footer { .container { @include padding($size-padding-tb, $size-padding-lr); } footer { .copyright { line-height: inherit; li { border-left: 0; display: block; margin: 0; padding: 0; } } } } }