words fade in component

1 files changed, 16 insertions, 3 deletions

diff --git a/frontend/site/projects/museum/views/petros.nav.css b/frontend/site/projects/museum/views/petros.nav.css
index 1a68032..6720f5f 100644
--- a/frontend/site/projects/museum/views/petros.nav.css
+++ b/frontend/site/projects/museum/views/petros.nav.css
@@ -1,16 +1,18 @@
 .petros-left {
   position: absolute;
-  bottom: 70px;
+  bottom: 50px;
   left: 40px;
   cursor: pointer;
   opacity: 0.0;
+  transform: scale(0.9);
   transition: opacity 0.4s;
   pointer-events: none;
 }
 .petros-right {
   position: absolute;
-  bottom: 70px;
+  bottom: 50px;
   right: 40px;
+  transform: scale(0.9);
   cursor: pointer;
   opacity: 0.0;
   transition: opacity 0.4s;
@@ -40,9 +42,20 @@
   max-width: calc(100vw - 400px);
   text-align: center;
   font-family: 'Druk Wide', sans-serif;
-  font-size: 2vw;
+  font-size: 1.5vw;
   pointer-events: none;
   color: #fff;
   text-shadow: 0 0 3px #fff;
   transition: opacity 0.4s;
 }
+
+.fade-words span {
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+.fade-words span:after {
+  content: ' ';
+}
+.fade-words span.visible {
+  opacity: 1;
+}