/*
 * Copyright (c) 2018 Eclipse Foundation, Inc.
 * 
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 * 
 * Contributors:
 *   Eric Poirier <eric@eclipse.org>
 * 
 * SPDX-License-Identifier: EPL-2.0
*/

// eclipse.org/oxygen styles

//== Variables

@oxygen-link-color:#69c1bd;
@oxygen-header-logo-url:'../../images/eclipse_org/oxygen/header-logo-trees.png';
@oxygen-header-logo-mobile-url:'../../images/eclipse_org/oxygen/header-logo-trees-mobile.png';

// For mobile
@max-width-mobile:767px;

// Tablet
@min-width-tablet:768px;
@max-width-tablet:1199px;

// Desktop
@min-width-desktop:1200px;

//== Mixins

.container-after(@image, @width, @height, @bottom, @bg-size) {
  position:absolute;
  bottom:@bottom;
  content:"";
  background-image:url(@image);
  background-repeat:no-repeat;
  background-position:bottom center;
  background-size:100% @height;
  @media (max-width: @max-width-tablet) {
    background-size:@bg-size;
  }
  @media (min-width: @max-width-tablet) and (max-width:1024px) {
    background-size:120%;
  }
  height: @height;
  width: @width;
}

.container-before(@image, @width, @height, @top) {
  position:absolute;
  top:@top;
  content:"";
  background-image:url(@image);
  background-repeat:no-repeat;
  background-position:bottom center;
  background-size:100% @height;
  @media (max-width: @max-width-tablet) {
    background-size:cover;
  }
  height: @height;
  width: @width;
}


//== Styles
.novaContent{
  background:#fff;
}
body {
  font-size:16px;
}  

.oxygen-subtitle {
  color:#fff;
  text-align:center;
  font-size:2.5em;
  margin-bottom:30px;
  @media (max-width: @max-width-tablet) {
    font-size:2em;
  }
}

.oxygen-header {
  background-color:#6d6d6d;
  background-image:url('../../images/eclipse_org/oxygen/header-mountains.png');
  background-position:bottom right;
  background-repeat:no-repeat;
  background-size:contain;
  height:340px;
  padding:30px 0 60px;
  @media (min-width: @min-width-tablet) {
    padding:60px 0;
  }
  position:relative;
  @media (max-width: @max-width-mobile) {
    height:200px;
  }
  &:after {
    .container-after(@oxygen-header-logo-url, 100%, 150px, 0, auto);
    background-size:auto;
    @media (max-width: @max-width-tablet) {
      .container-after(@oxygen-header-logo-mobile-url, 100%, 150px, 0, contain);
    }
    @media (min-width: @min-width-tablet) and (max-width: @max-width-tablet) {
      .container-after(@oxygen-header-logo-url, 100%, 150px, 0, auto);
      background-position: -375px 30px;
    }
  }
  .release-date {
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    @media (min-width: @min-width-tablet) {
      font-size: 40px;
      padding-top: 0px;
    }
    @media (max-width: @max-width-mobile) {
      padding-left:20px;
    }
  }
  .released {
    font-size: 18px;
    color: #b6b6b6;
  }
}

.oxygen-stats {
  padding:50px 0 80px;
  position:relative;
  background:#fff;
  @media (max-width: @max-width-tablet) {
    padding:50px 0 65px;
  }
  @media (max-width: @max-width-mobile) {
    padding:30px 0 40px;
  }
  &:after {
    .container-after('../../images/eclipse_org/oxygen/stats-bottom-waves.png', 100%, 37px, 0, cover);
  }
  .stats-item {
    margin-bottom:15px;
  }
  .stats-item-image {
    max-width:50px;
  }
  .stats-item-number {
    font-size:2.5em;
    padding-top:25px;
    margin-bottom:0;
    line-height:1em;
    font-weight: 100;
    @media (max-width: @max-width-tablet) {
      font-size:2em;
      padding-top:10px;
    }
    @media (max-width: @max-width-mobile) {
      font-size:2em;
      padding-top:0px;
    }
  }
  .stats-item-title {
    margin-bottom:0;
    font-size:0.9em;
    font-weight:700;
    @media (max-width: @max-width-mobile) {
      margin-bottom:10px;
    }
  }
}

.oxygen-key-features {
  background-color:#edf6fe;
  background-image:url('../../images/eclipse_org/oxygen/key-features-bubbles.png');
  background-repeat:no-repeat;
  background-position:top center;
  padding:50px 0 150px;
  position:relative;
  @media (max-width: @max-width-tablet) {
    padding:30px 0 150px;
  }
  @media (max-width: @max-width-mobile) {
    padding:0 0 150px;
    background-repeat:repeat-y;
  }
  &:after {
    .container-after('../../images/eclipse_org/oxygen/key-features-bottom-waves.png', 100%, 138px, 0, cover);
  }
  .oxygen-subtitle {
    color:#6d6d6d;
  }
  .key-features-item {
    margin-bottom:15px;
    padding:0 45px;
  }
  .key-features-item-title {
    font-size: 1em;
    color:#333;
    font-weight:700;
    margin-bottom: 0;
  }
}

.oxygen-slideshow {
  padding:80px 0;
  background-color:#454884;
  background-image:url('../../images/eclipse_org/oxygen/slideshow-bubbles.png');
  background-repeat:no-repeat;
  background-position:top center;
  position:relative;
  @media (max-width: @max-width-tablet) {
    padding:0 0 20px;
  }
  &:after {
    @media (min-width: @min-width-tablet) {
      .container-after('../../images/eclipse_org/oxygen/slideshow-fishes.png', 100%, 127px, 0, cover);
    }
  }
  .slideshow-item {
    text-align:center;
  }
  .slideshow-item-text {
    color:#fff;
    @media (max-width: @max-width-tablet) {
      margin-bottom:40px;
    }
  }
}

.oxygen-webinars {
  position:relative;
  background-color:#171738;
  padding:50px 0 160px;  
  background-image:url('../../images/eclipse_org/oxygen/webinars-bubbles.png');
  background-repeat:no-repeat;
  background-position:top center;
  color:#fff;
  @media (max-width: @max-width-tablet) {
    padding:30px 0 160px;
  }
  @media (max-width: @max-width-mobile) {
    padding:20px 0 100px;
    background-repeat:repeat-y;
  }
  &:before {
    .container-before('../../images/eclipse_org/oxygen/slideshow-bottom-waves.png', 100%, 83px, -83px);
  }
  &:after {
    .container-after('../../images/eclipse_org/oxygen/webinars-bottom-waves.png', 100%, 150px, 0, cover);
  }
  .oxygen-subtitle {
    margin-bottom:30px;
  }
  .webinars-icon-wrapper{
    border-radius: 115px;
    overflow: hidden;
    border:8px solid @oxygen-link-color;
    @media (max-width: @max-width-tablet) {
      width: 175px;
      height: 175px;
    }
    margin: 0 auto 20px;
  }
  .webinars-icon-text {
    color:darken(#fff, 20%);
    font-size:14px;
  }
  .webinars-icon {
    @media (max-width: 1023px) {
      margin-bottom:30px;
    }
  }
  .webinars-item{
    @media (max-width: @max-width-mobile) {
      text-align:center;
      margin-bottom:20px;
    }
  }
  .webinars-item-text {
    font-size:1em;
    margin-bottom:0;
  }
  .webinars-item-speaker {
    color:@oxygen-link-color;
    font-size:1em;
    margin-bottom:20px;
  }
}

.oxygen-news {
  position: relative;
  z-index:1;
  background-color:#1c1c23;
  color:#fff;
  padding:50px 0 100px;
  @media (max-width: @max-width-tablet) {
    padding:20px 0 50px;
  }
  @media (max-width: @max-width-mobile) {
    text-align:center;
    padding:20px 0 50px;
  }
  .container{
    z-index:999;
    position:relative;
  }
  &:after {
    z-index:1;
    position:absolute;
    bottom:0;
    left:0;
    content:"";
    background-image:url('../../images/eclipse_org/oxygen/news-sm-corals-left.png');
    background-repeat:no-repeat;
    background-position:bottom left;
    background-size:initial;
    height: 547px;
    width: 473px;
    @media (max-width: @max-width-mobile) {
      display:none;
    }
  }
  &:before {
    z-index:1;
    position:absolute;
    bottom:0;
    right:0;
    content:"";
    background-image:url('../../images/eclipse_org/oxygen/news-sm-corals-right.png');
    background-repeat:no-repeat;
    background-position:bottom right;
    background-size:initial;
    height: 377px;
    width: 214px;
  }

  .news-item {
    @media (max-width: @max-width-mobile) {
      margin-bottom:20px;
    }
  }
  .news-item-link {
    color:#fff;
    &:hover {
      color:darken(#fff, 20%);
    }
  }
  .news-item-twitter {
    text-align:center;
  }
  .news-item-twitter-title {
    color:@oxygen-link-color;
    margin-top:0;
  }
}

.oxygen-item-date {
  color:@oxygen-link-color;
  font-size:2em;
  text-align:right;
  line-height:1;
  font-weight:700;
  @media (max-width: @max-width-tablet) {
    font-size:2em;
  }
  @media (max-width: @max-width-mobile) {
    text-align:center;
    font-size:1.8em;
  }
}

.btn-oxygen {
  color: #fff;
  background-color: @oxygen-link-color;
  border-color: @oxygen-link-color;
  box-shadow: 0px 3px 0px darken(@oxygen-link-color,20%);
  margin-bottom:15px;
  &:hover, &:active, &:focus {
    position:relative;
    top:3px;
    color:@oxygen-link-color;
    box-shadow:none;
    background-color:#fff;
  }
}

.btn-oxygen-donate {
  background-color:#58809d;
  color:#fff;
  &:hover {
    background-color:lighten(#58809d, 10%);
    color:#fff;
  }
}

.btn-xl {
  padding: 20px 50px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 15px;
}

.carousel-control{
  &.left, &.right {
    background-image:none;
  }
}

.continue-to-eclipse {
  text-align:center;
  background:#fff;
  padding-top:10px;
  padding-bottom:10px;
  border-bottom:1px solid #d6d6d6;
  
  a {
    font-weight:normal;
    font-size:14px;
    color:#868686;
  }
}