choose type view

project/assets/app.js

@@ -7,6 +7,7 @@
 
 // any CSS you import will output into a single css file (app.css in this case)
 import './styles/global.less';
+import './styles/main.less';
 
 // start the Stimulus application
 import './bootstrap';

project/assets/styles/main.less

@@ -0,0 +1,93 @@
+.main-container {
+  font-family: 'Public Sans', system-ui, sans-serif;
+  color: #1C1C1A;
+  background: #EFEEE9;
+  min-height: 100vh;
+  padding: 56px 24px;
+  display: flex;
+  justify-content: center;
+  -webkit-font-smoothing: antialiased;
+}
+
+.card {
+  position: relative;
+  width: 100%;
+  max-width: 660px;
+  background: #FBFBF9;
+  border: 1px solid #E6E5E0;
+  border-radius: 18px;
+  padding: 36px 34px 42px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+}
+
+.badge {
+  position: absolute;
+  top: -13px;
+  left: 28px;
+  background: #1C1C1A;
+  color: #FBFBF9;
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 3px 10px;
+  border-radius: 6px;
+}
+
+.rail {
+  display: flex;
+  align-items: center;
+  margin-bottom: 28px;
+  .rail-step {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  .rail-dot {
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 12px;
+    font-weight: 600;
+    background: #FFFFFF;
+    color: #B7B6B0;
+    border: 1px solid #E0DFD9;
+  }
+  .rail-label {
+    font-size: 12.5px;
+    font-weight: 600;
+    color: #A6A5A0;
+  }
+  .rail-line {
+    flex: 1;
+    height: 1px;
+    background: #E0DFD9;
+    margin: 0 14px;
+    min-width: 24px;
+  }
+
+  &.is-done {
+    .rail-dot {
+      background: #E7EFE9;
+      color: #3F8F6B;
+      border-color: #CDE3D5;
+    }
+    .rail-label {
+      color: #3B3A36;
+    }
+  }
+  &.is-active{
+    .rail-dot {
+      background: #1C1C1A;
+      color: #FBFBF9;
+      border-color: #1C1C1A;
+    }
+    .rail-label {
+      color: #1C1C1A;
+    }
+  }
+}
+