diff --git a/site/style.css b/site/style.css index f8b93f4d..464320e1 100644 --- a/site/style.css +++ b/site/style.css @@ -437,6 +437,22 @@ nav { border: 1px solid var(--surface-3); background: var(--code-bg); text-align: left; + position: relative; +} + +.hero-terminal::before { + content: ''; + position: absolute; + inset: -1px; + border-radius: var(--radius-lg); + background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), transparent, rgba(168, 85, 247, 0.1)); + z-index: -1; + opacity: 0; + transition: opacity var(--duration-normal) var(--ease-out); +} + +.hero-terminal:hover::before { + opacity: 1; } .terminal-bar { @@ -490,6 +506,7 @@ nav { position: relative; z-index: 1; padding: var(--sp-20) 0; + text-align: center; } .features h2 { @@ -499,6 +516,20 @@ nav { letter-spacing: -0.02em; margin-bottom: var(--sp-12); color: var(--text-primary); + position: relative; + display: inline-block; +} + +.features h2::after { + content: ''; + position: absolute; + bottom: -8px; + left: 50%; + transform: translateX(-50%); + width: 60px; + height: 2px; + background: linear-gradient(90deg, transparent, var(--brand), transparent); + border-radius: 1px; } .feature-grid { @@ -514,6 +545,20 @@ nav { border-radius: var(--radius-lg); transition: all var(--duration-normal) var(--ease-out); transform: translateY(0); + position: relative; + overflow: hidden; +} + +.feature::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 2px; + background: linear-gradient(90deg, transparent, var(--brand), transparent); + opacity: 0; + transition: opacity var(--duration-normal) var(--ease-out); } .feature:hover { @@ -522,16 +567,31 @@ nav { transform: translateY(-4px); } +.feature:hover::before { + opacity: 1; +} + .feature-icon { - width: 48px; - height: 48px; + width: 52px; + height: 52px; display: flex; align-items: center; justify-content: center; - background: var(--brand-glow); + background: linear-gradient(135deg, var(--brand-glow), rgba(59, 130, 246, 0.05)); border-radius: var(--radius-md); margin-bottom: var(--sp-5); color: var(--brand); + border: 1px solid rgba(59, 130, 246, 0.15); + position: relative; +} + +.feature-icon::after { + content: ''; + position: absolute; + inset: -1px; + border-radius: var(--radius-md); + background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), transparent); + z-index: -1; } .feature h3 { @@ -617,16 +677,35 @@ nav { display: flex; gap: var(--sp-6); align-items: flex-start; + padding-bottom: var(--sp-8); + border-bottom: 1px solid rgba(255, 255, 255, 0.05); +} + +.why-item:last-child { + border-bottom: none; + padding-bottom: 0; } .why-number { flex-shrink: 0; font-family: var(--font-mono); - font-size: 0.85rem; - font-weight: 500; + font-size: 1rem; + font-weight: 600; color: var(--brand); padding-top: 0.15em; - min-width: 2rem; + min-width: 2.5rem; + position: relative; +} + +.why-number::after { + content: ''; + position: absolute; + left: 0; + top: 1.8em; + width: 1.5rem; + height: 1px; + background: linear-gradient(90deg, var(--brand), transparent); + opacity: 0.3; } .why-content h3 { @@ -668,33 +747,41 @@ nav { footer { position: relative; z-index: 1; - padding: var(--sp-8) 0; + padding: var(--sp-10) 0 var(--sp-8); border-top: 1px solid var(--surface-3); + background: linear-gradient(180deg, var(--surface-1), var(--surface-0)); } .footer-inner { display: flex; justify-content: space-between; align-items: center; + flex-wrap: wrap; + gap: var(--sp-4); } .footer-logo { font-weight: 700; - color: var(--text-tertiary); - font-size: 0.9rem; + color: var(--text-secondary); + font-size: 0.95rem; + display: flex; + align-items: center; + gap: var(--sp-2); } footer p { color: var(--text-tertiary); font-size: 0.85rem; + line-height: 1.5; } footer a { color: var(--text-secondary); + transition: color var(--duration-fast) var(--ease-out); } footer a:hover { - color: var(--text-primary); + color: var(--brand); } /* --- Animation states (set by anime.js) --- */ @@ -896,6 +983,7 @@ footer a:hover { .why-item { flex-direction: column; gap: var(--sp-2); + padding-bottom: var(--sp-6); } .why-number { @@ -978,3 +1066,86 @@ footer a:hover { min-width: calc(50% - var(--sp-4)); } } + +/* Mobile-specific enhancements */ +@media (max-width: 480px) { + .hero-badge { + font-size: 0.75rem; + padding: var(--sp-1) var(--sp-3); + } + + .hero h1 { + font-size: 1.75rem; + letter-spacing: -0.02em; + } + + .hero-sub { + font-size: 0.95rem; + line-height: 1.6; + } + + .btn { + padding: var(--sp-3) var(--sp-5); + font-size: 0.9rem; + } + + .btn-primary { + box-shadow: 0 0 0 0 var(--brand-glow-strong); + } + + .btn-primary:hover { + box-shadow: 0 0 16px 2px var(--brand-glow-strong); + } + + .feature { + padding: var(--sp-5); + } + + .feature-icon { + width: 44px; + height: 44px; + } + + .feature h3 { + font-size: 1rem; + } + + .feature p { + font-size: 0.88rem; + line-height: 1.6; + } + + .why-number { + font-size: 0.9rem; + min-width: 2rem; + } + + .why-content h3 { + font-size: 1rem; + } + + .why-content p { + font-size: 0.88rem; + line-height: 1.6; + } + + .final-cta h2 { + font-size: 1.5rem; + } + + .final-cta p { + font-size: 1rem; + } + + .footer-inner { + gap: var(--sp-3); + } + + .footer-logo { + font-size: 0.85rem; + } + + footer p { + font-size: 0.8rem; + } +}