1 files changed, 123 insertions, 14 deletions

diff --git a/StoneIsland/platforms/ios/www/css/nav.css b/StoneIsland/platforms/ios/www/css/nav.css
index 8842e6e1..2463d123 100644
--- a/StoneIsland/platforms/ios/www/css/nav.css
+++ b/StoneIsland/platforms/ios/www/css/nav.css
@@ -4,9 +4,10 @@
 #nav {
   position: absolute;
   top: 0; left: 0;
-  width: 300px;
-  -webkit-transform: translateZ(0) translateX(-300px);
+  width: 249px;
+  -webkit-transform: translateZ(0) translateX(-249px);
   -webkit-transition: -webkit-transform 0.3s;
+  background: #eeeeee;
 }
 #content {
   position: absolute;
@@ -25,9 +26,52 @@
   -webkit-transform: translateZ(0) translateX(0);
 }
 .nav #content {
-  -webkit-transform: translateZ(0) translateX(300px);
+  -webkit-transform: translateZ(0) translateX(249px);
+}
+.nav .logo {
+  background-image: url(../img/wide-logo.png);
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: contain;
+  width: 120px;
+  height: 80px;
+  margin-left: 20px;
+}
+#nav .menu span {
+  display: block;
+  font-size: 14px;
+  color: #000;
+  padding: 15px 0 15px 20px;
+}
+#nav .submenu {
+  position: absolute;
+  width: 100%;
+  padding: 20px 0;
+  bottom: 33px;
+  border-top: 1px solid #ddd;
+}
+#nav .submenu span {
+  display: block;
+  font-size: 14px;
+  color: #bbb;
+  padding: 4px 0 5px 20px
+}
+#nav .social {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  border-top: 1px solid #ddd;
+}
+#nav .social span {
+  display: block;
+  float: left;
+  width: 82px;
+  border-left: 1px solid #ddd;
+  color: #bbb;
+  font-size: 18px;
+  padding: 5px 0;
+  text-align: center;
 }
-
 
 /* INTRO PAGE WITH SPINNING COMPASS */
 
@@ -51,23 +95,26 @@
 }
 #intro #compass {
   pointer-events: none;
-  width: 300px;
-  height: 300px;
-  background: black;
+  background-image: url(../img/compass-logo.png);
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 250px 250px;
+  width: 250px;
+  height: 250px;
   padding: 0px;
   border-radius: 50%;
 }
 #intro .store {
-  -webkit-transform: translateX(-50%) translateY(-50%) translateY(170px) rotateZ(0deg);
+  -webkit-transform: translateX(-50%) translateY(-50%) translateY(145px) rotateZ(0deg);
 }
 #intro .hub {
-  -webkit-transform: translateX(-50%) translateY(-50%) translateX(170px) rotateZ(90deg);
+  -webkit-transform: translateX(-50%) translateY(-50%) translateX(140px) rotateZ(90deg);
 }
 #intro .story {
-  -webkit-transform: translateX(-50%) translateY(-50%) translateY(-170px) rotateZ(0deg);
+  -webkit-transform: translateX(-50%) translateY(-50%) translateY(-145px) rotateZ(0deg);
 }
 #intro .archive {
-  -webkit-transform: translateX(-50%) translateY(-50%) translateX(-170px) rotateZ(270deg);
+  -webkit-transform: translateX(-50%) translateY(-50%) translateX(-140px) rotateZ(270deg);
 }
 #intro .latlng {
   position: absolute;
@@ -83,10 +130,28 @@
   display: block;
   position: absolute;
   top: 0; left: 0; width: 100%;
+  height: 42px;
   background: white;
 }
-.burger {
+#header .logo {
+  background-image: url(../img/wide-logo.png);
+  background-repeat: no-repeat;
+  background-position: center center;
+  position: absolute;
+  background-size: contain;
+  width: 80px; height: 38px;
+  left: 50%; top: 2px;
+  margin-left: -40px;
+}
+#header .burger {
+  display: inline-block;
   font-size: 24px;
+  padding: 6px 10px;
+}
+#header .cart {
+  display: inline-block;
+  padding: 6px 10px;
+  float: right;
 }
 
 
@@ -99,17 +164,39 @@
 }
 #footer span {
   display: none;
+  padding: 10px 0;
+  color: #bbb;
+}
+#footer .filter {
+  float: right;
+  padding: 10px;
+}
+#footer .buynow,
+#footer .addtocart,
+#footer .cancel,
+#footer .checkout,
+#footer .checkout_proceed {
+  width: 50%;
+  text-align: center;
+  float: left;
 }
 
 
 /* CURTAIN FOR LOGIN AND SELECTOR VIEWS */
 
 #curtain {
-  display: none;
+  pointer-events: none;
   position: absolute;
   top: 0; left: 0;
   width: 100%; height: 100%;
-  background: rgba(238,238,238,0.9);
+  background: rgba(72,72,72,0.8);
+  opacity: 0;
+  -webkit-transition: opacity 0.4s;
+  transition: opacity 0.4s;
+}
+#curtain.visible {
+  pointer-events: auto;
+  opacity: 1;
 }
 
 
@@ -128,5 +215,27 @@
 
 #selector {
   display: none;
+  height: 100%; width: 100%;
+  position: absolute; top: 0; left: 0;
+  background: #eeeeee;
 }
 
+/* CONTENT */
+
+#story, #hub, #archive, #collection, #product, #cart {
+  position: absolute;
+  top: 40px;
+  height: -webkit-calc(100% - 40px);
+  height: calc(100% - 40px);
+  width: 100%;
+}
+h1 {
+  text-align: center;
+  margin: 0;
+  padding: 15px 10px 10px 10px;
+  border-bottom: 1px solid #ccc;
+  font-size: 18px;
+  color: #ccc;
+  letter-spacing: 2px;
+  font-weight: 100;
+}