/* ============================================================ HireMe.ai — Global Design System Import this file on EVERY page. Usage: ============================================================ */ /* ── Google Fonts ─────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); /* ── CSS Custom Properties (Brand Tokens) ─────────────────── */ :root { /* Colors */ --bg: #0A0A0F; --surface: #13131A; --surface-2: #1A1A24; --border: #1E1E2E; --border-glow: rgba(108, 99, 255, 0.25); --primary: #6C63FF; --primary-dim: rgba(108, 99, 255, 0.12); --primary-glow: rgba(108, 99, 255, 0.35); --accent: #00D4FF; --accent-dim: rgba(0, 212, 255, 0.10); --accent-glow: rgba(0, 212, 255, 0.30); --text: #FFFFFF; --text-muted: #999999; --text-dim: #666680; --success: #00C896; --success-dim: rgba(0, 200, 150, 0.12); --warning: #FFB800; --warning-dim: rgba(255, 184, 0, 0.12); --error: #FF4D4D; --error-dim: rgba(255, 77, 77, 0.12); /* Typography */ --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-md: 1.125rem; /* 18px */ --fs-lg: 1.25rem; /* 20px */ --fs-xl: 1.5rem; /* 24px */ --fs-2xl: 2rem; /* 32px */ --fs-3xl: 2.5rem; /* 40px */ --fs-4xl: 3rem; /* 48px */ --fs-5xl: 4rem; /* 64px */ /* Spacing */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; /* Radii */ --radius-sm: 6px; --radius: 12px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow: 0 4px 24px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5); --shadow-primary: 0 4px 24px rgba(108, 99, 255, 0.35); --shadow-accent: 0 4px 24px rgba(0, 212, 255, 0.25); /* Transitions */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --dur-fast: 150ms; --dur: 250ms; --dur-slow: 400ms; /* Layout */ --max-w: 1280px; --nav-h: 72px; --sidebar-w: 260px; /* Glassmorphism base */ --glass-bg: rgba(255, 255, 255, 0.03); --glass-border: rgba(108, 99, 255, 0.15); --glass-blur: blur(20px); } /* ── Reset & Base ──────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: var(--font); font-size: var(--fs-base); color: var(--text); background-color: var(--bg); line-height: 1.6; min-height: 100vh; overflow-x: hidden; position: relative; } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font-family: inherit; } ul, ol { list-style: none; } /* ── Background System ─────────────────────────────────────── */ /* Page background with noise + glow blobs */ .page-bg { position: relative; background-color: var(--bg); isolation: isolate; } /* Glow blobs — add .page-bg to or outer wrapper */ .page-bg::before, .page-bg::after { content: ''; position: fixed; border-radius: 50%; filter: blur(120px); pointer-events: none; z-index: -1; } /* Left purple blob */ .page-bg::before { width: 600px; height: 600px; background: radial-gradient(circle, rgba(108, 99, 255, 0.08) 0%, transparent 70%); top: -100px; left: -200px; } /* Right cyan blob */ .page-bg::after { width: 500px; height: 500px; background: radial-gradient(circle, rgba(0, 212, 255, 0.05) 0%, transparent 70%); bottom: 0; right: -150px; } /* Noise texture overlay */ .page-bg .noise-overlay, body.page-bg > .noise-overlay { position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 200px 200px; } /* Standalone blob helpers (use when .page-bg isn't on body) */ .blob { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; z-index: 0; } .blob-primary { background: radial-gradient(circle, rgba(108, 99, 255, 0.12) 0%, transparent 70%); } .blob-accent { background: radial-gradient(circle, rgba(0, 212, 255, 0.08) 0%, transparent 70%); } /* ── Glassmorphism Cards ────────────────────────────────────── */ .card { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: var(--sp-6); position: relative; overflow: hidden; } .card-sm { padding: var(--sp-4); border-radius: var(--radius); } .card-lg { padding: var(--sp-8); border-radius: var(--radius-lg); } .card-xl { padding: var(--sp-10); border-radius: var(--radius-xl); } /* Card hover lift */ .card-hover { transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); cursor: default; } .card-hover:hover { transform: translateY(-4px); border-color: rgba(108, 99, 255, 0.35); box-shadow: var(--shadow-primary); } /* Shimmer top-border accent */ .card-accent-top::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--primary), transparent); opacity: 0.6; } /* Stat card variant */ .stat-card { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: var(--sp-6); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-primary); } /* ── Buttons ───────────────────────────────────────────────── */ /* Base button reset */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 0.625rem 1.5rem; border: none; border-radius: var(--radius-full); font-family: var(--font); font-size: var(--fs-sm); font-weight: 600; line-height: 1; cursor: pointer; transition: all var(--dur) var(--ease); white-space: nowrap; position: relative; overflow: hidden; text-decoration: none; } .btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; } /* Primary — purple with glow */ .btn-primary { background: linear-gradient(135deg, #6C63FF 0%, #8B5CF6 100%); color: #fff; box-shadow: 0 0 20px rgba(108, 99, 255, 0.4); } .btn-primary:hover { background: linear-gradient(135deg, #7C73FF 0%, #9B6CF6 100%); box-shadow: 0 0 32px rgba(108, 99, 255, 0.6); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); box-shadow: 0 0 16px rgba(108, 99, 255, 0.4); } /* Shimmer effect on primary button */ .btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.15) 50%, transparent 60%); transform: translateX(-100%); transition: transform 0.5s var(--ease); } .btn-primary:hover::after { transform: translateX(100%); } /* Secondary — ghost with border */ .btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--border-glow); } .btn-secondary:hover { background: var(--primary-dim); border-color: var(--primary); box-shadow: 0 0 16px rgba(108, 99, 255, 0.2); } /* Accent — cyan */ .btn-accent { background: linear-gradient(135deg, #00D4FF 0%, #0099CC 100%); color: #0A0A0F; font-weight: 700; box-shadow: 0 0 20px rgba(0, 212, 255, 0.35); } .btn-accent:hover { box-shadow: 0 0 32px rgba(0, 212, 255, 0.55); transform: translateY(-1px); } /* Ghost */ .btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid transparent; } .btn-ghost:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); border-color: var(--border); } /* Danger */ .btn-danger { background: linear-gradient(135deg, #FF4D4D 0%, #CC2222 100%); color: #fff; box-shadow: 0 0 16px rgba(255, 77, 77, 0.3); } .btn-danger:hover { box-shadow: 0 0 24px rgba(255, 77, 77, 0.5); transform: translateY(-1px); } /* Sizes */ .btn-xs { padding: 0.35rem 0.875rem; font-size: var(--fs-xs); } .btn-sm { padding: 0.5rem 1.125rem; font-size: var(--fs-xs); } .btn-lg { padding: 0.875rem 2rem; font-size: var(--fs-base); } .btn-xl { padding: 1.125rem 2.5rem; font-size: var(--fs-md); } /* Icon-only button */ .btn-icon { padding: 0.625rem; border-radius: var(--radius-sm); } .btn-icon.btn-sm { padding: 0.4rem; } .btn-icon.btn-lg { padding: 0.875rem; } /* Loading spinner inside button */ .btn.loading { pointer-events: none; } .btn.loading::before { content: ''; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; flex-shrink: 0; } /* ── Form Inputs ────────────────────────────────────────────── */ .form-group { display: flex; flex-direction: column; gap: var(--sp-2); } .form-label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); letter-spacing: 0.02em; } .form-input, .form-textarea, .form-select { width: 100%; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1rem; color: var(--text); font-family: var(--font); font-size: var(--fs-sm); line-height: 1.5; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); outline: none; appearance: none; -webkit-appearance: none; } .form-input::placeholder, .form-textarea::placeholder { color: var(--text-dim); } .form-input:hover, .form-textarea:hover, .form-select:hover { border-color: rgba(108, 99, 255, 0.35); background: rgba(255, 255, 255, 0.06); } .form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--primary); background: rgba(108, 99, 255, 0.06); box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.15), 0 0 20px rgba(108, 99, 255, 0.1); } .form-textarea { resize: vertical; min-height: 120px; } .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666680' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; } /* Input with icon */ .input-wrapper { position: relative; } .input-wrapper .input-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-dim); pointer-events: none; font-size: 1.1rem; } .input-wrapper .form-input { padding-left: 2.75rem; } .input-wrapper .input-icon-right { left: auto; right: 1rem; pointer-events: auto; cursor: pointer; } .input-wrapper .form-input.has-right-icon { padding-right: 2.75rem; } /* Validation states */ .form-input.is-error { border-color: var(--error); } .form-input.is-success { border-color: var(--success); } .form-hint { font-size: var(--fs-xs); color: var(--text-dim); margin-top: var(--sp-1); } .form-error { font-size: var(--fs-xs); color: var(--error); margin-top: var(--sp-1); } /* Checkbox & Radio */ .form-check { display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; user-select: none; } .form-check input[type="checkbox"], .form-check input[type="radio"] { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; } /* Toggle switch */ .toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; inset: 0; background: var(--border); border-radius: var(--radius-full); cursor: pointer; transition: background var(--dur) var(--ease); } .toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 3px; background: var(--text-muted); border-radius: 50%; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); } .toggle input:checked + .toggle-slider { background: var(--primary); } .toggle input:checked + .toggle-slider::before { transform: translateX(20px); background: #fff; } /* ── Navigation / Navbar ────────────────────────────────────── */ .navbar { position: sticky; top: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; padding: 0 var(--sp-8); background: rgba(10, 10, 15, 0.8); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-bottom: 1px solid rgba(30, 30, 46, 0.8); } .navbar-inner { width: 100%; max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); } .navbar-logo { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; flex-shrink: 0; } .navbar-logo .logo-mark { width: 36px; height: 36px; } .navbar-wordmark { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.02em; } .navbar-wordmark span { color: var(--primary); } .navbar-links { display: flex; align-items: center; gap: var(--sp-1); } .nav-link { padding: 0.4rem 0.875rem; border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .nav-link:hover { color: var(--text); background: rgba(255,255,255,0.05); } .nav-link.active { color: var(--text); background: var(--primary-dim); color: var(--primary); } .navbar-actions { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; } /* Mobile hamburger */ .navbar-toggle { display: none; flex-direction: column; gap: 5px; padding: var(--sp-2); cursor: pointer; background: none; border: none; } .navbar-toggle span { display: block; width: 22px; height: 2px; background: var(--text-muted); border-radius: 2px; transition: all var(--dur) var(--ease); } /* ── Sidebar (Dashboard) ────────────────────────────────────── */ .sidebar { position: fixed; top: var(--nav-h); left: 0; bottom: 0; width: var(--sidebar-w); background: rgba(10, 10, 15, 0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-right: 1px solid var(--border); overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; padding: var(--sp-4) var(--sp-3); z-index: 50; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .sidebar-section-label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-dim); letter-spacing: 0.08em; text-transform: uppercase; padding: var(--sp-3) var(--sp-3) var(--sp-2); margin-top: var(--sp-4); } .sidebar-section-label:first-child { margin-top: 0; } .sidebar-link { display: flex; align-items: center; gap: var(--sp-3); padding: 0.625rem var(--sp-3); border-radius: var(--radius); font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); transition: all var(--dur) var(--ease); text-decoration: none; position: relative; } .sidebar-link:hover { background: rgba(255,255,255,0.05); color: var(--text); } .sidebar-link.active { background: var(--primary-dim); color: var(--primary); border: 1px solid rgba(108,99,255,0.2); } .sidebar-link.active::before { content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 3px; background: var(--primary); border-radius: 0 2px 2px 0; } .sidebar-link .icon { font-size: 1.1rem; flex-shrink: 0; } .sidebar-badge { margin-left: auto; background: var(--primary); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: var(--radius-full); } /* ── Page Layout Helpers ────────────────────────────────────── */ .container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--sp-8); } .dashboard-layout { display: flex; min-height: calc(100vh - var(--nav-h)); } .dashboard-main { flex: 1; margin-left: var(--sidebar-w); padding: var(--sp-8); min-width: 0; } .page-header { margin-bottom: var(--sp-8); } .page-title { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.02em; color: var(--text); } .page-subtitle { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-1); } .section { padding: var(--sp-20) 0; } .section-sm { padding: var(--sp-12) 0; } .section-lg { padding: var(--sp-24) 0; } .section-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-4); } .section-title { font-size: clamp(var(--fs-2xl), 4vw, var(--fs-4xl)); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: var(--text); } .section-desc { font-size: var(--fs-md); color: var(--text-muted); max-width: 560px; line-height: 1.7; margin-top: var(--sp-4); } /* Grids */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); } .grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-6); } /* Flex helpers */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); } .gap-6 { gap: var(--sp-6); } .gap-8 { gap: var(--sp-8); } /* ── Typography ─────────────────────────────────────────────── */ .text-gradient { background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .text-gradient-purple { background: linear-gradient(135deg, #A78BFA 0%, #6C63FF 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } h1 { font-size: var(--fs-4xl); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; } h2 { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; } h3 { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; } h4 { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; } h5 { font-size: var(--fs-lg); font-weight: 600; line-height: 1.4; } h6 { font-size: var(--fs-md); font-weight: 600; line-height: 1.5; } .text-xs { font-size: var(--fs-xs); } .text-sm { font-size: var(--fs-sm); } .text-base { font-size: var(--fs-base); } .text-lg { font-size: var(--fs-lg); } .text-xl { font-size: var(--fs-xl); } .text-muted { color: var(--text-muted); } .text-dim { color: var(--text-dim); } .text-primary { color: var(--primary); } .text-accent { color: var(--accent); } .text-success { color: var(--success); } .text-warning { color: var(--warning); } .text-error { color: var(--error); } .font-medium { font-weight: 500; } .font-semibold{ font-weight: 600; } .font-bold { font-weight: 700; } .font-extrabold{font-weight: 800; } /* ── Badges & Tags ──────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em; } .badge-primary { background: var(--primary-dim); color: var(--primary); border: 1px solid rgba(108,99,255,0.25); } .badge-accent { background: var(--accent-dim); color: var(--accent); border: 1px solid rgba(0,212,255,0.2); } .badge-success { background: var(--success-dim); color: var(--success); border: 1px solid rgba(0,200,150,0.2); } .badge-warning { background: var(--warning-dim); color: var(--warning); border: 1px solid rgba(255,184,0,0.2); } .badge-error { background: var(--error-dim); color: var(--error); border: 1px solid rgba(255,77,77,0.2); } .badge-neutral { background: rgba(255,255,255,0.05); color: var(--text-muted); border: 1px solid var(--border); } /* Dot indicator */ .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* ── Progress Bar ───────────────────────────────────────────── */ .progress-wrap { width: 100%; height: 6px; background: rgba(255,255,255,0.06); border-radius: var(--radius-full); overflow: hidden; } .progress-bar { height: 100%; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width 0.6s var(--ease-out); position: relative; } .progress-bar::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 20px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3)); border-radius: var(--radius-full); } /* ── Divider ────────────────────────────────────────────────── */ .divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); margin: var(--sp-8) 0; } .divider-text { display: flex; align-items: center; gap: var(--sp-4); color: var(--text-dim); font-size: var(--fs-xs); } .divider-text::before, .divider-text::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* ── Avatar ─────────────────────────────────────────────────── */ .avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; background: linear-gradient(135deg, var(--primary), var(--accent)); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; } .avatar-xs { width: 24px; height: 24px; font-size: 10px; } .avatar-sm { width: 32px; height: 32px; font-size: 12px; } .avatar-md { width: 40px; height: 40px; font-size: 14px; } .avatar-lg { width: 48px; height: 48px; font-size: 16px; } .avatar-xl { width: 64px; height: 64px; font-size: 20px; } .avatar-2xl { width: 80px; height: 80px; font-size: 24px; } /* ── Dropdown ───────────────────────────────────────────────── */ .dropdown { position: relative; display: inline-block; } .dropdown-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); overflow: hidden; z-index: 200; animation: fadeInDown var(--dur-fast) var(--ease-out); } .dropdown-item { display: flex; align-items: center; gap: var(--sp-3); padding: 0.625rem var(--sp-4); font-size: var(--fs-sm); color: var(--text-muted); cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .dropdown-item:hover { background: rgba(255,255,255,0.05); color: var(--text); } .dropdown-item.danger:hover { background: var(--error-dim); color: var(--error); } .dropdown-divider { height: 1px; background: var(--border); margin: var(--sp-1) 0; } /* ── Modal ──────────────────────────────────────────────────── */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 300; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); animation: fadeIn var(--dur-fast) var(--ease-out); } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-8); width: 100%; max-width: 520px; box-shadow: var(--shadow-lg), 0 0 60px rgba(108,99,255,0.15); animation: slideUp var(--dur) var(--ease-out); position: relative; } .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-6); } .modal-title { font-size: var(--fs-xl); font-weight: 700; } .modal-close { width: 32px; height: 32px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: all var(--dur-fast) var(--ease); } .modal-close:hover { background: var(--error-dim); color: var(--error); } .modal-footer { display: flex; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--border); } /* ── Toast Notifications ────────────────────────────────────── */ .toast-container { position: fixed; bottom: var(--sp-6); right: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); z-index: 500; } .toast { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-radius: var(--radius); min-width: 300px; max-width: 400px; font-size: var(--fs-sm); font-weight: 500; box-shadow: var(--shadow-lg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); animation: slideInRight var(--dur) var(--ease-out); } .toast-success { background: rgba(0,200,150,0.12); border: 1px solid rgba(0,200,150,0.25); color: var(--success); } .toast-error { background: rgba(255,77,77,0.12); border: 1px solid rgba(255,77,77,0.25); color: var(--error); } .toast-warning { background: rgba(255,184,0,0.12); border: 1px solid rgba(255,184,0,0.25); color: var(--warning); } .toast-info { background: var(--primary-dim); border: 1px solid var(--border-glow); color: var(--primary); } .toast-icon { font-size: 1.1rem; flex-shrink: 0; } .toast-msg { flex: 1; } .toast-close { margin-left: auto; cursor: pointer; opacity: 0.6; font-size: 1rem; } .toast-close:hover { opacity: 1; } /* ── Table ──────────────────────────────────────────────────── */ .table-wrap { width: 100%; overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border); } .table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .table thead { background: rgba(255,255,255,0.02); border-bottom: 1px solid var(--border); } .table th { padding: 0.875rem var(--sp-4); text-align: left; font-size: var(--fs-xs); font-weight: 600; color: var(--text-dim); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .table td { padding: 0.875rem var(--sp-4); color: var(--text-muted); border-bottom: 1px solid rgba(30,30,46,0.5); vertical-align: middle; } .table tbody tr:last-child td { border-bottom: none; } .table tbody tr { transition: background var(--dur-fast) var(--ease); } .table tbody tr:hover { background: rgba(255,255,255,0.02); } /* ── Skeleton Loaders ───────────────────────────────────────── */ .skeleton { background: linear-gradient( 90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.04) 75% ); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius); } .skeleton-text { height: 14px; width: 100%; margin-bottom: 8px; } .skeleton-title { height: 24px; width: 60%; margin-bottom: 12px; } .skeleton-circle{ border-radius: 50%; } /* ── Scrollbar ──────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(108,99,255,0.4); } /* ── Utility ────────────────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rounded-full { border-radius: var(--radius-full); } .pointer { cursor: pointer; } .select-none { user-select: none; } /* Glow text helper */ .glow-primary { text-shadow: 0 0 20px rgba(108,99,255,0.6); } .glow-accent { text-shadow: 0 0 20px rgba(0,212,255,0.6); } /* Border glow */ .border-glow-primary { border-color: var(--primary) !important; box-shadow: 0 0 16px rgba(108,99,255,0.3); } .border-glow-accent { border-color: var(--accent) !important; box-shadow: 0 0 16px rgba(0,212,255,0.25); } /* Visually hidden */ .hidden { display: none !important; } .invisible { visibility: hidden; } /* ── Keyframe Animations ────────────────────────────────────── */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUp { from { opacity: 0; transform: translateY(40px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes floatSlow { 0%, 100% { transform: translateY(0) rotate(0deg); } 33% { transform: translateY(-8px) rotate(1deg); } 66% { transform: translateY(-4px) rotate(-1deg); } } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 20px rgba(108,99,255,0.35); } 50% { box-shadow: 0 0 40px rgba(108,99,255,0.65); } } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes blobPulse { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.08) translateY(-20px); } } @keyframes countUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes particleDrift { 0% { transform: translateY(0) translateX(0) scale(1); opacity: 0.6; } 50% { transform: translateY(-40px) translateX(20px) scale(1.1); opacity: 1; } 100% { transform: translateY(-80px) translateX(-10px) scale(0.8); opacity: 0; } } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes borderGlow { 0%, 100% { border-color: rgba(108,99,255,0.15); } 50% { border-color: rgba(108,99,255,0.45); } } /* Animation utility classes */ .animate-float { animation: float 4s ease-in-out infinite; } .animate-float-slow { animation: floatSlow 6s ease-in-out infinite; } .animate-pulse-glow { animation: pulseGlow 2.5s ease-in-out infinite; } .animate-shimmer { animation: shimmer 2s linear infinite; } .animate-spin { animation: spin 1s linear infinite; } .animate-fade-in { animation: fadeIn 0.5s var(--ease-out) both; } .animate-fade-in-up { animation: fadeInUp 0.6s var(--ease-out) both; } .animate-blob { animation: blobPulse 8s ease-in-out infinite; } /* Stagger helpers (set --delay on element) */ .stagger-1 { animation-delay: 0.1s; } .stagger-2 { animation-delay: 0.2s; } .stagger-3 { animation-delay: 0.3s; } .stagger-4 { animation-delay: 0.4s; } .stagger-5 { animation-delay: 0.5s; } .stagger-6 { animation-delay: 0.6s; } /* ── Marquee (Testimonials / Logos) ─────────────────────────── */ .marquee-outer { overflow: hidden; width: 100%; position: relative; } .marquee-outer::before, .marquee-outer::after { content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 1; pointer-events: none; } .marquee-outer::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); } .marquee-outer::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); } .marquee-track { display: flex; gap: var(--sp-4); width: max-content; animation: marquee 30s linear infinite; } .marquee-track:hover { animation-play-state: paused; } /* ── Logo SVG Inline Styles ─────────────────────────────────── */ .logo-svg { display: flex; align-items: center; gap: var(--sp-2); } .logo-hex-outline { stroke: var(--primary); stroke-width: 1.5; fill: none; } .logo-letter { fill: var(--text); font-family: var(--font); font-weight: 800; } .logo-dot { fill: var(--accent); } /* ── Credit / Plan Badge ────────────────────────────────────── */ .plan-badge { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 4px 12px; border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .plan-free { background: rgba(153,153,153,0.1); color: var(--text-muted); border: 1px solid var(--border); } .plan-starter { background: var(--primary-dim); color: var(--primary); border: 1px solid rgba(108,99,255,0.25); } .plan-popular { background: linear-gradient(135deg, rgba(108,99,255,0.15), rgba(0,212,255,0.1)); color: var(--accent); border: 1px solid rgba(0,212,255,0.25); } .plan-pro { background: linear-gradient(135deg, rgba(255,184,0,0.12), rgba(255,77,77,0.08)); color: var(--warning); border: 1px solid rgba(255,184,0,0.25); } /* ── Responsive Breakpoints ─────────────────────────────────── */ @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } .container { padding: 0 var(--sp-6); } } @media (max-width: 768px) { :root { --nav-h: 64px; } h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .container { padding: 0 var(--sp-4); } .section { padding: var(--sp-12) 0; } .section-lg { padding: var(--sp-16) 0; } .navbar { padding: 0 var(--sp-4); } .navbar-links { display: none; } .navbar-toggle { display: flex; } .dashboard-main { margin-left: 0; padding: var(--sp-4); } .sidebar { transform: translateX(-100%); transition: transform var(--dur) var(--ease); z-index: 100; } .sidebar.open { transform: translateX(0); } .modal { padding: var(--sp-6); } .toast-container { left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); } .toast { min-width: auto; } } @media (max-width: 480px) { .btn-xl { padding: 0.875rem 1.75rem; font-size: var(--fs-base); } .card-lg { padding: var(--sp-6); } .page-title { font-size: var(--fs-xl); } } /* ── Print ──────────────────────────────────────────────────── */ @media print { .navbar, .sidebar, .toast-container { display: none !important; } body { background: #fff; color: #000; } .card { border: 1px solid #ddd; } }