/* ═══════════════════════════════════════════════════════════════════ Mysomero Achieva — Frontend Styles v1.4.0 Design: Premium sidebar layout — deep navy + gold accent Font: DM Sans (body) + DM Serif Display (headings) ═══════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Serif+Display&display=swap'); /* ══════════════════════════════════════════════════════════════════ FULL-VIEWPORT APP SHELL (mc-campus-page) Mirrors the msm-chat-page pattern in Mysomero AI exactly. The body_class filter in class-mc-shortcode.php stamps this class so Achieva fills the entire browser window, hiding WP chrome. ══════════════════════════════════════════════════════════════════ */ /* 2. Guard: keep .mc-app flex layout even if a theme selector matches it */ body.mc-campus-page .mc-app { display: flex !important; } /* 3. Lock html + body — no page scrollbar, no gaps */ html:has(body.mc-campus-page), body.mc-campus-page { overflow: hidden !important; width: 100% !important; height: 100% !important; padding: 0 !important; margin: 0 !important; background: var(--mc-bg, #f4f6fb) !important; } body.mc-campus-page.admin-bar { margin-top: 0 !important; } /* 4. Hide admin bar (causes layout shift) */ body.mc-campus-page #wpadminbar { display: none !important; } /* 5. Hide theme chrome */ body.mc-campus-page header.site-header, body.mc-campus-page .site-header, body.mc-campus-page footer.site-footer, body.mc-campus-page .site-footer, body.mc-campus-page nav.main-navigation, body.mc-campus-page .main-navigation, body.mc-campus-page .ast-above-header-wrap, body.mc-campus-page .ast-below-header-wrap, body.mc-campus-page .elementor-location-header, body.mc-campus-page .elementor-location-footer, body.mc-campus-page .header-widget-region, body.mc-campus-page #header, body.mc-campus-page #footer, body.mc-campus-page #colophon { display: none !important; } /* ───────────────────────────────────────────────────────────────────── FULL-VIEWPORT LAYOUT v1.3.4 ───────────────────────────────────────────────────────────────────── Strategy: use height:100dvh on .mc-app itself (not position:fixed) so scroll works regardless of what WordPress wrappers surround it. position:fixed caused issues when WordPress theme wrappers between and .mc-app had overflow:hidden or unknown heights. .mc-app height:100dvh, display:flex row, overflow:hidden ├── .mc-sidebar flex:0 0 width, overflow-y:auto (scrolls) └── .mc-body flex:1 1 0, flex col, overflow:hidden ├── .mc-topbar flex:0 0 auto (mobile bar) └── .mc-main flex:1 1 0, overflow-y:auto (SCROLLS) ───────────────────────────────────────────────────────────────────── */ /* ── Strip WP wrapper constraints so mc-app can be 100dvh ─── */ body.mc-campus-page, body.mc-campus-page #page, body.mc-campus-page #content, body.mc-campus-page #primary, body.mc-campus-page .site-main, body.mc-campus-page article, body.mc-campus-page .entry-content, body.mc-campus-page .post-content, body.mc-campus-page .wp-block-group, body.mc-campus-page .container, body.mc-campus-page .site-content, body.mc-campus-page .content-area { display: contents !important; /* dissolve wrappers — children lay out as if wrappers don't exist */ } /* ── html + body: no page scroll for dashboard, free scroll for auth ── */ html:has(body.mc-campus-page:not(.mc-auth-page)) { overflow: hidden !important; height: 100% !important; } body.mc-campus-page:not(.mc-auth-page) { overflow: hidden !important; margin: 0 !important; padding: 0 !important; height: 100% !important; } /* Auth page: allow natural page scroll */ html:has(body.mc-auth-page), body.mc-auth-page { overflow: auto !important; height: auto !important; } /* Auth page: release the app-shell height + overflow lock so the sign-up form (especially with the referral notice) can scroll on mobile */ body.mc-auth-page .mc-app { height: auto !important; min-height: 100dvh !important; min-height: 100vh !important; min-height: 100dvh !important; overflow: visible !important; display: block !important; } body.mc-auth-page .mc-wrap { overflow: visible !important; height: auto !important; } body.mc-campus-page.admin-bar { margin-top: 0 !important; } body.mc-campus-page #wpadminbar { display: none !important; } /* ── Hide theme chrome ───────────────────────────────────── */ body.mc-campus-page header.site-header, body.mc-campus-page .site-header, body.mc-campus-page footer.site-footer, body.mc-campus-page .site-footer, body.mc-campus-page .main-navigation, body.mc-campus-page .ast-above-header-wrap, body.mc-campus-page .ast-below-header-wrap, body.mc-campus-page .elementor-location-header, body.mc-campus-page .elementor-location-footer, body.mc-campus-page #header, body.mc-campus-page #footer, body.mc-campus-page #colophon { display: none !important; } /* ── App shell ───────────────────────────────────────────── */ body.mc-campus-page .mc-app { /* position:fixed tears mc-app out of document flow completely — no theme wrapper (Astra containers, WP block wrappers, etc.) can ever constrain its width or position again */ position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100dvh !important; height: 100vh !important; height: 100dvh !important; max-width: none !important; min-height: 0 !important; display: flex !important; flex-direction: row !important; overflow: hidden !important; z-index: 9999 !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; border: none !important; box-shadow: none !important; } /* mc-wrap + mc-dashboard are also on the same element */ body.mc-campus-page .mc-wrap, body.mc-campus-page .mc-dashboard { min-height: 0 !important; max-height: none !important; width: 100% !important; } /* ── Sidebar — scroll node 1 ─────────────────────────────── */ body.mc-campus-page .mc-sidebar { flex: 0 0 var(--mc-sidebar-w) !important; width: var(--mc-sidebar-w) !important; min-height: 0 !important; height: 100% !important; overflow-y: auto !important; overflow-x: hidden !important; position: relative !important; top: auto !important; flex-shrink: 0 !important; } /* ── Body column ─────────────────────────────────────────── */ body.mc-campus-page .mc-body { flex: 1 1 0 !important; min-width: 0 !important; min-height: 0 !important; height: 100% !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } /* ── Topbar ──────────────────────────────────────────────── */ body.mc-campus-page .mc-topbar { flex-shrink: 0 !important; flex-grow: 0 !important; } /* ── Main content — scroll node 2 ───────────────────────── */ /* ── Main content — scroll node 2 ───────────────────────── */ body.mc-campus-page .mc-main { flex: 1 1 0 !important; min-height: 0 !important; height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: thin !important; scrollbar-color: rgba(255,255,255,.18) transparent !important; } body.mc-campus-page .mc-main::-webkit-scrollbar { width: 4px !important; } body.mc-campus-page .mc-main::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 4px; } body.mc-campus-page .mc-main::-webkit-scrollbar-track { background: transparent; } /* Sidebar — barely-there scrollbar */ body.mc-campus-page .mc-sidebar { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; } body.mc-campus-page .mc-sidebar::-webkit-scrollbar { width: 3px; } body.mc-campus-page .mc-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; } body.mc-campus-page .mc-sidebar::-webkit-scrollbar-track { background: transparent; } /* ── Mobile ──────────────────────────────────────────────── */ @media (max-width: 768px) { /* Shrink shell height to leave room for fixed bottom nav */ body.mc-campus-page .mc-app { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100vw !important; bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important; height: auto !important; } /* Sidebar slides in as overlay — removed from flex flow */ body.mc-campus-page .mc-sidebar { position: fixed !important; top: 0 !important; left: 0 !important; /* Extend to full screen height — sidebar has its own scroll */ bottom: 0 !important; height: 100dvh !important; height: 100vh !important; height: 100dvh !important; width: 280px !important; flex: none !important; z-index: 300 !important; transform: translateX(-100%) !important; transition: transform .28s cubic-bezier(.4,0,.2,1) !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; /* Bottom padding so last nav item clears the bottom nav bar */ padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 16px) !important; } body.mc-campus-page .mc-sidebar.mc-sidebar-open { transform: translateX(0) !important; box-shadow: 4px 0 24px rgba(0,0,0,.35) !important; } /* Body fills full width since sidebar is overlaid */ body.mc-campus-page .mc-body { width: 100% !important; } /* Give main a little bottom breathing room */ body.mc-campus-page .mc-main { padding-bottom: 20px !important; } } :root { /* Brand */ --mc-navy: #0f2040; --mc-navy2: #1a3a6b; --mc-blue: #2563eb; --mc-gold: #f0a500; --mc-gold2: #d4870a; --mc-green: #16a34a; --mc-red: #dc2626; --mc-purple: #7c3aed; --mc-teal: #0891b2; /* Surface */ --mc-bg: #f4f6fb; --mc-card: #ffffff; --mc-border: #e4e9f2; --mc-border2: #cbd5e1; /* Text */ --mc-text: #0f172a; --mc-text2: #334155; --mc-muted: #64748b; --mc-faint: #94a3b8; /* Sidebar */ --mc-sidebar-w: 240px; --mc-sidebar-bg: #0f2040; --mc-sidebar-hover: rgba(255,255,255,.07); --mc-sidebar-active:rgba(255,255,255,.12); /* Misc */ --mc-radius: 12px; --mc-radius-lg:18px; --mc-shadow: 0 1px 3px rgba(15,32,64,.06), 0 4px 16px rgba(15,32,64,.08); --mc-shadow-lg:0 8px 32px rgba(15,32,64,.14); } /* ── Reset ─────────────────────────────────────────────────────── */ .mc-wrap *, .mc-wrap *::before, .mc-wrap *::after { box-sizing: border-box; margin: 0; padding: 0; } .mc-wrap { font-family: 'DM Sans', 'Segoe UI', Arial, sans-serif; font-size: 15px; color: var(--mc-text); background: var(--mc-bg); min-height: 80vh; } /* ── Dashboard shell ────────────────────────────────────────────── */ .mc-dashboard { display: flex; min-height: 90vh; position: relative; } /* ── Body column (wraps topbar + main; sibling to sidebar) ──────── */ .mc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; } /* ══════════════════════════════════════════════════════════════════ SIDEBAR ══════════════════════════════════════════════════════════════════ */ .mc-sidebar { width: var(--mc-sidebar-w); background: var(--mc-sidebar-bg); flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; z-index: 100; transition: transform .28s cubic-bezier(.4,0,.2,1); } /* scrollbar */ .mc-sidebar::-webkit-scrollbar { width: 4px; } .mc-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 2px; } /* Brand */ .mc-sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 22px 18px 16px; border-bottom: 1px solid rgba(255,255,255,.08); } .mc-brand-mark { width: 36px; height: 36px; background: linear-gradient(135deg, var(--mc-gold), #e8890a); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; font-weight: 700; flex-shrink: 0; box-shadow: 0 2px 8px rgba(240,165,0,.4); } .mc-brand-text { display: flex; flex-direction: column; line-height: 1.2; } .mc-brand-name { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: .2px; } .mc-brand-sub { font-size: 11px; color: rgba(255,255,255,.45); } /* User card */ .mc-sidebar-user { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; position: relative; } .mc-sidebar-avatar { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); flex-shrink: 0; object-fit: cover; } .mc-sidebar-userinfo { flex: 1; min-width: 0; } .mc-sidebar-username { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mc-sidebar-usermeta { font-size: 11px; color: rgba(255,255,255,.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; } .mc-tier-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .mc-tier-dot-free { background: rgba(255,255,255,.3); } .mc-tier-dot-basic { background: var(--mc-gold); box-shadow: 0 0 6px var(--mc-gold); } .mc-tier-dot-pro { background: #a78bfa; box-shadow: 0 0 6px #a78bfa; } /* Tier badge */ .mc-sidebar-tier { display: flex; align-items: center; gap: 8px; padding: 6px 16px 10px; /* No bottom border — credits widget flows directly below */ } .mc-tier-pill { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; } .mc-tier-free { background: rgba(255,255,255,.15); color: rgba(255,255,255,.8); } .mc-tier-basic { background: var(--mc-gold); color: #000; } .mc-tier-pro { background: linear-gradient(135deg,#a78bfa,#60a5fa); color: #fff; } /* Nav */ .mc-sidebar-nav { flex: 0 0 auto; padding: 10px 0; } .mc-nav-section-label { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,.3); padding: 14px 18px 5px; } .mc-nav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 16px 9px 18px; background: none; border: none; color: rgba(255,255,255,.65); font-family: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; text-align: left; border-radius: 0; transition: background .15s, color .15s; position: relative; } .mc-nav-item:hover { background: var(--mc-sidebar-hover); color: rgba(255,255,255,.9); } .mc-nav-item.active { background: var(--mc-sidebar-active); color: #fff; font-weight: 600; } .mc-nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; background: var(--mc-gold); border-radius: 0 3px 3px 0; } .mc-nav-icon { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .mc-nav-icon svg { width: 15px; height: 15px; display: block; } .mc-nav-label { flex: 1; } /* Challenge nav glow pulse — replaces streak text badge */ .mc-nav-badge { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; display: none; box-shadow: 0 0 0 0 rgba(245,158,11,.6); animation: mc-chal-nav-pulse 2s ease-in-out infinite; flex-shrink: 0; margin-left: auto; } @keyframes mc-chal-nav-pulse { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,.7); } 70% { box-shadow: 0 0 0 6px rgba(245,158,11,0); } 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); } } .mc-nav-item-upgrade { color: var(--mc-gold); font-weight: 600; } .mc-nav-item-upgrade:hover { color: var(--mc-gold); } /* Logout nav item */ .mc-nav-item-logout { text-decoration: none; display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 16px; border-radius: 9px; font-size: 13.5px; font-weight: 600; cursor: pointer; border: none; background: rgba(239, 68, 68, 0.12); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.25); transition: background .18s, color .18s; margin: 0 0 4px 0; } .mc-nav-item-logout:hover { background: rgba(239, 68, 68, 0.22); color: #fca5a5; text-decoration: none; } .mc-nav-item-logout .mc-nav-icon { color: #f87171; flex-shrink: 0; } /* Sidebar footer */ .mc-sidebar-footer { padding: 12px 16px 18px; border-top: 1px solid rgba(255,255,255,.08); } .mc-ai-credits { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 10px 12px; display: flex; align-items: center; gap: 7px; } .mc-ai-credits-icon { color: var(--mc-gold); display: flex; align-items: center; flex-shrink: 0; } .mc-ai-credits-icon svg { width: 13px; height: 13px; display: block; } .mc-ai-credits-count { font-size: 15px; font-weight: 700; color: #fff; } .mc-ai-credits-label { font-size: 11px; color: rgba(255,255,255,.4); } /* ══════════════════════════════════════════════════════════════════ MOBILE TOPBAR (hidden on desktop) ══════════════════════════════════════════════════════════════════ */ .mc-topbar { display: none; align-items: center; gap: 12px; padding: 12px 16px; background: var(--mc-navy); position: sticky; top: 0; z-index: 200; } .mc-topbar-title { color: #fff; font-size: 16px; font-weight: 700; flex: 1; } .mc-hamburger { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; gap: 4px; padding: 4px; } .mc-hamburger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .2s ease, top .25s cubic-bezier(.4,0,.2,1); position: relative; } /* Morph into X when sidebar is open */ .mc-sidebar-open ~ .mc-body .mc-hamburger span:nth-child(1), .mc-hamburger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .mc-sidebar-open ~ .mc-body .mc-hamburger span:nth-child(2), .mc-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .mc-sidebar-open ~ .mc-body .mc-hamburger span:nth-child(3), .mc-hamburger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Overlay */ .mc-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 99; } .mc-sidebar-overlay.active { display: block; } /* ══════════════════════════════════════════════════════════════════ MAIN CONTENT ══════════════════════════════════════════════════════════════════ */ .mc-main { flex: 1; min-width: 0; min-height: 0; padding: 24px 20px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* ── Hero carousel — full-bleed, edge to edge ─────────────────── */ .mc-hero-carousel { position: relative; width: calc(100% + 40px); margin: -24px -20px 24px; overflow: hidden; } .mc-hero-track { display: flex; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .mc-hero-track::-webkit-scrollbar { display: none; } .mc-hero-slide { position: relative; overflow: hidden; flex: 0 0 100%; scroll-snap-align: start; min-height: 200px; display: flex; align-items: center; padding: 36px 28px 44px; color: #fff; } .mc-hero-slide-welcome { background: linear-gradient(135deg, var(--mc-navy) 0%, var(--mc-navy2) 100%); } .mc-hero-slide-challenge{ background: linear-gradient(135deg, #1a3a6b 0%, #2563eb 100%); } .mc-hero-slide-upgrade { background: linear-gradient(135deg, #3b1f6b 0%, #7c3aed 100%); } .mc-hero-slide-referral { background: linear-gradient(135deg, #0f2040 0%, #0891b2 100%); } .mc-hero-text { position: relative; z-index: 2; max-width: 480px; } .mc-hero-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .mc-hero-title { font-family: 'DM Serif Display', serif; font-size: 28px; font-weight: 400; color: #fff; margin-bottom: 6px; } .mc-hero-sub { font-size: 14px; color: rgba(255,255,255,.75); line-height: 1.5; } .mc-hero-cta { margin-top: 16px; display: inline-flex; align-items: center; background: #fff; color: var(--mc-navy); font-weight: 700; font-size: 13.5px; border: none; border-radius: 999px; padding: 10px 22px; cursor: pointer; transition: transform .15s, box-shadow .15s; } .mc-hero-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.18); } /* Dots indicator */ .mc-hero-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; display: flex; justify-content: center; gap: 6px; } .mc-hero-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.35); transition: background .2s, width .2s; cursor: pointer; } .mc-hero-dot.active { background: #fff; width: 18px; border-radius: 4px; } /* Subtle twinkling starfield */ .mc-hero-stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: radial-gradient(1.5px 1.5px at 8% 22%, rgba(255,255,255,.9) 0%, transparent 60%), radial-gradient(1px 1px at 18% 68%, rgba(255,255,255,.7) 0%, transparent 60%), radial-gradient(1.5px 1.5px at 28% 40%, rgba(255,255,255,.5) 0%, transparent 60%), radial-gradient(1px 1px at 38% 80%, rgba(255,255,255,.8) 0%, transparent 60%), radial-gradient(2px 2px at 50% 18%, rgba(255,255,255,.6) 0%, transparent 60%), radial-gradient(1px 1px at 60% 55%, rgba(255,255,255,.9) 0%, transparent 60%), radial-gradient(1.5px 1.5px at 70% 30%, rgba(255,255,255,.5) 0%, transparent 60%), radial-gradient(1px 1px at 80% 75%, rgba(255,255,255,.8) 0%, transparent 60%), radial-gradient(2px 2px at 90% 45%, rgba(255,255,255,.6) 0%, transparent 60%), radial-gradient(1px 1px at 96% 15%, rgba(255,255,255,.7) 0%, transparent 60%), radial-gradient(1.5px 1.5px at 45% 90%, rgba(255,255,255,.5) 0%, transparent 60%), radial-gradient(1px 1px at 12% 50%, rgba(255,255,255,.6) 0%, transparent 60%); background-repeat: no-repeat; animation: mc-stars-twinkle 4s ease-in-out infinite alternate; } @keyframes mc-stars-twinkle { 0%, 100% { opacity: .35; } 50% { opacity: .9; } } @media (prefers-reduced-motion: reduce) { .mc-hero-stars { animation: none; opacity: .6; } } /* Section title above feature lists */ .mc-fl-section-title { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--mc-muted); margin: 28px 0 14px; white-space: nowrap; } .mc-fl-section-title::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--mc-gold); flex-shrink: 0; animation: mc-dot-pulse 1.8s ease-in-out infinite; } .mc-fl-section-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--mc-border) 0%, transparent 100%); } @keyframes mc-dot-pulse { 0%, 100% { transform: scale(1); opacity: .55; box-shadow: 0 0 0 0 rgba(240,165,0,.4); } 50% { transform: scale(1.25); opacity: 1; box-shadow: 0 0 0 4px rgba(240,165,0,.12); } } @media (prefers-reduced-motion: reduce) { .mc-fl-section-title::before { animation: none; } } .mc-stats-row + .mc-fl-section-title { margin-top: 4px; } .mc-feature-list-primary { margin-top: 0; } .mc-feature-list-secondary { margin-top: 0; } /* Stats row */ .mc-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0 0 24px; } .mc-stat-card { background: var(--mc-card); border: 1px solid var(--mc-border); border-radius: var(--mc-radius); padding: 14px; box-shadow: 0 1px 3px rgba(15,32,64,.05); display: flex; align-items: center; gap: 10px; transition: box-shadow .2s, transform .15s; } .mc-stat-card:hover { box-shadow: 0 4px 14px rgba(15,32,64,.09); transform: translateY(-1px); } .mc-stat-icon { width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; display: flex; align-items: center; justify-content: center; } .mc-stat-icon svg { width: 16px; height: 16px; display: block; } .mc-stat-pts .mc-stat-icon { background: rgba(212,135,10,.12); color: var(--mc-gold2); } .mc-stat-month .mc-stat-icon { background: rgba(22,163,74,.1); color: var(--mc-green); } .mc-stat-streak .mc-stat-icon { background: rgba(220,38,38,.1); color: var(--mc-red); } .mc-stat-profile .mc-stat-icon{ background: rgba(37,99,235,.1); color: var(--mc-blue); } .mc-stat-body { min-width: 0; flex: 1; } .mc-stat-lbl { font-size: 11px; color: var(--mc-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; } .mc-spin-sm { color: var(--mc-faint); font-size: 13px; } /* ── Stat card skeleton shimmer ──────────────────────────────── */ @keyframes mc-shimmer { 0% { background-position: -300px 0; } 100% { background-position: 300px 0; } } .mc-stat-skeleton { height: 20px; border-radius: 6px; margin-bottom: 6px; background: linear-gradient(90deg, var(--mc-border) 25%, color-mix(in srgb, var(--mc-border) 40%, white) 50%, var(--mc-border) 75%); background-size: 600px 100%; animation: mc-shimmer 1.4s ease-in-out infinite; } .mc-stat-skeleton-lbl { height: 9px; width: 70%; border-radius: 4px; background: linear-gradient(90deg, var(--mc-border) 25%, color-mix(in srgb, var(--mc-border) 40%, white) 50%, var(--mc-border) 75%); background-size: 600px 100%; animation: mc-shimmer 1.4s ease-in-out .2s infinite; } /* Count-up entrance: stat values animate in */ .mc-stat-val { font-size: 22px; font-weight: 800; color: var(--mc-navy2); font-family: 'DM Serif Display', serif; line-height: 1.1; animation: mc-stat-pop .4s cubic-bezier(.34,1.56,.64,1) both; } @keyframes mc-stat-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } } /* Panel header */ .mc-panel-header { margin-bottom: 22px; padding: 0 18px; } .mc-panel-title { font-family: 'DM Serif Display', serif; font-size: 22px; font-weight: 400; color: var(--mc-navy); margin-bottom: 4px; display: flex; align-items: center; gap: 10px; } .mc-panel-title-icon { width: 34px; height: 34px; border-radius: 9px; background: rgba(15,32,64,.07); color: var(--mc-navy2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mc-panel-title-icon svg { width: 17px; height: 17px; display: block; } .mc-panel-sub { font-size: 14px; color: var(--mc-muted); } /* Tabs */ .mc-tabs { display: none; } /* legacy fallback — not used in sidebar layout */ /* ── Panel transition system ───────────────────────────────────── Panels stay in flow (display:block) but are visually hidden via opacity + pointer-events. The .active class triggers the entry animation. .mc-tab-panel--exit fires the leave animation via JS before the incoming panel becomes visible. ──────────────────────────────────────────────────────────────── */ .mc-tab-panel { display: none; max-width: 900px; margin: 0 auto; /* centre on wide screens */ } .mc-tab-panel.active { display: block; animation: mc-panel-in .28s cubic-bezier(.25,.46,.45,.94) both; } .mc-tab-panel.mc-tab-panel--exit { animation: mc-panel-out .18s cubic-bezier(.25,.46,.45,.94) both; pointer-events: none; } @keyframes mc-panel-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes mc-panel-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); } } /* ── Buttons ─────────────────────────────────────────────────── */ .mc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 18px; border-radius: 8px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; border: 2px solid transparent; text-decoration: none; transition: all .18s; } .mc-btn-primary { background: var(--mc-navy2); color: #fff; border-color: var(--mc-navy2); } .mc-btn-primary:hover { background: var(--mc-navy); color: #fff; } .mc-btn-outline { background: transparent; color: var(--mc-navy2); border-color: var(--mc-navy2); } .mc-btn-outline:hover { background: var(--mc-navy2); color: #fff; } .mc-btn-ai { background: linear-gradient(135deg,#7c3aed,#2563eb); color:#fff; border:none; } .mc-btn-ai:hover { opacity:.88; color:#fff; } .mc-btn-upgrade { background: var(--mc-gold); color: #000; border-color: var(--mc-gold); } .mc-btn-upgrade svg, .mc-btn-primary svg, .mc-btn-outline svg, .mc-btn-ai svg, .mc-btn-sm svg { width: 14px; height: 14px; display: block; flex-shrink: 0; } .mc-btn-upgrade:hover { background: var(--mc-gold2); border-color: var(--mc-gold2); } .mc-btn-full { width: 100%; } .mc-btn-large { padding: 12px 24px; font-size: 15px; } .mc-btn-sm { padding: 5px 12px; font-size: 12px; } .mc-btn-pro { background: linear-gradient(135deg,var(--mc-purple),var(--mc-blue)); border:none; } /* ── Alerts ──────────────────────────────────────────────────── */ .mc-alert { padding: 10px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 12px; } .mc-alert-error { background: #fef2f2; color: var(--mc-red); border: 1px solid #fecaca; } .mc-alert-success { background: #f0fdf4; color: var(--mc-green); border: 1px solid #bbf7d0; } .mc-alert-info { background: #eff6ff; color: var(--mc-blue); border: 1px solid #bfdbfe; } /* ── Form fields ─────────────────────────────────────────────── */ .mc-field { display: flex; flex-direction: column; gap: 4px; flex: 1; } .mc-field-privacy-toggle { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 12px; color: var(--mc-muted); cursor: pointer; user-select: none; } .mc-field-privacy-toggle input[type="checkbox"] { accent-color: var(--mc-purple); width: 13px; height: 13px; cursor: pointer; flex-shrink: 0; } .mc-field label { font-size: 13px; font-weight: 600; color: var(--mc-muted); } .mc-field input, .mc-field select, .mc-field textarea, .mc-input-full, .mc-textarea, .mc-input-inline, .mc-select-inline { border: 1.5px solid var(--mc-border2); border-radius: 8px; padding: 9px 12px; font-size: 14px; color: var(--mc-text); background: #fff; transition: border-color .15s; width: 100%; font-family: inherit; } .mc-field input:focus, .mc-field select:focus, .mc-field textarea:focus, .mc-input-full:focus, .mc-textarea:focus { border-color: var(--mc-blue); outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.1); } .mc-field-row { display: flex; gap: 12px; flex-wrap: wrap; } .mc-field-row .mc-field { min-width: 140px; } .mc-textarea { resize: vertical; min-height: 100px; } .mc-input-inline { width: auto; } .mc-select-inline { width: auto; } .mc-input-readonly { background: #f8fafc; color: var(--mc-muted); } /* ── Auth — legacy compat (kept for any external references) ── */ .mc-auth-wrap { max-width: 460px; margin: 32px auto; } .mc-auth-tabs { display: flex; border-bottom: 2px solid var(--mc-border); margin-bottom: 24px; } .mc-tab-btn { flex: 1; background: none; border: none; padding: 12px; font-size: 15px; font-weight: 600; color: var(--mc-muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; font-family: inherit; } .mc-tab-btn.active { color: var(--mc-navy2); border-bottom-color: var(--mc-navy2); } .mc-panel { display: none; } .mc-panel.active { display: block; } .mc-panel h2 { font-size: 20px; margin-bottom: 4px; color: var(--mc-navy); font-family: 'DM Serif Display', serif; } .mc-auth-sub { color: var(--mc-muted); font-size: 14px; margin-bottom: 20px; } /* ═══════════════════════════════════════════════════════════════ MYSOMERO LAUNCHPAD — Auth v2.1.0 Split-screen: left = brand story, right = form Design: clean, Udemy-inspired, responsive-first ═══════════════════════════════════════════════════════════════ */ /* ── Page scaffold ──────────────────────────────────────────── */ .mc-auth-shell { display: grid; grid-template-columns: 5fr 6fr; min-height: 100vh; background: #fff; } /* ── Left panel — brand ─────────────────────────────────────── */ .mc-auth-left { background: var(--mc-navy, #0f2040); display: flex; flex-direction: column; padding: 40px 48px; position: relative; overflow: hidden; } /* subtle radial glow — the page's one signature element */ .mc-auth-left::before { content: ''; position: absolute; top: -120px; right: -120px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(240,165,0,.18) 0%, transparent 70%); pointer-events: none; } .mc-auth-left::after { content: ''; position: absolute; bottom: -80px; left: -80px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(240,165,0,.08) 0%, transparent 70%); pointer-events: none; } /* decorative circles (kept for compatibility, visually minimal) */ .mc-auth-deco { display: none; } /* wordmark */ .mc-auth-brand-mark { font-family: 'DM Serif Display', serif; font-size: 18px; color: #fff; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; } .mc-auth-brand-logo { width: 32px; height: 32px; flex-shrink: 0; } .mc-auth-beta { background: var(--mc-gold, #f0a500); color: #0f2040; font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 20px; letter-spacing: .6px; text-transform: uppercase; } /* pitch block — centred in the remaining space */ .mc-auth-pitch { flex: 1; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; padding: 40px 0 32px; } .mc-auth-pitch-headline { font-family: 'DM Serif Display', serif; font-size: 38px; line-height: 1.18; color: #fff; margin-bottom: 16px; letter-spacing: -.3px; } .mc-auth-pitch-headline em { color: var(--mc-gold, #f0a500); font-style: normal; } .mc-auth-pitch-sub { color: rgba(255,255,255,.55); font-size: 14px; line-height: 1.7; max-width: 320px; margin-bottom: 36px; } /* feature list — simple rows, not cards */ .mc-auth-feats { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; } .mc-auth-feat { display: flex; align-items: flex-start; gap: 12px; } .mc-auth-feat-icon { width: 34px; height: 34px; flex-shrink: 0; background: rgba(240,165,0,.15); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; margin-top: 1px; } .mc-auth-feat-body { flex: 1; } .mc-auth-feat-title { color: #fff; font-size: 13px; font-weight: 600; margin-bottom: 1px; } .mc-auth-feat-sub { color: rgba(255,255,255,.4); font-size: 12px; line-height: 1.45; } /* stat row */ .mc-auth-stats { display: flex; gap: 28px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.08); } .mc-auth-stat-num { font-family: 'DM Serif Display', serif; font-size: 20px; color: #fff; line-height: 1; } .mc-auth-stat-lbl { font-size: 11px; color: rgba(255,255,255,.38); margin-top: 3px; } .mc-auth-left-foot { font-size: 10px; color: rgba(255,255,255,.2); position: relative; z-index: 1; margin-top: 32px; } /* ── Right panel — form ─────────────────────────────────────── */ .mc-auth-right { background: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 48px 32px; min-height: 100vh; overflow-y: auto; } .mc-auth-card { width: 100%; max-width: 400px; } /* mobile-only brand (hidden on desktop) */ .mc-auth-mobile-brand { display: none; margin-bottom: 32px; } .mc-auth-mobile-brand .mc-auth-brand-mark { color: var(--mc-navy, #0f2040); justify-content: center; } /* tab toggle */ .mc-auth-toggle { display: flex; border-bottom: 2px solid #e8ecf0; margin-bottom: 28px; gap: 0; } .mc-auth-tab { flex: 1; padding: 11px 8px; font-size: 14px; font-weight: 600; font-family: 'DM Sans', sans-serif; border: none; border-bottom: 2px solid transparent; background: transparent; color: #94a3b8; cursor: pointer; margin-bottom: -2px; transition: color .2s, border-color .2s; outline: none; -webkit-tap-highlight-color: transparent; } .mc-auth-tab.active { color: #fff; background: var(--mc-navy, #0f2040); border-bottom-color: transparent; border-radius: 6px 6px 0 0; } .mc-auth-tab:hover:not(.active) { color: #1e293b; border-bottom-color: #cbd5e1; } .mc-auth-tab:focus-visible { outline: 2px solid rgba(15,32,64,.25); outline-offset: 2px; border-radius: 3px; } /* panel heading */ .mc-auth-panel { display: none; } .mc-auth-panel.active { display: block; animation: mc-auth-fadein .2s ease both; } @keyframes mc-auth-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .mc-auth-panel-head { margin-bottom: 22px; } .mc-auth-panel-head h2 { font-family: 'DM Serif Display', serif; font-size: 26px; color: var(--mc-navy, #0f2040); margin-bottom: 4px; line-height: 1.2; } .mc-auth-panel-head p { color: #64748b; font-size: 14px; } /* form fields */ .mc-auth-field { margin-bottom: 14px; } .mc-auth-field label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 5px; } .mc-auth-field label small { font-weight: 400; color: #94a3b8; font-size: 12px; } .mc-auth-field input { width: 100%; padding: 10px 13px; border: 1.5px solid #dde1e8; border-radius: 8px; font-size: 14px; font-family: 'DM Sans', sans-serif; background: #fff; color: #0f172a; outline: none; transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; } .mc-auth-field input:focus { border-color: var(--mc-navy, #0f2040); box-shadow: 0 0 0 3px rgba(15,32,64,.08); } .mc-auth-field input::placeholder { color: #b0b8c6; } .mc-auth-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* validation hint */ .mc-auth-hint { font-size: 11px; margin-top: 4px; min-height: 15px; color: #94a3b8; } .mc-auth-hint-ok { color: var(--mc-green, #16a34a) !important; } .mc-auth-hint-err { color: var(--mc-red, #dc2626) !important; } /* alerts */ .mc-auth-alert { padding: 10px 13px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; line-height: 1.5; } .mc-auth-alert-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; } .mc-auth-alert-info { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; } /* referral notice */ .mc-auth-referral { display: flex; align-items: center; gap: 10px; background: #fefce8; border: 1px solid #fde68a; border-radius: 8px; padding: 10px 13px; font-size: 13px; color: #92400e; margin-bottom: 16px; line-height: 1.45; } .mc-auth-referral-gift { font-size: 17px; flex-shrink: 0; } /* CTA button */ .mc-auth-cta { width: 100%; padding: 12px; font-size: 15px; font-weight: 700; font-family: 'DM Sans', sans-serif; background: var(--mc-navy, #0f2040); color: #fff; border: none; border-radius: 8px; cursor: pointer; transition: background .15s, transform .1s; margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 8px; letter-spacing: .1px; } .mc-auth-cta:hover { background: #1a3a6b; } .mc-auth-cta:active { transform: scale(.985); } .mc-auth-cta-arrow { font-size: 17px; line-height: 1; transition: transform .15s; } .mc-auth-cta:hover .mc-auth-cta-arrow { transform: translateX(3px); } .mc-auth-forgot { text-align: center; margin-top: 14px; font-size: 13px; color: #64748b; } .mc-auth-forgot a { color: var(--mc-navy, #0f2040); text-decoration: none; font-weight: 600; } .mc-auth-forgot a:hover { text-decoration: underline; } .mc-auth-terms { text-align: center; font-size: 11px; color: #94a3b8; margin-top: 14px; line-height: 1.6; } /* ── Responsive ─────────────────────────────────────────────── */ @media (max-width: 960px) { .mc-auth-shell { grid-template-columns: 1fr 1fr; } .mc-auth-left { padding: 32px 32px; } .mc-auth-pitch-headline { font-size: 30px; } .mc-auth-pitch-sub { font-size: 13px; } } @media (max-width: 700px) { .mc-auth-shell { grid-template-columns: 1fr; } .mc-auth-left { display: none; } .mc-auth-right { min-height: 100svh; min-height: 100vh; padding: 36px 20px 48px; justify-content: flex-start; padding-top: 48px; } .mc-auth-card { max-width: 100%; } .mc-auth-mobile-brand { display: flex; justify-content: center; } } @media (max-width: 380px) { .mc-auth-field-row { grid-template-columns: 1fr; } .mc-auth-right { padding: 32px 16px 40px; } } /* ── Cards ───────────────────────────────────────────────────── */ .mc-section-card { background: transparent; border: none; border-radius: 0; padding: 0; margin-bottom: 28px; box-shadow: none; } .mc-wr-card { margin-bottom: 28px; } /* ── Writing Widget Hero Header ─────────────────────────────── */ .mc-wr-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 18px 18px; background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border-bottom: 1.5px solid #bae6fd; margin: -12px -20px 0; /* bleed over mc-main desktop padding */ } @media (max-width: 768px) { .mc-wr-hero { margin: -16px 0 0; /* mc-main is padding:0 on mobile */ } .mc-wr-tabs { margin: 0; /* already flush */ } } .mc-wr-hero-text { flex: 1; } .mc-wr-hero-title { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 700; color: var(--mc-navy, #0f2040); margin-bottom: 4px; font-family: 'DM Serif Display', serif; } .mc-wr-hero-title svg { stroke: #0891b2; flex-shrink: 0; } .mc-wr-hero-sub { font-size: 13px; color: #0369a1; margin: 0; line-height: 1.4; } .mc-section-card h3 { font-size: 16px; color: var(--mc-navy); margin-bottom: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; } .mc-h3-icon { width: 26px; height: 26px; background: rgba(15,32,64,.07); color: var(--mc-navy2); border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mc-h3-icon svg { width: 14px; height: 14px; display: block; } /* ── Feature list (home tab) ─────────────────────────────────── */ /* Single-column row cards — clean, tappable, works on any screen */ .mc-feature-list { display: flex; flex-direction: column; gap: 12px; } .mc-feature-item { display: flex; align-items: center; gap: 14px; background: var(--mc-card); border: 1px solid var(--mc-border); border-radius: 14px; padding: 15px 16px; box-shadow: 0 1px 3px rgba(15,32,64,.05), 0 1px 2px rgba(15,32,64,.04); cursor: pointer; position: relative; transition: box-shadow .2s ease, transform .15s ease, border-color .2s ease; -webkit-tap-highlight-color: transparent; } .mc-feature-item:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(15,32,64,.1), 0 2px 6px rgba(15,32,64,.06); border-color: var(--mc-border2); } .mc-feature-item:active { transform: translateY(0); box-shadow: none; } /* ── Feature item icon wraps (replaces old emoji + accent bar) ────────── */ .mc-fi-icon-wrap { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: opacity .15s; } .mc-fi-icon-wrap svg { width: 20px; height: 20px; display: block; } .mc-feature-item:hover .mc-fi-icon-wrap { opacity: .85; } .mc-fi-challenge .mc-fi-icon-wrap { background: rgba(37,99,235,.1); color: #2563eb; } .mc-fi-cv .mc-fi-icon-wrap { background: rgba(22,163,74,.1); color: #16a34a; } .mc-fi-cover .mc-fi-icon-wrap { background: rgba(8,145,178,.1); color: #0891b2; } .mc-fi-interview .mc-fi-icon-wrap { background: rgba(124,58,237,.1); color: #7c3aed; } .mc-fi-roadmap .mc-fi-icon-wrap { background: rgba(26,111,232,.1); color: #1a6fe8; } .mc-fi-research .mc-fi-icon-wrap { background: rgba(124,58,237,.1); color: #7c3aed; } .mc-fi-writing .mc-fi-icon-wrap { background: rgba(8,145,178,.1); color: #0891b2; } .mc-fi-leaderboard .mc-fi-icon-wrap{ background: rgba(240,165,0,.12); color: #d4870a; } .mc-fi-referral .mc-fi-icon-wrap { background: rgba(240,165,0,.12); color: #d4870a; } /* Hide old accent bar — kept in DOM for backwards compat but invisible */ .mc-fi-accent { display: none; } /* Icon */ .mc-fi-icon { display: none; /* replaced by .mc-fi-icon-wrap */ } /* Text */ .mc-fi-body { flex: 1; min-width: 0; } .mc-fi-title { font-size: 15px; font-weight: 700; color: var(--mc-navy); line-height: 1.3; } .mc-fi-desc { font-size: 12.5px; color: var(--mc-muted); margin-top: 2px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Optional "Start" badge on primary action */ .mc-fi-badge { flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 99px; letter-spacing: .3px; } .mc-fi-badge-primary { background: var(--mc-navy); color: #fff; } /* Chevron */ .mc-fi-arrow { flex-shrink: 0; color: var(--mc-faint); display: flex; align-items: center; margin-left: 2px; } .mc-fi-arrow svg { width: 15px; height: 15px; display: block; } /* Desktop: 2-column grid for the feature list */ @media (min-width: 640px) { .mc-feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .mc-fi-desc { white-space: normal; } } @media (min-width: 1100px) { .mc-feature-list { grid-template-columns: 1fr 1fr 1fr; } } /* ── Points list ─────────────────────────────────────────────── */ .mc-points-list { display: flex; flex-direction: column; gap: 6px; } .mc-pts-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; background: #f8fafc; font-size: 13px; } .mc-pts-action { flex: 1; font-weight: 600; color: var(--mc-text2); } .mc-pts-positive { color: var(--mc-green); font-weight: 700; white-space: nowrap; } .mc-pts-negative { color: var(--mc-red); font-weight: 700; } .mc-pts-date { color: var(--mc-faint); font-size: 12px; white-space: nowrap; } /* ══════════════════════════════════════════════════════════════ DAILY CHALLENGE — v1.5.0 ══════════════════════════════════════════════════════════════ */ /* Outer wrapper */ .mc-challenge-wrap { padding: 0; } /* ── Skeleton ────────────────────────────────────────────────── */ .mc-chal-skeleton { padding: 20px; } .mc-chal-skeleton-header { height: 18px; border-radius: 4px; width: 48%; margin-bottom: 12px; background: linear-gradient(90deg,#e2e8f0 25%,#f1f5f9 50%,#e2e8f0 75%); background-size: 200% 100%; animation: mc-shimmer 1.4s infinite; } .mc-chal-skeleton-bar { height: 12px; border-radius: 3px; margin-bottom: 9px; background: linear-gradient(90deg,#e2e8f0 25%,#f1f5f9 50%,#e2e8f0 75%); background-size: 200% 100%; animation: mc-shimmer 1.4s infinite; } @keyframes mc-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} } /* ══════════════════════════════════════════════════════════════ CHALLENGE CARD — premium clean redesign ══════════════════════════════════════════════════════════════ */ .mc-chal-card { background: var(--mc-card); border-radius: 16px; overflow: hidden; border: 1.5px solid var(--mc-border); box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.06); font-family: inherit; } [data-theme="dark"] .mc-chal-card { box-shadow: 0 1px 3px rgba(0,0,0,.15), 0 4px 20px rgba(0,0,0,.18); } /* ── Header ──────────────────────────────────────────────────── */ .mc-chal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px 22px 18px; background: #0b1834; border-bottom: 1px solid rgba(255,255,255,.06); position: relative; } /* Subtle corner accent — no gradient, just a thin gold line top */ .mc-chal-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: #c8a84b; border-radius: 16px 16px 0 0; } [data-theme="dark"] .mc-chal-header { background: #0a1628; border-bottom-color: rgba(255,255,255,.08); } .mc-chal-header-left { flex: 1; min-width: 0; } /* "DAILY CHALLENGE" eyebrow */ .mc-chal-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: #c8a84b; margin-bottom: 7px; } .mc-chal-eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: #c8a84b; flex-shrink: 0; animation: mc-dot-pulse 2s ease-in-out infinite; } @keyframes mc-dot-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.7); } } /* Keep the old class name working too */ .mc-chal-day-label { font-size: 9.5px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: #c8a84b; display: block; margin-bottom: 7px; } .mc-chal-title { font-size: 15px; font-weight: 700; color: #fff; margin: 0; line-height: 1.4; letter-spacing: -.1px; } .mc-chal-header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; padding-top: 2px; } /* ── Type pill ────────────────────────────────────────────────── */ .mc-chal-type-pill { font-size: 9.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 3px 10px; border-radius: 5px; border: 1px solid transparent; } .mc-pill-mcq { background: rgba(99,102,241,.18); color: #c7d2fe; border-color: rgba(99,102,241,.3); } .mc-pill-tf { background: rgba(16,185,129,.15); color: #6ee7b7; border-color: rgba(16,185,129,.28); } .mc-pill-open { background: rgba(245,158,11,.15); color: #fcd34d; border-color: rgba(245,158,11,.28); } .mc-pill-fillin { background: rgba(14,165,233,.15); color: #7dd3fc; border-color: rgba(14,165,233,.28); } /* ── Points chip ──────────────────────────────────────────────── */ .mc-chal-pts-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #c8a84b; background: rgba(200,168,75,.13); border: 1px solid rgba(200,168,75,.28); padding: 3px 9px; border-radius: 5px; } /* ── Meta bar (countdown + close time) ───────────────────────── */ .mc-chal-time-bar { display: flex; align-items: center; justify-content: space-between; padding: 9px 22px; background: var(--mc-bg); border-bottom: 1px solid var(--mc-border); font-size: 12px; } [data-theme="dark"] .mc-chal-time-bar { background: rgba(255,255,255,.025); } .mc-chal-countdown { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--mc-navy2); font-size: 12.5px; } .mc-chal-cd-digits { font-variant-numeric: tabular-nums; letter-spacing: .4px; } .mc-chal-cd-sep { font-size: 10px; font-weight: 500; opacity: .45; margin-right: 1px; } .mc-chal-cd-urgent { color: #dc2626 !important; } .mc-chal-expired { color: var(--mc-muted); font-style: italic; font-size: 11.5px; } .mc-chal-closetime { font-size: 11px; color: var(--mc-muted); } /* ── Question area ───────────────────────────────────────────── */ .mc-chal-question-wrap { padding: 18px 22px 0; } .mc-chal-question { font-size: 14.5px; line-height: 1.75; color: var(--mc-text); background: var(--mc-bg); border: 1.5px solid var(--mc-border); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; position: relative; } [data-theme="dark"] .mc-chal-question { background: rgba(255,255,255,.03); } /* Thin left accent on the question box */ .mc-chal-question::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; background: #c8a84b; border-radius: 0 2px 2px 0; opacity: .6; } /* ── Form container ──────────────────────────────────────────── */ .mc-chal-form { padding: 0 22px 22px; } /* ── MCQ options ─────────────────────────────────────────────── */ .mc-chal-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .mc-chal-option { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 11px 14px; border-radius: 10px; border: 1.5px solid var(--mc-border); background: var(--mc-card); transition: border-color .15s, background .15s, box-shadow .12s; user-select: none; } .mc-chal-option input[type="radio"] { display: none; } .mc-chal-option:hover { border-color: #1e3a6e; background: #f0f4ff; } [data-theme="dark"] .mc-chal-option:hover { background: rgba(30,58,110,.12); border-color: rgba(99,130,235,.35); } .mc-chal-option:has(input:checked) { border-color: #1e3a6e; background: #f0f4ff; box-shadow: 0 0 0 3px rgba(30,58,110,.07); } [data-theme="dark"] .mc-chal-option:has(input:checked) { background: rgba(30,58,110,.15); border-color: rgba(99,130,235,.5); } .mc-chal-opt-letter { width: 27px; height: 27px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #edf0f8; color: #1e3a6e; font-size: 11.5px; font-weight: 800; border-radius: 6px; transition: background .15s, color .15s; letter-spacing: .3px; } .mc-chal-option:has(input:checked) .mc-chal-opt-letter { background: #1e3a6e; color: #fff; } .mc-chal-opt-text { font-size: 13.5px; color: var(--mc-text); line-height: 1.45; } /* ── True / False ─────────────────────────────────────────────── */ .mc-chal-tf-row { display: flex; gap: 10px; margin-bottom: 16px; } .mc-chal-tf-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 12px; border-radius: 12px; border: 1.5px solid var(--mc-border); cursor: pointer; background: var(--mc-card); transition: border-color .15s, background .15s, box-shadow .15s; font-size: 13.5px; font-weight: 600; color: var(--mc-text); } .mc-chal-tf-btn input { display: none; } .mc-chal-tf-btn:hover { border-color: #1e3a6e; background: #f0f4ff; } .mc-chal-tf-btn:has(input:checked) { border-color: #1e3a6e; background: #f0f4ff; box-shadow: 0 0 0 3px rgba(30,58,110,.07); } [data-theme="dark"] .mc-chal-tf-btn { border-color: rgba(255,255,255,.1); } [data-theme="dark"] .mc-chal-tf-btn:hover, [data-theme="dark"] .mc-chal-tf-btn:has(input:checked) { background: rgba(30,58,110,.14); border-color: rgba(99,130,235,.45); } .mc-chal-tf-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 18px; font-weight: 700; } .mc-tf-true { background: #dcfce7; color: #15803d; } .mc-tf-false { background: #fee2e2; color: #b91c1c; } /* ── Textarea ─────────────────────────────────────────────────── */ .mc-chal-textarea { width: 100%; border: 1.5px solid var(--mc-border); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; font-family: inherit; background: var(--mc-card); color: var(--mc-text); resize: vertical; min-height: 100px; margin-bottom: 16px; transition: border-color .15s, box-shadow .15s; box-sizing: border-box; line-height: 1.65; } .mc-chal-textarea:focus { outline: none; border-color: #1e3a6e; box-shadow: 0 0 0 3px rgba(30,58,110,.07); } /* ── Hint ─────────────────────────────────────────────────────── */ .mc-chal-hint-wrap { margin-bottom: 16px; } .mc-chal-hint-toggle { background: none; border: 1px solid var(--mc-border); border-radius: 99px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--mc-muted); display: inline-flex; align-items: center; gap: 5px; font-family: inherit; padding: 5px 12px; transition: color .15s, border-color .15s; } .mc-chal-hint-toggle:hover { color: #1e3a6e; border-color: #93c5fd; } .mc-chal-hint { margin-top: 8px; background: #fefce8; border: 1.5px solid #fde68a; border-radius: 8px; padding: 11px 14px; font-size: 13px; color: #92400e; line-height: 1.55; } [data-theme="dark"] .mc-chal-hint { background: rgba(252,211,77,.06); color: #fcd34d; border-color: rgba(252,211,77,.18); } /* ── Submit button ────────────────────────────────────────────── */ .mc-chal-submit-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; font-size: 14.5px; font-weight: 700; margin-top: 4px; } /* ── Result block ─────────────────────────────────────────────── */ .mc-chal-result { margin: 0 22px 22px; border-radius: 12px; padding: 18px; animation: mc-result-in .3s ease both; } @keyframes mc-result-in { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} } .mc-chal-res-correct { background: #f0fdf4; border: 1.5px solid #86efac; } .mc-chal-res-wrong { background: #fef2f2; border: 1.5px solid #fca5a5; } .mc-chal-res-pending { background: #fffbeb; border: 1.5px solid #fcd34d; } [data-theme="dark"] .mc-chal-res-correct { background: rgba(22,163,74,.08); border-color: rgba(134,239,172,.22); } [data-theme="dark"] .mc-chal-res-wrong { background: rgba(220,38,38,.08); border-color: rgba(252,165,165,.22); } [data-theme="dark"] .mc-chal-res-pending { background: rgba(245,158,11,.08); border-color: rgba(252,211,77,.22); } .mc-chal-res-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .mc-chal-res-icon { width: 28px; height: 28px; flex-shrink: 0; } .mc-chal-res-correct .mc-chal-res-icon { stroke: #16a34a; } .mc-chal-res-wrong .mc-chal-res-icon { stroke: #dc2626; } .mc-chal-res-pending .mc-chal-res-icon { stroke: #d97706; } .mc-chal-res-status { font-size: 16px; font-weight: 700; } .mc-chal-res-correct .mc-chal-res-status { color: #15803d; } .mc-chal-res-wrong .mc-chal-res-status { color: #b91c1c; } .mc-chal-res-pending .mc-chal-res-status { color: #b45309; } /* ── AI Score bar ─────────────────────────────────────────────── */ .mc-chal-score-wrap { margin-bottom: 12px; } .mc-chal-score-label { font-size: 13px; color: var(--mc-text2); margin-bottom: 6px; font-weight: 600; } .mc-chal-score-track { height: 6px; border-radius: 99px; background: rgba(0,0,0,.07); overflow: hidden; } .mc-chal-score-fill { height: 100%; border-radius: 99px; background: #1e3a6e; transition: width .5s ease; } .mc-chal-feedback { font-size: 13px; color: var(--mc-text2); line-height: 1.6; background: var(--mc-bg); border-radius: 8px; padding: 10px 12px; margin-top: 10px; border: 1px solid var(--mc-border); } /* ── Correct answer ───────────────────────────────────────────── */ .mc-chal-correct-ans { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; font-size: 13px; } .mc-chal-ans-label { color: var(--mc-muted); } .mc-chal-ans-val { background: #dcfce7; color: #166534; font-weight: 700; padding: 2px 10px; border-radius: 5px; font-size: 13px; } [data-theme="dark"] .mc-chal-ans-val { background: rgba(22,163,74,.16); color: #86efac; } /* ── Explanation ──────────────────────────────────────────────── */ .mc-chal-explanation { font-size: 13px; color: var(--mc-text2); line-height: 1.65; border-left: 3px solid #c8a84b; padding-left: 12px; margin: 10px 0; } /* ── Points breakdown ─────────────────────────────────────────── */ .mc-chal-pts-row { margin-top: 12px; } .mc-chal-pts-earned { font-size: 13px; font-weight: 700; color: var(--mc-green); } .mc-chal-pts-breakdown { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 6px; } .mc-chal-pts-chip2 { display: flex; flex-direction: column; align-items: center; background: var(--mc-bg); border: 1.5px solid var(--mc-border); border-radius: 9px; padding: 7px 14px; font-size: 11px; color: var(--mc-muted); font-weight: 600; } .mc-chal-pts-chip2 strong { font-size: 14px; color: var(--mc-green); margin-top: 2px; font-weight: 700; } .mc-pts-bonus strong { color: #d97706; } .mc-pts-streak strong { color: #ea580c; } .mc-chal-pts-total { font-size: 12px; color: var(--mc-muted); } .mc-chal-pts-total strong { color: var(--mc-text); font-weight: 700; } /* ── Streak ───────────────────────────────────────────────────── */ .mc-chal-streak { display: inline-flex; align-items: center; gap: 5px; background: #fff7ed; border: 1.5px solid #fdba74; color: #c2410c; border-radius: 99px; padding: 5px 14px; font-size: 13px; font-weight: 700; margin-top: 10px; animation: mc-streak-pop .4s cubic-bezier(.34,1.56,.64,1) both; } @keyframes mc-streak-pop { from{transform:scale(.85);opacity:0} to{transform:scale(1);opacity:1} } [data-theme="dark"] .mc-chal-streak { background: rgba(234,88,12,.1); border-color: rgba(253,186,116,.28); color: #fb923c; } /* ── Empty state ──────────────────────────────────────────────── */ .mc-chal-empty { text-align: center; padding: 40px 20px; } .mc-chal-empty-icon { font-size: 38px; margin-bottom: 12px; display: block; } .mc-chal-empty-msg { color: var(--mc-muted); font-size: 14px; line-height: 1.5; } /* ── Gate ─────────────────────────────────────────────────────── */ .mc-chal-gate { text-align: center; padding: 28px 20px 22px; margin: 0 22px 22px; background: #f8f9ff; border-radius: 10px; border: 1.5px solid #e0e7ff; } [data-theme="dark"] .mc-chal-gate { background: rgba(99,102,241,.05); border-color: rgba(99,102,241,.18); } .mc-chal-gate-icon { font-size: 30px; margin-bottom: 10px; display: block; } .mc-chal-gate p { color: var(--mc-muted); font-size: 14px; margin-bottom: 16px; line-height: 1.5; } /* ── Submit feedback animations ───────────────────────────────── */ .mc-chal-shake { animation: mc-shake .4s ease; } @keyframes mc-shake { 0%,100%{transform:none} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} } .mc-chal-correct-pop { animation: mc-pop .35s ease; } @keyframes mc-pop { 0%{transform:scale(1)} 50%{transform:scale(1.03)} 100%{transform:scale(1)} } /* ══════════════════════════════════════════════════════════════ REFERRAL PROGRAMME ══════════════════════════════════════════════════════════════ */ .mc-ref-wrap { padding: 0; } /* ── Header ──────────────────────────────────────────────────── */ .mc-ref-header { padding: 20px 22px 18px; border-bottom: 1px solid var(--mc-border); } .mc-ref-header-top { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .mc-ref-icon-wrap { width: 36px; height: 36px; border-radius: 10px; background: rgba(240,165,0,.1); color: #d4870a; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mc-ref-icon-wrap svg { width: 18px; height: 18px; } .mc-ref-heading { font-size: 15px; font-weight: 700; color: var(--mc-navy); margin: 0; line-height: 1.2; } .mc-ref-subhead { font-size: 12px; color: var(--mc-muted); margin: 2px 0 0; } /* ── Reward rules ────────────────────────────────────────────── */ .mc-ref-rules { display: flex; flex-direction: column; gap: 8px; } .mc-ref-rule { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 9px; background: var(--mc-bg); border: 1px solid var(--mc-border); } [data-theme="dark"] .mc-ref-rule { background: rgba(255,255,255,.03); } .mc-ref-pts { font-size: 13px; font-weight: 700; color: #16a34a; background: #f0fdf4; border: 1px solid #bbf7d0; padding: 3px 10px; border-radius: 99px; flex-shrink: 0; white-space: nowrap; } [data-theme="dark"] .mc-ref-pts { background: rgba(22,163,74,.12); border-color: rgba(22,163,74,.25); color: #4ade80; } .mc-ref-rule span:last-child { font-size: 13px; color: var(--mc-text2); line-height: 1.4; } /* ── Stats row ───────────────────────────────────────────────── */ .mc-ref-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--mc-border); border-bottom: 1px solid var(--mc-border); } .mc-ref-stat { background: var(--mc-card); padding: 16px 12px; text-align: center; } .mc-ref-stat strong { display: block; font-size: 22px; font-weight: 700; color: var(--mc-navy); line-height: 1; margin-bottom: 4px; } [data-theme="dark"] .mc-ref-stat strong { color: #f1f5f9; } .mc-ref-stat span { font-size: 11px; color: var(--mc-muted); font-weight: 500; } /* ── Link section ────────────────────────────────────────────── */ .mc-ref-link-section { padding: 18px 22px; border-bottom: 1px solid var(--mc-border); } .mc-ref-link-label { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--mc-muted); margin-bottom: 8px; display: block; } .mc-ref-link-row { display: flex; gap: 8px; margin-bottom: 10px; } .mc-ref-url-input { flex: 1; border: 1.5px solid var(--mc-border); border-radius: 9px; padding: 10px 12px; font-size: 13px; font-family: inherit; background: var(--mc-bg); color: var(--mc-muted); cursor: default; outline: none; min-width: 0; transition: border-color .15s; } .mc-ref-url-input:focus { border-color: #2563eb; } [data-theme="dark"] .mc-ref-url-input { background: rgba(255,255,255,.04); } .mc-ref-copy-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 9px; border: none; cursor: pointer; font-size: 13px; font-weight: 700; font-family: inherit; background: #0f1f45; color: #fff; transition: background .15s, transform .1s; flex-shrink: 0; } .mc-ref-copy-btn:hover { background: #1a3060; transform: translateY(-1px); } .mc-ref-copy-btn:active { transform: none; } [data-theme="dark"] .mc-ref-copy-btn { background: #1e40af; } [data-theme="dark"] .mc-ref-copy-btn:hover { background: #2563eb; } .mc-ref-copy-btn svg { width: 14px; height: 14px; } /* ── Share buttons ───────────────────────────────────────────── */ .mc-ref-share { display: flex; gap: 8px; } .mc-share-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 9px; font-size: 13px; font-weight: 600; text-decoration: none; border: 1.5px solid var(--mc-border); color: var(--mc-text); background: var(--mc-card); transition: border-color .15s, background .15s; } .mc-share-btn:hover { border-color: #2563eb; background: #f0f5ff; color: #2563eb; } [data-theme="dark"] .mc-share-btn:hover { background: rgba(37,99,235,.1); border-color: rgba(99,130,235,.4); color: #93c5fd; } .mc-share-btn svg { width: 16px; height: 16px; flex-shrink: 0; } .mc-share-wa { } /* ── Recent referrals ────────────────────────────────────────── */ .mc-ref-recent { padding: 18px 22px 20px; } .mc-ref-recent-label { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--mc-muted); margin-bottom: 10px; display: block; } .mc-ref-list { display: flex; flex-direction: column; gap: 1px; } .mc-ref-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 9px; font-size: 13px; background: var(--mc-bg); border: 1px solid var(--mc-border); margin-bottom: 6px; } .mc-ref-row:last-child { margin-bottom: 0; } [data-theme="dark"] .mc-ref-row { background: rgba(255,255,255,.03); } .mc-ref-row-icon { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; } .mc-ref-row-icon.subscribed { background: #fef9c3; } .mc-ref-row-icon.signup { background: #dcfce7; } .mc-ref-row-icon.other { background: #f1f5f9; } .mc-ref-row-email { flex: 1; font-weight: 600; color: var(--mc-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mc-ref-row-status { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 99px; flex-shrink: 0; } .mc-ref-row-status.subscribed { background: #fef9c3; color: #854d0e; border: 1px solid #fde68a; } .mc-ref-row-status.signup { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; } .mc-ref-row-status.other { background: #f1f5f9; color: var(--mc-muted); border: 1px solid var(--mc-border); } [data-theme="dark"] .mc-ref-row-status.subscribed { background: rgba(217,119,6,.12); border-color: rgba(217,119,6,.25); color: #fbbf24; } [data-theme="dark"] .mc-ref-row-status.signup { background: rgba(22,163,74,.12); border-color: rgba(22,163,74,.25); color: #4ade80; } .mc-ref-row-pts { font-size: 12px; color: var(--mc-muted); flex-shrink: 0; } /* ── Empty / loading ─────────────────────────────────────────── */ .mc-ref-loading { text-align: center; padding: 40px 20px; color: var(--mc-muted); font-size: 14px; } .mc-ref-error { padding: 16px 22px; color: var(--mc-muted); font-size: 13px; } /* Legacy aliases kept for other widgets */ .mc-center-loader { text-align: center; padding: 40px; color: var(--mc-muted); } .mc-type-badge { display: inline-block; background: #e0e7ff; color: #3730a3; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; letter-spacing: .5px; } /* ── Gate ────────────────────────────────────────────────────── */ .mc-gate { text-align: center; padding: 32px; background: var(--mc-bg); border-radius: var(--mc-radius); } .mc-gate p { margin-bottom: 16px; color: var(--mc-muted); } .mc-gate-large { padding: 48px; } /* ── Type badge ──────────────────────────────────────────────── */ .mc-type-badge { display: inline-block; background: #e0e7ff; color: #3730a3; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; letter-spacing: .5px; } /* ── CV Builder ──────────────────────────────────────────────── */ .mc-cv-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; } .mc-cv-sections { display: flex; gap: 4px; overflow-x: auto; border-bottom: 2px solid var(--mc-border); margin-bottom: 20px; } .mc-cv-nav { background: none; border: none; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--mc-muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; font-family: inherit; } .mc-cv-nav.active { color: var(--mc-navy2); border-bottom-color: var(--mc-navy2); } .mc-cv-panel { display: none; } .mc-cv-panel.active { display: block; } .mc-cv-panel h4 { font-size: 15px; color: var(--mc-navy); margin-bottom: 14px; } .mc-list-item { background: #f8fafc; border: 1.5px solid var(--mc-border); border-radius: 8px; padding: 12px; margin-bottom: 10px; display: flex; gap: 10px; } .mc-list-item-fields { flex: 1; display: flex; flex-wrap: wrap; gap: 8px; } .mc-list-item-fields input, .mc-list-item-fields textarea { border: 1px solid var(--mc-border); border-radius: 6px; padding: 7px 10px; font-size: 13px; flex: 1; min-width: 120px; font-family: inherit; } .mc-remove-btn { background: none; border: none; color: var(--mc-red); cursor: pointer; font-size: 18px; line-height: 1; flex-shrink: 0; } .mc-remove-btn-sm { background: none; border: none; color: var(--mc-muted); cursor: pointer; font-size: 12px; padding: 0 4px; } .mc-skill-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .mc-skill-tag { display: inline-flex; align-items: center; gap: 4px; background: #e0e7ff; color: #3730a3; font-size: 12px; padding: 4px 10px; border-radius: 99px; } .mc-skill-tag button { background: none; border: none; cursor: pointer; color: #6366f1; font-size: 14px; line-height: 1; padding: 0; } .mc-skill-input-row { display: flex; gap: 8px; } .mc-skill-input-row input { flex: 1; } /* ── AI output blocks ────────────────────────────────────────── */ .mc-ai-result { background: linear-gradient(135deg,#f8f0ff,#eff6ff); border: 1px solid #ddd6fe; border-radius: var(--mc-radius); padding: 18px; margin-top: 14px; font-size: 14px; line-height: 1.8; color: var(--mc-text); } .mc-ai-result-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .mc-ai-label { font-size: 12px; font-weight: 700; color: #7c3aed; text-transform: uppercase; letter-spacing: .5px; } .mc-streaming { opacity: .7; font-style: italic; } .mc-ai-loading { display: flex; align-items: center; gap: 10px; padding: 20px; color: var(--mc-muted); font-size: 14px; } .mc-ai-loading::before { content: ''; width: 20px; height: 20px; border: 2px solid #ddd6fe; border-top-color: #7c3aed; border-radius: 50%; animation: mc-spin .7s linear infinite; flex-shrink: 0; } /* ── Cover letter ────────────────────────────────────────────── */ .mc-cover-output { background: #fff; border: 1.5px solid var(--mc-border); border-radius: var(--mc-radius); padding: 22px; font-size: 14px; line-height: 1.85; white-space: pre-wrap; margin-top: 16px; min-height: 200px; color: var(--mc-text2); } .mc-cover-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; } /* ── Interview ───────────────────────────────────────────────── */ .mc-interview-card { background: var(--mc-card); border: 1.5px solid var(--mc-border); border-radius: var(--mc-radius); padding: 18px; margin-bottom: 14px; box-shadow: var(--mc-shadow); } .mc-interview-q { font-size: 15px; font-weight: 600; color: var(--mc-navy); margin-bottom: 10px; } .mc-interview-feedback { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 12px; font-size: 13px; margin-top: 10px; color: #166534; } /* ── Research topics ─────────────────────────────────────────── */ .mc-topic-item { border: 1.5px solid var(--mc-border); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; background: var(--mc-card); } .mc-topic-item h4 { font-size: 14px; font-weight: 600; color: var(--mc-navy); margin-bottom: 6px; } .mc-topic-item p { font-size: 13px; color: var(--mc-muted); line-height: 1.5; } .mc-topic-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } /* ── Writing tabs ────────────────────────────────────────────── */ .mc-writing-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--mc-border); margin-bottom: 18px; overflow-x: auto; } .mc-writing-tab { background: none; border: none; padding: 8px 14px; font-size: 13.5px; font-weight: 600; color: var(--mc-muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; font-family: inherit; } .mc-writing-tab.active { color: var(--mc-navy2); border-bottom-color: var(--mc-navy2); } .mc-writing-panel { display: none; } .mc-writing-panel.active { display: block; } .mc-writing-actions { display: flex; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; } .mc-writing-output { font-size: 14px; color: var(--mc-text); line-height: 1.8; white-space: pre-wrap; } .mc-citation-output { font-family: 'Georgia', serif; padding: 12px; background: #fff; border: 1px solid var(--mc-border); border-radius: 6px; } /* ── Career Roadmap ──────────────────────────────────────────── */ .mc-roadmap-section { margin-bottom: 28px; } .mc-roadmap-section h4 { font-size: 16px; color: var(--mc-navy); margin-bottom: 14px; padding-bottom: 6px; border-bottom: 1px solid var(--mc-border); } .mc-road-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .mc-road-card { padding: 16px; border-radius: 10px; border: 1px solid var(--mc-border); } .mc-road-card-path { background: #eff6ff; border: 1.5px solid #bfdbfe; border-radius: 10px; } .mc-road-card-cert { background: #fefce8; border: 1.5px solid #fde68a; border-radius: 10px; } .mc-road-card-title { font-weight: 600; color: var(--mc-text); margin-bottom: 6px; font-size: 14px; } .mc-road-card-provider { font-size: 12px; color: var(--mc-muted); margin-bottom: 6px; font-style: italic; } .mc-road-card-desc { font-size: 13px; color: var(--mc-text2); line-height: 1.5; } .mc-road-skills-list { display: flex; flex-direction: column; gap: 10px; } .mc-skill-item { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; background: #f0fdf4; border-radius: 8px; border: 1px solid #bbf7d0; } .mc-skill-name { font-weight: 600; color: #166534; font-size: 14px; flex-shrink: 0; } .mc-skill-why { font-size: 13px; color: #15803d; } .mc-road-employers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .mc-employer-card { padding: 12px 14px; background: #fafafa; border: 1px solid var(--mc-border); border-radius: 8px; } .mc-employer-name { font-weight: 600; color: var(--mc-text); font-size: 14px; margin-bottom: 2px; } .mc-employer-sector { display: inline-block; font-size: 11px; background: #e0e7ff; color: #3730a3; padding: 1px 8px; border-radius: 99px; margin-bottom: 6px; } .mc-employer-note { font-size: 12px; color: var(--mc-muted); line-height: 1.4; } .mc-road-steps { padding-left: 20px; } .mc-road-steps li { padding: 8px 0; font-size: 14px; color: var(--mc-text); border-bottom: 1px solid #f1f5f9; line-height: 1.5; } .mc-road-steps li:last-child { border-bottom: none; } .mc-roadmap-regen { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 20px; } /* ── Certificates ────────────────────────────────────────────── */ .mc-cert-grid { display: flex; flex-direction: column; gap: 10px; } .mc-cert-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: linear-gradient(135deg,#fefce8,#fef9c3); border: 1px solid #fde68a; border-radius: 10px; } .mc-cert-card-icon { width: 42px; height: 42px; border-radius: 10px; background: rgba(245,158,11,.15); color: #92400e; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mc-cert-card-icon svg { width: 20px; height: 20px; display: block; } .mc-cert-card-body { flex: 1; } .mc-cert-card-title { font-weight: 600; color: #78350f; font-size: 14px; margin-bottom: 3px; } .mc-cert-card-date { font-size: 12px; color: #92400e; } .mc-cert-rank-badge { display: inline-block; background: #c8a84b; color: #fff; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 99px; margin-right: 6px; } /* ── Leaderboard ─────────────────────────────────────────────── */ .mc-lb-course { display: inline-block; font-size: 11px; background: #dbeafe; color: #1d4ed8; padding: 1px 7px; border-radius: 99px; margin-left: 6px; } .mc-lb-controls { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .mc-lb-controls select, .mc-lb-controls input[type=month] { padding: 6px 10px; border: 1px solid var(--mc-border); border-radius: 6px; font-size: 13px; color: var(--mc-text); background: #fff; font-family: inherit; } .mc-my-rank { background: #eff6ff; border: 1px solid #bfdbfe; padding: 10px 16px; border-radius: 8px; font-size: 14px; color: #1d4ed8; margin-bottom: 12px; } /* ── Spinner ─────────────────────────────────────────────────── */ .mc-spinner { width: 32px; height: 32px; border: 3px solid #e2e8f0; border-top-color: #1e40af; border-radius: 50%; animation: mc-spin 0.7s linear infinite; margin: 0 auto 10px; } @keyframes mc-spin { to { transform: rotate(360deg); } } /* ══════════════════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { .mc-stats-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .mc-sidebar { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); z-index: 300; /* Push content above the mobile bottom nav so logout is never hidden */ padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 12px); } .mc-sidebar.mc-sidebar-open { transform: translateX(0); box-shadow: var(--mc-shadow-lg); } .mc-topbar { display: flex; } .mc-main { padding: 16px 0; width: 100%; } } @media (max-width: 480px) { .mc-stats-row { grid-template-columns: repeat(2, 1fr); gap: 10px; } .mc-road-cards, .mc-road-employers-grid { grid-template-columns: 1fr; } .mc-writing-tabs { flex-wrap: wrap; } .mc-cert-card { flex-wrap: wrap; } .mc-main { padding: 12px 0; } } /* ══════════════════════════════════════════════════════════════════ MOBILE BOTTOM NAV (v1.2 — mirrors MSM AI mobile nav pattern) Hidden on desktop; shown on screens ≤ 768px ══════════════════════════════════════════════════════════════════ */ .mc-mob-nav { display: none; /* shown via media query below */ position: fixed; bottom: 0; left: 0; right: 0; height: 58px; background: var(--mc-navy); border-top: 1px solid rgba(255,255,255,.10); z-index: 400; align-items: center; justify-content: space-around; padding: 0 4px; /* Safe area for notched phones */ padding-bottom: env(safe-area-inset-bottom, 0); } .mc-mob-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; border: none; color: rgba(255,255,255,.50); font-family: inherit; font-size: 10px; cursor: pointer; padding: 6px 2px; border-radius: 8px; transition: color .15s, background .15s; position: relative; min-width: 0; } .mc-mob-nav-item:hover { color: rgba(255,255,255,.80); background: rgba(255,255,255,.06); } .mc-mob-nav-item.mc-mob-active { color: var(--mc-gold); } /* Active dot under the label */ .mc-mob-nav-item.mc-mob-active::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; background: var(--mc-gold); border-radius: 50%; opacity: .8; } .mc-mob-nav-item.mc-mob-active .mc-mob-icon { filter: drop-shadow(0 0 4px rgba(240,165,0,.45)); } /* "More" button glows gold when current tab is not in bottom 4 */ .mc-mob-nav-item#mc-mob-menu-btn.mc-mob-menu-current { color: var(--mc-gold); } .mc-mob-nav-item#mc-mob-menu-btn.mc-mob-menu-current .mc-mob-icon { filter: drop-shadow(0 0 4px rgba(240,165,0,.45)); } .mc-mob-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; margin: 0 auto; } .mc-mob-icon svg { width: 20px; height: 20px; display: block; } .mc-mob-label { font-size: 10px; font-weight: 500; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* Challenge bottom nav glow pulse */ .mc-mob-badge { position: absolute; top: 5px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 0 rgba(245,158,11,.6); animation: mc-chal-nav-pulse 2s ease-in-out infinite; line-height: 1.4; } /* ── Sidebar nav item — smoother transitions (upgrade existing rules) ── */ .mc-nav-item { transition: background .18s ease, color .18s ease, border-left-color .18s ease; } .mc-nav-item.active::before { transition: height .2s ease; } /* ── Main area needs bottom padding on mobile to clear the bottom nav ── */ @media (max-width: 768px) { .mc-mob-nav { display: flex; } .mc-main { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 16px); } /* Hide the topbar hamburger since bottom nav has "More" now */ /* Keep it visible for branding purposes but simplify */ .mc-topbar { padding: 10px 14px; } } /* ══════════════════════════════════════════════════════════════════ PRICING — v1.3.7 premium redesign Classes emitted by templates/pricing.php ══════════════════════════════════════════════════════════════════ */ /* ── Wrapper ─────────────────────────────────────────────────── */ .mc-pricing-wrap { max-width: 960px; margin: 0 auto; padding: 0 24px 48px; } /* ── Header ──────────────────────────────────────────────────── */ .mc-pricing-header { text-align: center; padding: 48px 24px 36px; position: relative; } .mc-pricing-header::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 560px; height: 220px; background: radial-gradient(ellipse at 50% 0%, rgba(240,165,0,.13) 0%, transparent 70%); pointer-events: none; border-radius: 50%; } .mc-pricing-header h2 { font-family: 'DM Serif Display', serif; font-size: clamp(24px, 4vw, 34px); font-weight: 400; color: var(--mc-navy); margin-bottom: 10px; position: relative; } .mc-pricing-header > p { font-size: 15px; color: var(--mc-muted); margin-bottom: 28px; position: relative; } /* ── Toggle pill ─────────────────────────────────────────────── */ .mc-pricing-toggle { display: inline-flex; align-items: center; background: var(--mc-card); border: 1.5px solid var(--mc-border); border-radius: 99px; padding: 4px; gap: 2px; box-shadow: 0 1px 4px rgba(15,32,64,.07); position: relative; } .mc-ptoggle { background: transparent; border: none; border-radius: 99px; padding: 8px 22px; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--mc-muted); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; display: flex; align-items: center; gap: 7px; white-space: nowrap; } .mc-ptoggle.active { background: var(--mc-navy); color: #fff; box-shadow: 0 2px 8px rgba(15,32,64,.25); } .mc-ptoggle:not(.active):hover { color: var(--mc-navy2); } .mc-save-badge { display: inline-block; background: linear-gradient(135deg, #16a34a, #15803d); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 99px; letter-spacing: .3px; } /* ── Card grid ───────────────────────────────────────────────── */ .mc-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; margin-bottom: 32px; } /* ── Plan card base ──────────────────────────────────────────── */ .mc-plan-card { background: var(--mc-card); border: 1.5px solid var(--mc-border); border-radius: var(--mc-radius-lg); padding: 28px 24px 24px; position: relative; transition: box-shadow .22s, transform .22s, border-color .22s; display: flex; flex-direction: column; gap: 0; } .mc-plan-card:hover { box-shadow: 0 8px 28px rgba(15,32,64,.11); transform: translateY(-2px); } /* ── Featured (Basic) card ───────────────────────────────────── */ .mc-plan-featured { border-color: var(--mc-gold); box-shadow: 0 4px 24px rgba(240,165,0,.18); background: linear-gradient(160deg, #fffdf5 0%, var(--mc-card) 60%); transform: translateY(-6px); z-index: 2; } .mc-plan-featured:hover { box-shadow: 0 10px 36px rgba(240,165,0,.25); transform: translateY(-9px); } /* ── Pro card ────────────────────────────────────────────────── */ .mc-plan-pro { border-color: #c4b5fd; background: linear-gradient(160deg, #faf5ff 0%, var(--mc-card) 55%); } .mc-plan-pro:hover { box-shadow: 0 8px 28px rgba(124,58,237,.12); } /* ── "Most Popular" badge ────────────────────────────────────── */ .mc-plan-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--mc-gold), #d4870a); color: #fff; font-size: 10.5px; font-weight: 700; padding: 4px 14px; border-radius: 99px; letter-spacing: .6px; text-transform: uppercase; white-space: nowrap; box-shadow: 0 2px 8px rgba(240,165,0,.45); } /* ── Plan name ───────────────────────────────────────────────── */ .mc-plan-name { font-family: 'DM Serif Display', serif; font-size: 20px; color: var(--mc-navy); margin-bottom: 14px; font-weight: 400; } /* ── Price block ─────────────────────────────────────────────── */ .mc-plan-price { margin-bottom: 20px; line-height: 1; } .mc-price-amt { font-family: 'DM Serif Display', serif; font-size: 28px; color: var(--mc-navy); font-weight: 400; letter-spacing: -.5px; } .mc-price-per { font-size: 13px; color: var(--mc-muted); margin-left: 3px; font-weight: 500; } .mc-monthly-equiv { margin-top: 5px; font-size: 12px; color: var(--mc-green); font-weight: 600; } /* ── Feature list ────────────────────────────────────────────── */ .mc-plan-features { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 9px; flex: 1; } .mc-plan-features li { font-size: 13.5px; color: var(--mc-text2); line-height: 1.4; padding-left: 0; } /* Style the ✓ check items */ .mc-plan-features li:not([class]) { display: flex; align-items: flex-start; gap: 8px; } /* Green checks */ .mc-plan-features li:is([class=""])::first-letter, .mc-plan-features li { /* no first-letter trick — we use the unicode chars from PHP */ } /* Override unicode ✓ and ✗ with styled pseudo-badges */ .mc-plan-features li:not(.mc-feature-x) { /* included items */ color: var(--mc-text2); } /* Re-style all list items using attribute-less targeting on the text content */ /* ✓ items — green tint */ .mc-plan-features li:not(:last-child), .mc-plan-features li { position: relative; } /* We can't change the HTML ✓/✗ chars easily, but we CAN style the li based on whether they start with ✓ or ✗ using :has if needed. Best approach: simply style all items cleanly and rely on ✗ being visually distinguished via muted color in JS-free CSS. */ /* Items starting with ✗ — muted / strikethrough feel */ .mc-plan-features li:has(+ li) { /* not a direct selector for ✗ without JS — see below note */ } /* Target ✗ items via the unicode character approach: We style ALL li items, then use the :nth trick to dim ✗ rows. Because the ✓/✗ is in text content, we apply a class via JS in mcPriceToggle or we just handle via the general li CSS. */ /* Simple clean approach — let the ✓ / ✗ glyph carry the meaning */ .mc-plan-features li { padding: 0; /* Wrap-safe */ word-break: break-word; } /* Dim lines that start with ✗ */ .mc-plan-features li:where([style]) { opacity: .5; } /* JS will add .mc-feature-no class for ✗ lines if available, but even without it, let's use CSS to visually dim them. Since we control the HTML output, we can use attribute selectors on data or the content itself via ::first-line — not possible. Use a clean fallback: all items styled nicely, and ✗ items will just appear with the ✗ glyph in muted slate. */ /* ── Better approach: style ✓ rows green, ✗ rows muted ───────── */ /* We'll inject classes via a tiny inline