v0.15.22

Changed rooms layout

components.js

@@ -3744,7 +3744,7 @@ scrollTabPanels.innerHTML = `
         .tab-panels{
             display: grid;
             gap: var(--gap);
-            height: var(--height);
+            // height: var(--height);
             overflow-y: auto;
             border-radius: var(--border-radius);
             background: var(--background);
@@ -3811,10 +3811,11 @@ customElements.define('scroll-tab-panels', class extends HTMLElement {
 
     handlePanelChange = (e) => {
         if (e.detail.targetPanelGroup === this.id) {
-            this.tabPanels.scrollTo({
+/*             this.tabPanels.scrollTo({
                 top: (this._assignedElements[e.detail.panelIndex].getBoundingClientRect().top - this.tabPanels.getBoundingClientRect().top + this.tabPanels.scrollTop),
                 behavior: 'smooth'
-            })
+            }) */
+            this._assignedElements[e.detail.panelIndex].scrollIntoView({block: "nearest", inline: 'start', behavior: 'smooth'})
         }
     }
     
@@ -3837,7 +3838,7 @@ customElements.define('scroll-tab-panels', class extends HTMLElement {
         },
             {
                 threshold: 0.8,
-                root: this.tabPanels
+                // root: this.tabPanels
         })
         this.tabPanels.addEventListener('slotchange', e => {
             this._assignedElements = this.tabPanelsSlot.assignedElements()

css/main.css

@@ -12,13 +12,13 @@ body {
   --text-color: 17, 17, 17;
   --text-color-light: 100, 100, 100;
   --foreground-color: 255, 255, 255;
-  --background-color: #efefef;
+  --background-color: #F3F3F3;
   --error-color: red;
   --red: #E84545;
   color: rgba(var(--text-color), 1);
   height: calc(100%);
   font-size: clamp(1rem, 1.2vmax, 3rem);
-  background: #F3F3F3;
+  background: var(--background-color);
 }
 
 body[data-theme=dark] {
@@ -26,21 +26,20 @@ body[data-theme=dark] {
   --text-color: 240, 240, 240;
   --text-color-light: 170, 170, 170;
   --foreground-color: 20, 20, 20;
+  --background-color: #0a0a0a;
   --error-color: rgb(255, 106, 106);
-  background: #0a0a0a;
 }
 body[data-theme=dark] #outlet_switcher {
-  background: -webkit-gradient(linear, left top, left bottom, from(rgba(var(--text-color), 0.06)), to(rgba(var(--text-color), 0.06))), rgba(var(--foreground-color), 1);
   background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), rgba(var(--foreground-color), 1);
 }
-body[data-theme=dark] .outlet-preview__info {
-  background-color: #0a0a0a;
-}
 
 .full-bleed {
   grid-column: 1/4;
 }
 
+/* .h1, .h2, .h3, .h4, .h5{
+    // font-family: 'Lora', serif;
+} */
 .h1 {
   font-size: 2.5rem;
 }
@@ -75,18 +74,13 @@ p {
 }
 
 img {
-  -o-object-fit: cover;
   object-fit: cover;
 }
 
 button {
   position: relative;
   overflow: hidden;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
   display: inline-flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
   align-items: center;
   border: none;
   background: none;
@@ -125,7 +119,6 @@ sm-button {
 }
 
 sm-tab-header {
-  -ms-flex-item-align: start;
   align-self: flex-start;
 }
 
@@ -134,8 +127,6 @@ ul {
 }
 
 .flex {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -176,14 +167,10 @@ ul {
 }
 
 .align-start {
-  -webkit-box-align: start;
-      -ms-flex-align: start;
   align-items: flex-start;
 }
 
 .align-center {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
   align-items: center;
 }
 
@@ -192,14 +179,10 @@ ul {
 }
 
 .justify-start {
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
   justify-content: start;
 }
 
 .justify-center {
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
   justify-content: center;
 }
 
@@ -208,7 +191,6 @@ ul {
 }
 
 .align-self-center {
-  -ms-flex-item-align: center;
   align-self: center;
 }
 
@@ -221,15 +203,10 @@ ul {
 }
 
 .direction-column {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
   flex-direction: column;
 }
 
 .space-between {
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
   justify-content: space-between;
 }
 
@@ -283,7 +260,6 @@ ul {
 }
 
 .no-transformations {
-  -webkit-transform: none !important;
   transform: none !important;
 }
 
@@ -297,7 +273,6 @@ ul {
 .ripple {
   position: absolute;
   border-radius: 50%;
-  -webkit-transform: scale(0);
   transform: scale(0);
   background: rgba(var(--text-color), 0.16);
   pointer-events: none;
@@ -386,8 +361,6 @@ ul {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 0.5rem;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
   align-items: center;
   width: 100%;
 }
@@ -412,18 +385,13 @@ ul {
 }
 
 .elevator__header {
-  position: -webkit-sticky;
   position: sticky;
   top: 0;
   padding: 1.2rem 1.5rem;
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 0.5rem;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
   align-items: center;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
   justify-content: flex-start;
   width: 100%;
   background: rgba(var(--foreground-color), 1);
@@ -431,7 +399,6 @@ ul {
 }
 
 #elevator_sections {
-  -ms-flex-line-pack: start;
   align-content: flex-start;
   padding: 0 1.5rem 4rem 1.5rem;
 }
@@ -439,14 +406,12 @@ ul {
 #elevator_button_panel {
   gap: 2rem;
   overflow: auto;
-  -ms-scroll-snap-type: x proximity;
   scroll-snap-type: x proximity;
   grid-template-columns: repeat(3, min(40ch, 80%));
 }
 #elevator_button_panel li {
   display: grid;
   gap: 2rem;
-  -ms-flex-line-pack: start;
   align-content: flex-start;
   scroll-snap-align: start;
 }
@@ -457,9 +422,6 @@ ul {
 
 .outlet-section {
   display: grid;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
   user-select: none;
 }
 
@@ -473,8 +435,6 @@ ul {
   padding: 1rem;
   height: 4rem;
   width: 4rem;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
   justify-content: center;
   border-radius: 0.5rem;
   font-size: 1.5rem;
@@ -483,13 +443,10 @@ ul {
 }
 .floor__button--active {
   background: rgba(var(--text-color), 0.2);
-  -webkit-box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 1) inset;
   box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 1) inset;
 }
 
 .elevator__floor-line {
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
   flex: 1;
   height: 0.1rem;
   margin-left: 2rem;
@@ -522,21 +479,16 @@ ul {
 }
 .theme-switcher .icon {
   position: absolute;
-  -webkit-transition: -webkit-transform 0.6s;
-  transition: -webkit-transform 0.6s;
   transition: transform 0.6s;
-  transition: transform 0.6s, -webkit-transform 0.6s;
 }
 
 .theme-switcher__checkbox {
   display: none;
 }
 .theme-switcher__checkbox:checked ~ .moon-icon {
-  -webkit-transform: scale(0) rotate(90deg);
   transform: scale(0) rotate(90deg);
 }
 .theme-switcher__checkbox:not(:checked) ~ .sun-icon {
-  -webkit-transform: scale(0) rotate(-90deg);
   transform: scale(0) rotate(-90deg);
 }
 
@@ -563,7 +515,6 @@ ul {
 }
 
 #floor_line_map {
-  position: -webkit-sticky;
   position: sticky;
   top: 1rem;
   height: 40vh;
@@ -584,10 +535,7 @@ ul {
   margin-top: -0.5rem;
   background: rgba(var(--foreground-color), 1);
   border: solid 0.2rem var(--red);
-  -webkit-transition: -webkit-transform 0.1s linear;
-  transition: -webkit-transform 0.1s linear;
   transition: transform 0.1s linear;
-  transition: transform 0.1s linear, -webkit-transform 0.1s linear;
   z-index: 5;
 }
 
@@ -600,23 +548,15 @@ ul {
 
 .floor-label {
   position: absolute;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
   align-items: center;
   left: 0.75rem;
   margin-top: -0.9rem;
   padding-bottom: 1rem;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
   user-select: none;
 }
 .floor-label--active .floor-title {
   opacity: 1;
-  -webkit-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
   box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
 }
 
@@ -636,10 +576,7 @@ ul {
   margin-left: 1rem;
   border-radius: 0.2rem;
   background: rgba(var(--foreground-color), 1);
-  -webkit-transition: opacity 0.3s, -webkit-box-shadow 0.3s;
-  transition: opacity 0.3s, -webkit-box-shadow 0.3s;
   transition: box-shadow 0.3s, opacity 0.3s;
-  transition: box-shadow 0.3s, opacity 0.3s, -webkit-box-shadow 0.3s;
 }
 
 #floor_container {
@@ -663,16 +600,31 @@ ul {
 
 .outlet-preview {
   position: relative;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
   align-items: center;
   display: grid;
 }
 
+.outlet-number {
+  display: grid;
+  position: relative;
+  width: 2rem;
+  height: 2rem;
+  aspect-ratio: 1/1;
+  font-size: 1.3rem;
+  font-weight: 900;
+  margin-bottom: 0.5rem;
+  border-radius: 0.2rem;
+  place-content: center;
+  justify-self: flex-start;
+  background: rgba(var(--text-color), 1);
+  color: rgba(var(--foreground-color), 1);
+  box-shadow: 0.2rem 0.2rem 0 var(--red);
+}
+
 .outlet-preview__info {
+  position: relative;
   padding: 1rem;
   border-radius: 0.5rem;
-  background-color: #F3F3F3;
 }
 
 .outlet__title {
@@ -691,15 +643,17 @@ ul {
   height: 100%;
   width: 100%;
   z-index: -1;
-  -webkit-box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.3);
+  box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.2);
-          box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.3);
   border-radius: 0.5rem;
 }
 
 .outlet-preview__button {
-  justify-self: flex-start;
+  justify-self: flex-end;
 }
 
+/* .outlet-preview__carousel{
+}
+ */
 .label {
   position: relative;
   font-size: 0.8rem;
@@ -732,8 +686,6 @@ sm-carousel {
 }
 
 .investor-card {
-  -webkit-box-align: start;
-      -ms-flex-align: start;
   align-items: flex-start;
   grid-template-columns: auto 1fr;
   grid-template-rows: auto 1fr;
@@ -771,7 +723,6 @@ sm-carousel {
   padding: 1rem;
   border-radius: 0.3rem;
   background: rgba(var(--foreground-color), 1);
-  -webkit-box-shadow: 0 2rem 4rem -1rem rgba(0, 0, 0, 0.2);
   box-shadow: 0 2rem 4rem -1rem rgba(0, 0, 0, 0.2);
   z-index: 2;
 }
@@ -793,11 +744,7 @@ sm-carousel {
 }
 
 .outlet-label {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
   align-items: center;
   justify-self: flex-start;
   color: var(--accent-color);
@@ -809,36 +756,24 @@ sm-carousel {
   margin-right: 0.5rem;
 }
 
-scroll-tab-header,
-scroll-tab-panels {
-  --border-radius: 0.5rem;
-}
-
 scroll-tab-header {
-  position: -webkit-sticky;
   position: sticky;
   top: 0;
-  --gap: 0.5rem;
+  --padding: 0.5rem 0;
-  --padding: 0.5rem;
+  --border-radius: 0.3rem;
-  margin-right: 1.5rem;
+  --background: var(--background-color);
-  --background: linear-gradient(rgba(var(--text-color), 0.04), rgba(var(--text-color), 0.04)), rgba(var(--foreground-color), 1);
   --grid-auto-flow: column;
-  justify-self: flex-start;
   z-index: 1;
 }
 
 scroll-tab-panels {
-  --height: max(24rem, 50vh);
-  --gap: 4rem;
   --background: transparent;
-  -ms-scroll-chaining: none;
   overscroll-behavior: contain;
 }
 scroll-tab-panels > * {
-  min-height: max(24rem, 50vh);
+  min-height: 100vh;
-  margin-bottom: 6rem;
+  padding-top: 4rem;
   opacity: 0.4;
-  -webkit-transition: opacity 0.6s;
   transition: opacity 0.6s;
 }
 scroll-tab-panels > [active] {
@@ -846,8 +781,6 @@ scroll-tab-panels > [active] {
 }
 
 .auto-grid-layout {
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
   justify-content: flex-start;
   overflow-x: auto;
 }
@@ -857,27 +790,34 @@ scroll-tab-panels > [active] {
 }
 
 .room-button {
+  position: relative;
+  opacity: 0.6;
+  border-radius: 0;
   font-weight: 500;
   font-size: 1.1rem;
-  opacity: 0.6;
-  -webkit-transition: opacity 0.3s, background-color 0.3s;
   transition: opacity 0.3s, background-color 0.3s;
   padding: 0.6rem 0.8rem;
 }
 .room-button[active] {
-  background-color: rgba(var(--text-color), 0.06);
   opacity: 1;
-  border-radius: 0.3rem;
   color: var(--accent-color);
 }
 .room-button[active] .icon {
   fill: var(--accent-color);
 }
+.room-button[active]::after {
+  content: "";
+  position: absolute;
+  height: 0.1rem;
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  border-radius: 0.2rem 0.2rem 0 0;
+  background: var(--accent-color);
+}
 
 table {
   border-collapse: collapse;
-  width: -webkit-max-content;
-  width: -moz-max-content;
   width: max-content;
 }
 
@@ -895,8 +835,6 @@ table {
 
 #ico_page__carousel {
   width: min(36rem, 100%);
-  height: -webkit-max-content;
-  height: -moz-max-content;
   height: max-content;
 }
 
@@ -915,7 +853,6 @@ table {
   position: absolute;
   margin-top: 1rem;
   left: 50%;
-  -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
 }
 
@@ -947,28 +884,19 @@ table {
   }
 
   .floor-label {
-    -webkit-transition: -webkit-transform 0.3s;
-    transition: -webkit-transform 0.3s;
     transition: transform 0.3s;
-    transition: transform 0.3s, -webkit-transform 0.3s;
   }
   .floor-label .floor-title {
     opacity: 0;
-    -webkit-transform: translateX(-1rem);
     transform: translateX(-1rem);
-    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-    transition: opacity 0.3s, -webkit-transform 0.3s;
     transition: opacity 0.3s, transform 0.3s;
-    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
   }
   .floor-label--active {
     opacity: 1;
   }
   .floor-label--active .floor-title {
     opacity: 1;
-    -webkit-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
     box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
-    -webkit-transform: none;
     transform: none;
   }
 
@@ -1027,9 +955,7 @@ table {
   }
 
   .carousel-holder {
-    -ms-flex-item-align: start;
     align-self: flex-start;
-    -webkit-transform: translateY(-2rem);
     transform: translateY(-2rem);
     z-index: 1;
     border-radius: 0.5rem;
@@ -1037,14 +963,12 @@ table {
   .carousel-holder--left {
     grid-row: 1/2;
     grid-column: 1/2;
-    -webkit-box-shadow: -2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2);
     box-shadow: -2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2);
   }
   .carousel-holder--left ~ .outlet-preview__border {
     justify-self: flex-end;
   }
   .carousel-holder--right {
-    -webkit-box-shadow: 2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2);
     box-shadow: 2rem 5rem 4rem -2rem rgba(0, 0, 0, 0.2);
   }
 
@@ -1053,7 +977,7 @@ table {
   }
 
   .outlet-preview__info {
-    padding: 2rem 3rem;
+    padding: 2rem;
   }
 
   .outlet-preview__carousel {
@@ -1068,10 +992,6 @@ table {
     margin-top: 4rem;
   }
 
-  scroll-tab-header {
-    --grid-auto-flow: row;
-  }
-
   .auto-grid-layout {
     grid-template-columns: auto 1fr;
   }
@@ -1086,8 +1006,6 @@ table {
   }
 
   .grid-3 {
-    -webkit-box-pack: center;
-        -ms-flex-pack: center;
     justify-content: center;
     /*         & > .grid:not(:last-of-type){
                 position: relative;
@@ -1126,7 +1044,6 @@ table {
 
   .page-link {
     cursor: pointer;
-    -webkit-transition: color 0.3s;
     transition: color 0.3s;
   }
   .page-link:hover {
@@ -1137,15 +1054,10 @@ table {
   }
 
   .outlet-section .icon {
-    -webkit-transform: translateX(-0.5rem);
     transform: translateX(-0.5rem);
-    -webkit-transition: -webkit-transform 0.3s;
-    transition: -webkit-transform 0.3s;
     transition: transform 0.3s;
-    transition: transform 0.3s, -webkit-transform 0.3s;
   }
   .outlet-section:hover .icon {
-    -webkit-transform: none;
     transform: none;
   }
 

css/main.scss

@@ -12,36 +12,33 @@ body {
     --text-color: 17, 17, 17;
     --text-color-light: 100, 100, 100;
     --foreground-color: 255, 255, 255;
-    --background-color: #efefef;
+    --background-color: #F3F3F3;
     --error-color: red;
     --red: #E84545;
     color: rgba(var(--text-color), 1);
     height: calc(100%);
     font-size: clamp(1rem, 1.2vmax, 3rem);
-    background: #F3F3F3;
+    background: var(--background-color);
 }
 body[data-theme='dark']{
     --accent-color:#2fb3ff;
     --text-color: 240, 240, 240;
     --text-color-light: 170, 170, 170;
     --foreground-color: 20, 20, 20;
+    --background-color: #0a0a0a;
     --error-color: rgb(255, 106, 106);
-    background: #0a0a0a;
     #outlet_switcher{
         background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), rgba(var(--foreground-color), 1);
     }
-    .outlet-preview__info{
-        background-color: #0a0a0a;
-    }
 }
 
 .full-bleed{
     grid-column: 1/4;
 }
 
-.h1, .h2, .h3, .h4, .h5{
+/* .h1, .h2, .h3, .h4, .h5{
-    // font-family: 'Lorr', serif;
+    // font-family: 'Lora', serif;
-}
+} */
 .h1{
     font-size: 2.5rem;
 }
@@ -534,10 +531,26 @@ ul{
     align-items: center;
     display: grid;
 }
+.outlet-number{
+    display: grid;
+    position: relative;
+    width: 2rem;
+    height: 2rem;
+    aspect-ratio: 1/1;
+    font-size: 1.3rem;
+    font-weight: 900;
+    margin-bottom: 0.5rem;
+    border-radius: 0.2rem;
+    place-content: center;
+    justify-self: flex-start;
+    background: rgba(var(--text-color), 1);
+    color: rgba(var(--foreground-color), 1);
+    box-shadow: 0.2rem 0.2rem 0 var(--red);
+}
 .outlet-preview__info{
+    position: relative;
     padding: 1rem;
     border-radius: 0.5rem;
-    background-color: #F3F3F3;
 }
 .outlet__title{
     font-weight: 700;
@@ -553,16 +566,16 @@ ul{
     height: 100%;
     width: 100%;
     z-index: -1;
-    box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.3);
+    box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.2);
     border-radius: 0.5rem;
 }
 .outlet-preview__button{
-    justify-self: flex-start;
+    justify-self: flex-end;
 }
 
-.outlet-preview__carousel{
+/* .outlet-preview__carousel{
 }
-
+ */
 .label{
     position: relative;
     font-size: 0.8rem;
@@ -658,29 +671,21 @@ sm-carousel{
     }
 }
 
-scroll-tab-header,
-scroll-tab-panels{
-    --border-radius: 0.5rem;
-}
 scroll-tab-header{
     position: sticky;
     top: 0;
-    --gap: 0.5rem;
+    --padding: 0.5rem 0;
-    --padding: 0.5rem;
+    --border-radius: 0.3rem;
-    margin-right: 1.5rem;
+    --background: var(--background-color);
-    --background: linear-gradient(rgba(var(--text-color), 0.04), rgba(var(--text-color), 0.04)), rgba(var(--foreground-color), 1);
     --grid-auto-flow: column;
-    justify-self: flex-start;
     z-index: 1;
 }
 scroll-tab-panels{
-    --height: max(24rem, 50vh);
-    --gap: 4rem;
     --background: transparent;
     overscroll-behavior: contain;
     & > *{
-        min-height: max(24rem, 50vh);
+        min-height: 100vh;
-        margin-bottom: 6rem;
+        padding-top: 4rem;
         opacity: 0.4;
         transition: opacity 0.6s;
     }
@@ -696,19 +701,29 @@ scroll-tab-panels{
     grid-template-columns: auto 1fr;
 }
 .room-button{
+    position: relative;
+    opacity: 0.6;
+    border-radius: 0;
     font-weight: 500;
     font-size: 1.1rem;
-    opacity: 0.6;
     transition: opacity 0.3s, background-color 0.3s;
     padding: 0.6rem 0.8rem;
     &[active]{
-        background-color: rgba(var(--text-color), 0.06);
         opacity: 1;
-        border-radius: 0.3rem;
         color: var(--accent-color);
         .icon{
             fill: var(--accent-color);
         }
+        &::after{
+            content: '';
+            position: absolute;
+            height: 0.1rem;
+            width: 100%;
+            bottom: 0;
+            left: 0;
+            border-radius: 0.2rem 0.2rem 0 0;
+            background: var(--accent-color);
+        }
     }
 
 }
@@ -857,7 +872,7 @@ table{
         width: 66%;
     }
     .outlet-preview__info{
-        padding: 2rem 3rem;
+        padding: 2rem;
     }
     .outlet-preview__carousel{
         padding: 2rem 2rem 5rem 2rem;
@@ -868,9 +883,6 @@ table{
     .outlet-hero-section{
         margin-top: 4rem;
     }
-    scroll-tab-header{
-        --grid-auto-flow: row;
-    }
     .auto-grid-layout{
         grid-template-columns: auto 1fr;
     }

index.html

@@ -139,15 +139,15 @@
                         <div class="elevator__floor-line"></div>
                     </div>
                     <div class="outlet-section page-link interact" data-target="bitbonds">
-                        <h3 class="h3 margin-bottom-0-5r">BitCoin Bonds</h3>
+                        <h3 class="h3 margin-bottom-0-5r">1. BitCoin Bonds</h3>
                         <p class="color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quae!</p>
                     </div>
                     <div class="outlet-section page-link interact" data-target="bob'sfund">
-                        <h3 class="h3 margin-bottom-0-5r">Bob's Fund</h3>
+                        <h3 class="h3 margin-bottom-0-5r">2. Bob's Fund</h3>
                         <p class="color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quae!</p>
                     </div>
                     <div class="outlet-section page-link interact" data-target="ico">
-                        <h3 class="h3 margin-bottom-0-5r">ICO</h3>
+                        <h3 class="h3 margin-bottom-0-5r">3. ICO</h3>
                         <p class="color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quae!</p>
                     </div>
                 </li>
@@ -210,13 +210,14 @@
                 <main id="floor_1__outlets" class="grid">
                     <div id="bit_bond_outlet" class="outlet-preview carousel-container">
                         <div class="grid outlet-preview__info">
+                            <div class="outlet-number">1</div>
                             <h3 class="outlet__title">bitcoin bonds</h3>
                             <p class="outlet__description margin-bottom-1-5r">
                                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.
                             </p>
                             <button class="button page-link outlet-preview__button" data-target="bitbonds">
                                 <span class="button__label">VISIT</span>
-                                <svg class="icon button__icon--right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16 12l-6 6V6z"/></svg>
+                                <svg class="icon button__icon--right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"/></svg>
                             </button>
                         </div>
                         <div class="grid carousel-holder carousel-holder--right">
@@ -226,13 +227,14 @@
                     </div>
                     <div id="bob_fund_outlet" class="outlet-preview carousel-container">
                         <div class="grid outlet-preview__info">
+                            <div class="outlet-number">2</div>
                             <h3 class="outlet__title">Bob's Fund</h3>
                             <p class="outlet__description margin-bottom-1-5r">
                                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.
                             </p>
                             <button class="button page-link outlet-preview__button" data-target="bob'sfund">
                                 <span class="button__label">VISIT</span>
-                                <svg class="icon button__icon--right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16 12l-6 6V6z"/></svg>
+                                <svg class="icon button__icon--right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"/></svg>
                             </button>
                         </div>
                         <div class="grid carousel-holder carousel-holder--left">
@@ -242,13 +244,14 @@
                     </div>
                     <div id="ico_outlet" class="outlet-preview carousel-container">
                         <div class="grid outlet-preview__info">
+                            <div class="outlet-number">3</div>
                             <h3 class="outlet__title">ICO</h3>
                             <p class="outlet__description margin-bottom-1-5r">
                                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit cumque sequi earum.
                             </p>
                             <button class="button page-link outlet-preview__button" data-target="ico">
                                 <span class="button__label">VISIT</span>
-                                <svg class="icon button__icon--right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16 12l-6 6V6z"/></svg>
+                                <svg class="icon button__icon--right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"/></svg>
                             </button>
                         </div>
                         <div class="grid carousel-holder carousel-holder--right">
@@ -296,10 +299,9 @@
                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>
             </button>
             <h2 class="h2 weight-700 margin-bottom-1r">BitCoin Bonds</h2>
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore nihil quisquam harum quo mollitia sunt!</p>
+            <p>lorem40 Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore nihil quisquam harum quo mollitia sunt!</p>
         </section>
         <h3 class="h3 margin-bottom-1r">Rooms</h3>
-        <div class="grid auto-grid-layout">
         <scroll-tab-header data-target="bit_bond_page_group" class="margin-bottom-1r">
             <button class="room-button">
                 <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M21,8c-1.45,0-2.26,1.44-1.93,2.51l-3.55,3.56c-0.3-0.09-0.74-0.09-1.04,0l-2.55-2.55C12.27,10.45,11.46,9,10,9 c-1.45,0-2.27,1.44-1.93,2.52l-4.56,4.55C2.44,15.74,1,16.55,1,18c0,1.1,0.9,2,2,2c1.45,0,2.26-1.44,1.93-2.51l4.55-4.56 c0.3,0.09,0.74,0.09,1.04,0l2.55,2.55C12.73,16.55,13.54,18,15,18c1.45,0,2.27-1.44,1.93-2.52l3.56-3.55 C21.56,12.26,23,11.45,23,10C23,8.9,22.1,8,21,8z"/><polygon points="15,9 15.94,6.93 18,6 15.94,5.07 15,3 14.08,5.07 12,6 14.08,6.93"/><polygon points="3.5,11 4,9 6,8.5 4,8 3.5,6 3,8 1,8.5 3,9"/></g></g></svg>
@@ -353,7 +355,6 @@
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga inventore error omnis ipsam ut incidunt, doloremque pariatur expedita distinctio itaque.
             </p>
         </scroll-tab-panels>
-        </div>
     </article>
 
     <article id="bob'sfund" class="page grid hide-completely">
@@ -367,7 +368,6 @@
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore nihil quisquam harum quo mollitia sunt!</p>
         </section>
         <h3 class="h3 margin-bottom-1r">Rooms</h3>
-        <div class="grid auto-grid-layout">
             <scroll-tab-header data-target="bob_fund_page_group" class="margin-bottom-1r">
                 <button class="room-button">
                     <svg class="icon button__icon--left" xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>People</title><path d='M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32'/><path d='M200 185.94c-2.34 32.48-26.72 58.06-53 58.06s-50.7-25.57-53-58.06C91.61 152.15 115.34 128 147 128s55.39 24.77 53 57.94z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M206 306c-18.05-8.27-37.93-11.45-59-11.45-52 0-102.1 25.85-114.65 76.2-1.65 6.66 2.53 13.25 9.37 13.25H154' fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/></svg>
@@ -391,7 +391,6 @@
                     <p id="bob_fund_info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi facere officiis eius iusto quibusdam tenetur illo blanditiis asperiores et corporis!</p>
                 </div>
             </scroll-tab-panels>
-        </div>
     </article>
 
     <article id="ico" class="page grid hide-completely">
@@ -405,7 +404,6 @@
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore nihil quisquam harum quo mollitia sunt!</p>
         </section>
         <h3 class="h3 margin-bottom-1r">Rooms</h3>
-        <div class="grid auto-grid-layout">
             <scroll-tab-header data-target="ico_page_group" class="margin-bottom-1r">
                 <button class="room-button" title="Investors">
                     <svg class="icon button__icon--left" xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>People</title><path d='M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32'/><path d='M200 185.94c-2.34 32.48-26.72 58.06-53 58.06s-50.7-25.57-53-58.06C91.61 152.15 115.34 128 147 128s55.39 24.77 53 57.94z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M206 306c-18.05-8.27-37.93-11.45-59-11.45-52 0-102.1 25.85-114.65 76.2-1.65 6.66 2.53 13.25 9.37 13.25H154' fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/></svg>
@@ -426,12 +424,12 @@
                 </div>
                 <ul id="ico_phase_list"></ul>
             </scroll-tab-panels>
-        </div>
     </article>
 
     <!--  -->
     <script src="components.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js"></script>
     <script id="standard_UI_functions">
 
         const domRefs = {}
@@ -857,7 +855,7 @@
     </script>
 
     <script>
-
+        gsap.registerPlugin(ScrollTrigger);
         const render = {
             bitBondRow(obj){
                 const {series, currentValue, timeElapsed} = obj
@@ -1437,9 +1435,9 @@
             easing: 'ease'
         }
 
-        const siteMapTimeline = gsap.timeline({defaults: {ease: 'power1'}, onReverseComplete: resumeScrolling, paused: true})
+        const siteMapTimeline = gsap.timeline({defaults: {ease: 'power2'}, onReverseComplete: resumeScrolling, paused: true})
         siteMapTimeline.from('#elevator_popup', {opacity: 0})
-        siteMapTimeline.from('.close-button', {scale: 0})
+                        .from('.close-button', {scale: 0}, '-= 0.2')
                         .from('#elevator_sections', {opacity: 0, y: 10})
                         .from('.outlet-section', {opacity: 0, x: 10, stagger: 0.1}, '-=0.1')