You've already forked zblade.dev
style(ui): remove uppercase text and refine typography
Remove text-transform: uppercase from headings, buttons, labels, and navigation. Reduce letter-spacing throughout for a cleaner look. Replace text-stroke outline effects with solid colors. Remove decorative hero background blocks and scanline animation. Simplify hover effects on logo and buttons.
This commit is contained in:
+27
-122
@@ -1,6 +1,6 @@
|
||||
/* ===== CSS Variables ===== */
|
||||
:root {
|
||||
/* Core Colors - High Contrast Terminal Aesthetic */
|
||||
/* Core Colors */
|
||||
--color-bg: #0f0f0f;
|
||||
--color-bg-secondary: #151515;
|
||||
--color-bg-elevated: #1a1a1a;
|
||||
@@ -113,8 +113,8 @@ a {
|
||||
}
|
||||
|
||||
.logo:hover .logo-image {
|
||||
filter: drop-shadow(0 0 8px rgba(0, 221, 119, 0.4));
|
||||
transform: scale(1.05);
|
||||
filter: drop-shadow(0 0 4px rgba(0, 221, 119, 0.3));
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
.logo-line-1,
|
||||
@@ -131,9 +131,7 @@ a {
|
||||
}
|
||||
|
||||
.logo-line-2 {
|
||||
color: transparent;
|
||||
-webkit-text-stroke: 1.5px var(--color-text);
|
||||
text-stroke: 1.5px var(--color-text);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.logo:hover .logo-line-1 {
|
||||
@@ -141,8 +139,7 @@ a {
|
||||
}
|
||||
|
||||
.logo:hover .logo-line-2 {
|
||||
-webkit-text-stroke: 1.5px var(--color-accent);
|
||||
text-stroke: 1.5px var(--color-accent);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.nav {
|
||||
@@ -154,8 +151,7 @@ a {
|
||||
color: var(--color-text-secondary);
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
letter-spacing: 0.02em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -188,8 +184,7 @@ a {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 700 !important;
|
||||
font-size: 0.85rem !important;
|
||||
text-transform: uppercase !important;
|
||||
letter-spacing: 0.08em !important;
|
||||
letter-spacing: 0.02em !important;
|
||||
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
|
||||
}
|
||||
|
||||
@@ -216,58 +211,7 @@ a {
|
||||
}
|
||||
|
||||
.hero-bg-elements {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.hero-block {
|
||||
position: absolute;
|
||||
background: linear-gradient(135deg, var(--color-accent) 0%, transparent 100%);
|
||||
opacity: 0.05;
|
||||
}
|
||||
|
||||
.hero-block-1 {
|
||||
top: -20%;
|
||||
right: -10%;
|
||||
width: 60%;
|
||||
height: 80%;
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
|
||||
.hero-block-2 {
|
||||
bottom: -30%;
|
||||
left: -15%;
|
||||
width: 50%;
|
||||
height: 70%;
|
||||
transform: rotate(-25deg);
|
||||
background: linear-gradient(135deg, var(--color-accent-alt) 0%, transparent 100%);
|
||||
}
|
||||
|
||||
.scanline {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 221, 119, 0.02) 0px,
|
||||
transparent 2px,
|
||||
transparent 4px
|
||||
);
|
||||
pointer-events: none;
|
||||
animation: scanline 10s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes scanline {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(20px); }
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
@@ -280,9 +224,8 @@ a {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-accent);
|
||||
letter-spacing: 0.2em;
|
||||
letter-spacing: 0.1em;
|
||||
margin-bottom: var(--space-md);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
@@ -296,7 +239,6 @@ a {
|
||||
font-weight: 900;
|
||||
line-height: 0.9;
|
||||
letter-spacing: -0.03em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.title-line-1 {
|
||||
@@ -304,9 +246,7 @@ a {
|
||||
}
|
||||
|
||||
.title-line-2 {
|
||||
color: transparent;
|
||||
-webkit-text-stroke: 2px var(--color-text);
|
||||
text-stroke: 2px var(--color-text);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.title-accent {
|
||||
@@ -331,8 +271,7 @@ a {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 0.4rem 0.8rem;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-bg-secondary);
|
||||
@@ -367,8 +306,7 @@ a {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
letter-spacing: 0.02em;
|
||||
border: 2px solid var(--color-accent);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@@ -414,8 +352,7 @@ a {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
letter-spacing: 0.02em;
|
||||
border: 2px solid var(--color-border);
|
||||
background: transparent;
|
||||
transition: all 0.3s ease;
|
||||
@@ -436,8 +373,7 @@ section {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-accent);
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.15em;
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
@@ -445,7 +381,6 @@ section {
|
||||
font-size: clamp(2.5rem, 6vw, 4rem);
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
@@ -465,8 +400,7 @@ section {
|
||||
}
|
||||
|
||||
.showcase-card .feature-num {
|
||||
-webkit-text-stroke: 1px var(--color-accent-blue);
|
||||
text-stroke: 1px var(--color-accent-blue);
|
||||
color: var(--color-accent-blue);
|
||||
}
|
||||
|
||||
.showcase-card .feature-tag {
|
||||
@@ -524,8 +458,7 @@ section {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: 2px solid var(--color-accent-blue);
|
||||
background: rgba(0, 212, 255, 0.1);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
letter-spacing: 0.05em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -703,9 +636,7 @@ section {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 3rem;
|
||||
font-weight: 900;
|
||||
color: transparent;
|
||||
-webkit-text-stroke: 1px var(--color-accent);
|
||||
text-stroke: 1px var(--color-accent);
|
||||
color: var(--color-text-tertiary);
|
||||
line-height: 1;
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
@@ -714,7 +645,6 @@ section {
|
||||
font-size: 2rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: var(--space-md);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
@@ -734,7 +664,7 @@ section {
|
||||
background: var(--color-accent);
|
||||
color: var(--color-bg);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.feature-row {
|
||||
@@ -780,8 +710,7 @@ section {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--space-sm);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.feature-item p {
|
||||
@@ -795,8 +724,7 @@ section {
|
||||
}
|
||||
|
||||
.feature-highlight .feature-num {
|
||||
-webkit-text-stroke: 1px var(--color-accent-alt);
|
||||
text-stroke: 1px var(--color-accent-alt);
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.feature-highlight::before {
|
||||
@@ -827,8 +755,7 @@ section {
|
||||
font-weight: 900;
|
||||
color: var(--color-bg);
|
||||
text-align: center;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* ===== Architecture Section ===== */
|
||||
@@ -938,7 +865,6 @@ section {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: var(--space-md);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
@@ -1020,7 +946,6 @@ section {
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
margin-bottom: var(--space-xl);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
@@ -1058,8 +983,7 @@ section {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
color: var(--color-text-secondary);
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
margin-bottom: var(--space-sm);
|
||||
}
|
||||
|
||||
@@ -1089,8 +1013,7 @@ section {
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.pricing-action {
|
||||
@@ -1104,8 +1027,7 @@ section {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
letter-spacing: 0.02em;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@@ -1167,7 +1089,6 @@ section {
|
||||
font-size: clamp(2.5rem, 6vw, 4rem);
|
||||
font-weight: 900;
|
||||
line-height: 1.1;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
@@ -1231,7 +1152,6 @@ section {
|
||||
.platform-name {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.02em;
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
@@ -1248,8 +1168,7 @@ section {
|
||||
font-size: 0.7rem;
|
||||
color: var(--color-text-tertiary);
|
||||
margin-top: var(--space-xs);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.platform-action {
|
||||
@@ -1257,8 +1176,7 @@ section {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-accent);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
letter-spacing: 0.05em;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
@@ -1322,8 +1240,7 @@ section {
|
||||
font-family: var(--font-mono);
|
||||
margin-bottom: var(--space-md);
|
||||
color: var(--color-accent);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.footer-section p {
|
||||
@@ -1478,17 +1395,9 @@ section {
|
||||
}
|
||||
|
||||
/* ===== Animations & Effects ===== */
|
||||
@keyframes pulse-glow {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 15px rgba(0, 221, 119, 0.2);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 25px rgba(0, 221, 119, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.feature-primary:hover {
|
||||
animation: pulse-glow 2s infinite;
|
||||
box-shadow: 0 0 20px rgba(0, 221, 119, 0.12);
|
||||
}
|
||||
|
||||
/* Reduced motion support */
|
||||
@@ -1500,8 +1409,4 @@ section {
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
|
||||
.scanline {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user