variables.scss

/* Colours */

$primary: #a6edfc; //Light Blue
$secondary: #b0ffe9; //Light Green
$primary-dark: #172a3a; //Dark Blue
$primary-dark-2: #2e5987; // Dark Blue level 2
$background: #d7fdff; //Light Light Blue
$accent: #001aff; //Stronk Blue, Listen there are a lot of blues ok?
$black: #171717; //Black
$white: #ffffff; //White
$neutral: #8c8c8c; //Gray

/* Font */

$h1: 64px;
$h2: 52px;
$h3: 36px;
$h4: 28px;
$body: 20px;

/* Nav bar */
$nav-height: 70px;
$nav-breakpoint: 1000px;

$font-family: 'HK Grotesk', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
  Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;

@mixin accentHeader {
  font-family: $font-family;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 14px;
  letter-spacing: 0.5px;
  margin: 10px 0;
}

@mixin angle-bracket-accent($quadrant: 'top-left', $size: 24px) {
  content: '';
  position: absolute;
  height: $size;
  width: $size;
  border: solid $black calc(#{$size} / 4);
  @if ($quadrant == 'top-left') {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
  }
  @if ($quadrant == 'top-right') {
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none;
  }
  @if ($quadrant == 'bottom-right') {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
  }
  @if ($quadrant == 'bottom-left') {
    bottom: 0;
    left: 0;
    border-right: none;
    border-top: none;
  }
}

/* Margins */
$m1: 8px;
$m2: 16px;
$m3: 24px;
$m4: 32px;
$m5: 40px;

/* Structure*/

$border-radius: 5px;
$border-width: 5px;

/* Screen Size */

$content-max-width: 1200px;
$breakpoints: (
  'phone': 400px,
  'phone-wide': 480px,
  'phablet': 560px,
  'tablet-small': 640px,
  'tablet': 768px,
  'tablet-wide': 1024px,
  'desktop': 1248px,
  'desktop-wide': 1440px,
);

@mixin screen($width, $type: min) {
  @if map_has_key($breakpoints, $width) {
    $width: map_get($breakpoints, $width);
    @if $type == max {
      $width: $width - 1px;
    }
    @media only screen and (#{$type}-width: $width) {
      @content;
    }
  }
}

@mixin container {
  margin-left: 7vw;
  margin-right: 7vw;
  @include screen('desktop-wide') {
    margin-left: auto;
    margin-right: auto;
    max-width: $content-max-width;
  }
}

@mixin absolute-cover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

@mixin dotted-shadow($offset-top: 20px, $offset-left: -20px) {
  position: relative;
  &:before {
    content: '';
    position: absolute;
    z-index: -1;
    top: $offset-top;
    left: $offset-left;
    width: 100%;
    height: 100%;
    background-image: url('/svg/ben-day.svg');
    background-size: 30px 30px;
    background-repeat: repeat;
    opacity: 0.15;
  }
}