masoodafar-web
a3681a8bcd
- حذف متن hardcoded 'پکیج پایه ۵۶ میلیون تومان' و دیالوگ inline - ایجاد PackagePurchaseDialog — کامپوننت مستقل 2 مرحلهای: مرحله ۱: نمایش کاشیهای پکیج (ریسپانسیو ۲-۳ تایی) مرحله ۲: انتخاب روش پرداخت (درگاه بانکی / دایا الماس) - دایا الماس فقط برای پکیج پایه + دور اول نمایش داده میشه - پکیجها داینامیک از API بارگذاری میشن - تغییر متن CTA از 'شروع فرآیند تامین اعتبار' به 'تهیه پکیج' - تغییر متن راهنما از 'پکیج پایه را تهیه کنید' به 'یکی از پکیجها را تهیه کنید' - CSS: hover effects + badge + responsive tiles
1641 lines
41 KiB
CSS
1641 lines
41 KiB
CSS
/*#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;
|
|
direction: rtl;
|
|
text-align: right;
|
|
}
|
|
|
|
/* 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%;
|
|
overflow-x: hidden;
|
|
max-width: 100vw;
|
|
}
|
|
|
|
.mud-layout {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.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: 96px;
|
|
min-height: 48px;
|
|
border-radius: var(--mud-default-borderradius);
|
|
letter-spacing: 4px;
|
|
font-weight: 600;
|
|
background: rgba(99,102,241,.08);
|
|
border: 1px solid var(--mud-palette-divider);
|
|
}
|
|
|
|
.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*/
|
|
@media (max-width: 768px) {
|
|
#registration-stepper .mud-stepper-content {
|
|
padding: 0 10px !important;
|
|
}
|
|
}
|
|
|
|
/*#region Store - Mobile Helpers*/
|
|
@media (max-width: 600px) {
|
|
.w-100-mobile { width: 100% !important; }
|
|
.qty-input { width: 100% !important; max-width: 220px; }
|
|
.mobile-actions-stack { width: 100%; display: flex; gap: .5rem; }
|
|
.mobile-actions-stack > * { flex: 1; }
|
|
}
|
|
.product-thumb {
|
|
border-radius: 12px;
|
|
object-fit: cover;
|
|
display: block;
|
|
box-shadow: 0 2px 6px rgba(0,0,0,.08);
|
|
}
|
|
/*#endregion*/
|
|
|
|
/*#region Profile Tiles*/
|
|
.tile-link { display: block; color: inherit; }
|
|
.tile-link:hover { text-decoration: none; }
|
|
.profile-tile {
|
|
box-shadow: 0 2px 8px rgba(0,0,0,.06);
|
|
transition: box-shadow .2s ease, transform .1s ease;
|
|
}
|
|
.profile-tile:hover {
|
|
box-shadow: 0 4px 16px rgba(0,0,0,.08);
|
|
transform: translateY(-2px);
|
|
}
|
|
.mud-theme-dark .profile-tile {
|
|
box-shadow: 0 2px 8px rgba(0,0,0,.25);
|
|
}
|
|
/*#endregion*/
|
|
|
|
/*#region Landing Page v2 */
|
|
|
|
/* ── Animated gradient hero ── */
|
|
.hero-gradient {
|
|
background: var(--ds-gradient-hero);
|
|
background-size: 300% 300%;
|
|
animation: heroGradient 10s ease infinite;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.hero-gradient::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.12) 0%, transparent 60%);
|
|
pointer-events: none;
|
|
}
|
|
@keyframes heroGradient {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
|
|
/* Hero dark overlay for readability */
|
|
.hero-gradient .mud-text-secondary { color: rgba(255,255,255,.78) !important; }
|
|
|
|
/* ── Scroll-triggered fade-in-up ── */
|
|
.fade-in-up {
|
|
opacity: 0;
|
|
transform: translateY(28px);
|
|
transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
|
|
}
|
|
.fade-in-up.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* stagger children helper */
|
|
.fade-in-up[data-delay="100"] { transition-delay: .1s; }
|
|
.fade-in-up[data-delay="200"] { transition-delay: .2s; }
|
|
.fade-in-up[data-delay="300"] { transition-delay: .3s; }
|
|
.fade-in-up[data-delay="400"] { transition-delay: .4s; }
|
|
.fade-in-up[data-delay="500"] { transition-delay: .5s; }
|
|
|
|
/* ── Pulse badge (hero chips) ── */
|
|
.pulse-chip {
|
|
animation: pulseChip 2.5s ease-in-out infinite;
|
|
}
|
|
@keyframes pulseChip {
|
|
0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.3); }
|
|
50% { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
|
|
}
|
|
|
|
/* ── Feature card v2 (hover lift) ── */
|
|
.feature-card-v2 {
|
|
transition: transform .28s ease, box-shadow .28s ease;
|
|
border: 1px solid var(--mud-palette-divider);
|
|
cursor: default;
|
|
}
|
|
.feature-card-v2:hover {
|
|
transform: translateY(-6px);
|
|
box-shadow: 0 10px 32px rgba(0,0,0,.09);
|
|
}
|
|
|
|
/* ── Stat counter card ── */
|
|
.stat-card {
|
|
text-align: center;
|
|
transition: transform .25s ease;
|
|
}
|
|
.stat-card:hover {
|
|
transform: scale(1.04);
|
|
}
|
|
.stat-number {
|
|
font-size: 2rem;
|
|
font-weight: 800;
|
|
font-variant-numeric: tabular-nums;
|
|
direction: ltr; /* numbers LTR */
|
|
unicode-bidi: isolate;
|
|
}
|
|
|
|
/* ── Blog card ── */
|
|
.blog-card-v2 {
|
|
overflow: hidden;
|
|
transition: transform .3s ease, box-shadow .3s ease;
|
|
}
|
|
.blog-card-v2:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 24px rgba(0,0,0,.10);
|
|
}
|
|
.blog-card-v2 .blog-thumb {
|
|
overflow: hidden;
|
|
}
|
|
.blog-card-v2 .blog-thumb img {
|
|
transition: transform .45s ease;
|
|
}
|
|
.blog-card-v2:hover .blog-thumb img {
|
|
transform: scale(1.06);
|
|
}
|
|
|
|
/* ── Testimonial card ── */
|
|
.testimonial-card {
|
|
transition: transform .25s ease;
|
|
}
|
|
.testimonial-card:hover {
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
/* ── CTA Banner ── */
|
|
.cta-banner {
|
|
background: var(--ds-gradient-primary);
|
|
border-radius: 20px;
|
|
color: #fff;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.cta-banner::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 300px; height: 300px;
|
|
background: rgba(255,255,255,.06);
|
|
border-radius: 50%;
|
|
top: -100px; left: -60px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ── Scroll indicator ── */
|
|
.scroll-indicator {
|
|
animation: scrollBounce 2s ease infinite;
|
|
}
|
|
@keyframes scrollBounce {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(8px); }
|
|
}
|
|
|
|
/* ── Section spacing ── */
|
|
.section-landing { padding: 3.5rem 0; }
|
|
.section-landing-lg { padding: 5rem 0; }
|
|
|
|
/* ── Mobile overrides ── */
|
|
@media (max-width: 600px) {
|
|
.hero-gradient { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
|
|
.stat-number { font-size: 1.5rem; }
|
|
.section-landing { padding: 2rem 0; }
|
|
.section-landing-lg { padding: 3rem 0; }
|
|
}
|
|
|
|
/* ── Dark mode adjustments for landing ── */
|
|
.mud-theme-dark .feature-card-v2 {
|
|
border-color: var(--mud-palette-dark-divider);
|
|
}
|
|
.mud-theme-dark .feature-card-v2:hover {
|
|
box-shadow: 0 10px 32px rgba(0,0,0,.35);
|
|
}
|
|
.mud-theme-dark .blog-card-v2:hover {
|
|
box-shadow: 0 8px 24px rgba(0,0,0,.35);
|
|
}
|
|
|
|
/*#endregion*/
|
|
|
|
/*#region Blog Pages */
|
|
|
|
/* ── Blog hero banner ── */
|
|
.blog-hero {
|
|
background: var(--ds-gradient-primary);
|
|
padding: 3rem 0 2.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
/* ── Blog card title & summary clamp ── */
|
|
.blog-title-clamp {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
line-height: 1.6;
|
|
}
|
|
.blog-summary-clamp {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* ── Clickable cards ── */
|
|
.cursor-pointer { cursor: pointer; }
|
|
|
|
/* ── Blog detail hero image ── */
|
|
.blog-detail-hero {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 340px;
|
|
overflow: hidden;
|
|
}
|
|
.blog-detail-hero img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.blog-detail-hero-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.35) 100%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* ── Blog content typography ── */
|
|
.blog-content {
|
|
line-height: 2;
|
|
font-size: 1.05rem;
|
|
}
|
|
.blog-content h1, .blog-content h2, .blog-content h3 {
|
|
margin-top: 1.8rem;
|
|
margin-bottom: .8rem;
|
|
font-weight: 700;
|
|
line-height: 1.5;
|
|
}
|
|
.blog-content p {
|
|
margin-bottom: 1rem;
|
|
}
|
|
.blog-content img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: 12px;
|
|
margin: 1rem 0;
|
|
}
|
|
.blog-content ul, .blog-content ol {
|
|
padding-right: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.blog-content blockquote {
|
|
border-right: 4px solid var(--mud-palette-primary);
|
|
padding: .8rem 1.2rem;
|
|
margin: 1rem 0;
|
|
background: var(--mud-palette-background-gray);
|
|
border-radius: 0 8px 8px 0;
|
|
}
|
|
.blog-content a {
|
|
color: var(--mud-palette-primary);
|
|
text-decoration: underline;
|
|
}
|
|
.blog-content code {
|
|
background: var(--mud-palette-background-gray);
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-size: .92em;
|
|
}
|
|
.blog-content pre {
|
|
background: var(--mud-palette-surface);
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
overflow-x: auto;
|
|
margin: 1rem 0;
|
|
direction: ltr;
|
|
text-align: left;
|
|
}
|
|
|
|
/* ── Mobile overrides for blog ── */
|
|
@media (max-width: 600px) {
|
|
.blog-hero { padding: 2rem 0 1.5rem; }
|
|
.blog-detail-hero { height: 220px; }
|
|
.blog-content { font-size: .98rem; line-height: 1.9; }
|
|
}
|
|
|
|
/*#endregion*/
|
|
|
|
/*#region Dashboard v2 */
|
|
|
|
/* ── Profile header gradient card ── */
|
|
.dash-header-card {
|
|
background: var(--ds-gradient-primary);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.dash-header-card::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 220px; height: 220px;
|
|
background: rgba(255,255,255,.06);
|
|
border-radius: 50%;
|
|
top: -80px; left: -40px;
|
|
pointer-events: none;
|
|
}
|
|
.dash-avatar {
|
|
background: rgba(255,255,255,.2) !important;
|
|
color: #fff !important;
|
|
border: 2px solid rgba(255,255,255,.3);
|
|
}
|
|
|
|
/* ── Wallet stat cards ── */
|
|
.dash-wallet-card {
|
|
border: 1px solid var(--mud-palette-divider);
|
|
transition: transform .25s ease, box-shadow .25s ease;
|
|
}
|
|
.dash-wallet-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 6px 20px rgba(0,0,0,.08);
|
|
}
|
|
|
|
/* ── Dashboard tiles ── */
|
|
.dash-tile {
|
|
border: 1px solid var(--mud-palette-divider);
|
|
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
|
|
cursor: pointer;
|
|
}
|
|
.dash-tile:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 24px rgba(0,0,0,.08);
|
|
border-color: var(--mud-palette-primary);
|
|
}
|
|
|
|
/* ── Dashboard hero card content ── */
|
|
.dash-hero-name { color: #fff; font-weight: 700; }
|
|
.dash-hero-sub { color: rgba(255,255,255,.8); }
|
|
.dash-hero-hint { color: rgba(255,255,255,.6); }
|
|
.dash-hero-btn {
|
|
background: rgba(255,255,255,.18) !important;
|
|
color: #fff !important;
|
|
backdrop-filter: blur(6px);
|
|
-webkit-backdrop-filter: blur(6px);
|
|
}
|
|
|
|
/* ── Dashboard stat values ── */
|
|
.dash-stat-value {
|
|
font-weight: 700;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* ── Wallet strip (compact) ── */
|
|
.wallet-strip {
|
|
gap: 8px;
|
|
}
|
|
.wallet-strip-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 4px 0;
|
|
}
|
|
.wallet-strip-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
@media (max-width: 600px) {
|
|
.wallet-strip {
|
|
flex-direction: column !important;
|
|
align-items: stretch !important;
|
|
gap: 0 !important;
|
|
}
|
|
.wallet-strip-item {
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid var(--mud-palette-divider);
|
|
padding: 6px 4px;
|
|
}
|
|
.wallet-strip-item:last-child { border-bottom: none; }
|
|
}
|
|
|
|
/* ── Dashboard blog banner ── */
|
|
.dash-blog-banner {
|
|
border: 1px solid var(--mud-palette-divider);
|
|
transition: box-shadow .25s ease, border-color .25s ease;
|
|
cursor: pointer;
|
|
}
|
|
.dash-blog-banner:hover {
|
|
border-color: var(--mud-palette-primary);
|
|
box-shadow: 0 4px 16px rgba(99,102,241,.12);
|
|
}
|
|
.dash-blog-thumb {
|
|
width: 160px;
|
|
min-height: 100px;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
}
|
|
.dash-blog-title {
|
|
font-weight: 600;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
.dash-blog-summary {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── Dark mode ── */
|
|
.mud-theme-dark .dash-wallet-card:hover,
|
|
.mud-theme-dark .dash-tile:hover {
|
|
box-shadow: 0 8px 24px rgba(0,0,0,.3);
|
|
}
|
|
|
|
/* ── Mobile ── */
|
|
@media (max-width: 600px) {
|
|
.dash-header-card { padding: 1.2rem !important; }
|
|
.dash-header-card .mud-avatar-large { width: 48px !important; height: 48px !important; }
|
|
|
|
/* مدالها در موبایل تمام عرض */
|
|
.mud-dialog-container .mud-dialog.mud-dialog-width-md,
|
|
.mud-dialog-container .mud-dialog.mud-dialog-width-lg,
|
|
.mud-dialog-container .mud-dialog.mud-dialog-width-xl,
|
|
.mud-dialog-container .mud-dialog {
|
|
max-width: calc(100vw - 16px) !important;
|
|
width: calc(100vw - 16px) !important;
|
|
margin: 8px !important;
|
|
}
|
|
}
|
|
|
|
/* ── Profile Hub Page ── */
|
|
.profile-hub-avatar {
|
|
width: 80px !important;
|
|
height: 80px !important;
|
|
font-size: 2rem !important;
|
|
background: var(--mud-palette-primary) !important;
|
|
color: #fff !important;
|
|
}
|
|
.profile-hub-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding: 16px 20px;
|
|
border-radius: var(--mud-default-borderradius);
|
|
cursor: pointer;
|
|
transition: background .2s ease, box-shadow .2s ease;
|
|
text-decoration: none !important;
|
|
color: var(--mud-palette-text-primary) !important;
|
|
}
|
|
.profile-hub-item:hover {
|
|
background: var(--mud-palette-action-default-hover);
|
|
box-shadow: var(--mud-elevation-2);
|
|
}
|
|
.profile-hub-item .mud-icon-root {
|
|
color: var(--mud-palette-primary);
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
/* ── Top bar profile menu RTL fix ── */
|
|
.mud-popover .mud-list {
|
|
direction: rtl;
|
|
text-align: right;
|
|
}
|
|
.mud-popover .mud-list-item {
|
|
flex-direction: row-reverse;
|
|
text-align: right;
|
|
}
|
|
.mud-popover .mud-list-item-icon {
|
|
margin-left: 12px;
|
|
margin-right: 0;
|
|
}
|
|
.mud-menu .mud-list-item {
|
|
text-align: right;
|
|
}
|
|
|
|
/*#endregion*/
|
|
|
|
/*#region Phase 7 — Mobile Optimization */
|
|
|
|
/* ── Bottom Navigation Bar ── */
|
|
.bottom-nav {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1100;
|
|
border-radius: 18px 18px 0 0;
|
|
padding-bottom: env(safe-area-inset-bottom, 0);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
background: rgba(255,255,255,.92) !important;
|
|
}
|
|
.mud-theme-dark .bottom-nav {
|
|
background: rgba(30,30,30,.94) !important;
|
|
}
|
|
.bottom-nav-item {
|
|
display: flex !important;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2px;
|
|
min-width: 56px;
|
|
min-height: 48px;
|
|
justify-content: center;
|
|
color: var(--mud-palette-text-secondary) !important;
|
|
text-decoration: none !important;
|
|
transition: color .2s ease;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
.bottom-nav-item:hover,
|
|
.bottom-nav-item:active {
|
|
color: var(--mud-palette-primary) !important;
|
|
text-decoration: none !important;
|
|
}
|
|
.bottom-nav-item .mud-icon-root {
|
|
font-size: 1.75rem !important;
|
|
}
|
|
.bottom-nav-item .mud-typography-caption {
|
|
font-size: .7rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* ── Main content padding for bottom nav ── */
|
|
@media (max-width: 959.95px) {
|
|
.main-content-wrapper {
|
|
padding-bottom: 68px !important;
|
|
}
|
|
}
|
|
|
|
/* ── Responsive Typography ── */
|
|
@media (max-width: 600px) {
|
|
.mud-typography-h1 { font-size: 1.5rem !important; }
|
|
.mud-typography-h2 { font-size: 1.35rem !important; }
|
|
.mud-typography-h3 { font-size: 1.2rem !important; }
|
|
.mud-typography-h4 { font-size: 1.1rem !important; }
|
|
.mud-typography-h5 { font-size: 1rem !important; }
|
|
}
|
|
|
|
/* ── Mobile Touch Targets ── */
|
|
@media (max-width: 959.95px) {
|
|
/* Drawer links — bigger tap targets */
|
|
.mud-drawer .mud-link {
|
|
min-height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8px 4px;
|
|
}
|
|
/* All icon buttons — min tap size */
|
|
.mud-appbar .mud-icon-button {
|
|
min-width: 40px;
|
|
min-height: 40px;
|
|
}
|
|
}
|
|
|
|
/* ── Footer Mobile Compact ── */
|
|
@media (max-width: 600px) {
|
|
.footer-section { display: none; }
|
|
}
|
|
|
|
/* ── Landing Page Mobile ── */
|
|
@media (max-width: 600px) {
|
|
.hero-gradient .mud-chip { height: 28px !important; font-size: .75rem !important; }
|
|
.mud-timeline .mud-timeline-item-body .mud-typography-h6 { font-size: .95rem !important; }
|
|
}
|
|
|
|
/* ── Blog Pages Mobile ── */
|
|
@media (max-width: 600px) {
|
|
.blog-hero { padding: 2rem 0 !important; }
|
|
.blog-card-v2 .mud-card-media { height: 160px !important; }
|
|
.mud-pagination { transform: scale(.85); transform-origin: center; }
|
|
/* Blog content — guard against wide embeds */
|
|
.blog-content {
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.blog-content table {
|
|
display: block;
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
}
|
|
.blog-content iframe {
|
|
max-width: 100%;
|
|
height: auto;
|
|
aspect-ratio: 16 / 9;
|
|
}
|
|
}
|
|
|
|
/* ── Dashboard Mobile ── */
|
|
@media (max-width: 600px) {
|
|
.dash-wallet-card { padding: .8rem !important; }
|
|
.dash-wallet-card .mud-typography-h5 { font-size: 1.1rem !important; }
|
|
.dash-tile { padding: .8rem !important; }
|
|
.dash-tile .mud-avatar { width: 36px !important; height: 36px !important; font-size: .9rem !important; }
|
|
}
|
|
|
|
/* ── About Page Mobile ── */
|
|
@media (max-width: 600px) {
|
|
.about-hero-section { padding-top: 2rem !important; padding-bottom: 2rem !important; }
|
|
.about-hero-section .mud-stack-row { flex-wrap: wrap; }
|
|
.about-hero-section .mud-button-filled,
|
|
.about-hero-section .mud-button-outlined { width: 100%; }
|
|
.about-hero-section .mud-paper.pa-8 { padding: 1rem !important; }
|
|
}
|
|
|
|
/* ── Contact Page Mobile ── */
|
|
@media (max-width: 600px) {
|
|
.contact-hero-section { padding-top: 2rem !important; padding-bottom: 2rem !important; }
|
|
.contact-hero-section .mud-typography-h2 { font-size: 1.3rem !important; }
|
|
/* Map placeholder shorter on mobile */
|
|
.contact-map-placeholder { height: 240px !important; }
|
|
/* Full-width submit button */
|
|
.mud-form .mud-stack-row { justify-content: center !important; }
|
|
.mud-form .mud-button-filled { width: 100%; }
|
|
}
|
|
|
|
/* ── Global Mobile Utilities ── */
|
|
@media (max-width: 600px) {
|
|
/* Reduce horizontal padding on containers */
|
|
.mud-container { padding-left: 12px !important; padding-right: 12px !important; }
|
|
/* Safe area for notched phones */
|
|
.mud-appbar { padding-top: env(safe-area-inset-top, 0); }
|
|
}
|
|
|
|
/* ── Prevent MudGrid negative-margin overflow ── */
|
|
.mud-grid {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* ── AppBar & Bottom Nav mobile containment ── */
|
|
.mud-appbar {
|
|
max-width: 100vw;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.bottom-nav {
|
|
max-width: 100vw;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* ── Disable hover effects on touch ── */
|
|
@media (hover: none) {
|
|
.feature-card-v2:hover,
|
|
.blog-card-v2:hover,
|
|
.dash-wallet-card:hover,
|
|
.dash-tile:hover {
|
|
transform: none;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
/*#endregion*/
|
|
|
|
/*#region Discount Store */
|
|
|
|
/* ── Hero Section ── */
|
|
.discount-hero {
|
|
background: var(--ds-gradient-discount);
|
|
border-radius: 16px;
|
|
padding: 2rem;
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
|
|
/* ── Product Card ── */
|
|
.discount-product-card {
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
.discount-product-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 24px rgba(239, 68, 68, .15);
|
|
}
|
|
|
|
.discount-product-card .product-thumb-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
padding-top: 100%; /* 1:1 aspect ratio */
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-color: #f5f5f5;
|
|
border-radius: 12px 12px 0 0;
|
|
}
|
|
|
|
.discount-sold-out-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.55);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 12px 12px 0 0;
|
|
}
|
|
|
|
.discount-product-card .product-title {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.discount-product-card .product-short-info {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
font-size: 0.8rem;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* ── Discount Badge ── */
|
|
.discount-badge {
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 8px;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* ── Order Cards ── */
|
|
.discount-order-card {
|
|
transition: border-color 0.2s ease;
|
|
}
|
|
|
|
.discount-order-card:hover {
|
|
border-color: var(--mud-palette-primary) !important;
|
|
}
|
|
|
|
/* ── Checkout Payment Section ── */
|
|
.discount-payment-section {
|
|
background: rgba(124, 77, 255, .04);
|
|
border: 1px solid rgba(124, 77, 255, .15);
|
|
border-radius: 12px;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.discount-hero {
|
|
padding: 1.2rem;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.discount-hero h4 {
|
|
font-size: 1.3rem !important;
|
|
}
|
|
}
|
|
|
|
/*#endregion*/
|
|
|
|
/*#region Store Chooser / Gateway Pages */
|
|
|
|
.store-chooser-link {
|
|
display: block;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.store-chooser-card {
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
|
border: 2px solid transparent;
|
|
cursor: pointer;
|
|
min-height: 220px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.store-chooser-card:hover {
|
|
transform: translateY(-6px);
|
|
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.store-chooser-regular:hover {
|
|
border-color: #10b981;
|
|
}
|
|
|
|
.store-chooser-discount:hover {
|
|
border-color: #ef4444;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.store-chooser-card {
|
|
min-height: 160px;
|
|
padding: 1.2rem !important;
|
|
}
|
|
}
|
|
|
|
/*#endregion*/
|
|
|
|
/*#region Unified Design System */
|
|
|
|
/* ═══════════════════════════════════════════════════════
|
|
Design System — Unified component styling
|
|
All text fields, selects, buttons, and cards follow
|
|
this single source of truth. Avoid inline Style=""
|
|
overrides for these base components.
|
|
═══════════════════════════════════════════════════════ */
|
|
|
|
/* ── CSS Variables ── */
|
|
:root {
|
|
/* ── Brand Colors ── */
|
|
--ds-brand-primary: #6366f1;
|
|
--ds-brand-secondary: #8b5cf6;
|
|
--ds-brand-accent: #a78bfa;
|
|
|
|
/* ── Semantic Colors ── */
|
|
--ds-color-store: #10b981;
|
|
--ds-color-discount: #ef4444;
|
|
--ds-color-success: #10b981;
|
|
--ds-color-warning: #f59e0b;
|
|
--ds-color-error: #ef4444;
|
|
--ds-color-info: #3b82f6;
|
|
|
|
/* ── Soft Backgrounds ── */
|
|
--ds-primary-soft: rgba(99,102,241,.08);
|
|
--ds-secondary-soft: rgba(139,92,246,.08);
|
|
--ds-success-soft: rgba(16,185,129,.08);
|
|
--ds-error-soft: rgba(239,68,68,.08);
|
|
--ds-warning-soft: rgba(245,158,11,.08);
|
|
--ds-info-soft: rgba(59,130,246,.08);
|
|
--ds-store-soft: rgba(16,185,129,.10);
|
|
--ds-discount-soft: rgba(239,68,68,.10);
|
|
|
|
/* ── Gradients ── */
|
|
--ds-gradient-primary: linear-gradient(135deg, #6366f1 0%, #818cf8 50%, #a78bfa 100%);
|
|
--ds-gradient-primary-dark: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #818cf8 100%);
|
|
--ds-gradient-store: linear-gradient(135deg, #10b981 0%, #34d399 100%);
|
|
--ds-gradient-discount: linear-gradient(135deg, #ef4444 0%, #f97316 50%, #f59e0b 100%);
|
|
--ds-gradient-success: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
|
|
--ds-gradient-hero: linear-gradient(-45deg, #6366f1, #818cf8, #a78bfa, #6366f1);
|
|
|
|
/* ── Sizing (existing, preserved) ── */
|
|
--ds-radius-sm: 8px;
|
|
--ds-radius-md: 12px;
|
|
--ds-radius-lg: 16px;
|
|
--ds-radius-xl: 20px;
|
|
--ds-transition: 0.2s ease;
|
|
--ds-shadow-sm: 0 1px 3px rgba(0,0,0,.06);
|
|
--ds-shadow-md: 0 4px 12px rgba(0,0,0,.08);
|
|
--ds-shadow-lg: 0 8px 24px rgba(0,0,0,.10);
|
|
}
|
|
|
|
/* ── Dark Mode Variable Overrides ── */
|
|
.mud-theme-dark {
|
|
--ds-primary-soft: rgba(129,140,248,.12);
|
|
--ds-secondary-soft: rgba(167,139,250,.12);
|
|
--ds-success-soft: rgba(52,211,153,.12);
|
|
--ds-error-soft: rgba(248,113,113,.12);
|
|
--ds-warning-soft: rgba(251,191,36,.12);
|
|
--ds-info-soft: rgba(96,165,250,.12);
|
|
--ds-store-soft: rgba(52,211,153,.12);
|
|
--ds-discount-soft: rgba(248,113,113,.12);
|
|
--ds-shadow-sm: 0 1px 3px rgba(0,0,0,.20);
|
|
--ds-shadow-md: 0 4px 12px rgba(0,0,0,.25);
|
|
--ds-shadow-lg: 0 8px 24px rgba(0,0,0,.35);
|
|
}
|
|
|
|
/* ── Text Fields (Outlined — default style) ── */
|
|
.mud-input-outlined .mud-input-outlined-border {
|
|
border-radius: var(--ds-radius-sm) !important;
|
|
border-color: var(--mud-palette-lines-default);
|
|
transition: border-color var(--ds-transition), box-shadow var(--ds-transition);
|
|
}
|
|
.mud-input-outlined:hover .mud-input-outlined-border {
|
|
border-color: var(--mud-palette-primary);
|
|
}
|
|
.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
|
|
box-shadow: 0 0 0 2px rgba(99,102,241,.15);
|
|
}
|
|
.mud-input-outlined .mud-input-slot {
|
|
padding: 14px 14px !important;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* ── Force RTL on all inputs (fix tel/number placeholder going LTR) ── */
|
|
.mud-input-slot input,
|
|
.mud-input-slot textarea {
|
|
direction: rtl !important;
|
|
text-align: right !important;
|
|
}
|
|
|
|
/* ── Select / Dropdown ── */
|
|
.mud-select .mud-input-outlined-border {
|
|
border-radius: var(--ds-radius-sm) !important;
|
|
}
|
|
.mud-popover.mud-popover-open {
|
|
border-radius: var(--ds-radius-md) !important;
|
|
box-shadow: var(--ds-shadow-lg) !important;
|
|
overflow: hidden;
|
|
}
|
|
.mud-list-item {
|
|
border-radius: 6px !important;
|
|
margin: 2px 4px !important;
|
|
transition: background var(--ds-transition);
|
|
}
|
|
|
|
/* ── Buttons ── */
|
|
.mud-button-filled {
|
|
border-radius: var(--ds-radius-sm) !important;
|
|
font-weight: 600 !important;
|
|
letter-spacing: 0 !important;
|
|
box-shadow: none !important;
|
|
transition: transform var(--ds-transition), box-shadow var(--ds-transition), background var(--ds-transition);
|
|
}
|
|
.mud-button-filled:hover {
|
|
box-shadow: var(--ds-shadow-sm) !important;
|
|
}
|
|
.mud-button-filled:active {
|
|
transform: scale(0.98);
|
|
}
|
|
.mud-button-outlined {
|
|
border-radius: var(--ds-radius-sm) !important;
|
|
font-weight: 500 !important;
|
|
letter-spacing: 0 !important;
|
|
transition: border-color var(--ds-transition), background var(--ds-transition);
|
|
}
|
|
.mud-button-text {
|
|
border-radius: var(--ds-radius-sm) !important;
|
|
font-weight: 500 !important;
|
|
letter-spacing: 0 !important;
|
|
}
|
|
|
|
/* ── Cards / Papers ── */
|
|
.mud-paper {
|
|
border-radius: var(--ds-radius-md) !important;
|
|
}
|
|
.mud-paper.rounded-xl {
|
|
border-radius: var(--ds-radius-xl) !important;
|
|
}
|
|
.mud-paper.rounded-lg {
|
|
border-radius: var(--ds-radius-lg) !important;
|
|
}
|
|
|
|
/* ── Chips ── */
|
|
.mud-chip {
|
|
border-radius: 20px !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
|
|
/* ── Alerts ── */
|
|
.mud-alert {
|
|
border-radius: var(--ds-radius-sm) !important;
|
|
}
|
|
|
|
/* ── Dialogs ── */
|
|
.mud-dialog {
|
|
border-radius: var(--ds-radius-lg) !important;
|
|
}
|
|
.mud-dialog .mud-dialog-title {
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* ── Date Picker / Pickers ── */
|
|
.mud-picker .mud-input-outlined-border {
|
|
border-radius: var(--ds-radius-sm) !important;
|
|
}
|
|
|
|
/* ── Tables ── */
|
|
.mud-table {
|
|
border-radius: var(--ds-radius-md) !important;
|
|
overflow: hidden;
|
|
}
|
|
.mud-table-head .mud-table-cell {
|
|
font-weight: 600 !important;
|
|
background: var(--mud-palette-background-gray) !important;
|
|
}
|
|
.mud-theme-dark .mud-table-head .mud-table-cell {
|
|
background: rgba(255,255,255,.04) !important;
|
|
}
|
|
|
|
/* ── Page Header (back button row) ── */
|
|
.page-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 1rem;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
.page-header .mud-typography {
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* ── Store Hero Banner ── */
|
|
.store-hero {
|
|
background: var(--ds-gradient-primary);
|
|
border-radius: var(--ds-radius-lg);
|
|
padding: 2rem;
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
@media (max-width: 600px) {
|
|
.store-hero {
|
|
padding: 1.2rem;
|
|
border-radius: var(--ds-radius-md);
|
|
}
|
|
}
|
|
|
|
/* ── Soft Background Utility Classes ── */
|
|
.bg-primary-soft { background: var(--ds-primary-soft) !important; }
|
|
.bg-success-soft { background: var(--ds-success-soft) !important; }
|
|
.bg-error-soft { background: var(--ds-error-soft) !important; }
|
|
.bg-warning-soft { background: var(--ds-warning-soft) !important; }
|
|
.bg-info-soft { background: var(--ds-info-soft) !important; }
|
|
.bg-store-soft { background: var(--ds-store-soft) !important; }
|
|
.bg-discount-soft { background: var(--ds-discount-soft) !important; }
|
|
|
|
/* ── Brand Color Text Utilities ── */
|
|
.text-brand-store { color: var(--ds-color-store) !important; }
|
|
.text-brand-discount { color: var(--ds-color-discount) !important; }
|
|
|
|
/* ── Stat Card (used in commission, network, dashboard) ── */
|
|
.stat-card-ds {
|
|
border: 1px solid var(--mud-palette-divider);
|
|
transition: transform var(--ds-transition), box-shadow var(--ds-transition);
|
|
}
|
|
.stat-card-ds:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--ds-shadow-md);
|
|
}
|
|
|
|
/* ── Product Image Main ── */
|
|
.product-image-main {
|
|
width: 100%;
|
|
height: 360px;
|
|
background-size: cover;
|
|
background-position: center;
|
|
border-radius: var(--ds-radius-md);
|
|
color: transparent;
|
|
}
|
|
@media (max-width: 600px) {
|
|
.product-image-main {
|
|
height: 260px;
|
|
}
|
|
}
|
|
|
|
/* ── Gateway Chooser Avatars ── */
|
|
.gateway-avatar-store {
|
|
background: var(--ds-store-soft) !important;
|
|
width: 80px !important;
|
|
height: 80px !important;
|
|
}
|
|
.gateway-avatar-sm-store {
|
|
background: var(--ds-store-soft) !important;
|
|
width: 72px !important;
|
|
height: 72px !important;
|
|
}
|
|
.gateway-avatar-discount {
|
|
background: var(--ds-discount-soft) !important;
|
|
width: 80px !important;
|
|
height: 80px !important;
|
|
}
|
|
.gateway-avatar-sm-discount {
|
|
background: var(--ds-discount-soft) !important;
|
|
width: 72px !important;
|
|
height: 72px !important;
|
|
}
|
|
|
|
/* ── Discount Store Price Box ── */
|
|
.discount-price-box {
|
|
background: var(--ds-success-soft);
|
|
border: 1px solid rgba(16, 185, 129, .2);
|
|
}
|
|
.mud-theme-dark .discount-price-box {
|
|
border-color: rgba(16, 185, 129, .25);
|
|
}
|
|
|
|
/* ── Font Weight Utilities ── */
|
|
.fw-bold { font-weight: 700 !important; }
|
|
.fw-semibold { font-weight: 600 !important; }
|
|
|
|
/* ── Landing Hero Utilities ── */
|
|
.hero-title {
|
|
color: #fff;
|
|
font-size: clamp(1.6rem, 4.5vw, 2.4rem);
|
|
}
|
|
.hero-subtitle {
|
|
color: rgba(255,255,255,.82);
|
|
max-width: 520px;
|
|
}
|
|
.hero-cta-primary {
|
|
background: #fff !important;
|
|
color: var(--ds-brand-primary) !important;
|
|
font-weight: 700 !important;
|
|
}
|
|
.hero-cta-outline {
|
|
border-color: rgba(255,255,255,.5) !important;
|
|
color: #fff !important;
|
|
}
|
|
.hero-chip-glass {
|
|
background: rgba(255,255,255,.18) !important;
|
|
color: #fff !important;
|
|
backdrop-filter: blur(6px);
|
|
-webkit-backdrop-filter: blur(6px);
|
|
}
|
|
.hero-chip-outline {
|
|
border-color: rgba(255,255,255,.35) !important;
|
|
color: rgba(255,255,255,.85) !important;
|
|
}
|
|
.hero-glass-card {
|
|
background: rgba(255,255,255,.1);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(255,255,255,.15);
|
|
}
|
|
|
|
/* ── Dashboard tile centering ── */
|
|
.dash-tile {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
/* ── Dark mode design system ── */
|
|
.mud-theme-dark .mud-input-outlined .mud-input-outlined-border {
|
|
border-color: rgba(255,255,255,.2);
|
|
}
|
|
.mud-theme-dark .mud-input-outlined:hover .mud-input-outlined-border {
|
|
border-color: var(--mud-palette-primary);
|
|
}
|
|
.mud-theme-dark .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
|
|
box-shadow: 0 0 0 2px rgba(99,102,241,.25);
|
|
}
|
|
|
|
/* ── Landing step number avatar ── */
|
|
.landing-step-num {
|
|
width: 56px !important;
|
|
height: 56px !important;
|
|
}
|
|
|
|
/* ── Auth Dialog Unified Styling ── */
|
|
.auth-dialog-wrapper .mud-dialog-title { display: none; }
|
|
.auth-dialog-wrapper .mud-dialog-content { padding-bottom: 24px !important; }
|
|
.auth-dialog-content {
|
|
max-width: 400px;
|
|
margin: 0 auto;
|
|
}
|
|
.auth-dialog-content .captcha-box {
|
|
min-width: 96px;
|
|
min-height: 48px;
|
|
border-radius: var(--mud-default-borderradius);
|
|
letter-spacing: 4px;
|
|
font-weight: 600;
|
|
background: rgba(99,102,241,.08);
|
|
border: 1px solid var(--mud-palette-divider);
|
|
}
|
|
.mud-theme-dark .auth-dialog-content .captcha-box {
|
|
background: rgba(99,102,241,.15);
|
|
}
|
|
|
|
/* ── Captcha Row — reliable inline flex ── */
|
|
.captcha-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.captcha-row > .mud-input-control {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
}
|
|
.captcha-row > .mud-paper {
|
|
flex: 0 0 auto;
|
|
}
|
|
.captcha-row > .mud-button-root {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
/* ── Landing Featured Blog Banner ── */
|
|
.landing-blog-banner {
|
|
border: 1px solid var(--mud-palette-divider);
|
|
transition: box-shadow .2s, transform .15s;
|
|
}
|
|
.landing-blog-banner:hover {
|
|
box-shadow: var(--mud-elevation-4);
|
|
transform: translateY(-2px);
|
|
}
|
|
.landing-blog-thumb {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 12px;
|
|
object-fit: cover;
|
|
flex-shrink: 0;
|
|
}
|
|
.landing-blog-title {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
font-weight: 600;
|
|
}
|
|
.landing-blog-summary {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── Register Wizard Unified ── */
|
|
.wizard-section {
|
|
min-height: 80vh;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.wizard-card {
|
|
border-radius: var(--mud-default-borderradius) !important;
|
|
border: 1px solid var(--mud-palette-divider);
|
|
}
|
|
.wizard-card .mud-stepper {
|
|
background: transparent !important;
|
|
}
|
|
.wizard-card .mud-stepper-content {
|
|
padding-top: 16px !important;
|
|
}
|
|
|
|
/*#endregion*/
|
|
|
|
/* ── Package Purchase Dialog tiles ── */
|
|
.pkg-tile {
|
|
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
|
|
position: relative;
|
|
}
|
|
.pkg-tile:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 6px 20px rgba(0,0,0,.08);
|
|
border-color: var(--mud-palette-primary) !important;
|
|
}
|
|
.pkg-tile-badge {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
}
|
|
.pkg-payment-option {
|
|
transition: transform .15s ease, box-shadow .15s ease;
|
|
}
|
|
.pkg-payment-option:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,.06);
|
|
}
|
|
@media (max-width: 600px) {
|
|
.pkg-tile { padding: .8rem !important; }
|
|
.pkg-tile .mud-avatar-large { width: 48px !important; height: 48px !important; }
|
|
}
|