<div class='container'>
  <div class='box'>
    <div class='text'>
      <h1>Why colour contrast does it matter</h1>
      <p>Colour contrast between text and background is important on web pages. It affects some people’s ability to perceive the information (in other words to be able to receive the information visually).</p>
    </div>
    <div class='btn'>
      <div class='tooltip'>
        <a href='https://accessibility.blog.gov.uk/2016/06/17/colour-contrast-why-does-it-matter/' target="_blank" class='cta'>
          read more
        </a>
        <span class='tooltiptext'>open new page</span>
      </div>
    </div>
  </div>
</div>


<!-- References Dribbble / Twitter -->
<div class='cs-ref'>
  <a class="cs-dribbble" href="https://dribbble.com/shots/9300772-Neumorphism-UI-Card" target="_blank">
    <div id='svgDribbble'></div>
  </a>
  <a class="cs-twitter" target="_blank" href="https://twitter.com/CosWiSe">
    <div id='svgTwitter'></div>
  </a>
</div>

// IMPORT
@import url('https://fonts.googleapis.com/css?family=Muli:300,400,700,900');

// Variables
$mainC: #f1f3f6;
$secC: #9dabc0;
$svgC: rgba(#929cd0, .8);
$sz: 300px;

// Placeholders
%center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// HTML
html {
  background: $mainC;
  font-family: 'Muli',sans-serif;
  color: rgba(51,51,51,1);
}

// SVGs
#dribbble {
  position: fixed;
  display: block;
  right: 70px;
  bottom: 16px;
  svg {
    display: block;
    width: 76px;
    height: 24px;
    fill: $svgC;
  }
}
#twitter {
  position: fixed;
  display: block;
  right: 25px;
  bottom: 11px;
  svg {
    width: 24px;
    height: 24px;
    fill: $svgC;
  }
}

// Main Structure
.container {
  width: 100%;
  height: 97vh;
  // border: 1px solid black;
  @extend %center; 
}

.box {
  @extend %center; 
  flex-direction: column;
  width: $sz;
  height: $sz*1.4;
  // border: 1px solid #fff;
  background: $mainC;
  border-radius: 20px;
  box-shadow: 
    inset 0 0 15px rgba(55, 84, 170,0),
    inset 0 0 20px rgba(255, 255, 255,0),
    7px 7px 15px rgba(55, 84, 170,.15),
    -7px -7px 20px rgba(255, 255, 255,1),
    inset 0px 0px 4px rgba(255, 255, 255,.2);
}

.text {
  width: 80%;
  height: auto;
  // background: red;
  h1 {
    font-size: 1.5em;
    font-weight: 600;
  }
  p {
    margin-top: 2em;
    line-height: 1.45em;
  }
}

.btn {
  margin-top: 2em;
  margin-bottom: 2em;
  display: flex;
  flex-direction: column;
  .cta {
    width: 100px;
    height: 33px;
    text-decoration: none;
    background: $secC;
    color: #fff;
    padding: 10px 63px;
    border-radius: 25px;
    font-weight: 600;
    box-shadow: 0px 10px 15px rgba(55, 84, 170,.25);
  }
}

// Tooltip
.tooltip {
  position: relative;
}

.tooltip .tooltiptext {
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  width: 120px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 25px;
  padding: 5px 0 6px 0;
  position: absolute;
  top: -40px;
  left: calc(50% - 60px);
  z-index: 1;
  font-size: .7em;
  opacity: 0;
  box-sizing: border-box;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
  transition: opacity 399ms ease;
}

feather.replace();

// SVGs
$('#svgDribbble').load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/373860/references.html #dribbble');
$('#svgTwitter').load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/373860/references.html #twitter');