Well Rounded - Cutting Corners

            
              @import "compass/css3";

/* VARIABLES *
 * -------------------------- */

/* COLORS & BACKGROUNDS */

$header-bg: #aed2cc;

$well-header-rgba: rgba(10,8,6,0.75); /* dark muddy grey */
$dropshadow-rgba: rgba(0,0,0,0.35);
  
$header-bg-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/23379/bg-map-bluegreen.jpg);

/* SIZES */
/* prefer calculations here and calculated variables in CSS below */

/* Set left-column-width, derive logo size below */
$hdr-side-width: 270px;
$hdr-big-btn-width: 72px; /* SIGN UP */

/* to see the menu flow to more than 1 line, change 
   $min-width here to something smaller: e.g., * 1.5; */
$min-width: $hdr-side-width * 2; 
$max-width: $hdr-side-width * 3;

$padding-small: 10px;
/* declared for flexibility */
$padding-to-window: $padding-small;
$padding-to-top: $padding-small;
$padding-hdr: $padding-small;

$hdr-big-btn-margin: floor(.75 * $padding-hdr); /* round down */

$border-radius-hdr: 10px; 

$corner-border-width: $border-radius-hdr;
$corner-border-size: $border-radius-hdr * 2;

$shadow-size: 20px;

$shadow-size-deep: ceil(1.5 * $shadow-size); 

$hdr-menu-height: 24px;

$hdr-logo-width: $hdr-side-width - $hdr-big-btn-width - 2 * $hdr-big-btn-margin;
$hdr-logo-height: ceil(0.75 * $hdr-logo-width); /* 4x3 */
$hdr-logo-margin-bottom: 12px;
/* height of taller left side "overhang" without padding-to-top */
$hdr-side-height: $hdr-logo-height + $hdr-logo-margin-bottom;
$hdr-side-total-height: $hdr-side-height + $padding-to-top;

$hdr-total-height: $hdr-side-total-height + $shadow-size-deep;

/* shorter green bg across top */
/* can specify or calculate: e.g., half the logo height */
$hdr-topwell-height: ceil(0.5 * $hdr-logo-height);


/* size and position of horizontal background "patch" 
   extending background into negative space by size of border-radius-hdr */
$hdr-logo-patch-height: $shadow-size + $border-radius-hdr;
$hdr-logo-patch-width: $hdr-logo-width + $border-radius-hdr;
$hdr-logo-patch-top: $padding-to-top + $hdr-topwell-height - $shadow-size;
$hdr-logo-patch-background-position: -1*($hdr-topwell-height - $shadow-size);


/* MIXINS 
 * -------------------------- */

@mixin dropshadow-header {
  -webkit-box-shadow: 0 ceil(.67*$shadow-size) $shadow-size $dropshadow-rgba;
     -moz-box-shadow: 0 ceil(.67*$shadow-size) $shadow-size $dropshadow-rgba;
          box-shadow: 0 ceil(.67*$shadow-size) $shadow-size $dropshadow-rgba; }

@mixin well-header {
  -webkit-box-shadow: inset 0 0 $shadow-size $well-header-rgba;
     -moz-box-shadow: inset 0 0 $shadow-size $well-header-rgba;
          box-shadow: inset 0 0 $shadow-size $well-header-rgba; }

/* used in "patch" to match inset box-shadow */
@mixin well-header-outset {
  /* "opacify" and "transparentize" value between 0 and 1 - 
     .19 more opaque for outset box-shadow to match inset (webkit, by my eye anyway) */
  $deepen-amount: .19;
  -webkit-box-shadow: 0 0 $shadow-size opacify($well-header-rgba, $deepen-amount);
     -moz-box-shadow: 0 0 $shadow-size opacify($well-header-rgba, $deepen-amount);
          box-shadow: 0 0 $shadow-size opacify($well-header-rgba, $deepen-amount); }

/* used in "patch" to add box-shadow on left side only */
@mixin well-header-left {
  -webkit-box-shadow: inset $shadow-size 0 $shadow-size -1*$shadow-size $well-header-rgba;
     -moz-box-shadow: inset $shadow-size 0 $shadow-size -1*$shadow-size $well-header-rgba;
          box-shadow: inset $shadow-size 0 $shadow-size -1*$shadow-size $well-header-rgba; }


/* CSS
 * -------------------------- */

/* http://www.paulirish.com/2012/box-sizing-border-box-ftw */
*,
*:after,
*:before { 
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

html { 
  overflow-y: scroll; 
  /* weird to scroll content horizontally with fixed header */
  overflow-x: hidden; 
  height: 100%; 
  margin: 0;
  padding: 0; 
}

body { 
  height: 100%;
  margin: 0;
  padding: 0;
  background: white; 
}

article {
  display: block;
  width: 90%;
  max-width: 700px;
  margin: 0 auto; /* 0 auto 2em */
  padding: 0 20px 40px; /* 1.5em 3em 3em */
}
  
/* can't assume only one "header" element in HTML5 */
.header-top { 
  /* pin to top - 0 is default */
  position: fixed;
  /* raise z-index to cover, higher here to allow 
     a range of z-indexes in the scrolling content */
  z-index: 100;
  /* height overflows */
  width: 100%;
}

/* match these backgrounds to blend */
/* OPTIONAL, extend header bg color across top */
.header-top,
/* OPTIONAL extra div, extend taller header bg left: */
.header-bg:before,
.header-wrap,
/* padding-to-window strip on taller left side */
.header-wrap:before,
 /* left-side overhang */
.header-content:before {
  background: white; /* white */
}

/* match widths, margins & padding */
.page-wrap, .header-wrap { 
  width: 90%; 
  min-width: $min-width; 
  max-width: $max-width; 
  /* center content */
  margin: 0 auto; 
  /* separate content from window edge -- 
     padding-top and -bottom specified below.
     Here (not on body) to work with fixed header */
  padding: 0 $padding-to-window;
}

.header-content { 
  /* child elements absolute */
  position: relative;
  height: $hdr-total-height;
  width: 100%;
  padding-top: $padding-to-top;
  /* crop shadows at the sides and top */
  overflow: hidden; }

/* add taller left-side "overhang" bg + shadow  */
.header-content:before { 
  content: "";
  /* remove from layout */
  position: absolute;
  /* tuck behind .header-wrap and .nav-main ul
     so right-edge shadow is covered up */
  z-index: -1;
  height: $hdr-side-height;
  width: $hdr-side-width;
  padding: 0;
  border-radius: 0 0 $border-radius-hdr 0;
  @include dropshadow-header;
}

/* INVERTED ROUNDED CORNER under overhang L */
.header-content:after { 
  content: "";
  display: block;
  position: absolute;
  /* tuck behind header bg */
  z-index: -1;
  height: $border-radius-hdr * 2;
  width: $border-radius-hdr * 2;
  border-top: $border-radius-hdr solid white;
  border-left: $border-radius-hdr solid white;
  top: $hdr-side-total-height - $border-radius-hdr;
  left: -1*$border-radius-hdr;
  /* top left */
  border-radius: $border-radius-hdr * 2 0 0 0;
}

/* match backgrounds to blend */
.header-logo, .header-social { 
  background-color: $header-bg;
  background-image: $header-bg-image;
  @include well-header;
}

.header-logo { 
  position: absolute;
  /* cover .header-content-social */
  /* z-index: 1; */
  height: $hdr-logo-height;
  width: $hdr-logo-width;
  border-radius: $border-radius-hdr 0 $border-radius-hdr $border-radius-hdr;
}

/* "patch" to cover shadow "seam" of overlapping shapes - 
   can't nest pseudo-elements, so need extra div here -  
   overflow:hidden to crop shadow of rounded corner overlay (below) */
.header-logo-patch {
  display: block;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  top: $hdr-logo-patch-top;
  height: $hdr-logo-patch-height;
  width: $hdr-logo-patch-width;
  background-color: $header-bg;
  background-image: $header-bg-image;
  background-position: 0 $hdr-logo-patch-background-position;
  background-repeat: no-repeat;
  @include well-header-left;
}

/* rounded corner overlay (with outset shadow to match "well") */
.header-logo-patch:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -$border-radius-hdr;
  right: -$border-radius-hdr;
  height: $border-radius-hdr * 2;
  width: $border-radius-hdr * 2;
  background-color: white;
  border-radius: $border-radius-hdr 0 0 0;
  @include well-header-outset;
}

.header-social { 
  position: absolute;
  top: $padding-to-top;
  height: $hdr-topwell-height;
  width: 100%;
  border-radius: $border-radius-hdr $border-radius-hdr $border-radius-hdr 0;
}

/* Presentational CSS Below */

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

body {
  line-height: 1.3125; }

h2 {
  color: #777; font-weight:300;
}

.border-grey {
  border: 8px solid #eaeaea;
}

/* responsively scaling all images */
img.scale, object.scale {
  /* corrects small inline gap at bottom of containing div */
  display: block;
  /* weird Firefox bug: needs width:100% or else it will break context-block trick (where display:table-cell fills in remaining width after fixed-width column float) */
  width: 100%;
  max-width: 100%;
  /* just in case, to force correct aspect ratio */
  height: auto !important;
  -ms-interpolation-mode: bicubic;
}

.lt-ie9 img.scale, .lt-ie9 object.scale {
  width: auto\9; /* ie8+9 - need to test*/
}