ico
/
pingql
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: bolder visual refresh — lighter card surfaces, visible borders, blue glow accents 

Cards now #141418 on #0a0a0a bg for actual contrast. Borders #232329 instead
of near-invisible rgba. Pricing cards have real tier hierarchy with Pro glow
and "Popular" badge. Buttons get blue gradient glow. Status dots glow visibly.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Nate 2026-03-19 12:21:43 +04:00
parent c1392a7dd9
commit 096bd186ea
4 changed files with 69 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
apps/web/src/dashboard/app.css
View File

@ -5,27 +5,26 @@ body {
/* ─── Dashboard card overrides ─── */ /* ─── Dashboard card overrides ─── */
.monitor-card { .monitor-card {
background: linear-gradient(180deg, rgba(17, 17, 17, 0.9) 0%, rgba(17, 17, 17, 0.7) 100%); background: #141418;
border: 1px solid rgba(38, 38, 44, 0.6); border: 1px solid #232329;
transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
} }
.monitor-card:hover { .monitor-card:hover {
border-color: rgba(55, 55, 64, 0.8); border-color: #3b82f680;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 20px rgba(59, 130, 246, 0.04); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(59, 130, 246, 0.06);
transform: translateY(-1px); transform: translateY(-1px);
} }
/* ─── Stat cards ─── */ /* ─── Stat cards ─── */
.stat-card { .stat-card {
background: linear-gradient(180deg, rgba(17, 17, 17, 0.9) 0%, rgba(17, 17, 17, 0.7) 100%); background: #141418;
border: 1px solid rgba(38, 38, 44, 0.6); border: 1px solid #232329;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
} }
/* ─── Table rows ─── */ /* ─── Table rows ─── */
.table-row-alt:nth-child(even) { .table-row-alt:nth-child(even) {
background: rgba(17, 17, 17, 0.3); background: #0e0e12;
} }
.table-row-alt:hover { .table-row-alt:hover {
background: rgba(30, 30, 36, 0.5); background: #1a1a1f;
} }

2
apps/web/src/dashboard/tailwind.css
View File

File diff suppressed because one or more lines are too long

60
apps/web/src/tailwind.css
View File

@ -5,87 +5,81 @@
@theme { @theme {
--color-brand: #3b82f6; --color-brand: #3b82f6;
--color-surface: rgba(17, 17, 17, 0.8); --color-surface: #141418;
--color-surface-hover: rgba(24, 24, 27, 0.9); --color-surface-hover: #1a1a1f;
--color-surface-solid: #111111; --color-surface-solid: #141418;
--color-border-subtle: rgba(38, 38, 44, 0.6); --color-border-subtle: #232329;
--color-border-strong: rgba(55, 55, 64, 0.8); --color-border-strong: #2e2e36;
--shadow-glow-sm: 0 0 20px rgba(59, 130, 246, 0.06); --shadow-glow-sm: 0 0 20px rgba(59, 130, 246, 0.08);
--shadow-glow-md: 0 0 40px rgba(59, 130, 246, 0.1); --shadow-glow-md: 0 0 40px rgba(59, 130, 246, 0.12);
--shadow-glow-green: 0 0 12px rgba(34, 197, 94, 0.3);
--shadow-glow-red: 0 0 12px rgba(239, 68, 68, 0.3);
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
--shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 20px rgba(59, 130, 246, 0.04);
} }
/* ─── Card base ─── */ /* ─── Card base ─── */
@layer components { @layer components {
.card { .card {
background: linear-gradient(180deg, rgba(17, 17, 17, 0.9) 0%, rgba(17, 17, 17, 0.7) 100%); background: #141418;
border: 1px solid rgba(38, 38, 44, 0.6); border: 1px solid #232329;
border-radius: 0.75rem; border-radius: 0.75rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
transition: border-color 0.2s, box-shadow 0.2s; transition: border-color 0.2s, box-shadow 0.2s;
} }
.card:hover { .card:hover {
border-color: rgba(55, 55, 64, 0.8); border-color: #3b82f6aa;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 20px rgba(59, 130, 246, 0.04); box-shadow: 0 0 24px rgba(59, 130, 246, 0.08);
} }
.card-static { .card-static {
background: linear-gradient(180deg, rgba(17, 17, 17, 0.9) 0%, rgba(17, 17, 17, 0.7) 100%); background: #141418;
border: 1px solid rgba(38, 38, 44, 0.6); border: 1px solid #232329;
border-radius: 0.75rem; border-radius: 0.75rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
} }
/* ─── Input focus glow ─── */ /* ─── Input focus glow ─── */
.input-base { .input-base {
background: rgba(17, 17, 17, 0.6); background: #0f0f12;
border: 1px solid rgba(38, 38, 44, 0.6); border: 1px solid #232329;
border-radius: 0.5rem; border-radius: 0.5rem;
transition: border-color 0.2s, box-shadow 0.2s; transition: border-color 0.2s, box-shadow 0.2s;
} }
.input-base:focus { .input-base:focus {
outline: none; outline: none;
border-color: rgba(59, 130, 246, 0.5); border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 0 20px rgba(59, 130, 246, 0.06); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15), 0 0 16px rgba(59, 130, 246, 0.1);
} }
/* ─── Buttons ─── */ /* ─── Buttons ─── */
.btn-primary { .btn-primary {
background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%); background: linear-gradient(180deg, #4f8ff7 0%, #2563eb 100%);
color: white; color: white;
font-weight: 500; font-weight: 500;
border-radius: 0.5rem; border-radius: 0.5rem;
transition: all 0.2s; transition: all 0.2s;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 12px rgba(59, 130, 246, 0.15);
} }
.btn-primary:hover { .btn-primary:hover {
background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%); background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 100%);
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1); box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3), 0 0 20px rgba(59, 130, 246, 0.2);
} }
.btn-secondary { .btn-secondary {
background: rgba(17, 17, 17, 0.6); background: #1a1a1f;
border: 1px solid rgba(38, 38, 44, 0.6); border: 1px solid #2e2e36;
color: #d1d5db; color: #d1d5db;
font-weight: 500; font-weight: 500;
border-radius: 0.5rem; border-radius: 0.5rem;
transition: all 0.2s; transition: all 0.2s;
} }
.btn-secondary:hover { .btn-secondary:hover {
background: rgba(24, 24, 27, 0.8); background: #222228;
border-color: rgba(55, 55, 64, 0.8); border-color: #3a3a44;
color: white; color: white;
} }
/* ─── Status dot glow ─── */ /* ─── Status dot glow ─── */
.dot-up { .dot-up {
background: #22c55e; background: #22c55e;
box-shadow: 0 0 8px rgba(34, 197, 94, 0.4); box-shadow: 0 0 10px rgba(34, 197, 94, 0.5), 0 0 4px rgba(34, 197, 94, 0.8);
} }
.dot-down { .dot-down {
background: #ef4444; background: #ef4444;
box-shadow: 0 0 8px rgba(239, 68, 68, 0.4); box-shadow: 0 0 10px rgba(239, 68, 68, 0.5), 0 0 4px rgba(239, 68, 68, 0.8);
} }
.dot-unknown { .dot-unknown {
background: #4b5563; background: #4b5563;
@ -93,6 +87,6 @@
/* ─── Section dividers ─── */ /* ─── Section dividers ─── */
.divider { .divider {
border-color: rgba(38, 38, 44, 0.4); border-color: #1e1e24;
} }
} }

49
apps/web/src/views/landing.ejs
View File

@ -27,15 +27,15 @@
/* Terminal window */ /* Terminal window */
.terminal { .terminal {
background: linear-gradient(180deg, #131313 0%, #0f0f0f 100%); background: #131316;
border: 1px solid rgba(38, 38, 44, 0.6); border: 1px solid #232329;
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
box-shadow: 0 0 60px rgba(59, 130, 246, 0.06), 0 20px 60px rgba(0,0,0,0.5); box-shadow: 0 0 80px rgba(59, 130, 246, 0.08), 0 25px 60px rgba(0,0,0,0.6);
} }
.terminal-bar { .terminal-bar {
background: #1a1a1a; background: #191920;
border-bottom: 1px solid rgba(38, 38, 44, 0.5); border-bottom: 1px solid #232329;
padding: 12px 16px; padding: 12px 16px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -75,13 +75,13 @@
/* Glow card */ /* Glow card */
.glow-card { .glow-card {
background: linear-gradient(180deg, rgba(17, 17, 17, 0.9) 0%, rgba(17, 17, 17, 0.7) 100%); background: #141418;
border: 1px solid rgba(38, 38, 44, 0.6); border: 1px solid #232329;
transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s; transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
} }
.glow-card:hover { .glow-card:hover {
border-color: rgba(59, 130, 246, 0.25); border-color: #3b82f650;
box-shadow: 0 0 30px rgba(59, 130, 246, 0.06), 0 4px 16px rgba(0, 0, 0, 0.3); box-shadow: 0 0 30px rgba(59, 130, 246, 0.1), 0 8px 24px rgba(0, 0, 0, 0.4);
transform: translateY(-2px); transform: translateY(-2px);
} }
@ -117,18 +117,33 @@
/* Pricing card tiers */ /* Pricing card tiers */
.pricing-free { .pricing-free {
background: linear-gradient(180deg, rgba(17, 17, 17, 0.9) 0%, rgba(17, 17, 17, 0.7) 100%); background: #141418;
border: 1px solid rgba(38, 38, 44, 0.6); border: 1px solid #232329;
} }
.pricing-pro { .pricing-pro {
background: linear-gradient(180deg, rgba(59, 130, 246, 0.08) 0%, rgba(17, 17, 17, 0.9) 100%); background: linear-gradient(180deg, #161a24 0%, #141418 100%);
border: 1px solid rgba(59, 130, 246, 0.3); border: 1px solid #3b82f650;
box-shadow: 0 0 40px rgba(59, 130, 246, 0.08); box-shadow: 0 0 40px rgba(59, 130, 246, 0.1), 0 0 80px rgba(59, 130, 246, 0.05);
position: relative;
}
.pricing-pro::before {
content: 'Popular';
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(180deg, #4f8ff7, #2563eb);
color: white;
font-size: 11px;
font-weight: 600;
padding: 2px 12px;
border-radius: 999px;
letter-spacing: 0.02em;
} }
.pricing-lifetime { .pricing-lifetime {
background: linear-gradient(180deg, rgba(234, 179, 8, 0.06) 0%, rgba(17, 17, 17, 0.9) 100%); background: linear-gradient(180deg, #1a1810 0%, #141418 100%);
border: 1px solid rgba(234, 179, 8, 0.25); border: 1px solid #eab30840;
box-shadow: 0 0 30px rgba(234, 179, 8, 0.05); box-shadow: 0 0 30px rgba(234, 179, 8, 0.06);
} }
</style> </style>
</head> </head>