o<div class="stripes-overlay"></div>

<div class="content">
  <h1 class="inner-shadow brand">Inner Shadow</h1>
  <p class="inner-shadow">It's easy with CSS3 + Sass</p>
</div>

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700);
@import "compass/css3/images";

/* CHANGE ME TO ANY COLOR TO EXPERIMENT */
$change-me: orange;

$brand-font: 'Open Sans', sans-serif;

body {
  background: lighten($change-me, 40%);
  margin: 0;
}

.content {
  padding: 75px 0;
}

.stripes-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  @include background(
    linear-gradient(45deg, 
      rgba(255, 255, 255, .15) 25%, 
      transparent 50%, 
      transparent)
  );
  @include background-size(4px 4px);
  z-index: -1;
}

h1 {
  font-size: 5em;
  text-align: center;
  margin-bottom: .5em;
}
p {
  font-size: 1.5em;
  font-family: sans-serif;
  font-weight: 100;
  text-align: center;
  color: darken(rgba($change-me, .75), 35%);
}

.brand {
  font-family: $brand-font;
  font-weight: 700;
  color: rgba($change-me, .75);
}

/* the magic */

.inner-shadow {
  @include text-shadow(
    1px 2px 4px lighten($change-me, 45%),
    0px 0px 0px darken($change-me, 100%),
    0px 0px 2px lighten($change-me, 80%)
   );
}

/*===============================================

Inspired by Vincicat's Pen https://codepen.io/vincicat/pen/zikrC 

Attempted to make it more modular. All colors are based off a single Sass variable. Prevents effect from ending up as light text on a dark background.

===============================================*/