zulip/static/styles/portico.css

.container-fluid {
    padding: 0px;
    min-height: 100%;

    /* Hack for IE */
    height: auto !important;
    height: 100%;

    margin: 0 auto -56px;
}

/* This is a hack so that our main content
   remains centered in the middle 1440px or so
   on wide monitors, but that our little color
   bars can extend to the edges of the screen */
.content {
    max-width: 1440px;
    margin: 0px auto;
}

.navbar {
    margin-bottom: 0px;
}

.navbar-inner {
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
}

.navbar.footer .nav  > li {
    line-height: 56px;
}

.navbar.footer .nav  > li > a {
    padding-top: 0;
    padding-bottom: 0;
}

.footer, .push {
    height: 56px;
}

html {
    height: 100%;
}

body {
    font-family: 'Humbug', Helvetica, Arial, sans-serif;
    line-height: 150%;
    height: 100%;
}

li {
    line-height: 150%;
}

.title {
    font-family: Helvetica;
    font-size: 100px;
    font-weight: bold;
    margin-top: 50px;
    margin-bottom: 60px;
}

.lead {
    font-weight: bold;
}

.jobs-lead {
    font-weight: normal;
    margin-top: 20px;
    margin-bottom: 10px;
}

.pitch {
    width: 600px;
}

.signup {
    width: 650px;
    padding: 8px 35px 8px 14px;
    margin-bottom: 20px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    background-color: LightGray;
    border: 1px solid DarkGray;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.for_you {
    font-size: 30px;
    font-style: italic;
}

#company-email {
    display: none;
}

a.title {
    color: black;
}

a.title:hover {
    color: gray;
    text-decoration: none;
}

.login-area {
    /* Often, the form itself overshoots the containing span, which
     is an issue because then it collides with the "Sign in with Google"
     button. This fix, though hackish, makes sure it's big enough at
     all times. */
    min-width: 400px;
}

.fakecontrol {
    padding-top: 5px;
    font-weight: bold;
}

img.screenshot{
    /* This makes it so screenshots are still shown if they are larger than their span.*/
    max-width: 150%;
}

.full-width-screenshot {
    width: 100%;
}

.little-bullet {
    /* In our footer navbar, the · doesn't get appropriate padding without this */
    padding-left: 15px;
}

/* Silly easter egg for /integrations */
.integral {
    font-weight: normal;
    display: none;
}

.show-integral {
    position: relative;
}

.show-integral:hover:after {
    content: "dx";
    font-weight: normal;
    font-style: italic;
    font-size: 70%;
}

.integration {
    margin-top: 2em;
    padding-top: 1em;
    border-top: 1px dashed black;
}

.integration p {
    margin-top: 2em;
}

#pw_strength {
    /* Same width as a Bootstrap default text <input> with padding */
    width: 220px;
}

.def:before {
    content:" - "
}

.api-details {
    margin-left: 2em;
}

.api-details ul {
    list-style-type:none
}

.api-details dd {
    margin-bottom: 1em;
}

.python {
    display: none;
}

.commandline {
    display: none;
}

@media print {
    #portico-area {
        margin-left: 1.5em;
    }
}

.feature-list div {
    padding-bottom: 2.5em;
    height: 6em;
}

.main-headline {
    text-align: center;
}

.landing-page {
    padding: 2em 0em;
}

.landing-page-bottom {
    padding-bottom: 2em;
}

.landing-page h1 {
    font-weight: 600;
}

.landing-page h2,h3,h4,h5 {
    font-weight: lighter;
}

.landing-page p {
    font-size: 120%;
}

.laptop-image {
    width: 787px;
    height: 414px;
    background-image: url('/static/images/landing-page/laptop.png');
    background-size: contain;
}

.laptop-screen {
    position: relative;
    top: 32px;
    width: 507px;
}

.platform-icon {
    width: 33%
}

.spotlighted-feature {
    border: 1px solid #ccc;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.main-signup-button {
    margin: 1em;
}

.shaded-background {
    background-color: #ededed;
}

.darker-background {
    background-color: #474747;
    color: white;
}

.postal-envelope {
    background-color: white;
    border: 1px solid black;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.stamp {
    background-image: url('/static/images/landing-page/signup/canceled-stamp.png');
    width: 210px;
    height: 90px;
    opacity: 0.6;
    margin-right: 1em;
}

.stamp .date {
    position: relative;
    float: left;
    top: 45px;
    left: 20px;
    font-size: 10px;
    line-height: 10px;
    color: #715128;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
}

.stamp img {
    height: 6em;
    padding-right: 1em;

}

.postal-stripes {
    padding: 0px;
    margin: 0px;
    height: 10px;
    background-image: -webkit-repeating-linear-gradient(-60deg, #fff, #fff 10px, #62a0cf 10px, #62a0cf 20px, #fff 20px, #fff 30px, #d66468 30px, #d66468 40px );
    background-image: repeating-linear-gradient(-60deg, #fff, #fff 10px, #62a0cf 10px, #62a0cf 20px, #fff 20px, #fff 30px, #d66468 30px, #d66468 40px );
}

.par-avion {
    font-size: 80%;
    float: right;
    margin-right: 1em;
}

.letter-form {
    font-size: 110%;
    padding-top: 2em;
    padding-left: 4em;
    padding-right: 4em;
}

.letter-form input {
    border: 0px;
    border-bottom: 1px dashed grey;
    box-shadow: none;
    padding-bottom: 0px;
    transition: border linear 0.2s;

}

@media (max-width: 767px) {
    /* This is a hack and I'm not 100% sure why it's necessary,
       but otherwise when we resize the form to be pretty narrow,
       this gets crushed */
    #envelope-holder {
        margin-left: 0px;
    }
}

.alert-hidden {
    display: none;
}

label.text-error {
    display: inline;

    padding-left: 5px;
}

input.text-error {
    border-color: red;
    outline-color: red;
}