/* ============================================ GLASSMORPHISM DESIGN SYSTEM Optional glass layer for premium marketing designs. Inspired by modern app UIs with translucent, blurred surfaces. Usage: 1. Link this file after tokens.css in your HTML 2. Add class="glass-enabled" to for background mesh 3. Add data-theme="dark" to for dark mode ============================================ */ /* ─── 1. Glass Token System ──────────────────────────────────────────── */ :root { /* ── Glass Reflex Core Variables ─────────── */ --c-glass: #bbbbbc; --c-light: #fff; --c-dark: #000; --glass-reflex-dark: 1; --glass-reflex-light: 1; --saturation: 150%; /* ── Glass Derived Properties ────────────── */ --glass-bg: color-mix(in srgb, var(--c-glass) 12%, transparent); --glass-bg-card: color-mix(in srgb, var(--c-glass) 18%, transparent); --glass-radius: 16px; --glass-blur: blur(12px) saturate(var(--saturation)); /* ── Glass Transition Timing ─────────────── */ --glass-ease: cubic-bezier(1, 0, 0.4, 1); --glass-transition-duration: 400ms; } /* ─── 1b. Dark Mode Glass Overrides ──────────────────────────────────── */ [data-theme="dark"] { /* ── Glass Reflex System ─────────────────── */ --c-glass: #3a3f4b; --c-light: #ffffff; --c-dark: #000000; --glass-reflex-dark: 1.8; --glass-reflex-light: 0.5; --saturation: 120%; /* ── Glass Derived Properties ────────────── */ --glass-bg: color-mix(in srgb, var(--c-glass) 14%, transparent); --glass-bg-card: color-mix(in srgb, var(--c-glass) 22%, transparent); --glass-blur: blur(12px) saturate(var(--saturation)); } /* ─── 2. Background Mesh ──────────────────────────────────────────────── */ /* Multi-layered radial gradients provide depth for backdrop-filter to work. Without this mesh, glass blur has nothing to blur and looks flat. */ body.glass-enabled { background: radial-gradient(ellipse at 20% 50%, rgba(37, 99, 235, 0.06) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(124, 58, 237, 0.05) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, rgba(245, 158, 11, 0.04) 0%, transparent 50%), var(--color-gray-50, #fafafa); background-attachment: fixed; } /* Dark mode gradient mesh — deeper tones with slightly higher opacity */ [data-theme="dark"] body.glass-enabled { background: radial-gradient(ellipse at 20% 50%, rgba(100, 181, 246, 0.04) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(124, 58, 237, 0.03) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, rgba(66, 165, 245, 0.03) 0%, transparent 50%), var(--color-gray-900, #171717); background-attachment: fixed; } /* ─── 3. Glass Shadow System ──────────────────────────────────────────── */ /* 10-layer container shadow — signature glass reflex effect */ .glass-shadow { box-shadow: /* Light reflections (inset, top-left edges) */ inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent), inset 1.8px 3px 0 -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent), inset -2px -2px 0 -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent), inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent), /* Dark shadows (inset, bottom-right edges) */ inset -0.3px -1px 4px 0 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent), inset -1.5px 2.5px 0 -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 0 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), /* External drop shadows */ 0 1px 5px 0 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0 6px 16px 0 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent); } /* ─── 4. Core Glass Utilities ─────────────────────────────────────────── */ /* Glass card — full-weight translucent card with blur and reflex shadow. Use for: hero sections, feature cards, pricing tables, testimonials */ .glass-card { background-color: color-mix(in srgb, var(--c-glass) 18%, transparent); backdrop-filter: blur(12px) saturate(var(--saturation)); -webkit-backdrop-filter: blur(12px) saturate(var(--saturation)); border: 1px solid color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 20%), transparent); border-radius: var(--glass-radius); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent), inset 1.8px 3px 0 -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent), inset -2px -2px 0 -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent), inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent), inset -0.3px -1px 4px 0 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent), inset -1.5px 2.5px 0 -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 0 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0 1px 5px 0 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0 6px 16px 0 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent); transition: background-color var(--glass-transition-duration) var(--glass-ease), box-shadow var(--glass-transition-duration) var(--glass-ease), transform 200ms ease; } .glass-card:hover { background-color: color-mix(in srgb, var(--c-glass) 24%, transparent); transform: translateY(-2px); } /* Glass card flat — minimal variant with no backdrop-filter. Use when: cards inside a glass container that already has blur */ .glass-card-flat { background-color: color-mix(in srgb, var(--c-glass) 6%, transparent); border: 1px solid color-mix(in srgb, var(--c-dark) 6%, transparent); border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); transition: background-color var(--glass-transition-duration) var(--glass-ease), box-shadow var(--glass-transition-duration) var(--glass-ease), transform 200ms ease; } .glass-card-flat:hover { background-color: color-mix(in srgb, var(--c-glass) 12%, transparent); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); transform: translateY(-1px); } /* Glass container — lighter glass for section-level containers. Use for: layout sections that contain multiple cards */ .glass-container { background-color: color-mix(in srgb, var(--c-glass) 12%, transparent); backdrop-filter: blur(8px) saturate(var(--saturation)); -webkit-backdrop-filter: blur(8px) saturate(var(--saturation)); border: 1px solid color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 15%), transparent); border-radius: var(--glass-radius); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent), inset 1.8px 3px 0 -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent), inset -2px -2px 0 -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent), inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent), inset -0.3px -1px 4px 0 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent), inset -1.5px 2.5px 0 -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 0 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent), inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0 1px 5px 0 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent), 0 6px 16px 0 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent); transition: background-color var(--glass-transition-duration) var(--glass-ease), box-shadow var(--glass-transition-duration) var(--glass-ease); } /* Glass panel — for side sheets, modals, overlays. Use for: modal dialogs, slide-out panels, popover menus */ .glass-panel { background-color: color-mix(in srgb, var(--c-glass) 12%, transparent); backdrop-filter: blur(12px) saturate(var(--saturation)); -webkit-backdrop-filter: blur(12px) saturate(var(--saturation)); border: 1px solid color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 20%), transparent); border-radius: var(--glass-radius); } /* Glass input — translucent form field backgrounds. Use for: text inputs, textareas, select dropdowns */ .glass-input { background-color: color-mix(in srgb, var(--c-glass) 6%, transparent); border: 1px solid color-mix(in srgb, var(--c-dark) 12%, transparent); border-radius: 12px; padding: var(--space-3, 0.75rem) var(--space-4, 1rem); font-size: var(--text-base, 1rem); color: var(--color-gray-900, #171717); transition: border-color 200ms ease, box-shadow 200ms ease; } [data-theme="dark"] .glass-input { color: var(--color-gray-100, #f5f5f5); } .glass-input:focus { border-color: color-mix(in srgb, var(--color-primary, #2563eb) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #2563eb) 15%, transparent); outline: none; } .glass-input::placeholder { color: var(--color-gray-400, #a3a3a3); } /* Glass backdrop — soft overlay blur for modals. Use for: modal backgrounds, overlay dimming */ .glass-backdrop { background: rgba(0, 0, 0, 0.12); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } [data-theme="dark"] .glass-backdrop { background: rgba(0, 0, 0, 0.35); } /* Glass border utility — adds glass-style border to any element */ .glass-border { border: 1px solid color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 20%), transparent); } /* ─── 5. Animation Keyframes ──────────────────────────────────────────── */ /* Slide-in animation for panels and modals */ @keyframes slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .animate-slide-in-right { animation: slide-in-right 0.3s var(--glass-ease); } .animate-fade-in { animation: fade-in 0.2s ease-out; } /* Skeleton shimmer loading effect */ @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton-glass { background: linear-gradient( 90deg, color-mix(in srgb, var(--c-glass) 10%, transparent) 25%, color-mix(in srgb, var(--c-glass) 18%, transparent) 50%, color-mix(in srgb, var(--c-glass) 10%, transparent) 75% ); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-md, 0.5rem); } /* Loading spinner rotation */ @keyframes spin { to { transform: rotate(360deg); } } .loading-spinner-glass { display: inline-block; width: 20px; height: 20px; border: 2px solid color-mix(in srgb, var(--c-glass) 30%, transparent); border-top-color: var(--color-primary, #2563eb); border-radius: 50%; animation: spin 0.8s linear infinite; } /* Pulse animation for status indicators */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* ─── 6. Theme Toggle (Sun/Moon) ──────────────────────────────────────── */ /* Pure-CSS sun/moon morph animation using box-shadow manipulation. Unchecked = crescent moon (dark mode). Checked = sun (light mode). */ .theme-toggle { --size: 1.25rem; appearance: none; outline: none; cursor: pointer; width: var(--size); height: var(--size); box-shadow: inset calc(var(--size) * 0.33) calc(var(--size) * -0.25) 0; border-radius: 999px; color: hsl(240, 100%, 95%); border: none; background: transparent; padding: 0; transition: all 500ms; } .theme-toggle:checked { --ray-size: calc(var(--size) * -0.4); --offset-orthogonal: calc(var(--size) * 0.65); --offset-diagonal: calc(var(--size) * 0.45); transform: scale(0.75); color: hsl(40, 100%, 50%); box-shadow: inset 0 0 0 var(--size), calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size), var(--offset-orthogonal) 0 0 var(--ray-size), 0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size), 0 var(--offset-orthogonal) 0 var(--ray-size), calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0 var(--ray-size), var(--offset-diagonal) var(--offset-diagonal) 0 var(--ray-size), calc(var(--offset-diagonal) * -1) var(--offset-diagonal) 0 var(--ray-size), var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size); } /* ─── 7. Glass Button Variants ────────────────────────────────────────── */ .glass-btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem); font-size: var(--text-base, 1rem); font-weight: var(--font-medium, 500); border-radius: var(--radius-lg, 0.75rem); cursor: pointer; transition: all var(--glass-transition-duration) var(--glass-ease); border: 1px solid color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 20%), transparent); background-color: color-mix(in srgb, var(--c-glass) 12%, transparent); backdrop-filter: blur(8px) saturate(var(--saturation)); -webkit-backdrop-filter: blur(8px) saturate(var(--saturation)); color: var(--color-gray-900, #171717); } [data-theme="dark"] .glass-btn { color: var(--color-gray-100, #f5f5f5); } .glass-btn:hover { background-color: color-mix(in srgb, var(--c-glass) 20%, transparent); transform: translateY(-1px); box-shadow: 0 4px 12px color-mix(in srgb, var(--c-dark) 15%, transparent); } .glass-btn-primary { background-color: color-mix(in srgb, var(--color-primary, #2563eb) 85%, transparent); backdrop-filter: blur(8px) saturate(var(--saturation)); -webkit-backdrop-filter: blur(8px) saturate(var(--saturation)); color: white; border-color: var(--color-primary, #2563eb); } .glass-btn-primary:hover { background-color: var(--color-primary, #2563eb); }