/* ===================== site.css (FULL) ===================== */ /* Resource API: UI shell styling (Layout/Header/Footer) */ :root { --amw-footer-height: 220px; --footer-height: var(--amw-footer-height); /* ✅ FIX: your file uses --footer-height later */ } /* Main container should also have bottom padding */ .site-main { padding-bottom: 40px; } html { font-size: 14px; } @media (min-width: 768px) { html { font-size: 16px; } } /* ============================================================ GLOBAL DARK MODE (matches YOUR header/footer classes) Applies when ============================================================ */ body.dark { background: #0b1220; color: #e5e7eb; } /* ---------- HEADER / NAVBAR ---------- */ body.dark .site-header { background: #0f172a; border-bottom: 1px solid rgba(255,255,255,0.10); } body.dark .amw-navbar { background: transparent; } body.dark .amw-nav a { color: #f1f5f9; } body.dark .amw-nav a:hover { color: #93c5fd; } body.dark .amw-nav li + li::before, body.dark .amw-mid-sep, body.dark .amw-sep { color: rgba(255,255,255,0.35); } body.dark .amw-dd-btn { color: #f1f5f9; } body.dark .amw-dd-btn:hover { background: rgba(255,255,255,0.06); } body.dark .amw-dd-icon i { color: rgba(241,245,249,0.85); } body.dark .amw-avatar { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.08); } body.dark .amw-avatar-default i { color: rgba(241,245,249,0.85); } /* dropdown menus */ body.dark .amw-dd-menu { background: #0b1220; border-color: rgba(255,255,255,0.12); box-shadow: 0 18px 40px rgba(0,0,0,.45); position: absolute; top: 100%; right: 0; display: none; z-index: 999; } .amw-dd::after { content: ""; position: absolute; top: 100%; right: 0; width: 220px; height: 12px; } body.dark .amw-dd-menu a { color: #e5e7eb; } body.dark .amw-dd-menu a:hover { background: rgba(255,255,255,0.06); } body.dark .amw-dd-sep { background: rgba(255,255,255,0.10); } body.dark .amw-dd-logout { color: #e5e7eb; } body.dark .amw-dd-logout:hover { background: rgba(255,255,255,0.06); } /* AI Tutor button */ body.dark .amw-ai-btn { background: #2f6fec; } /* ---------- FOOTER ---------- */ body.dark .amw-footer-top { background: #0f172a; border-top: 1px solid rgba(255,255,255,0.10); border-bottom: 1px solid rgba(255,255,255,0.10); } body.dark .amw-footer-divider { background: rgba(255,255,255,0.12); } body.dark .amw-footer-links { color: rgba(241,245,249,0.82); } body.dark .amw-footer-links a { color: rgba(241,245,249,0.82); text-decoration: none; } body.dark .amw-footer-links a:hover { color: #ffffff; text-decoration: underline; } body.dark .amw-footer-bottom { background: #0b1220; } body.dark .amw-footer-bottom-inner { color: rgba(241,245,249,0.85); } body.dark .amw-footer-copy { color: rgba(241,245,249,0.90); } body.dark .amw-footer-legal { color: rgba(241,245,249,0.85); } body.dark .amw-footer-legal a { color: rgba(241,245,249,0.85); text-decoration: none; } body.dark .amw-footer-legal a:hover { color: #ffffff; text-decoration: underline; } body.dark .amw-footer-sep { color: rgba(255,255,255,0.35); } /* ---------- COMMON CONTROLS ---------- */ body.dark input, body.dark select, body.dark textarea { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: #f1f5f9; } /* global links (outside nav/footer too) */ body.dark a { color: #93c5fd; } /* main MUST NOT stretch */ .site-main { display: block !important; flex: none !important; height: auto !important; min-height: 0 !important; /* padding-bottom: 0 !important; */ margin-bottom: 0 !important; padding-bottom: 40px; min-height: calc(100vh - var(--footer-height)); } /* also prevent last section from adding a huge bottom gap */ .site-main > *:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* ================= HEADER ================= */ .site-header { background: #f2f2f2; border-bottom: 1px solid #dcdcdc; } .amw-navbar { height: 78px; display: flex; align-items: center; } .amw-container { width: min(1500px,96%); margin: 0 auto; display: flex; align-items: center; } /* LOGO */ .amw-left { flex: 0 0 auto; } .amw-logo img { height: 70px; display: block; } /* GROUP RIGHT */ .amw-group { margin-left: auto; display: flex; align-items: center; gap: 14px; } /* NAV */ .amw-nav { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; } .amw-nav li + li::before { content: "|"; color: #bdbdbd; margin: 0 12px; font-weight: 600; } .amw-nav a { text-decoration: none; font-size: 18px; font-weight: 800; color: #111; } .amw-nav a:hover { color: #2f5f8f; } /* separators */ .amw-mid-sep, .amw-sep { color: #bdbdbd; margin: 0 3px; font-weight: 600; } /* RIGHT */ .amw-right { display: flex; align-items: center; gap: 12px; } /* Language */ .amw-lang-dd { position: relative; } .amw-lang-btn { background: transparent; border: none; padding: 0; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; color: #333; } .amw-lang-menu { position: absolute; right: 0; top: calc(100% + 10px); width: 170px; background: #f4f4f4; border: 1px solid #d9d9d9; border-radius: 6px; box-shadow: 0 10px 25px rgba(0,0,0,0.12); display: none; z-index: 2000; overflow: hidden; } .amw-lang-dd:hover .amw-lang-menu { display: block; } .amw-lang-menu a { display: block; padding: 10px 14px; text-decoration: none; color: #333; font-size: 14px; font-weight: 600; } .amw-lang-menu a:hover { background: #e9e9e9; } /* AI Tutor */ .amw-ai-btn { background: #2f5f8f; color: #ffffff !important; padding: 10px 18px; border-radius: 10px; text-decoration: none; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; min-width: 110px; } .amw-ai-btn:hover { filter: brightness(0.95); color: #fff; } /*Logout*/ .amw-logout-form { margin: 0; } .amw-logout-form button.amw-logout { display: block; width: 100%; text-align: left; background: none; border: none; padding: 12px 20px; font: inherit; color: #8b1e1e; cursor: pointer; } .amw-logout-form button.amw-logout:hover { background-color: #f5f5f5; } /* USER */ .amw-user-dd { position: relative; } .amw-user-btn { background: transparent; border: none; padding: 0; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; } .amw-user-name { font-size: 18px; font-weight: 800; color: #111; white-space: nowrap; max-width: 210px; overflow: hidden; text-overflow: ellipsis; } .amw-user-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 0 1px #d0d0d0; } /* DROPDOWN MENU */ .amw-menu { position: absolute; right: 0; top: calc(100% + 10px); width: 320px; background: #ffffff; border: 1px solid #d9d9d9; border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,0.16); overflow: hidden; display: none; z-index: 3000; padding: 8px 0; } /* ===== Dropdown base ===== */ .amw-dd { position: relative; } .amw-dd-btn { appearance: none; border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; line-height: 1; font-weight: 800; } .amw-dd-btn:hover { background: #f3f4f6; } .amw-caret { font-size: 12px; opacity: .75; } /* menu */ .amw-dd-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 230px; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.12); padding: 8px; display: none; z-index: 9999; } .amw-dd:hover .amw-dd-menu { display: block; } .amw-dd-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: #0f172a; font-weight: 700; } .amw-dd-menu a:hover { background: #f3f4f6; } .amw-dd-sep { height: 1px; background: #e5e7eb; margin: 8px 6px; } .amw-mi { width: 18px; text-align: center; opacity: .85; } /* logout button */ .amw-dd-logout { width: 100%; border: 0; background: transparent; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: #0f172a; font-weight: 800; cursor: pointer; text-align: left; } .amw-dd-logout:hover { background: #f3f4f6; } .amw-manager-auth-btn { text-decoration: none; color: #0f172a; font-weight: 800; gap: 8px; } .amw-manager-auth-btn:hover { color: #2f5f8f; background: #f3f4f6; } html.amw-vf-launcher-hidden .vfrc-launcher, html.amw-vf-launcher-hidden .vfrc-launcher--open, html.amw-vf-launcher-hidden [class*="vfrc-launcher"], html.amw-vf-launcher-hidden [data-testid*="launcher"], html.amw-vf-launcher-hidden button[aria-label="AI Mind Weavers Support Team"], html.amw-vf-launcher-hidden button[aria-label*="Support Team"] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } .amw-support-backdrop { position: fixed; inset: 0; background: rgba(2, 10, 23, 0.42); z-index: 1060; } .amw-support-sidebar { position: fixed; top: 0; right: 0; width: min(420px, 100vw); height: 100vh; background: #ffffff; box-shadow: -14px 0 44px rgba(15, 23, 42, 0.2); border-left: 1px solid #d8e1eb; z-index: 1070; display: flex; flex-direction: column; } .amw-support-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #e2e8f0; background: linear-gradient(135deg, #0f4e86, #2f6fa8); } .amw-support-title { margin: 0; color: #ffffff; font-size: 18px; font-weight: 800; } .amw-support-header-actions { display: inline-flex; align-items: center; gap: 8px; } .amw-support-tool { border: 0; background: rgba(255, 255, 255, 0.18); color: #ffffff; width: 34px; height: 34px; border-radius: 10px; font-size: 15px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.15s ease, transform 0.15s ease; } .amw-support-tool:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-1px); } .amw-support-tool:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } .amw-support-tool.is-active { background: rgba(255, 255, 255, 0.32); } .amw-support-close { border: 0; background: rgba(255, 255, 255, 0.18); color: #ffffff; width: 34px; height: 34px; border-radius: 10px; font-size: 24px; line-height: 1; cursor: pointer; } .amw-support-close:hover { background: rgba(255, 255, 255, 0.3); } .amw-support-messages { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; background: #f8fbff; } .amw-support-msg { max-width: 90%; white-space: pre-wrap; line-height: 1.45; font-size: 14px; padding: 10px 12px; border-radius: 12px; } .amw-support-msg-assistant { align-self: flex-start; background: #ffffff; color: #0f172a; border: 1px solid #d6e2ef; } .amw-support-msg-user { align-self: flex-end; background: #0f4e86; color: #ffffff; } .amw-support-form { display: flex; align-items: center; gap: 10px; padding: 12px; border-top: 1px solid #e2e8f0; background: #ffffff; } .amw-support-input { flex: 1; border: 1px solid #cbd5e1; border-radius: 10px; padding: 10px 12px; font-size: 14px; outline: none; } .amw-support-input:focus { border-color: #2f6fa8; box-shadow: 0 0 0 3px rgba(47, 111, 168, 0.2); } /* Send button final professional look */ .amw-support-send { width: 70px; min-width: 70px; height: 44px; border-radius: 12px; background: #0f4e86; /* blue */ border: none; /* remove black border */ display: flex; align-items: center; justify-content: center; color: #ffffff; transition: 0.2s; } .amw-support-send i { font-size: 18px; color: #ffffff; /* white icon */ } .amw-support-send:hover { background: #0b3f6d; } .amw-support-send:disabled { opacity: 0.6; cursor: not-allowed; } .amw-support-status { min-height: 24px; font-size: 12px; color: #64748b; padding: 0 12px 10px; } body.amw-support-open { overflow: hidden; } @media (max-width: 640px) { .amw-support-sidebar { width: 100vw; } } /* ===== Language icon ===== */ .amw-dd-icon i { font-size: 18px; color: #64748b; } /* ===== Avatar / user icon ===== */ .amw-avatar { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; border: 2px solid #e5e7eb; background: #f1f5f9; display: inline-flex; align-items: center; justify-content: center; } .amw-avatar-default i { font-size: 18px; color: #475569; } /* username */ .amw-user-name { font-weight: 900; color: #0f172a; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* RTL dropdown alignment */ html[dir="rtl"] .amw-dd-menu { left: 0; right: auto; } .amw-user-dd:hover .amw-menu { display: block; } .amw-menu a { display: block; padding: 12px 16px; text-decoration: none; color: #545e65; font-size: 16px; font-weight: 600; line-height: 20px; white-space: nowrap; } .amw-menu a:hover { background: #f1f3f5; color: #111; } .amw-menu-sep { height: 1px; background: #e6e6e6; margin: 6px 0; } .amw-logout { color: #8a2b2b !important; } .amw-logout:hover { background: #fff1f1; color: #8a2b2b !important; } /* ================= FOOTER ================= */ .amw-footer { /* margin-top: 0 !important; */ padding-top: 0 !important; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin-top: 50px; } .amw-footer-top { background: #efefef; border-top: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc; padding: 22px 0 14px; } .amw-footer-inner { width: min(1200px, 92%); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } .amw-footer-logo { height: 70px; width: auto; display: block; } /* ===== FOOTER SOCIAL ICONS (WHITE ICONS) ===== */ .amw-footer-social { display: flex; align-items: center; gap: 14px; } .amw-social { width: 52px; height: 52px; border-radius: 50%; background: #8e8e8e; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: background 0.2s ease; } /* FORCE ICONS TO WHITE */ .amw-social i { font-size: 22px; color: #ffffff !important; } /* hover */ .amw-social:hover { background: #6f6f6f; } .amw-footer-divider { width: min(1200px, 92%); margin: 16px auto 12px; height: 1px; background: #cfcfcf; } .amw-footer-links { width: min(1200px, 92%); margin: 0 auto; display: grid; grid-template-columns: 140px 140px 1fr; gap: 6px 28px; font-size: 14px; font-weight: 600; color: #555; } .amw-footer-links a { color: #555; text-decoration: none; } .amw-footer-links a:hover { text-decoration: underline; } .amw-footer-bottom { background: #bfbfbf; padding: 14px 0; } .amw-footer-bottom-inner { width: min(1200px, 92%); margin: 0 auto; text-align: center; display: grid; gap: 6px; color: #222; font-size: 14px; } .amw-footer-copy { font-weight: 800; } .amw-footer-legal { font-weight: 600; } .amw-footer-legal a { color: #222; text-decoration: none; } .progress-page { max-width: 1100px; margin: auto; padding: 40px; } .progress-title { font-size: 28px; font-weight: 700; margin-bottom: 30px; } .progress-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 20px; } .progress-card { background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .progress-bar-container { height: 10px; background: #eee; border-radius: 5px; overflow: hidden; margin: 10px 0; } .progress-bar { height: 100%; background: #4cafef; } .progress-text { font-size: 14px; } .progress-badge { background: #4caf50; color: white; padding: 4px 8px; border-radius: 6px; font-size: 12px; } /*BADEGES PAGE*/ .badges-page { max-width: 1200px; margin: auto; padding: 40px 20px; } /* Header */ .badges-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; } .badges-header h2 { font-size: 32px; font-weight: 700; } .badge-subtitle { color: #6c757d; max-width: 600px; } .back-btn a { text-decoration: none; font-weight: 500; color: #444; } /* Layout */ .badges-layout { display: grid; grid-template-columns: 1fr 360px; gap: 40px; } /* LEFT SIDE */ .badges-left h3 { font-weight: 700; margin-bottom: 20px; } .badge-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 25px; } /* Badge */ .badge-card { background: white; padding: 25px; border-radius: 14px; text-align: center; box-shadow: 0 10px 24px rgba(0,0,0,0.08); transition: .25s; } .badge-card:hover { transform: translateY(-5px); } .badge-card img { width: 120px; margin-bottom: 15px; } .badge-title { font-weight: 600; } .badge-desc { font-size: 14px; color: #6c757d; } /* Locked */ .locked-badge { opacity: .55; filter: grayscale(100%); } /* Certificate */ .certificate-card { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.08); } .certificate-card img { width: 100%; } /* RIGHT SIDE */ .points-card { background: #f8f9fa; padding: 20px; border-radius: 12px; margin-bottom: 30px; } .points-box { margin-top: 10px; background: white; padding: 15px 20px; border-radius: 8px; display: flex; justify-content: space-between; font-size: 22px; box-shadow: 0 5px 10px rgba(0,0,0,0.1); } /* Spin */ .spin-card { background: #f8f9fa; padding: 25px; border-radius: 12px; text-align: center; } .spin-wheel { width: 220px; margin: 20px auto; display: block; } .spin-btn { background: #4e7efc; color: white; border: none; padding: 10px 28px; border-radius: 6px; font-weight: 600; } /* ===== AI SUPPORT PRO DESIGN (icons + clean chat) ===== */ /* Row layout (icon + message) */ .amw-support-row { display: flex; align-items: flex-end; gap: 8px; } .amw-support-row-user { justify-content: flex-end; } .amw-support-row-assistant { justify-content: flex-start; } /* Avatar icons */ .amw-support-avatar-icon { width: 30px; height: 30px; min-width: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; } /* Bot icon */ .amw-support-avatar-assistant { background: #e6f0fa; color: #0f4e86; border: 1px solid #cfe0f1; } /* User icon */ .amw-support-avatar-user { background: #0f4e86; color: #ffffff; } /* Message bubbles cleaner */ .amw-support-msg { max-width: 75%; padding: 10px 13px; font-size: 14px; line-height: 1.5; border-radius: 14px; } /* AI message */ .amw-support-msg-assistant { background: #ffffff; border: 1px solid #d6e2ef; color: #0f172a; border-bottom-left-radius: 5px; } /* User message */ .amw-support-msg-user { background: #0f4e86; color: #ffffff; border-bottom-right-radius: 5px; } /* Better spacing */ .amw-support-messages { gap: 14px; } /* Bold text cleaner */ .amw-support-msg strong { font-weight: 700; } /* Send button icon style */ .amw-support-send { width: 48px; min-width: 48px; padding: 0; display: flex; align-items: center; justify-content: center; } .amw-support-send i { font-size: 16px; } /* Chat avatar image */ .amw-chat-avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }