refactor(login-page): neutral title, outlined CTA, drop wordmark

- Title back to default text color (dropping the primary tint)
- Switch the CTA from a filled pill to an outlined pill: 1.5px primary
border, transparent background, color-mix tint on hover/active
- Remove the "Research Article Template Editor" wordmark for a cleaner
silhouette

Made-with: Cursor

backend/src/create-app.ts

@@ -59,37 +59,17 @@ function renderLoginPage({ title, description }: LoginPageOptions): string {
       --primary-color: oklch(0.75 0.12 47);
       --primary-color-hover: oklch(from var(--primary-color) calc(l - 0.06) c h);
       --primary-color-active: oklch(from var(--primary-color) calc(l - 0.10) c h);
-      --on-primary: #1a0f0a;
       --page-bg: #fafaf9;
       --text-color: #1a1a1a;
       --muted-color: rgba(0, 0, 0, .58);
-      --shadow-soft:
-        0 1px 1px rgba(0, 0, 0, .04),
-        0 4px 10px rgba(0, 0, 0, .04),
-        0 16px 32px rgba(0, 0, 0, .05);
-      --shadow-button:
-        inset 0 1px 0 rgba(255, 255, 255, .25),
-        inset 0 -1px 0 rgba(0, 0, 0, .12),
-        0 1px 2px rgba(0, 0, 0, .12),
-        0 6px 16px color-mix(in srgb, var(--primary-color) 30%, transparent);
-      --shadow-button-hover:
-        inset 0 1px 0 rgba(255, 255, 255, .3),
-        inset 0 -1px 0 rgba(0, 0, 0, .12),
-        0 2px 4px rgba(0, 0, 0, .14),
-        0 10px 26px color-mix(in srgb, var(--primary-color) 38%, transparent);
       --font-stack: "Source Sans Pro", -apple-system, BlinkMacSystemFont,
         "SF Pro Display", "SF Pro Text", "Segoe UI", system-ui, sans-serif;
     }
     @media (prefers-color-scheme: dark) {
       :root {
-        --on-primary: #0f1115;
         --page-bg: #0c0d10;
         --text-color: rgba(255, 255, 255, .92);
         --muted-color: rgba(255, 255, 255, .58);
-        --shadow-soft:
-          0 1px 1px rgba(0, 0, 0, .35),
-          0 4px 10px rgba(0, 0, 0, .35),
-          0 16px 32px rgba(0, 0, 0, .35);
       }
     }
     * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -125,7 +105,7 @@ function renderLoginPage({ title, description }: LoginPageOptions): string {
       width: 100%;
     }
     .login__title {
-      color: var(--primary-color);
+      color: var(--text-color);
       font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
       font-weight: 600;
       letter-spacing: -0.025em;
@@ -148,34 +128,25 @@ function renderLoginPage({ title, description }: LoginPageOptions): string {
       font-size: 1rem;
       font-weight: 600;
       letter-spacing: -0.005em;
-      color: var(--on-primary);
-      background: linear-gradient(
-        180deg,
-        color-mix(in srgb, var(--primary-color) 100%, white 8%),
-        var(--primary-color)
-      );
-      border: 0;
+      color: var(--text-color);
+      background: transparent;
+      border: 1.5px solid var(--primary-color);
       border-radius: 999px;
       text-decoration: none;
       cursor: pointer;
-      box-shadow: var(--shadow-button);
       transition:
         transform 180ms cubic-bezier(.2, .9, .3, 1),
-        box-shadow 180ms ease,
-        background 180ms ease;
+        background-color 180ms ease,
+        border-color 180ms ease;
     }
     .login__btn:hover {
       transform: translateY(-1px);
-      background: linear-gradient(
-        180deg,
-        color-mix(in srgb, var(--primary-color-hover) 100%, white 6%),
-        var(--primary-color-hover)
-      );
-      box-shadow: var(--shadow-button-hover);
+      background: color-mix(in srgb, var(--primary-color) 10%, transparent);
+      border-color: var(--primary-color-hover);
     }
     .login__btn:active {
       transform: translateY(0);
-      background: var(--primary-color-active);
+      background: color-mix(in srgb, var(--primary-color) 16%, transparent);
     }
     .login__btn:focus-visible {
       outline: 2px solid var(--primary-color);
@@ -184,15 +155,6 @@ function renderLoginPage({ title, description }: LoginPageOptions): string {
     .login__btn svg {
       flex-shrink: 0;
       display: block;
-      filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .15));
-    }
-    .login__brand {
-      margin-top: 56px;
-      font-size: 0.8125rem;
-      font-weight: 500;
-      letter-spacing: 0.02em;
-      color: var(--muted-color);
-      opacity: 0.85;
     }
   </style>
 </head>
@@ -204,7 +166,6 @@ function renderLoginPage({ title, description }: LoginPageOptions): string {
       ${HF_LOGO_SVG}
       <span>Sign in with Hugging Face</span>
     </a>
-    <p class="login__brand">Research Article Template Editor</p>
   </main>
 </body>
 </html>`;