/* Copyright 2015 The Vanadium Authors. All rights reserved. */
/* Use of this source code is governed by a BSD-style */
/* license that can be found in the LICENSE file. */

@import "constants";

.not-scrolled header {
  background-color: transparent;
  box-shadow: none;
}

.home-layout {
  background-image: url(/images/background.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: @color-blue-grey-50;

  @media @small-screen {
    background-size: cover;
  }

  header {
    transition: background 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    opacity: 0.99;
  }

  main {
    width: 100%;
    max-width: 100%;
    margin-left: 0px;
    padding: 0px;
    display: flex;
    flex-direction: column;
  }

  section {
    max-width: 100%;
    width: 100%;
    padding: (2 * @gutter) @gutter;
  }

  .menu {
    display: none !important;
  }

  .v-icon {
    display: flex !important;
  }

  .section-container {
     max-width: @main-max-width;
     margin: auto;
  }

  h1, h2, h3 {
    margin: @gutter-half 0px;
  }

  h1 {
    color: @color-white;
    font-size: @intro-heading-font-size;
    font-weight: 400;
  }

  h2 {
    color: @color-primary-700;
    font-size: @intro-subheading-font-size;
    font-weight: 100;
  }

  h3 {
    color: @color-blue-grey-500;
    font-size: @intro-text-font-size;
    font-weight: 100;
  }

  .intro {
    text-align: center;
  }

  .mobile {
    background: @color-white;
  }

  .core {
    background: @color-blue-grey-50;
    flex: 1;
  }

  footer {
    align-items: center;
    background-color: @color-blue-grey-100;
    padding: @gutter-half;
    display: flex;
  }

  footer .main {
    flex: 1;
  }

  footer .main a {
    display: inline-block;
    margin-right: @gutter-half;
    color: @color-blue-grey-500;
    text-transform: uppercase;
    line-height: @icon-size-half;
  }

  footer .social a {
    margin-left: @gutter;
  }

  .icon-github {
    background-image: url(/images/github-grey.svg);
    background-repeat: no-repeat;
    width: @icon-size-half;
    height: @icon-size-half;
    display: block;
    background-size: @icon-size-half auto;
  }
}

.intro-detail {
  margin: 28px 0;
  padding-left: 80px;
  background-repeat: no-repeat;
  background-size: 60px;
}

.intro-detail-offline {
  background-image: url(/images/offline.svg);
}

.intro-detail-security {
  background-image: url(/images/security.svg);
}

.intro-detail-codebase {
  background-image: url(/images/codebase.svg);
}

.intro-detail-discovery {
  background-image: url(/images/discovery.svg);
}

.embed-container {
  position: relative;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  padding-bottom: 56.25%; /* YouTube aspect ratio */

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}