/* ========================================================= World Cup Mauritius V46 - Restore Mauritius Layout + Visibility Must load LAST in . ========================================================= */ /* ---------- Theme Base ---------- */ html[data-theme="light"] body{ background:linear-gradient(180deg,#f8fbff,#eef4ff 55%,#ffffff) !important; color:#071427 !important; } html[data-theme="dark"] body, body.dark-mauritius{ background: radial-gradient(circle at top right, rgba(37,99,235,.16), transparent 34%), radial-gradient(circle at top left, rgba(239,68,68,.10), transparent 30%), linear-gradient(180deg,#020817,#07111f 55%,#020817) !important; color:#f8fafc !important; } /* ---------- Global Text ---------- */ html[data-theme="light"] body :where(p,div,span,small,li,td,th,label,a,strong,b,i,em,section,article,main,aside){ color:#071427 !important; opacity:1 !important; } html[data-theme="dark"] body :where(p,div,span,small,li,td,th,label,a,strong,b,i,em,section,article,main,aside), body.dark-mauritius :where(p,div,span,small,li,td,th,label,a,strong,b,i,em,section,article,main,aside){ color:#f8fafc !important; opacity:1 !important; } html[data-theme="light"] body :where(h1,h2,h3,h4,h5,h6,.section-title,.page-title,.fw-bold,strong,b){ color:#06142f !important; } html[data-theme="dark"] body :where(h1,h2,h3,h4,h5,h6,.section-title,.page-title,.fw-bold,strong,b), body.dark-mauritius :where(h1,h2,h3,h4,h5,h6,.section-title,.page-title,.fw-bold,strong,b){ color:#ffffff !important; } html[data-theme="light"] body :where(.text-muted,.text-secondary,.small,.venue,.prediction-reason,.match-date,.kickoff-time){ color:#475467 !important; } html[data-theme="dark"] body :where(.text-muted,.text-secondary,.small,.venue,.prediction-reason,.match-date,.kickoff-time), body.dark-mauritius :where(.text-muted,.text-secondary,.small,.venue,.prediction-reason,.match-date,.kickoff-time){ color:#cbd5e1 !important; } /* ---------- Navbar ---------- */ html[data-theme="light"] .wc-nav{ background:#ffffff !important; border-bottom:1px solid rgba(16,24,40,.10) !important; } html[data-theme="dark"] .wc-nav, body.dark-mauritius .wc-nav{ background:rgba(2,8,23,.98) !important; border-bottom:1px solid rgba(255,255,255,.12) !important; } html[data-theme="light"] .wc-brand, html[data-theme="light"] .wc-brand *, html[data-theme="light"] .brand-main{ color:#071427 !important; -webkit-text-fill-color:#071427 !important; } html[data-theme="light"] .brand-mu{ color:#2563eb !important; -webkit-text-fill-color:#2563eb !important; } html[data-theme="dark"] .wc-brand, html[data-theme="dark"] .wc-brand *, body.dark-mauritius .wc-brand, body.dark-mauritius .wc-brand *{ color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; } html[data-theme="dark"] .brand-mu, body.dark-mauritius .brand-mu{ color:#fbbf24 !important; -webkit-text-fill-color:#fbbf24 !important; } html[data-theme="light"] .wc-menu .nav-link{ color:#071427 !important; } html[data-theme="dark"] .wc-menu .nav-link, body.dark-mauritius .wc-menu .nav-link{ color:#e2e8f0 !important; } .wc-menu .nav-link.active, .wc-menu .nav-link:hover{ color:#fbbf24 !important; background:rgba(251,191,36,.16) !important; border:1px solid rgba(251,191,36,.35) !important; } /* ---------- Mauritius Homepage Layout ---------- */ .mu-home-top-grid{ display:grid; grid-template-columns:minmax(0,2fr) minmax(320px,1fr); gap:24px; align-items:stretch; } .mu-local-card, .mu-engine-card{ border-radius:24px !important; padding:26px !important; } .mu-hero-v46{ position:relative; overflow:hidden; border-radius:32px; padding:34px; background: radial-gradient(circle at right bottom, rgba(255,255,255,.12), transparent 28%), linear-gradient(135deg,#123a7a 0%,#2563eb 100%) !important; box-shadow:0 24px 70px rgba(37,99,235,.22); } .mu-hero-v46::after{ content:"2026"; position:absolute; right:24px; bottom:-42px; font-size:10rem; font-weight:1000; color:rgba(255,255,255,.10); line-height:.8; } .mu-hero-content{ position:relative; z-index:2; display:grid; grid-template-columns:1.45fr .75fr; gap:28px; align-items:center; } .mu-hero-v46, .mu-hero-v46 *{ color:#ffffff !important; } .mu-hero-v46 .btn-light{ background:#ffffff !important; color:#071427 !important; border:1px solid rgba(255,255,255,.65) !important; -webkit-text-fill-color:#071427 !important; } .mu-hero-v46 .btn-success{ background:#22c55e !important; color:#ffffff !important; border:0 !important; -webkit-text-fill-color:#ffffff !important; } .mu-hero-v46 .btn-outline-light{ background:rgba(2,8,23,.18) !important; color:#ffffff !important; border:1px solid rgba(255,255,255,.55) !important; -webkit-text-fill-color:#ffffff !important; } .mu-next-side-card{ background:rgba(2,8,23,.42) !important; border:1px solid rgba(255,255,255,.15); border-radius:24px; padding:22px; backdrop-filter:blur(12px); } .mu-side-label{ color:#fbbf24 !important; font-weight:1000; text-transform:uppercase; font-size:.78rem; letter-spacing:.06em; margin-bottom:12px; } .mu-next-teams{ color:#ffffff !important; font-weight:1000; font-size:1.45rem; line-height:1.2; } .mu-next-teams span{ color:#fbbf24 !important; } .mu-next-time{ color:#dbeafe !important; font-weight:900; margin-top:12px; } .mu-stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .mu-home-info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; } html[data-theme="light"] .mu-stat, html[data-theme="light"] .mu-card, html[data-theme="light"] .trending-card, html[data-theme="light"] .card-v3{ background:#ffffff !important; color:#071427 !important; border:1px solid rgba(16,24,40,.10) !important; box-shadow:0 14px 36px rgba(16,24,40,.08) !important; } html[data-theme="dark"] .mu-stat, html[data-theme="dark"] .mu-card, html[data-theme="dark"] .trending-card, html[data-theme="dark"] .card-v3, body.dark-mauritius .mu-stat, body.dark-mauritius .mu-card, body.dark-mauritius .trending-card, body.dark-mauritius .card-v3{ background:linear-gradient(180deg,#071427,#0f172a) !important; color:#f8fafc !important; border:1px solid rgba(255,255,255,.14) !important; box-shadow:0 16px 42px rgba(0,0,0,.36) !important; } .team-badge-v46, .trending-card .badge{ background:#eef4ff !important; color:#071427 !important; border:1px solid rgba(37,99,235,.20) !important; -webkit-text-fill-color:#071427 !important; } html[data-theme="dark"] .team-badge-v46, html[data-theme="dark"] .trending-card .badge, body.dark-mauritius .team-badge-v46, body.dark-mauritius .trending-card .badge{ background:#ffffff !important; color:#071427 !important; border:1px solid rgba(255,255,255,.75) !important; -webkit-text-fill-color:#071427 !important; } .mu-stat{ border-radius:22px; padding:18px; } .mu-stat-label{ font-weight:1000; text-transform:uppercase; letter-spacing:.05em; font-size:.78rem; } html[data-theme="light"] .mu-stat-label{ color:#667085 !important; } html[data-theme="dark"] .mu-stat-label, body.dark-mauritius .mu-stat-label{ color:#cbd5e1 !important; } .mu-stat-value{ font-size:1.9rem; font-weight:1000; } html[data-theme="light"] .mu-stat-value{ color:#2563eb !important; } html[data-theme="dark"] .mu-stat-value, body.dark-mauritius .mu-stat-value{ color:#60a5fa !important; } /* ---------- General Cards ---------- */ html[data-theme="light"] :where(.card,.bg-white,.panel-card,.match-card-v3,.stat-box,.dashboard-tile,.table-card,.admin-card,.metric,.glass-card,.glass-card-v27,.hero-mut,.upcoming-banner,.chat-card,.group-card,.group-table-card,.standings-card,.side-card,.online-box,.welcome-banner,.next-match-card,.ai-card,.prediction-card){ background:#ffffff !important; color:#071427 !important; border:1px solid rgba(16,24,40,.10) !important; box-shadow:0 14px 36px rgba(16,24,40,.08) !important; } html[data-theme="dark"] :where(.card,.bg-white,.panel-card,.match-card-v3,.stat-box,.dashboard-tile,.table-card,.admin-card,.metric,.glass-card,.glass-card-v27,.hero-mut,.upcoming-banner,.chat-card,.group-card,.group-table-card,.standings-card,.side-card,.online-box,.welcome-banner,.next-match-card,.ai-card,.prediction-card), body.dark-mauritius :where(.card,.bg-white,.panel-card,.match-card-v3,.stat-box,.dashboard-tile,.table-card,.admin-card,.metric,.glass-card,.glass-card-v27,.hero-mut,.upcoming-banner,.chat-card,.group-card,.group-table-card,.standings-card,.side-card,.online-box,.welcome-banner,.next-match-card,.ai-card,.prediction-card){ background:linear-gradient(180deg,#071427,#0f172a) !important; color:#f8fafc !important; border:1px solid rgba(255,255,255,.14) !important; box-shadow:0 16px 42px rgba(0,0,0,.36) !important; } /* ---------- AI / Predictions black bar text ---------- */ html[data-theme="light"] :where(.ai-confidence-bar,.confidence-bar,.prediction-confidence,.confidence-track,.ai-progress,.prediction-progress,.ai-card .progress,.prediction-card .progress,.prob-bar,.prediction-head){ background:#071427 !important; color:#ffffff !important; border-radius:14px !important; } html[data-theme="dark"] :where(.ai-confidence-bar,.confidence-bar,.prediction-confidence,.confidence-track,.ai-progress,.prediction-progress,.ai-card .progress,.prediction-card .progress,.prob-bar,.prediction-head), body.dark-mauritius :where(.ai-confidence-bar,.confidence-bar,.prediction-confidence,.confidence-track,.ai-progress,.prediction-progress,.ai-card .progress,.prediction-card .progress,.prob-bar,.prediction-head){ background:#111827 !important; color:#ffffff !important; border-radius:14px !important; } :where(.ai-confidence-bar,.confidence-bar,.prediction-confidence,.confidence-track,.ai-progress,.prediction-progress,.ai-card .progress,.prediction-card .progress,.prob-bar,.prediction-head) *, :where(.ai-confidence-bar,.confidence-bar,.prediction-confidence,.confidence-track,.ai-progress,.prediction-progress,.ai-card .progress,.prediction-card .progress,.prob-bar,.prediction-head) strong, :where(.ai-confidence-bar,.confidence-bar,.prediction-confidence,.confidence-track,.ai-progress,.prediction-progress,.ai-card .progress,.prediction-card .progress,.prob-bar,.prediction-head) span{ color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; opacity:1 !important; } .alert-info, .prediction-mode, .prediction-mode-banner, .mode-banner, .info-banner, .current-mode, .current-mode-banner{ background:#dff8ff !important; color:#071427 !important; border:1px solid rgba(37,99,235,.25) !important; } .alert-info *, .prediction-mode *, .prediction-mode-banner *, .mode-banner *, .info-banner *, .current-mode *, .current-mode-banner *{ color:#071427 !important; -webkit-text-fill-color:#071427 !important; opacity:1 !important; } /* ---------- Groups / Tables ---------- */ html[data-theme="light"] :where(table,.table,.table-responsive,.standings-table,.group-table){ background:#ffffff !important; color:#071427 !important; } html[data-theme="dark"] :where(table,.table,.table-responsive,.standings-table,.group-table), body.dark-mauritius :where(table,.table,.table-responsive,.standings-table,.group-table){ background:#071427 !important; color:#f8fafc !important; } html[data-theme="light"] :where(table,.table,.standings-table,.group-table) :where(tr,td,th,thead,tbody){ background:transparent !important; color:#071427 !important; border-color:rgba(16,24,40,.16) !important; } html[data-theme="dark"] :where(table,.table,.standings-table,.group-table) :where(tr,td,th,thead,tbody), body.dark-mauritius :where(table,.table,.standings-table,.group-table) :where(tr,td,th,thead,tbody){ background:transparent !important; color:#f8fafc !important; border-color:rgba(255,255,255,.18) !important; } /* ---------- Chat dark active room text ---------- */ .room-badge{ background:#fbbf24 !important; color:#071427 !important; border:1px solid rgba(7,20,39,.22) !important; -webkit-text-fill-color:#071427 !important; } html[data-theme="light"] .chat-room-list a{ color:#071427 !important; background:#eef4ff !important; border:1px solid rgba(37,99,235,.20) !important; } html[data-theme="dark"] .chat-room-list a, body.dark-mauritius .chat-room-list a{ color:#dbeafe !important; background:#111827 !important; border:1px solid rgba(255,255,255,.12) !important; } .chat-room-list a.active, .chat-room-list a.active *, html[data-theme="dark"] .chat-room-list a.active, html[data-theme="dark"] .chat-room-list a.active *, body.dark-mauritius .chat-room-list a.active, body.dark-mauritius .chat-room-list a.active *{ background:#fbbf24 !important; color:#071427 !important; -webkit-text-fill-color:#071427 !important; } html[data-theme="light"] :where(.chat-feed-v39,.chat-feed-v37,.chat-feed-v36){ background:#f8fafc !important; } html[data-theme="dark"] :where(.chat-feed-v39,.chat-feed-v37,.chat-feed-v36), body.dark-mauritius :where(.chat-feed-v39,.chat-feed-v37,.chat-feed-v36){ background:#07111f !important; } html[data-theme="light"] :where(.chat-item-v39,.chat-item-v37,.chat-item-v36){ background:#ffffff !important; border:1px solid rgba(16,24,40,.10) !important; } html[data-theme="dark"] :where(.chat-item-v39,.chat-item-v37,.chat-item-v36), body.dark-mauritius :where(.chat-item-v39,.chat-item-v37,.chat-item-v36){ background:#111827 !important; border:1px solid rgba(255,255,255,.10) !important; } html[data-theme="light"] :where(.chat-text-v39,.chat-text-v37,.chat-text-v36){ color:#071427 !important; } html[data-theme="dark"] :where(.chat-text-v39,.chat-text-v37,.chat-text-v36), body.dark-mauritius :where(.chat-text-v39,.chat-text-v37,.chat-text-v36){ color:#ffffff !important; } html[data-theme="light"] :where(.chat-user-v39,.chat-user-v37,.chat-user-v36,.welcome-title){ color:#2563eb !important; } html[data-theme="dark"] :where(.chat-user-v39,.chat-user-v37,.chat-user-v36,.welcome-title), body.dark-mauritius :where(.chat-user-v39,.chat-user-v37,.chat-user-v36,.welcome-title){ color:#fbbf24 !important; } .chat-avatar-v39,.chat-avatar-v37,.chat-avatar-v36,.avatar{ color:#ffffff !important; } /* ---------- Reactions / buttons / inputs ---------- */ html[data-theme="light"] :where(.reaction-btn,.quick-reaction,.creole-reaction-btn){ background:#eef4ff !important; color:#071427 !important; border:1px solid rgba(37,99,235,.20) !important; } html[data-theme="dark"] :where(.reaction-btn,.quick-reaction,.creole-reaction-btn), body.dark-mauritius :where(.reaction-btn,.quick-reaction,.creole-reaction-btn){ background:#071427 !important; color:#ffffff !important; border:1px solid rgba(255,255,255,.16) !important; } input,textarea,select,.form-control,#chatUsername,#chatMessage{ background:#ffffff !important; color:#071427 !important; border:2px solid rgba(251,191,36,.75) !important; -webkit-text-fill-color:#071427 !important; } input::placeholder,textarea::placeholder,#chatUsername::placeholder,#chatMessage::placeholder{ color:#64748b !important; opacity:1 !important; } .btn-primary,.send-btn-v39,.send-btn-v37,.send-btn-v36,.mu-btn.live,.mu-btn.whatsapp,.whatsapp-btn{ color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; } .phase4-btn.dark{ color:#ffffff !important; background:#071427 !important; -webkit-text-fill-color:#ffffff !important; } .phase4-btn.fast{ color:#071427 !important; background:#fbbf24 !important; -webkit-text-fill-color:#071427 !important; } /* ---------- Footer ---------- */ .mu-footer{ background:linear-gradient(135deg,#020817,#071427 55%,#0f172a) !important; border-top:4px solid #fbbf24 !important; color:#ffffff !important; } .mu-footer,.mu-footer *, html[data-theme="light"] .mu-footer,html[data-theme="light"] .mu-footer *, html[data-theme="dark"] .mu-footer,html[data-theme="dark"] .mu-footer *, body.dark-mauritius .mu-footer,body.dark-mauritius .mu-footer *{ color:#dbeafe !important; -webkit-text-fill-color:#dbeafe !important; opacity:1 !important; } .mu-footer h1,.mu-footer h2,.mu-footer h3,.mu-footer h4,.mu-footer strong, html[data-theme="light"] .mu-footer h1,html[data-theme="light"] .mu-footer h2,html[data-theme="light"] .mu-footer h3,html[data-theme="light"] .mu-footer h4,html[data-theme="light"] .mu-footer strong, html[data-theme="dark"] .mu-footer h1,html[data-theme="dark"] .mu-footer h2,html[data-theme="dark"] .mu-footer h3,html[data-theme="dark"] .mu-footer h4,html[data-theme="dark"] .mu-footer strong{ color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; } .wc-footer{ display:none !important; } /* ---------- Responsive ---------- */ @media(max-width:1100px){ .chat-phase-layout, .mu-hero-content, .mu-home-top-grid, .mu-home-info-grid{ grid-template-columns:1fr !important; } } @media(max-width:768px){ .mu-stats-grid{ grid-template-columns:repeat(2,1fr) !important; } .mu-hero-v46{ padding:24px !important; border-radius:24px !important; } .mu-hero-v46 h1{ font-size:2rem !important; } } @media(max-width:480px){ .mu-stats-grid{ grid-template-columns:1fr 1fr !important; gap:10px !important; } }