This repository has been archived on 2023-02-03. You can view files and clone it, but cannot push or open issues or pull requests.
autonomic.zone/src/assets/styles/main.scss

1855 lines
28 KiB
SCSS
Raw Normal View History

2017-09-22 10:52:12 +00:00
---
---
2017-09-22 09:46:39 +00:00
@import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';
2017-09-22 10:52:12 +00:00
@import "libs/_font-awesome/font-awesome";
2017-09-22 09:46:39 +00:00
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,800,800italic');
/*
Spectral by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/
2017-09-22 12:08:30 +00:00
@import 'libs/skel';
@include skel-breakpoints((
xlarge: '(max-width: 1680px)',
large: '(max-width: 1280px)',
medium: '(max-width: 980px)',
small: '(max-width: 736px)',
xsmall: '(max-width: 480px)'
));
@include skel-layout((
reset: 'full',
boxModel: 'border',
grid: ( gutters: 1.5em )
));
2017-09-22 09:46:39 +00:00
/* Basic */
2017-09-22 12:08:30 +00:00
@-ms-viewport {
width: device-width;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
body {
background: _palette(bg);
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&.is-loading {
*, *:before, *:after {
@include vendor('animation', 'none !important');
@include vendor('transition', 'none !important');
2017-09-22 09:46:39 +00:00
}
}
2017-09-22 12:08:30 +00:00
}
body, input, select, textarea {
color: _palette(fg);
font-family: _font(family);
font-size: 15pt;
font-weight: _font(weight);
letter-spacing: _size(letter-spacing);
line-height: 1.65em;
@include breakpoint(xlarge) {
font-size: 13pt;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@include breakpoint(large) {
font-size: 12pt;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@include breakpoint(small) {
font-size: 11pt;
letter-spacing: _size(letter-spacing) * 0.5;
}
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
a {
@include vendor('transition', ('color #{_duration(transitions)} ease', 'border-bottom-color #{_duration(transitions)} ease'));
border-bottom: dotted 1px;
color: inherit;
text-decoration: none;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&:hover {
border-bottom-color: transparent;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
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-extrabold);
letter-spacing: _size(letter-spacing-alt);
line-height: 1em;
margin: 0 0 (_size(element-margin) * 0.5) 0;
text-transform: uppercase;
2017-09-22 09:46:39 +00:00
a {
color: inherit;
text-decoration: none;
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
h2 {
font-size: 1.35em;
line-height: 1.4;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@include breakpoint(small) {
font-size: 1.1em;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
h3 {
font-size: 1.15em;
line-height: 1.4;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@include breakpoint(small) {
font-size: 1em;
}
}
h4 {
font-size: 1em;
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 2px _palette(border);
margin: (_size(element-margin) * 1.5) 0;
&.major {
margin: (_size(element-margin) * 2.25) 0;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
blockquote {
border-left: solid 4px _palette(border);
font-style: italic;
margin: 0 0 _size(element-margin) 0;
padding: 0.5em 0 0.5em 2em;
}
code {
background: _palette(border-bg);
border-radius: 3px;
font-family: _font(family-fixed);
font-size: 0.9em;
letter-spacing: 0;
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;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
code {
display: block;
2017-09-22 09:46:39 +00:00
line-height: 1.75em;
2017-09-22 12:08:30 +00:00
padding: 1em 1.5em;
overflow-x: auto;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
.align-left {
text-align: left;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
.align-center {
text-align: center;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
.align-right {
text-align: right;
}
/* Section/Article */
section, article {
&.special {
text-align: center;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
header {
p {
color: _palette(fg-light);
position: relative;
top: -0.25em;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
h2 + p {
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
h3 + p {
font-size: 1.1em;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
h4 + p,
h5 + p,
h6 + p {
font-size: 0.9em;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
&.major {
margin: 0 0 (_size(element-margin) * 1.75) 0;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
h2, h3, h4, h5, h6 {
border-bottom: solid 2px _palette(border);
display: inline-block;
padding-bottom: 1em;
position: relative;
&:after {
content: '';
display: block;
height: 1px;
}
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
p {
color: _palette(fg);
top: 0;
}
@include breakpoint(small) {
margin: 0 0 _size(element-margin) 0;
}
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
@include breakpoint(medium) {
br {
display: none;
}
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
/* Form */
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
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(border-bg);
border-radius: 3px;
border: none;
color: inherit;
display: block;
outline: 0;
padding: 0 1em;
text-decoration: none;
width: 100%;
&:invalid {
box-shadow: none;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
&:focus {
box-shadow: 0 0 0 2px _palette(accent1, bg);
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
.select-wrapper {
@include icon;
display: block;
position: relative;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&:before {
@include vendor('pointer-events', 'none');
color: _palette(border);
content: '\f078';
display: block;
height: _size(element-height);
line-height: _size(element-height);
position: absolute;
right: 0;
2017-09-22 09:46:39 +00:00
text-align: center;
2017-09-22 12:08:30 +00:00
top: 0;
width: _size(element-height);
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
select::-ms-expand {
display: none;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
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;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&:before {
background: _palette(border-bg);
border-radius: 3px;
content: '';
display: inline-block;
height: (_size(element-height) * 0.6);
left: 0;
line-height: (_size(element-height) * 0.575);
position: absolute;
2017-09-22 09:46:39 +00:00
text-align: center;
2017-09-22 12:08:30 +00:00
top: 0;
width: (_size(element-height) * 0.6);
2017-09-22 09:46:39 +00:00
}
}
2017-09-22 12:08:30 +00:00
&:checked + label {
&:before {
background: _palette(bg);
color: _palette(fg-bold);
content: '\f00c';
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&:focus + label {
&:before {
box-shadow: 0 0 0 2px _palette(accent1, bg);
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
input[type="checkbox"] {
& + label {
&:before {
border-radius: 3px;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
input[type="radio"] {
& + label {
&:before {
border-radius: 100%;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
::-webkit-input-placeholder {
color: _palette(fg-light) !important;
opacity: 1.0;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
:-moz-placeholder {
color: _palette(fg-light) !important;
opacity: 1.0;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
::-moz-placeholder {
color: _palette(fg-light) !important;
opacity: 1.0;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
:-ms-input-placeholder {
color: _palette(fg-light) !important;
opacity: 1.0;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
.formerize-placeholder {
color: _palette(fg-light) !important;
opacity: 1.0;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
/* Box */
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
.box {
border-radius: 3px;
border: solid 2px _palette(border);
margin-bottom: _size(element-margin);
padding: 1.5em;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
> :last-child,
> :last-child > :last-child,
> :last-child > :last-child > :last-child {
margin-bottom: 0;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
&.alt {
border: 0;
border-radius: 0;
padding: 0;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
/* Icon */
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
.icon {
@include icon;
border-bottom: none;
position: relative;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
> .label {
display: none;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
&.major {
@include vendor('transform', 'rotate(-45deg)');
border-radius: 3px;
border: solid 2px _palette(border);
display: inline-block;
font-size: 1.35em;
height: calc(3em + 2px);
line-height: 3em;
text-align: center;
width: calc(3em + 2px);
2017-09-22 09:46:39 +00:00
&:before {
2017-09-22 12:08:30 +00:00
@include vendor('transform', 'rotate(45deg)');
display: inline-block;
font-size: 1.5em;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
@include breakpoint(small) {
font-size: 1em;
2017-09-22 09:46:39 +00:00
}
}
2017-09-22 12:08:30 +00:00
&.style1 {
2017-09-22 12:22:45 +00:00
color: _palette(accent1, bg);
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
&.style2 {
2017-09-22 12:22:45 +00:00
color: _palette(accent2, bg);
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
&.style3 {
2017-09-22 12:22:45 +00:00
color: _palette(accent3, bg);
2017-09-22 12:08:30 +00:00
}
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
/* Image */
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
.image {
border-radius: 3px;
border: 0;
display: inline-block;
position: relative;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
img {
border-radius: 3px;
display: block;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&.left {
float: left;
margin: 0 2em 2em 0;
top: 0.25em;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
&.right {
float: right;
margin: 0 0 2em 2em;
top: 0.25em;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
&.left,
&.right {
max-width: 40%;
img {
width: 100%;
2017-09-22 09:46:39 +00:00
}
}
2017-09-22 12:08:30 +00:00
&.fit {
display: block;
margin: 0 0 _size(element-margin) 0;
width: 100%;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
img {
width: 100%;
}
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
/* List */
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
ol {
list-style: decimal;
margin: 0 0 _size(element-margin) 0;
padding-left: 1.25em;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
li {
padding-left: 0.25em;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
ul {
list-style: disc;
margin: 0 0 _size(element-margin) 0;
padding-left: 1em;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
li {
padding-left: 0.5em;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&.alt {
list-style: none;
padding-left: 0;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
li {
border-top: solid 1px _palette(border);
padding: 0.5em 0;
&:first-child {
border-top: 0;
padding-top: 0;
}
2017-09-22 09:46:39 +00:00
}
}
2017-09-22 12:08:30 +00:00
&.icons {
cursor: default;
list-style: none;
padding-left: 0;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
li {
display: inline-block;
padding: 0 1em 0 0;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&:last-child {
padding-right: 0 !important;
}
2017-09-22 09:46:39 +00:00
}
&.major {
2017-09-22 12:08:30 +00:00
padding: 1em 0;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
li {
padding-right: 3.5em;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@include breakpoint(small) {
padding: 0 1em !important;
}
2017-09-22 09:46:39 +00:00
}
}
}
2017-09-22 12:08:30 +00:00
&.actions {
cursor: default;
list-style: none;
padding-left: 0;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
li {
display: inline-block;
padding: 0 (_size(element-margin) * 0.75) 0 0;
vertical-align: middle;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&:last-child {
padding-right: 0;
2017-09-22 09:46:39 +00:00
}
}
2017-09-22 12:08:30 +00:00
&.small {
li {
padding: 0 (_size(element-margin) * 0.375) 0 0;
2017-09-22 09:46:39 +00:00
}
}
2017-09-22 12:08:30 +00:00
&.vertical {
2017-09-22 09:46:39 +00:00
li {
2017-09-22 12:08:30 +00:00
display: block;
padding: (_size(element-margin) * 0.75) 0 0 0;
2017-09-22 09:46:39 +00:00
&:first-child {
padding-top: 0;
}
2017-09-22 12:08:30 +00:00
> * {
margin-bottom: 0;
2017-09-22 09:46:39 +00:00
}
}
2017-09-22 12:08:30 +00:00
&.small {
2017-09-22 09:46:39 +00:00
li {
2017-09-22 12:08:30 +00:00
padding: (_size(element-margin) * 0.375) 0 0 0;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&:first-child {
padding-top: 0;
2017-09-22 09:46:39 +00:00
}
}
}
}
2017-09-22 12:08:30 +00:00
&.fit {
display: table;
margin-left: (_size(element-margin) * -0.75);
padding: 0;
table-layout: fixed;
width: calc(100% + #{(_size(element-margin) * 0.75)});
2017-09-22 09:46:39 +00:00
li {
2017-09-22 12:08:30 +00:00
display: table-cell;
padding: 0 0 0 (_size(element-margin) * 0.75);
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
> * {
margin-bottom: 0;
2017-09-22 09:46:39 +00:00
}
}
&.small {
2017-09-22 12:08:30 +00:00
margin-left: (_size(element-margin) * -0.375);
width: calc(100% + #{(_size(element-margin) * 0.375)});
2017-09-22 09:46:39 +00:00
li {
2017-09-22 12:08:30 +00:00
padding: 0 0 0 (_size(element-margin) * 0.375);
2017-09-22 09:46:39 +00:00
}
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@include breakpoint(small) {
li {
display: block;
padding: (_size(element-margin) * 0.5) 0 0 0;
text-align: center;
width: 100%;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&:first-child {
padding-top: 0;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
> * {
margin: 0 auto !important;
max-width: 30em;
width: 100%;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&.icon {
&:before {
margin-left: -1em;
2017-09-22 09:46:39 +00:00
}
}
}
}
2017-09-22 12:08:30 +00:00
&.small {
2017-09-22 09:46:39 +00:00
li {
2017-09-22 12:08:30 +00:00
padding: (_size(element-margin) * 0.25) 0 0 0;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&:first-child {
padding-top: 0;
2017-09-22 09:46:39 +00:00
}
}
}
2017-09-22 12:08:30 +00:00
}
}
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
dl {
margin: 0 0 _size(element-margin) 0;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
/* Table */
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
.table-wrapper {
-webkit-overflow-scrolling: touch;
overflow-x: auto;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
table {
margin: 0 0 _size(element-margin) 0;
width: 100%;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
tbody {
tr {
border: solid 1px _palette(border);
border-left: 0;
border-right: 0;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&:nth-child(2n + 1) {
background-color: _palette(border-bg);
2017-09-22 09:46:39 +00:00
}
}
}
2017-09-22 12:08:30 +00:00
td {
padding: 0.75em 0.75em;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
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;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
thead {
border-bottom: solid 2px _palette(border);
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
tfoot {
border-top: solid 2px _palette(border);
}
&.alt {
border-collapse: separate;
2017-09-22 09:46:39 +00:00
tbody {
tr {
2017-09-22 12:08:30 +00:00
td {
border: solid 1px _palette(border);
border-left-width: 0;
border-top-width: 0;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&:first-child {
border-left-width: 1px;
}
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
&:first-child {
td {
border-top-width: 1px;
}
}
}
2017-09-22 09:46:39 +00:00
}
thead {
2017-09-22 12:08:30 +00:00
border-bottom: 0;
2017-09-22 09:46:39 +00:00
}
tfoot {
2017-09-22 12:08:30 +00:00
border-top: 0;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
/* Button */
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
@include vendor('appearance', 'none');
@include vendor('transition', ('background-color #{_duration(transitions)} ease-in-out', 'color #{_duration(transitions)} ease-in-out'));
background-color: transparent;
border-radius: 3px;
border: 0;
box-shadow: inset 0 0 0 2px _palette(border);
color: _palette(fg-bold);
cursor: pointer;
display: inline-block;
font-size: 0.8em;
font-weight: _font(weight-bold);
height: 3.125em;
letter-spacing: _size(letter-spacing-alt);
line-height: 3.125em;
padding: 0 2.75em;
text-align: center;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
background-color: _palette(border-bg);
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&:active {
background-color: _palette(border2-bg);
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&.icon {
&:before {
margin-right: 0.5em;
2017-09-22 09:46:39 +00:00
}
}
2017-09-22 12:08:30 +00:00
&.fit {
display: block;
margin: 0 0 (_size(element-margin) * 0.5) 0;
width: 100%;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&.small {
2017-09-22 09:46:39 +00:00
font-size: 0.8em;
2017-09-22 12:08:30 +00:00
}
&.big {
font-size: 1.35em;
}
&.special {
2017-09-22 12:22:45 +00:00
background-color: _palette(accent4, bg);
2017-09-22 12:08:30 +00:00
box-shadow: none !important;
2017-09-22 12:22:45 +00:00
color: _palette(accent4, fg-bold) !important;
2017-09-22 09:46:39 +00:00
&:hover {
2017-09-22 12:22:45 +00:00
background-color: lighten(_palette(accent4, bg), 5) !important;
2017-09-22 09:46:39 +00:00
}
&:active {
2017-09-22 12:22:45 +00:00
background-color: darken(_palette(accent4, bg), 5) !important;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&.disabled,
&:disabled {
@include vendor('pointer-events', 'none');
opacity: 0.25;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@include breakpoint(small) {
height: 3.75em;
line-height: 3.75em;
}
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
/* Features */
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
.features {
@include vendor('display', 'flex');
@include vendor('flex-wrap', 'wrap');
@include vendor('justify-content', 'center');
list-style: none;
padding: 0;
width: 100%;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
li {
@include padding(4em, 4em, (0,0,0,2em));
display: block;
position: relative;
text-align: left;
width: 50%;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@for $i from 1 through _misc(max-features) {
$j: 0.035 * $i;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&:nth-child(#{$i}) {
background-color: rgba(0,0,0, $j);
2017-09-22 09:46:39 +00:00
}
}
2017-09-22 12:08:30 +00:00
&:before {
display: block;
2017-09-22 12:22:45 +00:00
color: _palette(accent1, bg);
2017-09-22 12:08:30 +00:00
position: absolute;
left: 1.75em;
top: 2.75em;
font-size: 1.5em;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
&:nth-child(1) {
border-top-left-radius: 3px;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
&:nth-child(2) {
border-top-right-radius: 3px;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&:nth-last-child(1) {
border-bottom-right-radius: 3px;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&:nth-last-child(2) {
border-bottom-left-radius: 3px;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@include breakpoint(medium) {
@include padding(3em, 2em);
text-align: center;
2017-09-22 09:46:39 +00:00
&:before {
2017-09-22 12:08:30 +00:00
left: 0;
margin: 0 0 (_size(element-margin) * 0.5) 0;
position: relative;
top: 0;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@include breakpoint(small) {
@include padding(3em, 0);
background-color: transparent !important;
border-top: solid 2px _palette(border);
width: 100%;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&:first-child {
border-top: 0;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
}
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
/* Spotlight */
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
.spotlight {
@include vendor('align-items', 'center');
@include vendor('display', 'flex');
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
.image {
@include vendor('order', '1');
border-radius: 0;
width: 40%;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
img {
border-radius: 0;
width: 100%;
2017-09-22 09:46:39 +00:00
}
}
2017-09-22 12:08:30 +00:00
.content {
@include padding(2em, 4em);
@include vendor('order', '2');
max-width: 48em;
width: 60%;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&:nth-child(2n) {
@include vendor('flex-direction', 'row-reverse');
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@for $i from 1 through _misc(max-spotlights) {
$j: 0.075 * $i;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&:nth-child(#{$i}) {
background-color: rgba(0,0,0, $j);
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@include breakpoint(large) {
.image {
width: 45%;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
.content {
width: 55%;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@include breakpoint(medium) {
display: block;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
br {
display: none;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
.image {
width: 100%;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
.content {
@include padding(4em, 3em);
max-width: none;
text-align: center;
width: 100%;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@include breakpoint(small) {
.content {
@include padding(3em, 2em);
2017-09-22 09:46:39 +00:00
}
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
/* Wrapper */
2017-09-22 12:08:30 +00:00
@mixin wrapper($p) {
background-color: _palette($p, bg);
color: _palette($p, fg);
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
// Basic
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
strong, b {
color: _palette($p, fg-bold);
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
h2, h3, h4, h5, h6 {
color: _palette($p, fg-bold);
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
hr {
border-color: _palette($p, border);
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
blockquote {
border-color: _palette($p, border);
}
code {
background: _palette($p, border-bg);
}
// Section/Article
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
header {
p {
color: _palette($p, fg-light);
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
&.major {
h2, h3, h4, h5, h6 {
border-color: _palette($p, border);
}
2017-09-22 09:46:39 +00:00
p {
2017-09-22 12:08:30 +00:00
color: _palette($p, fg);
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
// Form
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
label {
color: _palette($p, fg-bold);
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
background: _palette($p, border-bg);
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
.select-wrapper {
&:before {
color: _palette($p, border);
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
input[type="checkbox"],
input[type="radio"], {
& + label {
color: _palette($p, fg);
2017-09-22 09:46:39 +00:00
&:before {
2017-09-22 12:08:30 +00:00
background: _palette($p, border-bg);
2017-09-22 09:46:39 +00:00
}
}
2017-09-22 12:08:30 +00:00
&:checked + label {
&:before {
background: _palette($p, fg-bold);
color: _palette($p, bg);
2017-09-22 09:46:39 +00:00
}
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
::-webkit-input-placeholder {
color: _palette($p, fg-light) !important;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
:-moz-placeholder {
color: _palette($p, fg-light) !important;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
::-moz-placeholder {
color: _palette($p, fg-light) !important;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
:-ms-input-placeholder {
color: _palette($p, fg-light) !important;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
.formerize-placeholder {
color: _palette($p, fg-light) !important;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
// Icon
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
.icon {
&.major {
border-color: _palette($p, border);
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
// List
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
ul {
&.alt {
li {
border-color: _palette($p, border);
2017-09-22 09:46:39 +00:00
}
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
// Table
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
table {
tbody {
tr {
2017-09-22 09:46:39 +00:00
border-color: _palette($p, border);
2017-09-22 12:08:30 +00:00
&:nth-child(2n + 1) {
background-color: _palette($p, border-bg);
2017-09-22 09:46:39 +00:00
}
}
}
2017-09-22 12:08:30 +00:00
th {
2017-09-22 09:46:39 +00:00
color: _palette($p, fg-bold);
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
thead {
border-color: _palette($p, border);
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
tfoot {
border-color: _palette($p, border);
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&.alt {
tbody {
tr {
td {
border-color: _palette($p, border);
}
2017-09-22 09:46:39 +00:00
}
}
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
// Button
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
box-shadow: inset 0 0 0 2px _palette($p, border);
color: _palette($p, fg-bold);
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&:hover {
background-color: _palette($p, border-bg);
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
&:active {
background-color: _palette($p, border2-bg);
2017-09-22 09:46:39 +00:00
}
}
2017-09-22 12:08:30 +00:00
// Features
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
.features {
li {
@include breakpoint(small) {
border-top-color: _palette($p, border);
}
}
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
.wrapper {
@include padding(6em, 0);
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
> .inner {
width: 60em;
margin: 0 auto;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@include breakpoint(large) {
width: 90%;
2017-09-22 09:46:39 +00:00
}
@include breakpoint(medium) {
2017-09-22 12:08:30 +00:00
width: 100%;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&.alt {
padding: 0;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
&.style1 {
@include wrapper(accent1);
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&.style2 {
background-color: _palette(bg);
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&.style3 {
2017-09-22 12:22:45 +00:00
@include wrapper(accent3);
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
&.style4 {
background-color: transparent;
}
&.style5 {
2017-09-22 12:22:45 +00:00
@include wrapper(accent2);
2017-09-22 12:08:30 +00:00
}
@include breakpoint(medium) {
@include padding(4em, 3em);
}
@include breakpoint(small) {
@include padding(3em, 2em);
}
}
/* Page Wrapper + Menu */
#page-wrapper {
@include vendor('transition', 'opacity #{_duration(menu)} ease');
opacity: 1;
padding-top: 3em;
&:before {
background: rgba(0,0,0,0);
content: '';
display: block;
display: none;
2017-09-22 09:46:39 +00:00
height: 100%;
2017-09-22 12:08:30 +00:00
left: 0;
2017-09-22 09:46:39 +00:00
position: fixed;
top: 0;
2017-09-22 12:08:30 +00:00
width: 100%;
z-index: _misc(z-index-base) + 1;
}
}
#menu {
@include vendor('transform', 'translateX(20em)');
@include vendor('transition', 'transform #{_duration(menu)} ease');
-webkit-overflow-scrolling: touch;
background: _palette(accent1, bg);
color: _palette(accent1, fg-bold);
height: 100%;
max-width: 80%;
overflow-y: auto;
padding: 3em 2em;
position: fixed;
right: 0;
top: 0;
width: 20em;
z-index: _misc(z-index-base) + 2;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
ul {
list-style: none;
padding: 0;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
> li {
border-top: solid 1px _palette(accent1, border);
margin: 0.5em 0 0 0;
padding: 0.5em 0 0 0;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&:first-child {
border-top: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
> a {
border: 0;
color: inherit;
display: block;
font-size: 0.8em;
letter-spacing: _size(letter-spacing-alt);
outline: 0;
text-decoration: none;
text-transform: uppercase;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@include breakpoint(small) {
line-height: 3em;
2017-09-22 09:46:39 +00:00
}
}
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
.close {
background-image: url('images/close.svg');
background-position: 4.85em 1em;
background-repeat: no-repeat;
border: 0;
cursor: pointer;
display: block;
height: 3em;
position: absolute;
right: 0;
top: 0;
vertical-align: middle;
width: 7em;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@include breakpoint(small) {
padding: 3em 1.5em;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
body.is-menu-visible {
#page-wrapper {
opacity: 0.35;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&:before {
display: block;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
#menu {
@include vendor('transform', 'translateX(0)');
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
/* Header */
2017-09-22 12:08:30 +00:00
#header {
@include vendor('transition', 'background-color #{_duration(transitions)} ease');
background: _palette(bg);
height: 3em;
left: 0;
line-height: 3em;
position: fixed;
top: 0;
width: 100%;
z-index: _misc(z-index-base);
h1 {
@include vendor('transition', 'opacity #{_duration(transitions)} ease');
height: inherit;
left: 1.25em;
line-height: inherit;
position: absolute;
2017-09-22 09:46:39 +00:00
top: 0;
2017-09-22 12:08:30 +00:00
a {
border: 0;
display: block;
2017-09-22 09:46:39 +00:00
height: inherit;
line-height: inherit;
2017-09-22 12:08:30 +00:00
@include breakpoint(small) {
font-size: 0.8em;
2017-09-22 09:46:39 +00:00
}
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
nav {
height: inherit;
line-height: inherit;
position: absolute;
right: 0;
top: 0;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
> ul {
list-style: none;
margin: 0;
padding: 0;
white-space: nowrap;
> li {
display: inline-block;
2017-09-22 09:46:39 +00:00
padding: 0;
2017-09-22 12:08:30 +00:00
> a {
border: 0;
color: _palette(fg-bold);
display: block;
font-size: 0.8em;
letter-spacing: _size(letter-spacing-alt);
padding: 0 1.5em;
text-transform: uppercase;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&.menuToggle {
outline: 0;
position: relative;
&:after {
background-image: url('images/bars.svg');
background-position: right center;
background-repeat: no-repeat;
content: '';
display: inline-block;
height: 3.75em;
vertical-align: top;
width: 2em;
2017-09-22 09:46:39 +00:00
}
@include breakpoint(small) {
2017-09-22 12:08:30 +00:00
padding: 0 1.5em;
span {
display: none;
}
2017-09-22 09:46:39 +00:00
}
}
2017-09-22 12:08:30 +00:00
@include breakpoint(small) {
padding: 0 0 0 1.5em;
2017-09-22 09:46:39 +00:00
}
}
2017-09-22 12:08:30 +00:00
&:first-child {
margin-left: 0;
}
2017-09-22 09:46:39 +00:00
}
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&.alt {
background: transparent;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
h1 {
@include vendor('pointer-events', 'none');
opacity: 0;
2017-09-22 09:46:39 +00:00
}
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
/* Banner */
2017-09-22 12:08:30 +00:00
#banner {
@include vendor('display', 'flex');
@include vendor('flex-direction', 'column');
@include vendor('justify-content', 'center');
cursor: default;
height: 100vh;
min-height: 35em;
overflow: hidden;
position: relative;
text-align: center;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
h2 {
@include vendor('transform', 'scale(1)');
@include vendor('transition', ('transform 0.5s ease', 'opacity 0.5s ease'));
display: inline-block;
font-size: 1.75em;
opacity: 1;
padding: 0.35em 1em;
position: relative;
z-index: 1;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&:before, &:after {
@include vendor('transition', 'width 1s ease');
@include vendor('transition-delay', '0.25s');
background: _palette(fg-bold);
content: '';
display: block;
height: 2px;
position: absolute;
width: 100%;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
&:before {
top: 0;
left: 0;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
&:after {
2017-09-22 09:46:39 +00:00
bottom: 0;
2017-09-22 12:08:30 +00:00
right: 0;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
h1 {
@include vendor('transition', 'opacity 0.5s ease');
@include vendor('transition-delay', '1s');
margin-bottom: 25px;
opacity: 1;
a {
color: inherit;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
.particles-js-canvas-el {
@include vendor('transition', 'opacity #{_duration(fadein)} ease-in-out');
@include vendor('transition-delay', '1s');
opacity: 1;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@include breakpoint(small) {
@include padding(7em, 3em);
height: auto;
min-height: 0;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
h2 {
font-size: 1.25em;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
br {
display: none;
2017-09-22 09:46:39 +00:00
}
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
body.is-loading {
#banner {
h1 {
opacity: 0;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
h2 {
@include vendor('transform', 'scale(0.95)');
opacity: 0;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&:before, &:after {
width: 0;
2017-09-22 09:46:39 +00:00
}
}
2017-09-22 12:08:30 +00:00
.particles-js-canvas-el {
opacity: 0;
}
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
/* CTA */
2017-09-22 12:08:30 +00:00
#cta {
.inner {
@include vendor('display', 'flex');
max-width: 45em;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
header {
@include vendor('order', '1');
padding-right: 3em;
width: 70%;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
p {
color: inherit;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
.actions {
@include vendor('order', '2');
width: 30%;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@include breakpoint(medium) {
display: block;
text-align: center;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
header {
padding-right: 0;
width: 100%;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
.actions {
margin-left: auto;
margin-right: auto;
max-width: 20em;
width: 100%;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@include breakpoint(small) {
.actions {
max-width: none;
2017-09-22 09:46:39 +00:00
}
}
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
/* Main */
2017-09-22 12:08:30 +00:00
#main {
> header {
@include padding(12em, 0);
@include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))'));
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
h2 {
font-size: 1.75em;
margin: 0 0 (_size(element-margin) * 0.25) 0;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
p {
color: inherit;
letter-spacing: _size(letter-spacing-alt);
text-transform: uppercase;
top: 0;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
a {
color: inherit;
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@include breakpoint(xlarge) {
@include padding(10em, 0);
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@include breakpoint(large) {
@include padding(8em, 3em);
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@include breakpoint(medium) {
@include padding(10em, 3em);
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@include breakpoint(small) {
@include padding(5em, 3em);
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
h2 {
font-size: 1.25em;
margin: 0 0 (_size(element-margin) * 0.5) 0;
2017-09-22 09:46:39 +00:00
}
}
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
body.is-mobile {
#main {
> header {
background-attachment: scroll;
2017-09-22 09:46:39 +00:00
}
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
/* Footer */
2017-09-22 12:08:30 +00:00
#footer {
@include padding(6em, 0);
background-color: darken(_palette(bg), 8);
text-align: center;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
.icons {
font-size: 1.25em;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
a {
color: _palette(fg-light);
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&:hover {
color: _palette(fg);
2017-09-22 09:46:39 +00:00
}
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
.copyright {
color: _palette(fg-light);
font-size: 0.8em;
letter-spacing: _size(letter-spacing-alt);
list-style: none;
padding: 0;
text-transform: uppercase;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
li {
border-left: solid 1px _palette(fg-light);
display: inline-block;
line-height: 1em;
margin-left: 1em;
padding-left: 1em;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&:first-child {
border-left: 0;
margin-left: 0;
padding-left: 0;
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
a {
color: inherit;
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
&:hover {
color: _palette(fg);
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@include breakpoint(xsmall) {
border: 0;
display: block;
line-height: 1.65em;
margin: 0;
padding: 0.5em 0;
2017-09-22 09:46:39 +00:00
}
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@include breakpoint(medium) {
@include padding(4em, 3em);
}
2017-09-22 09:46:39 +00:00
2017-09-22 12:08:30 +00:00
@include breakpoint(small) {
@include padding(3em, 2em);
2017-09-22 09:46:39 +00:00
}
2017-09-22 12:08:30 +00:00
}
2017-09-22 09:46:39 +00:00
/* Landing */
2017-09-22 12:08:30 +00:00
body.landing {
#page-wrapper {
padding-top: 0;
}
#footer {
background-color: darken(transparentize(_palette(bg), 0.1), 8);
}
}
body.is-mobile {
&.landing {
2017-09-22 09:46:39 +00:00
#page-wrapper {
2017-09-22 12:08:30 +00:00
background: none;
}
#banner,
.wrapper.style4 {
2017-09-22 09:46:39 +00:00
@include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))', 'url("../../assets/images/banner.jpg")'));
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
#footer {
2017-09-22 12:08:30 +00:00
background-color: darken(_palette(bg), 8);
2017-09-22 09:46:39 +00:00
}
}
2017-09-22 12:08:30 +00:00
}
$main: #1a222c;
$sec: #4B5664;
$purple: #54516A;
$cut: 768px;
@import url('https://fonts.googleapis.com/css?family=Montserrat');
body {
margin: 0;
font-family: 'Montserrat', sans-serif;
}
@-webkit-keyframes pulse {
from {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40);
opacity: .4;
top: 0;
}
50% {
-ms-filter: none;
-webkit-filter: none;
filter: none;
opacity: 1;
top: -10px;
}
to {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40);
opacity: .4;
top: 0;
}
}
@keyframes pulse {
from {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40);
opacity: .4;
top: 0
}
50% {
-ms-filter: none;
-webkit-filter: none;
filter: none;
opacity: 1;
top: -10px
}
to {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40);
opacity: .4;
top: 0
}
}
.particle {
position: relative;
#particles-js {
vertical-align: bottom;
width: 100%;
min-height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
.particles-js-canvas-el {
width: 100%;
height: 100%;
2017-09-22 09:46:39 +00:00
}
}
2017-09-22 12:08:30 +00:00
.content {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 1;
}
}