/*********************************************
* Copyright 2016 elementary LLC.             *
* This file is part of houston.elementary.io *
*********************************************/

/*************
* Navigation *
*************/

nav {
    background-color: transparent;
    color: #fff;
    fill: #fff;
    position: absolute;
    width: 100%;
    z-index: 3;
}

nav > ul > li > a:focus {
    color: #1f1f1f;
    fill: #1f1f1f;
}

footer ul li a:focus i.fa {
    color: #1f1f1f;
    text-shadow: 0 1px 6px #fff;
}

/********
* Cards *
********/

.card {
    background-color: #fff;
    border-radius: 3px;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, .12),
        0 1px 2px rgba(0, 0, 0, .24);
    margin: 16px;
    padding: 24px;
}

a.card {
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .15),
        0 8px 10px 1px rgba(0, 0, 0, .07),
        0 3px 14px 2px rgba(0, 0, 0, .06),
        0 5px 5px -3px rgba(0, 0, 0, .2);
    color: inherit;
    text-decoration: inherit;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

a.card:hover,
a.card:focus {
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .15),
        0 12px 20px 1px rgba(0, 0, 0, .07),
        0 5px 28px 2px rgba(0, 0, 0, .06),
        0 8px 10px -3px rgba(0, 0, 0, .2);
    transform: translateY(-2px);
}

a.card:focus {
    box-shadow:
        0 0 0 1px #64baff,
        0 12px 20px 1px rgba(0, 0, 0, .07),
        0 5px 28px 2px rgba(0, 0, 0, .06),
        0 8px 10px -3px rgba(0, 0, 0, .2);
    color: inherit;
    text-decoration: inherit;
}

a.card:active {
    box-shadow:
        0 1px 3px rgba(0, 0, 0, .12),
        0 1px 2px rgba(0, 0, 0, .24);
    color: inherit;
    text-decoration: inherit;
    transform: translateY(2px);
}

/*********
* Button *
*********/

button > i.fa,
.button > i.fa {
    margin-left: 16px;
}

.dark .button.suggested-action {
    background-image: linear-gradient(to bottom, #4d4d4d, #333);
    border-color: rgba(0, 0, 0, .8);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .02),
        inset 0 1px 0 0 rgba(255, 255, 255, .2),
        inset 0 -1px 0 0 rgba(255, 255, 255, .05),
        0 3px 6px rgba(0, 0, 0, .16),
        0 3px 6px rgba(0, 0, 0, .23);
    overflow: hidden;
    padding-left: 80px;
    position: relative;
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .button.suggested-action:hover {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .02),
        inset 0 1px 0 0 rgba(255, 255, 255, .2),
        inset 0 -1px 0 0 rgba(255, 255, 255, .05),
        0 10px 20px rgba(0, 0, 0, .19),
        0 6px 6px rgba(0, 0, 0, .23);
    transform: translateY(-1px);
}

.dark .button.suggested-action::before {
    position: absolute;
    font-family: 'Font Awesome\ 5 Brands';
    top: calc(50% - 40px);
    left: -12px;
    content: "\f09b";
    font-size: 80px;
}

.dark .button.suggested-action:active {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .02),
        inset 0 1px 0 0 rgba(255, 255, 255, .2),
        inset 0 -1px 0 0 rgba(255, 255, 255, .05),
        0 1px 3px rgba(0, 0, 0, .12),
        0 1px 2px rgba(0, 0, 0, .24);
    transform: translateY(1px);
}

.button.valadoc {
    background-image: linear-gradient(to bottom, #ad65d6, #7a36b1);
    border-color: #260063;
    margin: 0;
}

.button.valadoc img {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="1" /><feOffset dx="1" dy="2" result="offsetblur" /><feFlood flood-color="rgba(76,21,138,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
    filter: drop-shadow(0 1px 1px #4c158a);
}

.button.valadoc:focus:not(:active) {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .05),
        inset 0 1px 0 0 rgba(255, 255, 255, .45),
        inset 0 -1px 0 0 rgba(255, 255, 255, .15),
        0 3px 6px rgba(203, 85, 250, .16),
        0 3px 6px rgba(203, 85, 250, .23);
}

/*************
* Code Block *
**************/

code,
pre {
    background: #fdf6e3;
    border-radius: 3px;
    color: #657b83;
    font-family: "Roboto Mono", monospace;
    font-size: 90%;
    text-align: justify;
}

pre {
    overflow: auto;
    padding: 8px;
}

pre > code {
    border: none;
    padding: 0;
    white-space: pre;
}

pre.highlighted {
    border: none;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, .12),
        0 1px 2px rgba(0, 0, 0, .24);
    padding: 0;
}

pre.highlighted code {
    border-radius: 0 3px 3px 0;
    line-height: 1.5em;
}

pre.highlighted .pre-numbering {
    background-color: #eee8d5;
    border-radius: 3px 0 0 3px;
    color: #9faaa9;
    float: left;
    font-size: 90%;
    line-height: 1.5em;
    list-style: none;
    margin: 0;
    min-width: 2.5em;
    padding: 0.5em;
    text-align: right;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

/*******
* Hero *
*******/

section.hero {
    background-color: #7a36b1;
    background-image: linear-gradient(to right bottom, #4c158a, #ad65d6);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    padding: 128px 0;
    max-width: 100%;
    position: relative;
}

section.hero > div {
    position: relative;
}

section.hero img {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="24" /><feOffset dx="1" dy="13" result="offsetblur" /><feFlood flood-color="rgba(255,255,255,0.25)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
    filter: drop-shadow(0 12px 24px rgba(255, 255, 255, .25));
}

section.hero h1 {
    font-weight: 800;
}

section.hero h4 {
    font-weight: 400;
}

section.hero .button.suggested-action {
    max-width: 100%;
}

sup {
    font-family: 'Open Sans';
    font-size: 16px;
    font-weight: 600;
    margin-left: 12px;
}

/*******
* Docs *
*******/

section.docs {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: space-evenly;
        justify-content: space-evenly;
    margin: -96px auto 128px;
    position: relative;
}

section.docs h2 {
    color: #7a36b1;
    margin: 16px 0;
}

section.docs p {
    color: #333;
    text-align: center;
}

section.docs .card {
    text-align: center;
}

@media only screen and (min-width: 640px) {
    section.docs {
        max-width: 1200px;
    }

    section.docs .card {
        max-width: 300px;
    }
}

/************
* AppCenter *
************/

section.pitch-appcenter {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: space-evenly;
        justify-content: space-evenly;
    margin: 0 auto;
}

section.pitch-appcenter div {
    margin: 16px;
}

section.pitch-appcenter li {
    line-height: 1.65;
    margin: 16px 0;
    text-align: left;
}

.pitch-appcenter .fa-li {
    font-size: 1.25em;
}

@media only screen and (min-width: 640px) {
    section.pitch-appcenter {
        max-width: 1200px;
    }

    section.pitch-appcenter div {
        -ms-flex: 0 0 calc(50% - 32px);
            flex: 0 0 calc(50% - 32px);
    }

    section.pitch-appcenter.pitch-appcenter div:first-child {
        -ms-flex-order: 2;
            order: 2;
    }
}

/*******
* Tools *
*******/

section.tools {
    padding: 64px 0;
}

section.tools h2 {
    margin: 0 16px 64px;
    text-align: center;
}

section.tools > div {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: space-evenly;
        justify-content: space-evenly;
}

section.tools .card {
    margin-bottom: 32px;
}

section.tools .card > img {
    height: 36px;
    margin: 0 auto 24px;
    display: block;
}

section.tools .banner {
    background-color: #7a36b1;
    background-image: linear-gradient(to right bottom, #4c158a, #ad65d6);
    color: #fff;
    margin: 0 -24px;
    padding: 6px 24px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

section.tools .banner h1 {
    font-size: 4em;
}

section.tools .banner h1,
section.tools .banner p {
    text-align: center;
}

section.tools .banner p.small {
    font-size: 0.8em;
}

section.tools .banner p.split {
    font-size: 3em;
    font-weight: 300;
    line-height: 1.2em;
    margin: 0;
}

section.tools .banner p.split span {
    font-size: 0.5em;
    opacity: 0.8;
    vertical-align: middle;
}

section.tools .banner svg {
    height: 46px;
    vertical-align: bottom;
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="1" /><feOffset dx="1" dy="2" result="offsetblur" /><feFlood flood-color="rgba(0,0,0,0.3)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3));
}

section.tools .banner .fa {
    color: #fff;
}

section.tools .workflow {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: baseline;
        align-items: baseline;
    -ms-flex-pack: distribute;
        justify-content: space-around;
}

section.tools .workflow div {
    -ms-flex: 0 0 30%;
        flex: 0 0 30%;
    text-align: center;
}

section.tools .workflow,
section.tools .workflow p {
    margin-top: 22px;
}

section.tools ul {
    margin-top: 24px;
}

section.tools p {
    text-align: center;
}

@media only screen and (min-width: 640px) {
    section.tools > div {
        margin: 0 auto;
        max-width: 1200px;
    }

    section.tools > div > div {
        -ms-flex: 0 0 calc(50% - 32px);
            flex: 0 0 calc(50% - 32px);
        max-width: 468px;
    }
}

/********
* Other *
********/

a.button[disabled] {
    background: transparent;
    opacity: 0.6;
}

.fa-li,
.card .fa,
.third .fa {
    color: #7a36b1;
}

footer,
.grey {
    background-color: #fafafa;
}

.fa-ul li {
    margin-bottom: 32px;
}

.fa-li {
    width: 16px;
}