/* ===================================================================== Finora Design Flow - Design System (theme.css) Modern Minimal · Flat UI · Dark/Light mode · Poppins ===================================================================== */ /* ---------- Google Fonts ---------- */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css'); @import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css'); /* ===================================================================== 1. THEME TOKENS (CSS custom properties) Light = default on :root, Dark = [data-theme="dark"] on ===================================================================== */ :root { --primary: #506CFE; --primary-soft: rgba(80,108,254,.12); --primary-hover: #3f57e8; --secondary: #111827; --success: #22C55E; --warning: #F59E0B; --danger: #EF4444; --info: #06B6D4; --bg: #F8FAFC; --bg-soft: #eef2f7; --surface: #ffffff; --surface-2: #f4f6fa; --border: #e5e9f2; --text: #111827; --text-muted: #6b7280; --card-radius: 18px; --btn-radius: 12px; --shadow-sm: 0 2px 10px rgba(15,23,42,.05); --shadow: 0 8px 30px rgba(15,23,42,.08); --shadow-lg: 0 24px 70px rgba(15,23,42,.14); --sidebar-w: 264px; --transition: .22s cubic-bezier(.4,0,.2,1); --grad-brand: linear-gradient(135deg, #506CFE 0%, #7C5CFE 100%); --font-display: 'Manrope', 'Inter', 'Poppins', system-ui, sans-serif; --font-body: 'Inter', 'Poppins', system-ui, sans-serif; --accent-line: rgba(80,108,254,.35); --accent-soft: rgba(80,108,254,.10); --glow-blue: rgba(80,108,254,.22); --glow-violet: rgba(124,92,254,.16); --ease-out: cubic-bezier(.2,.8,.2,1); } body[data-theme="dark"] { --bg: #0b1220; --bg-soft: #0f172a; --surface: #111a2e; --surface-2: #16213a; --border: #1e293b; --text: #e5eaf3; --text-muted: #94a3b8; --secondary: #1e293b; --shadow-sm: 0 2px 10px rgba(0,0,0,.3); --shadow: 0 8px 30px rgba(0,0,0,.35); --bg: #0b1220; } /* ===================================================================== 2. BASE ===================================================================== */ * { box-sizing: border-box; } html, body { height: 100%; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); font-size: .925rem; transition: background var(--transition), color var(--transition); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); letter-spacing: -.01em; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-hover); } /* Pretty scrollbars */ ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } ::-webkit-scrollbar-track { background: transparent; } /* ===================================================================== 3. LAYOUT (sidebar + main) ===================================================================== */ .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 1040; transition: transform var(--transition), width var(--transition); } .app.collapsed .sidebar { transform: translateX(-100%); } .main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left var(--transition); } .app.collapsed .main { margin-left: 0; } .main-content { flex: 1; padding: 24px 28px 40px; max-width: 1440px; width: 100%; margin: 0 auto; } /* ---------- Brand ---------- */ .brand { display: flex; align-items: center; gap: 12px; padding: 22px 22px 18px; } .brand .logo { width: 40px; height: 40px; border-radius: 12px; background: var(--data-brand); display: grid; place-items: center; color: #fff; font-size: 1.15rem; background: var(--data-brand, linear-gradient(135deg,#506CFE,#7C5CFE)); box-shadow: 0 6px 16px rgba(80,108,254,.35); } .brand .logo i { line-height: 1; } .brand .brand-name { font-weight: 700; font-size: 1.02rem; line-height: 1.1; } .brand .brand-name small { font-weight: 500; color: var(--text-muted); } .brand .brand-logo-img { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; background: var(--surface-2); flex-shrink: 0; } /* ---------- Sidebar nav ---------- */ .sidebar-nav { flex: 1; overflow-y: auto; padding: 6px 14px 20px; } .nav-group { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); padding: 18px 12px 6px; font-weight: 600; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 12px; margin-bottom: 2px; color: var(--text-muted); font-weight: 500; position: relative; transition: background var(--transition), color var(--transition); } .nav-item i { width: 20px; text-align: center; font-size: 1rem; } .nav-item:hover { background: var(--surface-2); color: var(--text); } .nav-item.active { background: var(--primary-soft, rgba(80,108,254,.12)); color: var(--primary); font-weight: 600; } .nav-item.active::before { content: ''; position: absolute; left: -14px; top: 50%; transform: translateY(-50%); width: 4px; height: 22px; border-radius: 4px; background: var(--primary); } .nav-item .nav-badge { margin-left: auto; font-size: .68rem; background: var(--danger); color: #fff; border-radius: 99px; padding: 2px 8px; } .sidebar-footer { padding: 16px; border-top: 1px solid var(--border); } .upgrade-card { background: var(--grad-brand); color: #fff; border-radius: 16px; padding: 16px; background: linear-gradient(135deg,#506CFE,#7C5CFE); } .upgrade-card h6 { font-weight: 600; margin-bottom: 4px; } .upgrade-card p { opacity: .85; font-size: .78rem; margin-bottom: 12px; } /* ===================================================================== 4. TOPBAR ===================================================================== */ .topbar { position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 26px; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .topbar-left { display: flex; align-items: center; gap: 14px; } .page-title { font-size: 1.18rem; font-weight: 600; margin: 0; } .page-subtitle { color: var(--text-muted); font-size: .8rem; } .icon-btn { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); display: grid; place-items: center; font-size: 1rem; position: relative; transition: all var(--transition); cursor: pointer; } .icon-btn:hover { background: var(--surface-2); } /* Global search */ .global-search { position: relative; flex: 1; max-width: 380px; } .global-search i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-muted); } .global-search input { width: 100%; padding: 11px 16px 11px 42px; border-radius: var(--btn-radius); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: inherit; font-size: .88rem; transition: var(--transition); } .global-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } /* Notification bell */ .bell-wrap { position: relative; } .bell-dot { position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); border: 2px solid var(--surface); } .notif-dropdown { position: absolute; right: 0; top: calc(100% + 10px); width: 340px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; display: none; z-index: 1060; } .notif-dropdown.open { display: block; } .notif-head { padding: 14px 16px; font-weight: 600; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .notif-list { max-height: 320px; overflow-y: auto; } .notif-item { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); } .notif-item:hover, .notif-item:hover { background: var(--surface-2); } .notif-item.unread { background: var(--primary-soft); } .notif-item i { color: var(--primary); margin-top: 2px; } .notif-item .t { font-size: .83rem; } .notif-item .m { font-size: .76rem; color: var(--text-muted); } /* ---------- User dropdown ---------- */ .user-menu { position: relative; display: flex; align-items: center; gap: 10px; cursor: pointer; } .user-chip { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); } .user-chip:hover { background: var(--surface-2); } .user-meta { line-height: 1.1; } .user-meta .n { font-weight: 600; font-size: .82rem; } .user-meta .r { font-size: .7rem; color: var(--text-muted); } .drop-menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding: 8px; display: none; z-index: 1060; } .drop-menu.open { display: block; } .drop-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--text); font-size: .85rem; } .drop-menu a:hover { background: var(--surface-2); color: var(--primary); } .drop-menu a.danger:hover { color: var(--danger); } .drop-menu .sep { height: 1px; background: var(--border); margin: 6px 4px; } /* ===================================================================== 5. AVATARS ===================================================================== */ .avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .8rem; font-weight: 600; flex-shrink: 0; } .avatar.lg { width: 52px; height: 52px; font-size: 1rem; } .avatar .dot { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--success); border: 2px solid var(--surface); bottom: 0; right: 0; } .avatar-wrap { position: relative; } /* ===================================================================== 6. CARDS ===================================================================== */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--card-radius); box-shadow: var(--shadow-sm); } .card .card-header { background: transparent; border-bottom: 1px solid var(--border); padding: 18px 20px; font-weight: 600; border-radius: var(--card-radius) var(--card-radius) 0 0; } .card .card-body { padding: 20px; } .card .card-title { font-weight: 600; font-size: .98rem; margin: 0; } .card .card-subtitle { color: var(--text-muted); font-size: .78rem; } /* Stat card */ .stat-card { padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; position: relative; } .stat-card .stretched-link { cursor: pointer; } .stat-card .stat-icon { margin: 0 auto; } .stat-card.stat-center { flex-direction: column; text-align: center; justify-content: center; } .stat-card.stat-center .stat-icon { width: 56px; height: 56px; margin: 0 auto 4px; } .stat-card.stat-center .stat-value { line-height: 1.2; } .stat-card.stat-center .stat-label { margin-top: 2px; } .stat-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.3rem; color: #fff; flex-shrink: 0; } .stat-icon.primary { background: linear-gradient(135deg,#506CFE,#7C5CFE); } .stat-icon.success { background: linear-gradient(135deg,#22C55E,#16A34A); } .stat-icon.warning { background: linear-gradient(135deg,#F59E0B,#EA580C); } .stat-icon.danger { background: linear-gradient(135deg,#EF4444,#DC2626); } .stat-icon.info { background: linear-gradient(135deg,#06B6D4,#3B82F6); } .stat-icon.dark { background: linear-gradient(135deg,#1e293b,#0f172a); } .stat-card .stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; } .stat-card .stat-label { color: var(--text-muted); font-size: .78rem; font-weight: 500; } .stat-card .stat-trend { font-size: .74rem; font-weight: 600; margin-top: 3px; } .stat-trend.up { color: var(--success); } .stat-trend.down { color: var(--danger); } /* ===================================================================== 7. BUTTONS ===================================================================== */ .btn { border-radius: var(--btn-radius); font-weight: 500; padding: 10px 18px; font-family: inherit; } .btn-brand { background: var(--primary); color: #fff; border: 1px solid var(--primary); } .btn-brand:hover { background: var(--primary-hover); color: #fff; } .btn-outline-brand { border: 1px solid var(--primary); color: var(--primary); background: transparent; } .btn-outline-brand:hover { background: var(--primary-soft); color: var(--primary); } .btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); } .btn-ghost:hover { background: var(--surface-2); color: var(--text); } .btn-soft { border: 1px solid transparent; } .btn-soft-primary { background: var(--primary-soft); color: var(--primary); } .btn-soft-success { background: rgba(34,197,94,.12); color: var(--success); } .btn-soft-warning { background: rgba(245,158,11,.14); color: #d97706; } .btn-soft-danger { background: rgba(239,68,68,.12); color: var(--danger); } .btn-soft-info { background: rgba(6,182,212,.12); color: var(--info); } .btn-sm { padding: 7px 14px; font-size: .8rem; border-radius: 10px; } /* ===================================================================== 8. BADGES ===================================================================== */ .badge { font-weight: 600; border-radius: 8px; padding: 5px 11px; font-size: .72rem; } .badge-soft-secondary { background: var(--bg-soft); color: var(--text-muted); } .badge-soft-primary { background: var(--primary-soft); color: var(--primary); } .badge-soft-success { background: rgba(34,197,94,.13); color: var(--success); } .badge-soft-danger { background: rgba(239,68,68,.12); color: var(--danger); } .badge-soft-warning { background: rgba(245,158,11,.15); color: #d97706; } .badge-soft-info { background: rgba(6,182,212,.13); color: var(--info); } .badge-soft-dark { background: var(--surface-2); color: var(--text); } /* ===================================================================== 9. FORMS ===================================================================== */ .form-control, .form-select { border-radius: var(--btn-radius); border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 11px 15px; font-family: inherit; font-size: .88rem; } .form-control:focus, .form-select:focus { background: var(--surface); color: var(--text); border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .form-label { font-weight: 500; font-size: .82rem; margin-bottom: 6px; } .form-label .req { color: var(--danger); } /* Client delivery-time picker (3h / 6h / 1d / 2d / 1w) */ .tl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .tl-opt { display: block; cursor: pointer; text-align: center; padding: 9px 6px; border: 1px solid var(--border); border-radius: var(--btn-radius); font-size: .78rem; font-weight: 600; color: var(--text-muted); transition: .15s; user-select: none; } .tl-opt input { position: absolute; opacity: 0; pointer-events: none; } .tl-opt:hover { border-color: var(--primary); color: var(--primary); } .tl-opt:has(input:checked) { background: linear-gradient(135deg, #506CFE, #7C5CFE); color: #fff; border-color: transparent; box-shadow: 0 2px 10px rgba(80, 108, 254, .35); } .input-group-text { background: var(--surface-2); border-color: var(--border); color: var(--text-muted); border-radius: var(--btn-radius); } .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); } .form-check-input:focus { box-shadow: 0 0 0 3px var(--primary-soft); } /* ===================================================================== 10. TABLE ===================================================================== */ .table { --bs-table-bg: transparent; color: var(--text); } .table thead th { text-transform: uppercase; font-size: .68rem; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; border-bottom: 1px solid var(--border); padding: 12px 14px; } .table tbody td { padding: 14px; vertical-align: middle; border-color: var(--border); font-size: .86rem; } .table tbody tr:hover { background: var(--surface-2); } .table-card { border-radius: var(--card-radius); overflow: hidden; } /* ===================================================================== 11. KANBAN ===================================================================== */ .kanban { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 10px; } .kanban-col { flex: 1; min-width: 260px; background: var(--surface-2); border-radius: 16px; padding: 14px; } .kanban-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-weight: 600; font-size: .84rem; } .kanban-count { background: var(--surface); border-radius: 8px; padding: 2px 9px; font-size: .72rem; color: var(--text-muted); } .kanban-body { display: flex; flex-direction: column; gap: 10px; min-height: 120px; } .kanban-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px; box-shadow: var(--shadow-sm); cursor: grab; transition: var(--transition); } .kanban-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .kanban-card .k-title { font-weight: 600; font-size: .86rem; margin-bottom: 8px; } .kanban-card .k-meta { display: flex; align-items: center; gap: 8px; font-size: .74rem; color: var(--text-muted); } /* ===================================================================== 12. TIMELINE ===================================================================== */ .timeline { position: relative; padding-left: 24px; } .timeline::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--border); } .timeline-item { position: relative; padding-bottom: 20px; } .timeline-item::before { content: ''; position: absolute; left: -24px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--primary); border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--primary-soft); } .timeline-item.done::before { background: var(--success); box-shadow: 0 0 0 2px rgba(34,197,94,.2); } .timeline-item .t-title { font-weight: 600; font-size: .84rem; } .timeline-item .t-desc { font-size: .78rem; color: var(--text-muted); } .timeline-item .t-time { font-size: .72rem; color: var(--text-muted); } /* ===================================================================== 13. AUTH PAGES ===================================================================== */ .auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: linear-gradient(135deg,#0f172a 0%,#1e1b4b 50%,#506CFE 100%); position: relative; overflow: hidden; } .auth-wrap::before, .auth-wrap::after { content: ''; position: absolute; border-radius: 50%; filter: blur(80px); opacity: .4; } .auth-wrap::before { width: 300px; height: 300px; background: #506CFE; top: -60px; left: -60px; } .auth-wrap::after { width: 320px; height: 320px; background: #7C5CFE; bottom: -80px; right: -60px; } .auth-card { width: 100%; max-width: 440px; background: var(--surface); border-radius: 22px; padding: 34px; box-shadow: 0 25px 60px rgba(0,0,0,.35); position: relative; z-index: 2; } .auth-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 10px; } .auth-brand .logo { width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg,#506CFE,#7C5CFE); display: grid; place-items: center; color: #fff; font-size: 1.3rem; } .auth-title { font-size: 1.5rem; font-weight: 700; text-align: center; } .auth-sub { text-align: center; color: var(--text-muted); font-size: .85rem; margin-bottom: 24px; } .role-select { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 16px; } .role-opt { border: 1.5px solid var(--border); border-radius: 14px; padding: 10px 4px; text-align: center; cursor: pointer; font-size: .72rem; font-weight: 600; color: var(--text-muted); transition: var(--transition); user-select: none; } .role-opt i { display: block; font-size: 1.2rem; margin-bottom: 5px; } .role-opt:hover { border-color: var(--primary); color: var(--primary); } .role-opt.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); } /* ===================================================================== 16. LOADING SCREEN + ANIMATIONS + HERO ===================================================================== */ #appLoader { position: fixed; inset: 0; z-index: 9999; background: var(--bg); display: grid; place-items: center; transition: opacity .5s ease, visibility .5s ease; } #appLoader.hide { opacity: 0; visibility: hidden; } #appLoader .loader-inner { text-align: center; } #appLoader .loader-logo { width: 66px; height: 66px; border-radius: 18px; margin: 0 auto 16px; background: linear-gradient(135deg,#506CFE,#7C5CFE); color: #fff; font-size: 1.7rem; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(80,108,254,.4); animation: loaderPulse 1.2s ease-in-out infinite; } @keyframes loaderPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} } #appLoader .loader-brand { font-weight: 700; font-size: 1.05rem; margin-bottom: 16px; } #appLoader .loader-brand span { color: var(--text-muted); font-weight: 500; } #appLoader .loader-bar { width: 168px; height: 4px; border-radius: 99px; background: var(--border); overflow: hidden; margin: 0 auto; } #appLoader .loader-bar span { display: block; height: 100%; width: 40%; border-radius: 99px; background: linear-gradient(90deg,#506CFE,#7C5CFE); animation: loaderSlide 1s ease-in-out infinite; } @keyframes loaderSlide { 0%{transform:translateX(-100%)} 100%{transform:translateX(400%)} } /* Card hover lift */ .card { transition: transform var(--transition), box-shadow var(--transition), background var(--transition); } .stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .hero-card:hover { transform: none; } /* Approved / delivered order watermark */ .chat-panel { position: relative; } .order-watermark { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; pointer-events: none; } .order-watermark .wm-stamp { border: 4px solid rgba(34,197,94,.5); color: rgba(34,197,94,.65); font-weight: 800; font-size: 1.6rem; letter-spacing: .1em; text-transform: uppercase; padding: 16px 40px; border-radius: 16px; transform: rotate(-14deg); background: rgba(34,197,94,.08); box-shadow: 0 10px 30px rgba(0,0,0,.12); display: flex; align-items: center; gap: 12px; white-space: nowrap; animation: wmPulse 2.4s ease-in-out infinite; } .order-watermark .wm-stamp .wm-sub { font-size: .95rem; font-weight: 600; letter-spacing: .06em; } @keyframes wmPulse { 0%,100% { opacity: .85; } 50% { opacity: 1; } } /* Drag & drop file upload overlay on the chat */ .chat-drop { position: absolute; inset: 0; z-index: 30; display: none; place-items: center; gap: 12px; border: 3px dashed var(--primary); border-radius: 20px; margin: 8px; text-align: center; background: rgba(80,108,254,.16); color: var(--primary); font-weight: 700; font-size: 1.05rem; pointer-events: none; flex-direction: column; } .chat-drop.show { display: grid; } .chat-drop i { font-size: 2rem; } .chat-drop div { font-size: .9rem; opacity: .9; } /* Sinhala font converter page */ .mc-text { min-height: 220px; resize: vertical; line-height: 1.7; font-family: var(--mono, monospace); font-size: 1rem; background: var(--surface-2, #f6f8fd); color: var(--text, #1b1f2b); } /* Highlight delivered file messages in the chat feed */ .msg .m-file { background: linear-gradient(135deg, rgba(80,108,254,.10), rgba(80,108,254,.04)); border: 1px solid rgba(80,108,254,.28); border-radius: 14px; padding: 12px 14px; } .msg .m-file.file-delivered { background: linear-gradient(135deg, rgba(34,197,94,.16), rgba(34,197,94,.05)); border-color: rgba(34,197,94,.5); box-shadow: 0 4px 16px rgba(34,197,94,.15); } .msg .m-file .m-file-tag { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg,#22C55E,#16A34A); border-radius: 99px; padding: 3px 10px; } /* Clickable notifications */ .notif-item { display: flex; gap: 12px; align-items: flex-start; padding: 11px 14px; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--border); cursor: pointer; transition: background .15s; } .notif-item.ref-clickable:hover { background: var(--surface-2); } /* Focused new-notification popup */ .notif-popup { position: fixed; inset: 0; z-index: 1200; display: none; place-items: center; } .notif-popup.show { display: grid; } .notif-popup-backdrop { position: absolute; inset: 0; background: rgba(5,8,18,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .notif-popup-card { position: relative; z-index: 2; width: min(400px, calc(100vw - 40px)); background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 30px 70px rgba(0,0,0,.35); padding: 26px; text-align: center; animation: nppPop .28s cubic-bezier(.18,.89,.32,1.2); } @keyframes nppPop { 0% { transform: scale(.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .notif-popup-card .npp-ico { width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 18px; font-size: 1.5rem; color: #fff; background: linear-gradient(135deg,#506CFE,#7C5CFE); display: grid; place-items: center; animation: nppRing 1.2s ease-in-out infinite; } @keyframes nppRing { 0%,100%{transform:rotate(0)} 10%{transform:rotate(-12deg)} 20%{transform:rotate(12deg)} 30%{transform:rotate(-8deg)} 40%{transform:rotate(0)} } .notif-popup-card .npp-title { font-weight: 700; font-size: 1.05rem; } .notif-popup-card .npp-msg { color: var(--text-muted); font-size: .86rem; margin: 8px 0 20px; line-height: 1.5; } .notif-popup-card .npp-actions { display: flex; gap: 10px; justify-content: center; } /* Scroll reveal */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .05s; } .reveal.d2 { transition-delay: .1s; } .reveal.d3 { transition-delay: .15s; } .reveal.d4 { transition-delay: .2s; } /* Hero banner */ .hero-card { position: relative; border-radius: 22px; padding: 28px 30px; color: #fff; background: linear-gradient(120deg,#1e1b4b 0%,var(--primary) 55%,var(--primary) 100%); margin-bottom: 22px; overflow: hidden; box-shadow: 0 18px 40px var(--brand-glow, rgba(80,108,254,.28)); } .hero-card::before { content:''; position:absolute; width: 340px; height: 340px; border-radius: 50%; background: rgba(255,255,255,.1); top:-130px; right:-70px; } .hero-card::after { content:''; position:absolute; width: 210px; height: 210px; border-radius: 50%; background: rgba(255,255,255,.08); bottom:-100px; right: 170px; } .hero-title { font-size: 1.5rem; font-weight: 700; position: relative; z-index: 1; letter-spacing: -.01em; } .hero-sub { opacity: .88; font-size: .88rem; margin-top: 5px; position: relative; z-index: 1; } .hero-chip { display:inline-flex; align-items:center; gap:6px; font-size:.74rem; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25); border-radius:99px; padding:5px 12px; margin-top:14px; position:relative; z-index:1; font-weight:500; } .hero-actions { position: relative; z-index: 1; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; } .hero-btn { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 12px; padding: 10px 16px; font-size: .84rem; font-weight: 500; gap: 8px; align-items: center; transition: all .2s ease; } .hero-btn:hover { background: rgba(255,255,255,.26); color:#fff; transform: translateY(-2px); } .hero-btn.primary { background:#fff; color:#1e1b4b; border-color:#fff; } .hero-btn.primary:hover { box-shadow: 0 10px 24px rgba(0,0,0,.25); } /* Modern mini-stat trend chips */ .trend-chip { font-size: .72rem; font-weight: 600; border-radius: 8px; padding: 3px 9px; margin-left: 6px; } .trend-chip.up { background: rgba(34,197,94,.14); color: var(--success); } .trend-chip.down { background: rgba(239,68,68,.12); color: var(--danger); } /* Quick actions section */ .qa-btn { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); transition: all var(--transition); color: var(--text); } .qa-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--primary); color: var(--text); } .qa-btn i { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: .95rem; } /* ===================================================================== 99. MISC / UTILITIES (legacy anchor) ===================================================================== */ .list-group-item { background: var(--surface); border-color: var(--border); color: var(--text); } .dropdown-menu { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); } .dropdown-item { color: var(--text); } .dropdown-item:hover { background: var(--surface-2); } .placeholder-text { color: var(--text-muted); } .search-input { border-radius: 12px; } .grid { display: grid; gap: 18px; } .grid-4 { grid-template-columns: repeat(4,1fr); } .grid-3 { grid-template-columns: repeat(3,1fr); } .grid-2 { grid-template-columns: repeat(2,1fr); } .section-title { font-weight: 600; font-size: 1rem; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; } /* Toast / flash */ .toast-flash { position: fixed; top: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; } .flash-toast { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 12px; padding: 14px 18px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 12px; font-size: .86rem; animation: slideIn .3s ease; } .flash-toast.t-success { border-left-color: var(--success); } .flash-toast.t-danger { border-left-color: var(--danger); } .flash-toast.t-warning { border-left-color: var(--warning); } @keyframes slideIn { from { transform: translateX(120%); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes fadeInUp { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } } .fade-up { animation: fadeInUp .4s ease both; } .fade-up.d1 { animation-delay: .05s; } .fade-up.d2 { animation-delay: .1s; } .fade-up.d3 { animation-delay: .15s; } .fade-up.d4 { animation-delay: .2s; } .bg-brand { background: var(--grad-brand, linear-gradient(135deg,#506CFE,#7C5CFE)) !important; } .text-primary { color: var(--primary) !important; } .text-danger { color: var(--danger) !important; } .text-success { color: var(--success) !important; } .text-warning { color: var(--warning) !important; } .text-muted { color: var(--text-muted) !important; } /* Theme switch pill */ .theme-toggle { position: relative; } .theme-toggle i { font-size: .95rem; } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2,1fr); } .grid-3 { grid-template-columns: repeat(2,1fr); } } @media (max-width: 991px) { .sidebar { transform: translateX(-100%); } .app.mobile-open .sidebar { transform: none; box-shadow: var(--shadow); } .app.mobile-open .overlay { display: block; } .main { margin-left: 0; } .global-search { display: none; } .overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1035; } } @media (max-width: 640px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } .main-content { padding: 16px 14px 40px; } .page-subtitle { display: none; } .user-meta { display: none; } .m-user-chip { padding: 8px; } } /* ===================================================================== 15. WHATSAPP-STYLE CHAT (order view) ===================================================================== */ .chat-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 18px; height: calc(100vh - 180px); min-height: 420px; } @media (max-width: 1100px) { .chat-layout { grid-template-columns: 1fr; height: auto; } } .chat-panel { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--card-radius); overflow: hidden; } .chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); } .chat-head .ch-title { font-weight: 600; line-height: 1.2; } .chat-head .ch-sub { font-size: .72rem; color: var(--text-muted); } .chat-body { flex: 1; overflow-y: auto; padding: 18px 16px; background-color: var(--surface-2); background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 22px 22px; } .msg-day { text-align: center; margin: 8px 0 16px; font-size: .72rem; color: var(--text-muted); background: var(--surface); display: inline-block; padding: 4px 12px; border-radius: 99px; width: auto; margin-left: auto; margin-right: auto; } .msg-day { display: block; text-align: center; } .msg { display: flex; gap: 8px; margin-bottom: 12px; max-width: 78%; } .msg .m-ava { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .66rem; font-weight: 600; flex-shrink: 0; align-self: flex-end; } .msg .m-bubble { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; border-bottom-left-radius: 4px; padding: 8px 12px 6px; box-shadow: var(--shadow-sm); position: relative; } .msg .m-bubble .m-name { font-size: .72rem; font-weight: 700; margin-bottom: 2px; } .msg .m-bubble .m-text { font-size: .86rem; word-wrap: break-word; white-space: pre-wrap; } .msg .m-bubble .m-meta { font-size: .66rem; color: var(--text-muted); text-align: right; margin-top: 3px; } .msg .m-bubble .m-meta i { font-size: .6rem; margin-left: 3px; } .msg .m-file { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border-radius: 10px; padding: 10px 12px; margin-top: 4px; } .msg .m-file a { font-weight: 500; font-size: .82rem; } /* sent by me -> right aligned */ .msg.self { margin-left: auto; flex-direction: row-reverse; } .msg.self .m-bubble { background: var(--primary-soft); border-color: transparent; border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; } .msg.self .m-bubble .m-name { color: var(--primary); } .msg.system { max-width: 100%; justify-content: center; } .msg.system .m-bubble { background: transparent; border: none; box-shadow: none; text-align: center; color: var(--text-muted); font-size: .78rem; } .chat-composer { display: flex; align-items: center; gap: 8px; padding: 12px; border-top: 1px solid var(--border); background: var(--surface); } .chat-composer textarea { resize: none; max-height: 90px; } .chat-side { display: flex; flex-direction: column; gap: 16px; overflow-y: auto; } .chat-info { font-size: .85rem; } .chat-info .ci-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); } .chat-info .ci-row:last-child { border-bottom: none; } .chat-info .ci-k { color: var(--text-muted); font-size: .76rem; } .chat-info .ci-v { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; } .msg-self-ava { align-self: flex-end; order: 1; } /* ===================================================================== 18. UI / SEO & MOBILE POLISH (v20260807.1) Cleaner typography, better alignment, full small-screen support ===================================================================== */ html { scrollbar-gutter: stable; } body { line-height: 1.55; text-rendering: optimizeLegibility; } img, video, canvas, svg { max-width: 100%; height: auto; } h1,h2,h3,h4,h5,h6 { line-height: 1.2; margin: 0 0 .4em; } /* Responsive images & text truncation */ .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Cards spill less on phones */ @media (max-width: 640px) { .card .card-header { padding: 14px 16px; } .card .card-body { padding: 16px; } .stat-card { padding: 16px; } .hero-card { padding: 20px; margin-bottom: 16px; } .hero-title { font-size: 1.25rem; } .hero-chip { display: none; } body { font-size: .885rem; } /* Topbar: keep it one clean row, let title clip */ .topbar { padding: 10px 12px; gap: 8px; } .topbar-left { gap: 8px; min-width: 0; } .page-title { font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; } .icon-btn { width: 38px; height: 38px; } .theme-toggle { width: 36px; height: 36px; } .user-meta, .page-subtitle { display: none; } /* Notifications dropdown fits the screen */ .notif-dropdown { width: calc(100vw - 24px); max-width: 360px; right: -8px; } .drop-menu { right: 0; left: auto; width: max-content; min-width: 180px; max-width: calc(100vw - 24px); } /* Keep tables usable instead of forcing text-size */ .grid { gap: 14px; } /* Tap targets */ .btn { padding: 10px 16px; } .btn-sm { padding: 7px 13px; } } /* Card headers align consistently */ .card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } /* Nav item tightness on desktop but comfortable touch size on mobile */ @media (max-width: 991px) { .nav-item { padding-top: 13px; padding-bottom: 13px; } .main-content { padding-top: 14px; } } /* Better form label-text contrast & alignment */ .form-label { display: flex; align-items: center; justify-content: space-between; line-height: 1.4; } .input-group > .form-control:not(:first-child) { border-left: none; } /* Responsive auth (login) card never clips on tiny screens */ .auth-card { padding: 28px 24px; } @media (max-width: 400px) { .auth-card { padding: 22px 16px; } .role-select { grid-template-columns: repeat(2,1fr); gap: 8px; } } /* Thinner button ring to reduce visual noise */ .btn:focus, .btn-ghost:focus, .form-control:focus { box-shadow: 0 0 0 3px var(--primary-soft) !important; } /* Reduced-motion accessibility */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; } } /* Client action buttons: smaller on mobile only */ @media (max-width: 640px) { body[data-role="client"] .btn { padding: 6px 12px; font-size: .78rem; border-radius: 9px; } body[data-role="client"] .btn-sm { padding: 5px 10px; font-size: .72rem; border-radius: 8px; } body[data-role="client"] .hero-btn { padding: 7px 12px; font-size: .76rem; border-radius: 9px; } } /* Client dashboard: compact single-row stat cards on mobile (smart/modern) */ @media (max-width: 640px) { body[data-role="client"][data-page="index.php"] .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } body[data-role="client"][data-page="index.php"] .stat-card { padding: 12px 6px; gap: 6px; } body[data-role="client"][data-page="index.php"] .stat-card .stat-icon { width: 36px; height: 36px; font-size: .95rem; margin: 0 auto; border-radius: 11px; } body[data-role="client"][data-page="index.php"] .stat-card .stat-value { font-size: 1.05rem; } body[data-role="client"][data-page="index.php"] .stat-card .stat-label { font-size: .62rem; line-height: 1.2; word-break: break-word; } } /* ------------------------------------------------------------------------- Bootstrap 5 token bridge - keeps every component readable in both themes (Bootstrap's own defaults are dark-only; rebinding stops text going dark on dark backgrounds) ------------------------------------------------------------------------- */ :root { --bs-body-color: var(--text); --bs-body-color-rgb: 17, 24, 39; --bs-body-bg: var(--bg); --bs-border-color: var(--border); --bs-secondary-color: var(--text-muted); --bs-tertiary-color: var(--text-muted); --bs-emphasis-color: var(--text); --bs-secondary-bg: var(--surface-2); --bs-tertiary-bg: var(--surface); --bs-light-bg: var(--surface-2); --bs-btn-color: var(--text); --bs-modal-color: var(--text); --bs-list-group-color: var(--text); --bs-list-group-bg: var(--surface); --bs-table-color: var(--text); --bs-table-bg: transparent; --bs-link-color: var(--primary); --bs-link-hover-color: var(--primary-hover); } body[data-theme="dark"] { --bs-body-color: var(--text); --bs-body-color-rgb: 229, 234, 243; --bs-border-color: var(--border); --bs-secondary-color: var(--text-muted); --bs-tertiary-color: var(--text-muted); --bs-emphasis-color: var(--text); --bs-table-color: var(--text); --bs-modal-color: var(--text); --bs-list-group-color: var(--text); --bs-secondary-bg: var(--surface-2); --bs-tertiary-bg: var(--surface); } /* Safety net: any bootstrap surface inheriting a stray token stays legible */ .modal-content, .modal-header, .modal-body, .modal-footer, .dropdown-menu, .dropdown-item, .toast, .toast-header, .toast-body, .list-group, .list-group-item, .alert, .page, .form-text { color: var(--text); } input, textarea, select { color: var(--text); } input::placeholder, textarea::placeholder { color: var(--text-muted); } option { color: #222; } /* ------------------------------------------------------------------------- Modern order cards (Active Projects) - flat, clean, app-like ------------------------------------------------------------------------- */ .proj-list { display: flex; flex-direction: column; gap: 10px; } .proj-card { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; position: relative; text-decoration: none; color: var(--text); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .proj-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--primary); opacity: .85; } .proj-card.review::before { background: var(--warning); } .proj-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--primary); color: var(--text); } .proj-body { flex: 1; min-width: 0; } .proj-line { display: flex; align-items: center; gap: 8px; } .proj-title { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .proj-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .proj-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 99px; padding: 3px 9px; } .proj-chip i { font-size: .6rem; } .proj-side { display: flex; align-items: center; flex-shrink: 0; gap: 8px; } .proj-side .chev { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-muted); font-size: .72rem; } .proj-card:hover .chev { background: var(--primary-soft); color: var(--primary); } /* Mobile: tighten the cards */ @media (max-width: 480px) { .proj-card { padding: 12px 14px; gap: 12px; } .proj-title { font-size: .84rem; } .proj-chip { font-size: .64rem; padding: 2px 8px; } .proj-side .badge { font-size: .66rem; } } /* ------------------------------------------------------------------------- "Unread" highlight - a single soft background tint. No pill, no pulse, no border/outline - the tint is the only visual cue. ------------------------------------------------------------------------- */ tr.tr-new { background: color-mix(in srgb, var(--primary) 7%, var(--surface)); } .kanban-card.has-new, .proj-card.has-new { background: color-mix(in srgb, var(--primary) 7%, var(--surface)); } /* Bell notification icon shown on unread order cards */ .unread-ico { display: inline-grid; place-items: center; position: relative; flex-shrink: 0; width: 24px; height: 24px; margin-right: 6px; border-radius: 8px; font-size: .74rem; color: #fff; vertical-align: middle; background: linear-gradient(135deg, #506CFE, #7C5CFE); transform-origin: top center; animation: bell-ring 2.4s ease-in-out infinite; } .unread-ico::after { content: ''; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); border: 1.5px solid var(--surface); animation: notif-pulse 2.4s ease-in-out infinite; } .proj-card > .unread-ico { margin-right: 0; } @keyframes bell-ring { 0%, 8%, 100% { transform: rotate(0deg); } 2% { transform: rotate(-18deg); } 4% { transform: rotate(15deg); } 6% { transform: rotate(-8deg); } } @keyframes notif-pulse { 0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 var(--danger); } 35% { box-shadow: 0 0 0 5px rgba(220, 53, 69, 0); } 50% { transform: scale(1.25); } 60% { box-shadow: 0 0 0 5px rgba(220, 53, 69, 0); } } @media (prefers-reduced-motion: reduce) { .unread-ico, .unread-ico::after { animation: none; } } /* ===================================================================== Super Admin: masquerade notice bar ===================================================================== */ .masquerade-bar { position: sticky; top: 0; z-index: 1090; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 26px; background: linear-gradient(135deg,#506CFE,#7C5CFE); color: #fff; font-size: .84rem; } .masquerade-bar a { color: #fff; font-weight: 600; font-size: .8rem; background: rgba(255,255,255,.16); padding: 6px 14px; border-radius: 10px; } .masquerade-bar a:hover { background: rgba(255,255,255,.26); color:#fff; } .masquerade-bar .fa-user-secret { margin-right: 6px; } /* ===================================================================== MOBILE POLISH v2 (v20260810) - clean on phones & tablets Safe-area insets, iOS zoom guard, scroll-lock, momentum scrolling, refined drawer, and larger touch targets. ===================================================================== */ /* Never show a horizontal page scrollbar (scrollable panels keep their own) */ html, body { overflow-x: hidden; } html { -webkit-text-size-adjust: 100%; } /* Prevent iOS from zooming on focus - inputs need >= 16px font */ @media (max-width: 640px) { input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], textarea, select { font-size: 16px !important; } } /* Scroll lock when the mobile drawer is open */ body.no-scroll { overflow: hidden; } /* Momentum scrolling on touch for scrollable panels */ .sidebar-nav, .notif-list, .chat-body, .kanban, .table-responsive, .drop-menu, .notif-dropdown { -webkit-overflow-scrolling: touch; } /* Safe-area (notched phones) padding */ .topbar { padding-left: max(26px, env(safe-area-inset-left)); padding-right: max(26px, env(safe-area-inset-right)); } .main-content { padding-bottom: calc(40px + env(safe-area-inset-bottom)); } .sidebar { padding-bottom: env(safe-area-inset-bottom); } .masquerade-bar { padding-left: max(26px, env(safe-area-inset-left)); padding-right: max(26px, env(safe-area-inset-right)); } /* Mobile drawer: fixed-width, elevated, reachable under the thumb */ @media (max-width: 991px) { .sidebar { width: min(82vw, 300px); box-shadow: 0 0 60px rgba(0,0,0,.45); } .overlay { backdrop-filter: blur(2px); } .topbar { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); } } /* Kanban board: swipe-snapped columns on touch */ @media (max-width: 991px) { .kanban { scroll-snap-type: x proximity; padding-bottom: 14px; } .kanban-col { scroll-snap-align: start; } .chat-layout { min-height: 0; } } /* Small-screen fine-tuning */ @media (max-width: 640px) { .main-content { padding: 14px 14px calc(34px + env(safe-area-inset-bottom)); } .topbar { gap: 6px; padding-top: 10px; padding-bottom: 10px; } .topbar-left { gap: 6px; } .page-title { max-width: 34vw; } .notif-dropdown { width: calc(100vw - 16px); right: -4px; } .notif-dropdown.open { max-width: calc(100vw - 16px); } .grid { gap: 12px; } .form-control { min-height: 44px; } .btn { border-radius: 11px; } .nav-badge { min-width: 20px; text-align: center; } .stat-card { min-width: 0; } .stat-value { font-size: 1.15rem; } .table th, .table td { white-space: nowrap; } } /* Tablets: give tables a little more room, avoid cramped chips */ @media (min-width: 641px) and (max-width: 1024px) { .main-content { padding: 20px 20px 40px; } } /* Favor taps: slightly bigger hit area for icon buttons already handled at 640px; keep lists tappable */ @media (hover: none) and (pointer: coarse) { .nav-item { padding-top: 13px; padding-bottom: 13px; } .drop-menu a, .notif-item { padding-top: 12px; padding-bottom: 12px; } } /* ===================================================================== STRATEGY DESIGN LANGUAGE (v20260811) - inspired by finora-strategy Blue/white theme. Eyebrows, uppercase titles, scroll progress, reveals, refined cards/buttons/chips, section rhythm, callout utilities. ===================================================================== */ /* ---------- Scroll progress bar (fixed, top of viewport) ---------- */ .progress-track { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 4000; background: transparent; pointer-events: none; } .progress-bar-fill { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--primary), #7C5CFE); box-shadow: 0 0 12px var(--glow-blue); transition: width .12s linear; } /* ---------- Scroll reveal ---------- */ [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--reveal-delay, 0s); will-change: opacity, transform; } [data-reveal].in { opacity: 1; transform: translateY(0); } [data-reveal].rv-1 { --reveal-delay: .05s; } [data-reveal].rv-2 { --reveal-delay: .1s; } [data-reveal].rv-3 { --reveal-delay: .15s; } [data-reveal].rv-4 { --reveal-delay: .2s; } /* ---------- Numbered eyebrow (section kicker) ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .24em; color: var(--text-muted); text-transform: uppercase; } .eyebrow__num { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--primary); font-size: 13px; letter-spacing: .05em; } .eyebrow .eyebrow__ico { width: 16px; height: 16px; color: var(--primary); } /* ---------- Page eyebrow inside the topbar ---------- */ .page-eyebrow { font-family: var(--font-display); font-weight: 700; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--primary); margin-bottom: 2px; } /* ---------- Chip / pill status ---------- */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--text-muted); text-transform: uppercase; white-space: nowrap; } .chip--blue { color: var(--primary); border-color: var(--accent-line); background: var(--accent-soft); } .chip--green { color: var(--success); border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.10); } .chip--red { color: var(--danger); border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.10); } .chip--gold { color: #d97706; border-color: rgba(245,158,11,.40); background: rgba(245,158,11,.12); } /* ---------- Buttons: strategy polish ---------- */ .btn-brand, .btn-outline-brand, .btn-ghost, .btn-soft-primary, .btn-soft-success, .btn-soft-warning, .btn-soft-danger, .btn-soft-info { font-weight: 600; letter-spacing: .03em; text-transform: uppercase; transition: transform .25s var(--ease-out), box-shadow .25s, background .25s, border-color .25s, color .25s; } .btn-brand, .btn-outline-brand, .btn-ghost { border-radius: 11px; } .btn-brand { box-shadow: 0 8px 24px var(--glow-blue); } .btn-brand:hover { transform: translateY(-2px); box-shadow: 0 12px 32px var(--glow-blue); } .btn-outline-brand:hover, .btn-ghost:hover { transform: translateY(-2px); } .btn-soft-primary:hover { transform: translateY(-2px); } .btn-sm { letter-spacing: .02em; } /* ---------- Cards: subtle depth + hover lift ---------- */ .card { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 97%, var(--primary) 6%), var(--surface)); } .card.card-lift, .stat-card.card-lift { transition: transform .3s var(--ease-out), box-shadow .3s, border-color .3s; } .card.card-lift:hover, .stat-card.card-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--accent-line); } /* ---------- Hero / big statement typography ---------- */ .display-title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; } .accent { color: var(--primary); } .accent-grad { background: linear-gradient(100deg, var(--primary), #7C5CFE); -webkit-background-clip: text; background-clip: text; color: transparent; } .section-note { color: var(--text-muted); font-size: .92rem; max-width: 720px; } .section-note strong { color: var(--text); font-weight: 600; } /* ---------- Callout card (lightbulb / note) ---------- */ .note-card { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border-radius: var(--card-radius); background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--text); font-size: .9rem; line-height: 1.6; } .note-card i { color: var(--primary); margin-top: 2px; font-size: 1.05rem; } .note-card strong { color: var(--primary); } /* ---------- Landing section rhythm (alternating alt bands) ---------- */ .ls-section { position: relative; } .ls-alt { background: radial-gradient(700px 320px at 92% 0%, var(--glow-blue), transparent 60%), radial-gradient(500px 280px at 8% 100%, var(--glow-violet), transparent 60%); border-block: 1px solid var(--border); } /* ---------- Reveal + reduced-motion safety ---------- */ @media (prefers-reduced-motion: reduce) { .progress-bar-fill { transition: none; } [data-reveal] { opacity: 1; transform: none; } }