Google Fonts — Nexa //free\\

.weight-label font-family: monospace; font-weight: 400; width: 100px; font-size: 1rem; color: #9aa5c0;

.w-400 font-weight: 400; .w-700 font-weight: 700; .w-800 font-weight: 800;

<div class="nexa-masterpiece">  <div class="hero"> <div class="hero-wordmark">NEXA</div> <div class="solid-accent"></div> <div class="hero-sub">SOLID · BOLD · GEOMETRIC</div> <p style="font-family: 'Nexa', sans-serif; font-weight: 400; margin-top: 2rem; max-width: 600px; color: #BCC6E0; font-size: 1.1rem;"> A singular typeface with uncompromising weight. <br> Solid structure meets modern character. </p> </div> google fonts nexa

// simple CSS keyframes for entrance (if needed) const styleSheet = document.createElement("style"); styleSheet.textContent = ` @keyframes fadeInUp from opacity: 0; transform: translateY(30px); to opacity: 1; transform: translateY(0); .hero-wordmark, .hero-sub, .solid-accent animation: fadeInUp 0.6s ease-out forwards; .hero-sub animation-delay: 0.1s; opacity: 0; animation-fill-mode: forwards; .solid-accent animation-delay: 0.2s; opacity: 0; animation-fill-mode: forwards; .nexa-card animation: fadeInUp 0.5s ease-out; animation-fill-mode: backwards; .nexa-card:nth-child(1) animation-delay: 0.05s; .nexa-card:nth-child(2) animation-delay: 0.15s; .nexa-card:nth-child(3) animation-delay: 0.25s; .solid-quote-block animation: fadeInUp 0.6s ease-out 0.1s backwards; .weight-spectrum animation: fadeInUp 0.5s ease-out 0.2s backwards; `; document.head.appendChild(styleSheet); </script> </body> </html>

<div class="section-title">⚡ solid spectrum | weight & expression</div> <div class="weight-spectrum"> <div class="spectrum-title">Nexa — From regular to ultra solid</div> <div class="weight-item"> <span class="weight-label">Nexa 400</span> <span class="weight-text w-400">The solid core of readability — regular weight with firm presence.</span> </div> <div class="weight-item"> <span class="weight-label">Nexa 700</span> <span class="weight-text w-700">Bold stance — confident, sturdy, and remarkably solid for any context.</span> </div> <div class="weight-item"> <span class="weight-label">Nexa 800</span> <span class="weight-text w-800">Heavy solid piece — maximum strength, unshakable typographic power.</span> </div> </div> .weight-label font-family: monospace

.spectrum-title font-family: 'Nexa', sans-serif; font-weight: 800; font-size: 1.8rem; margin-bottom: 1.8rem; text-align: center; color: #E8EDFF;

/* ========== GRID: SOLID PIECES OF TYPOGRAPHY ========== */ .section-title font-family: 'Nexa', sans-serif; font-weight: 800; font-size: 2.5rem; margin: 4rem 0 2rem 0; letter-spacing: -0.01em; border-left: 8px solid #F5C542; padding-left: 1.5rem; color: #F0F3FA; .w-400 font-weight: 400

.quote-author font-family: 'Nexa', sans-serif; font-weight: 400; margin-top: 1.5rem; font-size: 1.2rem; color: #BCC6E0; letter-spacing: 2px;