site/_sass/_basscss.scss
@charset "UTF-8";
/*
BASSCSS
Next-level CSS toolkit - http://jxnblk.github.io/basscss
Made with love by Jxnblk - ©2014 Brent Jackson
MIT License http://opensource.org/licenses/MIT
*/
body, button, input, select, textarea, pre {
margin: 0;
}
h1, h2, h3, h4, h5, h6, p, dl, ol, ul {
margin-top: 0;
margin-bottom: 1rem;
}
button, input, select, textarea {
font-family: inherit;
font-size: 100%;
}
article, aside, details, figcaption, figure, footer, header, main, nav, section, summary {
display: block;
}
body {
font-family: 'Helvetica Neue', Helvetica, sans-serif;
line-height: 1.5em;
font-weight: 400;
}
h1, .h1, .f1 {
font-size: 2rem;
line-height: 2.5rem;
}
h2, .h2, .f2 {
font-size: 1.5rem;
line-height: 2rem;
}
h3, .h3, .f3 {
font-size: 1.25rem;
line-height: 1.5rem;
}
p, .p, .f4, h4, h5, h6, dl, ol, ul {
font-size: 1.125rem;
line-height: 1.5rem;
}
small, .small, .f5 {
font-size: .875rem;
line-height: 1.5rem;
}
@media screen and (min-width: 48em) {
.h1 {
font-size: 4rem;
line-height: 5rem;
}
.h2 {
font-size: 2rem;
line-height: 2.5rem;
}
.h3 {
font-size: 1.5rem;
line-height: 2rem;
}
.p {
font-size: 1.25rem;
line-height: 2rem;
}
.small {
font-size: 1rem;
}
}
@media screen and (min-width: 64em) {
.h1 {
font-size: 6rem;
line-height: 8rem;
}
.h2 {
font-size: 3rem;
line-height: 3.5rem;
}
}
strong, .bold {
font-weight: bold;
}
.regular {
font-weight: normal;
}
.italic {
font-style: italic;
}
.caps {
text-transform: uppercase;
letter-spacing: .2em;
}
.center {
text-align: center;
}
.right-align {
text-align: right;
}
.measure {
max-width: 48rem;
}
.measure-narrow {
max-width: 32rem;
}
.measure-wide {
max-width: 60rem;
}
.leading-1 {
line-height: 1.5rem;
}
.leading-2 {
line-height: 2rem;
}
.leading-3 {
line-height: 3rem;
}
.leading-4 {
line-height: 4rem;
}
.m0 {
margin: 0;
}
.mb0 {
margin-bottom: 0;
}
.m1 {
margin: 1rem;
}
.mt1 {
margin-top: 1rem;
}
.mr1 {
margin-right: 1rem;
}
.mb1 {
margin-bottom: 1rem;
}
.ml1 {
margin-left: 1rem;
}
.m2 {
margin: 2rem;
}
.mt2 {
margin-top: 2rem;
}
.mr2 {
margin-right: 2rem;
}
.mb2 {
margin-bottom: 2rem;
}
.ml2 {
margin-left: 2rem;
}
.m3 {
margin: 3rem;
}
.mt3 {
margin-top: 3rem;
}
.mr3 {
margin-right: 3rem;
}
.mb3 {
margin-bottom: 3rem;
}
.ml3 {
margin-left: 3rem;
}
.m4 {
margin: 4rem;
}
.mt4 {
margin-top: 4rem;
}
.mr4 {
margin-right: 4rem;
}
.mb4 {
margin-bottom: 4rem;
}
.ml4 {
margin-left: 4rem;
}
.wrap {
margin-right: auto;
margin-left: auto;
}
.m-responsive {
margin: 2rem;
}
.mt-responsive {
margin-top: 2rem;
}
.mr-responsive {
margin-right: 2rem;
}
.mb-responsive {
margin-bottom: 2rem;
}
.ml-responsive {
margin-left: 2rem;
}
@media screen and (min-width: 48em) and (max-width: 64em) {
.m-responsive {
margin: 3rem;
}
.mt-responsive {
margin-top: 3rem;
}
.mr-responsive {
margin-right: 3rem;
}
.mb-responsive {
margin-bottom: 3rem;
}
.ml-responsive {
margin-left: 3rem;
}
}
@media screen and (min-width: 64em) {
.m-responsive {
margin: 4rem;
}
.mt-responsive {
margin-top: 4rem;
}
.mr-responsive {
margin-right: 4rem;
}
.mb-responsive {
margin-bottom: 4rem;
}
.ml-responsive {
margin-left: 4rem;
}
}
.p1 {
padding: 1rem;
}
.px1 {
padding-right: 1rem;
padding-left: 1rem;
}
.py1 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.p2 {
padding: 2rem;
}
.px2 {
padding-right: 2rem;
padding-left: 2rem;
}
.py2 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.p3 {
padding: 3rem;
}
.px3 {
padding-right: 3rem;
padding-left: 3rem;
}
.py3 {
padding-top: 3rem;
padding-bottom: 3rem;
}
.p4 {
padding: 4rem;
}
.px4 {
padding-right: 4rem;
padding-left: 4rem;
}
.py4 {
padding-top: 4rem;
padding-bottom: 4rem;
}
.p-responsive {
padding: 1.5rem;
}
.px-responsive {
padding-right: 1.5rem;
padding-left: 1.5rem;
}
.py-responsive {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
@media screen and (min-width: 48em) and (max-width: 64em) {
.p-responsive {
padding: 3rem;
}
.px-responsive {
padding-right: 3rem;
padding-left: 3rem;
}
.py-responsive {
padding-top: 3rem;
padding-bottom: 3rem;
}
}
@media screen and (min-width: 64em) {
.p-responsive {
padding: 4rem;
}
.px-responsive {
padding-right: 4rem;
padding-left: 4rem;
}
.py-responsive {
padding-top: 4rem;
padding-bottom: 4rem;
}
}
.inline {
display: inline;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.oh {
overflow: hidden;
}
.left {
float: left;
}
.right {
float: right;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.fit {
max-width: 100%;
}
.full-width {
width: 100%;
}
.half-width {
width: 50%;
}
.mobile-show {
display: none;
}
@media screen and (max-width: 48em) {
.mobile-show,
.mobile-block {
display: block;
}
.mobile-block {
width: 100%;
}
.mobile-hide {
display: none;
}
.mobile-center {
text-align: center;
}
}
.button {
font-family: inherit;
font-weight: bold;
text-decoration: none;
cursor: pointer;
border: none;
-webkit-appearance: none;
appearance: none;
white-space: nowrap;
display: inline-block;
line-height: 2rem;
height: auto;
min-height: 2rem;
padding: .5rem 1rem;
}
.button-big {
padding: 1rem 1.5rem;
}
.button-small {
padding: 0 1rem;
}
.form {
font-size: 1rem;
}
.input {
appearance: none;
border-style: solid;
border-width: 1px;
-moz-box-sizing: border-box;
box-sizing: border-box;
max-width: 100%;
height: 3rem;
line-height: 2rem;
padding: .5rem;
border-radius: .25rem;
}
.select {
box-sizing: border-box;
height: 3rem;
margin-right: 0;
margin-left: 0;
border-radius: .25rem;
}
.textarea {
box-sizing: border-box;
padding: 1rem;
line-height: 1.5rem;
border-radius: .25rem;
}
.form-stacked label,
.form-stacked .input,
.form-stacked .select {
display: block;
width: 100%;
}
.form-stacked .input,
.form-stacked .select,
.form-stacked .radio,
.form-stacked .checkbox {
margin-bottom: 1rem;
}
.list {
padding-left: 2rem;
}
.list-simple {
list-style: none;
padding-left: 0;
}
.list-inline {
list-style: none;
padding-left: 0;
}
.list-inline li {
display: inline;
white-space: nowrap;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.fixed {
position: fixed;
}
.t0 {
top: 0;
}
.r0 {
right: 0;
}
.b0 {
bottom: 0;
}
.l0 {
left: 0;
}
.z1 {
z-index: 1;
}
.z2 {
z-index: 2;
}
.z3 {
z-index: 3;
}
.z4 {
z-index: 4;
}
.absolute-center {
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
display: table;
}
.white {
color: #fff;
}
.blue {
color: #86C1A9;
}
.light-gray {
color: #eeeeee;
}
.mid-gray {
color: #777777;
}
.dark-gray {
color: #333333;
}
.red {
color: #ff5522;
}
.green {
color: #00ff66;
}
.orange {
color: #ffcc22;
}
.bg-white {
background-color: #fff;
}
.bg-blue {
background-color: #86C1A9;
}
.bg-light-gray {
background-color: #eeeeee;
}
.bg-mid-gray {
background-color: #777777;
}
.bg-dark-gray {
background-color: #333333;
}
.bg-red {
background-color: #ff5522;
}
.bg-green {
background-color: #00ff66;
}
.bg-orange {
background-color: #ffcc22;
}
body {
color: #333333;
background-color: #fff;
}
a {
color: #86C1A9;
text-decoration: none;
}
a:hover {
color: #457964;
}
.button {
border-radius: .25rem;
transition-duration: .2s;
transition-timing-function: ease;
transition-property: box-shadow , background-color;
}
.button:focus {
outline: none;
box-shadow: 0 0 0 2px white, 0 0 1px 4px rgba(0, 150, 204, 0.5);
}
.button-blue {
color: #fff;
background-color: #86C1A9;
}
.button-blue:hover {
color: #fff;
background-color: #004b66;
}
.button-gray {
color: #fff;
background-color: #777777;
}
.button-gray:hover {
color: #fff;
background-color: #444444;
}
.form-light .input,
.form-light .textarea,
.form-light .select {
transition: box-shadow .2s ease;
border-color: #777777;
}
.form-light .input:focus,
.form-light .textarea:focus,
.form-light .select:focus {
outline: none;
border-color: #86C1A9;
box-shadow: 0 0 0.125rem rgba(0, 150, 204, 0.5);
}
.form-light .radio input,
.form-light .checkbox input {
transition: box-shadow .2s ease;
}
.form-light .radio input:focus,
.form-light .checkbox input:focus {
outline: none;
box-shadow: 0 0 0 2px white, 0 0 1px 4px rgba(0, 150, 204, 0.5);
}
.form-light .radio input {
border-radius: 50%;
}
.border {
border-style: solid;
border-width: 1px;
}
.border-top {
border-top-style: solid;
border-top-width: 1px;
}
.border-light-gray {
border-color: #eeeeee;
}
.rounded {
border-radius: .25rem;
}
.transition-all {
transition: all .2s ease;
}