main.css
* {
box-sizing: border-box;
}
.column,
.columns {
float: left;
position: relative;
}
.column .center,
.columns .center {
text-align: center;
}
.column img,
.columns img {
width: 100%;
}
.small-1 {
width: 8.333333333333332%;
padding-left: 15px;
padding-right: 15px;
}
.small-2 {
width: 16.666666666666664%;
padding-left: 15px;
padding-right: 15px;
}
.small-3 {
width: 25%;
padding-left: 15px;
padding-right: 15px;
}
.small-4 {
width: 33.33333333333333%;
padding-left: 15px;
padding-right: 15px;
}
.small-5 {
width: 41.66666666666667%;
padding-left: 15px;
padding-right: 15px;
}
.small-6 {
width: 50%;
padding-left: 15px;
padding-right: 15px;
}
.small-7 {
width: 58.333333333333336%;
padding-left: 15px;
padding-right: 15px;
}
.small-8 {
width: 66.66666666666666%;
padding-left: 15px;
padding-right: 15px;
}
.small-9 {
width: 75%;
padding-left: 15px;
padding-right: 15px;
}
.small-10 {
width: 83.33333333333334%;
padding-left: 15px;
padding-right: 15px;
}
.small-11 {
width: 91.66666666666666%;
padding-left: 15px;
padding-right: 15px;
}
.small-12 {
width: 100%;
padding-left: 15px;
padding-right: 15px;
}
@media 'small'-up {
.small-center {
float: none;
margin: 0 auto;
}
}
@media 'small'-only {
.small-only-center {
float: none;
margin: 0 auto;
}
}
@media only screen {
.small-1 {
width: 8.333333333333332%;
padding-left: 15px;
padding-right: 15px;
}
.small-2 {
width: 16.666666666666664%;
padding-left: 15px;
padding-right: 15px;
}
.small-3 {
width: 25%;
padding-left: 15px;
padding-right: 15px;
}
.small-4 {
width: 33.33333333333333%;
padding-left: 15px;
padding-right: 15px;
}
.small-5 {
width: 41.66666666666667%;
padding-left: 15px;
padding-right: 15px;
}
.small-6 {
width: 50%;
padding-left: 15px;
padding-right: 15px;
}
.small-7 {
width: 58.333333333333336%;
padding-left: 15px;
padding-right: 15px;
}
.small-8 {
width: 66.66666666666666%;
padding-left: 15px;
padding-right: 15px;
}
.small-9 {
width: 75%;
padding-left: 15px;
padding-right: 15px;
}
.small-10 {
width: 83.33333333333334%;
padding-left: 15px;
padding-right: 15px;
}
.small-11 {
width: 91.66666666666666%;
padding-left: 15px;
padding-right: 15px;
}
.small-12 {
width: 100%;
padding-left: 15px;
padding-right: 15px;
}
@media only screen {
.small-center {
float: none;
margin: 0 auto;
}
}
@media screen and (max-width: 40.063em) {
.small-only-center {
float: none;
margin: 0 auto;
}
}
}
@media screen and (min-width: 40.063em) {
.medium-1 {
width: 8.333333333333332%;
padding-left: 15px;
padding-right: 15px;
}
.medium-2 {
width: 16.666666666666664%;
padding-left: 15px;
padding-right: 15px;
}
.medium-3 {
width: 25%;
padding-left: 15px;
padding-right: 15px;
}
.medium-4 {
width: 33.33333333333333%;
padding-left: 15px;
padding-right: 15px;
}
.medium-5 {
width: 41.66666666666667%;
padding-left: 15px;
padding-right: 15px;
}
.medium-6 {
width: 50%;
padding-left: 15px;
padding-right: 15px;
}
.medium-7 {
width: 58.333333333333336%;
padding-left: 15px;
padding-right: 15px;
}
.medium-8 {
width: 66.66666666666666%;
padding-left: 15px;
padding-right: 15px;
}
.medium-9 {
width: 75%;
padding-left: 15px;
padding-right: 15px;
}
.medium-10 {
width: 83.33333333333334%;
padding-left: 15px;
padding-right: 15px;
}
.medium-11 {
width: 91.66666666666666%;
padding-left: 15px;
padding-right: 15px;
}
.medium-12 {
width: 100%;
padding-left: 15px;
padding-right: 15px;
}
@media screen and (min-width: 40.063em) {
.medium-center {
float: none;
margin: 0 auto;
}
}
@media screen and (max-width: 64.063em) {
.medium-only-center {
float: none;
margin: 0 auto;
}
}
}
@media screen and (min-width: 64.063em) {
.large-1 {
width: 8.333333333333332%;
padding-left: 15px;
padding-right: 15px;
}
.large-2 {
width: 16.666666666666664%;
padding-left: 15px;
padding-right: 15px;
}
.large-3 {
width: 25%;
padding-left: 15px;
padding-right: 15px;
}
.large-4 {
width: 33.33333333333333%;
padding-left: 15px;
padding-right: 15px;
}
.large-5 {
width: 41.66666666666667%;
padding-left: 15px;
padding-right: 15px;
}
.large-6 {
width: 50%;
padding-left: 15px;
padding-right: 15px;
}
.large-7 {
width: 58.333333333333336%;
padding-left: 15px;
padding-right: 15px;
}
.large-8 {
width: 66.66666666666666%;
padding-left: 15px;
padding-right: 15px;
}
.large-9 {
width: 75%;
padding-left: 15px;
padding-right: 15px;
}
.large-10 {
width: 83.33333333333334%;
padding-left: 15px;
padding-right: 15px;
}
.large-11 {
width: 91.66666666666666%;
padding-left: 15px;
padding-right: 15px;
}
.large-12 {
width: 100%;
padding-left: 15px;
padding-right: 15px;
}
@media screen and (min-width: 64.063em) {
.large-center {
float: none;
margin: 0 auto;
}
}
@media screen and (min-width: 64.063em) {
.large-only-center {
float: none;
margin: 0 auto;
}
}
}
.row {
margin-left: auto;
margin-right: auto;
padding-bottom: 15px;
width: 100%;
max-width: 1000px;
}
.row:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
line-height: 0;
height: 0;
}
.row.expand {
margin-left: -15px;
margin-right: -15px;
}
* {
-webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
h5 {
color: #e14283;
font-family: "omnes-pro", sans-serif;
font-weight: 100;
text-transform: none;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.4rem;
}
body,
p {
color: #1e2c46;
font-family: "proxima-nova-soft", sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 1.8;
text-shadow: none;
}
p {
padding-bottom: 1em;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
}
blockquote {
box-shadow: inset 2px 0 #948fae;
font-family: "source-code-pro", monospace;
background: rgba(148,143,174,0.1);
display: block;
position: relative;
font-style: italic;
left: 0;
right: 0;
margin-left: 0;
margin-right: 0;
padding: 2px 0;
}
code {
background: rgba(30,44,70,0.1);
padding-left: 0.25em;
padding-right: 0.25em;
}
small {
color: rgba(30,44,70,0.8);
}
h1 {
color: #e14283;
font-size: 48px;
}
h2 {
color: #e14283;
font-size: 32px;
line-height: 1.4;
margin-bottom: 0.6em;
}
p.subtitle {
color: rgba(30,44,70,0.75);
font-size: 24px;
}
a {
color: #6ed8d6;
text-decoration: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
a.special {
color: #e14283;
font-weight: 500;
}
.text-center {
text-align: center;
}
code {
color: #e14283;
font-family: "source-code-pro", monospace;
font-size: 14px;
font-weight: 900;
line-height: 1.4;
}
pre {
box-shadow: 0 2px 0 0 #fff;
background-color: #fff;
padding-left: 20px;
padding-right: 20px;
margin-bottom: 30px;
}
pre code {
color: #e14283;
font-family: "source-code-pro", monospace;
font-size: 14px;
font-weight: 900;
line-height: 1.4;
}
pre code span.comment {
color: rgba(225,66,131,0.5);
}
pre code span.bash:before {
content: '$';
color: rgba(225,66,131,0.5);
display: inline-block;
margin-right: 6px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.text-center {
text-align: center;
}
ul {
padding-left: 0;
}
.inline-list {
padding-left: 0;
}
.inline-list > * {
display: inline-block;
}
.inline-list.bullet > *:first-child:before {
display: none;
}
.inline-list.bullet > *:before {
display: inline-block;
content: '•';
margin-left: 10px;
margin-right: 10px;
}
ul.no-bullet {
list-style-type: none;
padding: 0px;
margin: 0px;
}
@font-face {
font-family: 'avatars';
src: url("http://avatars.adorable.io/assets/fonts/avatars.eot");
src: url("http://avatars.adorable.io/assets/fonts/avatars.eot?#iefix") format("embedded-opentype"), url("http://avatars.adorable.io/assets/fonts/avatars.ttf") format("truetype"), url("http://avatars.adorable.io/assets/fonts/avatars.woff") format("woff"), url("http://avatars.adorable.io/assets/fonts/avatars.svg#avatars") format("svg");
font-weight: normal;
font-style: normal;
}
[class*="icon-"]:before,
.navigation .menu:before {
display: inline-block;
font-family: 'avatars';
speak: none;
font-variant: normal;
font-style: normal;
font-weight: normal;
text-transform: none;
line-height: 1;
margin-right: 0.25em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[class*="icon-"]:before:active {
text-decoration: none;
}
.icon-demo:before {
content: "\e600";
}
.icon-menu:before {
content: "\e601";
}
.icon-top:before {
content: "\e602";
}
.icon-what:before {
content: "\e603";
}
.icon-support:before {
content: "\e604";
}
html,
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
body {
background: #f3f3f3;
}
body.scrolled .navigation {
background: rgba(30,34,59,0.95);
}
body.open .navigation {
height: 100%;
background: rgba(30,34,59,0.95);
}
.button {
background-color: #e14283;
color: #fff;
cursor: pointer;
display: inline-block;
padding: 15px 25px 16px;
margin-bottom: 1em;
margin-right: 15px;
}
.button:last-child {
margin-right: 0;
}
.button.lame {
background-color: transparent;
color: #6ed8d6;
box-shadow: 0 0 0 1px #6ed8d6;
}
.button.lame:hover {
color: #1e2c46;
}
.button:hover,
.button.zeroclipboard-is-hover {
background-color: #6ed8d6;
color: #1e2c46;
text-decoration: none;
}
label {
color: rgba(255,255,255,0.45);
display: block;
font-size: 11px;
text-transform: uppercase;
}
label span {
color: #fff;
font-size: 18px;
text-transform: none;
z-index: 300;
position: relative;
}
section {
padding: 0;
margin: 0;
box-sizing: border-box;
}
section .row:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
line-height: 0;
height: 0;
}
section h2.title {
margin: 0;
padding: 0;
font-weight: 100;
}
.container {
display: inline-block;
width: auto;
}
@-webkit-keyframes flash {
0% {
background-color: #fff;
color: #fff;
}
50% {
background-color: #e14283;
color: #fff;
}
100% {
background-color: rgba(225,66,131,0);
color: #fff;
}
}
@-webkit-keyframes white-flash {
0% {
background-color: #fff;
color: #fff;
}
50% {
background-color: #e14283;
color: #fff;
}
100% {
background-color: #fff;
color: #e14283;
}
}
[class*='-value'] {
position: relative;
padding: 0 5px;
margin: 0 -5px;
}
[class*='-value'] .flash {
-webkit-animation: flash 600ms 1 ease-in;
-moz-animation: flash 600ms 1 ease-in;
-o-animation: flash 600ms 1 ease-in;
animation: flash 600ms 1 ease-in;
position: relative;
z-index: 100;
}
#top,
#what,
#faq,
#demo {
display: block;
position: relative;
top: -70px;
visibility: hidden;
}
.navigation {
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
position: fixed;
background: transparent;
display: block;
text-align: center;
height: 70px;
overflow: hidden;
padding: 12px 0 0;
left: 0;
right: 0;
top: 0;
z-index: 1000;
}
.navigation .menu {
color: #e14283;
display: block;
font-size: 1.6em;
text-align: right;
margin-right: 20px;
}
.navigation .menu:before {
content: "\e601";
color: inherit;
margin: 0;
padding: 0;
}
.navigation .menu span {
display: none;
}
.navigation ul {
list-style-type: none;
padding: 0;
}
.navigation ul li {
display: block;
margin: -6px 0 6px;
}
.navigation ul li:last-child {
margin-right: 0;
}
.navigation ul li [class^='icon-']:before {
font-size: 36px;
line-height: 1;
height: 100%;
position: relative;
top: 2px;
vertical-align: bottom;
}
.navigation ul li a {
font-family: "omnes-pro", sans-serif;
font-size: 18px;
font-weight: 300;
display: block;
padding: 10px 15px 8px;
color: #e14283;
box-shadow: 0 0 0 1px transparent;
vertical-align: bottom;
}
.navigation ul li a:hover {
background: #6ed8d6;
color: #1e2c46;
box-shadow: 0 0 0 1px #6ed8d6;
}
@media screen and (min-width: 40.063em) {
.navigation {
padding: 0 0.8em;
height: 74px;
}
.navigation .menu {
display: none;
}
.navigation .navigation {
height: auto;
}
.navigation ul {
height: auto;
opacity: 1;
}
.navigation ul li {
display: inline-block;
}
.navigation ul li a {
margin-top: 0;
padding-top: 5px;
}
}
header {
background-color: #1e223b;
background-image: url("http://avatars.adorable.io/assets/img/header-bg.jpg");
background-position: 50%;
background-size: cover;
padding: 8em 0 60px 0;
text-align: center;
}
header h1 {
font-size: 54px;
line-height: 1.2;
}
header h1,
header p {
color: #fff;
}
header p {
margin-bottom: 30px;
}
header .github-link {
display: block;
}
header .github-link a {
color: rgba(148,143,174,0.42);
}
header .github-link a:hover {
color: #6ed8d6;
}
@media screen and (min-width: 40.063em) {
header h1 {
font-size: 94px;
}
}
#what + section {
background: #fff;
padding-bottom: 60px;
text-align: center;
}
#what + section h1 {
line-height: 1.2;
}
#what + section p {
margin-bottom: 20px;
}
#what + section .sub-section {
background: linear-gradient(#298e8d, #467d88);
margin-bottom: 60px;
padding-top: 60px;
}
#what + section .sub-section h1 {
color: #fff;
}
#what + section .sub-section p {
color: #fff;
}
#what + section code {
background-color: rgba(218,218,222,0.5);
padding-left: 5px;
padding-right: 5px;
}
#demo + section {
background-image: url("http://avatars.adorable.io/assets/img/demo-bg.jpg");
background-position: 50%;
background-size: cover;
padding-bottom: 40px;
padding-top: 120px;
position: relative;
}
@media screen and (min-width: 40.063em) {
#demo + section {
height: 560px;
}
}
#demo + section h1 {
background-image: url("http://avatars.adorable.io/assets/img/the-magic.png");
width: 215px;
height: 132px;
color: #fff;
font-size: 0;
margin-bottom: 20px;
position: absolute;
top: -50px;
left: -8px;
z-index: 100;
pointer-events: none;
}
@media screen and (min-width: 40.063em) {
#demo + section h1 {
left: -36px;
}
}
#demo + section img {
box-shadow: 0 2px 0 0 rgba(30,34,59,0.2);
}
#demo + section .code-row {
text-align: center;
position: absolute;
bottom: -32px;
left: 0;
right: 0;
}
#demo + section .code-row .code-wrapper {
width: auto;
display: inline-block;
}
#demo + section #copy-button {
display: none;
height: 52px;
font-size: 18px;
line-height: 1;
margin: 0;
padding: 17px 15px 15px;
vertical-align: top;
}
#demo + section code {
background-color: #fff;
display: inline-block;
line-height: 1;
font-size: 10px;
padding: 2px 5px;
}
#demo + section code.flash {
-webkit-animation: white-flash 600ms 1 ease-in;
-moz-animation: white-flash 600ms 1 ease-in;
-o-animation: white-flash 600ms 1 ease-in;
animation: white-flash 600ms 1 ease-in;
position: relative;
z-index: 100;
}
#demo + section code.block {
height: 52px;
padding: 20px 15px 15px;
position: relative;
overflow: none;
vertical-align: top;
white-space: nowrap;
}
#demo + section code .fade {
color: #7a739a;
font-weight: 400;
}
@media screen and (min-width: 40.063em) {
#demo + section #copy-button {
display: inline-block;
}
#demo + section code {
font-size: 14px;
}
#demo + section .form-card {
margin-bottom: 0;
}
}
.form-card {
background: rgba(30,44,70,0.8);
margin-bottom: 20px;
padding: 0;
}
.form-card [class*='-value'] {
position: relative;
padding: 5px 23px 5px 5px;
margin: 0 -23px 0 0;
}
.form-card .input-container {
box-shadow: 0 1px 0 rgba(110,216,214,0.2);
display: block;
position: relative;
padding-bottom: 15px;
padding-left: 20px;
padding-right: 15px;
padding-top: 15px;
text-align: left;
}
.form-card .input-container:before {
bottom: 0;
content: '';
left: 0;
position: absolute;
top: 0;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
width: 0;
}
.form-card .input-container.active:before,
.form-card .input-container.active:hover:before {
background: #e14283;
width: 6px;
}
.form-card .input-container:hover:before {
width: 6px;
background: #6ed8d6;
}
.form-card .input-container:first-child {
padding-top: 20px;
}
.form-card .input-container:last-child {
box-shadow: none;
margin-bottom: 0;
padding-bottom: 20px;
}
.form-card .input-container .checkbox {
background: transparent;
display: block;
position: absolute;
right: 0;
bottom: 0;
top: 0;
margin: 0;
padding: 0 15px;
margin-right: 0;
}
.form-card .input-container .checkbox input + label {
color: rgba(255,255,255,0.2);
}
.form-card .input-container .checkbox input:checked + label {
color: #e14283;
}
.form-card .input-container .checkbox:hover input + label {
color: #6ed8d6;
}
.form-card .input-container .checkbox label {
line-height: 57px;
}
input,
label {
outline: none;
vertical-align: middle;
}
input[type=text] {
background: none;
border: none;
color: #fff;
font-size: 16px;
margin: 0;
padding: 0;
height: 36px;
width: 100%;
}
input[type=range] {
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
transition: all 0.6s ease;
-webkit-appearance: none !important;
border-radius: 1000px;
box-shadow: none;
border: none;
background-color: rgba(218,218,222,0.35);
margin: 0;
padding: 0 5px;
height: 6px;
width: 100%;
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none !important;
border-radius: 1000px;
box-shadow: none;
background-color: #fff;
cursor: pointer;
width: 20px;
height: 20px;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox] + label {
cursor: pointer;
color: #dadade;
font-size: 14px;
height: 100%;
text-transform: uppercase;
text-decoration: line-through;
padding: 11px 5px;
height: 100%;
}
input[type=checkbox]:checked + label {
color: #e14283;
text-decoration: none;
}
footer {
padding: 60px 0 0 0;
text-align: center;
}
footer p {
font-size: 23px;
}
footer svg {
max-height: 26px;
width: 88px;
margin: 0 0 12px 0;
vertical-align: bottom;
}
footer svg #letters {
fill: #e14283;
}
footer svg #shadow {
fill: rgba(225,66,131,0);
}
footer svg #sheen {
fill: #fff;
}
.adorable-creation {
margin-bottom: 10px;
}
#faq + .sub-footer {
box-shadow: 0 1px rgba(148,143,174,0.14);
padding-bottom: 60px;
padding-top: 60px;
text-align: center;
}
#faq + .sub-footer h1 {
color: #1e2c46;
font-weight: 100;
line-height: 1.2;
margin-bottom: 0.5em;
}
#faq + .sub-footer dl {
text-align: left;
}
#faq + .sub-footer dl dt {
color: #e14283;
font-family: "omnes-pro", sans-serif;
font-size: 1.4em;
font-weight: 300;
}
#faq + .sub-footer dl dd {
margin-left: 0;
}
.sub-footer {
background-color: rgba(148,143,174,0.14);
padding: 40px 0 20px 0;
margin: 0;
}
.sub-footer h3 {
color: #e14283;
font-size: 1em;
font-weight: 300;
}
.sub-footer p {
color: rgba(30,34,59,0.5);
font-size: 1em;
}
#support + .sub-footer p {
font-size: 0.8em;
}