dvorakmortonxd/freezmo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Gate polish round two: glows, disabled state, help link, modal

Browse source 
- Disabled Continue is now the primary style at 45% opacity with
  cursor: not-allowed; full opacity while validating and once text is
  entered.
- Move "How do I get a key?" below the Continue button (small ? icon,
  muted, underline on hover) and tighten input+button spacing.
- Shorten the subtitle to "One step to freeze your first deck." and
  balance it.
- Replace the faint gradient with two real blurred blobs (top-right and
  bottom-left, 120px blur, pointer-events: none, behind the card).
- Dark: page #0f0f0f, card #1a1a1a, 8% white border.
- Phone: 24px heading, 15px subtitle, wider card padding, 40px corner
  buttons with safe-area-aware offsets, robust 100dvh centering.
- Modal: 480px wide with text-pretty steps, stronger tinted free-tier
  callout, handle removed from the phone sheet.
- Tests: gate suite now 49 checks incl. disabled opacity, glow pseudo,
  card separation and help-link placement; new state screenshots for
  invalid/offline/validating in both themes.
This commit is contained in:
Martin Dvořák 2026-10-07 06:09:13 +00:00
commit 969f7a82a0
2 changed files with 62 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

51
app/globals.css
View file

@ -104,11 +104,12 @@
--sidebar-edge: 0 1px 0 var(--hairline), 6px 0 16px -14px rgb(13 13 13 / 0.28);
/* API-key gate: near-white stage with soft blank glows, tinted input. */
--gate-base: #f6f6f8;
--gate-glow-a: rgb(88 106 132 / 0.16);
--gate-glow-b: rgb(126 140 160 / 0.12);
--gate-glow-a: rgb(84 102 130 / 0.22);
--gate-glow-b: rgb(124 138 160 / 0.18);
--gate-card: #ffffff;
--gate-card-border: #e7e7e9;
--gate-callout-border: #d9d9dc;
--gate-callout-bg: #f2f2f5;
--gate-callout-border: #cfcfd6;
--field: #f3f3f4;
--field-border: #e2e2e4;
--shadow-gate: 0 28px 70px -36px rgb(13 13 13 / 0.3), 0 1px 2px rgb(13 13 13 / 0.05);
@ -134,12 +135,13 @@
--sidebar-bottom: #151515;
--sidebar-edge: 0 1px 0 var(--hairline), 6px 0 16px -14px rgb(0 0 0 / 0.75);
/* API-key gate: near-black stage, monochrome glows, raised input. */
--gate-base: #0c0c0d;
--gate-glow-a: rgb(255 255 255 / 0.14);
--gate-glow-b: rgb(255 255 255 / 0.09);
--gate-card: #171718;
--gate-base: #0f0f0f;
--gate-glow-a: rgb(255 255 255 / 0.17);
--gate-glow-b: rgb(255 255 255 / 0.12);
--gate-card: #1a1a1a;
--gate-card-border: rgb(255 255 255 / 0.08);
--gate-callout-border: rgb(255 255 255 / 0.2);
--gate-callout-bg: rgb(255 255 255 / 0.07);
--gate-callout-border: rgb(255 255 255 / 0.22);
--field: #242425;
--field-border: rgb(255 255 255 / 0.1);
--shadow-gate: 0 30px 80px -40px rgb(0 0 0 / 0.85), 0 1px 2px rgb(0 0 0 / 0.4);
@ -192,14 +194,33 @@ body {
background: transparent;
}
/* API-key gate stage: monochrome radial glows in opposite corners over a
near-black (dark) or near-white (light) base. Radial gradients are the
softest "blurred glow" available without extra layers. */
/* API-key gate stage: two big blurred blobs (top-right + bottom-left) over a
near-black (dark) or near-white (light) base. Real blurred elements read as
atmosphere; a flat radial gradient was too faint. Both blobs are decorative,
non-interactive and sit behind the card (z-index 0 vs the card's z-10). */
.gate-bg {
background:
radial-gradient(72rem 54rem at 108% -14%, var(--gate-glow-a), transparent 70%),
radial-gradient(64rem 48rem at -14% 112%, var(--gate-glow-b), transparent 72%),
var(--gate-base);
background: var(--gate-base);
}
.gate-bg::before,
.gate-bg::after {
content: "";
position: absolute;
z-index: 0;
width: 48rem;
height: 48rem;
border-radius: 9999px;
filter: blur(120px);
pointer-events: none;
}
.gate-bg::before {
top: -20rem;
right: -16rem;
background: var(--gate-glow-a);
}
.gate-bg::after {
bottom: -20rem;
left: -16rem;
background: var(--gate-glow-b);
}
.app-backdrop {