Under the Hood
This site preaches modern CSS. Here's every technique it actually uses, running right now, no jQuery, no Sass, no excuses.
position: sticky;
top: 0;
backdrop-filter: blur(24px) saturate(1.4);
background: var(--nav-bg);
}
backdrop-filter
Look up
The nav is frosted glass
Scroll down. Content blurs behind the nav as you go. No fake background image. No JavaScript scroll listener. One CSS property doing all of it.
More info →--text: light-dark(#1a1a2e, #e4e4e7);
--bg: light-dark(#f8f8fa, #0b0b0f);
--accent: light-dark(#7c3aed, #a78bfa);
}
light-dark()
Active on :root
One value for both themes
light-dark() takes two values. The browser picks based on the user's OS preference. No separate dark mode stylesheet. No class toggling for every color.
font-size: clamp(2.4rem, 5.5vw, 3.5rem);
}
/* min: 2.4rem, preferred: 5.5vw, max: 3.5rem */
clamp()
Resize the window
Typography that scales itself
The homepage heading grows and shrinks with the viewport. clamp() sets a floor, a preferred size, and a ceiling. No breakpoints. No media queries for type.
display: grid;
place-items: center;
}
/* child needs nothing. */
place-items: center
Used site-wide
Centering in two properties
The old way was position: absolute with transform: translate(-50%, -50%). Now it's display: grid + place-items: center. The child needs nothing.
font-family: 'Inter';
font-weight: 100 900;
src: url('inter.woff2');
}
font-weight: 100 900
Active on Inter
One font file for every weight
Inter is a variable font. One .woff2 file covers every weight from 100 to 900. Old approach: nine separate font files, nine separate requests, nine more things to fail.
font-family: 'Inter';
font-display: swap;
src: url('inter.woff2');
}
font-display: swap
No invisible text
Text shows before the font loads
font-display: swap tells the browser to render text in a fallback font immediately. When Inter finishes downloading, it swaps in. No blank page while fonts load.
0%, 100% { opacity: 1 }
50% { opacity: .3 }
}
.pulse-dot {
animation: pulse 2s ease-in-out infinite;
}
@keyframes
See above
The blinking dot is one animation
The green dot on this page fades in and out on a loop. One @keyframes rule, two opacity values, applied wherever needed with a single animation property.
color-scheme: dark;
}
:root.light {
color-scheme: light;
}
color-scheme
Active on :root
The browser knows this is a dark site
color-scheme tells the browser the page's default theme. Scrollbars, form inputs, and system UI elements all adapt. No manual overrides for every browser chrome detail.
--radius: 16px;
--accent: light-dark(#7c3aed, #a78bfa);
--border: light-dark(#d8d8e0, #25252f);
}
--custom-properties
Used everywhere
One place to change everything
Colors, radius, and spacing live in custom properties on :root. Changing the accent color means updating one value. Not hunting through 300 lines of stylesheet.
background: linear-gradient(135deg,
var(--accent), var(--pink), var(--orange));
background-clip: text;
-webkit-text-fill-color: transparent;
}
background-clip: text
Homepage heading
The gradient heading is CSS
The colorful heading on the homepage is a gradient background clipped to the text shape. No image. No SVG. The text itself acts as the mask, and the gradient shows through it.
display: flex;
gap: 12px;
}
/* works in grid too */
gap
Nav, cards, grids
Spacing without margin tricks
gap controls spacing between flex or grid children from the parent. No margin-right on every child. No :last-child { margin: 0 } fixes. The parent handles it.
position: sticky;
top: 0;
}
/* stays in flow. no JS needed. */
position: sticky
Look up
The nav sticks without JavaScript
Scroll this page. The nav stays at the top. position: sticky keeps it there. The element stays in the document flow, respects its container, and uses zero JavaScript.
text-wrap: balance;
}
/* no more orphaned single words */
text-wrap: balance
All headings
Headings that don't orphan single words
Without this, a heading can wrap so that one word sits alone on the last line. text-wrap: balance distributes text evenly across lines. No manual ­ or forced line breaks.
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
prefers-reduced-motion
All animations
Animations stop when the OS asks
Some users turn off motion in their OS settings due to vestibular disorders or personal preference. One media query at the end of the stylesheet collapses all transitions and animations to near-instant for those users.
More info →scroll-margin-top: 80px;
}
/* clears the sticky nav on anchor jump */
scroll-margin-top
Snippet sections
Anchor links clear the nav
Without this, clicking an anchor link on a sticky-nav page hides the top of the target section behind the nav. scroll-margin-top adds offset. No JavaScript scroll handler.