setup workos

pipelines/web/static/styles.css

@@ -152,16 +152,35 @@ a {
   text-align: left;
 }
 
+.account-menu-panel form {
+  margin: 0.2rem 0 0;
+}
+
+.account-email {
+  color: var(--muted);
+  display: block;
+  font-size: 0.84rem;
+  padding: 0.3rem 0.1rem 0.55rem;
+}
+
 .account-menu-panel .sign-out {
   background: #0d5f53;
   border-color: #16806f;
   color: white;
 }
 
+.account-menu-panel .sign-out,
 .account-nav .sign-in {
   background: #0d5f53;
   border-color: #16806f;
+  border-radius: 7px;
   color: white;
+  cursor: pointer;
+  display: block;
+  font: inherit;
+  min-width: 100%;
+  padding: 0.55rem 0.8rem;
+  text-align: left;
 }
 
 .shell {
@@ -170,6 +189,140 @@ a {
   padding: 1.25rem 1.5rem 2rem;
 }
 
+.home-shell {
+  padding-top: 2rem;
+}
+
+.hero-panel,
+.home-grid,
+.admin-meta,
+.admin-actions {
+  display: grid;
+}
+
+.hero-panel {
+  gap: 1.4rem;
+  grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 0.85fr);
+}
+
+.hero-panel,
+.home-card,
+.admin-card {
+  background: color-mix(in srgb, var(--panel) 88%, transparent);
+  border: 1px solid var(--line);
+  border-radius: 18px;
+}
+
+.hero-copy,
+.hero-card,
+.home-card,
+.admin-card {
+  padding: 1.5rem 1.6rem;
+}
+
+.hero-copy h1 {
+  font-size: clamp(2.3rem, 4vw, 4.15rem);
+  letter-spacing: -0.04em;
+  line-height: 0.96;
+  margin: 0.2rem 0 0.9rem;
+  max-width: 12ch;
+}
+
+.hero-text {
+  color: #c0d3cd;
+  font-size: 1.02rem;
+  line-height: 1.65;
+  margin: 0;
+  max-width: 60ch;
+}
+
+.hero-actions,
+.admin-actions {
+  gap: 0.75rem;
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 1.35rem;
+}
+
+.hero-primary,
+.hero-secondary,
+.admin-actions a {
+  border-radius: 999px;
+  font-weight: 760;
+  min-height: 2.8rem;
+  padding: 0.78rem 1.15rem;
+}
+
+.hero-primary {
+  background: linear-gradient(120deg, #0d5f53, #2fbd9f);
+  color: white;
+}
+
+.hero-secondary,
+.admin-actions a {
+  border: 1px solid #1d554c;
+  color: #d0dfdb;
+}
+
+.hero-card h2,
+.home-card h2,
+.admin-card h2 {
+  margin-bottom: 0.65rem;
+}
+
+.hero-card ul {
+  color: #c0d3cd;
+  line-height: 1.6;
+  margin: 0;
+  padding-left: 1.1rem;
+}
+
+.home-grid {
+  gap: 1rem;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin-top: 1.25rem;
+}
+
+.home-card p,
+.admin-card p,
+.admin-meta dt {
+  color: var(--muted);
+}
+
+.auth-notice {
+  margin-bottom: 1rem;
+}
+
+.admin-card {
+  margin-top: 1.25rem;
+}
+
+.admin-meta {
+  gap: 0.85rem;
+  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+  margin: 1.2rem 0 1.1rem;
+}
+
+.admin-meta div {
+  background: rgba(12, 38, 33, 0.78);
+  border: 1px solid rgba(44, 123, 109, 0.28);
+  border-radius: 10px;
+  padding: 0.9rem 1rem;
+}
+
+.admin-meta dt {
+  font-size: 0.84rem;
+  margin-bottom: 0.35rem;
+  text-transform: uppercase;
+}
+
+.admin-meta dd {
+  margin: 0;
+}
+
 .login-shell {
   align-items: center;
   display: flex;
@@ -1122,7 +1275,9 @@ h2 {
   .rankings-grid,
   .topic-panels,
   .compare-card,
-  .login-panel {
+  .login-panel,
+  .hero-panel,
+  .home-grid {
     display: block;
   }
 
@@ -1212,4 +1367,9 @@ h2 {
     margin-bottom: 1rem;
     padding: 0 0 1rem;
   }
+
+  .hero-card,
+  .home-card + .home-card {
+    margin-top: 1rem;
+  }
 }