/* ========================================================================== COMMON.CSS — MedVix shared foundation Load ONCE in the app shell , before any page CSS. Page CSS files only refine their page-specific components. ========================================================================== */ /* ---------- 1. Reset ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } /* ---------- 2. Design tokens ---------- */ :root { /* Surfaces */ --bg-primary: #f8fafc; --bg-secondary: #ffffff; --bg-card: #ffffff; /* Text */ --text-primary: #0f172a; --text-secondary: #334155; --text-muted: #64748b; /* Brand */ --accent: #2563eb; --accent-light: #3b82f6; --accent-dark: #1d4ed8; --accent-rgb: 37, 99, 235; /* Semantic */ --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --danger-dark: #dc2626; /* Borders */ --border: #e2e8f0; --border-light: #e2e8f0; --border-dark: #cbd5e1; /* Overlay */ --overlay: rgba(0, 0, 0, 0.5); /* Elevation */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1); /* Radii */ --radius-sm: 0.375rem; --radius: 0.5rem; --radius-lg: 0.75rem; --radius-standard: 0.5rem; --radius-small: 0.375rem; /* Typography */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Motion */ --transition: all 0.2s ease; --transition-speed: 0.2s; /* Layout */ --header-height: 90px; /* Legacy aliases */ --primary: var(--accent); --primary-dark: var(--accent-dark); --primary-light: var(--accent-light); --brand-primary: var(--accent); --brand-primary-dark: var(--accent-dark); --brand-primary-light: rgba(37, 99, 235, 0.12); --accent-hover: var(--accent-dark); --surface: var(--bg-card); --bg: var(--bg-card); --text: var(--text-primary); --text-body: var(--text-primary); --text-heading: var(--text-primary); /* Extended icon palette (matches JS EMOJI_MAP colors) */ --icon-info: #0891b2; --icon-purple: #8b5cf6; --icon-gold: #eab308; --icon-money: #059669; --icon-orange: #f97316; --icon-pink: #ec4899; --icon-slate: #64748b; } /* Dark theme */ .dark-theme { --bg-primary: #0b1120; --bg-secondary: #1e293b; --bg-card: #1e293b; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --border: #334155; --border-light: #334155; --border-dark: #475569; --overlay: rgba(0, 0, 0, 0.7); --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3); --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.5); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5); } /* ---------- 3. Base ---------- */ body { font-family: var(--font-sans); background-color: var(--bg-primary); color: var(--text-primary); line-height: 1.5; transition: background-color 0.3s, color 0.3s; min-height: 100vh; overflow-x: hidden; } /* ---------- 4. Typography ---------- */ h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.2; margin-bottom: 0.5rem; color: var(--text-primary); } h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } h4 { font-size: 1.1rem; } h5, h6 { font-size: 1rem; } p { margin-bottom: 1rem; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } small, .small { font-size: 0.75rem; color: var(--text-muted); } hr { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; } code, kbd, pre, samp { font-family: 'Courier New', Consolas, Monaco, monospace; } /* ---------- 4b. Bare-element defaults (low-specificity) ---------- Uses :where() to contribute ZERO specificity, so any page-level `header { … }` / `footer { … }` rule wins. Only pages that have NO rule of their own pick these up: login, forgot-password, welcome, terms, privacy (header + footer), plus pdf-settings (footer, harmless since its footer is empty). No other page is affected. */ :where(header:not([class])) { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; } :where(footer:not([class])) { padding: 1.5rem 0; text-align: center; } /* ---------- 5. Forms ---------- */ label { display: block; margin-bottom: 0.375rem; font-weight: 500; color: var(--text-secondary); font-size: 0.875rem; } input, select, textarea { width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background-color: var(--bg-secondary); color: var(--text-primary); font-family: inherit; font-size: 0.9375rem; transition: var(--transition); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--accent); } .form-group { margin-bottom: 1.25rem; } .form-group.checkbox { display: flex; align-items: flex-start; gap: 0.5rem; } .form-group.checkbox label { margin-bottom: 0; font-weight: normal; } .error-message { color: var(--danger); font-size: 0.75rem; margin-top: 0.25rem; min-height: 1.2rem; } /* ---------- 6. Buttons ---------- */ button { cursor: pointer; font-family: inherit; font-size: inherit; background: none; border: none; color: inherit; padding: 0; -webkit-appearance: none; appearance: none; transition: var(--transition); } button:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary, .btn-secondary, .btn-outline, .btn-danger { padding: 0.625rem 1.25rem; font-size: 0.875rem; font-weight: 500; line-height: 1.2; border-radius: var(--radius-sm); border: 1px solid transparent; transition: var(--transition); text-align: center; } .btn-primary { background-color: var(--accent); color: #fff; border-color: var(--accent); } .btn-primary:hover:not(:disabled) { background-color: var(--accent-dark); border-color: var(--accent-dark); } .btn-secondary { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border); } .btn-secondary:hover:not(:disabled) { background-color: var(--border); } .btn-outline { background-color: transparent; color: var(--accent); border-color: var(--accent); } .btn-outline:hover:not(:disabled) { background-color: var(--accent); color: #fff; } .btn-danger { background-color: var(--danger); color: #fff; border-color: var(--danger); } .btn-danger:hover:not(:disabled) { background-color: var(--danger-dark); border-color: var(--danger-dark); } .btn-link { background: none; border: none; color: var(--accent); padding: 0.5rem 1rem; font-size: 0.9rem; font-weight: 500; text-decoration: underline; } .btn-link:hover { color: var(--accent-dark); text-decoration: none; } .btn-text { background: none; border: none; color: var(--accent); padding: 0.5rem; font-size: 0.9rem; font-weight: 500; } .btn-text:hover { background-color: rgba(37, 99, 235, 0.1); text-decoration: underline; } .btn-icon { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem; border-radius: 9999px; color: var(--text-secondary); background: transparent; border: none; font-size: 1.2rem; min-width: 36px; min-height: 36px; } .btn-icon:hover { background-color: var(--border); color: var(--text-primary); } .btn-small { padding: 0.375rem 0.75rem; font-size: 0.75rem; } .btn-large { padding: 0.875rem 1.5rem; font-size: 1rem; } /* ---------- 7. Generic card ---------- */ .card { background-color: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); } /* ---------- 8. Two-row header pattern ---------- */ .header-row { display: flex; justify-content: space-between; align-items: center; } .header-row.top { margin-bottom: 0.3rem; } .header-row .left-group { display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .header-row .left-group img { width: 32px; height: 32px; border-radius: 6px; flex-shrink: 0; } .header-row .left-group .brand { font-weight: 600; font-size: 1.2rem; white-space: nowrap; } .header-row .left-group .btn-text { font-size: 0.9rem; padding: 0.3rem 0.6rem; background: transparent; border: none; color: var(--text-secondary); cursor: pointer; border-radius: 4px; transition: background 0.2s, color 0.2s; } .header-row .left-group .btn-text:hover { background: var(--bg-secondary); color: var(--text-primary); } .header-row .right-group { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .header-row .btn-outline { background: var(--bg-secondary); border: 1px solid var(--border); padding: 0.3rem 0.6rem; border-radius: 30px; font-size: 1.2rem; cursor: pointer; line-height: 1; transition: background 0.2s, color 0.2s, border-color 0.2s; } .header-row .btn-outline:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .header-row.bottom .page-title { font-size: 1.3rem; margin: 0; color: var(--text-primary); } /* ---------- 9. Modal ---------- */ .modal-overlay { position: fixed; inset: 0; background-color: var(--overlay); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 10001; padding: 1rem; } .modal-overlay.active, .modal-overlay.show { display: flex; } .modal { background-color: var(--bg-card); border-radius: var(--radius-lg); padding: 1.5rem; max-width: 500px; width: 100%; box-shadow: var(--shadow-lg); color: var(--text-primary); } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .modal-header h2, .modal-header h3 { margin: 0; } .modal-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-muted); line-height: 1; padding: 0.25rem; } .modal-close:hover { color: var(--text-primary); } .modal-body { color: var(--text-secondary); } .modal-footer { margin-top: 1.5rem; display: flex; justify-content: flex-end; gap: 0.75rem; } /* ---------- 10. Tabs ---------- */ .tabs { display: flex; gap: 0.5rem; border-bottom: 2px solid var(--border); margin-bottom: 1.5rem; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } .tab-button { padding: 0.625rem 1.25rem; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; color: var(--text-secondary); font-weight: 500; cursor: pointer; white-space: nowrap; min-height: 44px; } .tab-button.active { color: var(--accent); border-bottom-color: var(--accent); } .tab-content { display: none; } .tab-content.active { display: block; } /* ---------- 11. Badge ---------- */ .badge { display: inline-block; padding: 0.25rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; background-color: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border); } /* ---------- 12. Progress ---------- */ .progress-bar { height: 8px; background-color: var(--border); border-radius: 9999px; overflow: hidden; } .progress-fill { height: 100%; background-color: var(--accent); transition: width 0.3s ease; } /* ---------- 13. Loading overlay & spinner ---------- */ .loading-overlay { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 9999; transition: opacity 0.3s; } .loading-overlay.hidden { opacity: 0; pointer-events: none; } .spinner { width: 48px; height: 48px; border: 4px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; } /* ---------- 14. Toast ---------- */ .toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 10000; } .toast { background-color: var(--bg-card); color: var(--text-primary); padding: 0.875rem 1.25rem; border-radius: var(--radius); box-shadow: var(--shadow-lg); margin-top: 0.75rem; border-left: 4px solid var(--accent); display: flex; align-items: center; gap: 0.75rem; animation: slideIn 0.3s ease; max-width: 350px; } .toast.success { border-left-color: var(--success); } .toast.error { border-left-color: var(--danger); } .toast.warning { border-left-color: var(--warning); } /* ---------- 15. Floating action button ---------- */ .fab { position: fixed; bottom: 2rem; right: 2rem; width: 56px; height: 56px; background: var(--accent); color: #fff; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; cursor: pointer; z-index: 100; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); transition: var(--transition); } .fab:hover { background: var(--accent-dark); transform: scale(1.05); } /* ---------- 16. Alerts ---------- */ .alert { padding: 0.75rem 1rem; border-radius: var(--radius-sm); margin-bottom: 0.5rem; } .alert-info { background: rgba(37, 99, 235, 0.12); color: var(--accent-dark); } .alert-error { background: rgba(239, 68, 68, 0.12); color: var(--danger); } .alert-success { background: rgba(16, 185, 129, 0.12); color: var(--success); } .alert-warning { background: rgba(245, 158, 11, 0.12); color: var(--warning); } /* ---------- 17. Form container (auth pages) ---------- */ .form-container { max-width: 450px; margin: 3rem auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-lg); } .form-container h2 { margin-bottom: 1.5rem; } /* ---------- 18. Page container ---------- */ .page-container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } /* ---------- 19. Brand logo ---------- */ .logo { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.3rem; color: var(--text-primary); } .logo img { border-radius: 0.5rem; } /* ---------- 20. History item ---------- */ .history-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; border-radius: 30px; margin-bottom: 4px; cursor: pointer; transition: background 0.2s; } .history-item:hover { background: rgba(0, 0, 0, 0.05); } .dark-theme .history-item:hover { background: rgba(255, 255, 255, 0.08); } /* ---------- 21. Empty state ---------- */ .no-data { text-align: center; color: var(--text-muted); padding: 2rem 1rem; font-style: italic; } /* ---------- 22. Utility ---------- */ .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; } .text-center { text-align: center; } .text-right { text-align: right; } .hidden { display: none !important; } .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-1 { gap: 0.5rem; } .gap-2 { gap: 1rem; } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .p-1 { padding: 0.5rem; } .p-2 { padding: 1rem; } /* ---------- 23. Color dot ---------- */ .color-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } /* ---------- 23b. Font Awesome icon system ---------- Global styling for icons. Uses design tokens so the palette stays in sync with light/dark themes and any future rebrand. ------------------------------------------------------------------------- */ /* Base: every Font Awesome icon inherits color/size from its parent by default. Override per-context with the modifier classes below or inline style="color:...". */ i[class*="fa-"] { display: inline-block; line-height: 1; font-style: normal; vertical-align: -0.125em; /* optical alignment with text baseline */ } /* Icon-only buttons (no text label) — used on header, toolbars, footer */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; line-height: 1; } .icon-btn > i[class*="fa-"], .btn-primary > i[class*="fa-"], .btn-secondary > i[class*="fa-"], .btn-outline > i[class*="fa-"], .btn-text > i[class*="fa-"], .btn-icon > i[class*="fa-"], .nav-link > i[class*="fa-"] { font-size: 1em; pointer-events: none; } /* Size modifiers — apply to any icon */ .icon-xs { font-size: 0.75em; } .icon-sm { font-size: 0.875em; } .icon-md { font-size: 1em; } .icon-lg { font-size: 1.25em; } .icon-xl { font-size: 1.5em; } .icon-2xl { font-size: 2em; } /* Semantic color modifiers — resolve to theme tokens */ .icon-primary { color: var(--accent); } .icon-success { color: var(--success); } .icon-warning { color: var(--warning); } .icon-danger { color: var(--danger); } .icon-info { color: var(--icon-info); } .icon-muted { color: var(--text-muted); } .icon-secondary { color: var(--text-secondary); } /* Extended palette (matches the JS EMOJI_MAP color groups) */ .icon-purple { color: var(--icon-purple); } /* AI / premium */ .icon-gold { color: var(--icon-gold); } /* achievements, trophies */ .icon-money { color: var(--icon-money); } /* earnings, wallet */ .icon-orange { color: var(--icon-orange); } /* streaks, hot */ .icon-pink { color: var(--icon-pink); } /* gifts, promos */ .icon-slate { color: var(--icon-slate); } /* neutral tools */ /* Icon badge: circular/rounded container around an icon */ .icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(var(--accent-rgb), 0.1); color: var(--accent); flex-shrink: 0; } .icon-badge i[class*="fa-"] { font-size: 1.25rem; } /* Tooltip helper — pair with data-tooltip="Label" on the parent */ [data-tooltip] { position: relative; } [data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.35rem 0.55rem; font-size: 0.75rem; font-weight: 500; white-space: nowrap; box-shadow: var(--shadow); z-index: 9999; pointer-events: none; animation: fadeIn 0.15s ease; } /* ---------- 23c. App footer (shared across authenticated pages) ---------- Used by subjects, performance, ai, notes, referral, etc. Icon-over-label layout with semantic colors per route. ------------------------------------------------------------------------- */ .app-footer { display: flex; justify-content: space-around; align-items: center; gap: 0.25rem; padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom, 0px)); background: var(--bg-card); border-top: 1px solid var(--border); position: sticky; bottom: 0; z-index: 50; } .app-footer .footer-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 1 1 0; min-width: 0; padding: 0.5rem 0.25rem; background: none; border: none; color: var(--text-muted); font-size: 0.7rem; font-weight: 500; line-height: 1; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.2s, color 0.2s; } .app-footer .footer-btn:hover, .app-footer .footer-btn:focus-visible { background: rgba(var(--accent-rgb), 0.08); color: var(--text-primary); } .app-footer .footer-btn i[class*="fa-"] { font-size: 1.15rem; line-height: 1; display: block; } .app-footer .footer-btn span { display: block; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* Semantic colors per route — declared once, used everywhere */ .app-footer .footer-btn[data-route="profile"] i { color: var(--icon-slate); } .app-footer .footer-btn[data-route="performance"] i { color: #2563eb; } .app-footer .footer-btn[data-route="ai"] i { color: var(--icon-purple); } .app-footer .footer-btn[data-route="notes"] i { color: #f59e0b; } .app-footer .footer-btn[data-route="referral"] i, .app-footer .footer-btn.footer-btn-referral i { color: var(--icon-money); } .app-footer .footer-btn[data-route="subjects"] i { color: #2563eb; } .app-footer .footer-btn[data-route="notifications"] i { color: #f59e0b; } /* ---------- 23d. Subject card icon ---------- Matches the .subject-icon container rendered by subjects.js. ------------------------------------------------------------------------- */ .subject-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; margin-bottom: 0.75rem; flex-shrink: 0; } .subject-icon i[class*="fa-"] { font-size: 1.6rem; line-height: 1; } /* Inline action buttons inside subject cards */ .action-btn-sm { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.35rem 0.6rem; font-size: 0.78rem; font-weight: 500; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; } .action-btn-sm:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .action-btn-sm i[class*="fa-"] { font-size: 0.9em; line-height: 1; } .btn-study { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; margin-top: 0.6rem; padding: 0.6rem 1rem; font-size: 0.85rem; font-weight: 600; border-radius: var(--radius-sm); border: none; background: var(--accent); color: #fff; cursor: pointer; transition: background 0.2s; } .btn-study:hover { background: var(--accent-dark); } .btn-study i[class*="fa-"] { font-size: 1em; line-height: 1; } /* ---------- 23e. Splash referral badge icon ---------- */ #app-bootstrap .referral-badge i[class*="fa-"] { color: var(--accent-light, #60a5fa); margin-right: 0.35rem; } /* ---------- 24. Scrollbar ---------- */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); border-radius: 4px; } ::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; } /* ---------- 25. Keyframes ---------- */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeSlide { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } @keyframes modalSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes shimmer { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } } /* ---------- 26. Focus visible ---------- */ *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }