feat: Current elevator closure layout

assets/css/colors.scss

@@ -19,3 +19,5 @@ $cool-black-15: #171f26;
 $cool-black-30: #2e3e4d;
 
 $normal-service-green: #145a06;
+
+$accessibility-blue: #165c96;

assets/css/elevator_v2.scss

@@ -1,3 +1,7 @@
+// Our Mimo elevator screens run Webview 83.
+// When writing styles for widgets on these screens,
+// verify browser compatibility in the MDN web docs.
+
 @import "https://rsms.me/inter/inter.css";
 @import "colors";
 @import "v2/lcd_common/screen_container";
@@ -8,6 +12,7 @@
 @import "v2/elevator/header";
 @import "v2/elevator/footer";
 @import "v2/lcd_common/route_pill";
+@import "v2/arrow";
 
 .evergreen-content-image__container,
 .evergreen-content-image__image {
@@ -23,3 +28,9 @@ body {
 .multi-screen-page {
   grid-auto-rows: 1920px;
 }
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}

assets/css/v2/elevator/closures/current_elevator_closed_view.scss

@@ -0,0 +1,128 @@
+.current-elevator-closed-view {
+  position: relative;
+  height: 100%;
+
+  .notch {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: inline-block;
+    border-right: 345px solid $accessibility-blue;
+    border-bottom: 300px solid transparent;
+  }
+
+  .header {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 528px;
+    padding-left: 48px;
+    font-weight: 700;
+
+    .icons {
+      margin-bottom: 21px;
+
+      .no-service-icon {
+        margin-right: 16px;
+      }
+    }
+
+    .closed-text {
+      margin-bottom: 18px;
+      font-size: 150px;
+      line-height: 150px;
+    }
+  }
+
+  hr.thin {
+    margin: 0 20px;
+  }
+
+  .accessible-path-container {
+    height: 984px;
+    padding: 48px;
+
+    .subheading-container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 142px;
+
+      .subheading {
+        align-self: center;
+      }
+
+      .arrow {
+        width: 100px;
+        height: 100px;
+      }
+    }
+
+    .alternate-direction-text {
+      color: $cool-black-30;
+
+      &.small {
+        font-size: 48px;
+        line-height: 64px;
+      }
+
+      &.medium {
+        font-size: 62px;
+        line-height: 80px;
+      }
+
+      &.large {
+        font-size: 80px;
+        line-height: 96px;
+      }
+    }
+
+    .map-container {
+      position: relative;
+      margin-top: 26px;
+      margin-left: -48px;
+
+      .map {
+        width: 1080px;
+      }
+    }
+  }
+
+  .paging-indicators {
+    position: absolute;
+    right: 0;
+    height: 120px;
+  }
+}
+
+.marker-container {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 116px;
+  height: 116px;
+
+  .marker-background,
+  .marker {
+    position: absolute;
+  }
+
+  .marker-background {
+    animation: pulse-ring 1.5s infinite;
+  }
+}
+
+@keyframes pulse-ring {
+  0% {
+    transform: scale(0.5);
+  }
+
+  60% {
+    opacity: 0.25;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}

assets/css/v2/elevator/closures/outside_closures_view.scss

@@ -0,0 +1,122 @@
+.outside-closures-view {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+
+  .in-station-summary {
+    display: flex;
+    justify-content: space-between;
+    padding: 24px 48px;
+    font-size: 48px;
+    font-weight: 400;
+    line-height: 64px;
+    color: $cool-black-30;
+
+    .text {
+      margin-right: 82px;
+    }
+  }
+
+  .outside-closure-list {
+    height: 100%;
+    background-color: $warm-neutral-90;
+
+    .header-container {
+      margin: 48px;
+      margin-bottom: 0;
+
+      .header {
+        display: flex;
+        max-height: 432px;
+        margin-bottom: 48px;
+        font-size: 112px;
+        font-weight: 700;
+        line-height: 112px;
+
+        &__title {
+          word-spacing: 9999px;
+        }
+      }
+    }
+
+    .closure-list-container {
+      overflow: hidden;
+
+      .closure-list {
+        display: flex;
+        flex-flow: column wrap;
+        height: 904px;
+        transform: translateX(calc(-100% * var(--closure-list-offset)));
+
+        .closure-row {
+          width: 1080px;
+          padding: 0 48px;
+
+          &__station-name {
+            font-size: 62px;
+            font-weight: 600;
+            line-height: 80px;
+            color: $cool-black-15;
+          }
+
+          &__name-and-pills {
+            display: flex;
+            align-items: center;
+            margin-bottom: 14px;
+
+            .route-pill {
+              width: 132px;
+              height: 68.13px;
+              margin-right: 24px;
+
+              &__text {
+                line-height: 68.13px;
+              }
+
+              &__icon {
+                height: 100%;
+              }
+
+              &__icon-image {
+                height: 100%;
+                margin-top: 0;
+              }
+            }
+          }
+
+          &__elevator-name {
+            line-height: 64px;
+          }
+
+          &__elevator-name.list-item {
+            display: list-item;
+            margin-bottom: 8px;
+            margin-left: 48px;
+          }
+        }
+      }
+    }
+
+    .paging-info-container {
+      position: absolute;
+      bottom: 0;
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      height: 72px;
+      margin-bottom: 20px;
+
+      .more-elevators-text {
+        align-self: center;
+        padding: 0 48px 20px;
+      }
+    }
+
+    .paging-info-container,
+    .closure-row__elevator-name {
+      font-size: 48px;
+      font-weight: 400;
+      color: $cool-black-30;
+    }
+  }
+}