1 files changed, 26 insertions, 16 deletions

diff --git a/public/assets/ok.css b/public/assets/ok.css
index 785a6d6..0f09323 100644
--- a/public/assets/ok.css
+++ b/public/assets/ok.css
@@ -149,7 +149,7 @@ h3 {
     top: 0;
     left: 0;
     z-index: 2;
-    transform: translateX(-50vw);
+    transform: translateZ(0) translateX(-50vw);
     padding: 24px 0 5px 0;
     transition: 150ms transform cubic-bezier(0, 0, 0, 1);
     z-index: 0;
@@ -193,16 +193,16 @@ nav {
 }
 
 .navopen .menu {
-    transform: translateX(0vw);
+    transform: translateZ(0) translateX(0vw);
     z-index: 2;
     opacity: 1;
     overflow: auto;
+    background: #f9f9f9;
 }
 
 .navopen .item {
-    transform: translateX(50vw);
+    transform: translateZ(0) translateX(50vw);
     /*opacity:0.5;*/
-    background: black;
 }
 
 nav svg g g rect {
@@ -265,7 +265,7 @@ span {
     height: 100vh;
     width: 100%;
     display: block;
-    transition: 150ms transform cubic-bezier(0, 0, 0, 1), 200ms background cubic-bezier(0, 0, 0, 1), 150ms opacity cubic-bezier(0, 1, 0, 0);
+    transition: 150ms transform cubic-bezier(0, 0, 0, 1), 150ms opacity cubic-bezier(0, 1, 0, 0);
 }
 
 .item.intro {
@@ -276,10 +276,6 @@ span {
     background: white;
 }
 
-.navopen .item.intro {
-    background: black;
-}
-
 .navopen .item.intro > * {
     background: transparent;
 }
@@ -289,6 +285,20 @@ body.navopen {
     background: #f9f9f9;
 }
 
+#curtain {
+  position: absolute;
+  top: 0; left: 0;
+  background: black;
+  transition: 200ms opacity cubic-bezier(0, 0, 0, 1);
+  opacity: 0;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+}
+.navopen #curtain {
+  opacity: 1;
+}
+
 nav {
     position: fixed;
     top: 0;
@@ -328,7 +338,7 @@ nav span div:last-child {
 }
 
 .navopen nav span div:last-child {
-    transform: translateX(110px);
+    transform: translateZ(0) translateX(110px);
     transition: 150ms all;
     position: absolute;
     right: 5px;
@@ -411,12 +421,12 @@ body {
 }
 
 .up .showing.item {
-    transform: translateY(-10px);
+    transform: translateZ(0) translateY(-10px);
     opacity: 0;
 }
 
 .down .showing.item {
-    transform: translateY(10px);
+    transform: translateZ(0) translateY(10px);
     opacity: 0;
 }
 
@@ -549,12 +559,12 @@ button.previous {
 .desktop button.previous:hover svg,
 .desktop button.next:hover svg {
     opacity: 1;
-    transform: scale(0.2);
+    transform: translateZ(0) scale(0.2);
 }
 
 .desktop button.next:active svg,
 .desktop button.previous:active svg {
-    transform: scale(0.1);
+    transform: translateZ(0) scale(0.1);
 }
 
 .cell,
@@ -777,10 +787,10 @@ ul li {
     }
     .menu {
         width: 90vw;
-        transform: translateX(-90vw);
+        transform: translateZ(0) translateX(-90vw);
     }
     .navopen .item {
-        transform: translateX(90vw);
+        transform: translateZ(0) translateX(90vw);
     }
     .top {
         margin-top: 30px;