A showcase design and components used across h3 SLOP!
Body text - Lora Regular. This is the primary font used throughout the site, providing elegant serif typography that enhances readability and adds sophistication to the design.
Italic text - Lora Italic. Used for emphasis and quotes.
This is a card component with glass morphism effect, hover states, and smooth transitions.
Hover over cards to see the elevation effect and border color change.
Cards use backdrop-filter blur and semi-transparent backgrounds for a modern glass effect.
This component uses backdrop-filter blur, semi-transparent backgrounds, and subtle borders to create a modern glass morphism effect.
:root {
--primary-color: #0090ff;
--bg-primary: #000000;
--text-primary: #ffffff;
--glass: rgba(0, 144, 255, 0.15);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.8);
--radius-lg: 0.75rem;
--space-4: 1rem;
}