Spaces:
Runtime error
Runtime error
| /* TreeTrack Design System v2.0 */ | |
| /* Modern, minimal, and elegant design system for TreeTrack */ | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&display=swap'); | |
| :root { | |
| /* Primary Brand Colors - Soft nature-inspired palette */ | |
| --primary-50: #f6f8f4; | |
| --primary-100: #edf2e8; | |
| --primary-200: #dae5d1; | |
| --primary-300: #c0d4b2; | |
| --primary-400: #a1c08c; | |
| --primary-500: #8ab070; | |
| --primary-600: #739b5a; | |
| --primary-700: #5d7f49; | |
| --primary-800: #4d673c; | |
| --primary-900: #3f5532; | |
| /* Accent Colors - Warm earth tones */ | |
| --accent-50: #faf8f5; | |
| --accent-100: #f2ede6; | |
| --accent-200: #e6dccf; | |
| --accent-300: #d4c3a4; | |
| --accent-400: #c4a484; | |
| --accent-500: #b08968; | |
| --accent-600: #997053; | |
| --accent-700: #7f5a44; | |
| --accent-800: #6b4a39; | |
| --accent-900: #5a3e32; | |
| /* Neutral Colors - Sophisticated grayscale */ | |
| --gray-50: #fafafa; | |
| --gray-100: #f5f5f5; | |
| --gray-200: #e5e5e5; | |
| --gray-300: #d4d4d4; | |
| --gray-400: #a3a3a3; | |
| --gray-500: #737373; | |
| --gray-600: #525252; | |
| --gray-700: #404040; | |
| --gray-800: #262626; | |
| --gray-900: #171717; | |
| --gray-950: #0a0a0a; | |
| /* Status Colors */ | |
| --success-50: #f0fdf4; | |
| --success-500: #22c55e; | |
| --success-600: #16a34a; | |
| --success-700: #15803d; | |
| --warning-50: #fffbeb; | |
| --warning-500: #f59e0b; | |
| --warning-600: #d97706; | |
| --warning-700: #b45309; | |
| --error-50: #fef2f2; | |
| --error-500: #ef4444; | |
| --error-600: #dc2626; | |
| --error-700: #b91c1c; | |
| --info-50: #eff6ff; | |
| --info-500: #3b82f6; | |
| --info-600: #2563eb; | |
| --info-700: #1d4ed8; | |
| /* Spacing Scale */ | |
| --space-px: 1px; | |
| --space-0: 0; | |
| --space-1: 0.25rem; | |
| --space-2: 0.5rem; | |
| --space-3: 0.75rem; | |
| --space-4: 1rem; | |
| --space-5: 1.25rem; | |
| --space-6: 1.5rem; | |
| --space-7: 1.75rem; | |
| --space-8: 2rem; | |
| --space-10: 2.5rem; | |
| --space-12: 3rem; | |
| --space-16: 4rem; | |
| --space-20: 5rem; | |
| --space-24: 6rem; | |
| --space-32: 8rem; | |
| /* Typography Scale */ | |
| --text-xs: 0.75rem; /* 12px */ | |
| --text-sm: 0.875rem; /* 14px */ | |
| --text-base: 1rem; /* 16px */ | |
| --text-lg: 1.125rem; /* 18px */ | |
| --text-xl: 1.25rem; /* 20px */ | |
| --text-2xl: 1.5rem; /* 24px */ | |
| --text-3xl: 1.875rem; /* 30px */ | |
| --text-4xl: 2.25rem; /* 36px */ | |
| --text-5xl: 3rem; /* 48px */ | |
| --text-6xl: 3.75rem; /* 60px */ | |
| /* Line Heights */ | |
| --leading-none: 1; | |
| --leading-tight: 1.25; | |
| --leading-snug: 1.375; | |
| --leading-normal: 1.5; | |
| --leading-relaxed: 1.625; | |
| --leading-loose: 2; | |
| /* Font Weights */ | |
| --font-light: 300; | |
| --font-normal: 400; | |
| --font-medium: 500; | |
| --font-semibold: 600; | |
| --font-bold: 700; | |
| --font-extrabold: 800; | |
| /* Border Radius */ | |
| --radius-none: 0; | |
| --radius-sm: 0.25rem; | |
| --radius-md: 0.375rem; | |
| --radius-lg: 0.5rem; | |
| --radius-xl: 0.75rem; | |
| --radius-2xl: 1rem; | |
| --radius-3xl: 1.5rem; | |
| --radius-full: 9999px; | |
| /* Shadows */ | |
| --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); | |
| --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); | |
| --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); | |
| --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); | |
| --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); | |
| --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); | |
| /* Glassmorphism Effects */ | |
| --glass-bg: rgba(255, 255, 255, 0.85); | |
| --glass-bg-dark: rgba(255, 255, 255, 0.1); | |
| --glass-blur: blur(12px); | |
| --glass-border: 1px solid rgba(255, 255, 255, 0.2); | |
| /* Gradients - Sophisticated and minimal */ | |
| --gradient-primary: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-800) 50%, var(--primary-900) 100%); | |
| --gradient-accent: linear-gradient(135deg, var(--accent-700) 0%, var(--accent-800) 50%, var(--accent-900) 100%); | |
| --gradient-subtle: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%); | |
| /* Transitions */ | |
| --transition-fast: 0.15s ease; | |
| --transition-normal: 0.2s ease; | |
| --transition-slow: 0.3s ease; | |
| --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); | |
| /* Z-Index Scale */ | |
| --z-dropdown: 1000; | |
| --z-sticky: 1020; | |
| --z-fixed: 1030; | |
| --z-modal-backdrop: 1040; | |
| --z-modal: 1050; | |
| --z-popover: 1060; | |
| --z-tooltip: 1070; | |
| --z-toast: 1080; | |
| } | |
| /* Base Styles */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| ::selection { | |
| background: var(--primary-500); | |
| color: white; | |
| } | |
| ::-moz-selection { | |
| background: var(--primary-500); | |
| color: white; | |
| } | |
| html { | |
| font-size: 16px; | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; | |
| font-feature-settings: 'cv11' 1, 'ss01' 1, 'kern' 1; | |
| line-height: var(--leading-normal); | |
| color: var(--gray-800); | |
| background: var(--gray-50); | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| text-rendering: optimizeLegibility; | |
| } | |
| /* Typography */ | |
| .font-display { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| .font-mono { | |
| font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| /* Headings */ | |
| h1, h2, h3, h4, h5, h6 { | |
| font-weight: var(--font-semibold); | |
| line-height: var(--leading-tight); | |
| letter-spacing: -0.025em; | |
| color: var(--gray-900); | |
| } | |
| h1 { | |
| font-size: var(--text-4xl); | |
| font-weight: var(--font-bold); | |
| } | |
| h2 { | |
| font-size: var(--text-3xl); | |
| } | |
| h3 { | |
| font-size: var(--text-2xl); | |
| } | |
| h4 { | |
| font-size: var(--text-xl); | |
| } | |
| h5 { | |
| font-size: var(--text-lg); | |
| } | |
| h6 { | |
| font-size: var(--text-base); | |
| } | |
| /* Links */ | |
| a { | |
| color: var(--primary-600); | |
| text-decoration: none; | |
| transition: color var(--transition-fast); | |
| } | |
| a:hover { | |
| color: var(--primary-700); | |
| } | |
| a:focus { | |
| outline: 2px solid var(--primary-500); | |
| outline-offset: 2px; | |
| } | |
| /* Layout Components */ | |
| .container { | |
| max-width: 1280px; | |
| margin: 0 auto; | |
| padding: 0 var(--space-4); | |
| } | |
| @media (min-width: 640px) { | |
| .container { | |
| padding: 0 var(--space-6); | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .container { | |
| padding: 0 var(--space-8); | |
| } | |
| } | |
| /* Modern Header Component */ | |
| .tt-header { | |
| background: var(--gradient-primary); | |
| color: white; | |
| position: sticky; | |
| top: 0; | |
| z-index: var(--z-sticky); | |
| backdrop-filter: var(--glass-blur); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .tt-header-content { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: var(--space-4) var(--space-6); | |
| gap: var(--space-6); | |
| flex-wrap: wrap; | |
| } | |
| .tt-header-brand { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-1); | |
| } | |
| .tt-header-logo { | |
| font-size: var(--text-2xl); | |
| font-weight: var(--font-bold); | |
| letter-spacing: -0.02em; | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| } | |
| .tt-header-subtitle { | |
| font-size: var(--text-sm); | |
| opacity: 0.9; | |
| font-weight: var(--font-normal); | |
| } | |
| .tt-header-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-4); | |
| flex-wrap: wrap; | |
| } | |
| /* User Info Component */ | |
| .tt-user-info { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| padding: var(--space-2) var(--space-4); | |
| background: var(--glass-bg-dark); | |
| border-radius: var(--radius-full); | |
| border: var(--glass-border); | |
| backdrop-filter: var(--glass-blur); | |
| } | |
| .tt-user-avatar { | |
| width: 36px; | |
| height: 36px; | |
| border-radius: var(--radius-full); | |
| background: var(--gradient-accent); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: var(--font-bold); | |
| font-size: var(--text-sm); | |
| color: white; | |
| border: 2px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .tt-user-details { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-px); | |
| } | |
| .tt-user-name { | |
| font-size: var(--text-sm); | |
| font-weight: var(--font-semibold); | |
| color: white; | |
| } | |
| .tt-user-role { | |
| font-size: var(--text-xs); | |
| opacity: 0.8; | |
| text-transform: capitalize; | |
| } | |
| /* Button System */ | |
| .tt-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--space-2); | |
| padding: var(--space-3) var(--space-6); | |
| font-size: var(--text-sm); | |
| font-weight: var(--font-medium); | |
| line-height: var(--leading-none); | |
| border-radius: var(--radius-lg); | |
| border: none; | |
| cursor: pointer; | |
| transition: all var(--transition-normal); | |
| text-decoration: none; | |
| outline: none; | |
| position: relative; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| user-select: none; | |
| } | |
| .tt-btn:focus-visible { | |
| outline: 2px solid var(--primary-500); | |
| outline-offset: 2px; | |
| } | |
| .tt-btn:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| pointer-events: none; | |
| } | |
| /* Button Variants - Redesigned for better UX and Visual Hierarchy */ | |
| .tt-btn-primary { | |
| background: var(--primary-600); | |
| color: white; | |
| box-shadow: var(--shadow-sm); | |
| border: 1px solid transparent; | |
| } | |
| .tt-btn-primary:hover { | |
| background: var(--primary-700); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .tt-btn-primary:active { | |
| transform: translateY(0); | |
| background: var(--primary-800); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .tt-btn-secondary { | |
| background: var(--gray-200); | |
| color: var(--gray-800); | |
| border: 1px solid transparent; | |
| } | |
| .tt-btn-secondary:hover { | |
| background: var(--gray-300); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .tt-btn-outline { | |
| background: transparent; | |
| color: var(--primary-700); | |
| border: 1px solid var(--primary-400); | |
| } | |
| .tt-btn-outline:hover { | |
| background: var(--primary-50); | |
| border-color: var(--primary-600); | |
| color: var(--primary-800); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .tt-btn-ghost { | |
| background: transparent; | |
| color: var(--gray-700); | |
| border: 1px solid transparent; | |
| } | |
| .tt-btn-ghost:hover { | |
| background: var(--gray-100); | |
| color: var(--gray-900); | |
| } | |
| /* Button Sizes */ | |
| .tt-btn-xs { | |
| padding: var(--space-1) var(--space-3); | |
| font-size: var(--text-xs); | |
| } | |
| .tt-btn-sm { | |
| padding: var(--space-2) var(--space-4); | |
| font-size: var(--text-sm); | |
| } | |
| .tt-btn-lg { | |
| padding: var(--space-4) var(--space-8); | |
| font-size: var(--text-lg); | |
| font-weight: var(--font-semibold); | |
| } | |
| .tt-btn-xl { | |
| padding: var(--space-5) var(--space-10); | |
| font-size: var(--text-xl); | |
| font-weight: var(--font-semibold); | |
| } | |
| /* Form Components */ | |
| .tt-form-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-2); | |
| } | |
| .tt-form-label { | |
| font-size: var(--text-sm); | |
| font-weight: var(--font-medium); | |
| color: var(--gray-700); | |
| } | |
| .tt-form-label.required::after { | |
| content: '*'; | |
| color: var(--error-500); | |
| margin-left: var(--space-1); | |
| } | |
| .tt-form-input { | |
| padding: var(--space-3) var(--space-4); | |
| font-size: var(--text-sm); | |
| color: var(--gray-900); | |
| background: white; | |
| border: 2px solid var(--gray-200); | |
| border-radius: var(--radius-lg); | |
| transition: all var(--transition-fast); | |
| outline: none; | |
| } | |
| .tt-form-input:focus { | |
| border-color: var(--primary-500); | |
| box-shadow: 0 0 0 3px rgba(138, 176, 112, 0.2); | |
| transform: translateY(-1px); | |
| } | |
| .tt-form-input:disabled { | |
| background: var(--gray-100); | |
| color: var(--gray-500); | |
| cursor: not-allowed; | |
| } | |
| .tt-form-input::placeholder { | |
| color: var(--gray-400); | |
| } | |
| /* Card Components */ | |
| .tt-card { | |
| background: white; | |
| border-radius: var(--radius-2xl); | |
| border: 1px solid var(--gray-200); | |
| box-shadow: var(--shadow-sm); | |
| overflow: hidden; | |
| transition: all var(--transition-normal); | |
| } | |
| .tt-card:hover { | |
| box-shadow: var(--shadow-md); | |
| border-color: var(--gray-300); | |
| transform: translateY(-1px); | |
| } | |
| .tt-card-header { | |
| padding: var(--space-6); | |
| border-bottom: 1px solid var(--gray-100); | |
| background: var(--gray-50); | |
| } | |
| .tt-card-content { | |
| padding: var(--space-6); | |
| } | |
| .tt-card-footer { | |
| padding: var(--space-4) var(--space-6); | |
| border-top: 1px solid var(--gray-100); | |
| background: var(--gray-50); | |
| } | |
| /* Message Components */ | |
| .tt-message { | |
| padding: var(--space-4); | |
| border-radius: var(--radius-lg); | |
| font-size: var(--text-sm); | |
| font-weight: var(--font-medium); | |
| border: 1px solid transparent; | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| } | |
| .tt-message-success { | |
| background: var(--success-50); | |
| color: var(--success-700); | |
| border-color: var(--success-500); | |
| } | |
| .tt-message-error { | |
| background: var(--error-50); | |
| color: var(--error-700); | |
| border-color: var(--error-500); | |
| } | |
| .tt-message-warning { | |
| background: var(--warning-50); | |
| color: var(--warning-700); | |
| border-color: var(--warning-500); | |
| } | |
| .tt-message-info { | |
| background: var(--info-50); | |
| color: var(--info-700); | |
| border-color: var(--info-500); | |
| } | |
| /* Loading Components */ | |
| .tt-loading { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--space-3); | |
| padding: var(--space-8); | |
| } | |
| .tt-spinner { | |
| border: 3px solid var(--gray-200); | |
| border-top: 3px solid var(--primary-500); | |
| border-radius: var(--radius-full); | |
| width: var(--space-6); | |
| height: var(--space-6); | |
| animation: tt-spin 1s linear infinite; | |
| } | |
| @keyframes tt-spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| /* Mobile Responsiveness */ | |
| @media (max-width: 768px) { | |
| .tt-header-content { | |
| padding: var(--space-3) var(--space-4); | |
| flex-direction: column; | |
| align-items: stretch; | |
| gap: var(--space-4); | |
| } | |
| .tt-header-logo { | |
| font-size: var(--text-xl); | |
| text-align: center; | |
| } | |
| .tt-header-actions { | |
| justify-content: space-between; | |
| width: 100%; | |
| } | |
| .tt-user-details { | |
| display: none; | |
| } | |
| .tt-btn { | |
| padding: var(--space-3) var(--space-4); | |
| font-size: var(--text-sm); | |
| } | |
| .tt-btn-lg { | |
| padding: var(--space-4) var(--space-6); | |
| font-size: var(--text-base); | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .tt-header-logo { | |
| font-size: var(--text-lg); | |
| } | |
| .tt-header-subtitle { | |
| font-size: var(--text-xs); | |
| text-align: center; | |
| } | |
| .tt-btn { | |
| padding: var(--space-2) var(--space-3); | |
| font-size: var(--text-xs); | |
| } | |
| } | |
| /* Special Components */ | |
| /* GPS Button Enhanced Mobile Styling */ | |
| .tt-btn-gps { | |
| background: transparent; | |
| color: var(--accent-700); | |
| border: 1px solid var(--accent-300); | |
| box-shadow: none; | |
| } | |
| .tt-btn-gps:hover { | |
| background: var(--accent-50); | |
| border-color: var(--accent-500); | |
| color: var(--accent-800); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| /* Mobile-specific GPS button styling */ | |
| @media (max-width: 768px) { | |
| .tt-btn-gps { | |
| width: 100%; | |
| justify-content: center; | |
| min-height: 48px; | |
| font-weight: var(--font-semibold); | |
| background: var(--accent-800); | |
| border: 1px solid var(--accent-700); | |
| color: white; | |
| } | |
| .tt-btn-gps:hover { | |
| background: var(--accent-900); | |
| } | |
| .tt-btn-gps:active { | |
| transform: scale(0.98); | |
| } | |
| } | |
| /* Glassmorphism Login Container */ | |
| .tt-login-container { | |
| background: var(--glass-bg); | |
| backdrop-filter: var(--glass-blur); | |
| border-radius: var(--radius-3xl); | |
| border: var(--glass-border); | |
| box-shadow: var(--shadow-2xl); | |
| padding: var(--space-8); | |
| width: 100%; | |
| max-width: 420px; | |
| /* Animation disabled to prevent zoom/growth effect */ | |
| /* animation: tt-slideIn 0.6s ease-out; */ | |
| /* animation-fill-mode: both; */ | |
| /* animation-iteration-count: 1; */ | |
| } | |
| @keyframes tt-slideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* Utility Classes */ | |
| .tt-sr-only { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| padding: 0; | |
| margin: -1px; | |
| overflow: hidden; | |
| clip: rect(0, 0, 0, 0); | |
| white-space: nowrap; | |
| border: 0; | |
| } | |
| .tt-hidden { | |
| display: none ; | |
| } | |
| .tt-fade-in { | |
| animation: tt-fadeIn 0.3s ease-out; | |
| } | |
| @keyframes tt-fadeIn { | |
| from { opacity: 0; transform: translateY(-10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--gray-100); | |
| border-radius: var(--radius-md); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--gray-400); | |
| border-radius: var(--radius-md); | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--primary-500); | |
| } | |
| /* Focus improvements */ | |
| *:focus-visible { | |
| outline: 2px solid var(--primary-500); | |
| outline-offset: 2px; | |
| } | |