/* ========================================================================= AutoHex Alumni — Material You (MD3) Theme Minimal · Glowing · Professional · Playful ========================================================================= */ /* ------------------------------------------------------------------------- 1. DESIGN TOKENS ------------------------------------------------------------------------- */ :root { /* Tonal palette (purple seed #6750A4) */ --md-primary: #6750A4; --md-on-primary: #FFFFFF; --md-primary-container: #EADDFF; --md-on-primary-container: #21005D; --md-secondary: #625B71; --md-on-secondary: #FFFFFF; --md-secondary-container: #E8DEF8; --md-on-secondary-container: #1D192B; --md-tertiary: #7D5260; --md-on-tertiary: #FFFFFF; --md-tertiary-container: #FFD8E4; --md-on-tertiary-container: #31111D; --md-error: #B3261E; --md-success: #146C2E; --md-warning: #815B00; --md-info: #1F6FB2; /* Surfaces — never pure white */ --md-background: #FFFBFE; --md-on-background: #1C1B1F; --md-surface: #FFFBFE; --md-surface-dim: #DED8E1; --md-surface-bright: #FFF8F8; --md-surface-container-lowest: #FFFFFF; --md-surface-container-low: #F7F2FA; --md-surface-container: #F3EDF7; --md-surface-container-high: #ECE6F0; --md-surface-container-highest: #E6E0E9; --md-on-surface: #1C1B1F; --md-on-surface-variant: #49454F; --md-outline: #79747E; --md-outline-variant: #CAC4D0; /* Shape */ --md-shape-xs: 8px; --md-shape-sm: 12px; --md-shape-md: 16px; --md-shape-lg: 24px; --md-shape-xl: 28px; --md-shape-xxl: 36px; --md-shape-pill: 9999px; /* Elevation */ --md-elev-1: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(103,80,164,0.06); --md-elev-2: 0 2px 6px rgba(0,0,0,0.06), 0 1px 2px rgba(103,80,164,0.10); --md-elev-3: 0 6px 16px rgba(103,80,164,0.12), 0 2px 4px rgba(0,0,0,0.06); --md-elev-4: 0 12px 28px rgba(103,80,164,0.18), 0 4px 8px rgba(0,0,0,0.08); --md-elev-5: 0 24px 48px rgba(103,80,164,0.22), 0 8px 16px rgba(0,0,0,0.10); /* Motion — Material You signature easing */ --md-ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --md-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --md-dur-short: 150ms; --md-dur-medium: 300ms; --md-dur-long: 500ms; /* Bridges from CMS variables (set inline in ) */ --primary-color: var(--md-primary); --secondary-color: var(--md-tertiary); } /* ------------------------------------------------------------------------- 2. BASE ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Roboto', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 400; color: var(--md-on-surface); background: var(--md-background); /* Subtle radial atmosphere */ background-image: radial-gradient(circle at 0% -10%, rgba(103,80,164,0.10) 0%, transparent 45%), radial-gradient(circle at 100% 0%, rgba(125,82,96,0.08) 0%, transparent 50%); background-attachment: fixed; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Typography scale */ h1, h2, h3, h4, h5, h6 { font-family: 'Roboto', system-ui, sans-serif; font-weight: 500; letter-spacing: -0.01em; color: var(--md-on-surface); line-height: 1.25; } h1, .display-1, .display-2, .display-3, .display-4 { font-weight: 500; letter-spacing: -0.02em; } .display-1 { font-size: clamp(2.5rem, 5vw, 3.75rem); } .display-2 { font-size: clamp(2.25rem, 4.5vw, 3.25rem); } .display-3 { font-size: clamp(2rem, 4vw, 2.75rem); } .display-4 { font-size: clamp(1.75rem, 3.5vw, 2.25rem); } .lead { font-weight: 400; color: var(--md-on-surface-variant); } a { color: var(--md-primary); text-decoration: none; transition: color var(--md-dur-short) var(--md-ease-standard); } a:hover { color: var(--md-on-primary-container); } ::selection { background: var(--md-primary-container); color: var(--md-on-primary-container); } /* ------------------------------------------------------------------------- 3. NAVBAR — frosted glass with state layer pills ------------------------------------------------------------------------- */ .navbar { background: rgba(255, 251, 254, 0.72) !important; backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid rgba(202, 196, 208, 0.4); padding: 0.7rem 0; transition: box-shadow var(--md-dur-medium) var(--md-ease-standard), background var(--md-dur-medium) var(--md-ease-standard); } .navbar.scrolled { box-shadow: var(--md-elev-2); background: rgba(255, 251, 254, 0.92) !important; } .navbar-brand { font-weight: 500; font-size: 1.15rem; color: var(--md-on-surface) !important; display: inline-flex; align-items: center; gap: 0.55rem; } .navbar-brand i { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: var(--md-primary-container); color: var(--md-on-primary-container); border-radius: var(--md-shape-md); font-size: 1.15rem; margin-right: 0 !important; transition: transform var(--md-dur-medium) var(--md-ease-emphasized); } .navbar-brand:hover i { transform: rotate(-6deg) scale(1.05); } .navbar-nav .nav-link { position: relative; color: var(--md-on-surface-variant) !important; font-weight: 500; font-size: 0.92rem; padding: 0.55rem 1rem !important; margin: 0 0.15rem; border-radius: var(--md-shape-pill); transition: all var(--md-dur-medium) var(--md-ease-standard); } .navbar-nav .nav-link:hover { color: var(--md-on-primary-container) !important; background: rgba(103, 80, 164, 0.08); } .navbar-nav .nav-link.active { color: var(--md-on-primary-container) !important; background: var(--md-secondary-container); } .dropdown-menu { border: none; border-radius: var(--md-shape-md); box-shadow: var(--md-elev-3); background: var(--md-surface-container-low); padding: 0.5rem; margin-top: 0.5rem !important; animation: md-dropdown-in var(--md-dur-medium) var(--md-ease-emphasized); } @keyframes md-dropdown-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .dropdown-item { border-radius: var(--md-shape-sm); padding: 0.55rem 0.85rem; color: var(--md-on-surface); transition: background var(--md-dur-short) var(--md-ease-standard); } .dropdown-item:hover, .dropdown-item:focus { background: rgba(103,80,164,0.08); color: var(--md-on-primary-container); } .navbar-toggler { border: 1px solid var(--md-outline-variant); border-radius: var(--md-shape-pill); padding: 0.4rem 0.7rem; } .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(103,80,164,0.18); } /* ------------------------------------------------------------------------- 4. BUTTONS — pill-shaped, tactile, glowing ------------------------------------------------------------------------- */ .btn { font-family: inherit; font-weight: 500; font-size: 0.95rem; letter-spacing: 0.01em; border-radius: var(--md-shape-pill) !important; padding: 0.65rem 1.5rem; border: none; position: relative; overflow: hidden; transition: transform var(--md-dur-short) var(--md-ease-emphasized), box-shadow var(--md-dur-medium) var(--md-ease-standard), background var(--md-dur-medium) var(--md-ease-standard), color var(--md-dur-medium) var(--md-ease-standard); isolation: isolate; } .btn:active { transform: scale(0.96); } .btn:focus-visible { outline: 3px solid rgba(103,80,164,0.35); outline-offset: 2px; } /* Ripple-like shimmer */ .btn::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.35), transparent 60%); opacity: 0; transition: opacity var(--md-dur-medium) var(--md-ease-standard); z-index: -1; } .btn:hover::before { opacity: 1; } .btn-lg { padding: 0.85rem 1.85rem; font-size: 1rem; } .btn-sm { padding: 0.45rem 1.1rem; font-size: 0.85rem; } /* Primary (filled) */ .btn-primary, .btn-primary-custom { background: var(--md-primary) !important; color: var(--md-on-primary) !important; box-shadow: var(--md-elev-1); } .btn-primary:hover, .btn-primary-custom:hover { background: #5A4691 !important; color: var(--md-on-primary) !important; box-shadow: var(--md-elev-3), 0 0 24px rgba(103,80,164,0.35); transform: translateY(-1px); } /* Secondary / tonal */ .btn-secondary, .btn-tonal { background: var(--md-secondary-container) !important; color: var(--md-on-secondary-container) !important; box-shadow: none; } .btn-secondary:hover, .btn-tonal:hover { background: #DDD0F0 !important; color: var(--md-on-secondary-container) !important; box-shadow: var(--md-elev-2); transform: translateY(-1px); } /* Outline */ .btn-outline-primary { background: transparent !important; color: var(--md-primary) !important; border: 1.5px solid var(--md-outline) !important; } .btn-outline-primary:hover { background: rgba(103,80,164,0.08) !important; color: var(--md-primary) !important; border-color: var(--md-primary) !important; } .btn-outline-light { background: rgba(255,255,255,0.10) !important; color: #FFFFFF !important; border: 1.5px solid rgba(255,255,255,0.55) !important; backdrop-filter: blur(6px); } .btn-outline-light:hover { background: rgba(255,255,255,0.22) !important; color: #FFFFFF !important; border-color: #FFFFFF !important; box-shadow: 0 0 32px rgba(255,255,255,0.25); } .btn-light { background: #FFFFFF !important; color: var(--md-primary) !important; box-shadow: var(--md-elev-2); } .btn-light:hover { background: var(--md-primary-container) !important; color: var(--md-on-primary-container) !important; box-shadow: var(--md-elev-3), 0 0 28px rgba(255,255,255,0.4); transform: translateY(-1px); } .btn-success { background: var(--md-success) !important; color: #fff !important; } .btn-danger { background: var(--md-error) !important; color: #fff !important; } .btn-warning { background: var(--md-warning) !important; color: #fff !important; } .btn-info { background: var(--md-info) !important; color: #fff !important; } /* FAB-style */ .btn-fab { width: 56px; height: 56px; padding: 0; border-radius: var(--md-shape-md) !important; background: var(--md-tertiary) !important; color: var(--md-on-tertiary) !important; box-shadow: var(--md-elev-3); display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; } .btn-fab:hover { box-shadow: var(--md-elev-4); transform: translateY(-2px); } /* ------------------------------------------------------------------------- 5. HERO ------------------------------------------------------------------------- */ .hero-section { position: relative; min-height: 92vh; padding: 8rem 0 6rem; background: radial-gradient(circle at 20% 20%, rgba(234,221,255,0.65) 0%, transparent 45%), radial-gradient(circle at 80% 80%, rgba(255,216,228,0.55) 0%, transparent 50%), linear-gradient(135deg, #21005D 0%, #6750A4 55%, #7D5260 100%); color: #fff; overflow: hidden; isolation: isolate; } .hero-section[style*="background-image"] { background-blend-mode: overlay !important; } .hero-section::before { /* glowing aura */ content: ''; position: absolute; top: -20%; right: -10%; width: 50vw; height: 50vw; background: radial-gradient(circle, rgba(234,221,255,0.40), transparent 65%); filter: blur(80px); z-index: -1; animation: md-float 14s ease-in-out infinite; } .hero-section::after { content: ''; position: absolute; bottom: -25%; left: -10%; width: 55vw; height: 55vw; background: radial-gradient(circle, rgba(255,216,228,0.35), transparent 65%); filter: blur(90px); z-index: -1; animation: md-float 18s ease-in-out infinite reverse; } @keyframes md-float { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px, -30px) scale(1.08); } } .hero-title { font-weight: 500; letter-spacing: -0.025em; background: linear-gradient(135deg, #FFFFFF 0%, #EADDFF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; animation: md-rise 800ms var(--md-ease-emphasized) both; } .hero-subtitle { font-size: 1.15rem; color: rgba(255,255,255,0.88); max-width: 720px; animation: md-rise 800ms 100ms var(--md-ease-emphasized) both; } .hero-content > * + * { margin-top: 1rem; } .hero-content .d-flex { animation: md-rise 800ms 200ms var(--md-ease-emphasized) both; } @keyframes md-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ------------------------------------------------------------------------- 6. SECTIONS ------------------------------------------------------------------------- */ .section-padding { padding: 5rem 0; } @media (max-width: 768px) { .section-padding { padding: 3rem 0; } } .section-title { position: relative; font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.25rem); margin-bottom: 1.25rem; color: var(--md-on-surface); } .section-title::after { content: ''; display: block; width: 56px; height: 4px; background: linear-gradient(90deg, var(--md-primary), var(--md-tertiary)); border-radius: var(--md-shape-pill); margin-top: 0.85rem; } .text-center .section-title::after { margin-left: auto; margin-right: auto; } .bg-light, .bg-light-custom { background: var(--md-surface-container) !important; } .bg-primary, .bg-primary-custom { background: linear-gradient(135deg, var(--md-primary) 0%, #4F378B 100%) !important; color: #fff !important; border-radius: var(--md-shape-xxl); } /* ------------------------------------------------------------------------- 7. CARDS ------------------------------------------------------------------------- */ .card, .card-custom { border: none; background: var(--md-surface-container-lowest); border-radius: var(--md-shape-lg) !important; box-shadow: var(--md-elev-1); overflow: hidden; transition: transform var(--md-dur-medium) var(--md-ease-emphasized), box-shadow var(--md-dur-medium) var(--md-ease-standard); position: relative; } .card::before { /* subtle outline tint */ content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(202, 196, 208, 0.5); pointer-events: none; } .card:hover, .card-custom:hover { transform: translateY(-4px); box-shadow: var(--md-elev-4); } .card-title { font-weight: 500; color: var(--md-on-surface); } .card-text { color: var(--md-on-surface-variant); } .card-img-top { border-top-left-radius: var(--md-shape-lg); border-top-right-radius: var(--md-shape-lg); object-fit: cover; aspect-ratio: 16 / 10; } /* Featured cards lift higher */ .card.is-featured, .card-featured { transform: translateY(-6px); box-shadow: var(--md-elev-3); } .card.is-featured:hover { transform: translateY(-10px); box-shadow: var(--md-elev-5); } /* Icon medallions inside cards */ .card .display-4.bi, .card .display-5.bi, .card i.display-4, .card i.display-5 { display: inline-flex; width: 72px; height: 72px; align-items: center; justify-content: center; background: var(--md-secondary-container); color: var(--md-on-secondary-container) !important; border-radius: var(--md-shape-md); font-size: 2rem !important; margin-bottom: 1rem; transition: transform var(--md-dur-medium) var(--md-ease-emphasized), background var(--md-dur-medium) var(--md-ease-standard); } .card:hover .display-4.bi, .card:hover i.display-4, .card:hover .display-5.bi, .card:hover i.display-5 { transform: rotate(-4deg) scale(1.06); background: var(--md-primary-container); color: var(--md-on-primary-container) !important; } /* ------------------------------------------------------------------------- 8. BADGES & CHIPS ------------------------------------------------------------------------- */ .badge { font-weight: 500; letter-spacing: 0.02em; padding: 0.4em 0.85em; border-radius: var(--md-shape-pill) !important; font-size: 0.72rem; } .bg-primary { background: var(--md-primary) !important; color: #fff !important; } .bg-secondary { background: var(--md-secondary-container) !important; color: var(--md-on-secondary-container) !important; } .bg-success { background: #B6F2C7 !important; color: #0B4D1A !important; } .bg-danger { background: #F9DEDC !important; color: #410E0B !important; } .bg-warning { background: #FCE5A2 !important; color: #4A2D00 !important; } .bg-info { background: #CCE5F8 !important; color: #002D52 !important; } /* ------------------------------------------------------------------------- 9. FORMS ------------------------------------------------------------------------- */ .form-control, .form-select { background: var(--md-surface-container-low); border: 1px solid transparent; border-bottom: 1.5px solid var(--md-outline); border-radius: var(--md-shape-sm) var(--md-shape-sm) 0 0; padding: 0.85rem 1rem; color: var(--md-on-surface); font-size: 0.95rem; transition: all var(--md-dur-medium) var(--md-ease-standard); } .form-control:focus, .form-select:focus { background: var(--md-surface-container); border-bottom-color: var(--md-primary); border-bottom-width: 2px; box-shadow: 0 6px 16px rgba(103,80,164,0.10); outline: none; } .form-control::placeholder { color: var(--md-on-surface-variant); opacity: 0.7; } .form-label { font-weight: 500; color: var(--md-on-surface-variant); font-size: 0.88rem; margin-bottom: 0.4rem; } /* ------------------------------------------------------------------------- 10. ALERTS ------------------------------------------------------------------------- */ .alert { border: none; border-radius: var(--md-shape-md); padding: 1rem 1.25rem; box-shadow: var(--md-elev-1); font-weight: 500; } .alert-success { background: #B6F2C7; color: #0B4D1A; } .alert-danger, .alert-error { background: #F9DEDC; color: #410E0B; } .alert-warning { background: #FCE5A2; color: #4A2D00; } .alert-info { background: var(--md-secondary-container); color: var(--md-on-secondary-container); } /* ------------------------------------------------------------------------- 11. PAGE HEADER (subtitle banner) ------------------------------------------------------------------------- */ section.bg-primary.text-white.py-5.mt-5 { background: linear-gradient(135deg, #21005D 0%, #6750A4 65%, #7D5260 100%) !important; border-radius: 0 0 var(--md-shape-xxl) var(--md-shape-xxl); position: relative; overflow: hidden; padding: 6rem 0 4rem !important; margin-top: 0 !important; } section.bg-primary.text-white.py-5.mt-5::before { content: ''; position: absolute; top: -30%; right: -10%; width: 40vw; height: 40vw; background: radial-gradient(circle, rgba(234,221,255,0.35), transparent 70%); filter: blur(60px); } section.bg-primary.text-white.py-5.mt-5 .display-4 { background: linear-gradient(135deg, #FFFFFF, #EADDFF); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 500; } /* ------------------------------------------------------------------------- 12. FOOTER ------------------------------------------------------------------------- */ .footer-custom { background: linear-gradient(180deg, #1C1B1F 0%, #21005D 100%); color: rgba(255,255,255,0.85); padding: 5rem 0 2rem; margin-top: 6rem; border-top-left-radius: var(--md-shape-xxl); border-top-right-radius: var(--md-shape-xxl); position: relative; overflow: hidden; } .footer-custom::before { content: ''; position: absolute; top: -10%; left: 50%; width: 60vw; height: 30vw; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(103,80,164,0.45), transparent 70%); filter: blur(80px); pointer-events: none; } .footer-custom h5, .footer-custom h6 { color: #fff; font-weight: 500; margin-bottom: 1rem; } .footer-custom h5 i { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: rgba(234,221,255,0.18); border-radius: var(--md-shape-sm); margin-right: 0.5rem !important; color: #EADDFF; } .footer-custom a { color: rgba(255,255,255,0.75); transition: color var(--md-dur-short) var(--md-ease-standard); } .footer-custom a:hover { color: #EADDFF; } .footer-custom ul li { padding: 0.3rem 0; font-size: 0.92rem; } .footer-custom hr { border-color: rgba(255,255,255,0.12); } .social-icons a { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); border-radius: var(--md-shape-pill); color: #fff !important; font-size: 1.05rem; transition: all var(--md-dur-medium) var(--md-ease-emphasized); margin-right: 0.4rem !important; } .social-icons a:hover { background: var(--md-primary-container); color: var(--md-on-primary-container) !important; transform: translateY(-3px) rotate(-6deg); box-shadow: 0 0 20px rgba(234,221,255,0.5); } /* ------------------------------------------------------------------------- 13. STATS ------------------------------------------------------------------------- */ .bg-light .display-5.text-primary, .bg-light i.display-5 { display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; background: var(--md-primary-container); color: var(--md-on-primary-container) !important; border-radius: var(--md-shape-md); font-size: 1.75rem !important; margin-bottom: 0.5rem; } /* ------------------------------------------------------------------------- 14. UTILITY OVERRIDES ------------------------------------------------------------------------- */ .text-primary { color: var(--md-primary) !important; } .text-muted { color: var(--md-on-surface-variant) !important; } .rounded { border-radius: var(--md-shape-md) !important; } .rounded-lg { border-radius: var(--md-shape-lg) !important; } img.rounded, img.shadow { border-radius: var(--md-shape-lg) !important; box-shadow: var(--md-elev-2); } .shadow { box-shadow: var(--md-elev-2) !important; } .shadow-sm { box-shadow: var(--md-elev-1) !important; } .shadow-lg { box-shadow: var(--md-elev-4) !important; } hr { border-color: var(--md-outline-variant); opacity: 0.6; } /* Tables */ .table { --bs-table-bg: transparent; border-collapse: separate; border-spacing: 0; } .table thead th { background: var(--md-surface-container); color: var(--md-on-surface-variant); font-weight: 500; font-size: 0.85rem; letter-spacing: 0.02em; text-transform: uppercase; border: none; padding: 1rem; } .table tbody td { border-bottom: 1px solid var(--md-outline-variant); padding: 1rem; vertical-align: middle; } .table tbody tr { transition: background var(--md-dur-short) var(--md-ease-standard); } .table tbody tr:hover { background: rgba(103,80,164,0.05); } /* ------------------------------------------------------------------------- 15. PAGINATION ------------------------------------------------------------------------- */ .pagination .page-link { border: none; margin: 0 0.15rem; border-radius: var(--md-shape-pill) !important; color: var(--md-on-surface); background: transparent; padding: 0.5rem 0.95rem; font-weight: 500; transition: all var(--md-dur-short) var(--md-ease-standard); } .pagination .page-link:hover { background: rgba(103,80,164,0.08); color: var(--md-primary); } .pagination .page-item.active .page-link { background: var(--md-primary); color: var(--md-on-primary); box-shadow: var(--md-elev-1); } /* ------------------------------------------------------------------------- 16. ACCORDION (FAQ) ------------------------------------------------------------------------- */ .accordion-item { background: var(--md-surface-container-low); border: 1px solid var(--md-outline-variant); border-radius: var(--md-shape-md) !important; margin-bottom: 0.75rem; overflow: hidden; } .accordion-button { background: transparent; font-weight: 500; color: var(--md-on-surface); padding: 1.1rem 1.25rem; border-radius: var(--md-shape-md) !important; } .accordion-button:not(.collapsed) { background: var(--md-secondary-container); color: var(--md-on-secondary-container); box-shadow: none; } .accordion-button:focus { box-shadow: 0 0 0 3px rgba(103,80,164,0.18); } .accordion-body { color: var(--md-on-surface-variant); padding: 1.25rem; } /* ------------------------------------------------------------------------- 17. MODAL ------------------------------------------------------------------------- */ .modal-content { border: none; border-radius: var(--md-shape-xl); background: var(--md-surface-container-high); box-shadow: var(--md-elev-5); overflow: hidden; } .modal-header { border-bottom: 1px solid var(--md-outline-variant); padding: 1.25rem 1.5rem; } .modal-footer { border-top: 1px solid var(--md-outline-variant); padding: 1rem 1.5rem; } /* ------------------------------------------------------------------------- 18. ANIMATIONS — reveal on scroll ------------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--md-ease-emphasized), transform 700ms var(--md-ease-emphasized); } .reveal.in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ------------------------------------------------------------------------- 19. AUTH PAGES (login / register) ------------------------------------------------------------------------- */ .auth-card { max-width: 460px; margin: 6rem auto; background: var(--md-surface-container-low); border-radius: var(--md-shape-xl); padding: 2.5rem; box-shadow: var(--md-elev-3); position: relative; overflow: hidden; } .auth-card::before { content: ''; position: absolute; top: -40%; right: -20%; width: 80%; height: 80%; background: radial-gradient(circle, rgba(234,221,255,0.7), transparent 70%); filter: blur(40px); pointer-events: none; } /* ------------------------------------------------------------------------- 20. SCROLLBAR ------------------------------------------------------------------------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--md-surface-container); } ::-webkit-scrollbar-thumb { background: var(--md-outline-variant); border-radius: var(--md-shape-pill); border: 2px solid var(--md-surface-container); } ::-webkit-scrollbar-thumb:hover { background: var(--md-primary); } /* ------------------------------------------------------------------------- 21. RESPONSIVE TWEAKS ------------------------------------------------------------------------- */ @media (max-width: 768px) { .hero-section { min-height: 80vh; padding: 6rem 0 4rem; } .navbar-collapse { background: var(--md-surface-container); margin-top: 0.75rem; padding: 1rem; border-radius: var(--md-shape-md); box-shadow: var(--md-elev-2); } .navbar-nav .nav-link { margin: 0.15rem 0; } .footer-custom { padding: 3.5rem 0 1.5rem; } }