CSS Style Guide & Full Specification

This document describes every value, rule, and design decision in the stylesheet so it can be replicated from scratch.

Overview

Glass UI. Everything is a frosted glass panel with heavy rounding borders are around 50 pxradius throughout. All colors are white. No other colors exist in the design.

3. Body

• Font family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
• overflow: scroll with overflow-x: hidden vertical scroll allowed, no horizontal scroll
• width: 100vw, height: 100vh

4. Background Container (.bg-container)

A fixed full-screen container that sits behind all content, used to hold a background element (video or iframe).

• position: fixed, top: 0, left: 0
• width: 100vw, height: 100vh
• overflow: hidden
• z-index: -1 pushed behind everything

The child .bg element fills it: width: 100%, height: 100%, border: none.

An element with id="svg-filters" is absolutely positioned at width: 0; height: 0 it holds invisible SVG filter definitions used elsewhere.

5. Glass Card System

Every glass-looking card is built from four stacked layers inside a container with position: relative, border-radius: 2rem, overflow: hidden, and box-shadow: 0 8px 32px rgba(0,0,0,0.3).

Layer 1 .glass-filter

• position: absolute; inset: 0; z-index: 0
• backdrop-filter: blur(10px) frosted glass blur
• filter: url(#lg-dist) applies an SVG distortion to mimic glass refraction
• isolation: isolate

Layer 2 .glass-overlay

• position: absolute; inset: 0; z-index: 1
• background: var(--lg-bg-color) the dark tinted fill

Layer 3 .glass-specular

• position: absolute; inset: 0; z-index: 2
• border-radius: inherit; overflow: hidden
• Two inset box shadows: inset 1px 1px 0 var(--lg-highlight) and inset 0 0 10px var(--lg-highlight) simulates light hitting the top-left edge of glass

Layer 4 .glass-content

• position: relative; z-index: 3 sits on top of all other layers
• Default padding: 50px 70px, text-align: center