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

Browse Source 
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
co-authored by Claude Opus 4.6
parent c1392a7dd9
commit 096bd186ea
4 changed files with 69 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/views/landing.ejs
+32 -17
View File
@@ -27,15 +27,15 @@
/* Terminal window */
.terminal {
background: linear-gradient(180deg, #131313 0%, #0f0f0f 100%);
border: 1px solid rgba(38, 38, 44, 0.6);
background: #131316;
border: 1px solid #232329;
border-radius: 12px;
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 {
background: #1a1a1a;
border-bottom: 1px solid rgba(38, 38, 44, 0.5);
background: #191920;
border-bottom: 1px solid #232329;
padding: 12px 16px;
display: flex;
align-items: center;
@@ -75,13 +75,13 @@
/* Glow card */
.glow-card {
background: linear-gradient(180deg, rgba(17, 17, 17, 0.9) 0%, rgba(17, 17, 17, 0.7) 100%);
border: 1px solid rgba(38, 38, 44, 0.6);
background: #141418;
border: 1px solid #232329;
transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.glow-card:hover {
border-color: rgba(59, 130, 246, 0.25);
box-shadow: 0 0 30px rgba(59, 130, 246, 0.06), 0 4px 16px rgba(0, 0, 0, 0.3);
border-color: #3b82f650;
box-shadow: 0 0 30px rgba(59, 130, 246, 0.1), 0 8px 24px rgba(0, 0, 0, 0.4);
transform: translateY(-2px);
}
@@ -117,18 +117,33 @@
/* Pricing card tiers */
.pricing-free {
background: linear-gradient(180deg, rgba(17, 17, 17, 0.9) 0%, rgba(17, 17, 17, 0.7) 100%);
border: 1px solid rgba(38, 38, 44, 0.6);
background: #141418;
border: 1px solid #232329;
}
.pricing-pro {
background: linear-gradient(180deg, rgba(59, 130, 246, 0.08) 0%, rgba(17, 17, 17, 0.9) 100%);
border: 1px solid rgba(59, 130, 246, 0.3);
box-shadow: 0 0 40px rgba(59, 130, 246, 0.08);
background: linear-gradient(180deg, #161a24 0%, #141418 100%);
border: 1px solid #3b82f650;
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 {
background: linear-gradient(180deg, rgba(234, 179, 8, 0.06) 0%, rgba(17, 17, 17, 0.9) 100%);
border: 1px solid rgba(234, 179, 8, 0.25);
box-shadow: 0 0 30px rgba(234, 179, 8, 0.05);
background: linear-gradient(180deg, #1a1810 0%, #141418 100%);
border: 1px solid #eab30840;
box-shadow: 0 0 30px rgba(234, 179, 8, 0.06);
}
</style>
</head>