autonomic.zone/src/assets/styles/main.scss

---
---
@import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';

/*
  Spectral by HTML5 UP
  html5up.net | @ajlkn
  Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

@import 'libs/skel';

@include skel-breakpoints((
  xlarge: '(max-width: 1680px)',
  large: '(max-width: 1280px)',
  medium: '(max-width: 980px)',
  small: '(max-width: 736px)',
  xsmall: '(max-width: 480px)'
));

@include skel-layout((
  reset: 'full',
  boxModel: 'border',
  grid: ( gutters: 1.5em )
));

@import 'components/basic';
@import 'components/section';
@import 'components/form';
@import 'components/box';
@import 'components/image';
@import 'components/list';
@import 'components/table';
@import 'components/button';
@import 'components/features';
@import 'components/spotlight';
@import 'components/wrapper';
@import 'components/menu';
@import 'components/header';
@import 'components/banner';
@import 'components/contact';
@import 'components/highlighting';

/* Main */

#main {

  > header:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;

    display: block;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;

    filter: blur(3px) brightness(40%);
  }

  > header {
    @include padding(12em, 0);
    position: relative;
    text-align: center;
    z-index: -2;

    > * {
      position: relative;
      z-index: 1;
    }

    h2 {
      font-size: 1.75em;
      margin: 0 0 (_size(element-margin) * 0.25) 0;
    }

    p {
      color: inherit;
      letter-spacing: _size(letter-spacing-alt);
      text-transform: uppercase;
      top: 0;

      a {
        color: inherit;
      }
    }

    @include breakpoint(xlarge) {
      @include padding(10em, 0);
    }

    @include breakpoint(large) {
      @include padding(8em, 3em);
    }

    @include breakpoint(medium) {
      @include padding(10em, 3em);
    }

    @include breakpoint(small) {
      @include padding(5em, 3em);

      h2 {
        font-size: 1.25em;
        margin: 0 0 (_size(element-margin) * 0.5) 0;
      }
    }
  }
}

body.is-mobile {
  #main {
    > header {
      background-attachment: scroll;
    }
  }
}

/* Footer */

#footer {
  padding: 4em 0 3.5em;
  background-color: darken(_palette(bg), 8);
  text-align: center;
  color: rgba(255, 255, 255, 0.7);

  .icons {
    font-size: 1.25em;

    a {

      &:hover {
        color: _palette(fg);
      }
    }
  }

  .copyright, .cotech-text {
    font-size: 0.8em;
    letter-spacing: _size(letter-spacing-alt);
    
    text-transform: uppercase;
  }

  .copyright {
    list-style: none;
    padding: 0.25em 0;
    

    li {
      border-left: solid 1px _palette(fg-light);
      display: inline-block;
      line-height: 1em;
      margin-left: 1em;
      padding-left: 1em;

      &:first-child {
        border-left: 0;
        margin-left: 0;
        padding-left: 0;
      }

      a {
        color: inherit;

        &:hover {
          color: _palette(fg);
        }
      }

      @include breakpoint(xsmall) {
        border: 0;
        display: block;
        line-height: 1.65em;
        margin: 0;
        padding: 0.5em 0;
      }
    }
  }
  .row {
    display: flex;
    margin: 0 10%;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
  
  .column {
    flex: 50%;
  }

  .cotech-box {
    padding-bottom: 1em;
  }
  
  .cotech-text {
    vertical-align: middle;
  }
  
  .cotech-logo {
    height: 1em;
    vertical-align: text-bottom;
  }

  @include breakpoint(medium) {
    @include padding(4em, 0em);
  }

  @include breakpoint(small) {
    @include padding(3em, 0em);
  }
}




/* Landing */

body.landing {
  #page-wrapper {
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 0;
  }

  #page-wrapper {
    padding-top: 0;
  }

  #footer {
    background-color: darken(transparentize(_palette(bg), 0.1), 8);
  }
}

body.is-mobile {
  &.landing {
    #page-wrapper {
      background: none;
    }

    #banner,
    .wrapper.style4 {
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    #footer {
      background-color: darken(_palette(bg), 8);
    }
  }
}