Luminous Effect Knowledge Card

Core Philosophy

Fuse the saturated order of printed materials with the futuristic feel of advanced glassmorphism to create crystal-clear digital artwork.

---

I. Visual & Layout

Page Blueprint

Strictly follow the four-section structure:

1. Header: Professional masthead.
2. Main Body: 4+8 asymmetric grid.
   • 4-column sidebar: Giant, outlined, hollow visual anchors.
   • 8-column core area: Compactly laid out glass cards.
3. Mid-Breaker Section: Full-width, stylized glass block.
4. Dark Footer: Must use dark background (#1f2937).

Core Style

Advanced Glassmorphism

• Page Background: Restrained glass-textured background with broad soft glow.
• Content Containers:
  • Blur: backdrop-filter: blur(20px+)
  • Border: 1px sharp highlight border.
  • Rounded Corners: Reduced (0.5rem - 0.75rem).
  • Shadows: Soft box-shadow + subtle inset shadow.

---

II. Design DNA

Typography System

Structural Contrast:

• Chinese: Noto Serif SC (large font size, bold weight 700+).
• English: Poppins (small font size, light weight 300).

Color System

Aura Gradients:

• Choose a bright, soft theme color.
• Apply as a translucent-to-transparent gradient subtly over glass card backgrounds.

Elements

• Icons: Font Awesome line-style (light/regular).
• Visual Flow (Recommended): Add abstract, soft guiding lines to the background.

---

III. Technical Specifications

• Deliverable: A single, self-contained HTML5 file.
• Tech Stack: TailwindCSS, Google Fonts, Font Awesome (all via CDN).
• Content: Primarily in Chinese, no omissions, no charts.
• Responsiveness: Prioritize 1200x1600 aspect ratio, ensure responsive design.