Containers

Luminary UI follows the same convention as Pico CSS: <main> is a transparent layout shell, while <section> and <article> are glass content cards. No classes required.

<main> — Layout Shell

<main> is a transparent centering container. It does not receive glass styling — it simply centers your content and constrains the width. This is the correct semantic behavior since every page in an app is typically wrapped in a <main>.

<body>
  <main>
    <section>
      <h2>Page Content</h2>
      <p>Your page sections live inside main.</p>
    </section>
  </main>
</body>

<main> gets: max-width: 800px, width: 100%, margin: 0 auto. No background, no border-radius.

<section> and <article> — Glass Cards

These elements are the actual glass content containers. They receive: frosted glass background, specular depth shadows, rounded corners (--glass-radius-lg = 22px), and 2rem padding.

<main>
  <section>
    <h3>Section Container</h3>
    <p>This is a section element with glass styling.</p>
  </section>
</main>

Nested Hierarchy

When you nest <section>, <article>, or .glass-card inside each other, the inner container automatically adjusts its background opacity and blur to prevent “double frost”.

<section>
  <h3>Outer Section</h3>
  <p>This is the parent container.</p>
  <article>
    <h4>Nested Article</h4>
    <p>This inner container has thinner glass automatically.</p>
  </article>
</section>

CSS Details

Each <section> and <article> uses two core mixins:

• glass-material() — applies background, -webkit-backdrop-filter / backdrop-filter: blur() saturate(), and a 1px solid border
• glass-depth() — applies a multi-layer box-shadow with top-edge glare, bottom-edge shade, and ambient shadow

Content is constrained to max-width: 800px at the <main> level, which all children inherit.