adding the card-bg variable.

dist/ratchet.css

@@ -298,7 +298,7 @@ strong {
   background-color: white;
 }
 [class*="bar-"].bar-header-secondary {
-  top: 45px;
+  top: 44px;
 }
 [class*="bar-"].bar-footer {
   bottom: 0;
@@ -390,7 +390,7 @@ strong {
   width: auto;
   overflow: hidden;
   margin: 10px;
-  background-color: #fff;
+  background-color: white;
   border: 1px solid #dddddd;
   border-radius: 6px;
 }

lib/sass/bars.scss

@@ -16,7 +16,7 @@
 
   // Modifier class to dock any bar below .bar-nav
   &.bar-header-secondary {
-    top: $bar-base-height + 1;
+    top: $bar-base-height;
   }
 
   // Modifier class to dock any bar to bottom of viewport

lib/sass/cards.scss

@@ -6,7 +6,7 @@
   width: auto;
   overflow: hidden;
   margin: $bar-side-spacing;
-  background-color: #fff;
+  background-color: $card-bg;
   border: $border-default;
   border-radius: $border-radius;
 }

lib/sass/variables.scss

@@ -32,6 +32,10 @@ $bar-base-height:  44px;
 $bar-tab-height:   50px;
 $bar-side-spacing: 10px;
 
+// Cards
+// --------------------------------------------------
+
+$card-bg: #fff;
 
 // Buttons
 // --------------------------------------------------