/*#region Fonts*/ @font-face { font-family: 'Vazir'; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/Vazir-Light.ttf) format('truetype'); } @font-face { font-family: 'Vazir'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/Vazir-Regular.ttf) format('truetype'); } @font-face { font-family: 'Vazir'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/Vazir-Medium.ttf) format('truetype'); } @font-face { font-family: 'Vazir'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/Vazir-Bold.ttf) format('truetype'); } @font-face { font-family: 'Vazir'; font-style: normal; font-weight: 900; font-display: swap; src: url(../fonts/Vazir-Bold.ttf) format('truetype'); } :root { --app-font-family: 'Vazir', Tahoma, 'Segoe UI', Arial, sans-serif; } html, body { font-family: var(--app-font-family); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Apply Vazir to common Mud components */ .mud-typography, .mud-typography-root, .mud-button-label, .mud-input-slot, .mud-input-slot input, .mud-input-slot textarea, .mud-select, .mud-snackbar, .mud-chip, .mud-breadcrumbs, .mud-tooltip, .mud-table, .mud-textfield, .mud-checkbox, .mud-radio, .mud-switch { font-family: var(--app-font-family) !important; } /* Typography variants override to match previous settings */ .mud-typography-h1 { font-family: var(--app-font-family); font-size: 2rem; font-weight: 700; line-height: 1.70; letter-spacing: normal; } .mud-typography-h2 { font-family: var(--app-font-family); font-size: 1.875rem; font-weight: 700; line-height: 1.65; letter-spacing: normal; } .mud-typography-h3 { font-family: var(--app-font-family); font-size: 1.5rem; font-weight: 700; line-height: 1.60; letter-spacing: normal; } .mud-typography-h4 { font-family: var(--app-font-family); font-size: 1.25rem; font-weight: 700; line-height: 1.55; letter-spacing: normal; } .mud-typography-h5 { font-family: var(--app-font-family); font-size: 1.125rem; font-weight: 700; line-height: 1.50; letter-spacing: normal; } .mud-typography-h6 { font-family: var(--app-font-family); font-size: 1rem; font-weight: 700; line-height: 1.45; letter-spacing: normal; } .mud-typography-subtitle1 { font-family: var(--app-font-family); font-size: 1rem; font-weight: 500; line-height: 1.62; letter-spacing: normal; } .mud-typography-subtitle2 { font-family: var(--app-font-family); font-size: 0.875rem; font-weight: 500; line-height: 1.60; letter-spacing: normal; } .mud-typography-body1 { font-family: var(--app-font-family); font-size: 1rem; font-weight: 400; line-height: 1.85; letter-spacing: normal; } .mud-typography-body2 { font-family: var(--app-font-family); font-size: 0.875rem; font-weight: 400; line-height: 1.80; letter-spacing: normal; } .mud-typography-caption { font-family: var(--app-font-family); font-size: 0.75rem; font-weight: 400; line-height: 1.60; letter-spacing: normal; } .mud-typography-overline { font-family: var(--app-font-family); font-size: 0.75rem; font-weight: 500; line-height: 1.60; letter-spacing: normal; } .mud-button-label { text-transform: none; } /*#endregion*/ /*#region Layout Styles*/ html, body { height: 100%; } .mud-layout { min-height: 100vh; display: flex; flex-direction: column; } .mud-main-content { flex: 1; display: flex; flex-direction: column; } .mud-main-content > div:first-child { flex: 1; } /*#endregion*/ /*#region Footer Styles*/ .footer-section { background: var(--mud-palette-surface); border-top: 1px solid var(--mud-palette-divider); margin-top: auto; } .footer-title { color: var(--mud-palette-text-primary); margin-bottom: 1rem; } .footer-description { color: var(--mud-palette-text-secondary); line-height: 1.6; } .footer-link { color: var(--mud-palette-text-secondary); text-decoration: none; transition: color 0.3s ease; display: block; padding: 0.25rem 0; } .footer-link:hover { color: var(--mud-palette-primary); text-decoration: none; } .footer-contact { color: var(--mud-palette-text-secondary); } .footer-copyright { color: var(--mud-palette-text-secondary); } .social-links .social-icon { transition: transform 0.3s ease, color 0.3s ease; } .social-links .social-icon:hover { transform: translateY(-2px); color: var(--mud-palette-primary); } .footer-legal { flex-wrap: wrap; } @media (max-width: 960px) { .footer-legal { justify-content: flex-start !important; margin-top: 1rem; } } /* Dark mode adjustments */ .mud-theme-dark .footer-section { background: var(--mud-palette-dark-background); border-top-color: var(--mud-palette-dark-divider); } /*#region Profile Page Styles*/ .profile-avatar { width: 80px; height: 80px; } .profile-header { background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-darken) 100%); color: white; } .profile-stats-card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .profile-stats-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } .settings-section { border: 1px solid var(--mud-palette-divider); border-radius: 8px; } .tab-content { padding: 24px; } .form-section { background: var(--mud-palette-surface); border-radius: 12px; padding: 24px; } .stats-grid .mud-paper { background: linear-gradient(135deg, var(--mud-palette-surface) 0%, var(--mud-palette-surface-variant) 100%); border: 1px solid var(--mud-palette-divider); } @media (max-width: 768px) { .tab-content { padding: 16px; } .form-section { padding: 16px; } .profile-avatar { width: 60px; height: 60px; } } /* Dark mode adjustments for profile */ .mud-theme-dark .profile-stats-card { background: var(--mud-palette-dark-surface); } .mud-theme-dark .settings-section { border-color: var(--mud-palette-dark-divider); } .mud-theme-dark .stats-grid .mud-paper { background: linear-gradient(135deg, var(--mud-palette-dark-surface) 0%, var(--mud-palette-dark-surface-variant) 100%); } /*#endregion*/ /*#region Registration Wizard*/ .wizard-section { background: linear-gradient(180deg, #f9f7ff 0%, #ffffff 40%, #f0f8ff 100%); } .wizard-card { border-radius: 18px; border: 1px solid var(--mud-palette-divider); } .gradient-border { border-radius: 16px; border: 1px solid transparent; background: linear-gradient(var(--mud-palette-surface), var(--mud-palette-surface)) padding-box, linear-gradient(135deg, rgba(123, 97, 255, 0.4), rgba(255, 140, 189, 0.4)) border-box; } .captcha-box { min-width: 120px; min-height: 56px; border-radius: 12px; letter-spacing: 4px; font-weight: 600; background: linear-gradient(135deg, rgba(123, 97, 255, 0.12), rgba(255, 140, 189, 0.12)); } .terms-box { border-radius: 12px; border: 1px dashed var(--mud-palette-divider); background: rgba(255, 255, 255, 0.7); } @media (max-width: 768px) { .wizard-card { padding: 1.5rem !important; } } /*#endregion*/ /*#endregion*/