/** * UUI Template - Main Entry Point * Universal User Interface Template * Version: 1.0.0 * * A reusable glassmorphism design system with light/dark mode support. * Extracted from u.onl design system. * * Usage: * 1. Include this file in your HTML * 2. Add early theme script to prevent flash of content * 3. Include theme-utils.js before * * @see https://github.com/unregistry/uui-template */ /* Import all CSS modules */ @import url('./variables.css'); @import url('./core.css'); @import url('./glass.css'); @import url('./navigation.css'); @import url('./buttons.css'); @import url('./cards.css'); @import url('./sections.css'); @import url('./forms.css'); @import url('./footer.css'); @import url('./animations.css'); /* ======================================== ADDITIONAL UTILITIES ======================================== */ /* Inline icon helper */ .inline-icon { display: inline; width: 16px; height: 16px; vertical-align: middle; margin-right: 4px; } /* Badge subtext */ .badge-subtext { font-size: 12px; font-weight: 400; opacity: 0.9; } .badge-subtext a { color: var(--primary-gold); text-decoration: none; } .badge-subtext a:hover { text-decoration: underline; } /* Badge icon animation */ .badge-icon { font-size: 18px; animation: bounce 2s infinite; } /* Badge link styling */ .hero-badge-link { margin-top: 10px; margin-bottom: 40px; text-align: center; } .hero-badge-link a { font-size: 12px; font-weight: 400; color: var(--primary-gold); text-decoration: none; opacity: 0.9; } .hero-badge-link a:hover { text-decoration: underline; } /* Contact Section */ .contact { padding: 100px 0; background: linear-gradient(180deg, transparent, rgba(204, 153, 51, 0.02), transparent); } .contact-grid { display: flex; flex-direction: column; align-items: center; gap: 60px; } .contact-info { text-align: center; max-width: 600px; margin: 0 auto; } .contact-methods { display: flex; flex-direction: row; justify-content: center; gap: 20px; margin-top: 30px; flex-wrap: wrap; } .contact-method { display: flex; align-items: center; gap: 15px; padding: 20px 30px; text-decoration: none; color: var(--text-primary); transition: all 0.3s var(--transition); border-radius: 0; } .contact-method:hover { transform: translateY(-2px); box-shadow: var(--shadow-glass); } .contact-icon { width: 24px; height: 24px; color: var(--primary-gold); } /* Page load animation */ body { opacity: 0; transition: opacity 0.5s ease; } body.loaded { opacity: 1; } /* Responsive Design Breakpoints */ /* Ultra-Tiny (< 248px) */ @media (max-width: 247.98px) { .hero-title { font-size: clamp(18px, 10vw, 28px); } } /* Smartwatch (248px - 383px) */ @media (min-width: 248px) and (max-width: 383.98px) { /* Smartwatch-specific adjustments */ } /* Mobile (384px - 575px) */ @media (min-width: 384px) and (max-width: 575.98px) { /* Mobile-specific adjustments */ } /* Mobile Large (576px - 767px) */ @media (min-width: 576px) and (max-width: 767.98px) { /* Mobile large-specific adjustments */ } /* Tablet (768px - 991px) */ @media (min-width: 768px) and (max-width: 991.98px) { /* Tablet-specific adjustments */ } /* Desktop (992px - 1199px) */ @media (min-width: 992px) and (max-width: 1199.98px) { /* Desktop-specific adjustments */ } /* Large Desktop (1200px - 1535px) */ @media (min-width: 1200px) and (max-width: 1535.98px) { /* Large desktop-specific adjustments */ } /* HD Monitor (1536px - 2559px) */ @media (min-width: 1536px) and (max-width: 2559.98px) { /* HD monitor-specific adjustments */ } /* 4K TV (>= 2560px) */ @media (min-width: 2560px) { /* 4K-specific adjustments */ } /* ======================================== THEME-AWARE SHADOWS ======================================== */ /* Light theme shadows (white shadows) */ [data-theme="light"] .hero-badge { text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8); filter: drop-shadow(0px 2px 4px rgba(255, 255, 255, 0.8)); } [data-theme="light"] .hero-title .title-line, [data-theme="light"] .hero-description { text-shadow: 2px 2px 6px rgba(255, 255, 255, 0.8); filter: drop-shadow(0px 2px 6px rgba(255, 255, 255, 0.8)); } [data-theme="light"] .hero-stats .glass { box-shadow: 0px 4px 12px rgba(255, 255, 255, 0.6); filter: drop-shadow(0px 4px 12px rgba(255, 255, 255, 0.6)); } [data-theme="light"] .title-gradient { filter: drop-shadow(0px 2px 6px rgba(255, 255, 255, 0.8)); } /* Dark theme shadows (black shadows) */ [data-theme="dark"] .hero-badge { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.8)); } [data-theme="dark"] .hero-title .title-line, [data-theme="dark"] .hero-description { text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8); filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.8)); } [data-theme="dark"] .hero-stats .glass { box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.6); filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.6)); } [data-theme="dark"] .title-gradient { filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.8)); } /* ======================================== PRINT STYLES ======================================== */ @media print { .navbar, .footer, .mobile-menu, .mobile-menu-overlay, .theme-toggle, .nav-toggle, .cta-section, .contact-form { display: none !important; } body { background: white; color: black; } a { color: black; text-decoration: underline; } } /* ======================================== ACCESSIBILITY ======================================== */ /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Focus visible for keyboard navigation */ :focus-visible { outline: 2px solid var(--primary-gold); outline-offset: 2px; } /* High contrast mode support */ @media (prefers-contrast: high) { .glass { border: 2px solid var(--text-primary); } .btn-primary, .btn-secondary { border: 2px solid currentColor; } }