@import "../lib/defs.less";
@import "../lib/base.less";


body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  font-size: 13px;
  overflow-x: hidden;
}

@thin-breakpoint: 420px;

body.page {
  header > .container, footer > .container, nav > .container, .container.main {
    max-width: 930px;
    padding: 0 30px;
    margin: 0 auto;

    @media (max-width: @thin-breakpoint) {
      padding: 0 20px;
    }
  }

  .container.main {
    width: 100%;
    box-sizing: border-box;
  }

  header {
    position: relative;
    background: white;
    border-bottom: 10px solid @brand-color;
    padding: 14px 0;
    box-shadow: 0 0 8px fade(black, 25%);
    z-index: 10;

    .logo {
      color: black;
      text-decoration: none;
      font-size: 14px;
      .icon('../res/emoji/euphoria.svg', 24px, 8px);

      &:before {
        vertical-align: middle;
      }
    }

    .whats-euphoria {
      display: inline-block;
      margin: 0 22px;
      line-height: 22px;
      opacity: .6;
      transition: opacity .15s ease;
      padding-top: 0;
      padding-bottom: 0;
      font-weight: normal;
      color: black;
      border: 1px solid #77a377;
      border-radius: 100px;

      &:hover {
        opacity: .8;
      }
    }

    .start-chatting {
      display: inline-block;
      float: right;
      line-height: 24px;
      padding-top: 0;
      padding-bottom: 0;
    }

    @media (max-width: @thin-breakpoint) {
      padding: 9px 0;
      border-bottom-width: 6px;

      .long {
        display: none;
      }

      .whats-euphoria {
        margin: 0 10px;
      }
    }
  }

  nav {
    display: block;
    background: #77a377;
    box-shadow: 0 -4px 8px -4px fade(black, 15%) inset;

    ul, li {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }

    ul {
      display: flex;
      align-items: stretch;
    }

    li {
      display: inline-block;
      flex: 1;

      a:hover {
        background-color: @brand-color;
      }
    }

    .home {
      height: 100%;
      vertical-align: middle;

      a {
        display: block;
        background: data-uri('./res/logo.svg') no-repeat center center;
        background-size: 2em 2em;
      }
    }

    .label, a {
      color: white;
    }

    .label {
      opacity: .75;
      margin-right: 30px;
    }

    a {
      display: block;
      text-align: center;
      text-decoration: none;
      padding: 10px;
      height: 100%;
      width: 100%;
      box-sizing: border-box;
    }

    li:last-child a {
      margin-right: 0;
    }

    li.selected a {
      background: white;
      color: black;
      box-shadow:
        -8px 0 8px -8px fade(black, 25%),
        8px 0 8px -8px fade(black, 25%);
      z-index: 15;
      height: 100%;

      :hover {
        background: white;
      }
    }

    @media (max-width: @mobile-breakpoint) {
      .label {
        display: none;
      }

      a {
        padding: 5px 10px;

        .long {
          display: none;
        }
      }
    }

    @media (max-width: 370px) {
      .container {
        padding: 0 0;
      }

      a {
        padding: 5px 7px;
        margin-right: 10px;
      }

      .home a {
        background-size: 1.5em 1.5em;
      }
    }
  }

  .container.main {
    margin: 55px auto;
    flex: 1;

    @media (max-width: @thin-breakpoint) {
      margin: 30px auto;
    }
  }

  footer {
    background: #f4f4f4;
    text-align: center;
    padding: 12px 0;
    line-height: 2em;
    box-shadow: 0 4px 8px -4px fade(black, 15%) inset;

    a {
      display: inline-block;
      text-decoration: none;
      color: fade(black, 50%);
      padding-left: 26px;
      white-space: nowrap;

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

    .spacer {
      margin: 0 35px;
    }

    @media (max-width: 910px) {
      .spacer {
        display: none;
      }
    }

    @media (max-width: 770px) {
      .long {
        display: none;
      }
    }

    @media (max-width: @thin-breakpoint) {
      text-align: center;

      .container {
        padding: 0 8px;
      }

      .spacer {
        display: block;
      }

      a {
        padding: 0 7px;
      }
    }
  }
}

.policy {
  font-size: 15px;
  max-width: 50em;
  margin: 0 auto;
  line-height: 1.5em;

  h1 {
    font-size: 1.65em;
    font-weight: normal;
    margin-bottom: 1.25em;

    &:first-child {
      margin-top: 0;
    }

    em {
      margin-left: .5em;
      font-size: .6em;
      font-style: normal;
      opacity: .5;
      white-space: nowrap;
    }
  }

  h2 {
    margin-top: 1.5em;
    margin-bottom: 0;
    font-size: 1.3em;
    opacity: .75;

    em {
      margin-left: .5em;
      font-size: .85em;
      font-weight: normal;
      font-style: normal;
    }
  }

  h3 {
    margin-top: 1.5em;
    margin-bottom: 0;
    font-size: 1em;
    font-weight: normal;
    text-decoration: underline;
  }

  h2 + h3 {
    margin-top: 1em;
  }

  h1, h2, h3 {
    position: relative;

    .header-anchor {
      position: absolute;
      width: 20px;
      height: 20px;
      line-height: 20px;
      left: -30px;
      text-align: center;
      text-decoration: none;
      font-size: 1rem;
      font-weight: normal;
      color: black;
      background: fade(@brand-color, 35%);
      border-radius: 3px;
      opacity: 0;
      transition: opacity .25s ease .25s;
    }

    &:hover .header-anchor {
      opacity: 1;
    }
  }

  p {
    margin: .75em 0;
  }

  a {
    color: desaturate(blue, 50%);
  }

  strong {
    opacity: .75;
  }

  hr {
    border: none;
    border-bottom: 1px solid fade(black, 15%);
    margin: 2em 0;
  }

  section.summary {
    position: relative;
    margin: 4em 0;

    &:before {
      display: block;
      content: '';
      position: absolute;
      left: -100%;
      right: -100%;
      top: -2em;
      bottom: -2em;
      background: #ebf2eb;
      z-index: -1;
    }

    h2, p, strong, a {
      color: darken(@brand-color, 45%);
    }

    strong {
      font-size: .9em;
    }

    ul {
      padding-left: 1em;

      p {
        color: black;
      }
    }
  }

  .credits {
    opacity: .5;

    a {
      color: black;
    }
  }

  @media (max-width: @thin-breakpoint) {
    h1 em {
      display: block;
      margin-left: 0;
      margin-top: .5em;
    }
  }
}

.delay-parts(@duration) {
  .a {
    animation-delay: (-1 / 5) * @duration;
  }

  .b {
    animation-delay: (-2 / 5) * @duration;
  }

  .c {
    animation-delay: (-3 / 5) * @duration;
  }

  .d {
    animation-delay: (-4 / 5) * @duration;
  }

  .e {
    animation-delay: (-5 / 5) * @duration;
  }
}

body.welcome {
  // thanks to http://subtlepatterns.com/symphony/
  background: data-uri('./res/symphony.png');

  @keyframes raise {
    0% {
      transform: translateY(10px);
      opacity: 0;
    }
    100% {
      transform: none;
      opacity: 1;
    }
  }

  .container.main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .splash {
    margin: 10px auto;
  }

  .fancy-logo {
    animation-name: grow;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-duration: 1s;
    @keyframes grow {
      0% {
        transform: scale(1.15);
        opacity: 0;
      }
      100% {
        transform: none;
        opacity: 1;
      }
    }

    &:not(:hover) .colors {
      .delay-parts(.25s);

      & > div {
        animation-name: tron;
        animation-iteration-count: 1;
        animation-timing-function: ease-out;
        animation-duration: .65s;
        @keyframes tron {
          0% {
            transform: translateY(100%) scaleY(0);
          }
          50% {
            transform: translateY(100%) scaleY(0);
          }
          100% {
            transform: none;
          }
        }
      }
    }
  }

  h1 {
    font-size: 20px;
    font-weight: normal;
    margin-top: 20px;
    animation: raise .5s ease .5s 1 normal both;
  }

  .info-box {
    @radius: 5px;
    position: relative;
    margin-top: 40px;
    border-radius: @radius;
    box-shadow: 0 2px 10px fade(black, 25%);
    animation: raise .5s ease .75s 1 normal both;

    &:before {
      content: '';
      display: block;
      position: absolute;
      width: 30px;
      height: 30px;
      transform: translateX(-50%) rotate(45deg);
      top: -13px;
      left: 50%;
      background: white;
      border-radius: @radius / 2;
      box-shadow: 1.4px 1.4px 10px fade(black, 25%);
      z-index: -1;
    }

    .description {
      padding: 16px;
      background: #fcfcfc;
      border-radius: @radius;
      width: 40em;

      @media (max-width: @mobile-breakpoint) {
        padding: 8px;
        width: 90%;
      }
    }

    .messages {
      text-align: left;
      font-size: 15px;
      line-height: 1.25em;
      margin: -.25em 0;
    }

    .start-chatting {
      display: inline-block;
      margin-top: 20px;
      margin-bottom: 10px;
    }

    .features {
      display: flex;
      background: #f0f0f0;
      border-top: 1px solid #e5e5e5;
      margin: 0;
      padding: 13px 32px;
      border-bottom-left-radius: @radius;
      border-bottom-right-radius: @radius;

      li {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        margin: 0 2px;
        opacity: .83;
        list-style-type: none;
      }

      .chat {
        .icon('./res/feature-chat.svg', 42px, 13px, .85);
      }

      .instant {
        .icon('./res/feature-instant.svg', 38px, 13px, .85);
      }

      .inner {
        display: inline-block;
        text-align: left;

        h2, p {
          margin: 0;
          padding: 0;
        }

        h2 {
          font-size: 14px;
          font-weight: normal;
          margin-bottom: 3px;
        }

        p {
          font-size: 11px;
          opacity: .5;
        }
      }
    }
  }

  footer {
    background: #fafafa;
  }

  @media (min-width: @thin-breakpoint) {
    h1 br {
      display: none;
    }
  }

  @media (max-width: @thin-breakpoint) {
    .container.main {
      margin: 15px auto;
    }

    .splash {
      margin-bottom: 30px;
    }

    .fancy-logo {
      width: 125px;
      height: 125px;
    }

    .fancy-logo .colors {
      padding: 5px;
    }

    h1 {
      font-size: 20px;
      margin: 10px 30px 25px;
    }

    .info-box {
      margin-top: 15px;
      margin-left: -10px;
      margin-right: -10px;

      &:before {
        top: -7px;
      }

      .start-chatting {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
        margin-top: 12px;
      }

      .features {
        padding: 10px 15px;
      }
    }
  }

  @media (max-width: 320px) {
    .info-box {
      .messages {
        font-size: 14px;
      }

      .start-chatting {
        margin-top: 5px;
      }

      .features {
        display: block;
        margin-bottom: -15px;

        li {
          margin-bottom: 15px;
        }
      }
    }
  }
}

body.about {
  .primary {
    position: relative;
    padding-bottom: 55px;

    h1:first-child {
      margin-top: 0;
    }

    &:before {
      display: block;
      content: '';
      position: absolute;
      left: -100%;
      right: -100%;
      top: -55px;
      bottom: 0;
      background: linear-gradient(to bottom, transparent, fade(#ebf2eb, 50%)), data-uri('./res/symphony.png');
      border-bottom: 1px solid fade(black, 25%);
      z-index: -1;
    }

    @media (max-width: @mobile-breakpoint) {
      padding-bottom: 30px;
    }
  }

  h1 {
    display: inline-block;
    @color: #5d8a5d;
    position: relative;
    font-size: 1.75em;
    color: white;
    background-color: @color;
    margin-bottom: 1em;
    padding: 12px 20px;

    &:before {
      @size: 20px;
      content: '';
      position: absolute;
      display: block;
      left: 0;
      bottom: -@size;
      border: @size solid @color;
      border-right: none;
      border-top-color: transparent;
      border-bottom-color: transparent;
    }

    @media (max-width: @mobile-breakpoint) {
      font-size: 1.25em;
      padding: 6px 10px;

      &:before {
        @size: 10px;
        bottom: -@size;
        border-width: @size;
      }
    }
  }

  section {
    margin: 0 1.5rem;
    clear: both;
  }

  section, .primary {
    margin-bottom: 3em;

    @media (max-width: @mobile-breakpoint) {
      margin-bottom: 2em;
    }
  }

  h2 {
    display: inline-block;
    font-size: 1.25em;
    color: white;
    background: #848484;
    margin-left: -1.5rem;
    padding: 5px 12px;
  }

  @media (max-width: @mobile-breakpoint) {
    section, h2 {
      margin-left: 0;
    }
  }

  h3 {
    font-weight: normal;
    font-size: 1.75em;
    margin-top: .25em;
    margin-bottom: .5em;
  }

  p {
    font-size: 1.25em;
    max-width: 45em;
  }

  section.letter {
    margin-bottom: 0;

    .end {
      margin-top: -1em;
      margin-bottom: -1em;
      overflow: hidden;
    }

    .contact {
      float: left;

      .chat-with-us {
        margin-left: .75em;
      }

      @media (max-width: @mobile-breakpoint) {
        .label {
          display: block;
          margin-bottom: 1em;
        }

        .chat-with-us {
          margin-left: 0;
        }
      }
    }

    .signature {
      float: right;
      margin-left: 2em;
      word-spacing: .35em;

      @media (max-width: @mobile-breakpoint) {
        float: left;
        margin-left: 0;
        font-size: 1.05em;
      }
    }
  }

  .fancy-logo {
    float: right;
    margin-left: 15px;
    margin-top: 4.75em;
  }

  .values {
    margin: .5em 0;
    padding: 0;

    li {
      @size: 48px;
      @padding: 14px;
      margin: 1.5em 0;
      margin-left: @size + @padding;
      list-style-type: none;

      &:before {
        position: absolute;
        content: '';
        display: block;
        width: @size;
        height: @size;
        margin-left: -(@size + @padding);
      }

      &.welcoming:before {
        background: data-uri('./res/city-sunrise.svg') no-repeat center center;
      }

      &.diverse:before {
        background: data-uri('./res/rainbow.svg') no-repeat center center;
      }

      &.meaningful:before {
        background: data-uri('./res/milky-way.svg') no-repeat center center;
      }

      @media (max-width: @mobile-breakpoint) {
        @size: 42px;
        @padding: 10px;
        margin-left: @size + @padding;

        &:before {
          width: @size;
          height: @size;
          margin-left: -(@size + @padding);
        }
      }
    }

    h4, p {
      margin: .25em 0;
    }

    h4 {
      font-size: 1.5em;
      font-weight: bold;
      color: fade(black, 75%);

      @media (max-width: @mobile-breakpoint) {
        font-size: 1.35em;
      }
    }
  }

  .messages {
    font-size: 1.25em;

    .faux-message {
      margin: .75em 0;
    }
  }

  @media (max-width: @mobile-breakpoint) {
    .fancy-logo {
      display: none;
    }

    h3 {
      font-size: 1.5em;
    }
  }
}

body.form-page, body.error-page {
  .container.main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  h1 {
    margin-bottom: 35px;
  }

  h2, h3 {
    font-weight: normal;
  }
}

body.form-page {
  form {
    text-align: center;
    max-width: 500px;
    margin: 0 auto;

    h2, .field-label-container {
      text-align: left;
      margin-bottom: 25px;
    }

    .major-action {
      font-size: 1.5em;
      margin-top: 10px;
      color: white;
      background: @brand-color;
      border: 2px solid transparent;

      &.done {
        &:disabled {
          opacity: 1;
        }

        background: white;
        color: darken(@brand-color, 25%);
        border: 2px solid @brand-color;
        box-shadow: none;
      }
    }
  }

  form.verify-email {
    h1 {
      width: 300px;
      height: 300px;
      background: fade(@brand-color, 25%) data-uri('../res/email.svg') no-repeat center center;
      background-size: 215px;
      border-radius: 100%;
      font-size: 0;
      margin: 0 auto;
      margin-bottom: 25px;
      text-indent: -9999px;
    }

    h2 {
      text-align: center;
    }

    @media (max-width: @mobile-breakpoint) {
      h1 {
        width: 200px;
        height: 200px;
        background-size: 143px;
      }
    }
  }
}

body.error-page {
  h1 {
    width: 215px;
    height: 215px;
    background: data-uri('../res/error-mild.svg') no-repeat center center;
    background-size: contain;
    font-size: 0;
    margin: 0 auto;
    margin-bottom: 35px;
    text-indent: -9999px;
  }

  h2, h3 {
    margin: 0;
  }

  h2 {
    font-size: 4em;
    margin-bottom: 8px;
  }

  h3 {
    font-size: 1.5em;
  }
}

.fancy-logo {
  @size: 200px;
  position: relative;
  display: inline-block;
  width: @size;
  height: @size;
  border-radius: 100%;

  .logo, .colors {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 100%;
    overflow: hidden;
  }

  .logo {
    background: data-uri('./res/home-outline.svg') no-repeat center center;
    background-size: contain;
    text-indent: -9999px;
    z-index: 5;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transition: transform .1s ease-out;
    box-shadow: 0 1px 6px fade(black, 25%);
  }

  .colors {
    padding: 8px;
    font-size: 0;
    transform: perspective(0);  // fix overflow clipping in Chrome

    & > div {
      display: inline-block;
      width: 100% / 5;
      height: 100%;
    }

    .a {
      background: #d95d3f;
    }

    .b {
      background: #f29526;
    }

    .c {
      background: #5abe6b;
    }

    .d {
      background: #4d97cb;
    }

    .e {
      background: #7f62b6;
    }
  }

  @keyframes scramble {
    0% {
      background: #d95d3f;
    }

    20% {
      background: #f29526;
    }

    40% {
      background: #5abe6b;
    }

    60% {
      background: #4d97cb;
    }

    80% {
      background: #7f62b6;
    }

    100% {
      background: #d95d3f;
    }
  }

  &:hover .logo, .logo:focus {
    transform: scale(1.05);
    transition-duration: .2s;
    outline: none;
  }

  &:hover .colors, .logo:focus + .colors {
    .delay-parts(.45s);

    & > div {
      animation-name: scramble;
      animation-iteration-count: infinite;
      animation-timing-function: steps(1);
      animation-duration: .45s;
    }
  }

  &:active {
    .logo {
      transition-duration: .025s;
      transform: scale(1);
    }
  }
}

.nick {
  display: inline-block;
  padding: 0 .4em;
  border-radius: 2px;
  line-height: 1.5em;
}

.messages {
  .faux-message {
    font-size: 1em;
    margin: .35em 0;

    .line {
      display: flex;
      white-space: pre-wrap;
    }

    .nick {
      flex-shrink: 0;
      align-self: flex-start;
      font-size: .85em;
      margin-right: .5em;
    }

    .replies {
      border-left: 2px solid #d2d2d2;
      padding-left: 1.5em;
    }

    .embed {
      display: block;
      margin-top: .5em;
      border-radius: 3px;

      .wrapper {
        position: relative;
        display: inline-block;
        .box-outline;
      }

      img {
        max-width: 272px;
        height: 153px;
        margin: 0;
      }
    }
  }

  @media (max-width: @mobile-breakpoint) {
    &.wrap {
      .line {
        display: block;
        margin-right: .75em;
      }

      .content {
        display: inline;
        position: relative;
        left: .75em;

        .message {
          margin-left: -.75em;
        }
      }
    }
  }
}

.green-button {
  .raised-filled-button(@brand-color);
}

.big-green-button {
  .raised-filled-button(@brand-color, 4px, 2px);
  font-size: 1.1em;
  padding: 11px 48px;
}

.outline-button {
  .raised-filled-button(transparent);
}
