Techniques
Condensed All-Caps Display Block
Nike's signature headline — massive condensed type in ALL CAPS, tight-tracked, with a Swoosh-scale weight that forces readers to look up.
.nike-display {
font-family: 'Bebas Neue', 'Barlow Condensed', Impact, sans-serif;
font-size: clamp(3.5rem, 10vw, 7rem);
font-weight: 400;
line-height: 0.92;
letter-spacing: -0.02em;
text-transform: uppercase;
color: #FFFFFF;
text-wrap: balance;
}
.nike-display .line { display: block; }
.nike-display .line:nth-child(3) { margin-left: 0.08em; } /* asymmetric inset */
Volt Hover Punch
Hover state on primary CTAs and links: a hard snap to Volt-yellow with zero easing on the color change — the electric flash of a performance callout.
.nike-cta {
display: inline-flex;
align-items: center;
height: 48px;
padding: 0 24px;
background: #FFFFFF;
color: #111111;
border: 0;
border-radius: 0;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 0.875rem;
letter-spacing: 0.05em;
text-transform: uppercase;
transition: background-color 120ms cubic-bezier(0,0.55,0.45,1),
transform 250ms cubic-bezier(0.4,0,0.2,1);
}
.nike-cta:hover {
background: #CDDC39;
transform: translateY(-1px);
}
.nike-cta:focus-visible {
outline: 0;
box-shadow: 0 0 0 3px rgba(205,220,57,0.55);
}
Full-Bleed Hero with Corner-Anchored Type
Hero section: athlete photograph occupies the entire viewport, uppercase headline pinned to the bottom-left corner, tiny eyebrow above. The image gets a subtle dark gradient at the bottom to protect legibility without feeling soft.
.nike-hero {
position: relative;
width: 100%;
min-height: 88vh;
background: #000000 center/cover no-repeat;
overflow: hidden;
}
.nike-hero::after {
content: '';
position: absolute;
inset: auto 0 0 0;
height: 45%;
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
pointer-events: none;
}
.nike-hero__copy {
position: absolute;
left: clamp(24px, 4vw, 64px);
bottom: clamp(32px, 6vh, 96px);
max-width: 60ch;
color: #FFFFFF;
z-index: 1;
}
.nike-hero__eyebrow {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #CDDC39;
margin-bottom: 16px;
}