Spaces:
Sleeping
Sleeping
| /* ============================================ | |
| Cattle Breed Classifier – Design System | |
| Premium dark theme with warm amber accents | |
| ============================================ */ | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap'); | |
| :root { | |
| /* Primary palette */ | |
| --color-bg-primary: #1f2330; | |
| --color-bg-secondary: #2c3144; | |
| --color-bg-card: #373e56; | |
| --color-bg-card-hover: #434b68; | |
| --color-bg-glass: rgba(118, 127, 158, 0.3); | |
| --color-bg-input: #2c3144; | |
| /* Accent */ | |
| --color-accent: #DAA464; | |
| --color-accent-light: #DEC384; | |
| --color-accent-dark: #b6854d; | |
| --color-accent-glow: rgba(218, 164, 100, 0.2); | |
| /* Success/Error */ | |
| --color-success: #10b981; | |
| --color-error: #ef4444; | |
| --color-warning: #DAA464; | |
| --color-info: #767F9E; | |
| /* Text */ | |
| --color-text-primary: #E8DDB4; | |
| --color-text-secondary: #DEC384; | |
| --color-text-muted: #767F9E; | |
| /* Borders */ | |
| --color-border: rgba(118, 127, 158, 0.3); | |
| --color-border-accent: rgba(218, 164, 100, 0.4); | |
| /* Gradients */ | |
| --gradient-hero: linear-gradient(135deg, #1f2330 0%, #373e56 50%, #2c3144 100%); | |
| --gradient-accent: linear-gradient(135deg, #DEC384 0%, #DAA464 100%); | |
| --gradient-card: linear-gradient(145deg, rgba(55, 62, 86, 0.9), rgba(44, 49, 68, 0.7)); | |
| /* Shadows */ | |
| --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); | |
| --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4); | |
| --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5); | |
| --shadow-glow: 0 0 30px rgba(218, 164, 100, 0.15); | |
| /* Spacing */ | |
| --radius-sm: 8px; | |
| --radius-md: 12px; | |
| --radius-lg: 16px; | |
| --radius-xl: 24px; | |
| /* Typography */ | |
| --font-heading: 'Outfit', sans-serif; | |
| --font-body: 'Inter', sans-serif; | |
| /* Transitions */ | |
| --transition-fast: 150ms ease; | |
| --transition-normal: 250ms ease; | |
| --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| *, *::before, *::after { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| font-size: 16px; | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: var(--font-body); | |
| background: var(--color-bg-primary); | |
| color: var(--color-text-primary); | |
| line-height: 1.6; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| min-height: 100vh; | |
| } | |
| #root { | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* ============ TYPOGRAPHY ============ */ | |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: var(--font-heading); | |
| font-weight: 700; | |
| line-height: 1.2; | |
| } | |
| a { | |
| color: var(--color-accent); | |
| text-decoration: none; | |
| transition: color var(--transition-fast); | |
| } | |
| a:hover { color: var(--color-accent-light); } | |
| /* ============ HEADER/NAV ============ */ | |
| .navbar { | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| background: rgba(10, 14, 23, 0.85); | |
| backdrop-filter: blur(16px) saturate(180%); | |
| border-bottom: 1px solid var(--color-border); | |
| padding: 0 2rem; | |
| } | |
| .navbar-inner { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| height: 64px; | |
| } | |
| .navbar-brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-family: var(--font-heading); | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| color: var(--color-text-primary); | |
| } | |
| .navbar-brand span { | |
| background: var(--gradient-accent); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 6px; | |
| list-style: none; | |
| } | |
| .nav-links a { | |
| padding: 8px 16px; | |
| border-radius: var(--radius-sm); | |
| color: var(--color-text-secondary); | |
| font-weight: 500; | |
| font-size: 0.9rem; | |
| transition: all var(--transition-fast); | |
| } | |
| .nav-links a:hover, | |
| .nav-links a.active { | |
| background: var(--color-accent-glow); | |
| color: var(--color-accent); | |
| } | |
| /* ============ LAYOUT ============ */ | |
| .page { | |
| flex: 1; | |
| max-width: 1200px; | |
| width: 100%; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| } | |
| .section-title { | |
| font-size: 2rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .section-subtitle { | |
| color: var(--color-text-secondary); | |
| font-size: 1.05rem; | |
| margin-bottom: 2rem; | |
| } | |
| /* ============ CARDS ============ */ | |
| .card { | |
| background: var(--gradient-card); | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-lg); | |
| padding: 1.5rem; | |
| backdrop-filter: blur(10px); | |
| transition: all var(--transition-normal); | |
| } | |
| .card:hover { | |
| border-color: var(--color-border-accent); | |
| box-shadow: var(--shadow-glow); | |
| transform: translateY(-2px); | |
| } | |
| .glass-card { | |
| background: var(--color-bg-glass); | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-lg); | |
| backdrop-filter: blur(16px); | |
| padding: 2rem; | |
| } | |
| /* ============ HERO SECTION ============ */ | |
| .hero { | |
| text-align: center; | |
| padding: 4rem 0 3rem; | |
| } | |
| .hero h1 { | |
| font-size: 3.2rem; | |
| font-weight: 800; | |
| margin-bottom: 1rem; | |
| letter-spacing: -0.02em; | |
| } | |
| .hero h1 .accent { | |
| background: var(--gradient-accent); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .hero p { | |
| font-size: 1.15rem; | |
| color: var(--color-text-secondary); | |
| max-width: 600px; | |
| margin: 0 auto 2rem; | |
| } | |
| .hero-cta { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 14px 32px; | |
| background: var(--gradient-accent); | |
| color: #000; | |
| font-weight: 600; | |
| font-size: 1rem; | |
| border: none; | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| transition: all var(--transition-normal); | |
| box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3); | |
| } | |
| .hero-cta:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 30px rgba(245, 158, 11, 0.4); | |
| } | |
| /* ============ FEATURES GRID ============ */ | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 1.5rem; | |
| margin-top: 3rem; | |
| } | |
| .feature-card { | |
| text-align: center; | |
| padding: 2rem 1.5rem; | |
| } | |
| .feature-icon { | |
| font-size: 2.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .feature-card h3 { | |
| font-size: 1.1rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .feature-card p { | |
| color: var(--color-text-secondary); | |
| font-size: 0.9rem; | |
| } | |
| /* ============ PREDICT PAGE ============ */ | |
| .predict-layout { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 2rem; | |
| margin-top: 1.5rem; | |
| } | |
| @media (max-width: 768px) { | |
| .predict-layout { grid-template-columns: 1fr; } | |
| } | |
| .input-tabs { | |
| display: flex; | |
| gap: 4px; | |
| background: var(--color-bg-primary); | |
| padding: 4px; | |
| border-radius: var(--radius-md); | |
| margin-bottom: 1.5rem; | |
| } | |
| .input-tab { | |
| flex: 1; | |
| padding: 10px 16px; | |
| border: none; | |
| border-radius: var(--radius-sm); | |
| background: transparent; | |
| color: var(--color-text-secondary); | |
| font-weight: 500; | |
| font-size: 0.85rem; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .input-tab.active { | |
| background: var(--color-accent-glow); | |
| color: var(--color-accent); | |
| } | |
| /* Upload zone */ | |
| .upload-zone { | |
| border: 2px dashed var(--color-border); | |
| border-radius: var(--radius-lg); | |
| padding: 3rem 2rem; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all var(--transition-normal); | |
| background: var(--color-bg-input); | |
| } | |
| .upload-zone:hover, | |
| .upload-zone.drag-over { | |
| border-color: var(--color-accent); | |
| background: var(--color-accent-glow); | |
| } | |
| .upload-zone .icon { font-size: 3rem; margin-bottom: 1rem; } | |
| .upload-zone p { color: var(--color-text-secondary); } | |
| .upload-zone .hint { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.5rem; } | |
| /* Image preview */ | |
| .image-preview { | |
| position: relative; | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| margin-top: 1rem; | |
| } | |
| .image-preview img { | |
| width: 100%; | |
| max-height: 350px; | |
| object-fit: contain; | |
| border-radius: var(--radius-lg); | |
| background: var(--color-bg-input); | |
| } | |
| .image-preview .remove-btn { | |
| position: absolute; | |
| top: 8px; | |
| right: 8px; | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| border: none; | |
| background: rgba(0,0,0,0.7); | |
| color: #fff; | |
| font-size: 1rem; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| /* URL Input */ | |
| .url-input-group { | |
| display: flex; | |
| gap: 8px; | |
| margin-top: 0.5rem; | |
| } | |
| .url-input-group input { | |
| flex: 1; | |
| padding: 12px 16px; | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--color-border); | |
| background: var(--color-bg-input); | |
| color: var(--color-text-primary); | |
| font-size: 0.9rem; | |
| outline: none; | |
| transition: border-color var(--transition-fast); | |
| } | |
| .url-input-group input:focus { | |
| border-color: var(--color-accent); | |
| } | |
| /* Buttons */ | |
| .btn-primary { | |
| padding: 12px 28px; | |
| background: var(--gradient-accent); | |
| color: #000; | |
| font-weight: 600; | |
| border: none; | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| font-size: 0.95rem; | |
| transition: all var(--transition-normal); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-1px); | |
| box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3); | |
| } | |
| .btn-primary:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| .btn-secondary { | |
| padding: 10px 20px; | |
| background: var(--color-bg-card); | |
| color: var(--color-text-primary); | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| font-size: 0.9rem; | |
| transition: all var(--transition-fast); | |
| } | |
| .btn-secondary:hover { | |
| border-color: var(--color-accent); | |
| } | |
| .predict-btn { | |
| width: 100%; | |
| margin-top: 1.5rem; | |
| padding: 14px; | |
| font-size: 1rem; | |
| } | |
| /* ============ RESULT CARD ============ */ | |
| .result-card { | |
| animation: slideIn 0.4s var(--transition-slow); | |
| } | |
| @keyframes slideIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .result-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| margin-bottom: 1.5rem; | |
| } | |
| .result-breed-name { | |
| font-size: 1.6rem; | |
| font-weight: 700; | |
| font-family: var(--font-heading); | |
| } | |
| .result-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 6px 14px; | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| } | |
| .result-badge.high { background: rgba(16, 185, 129, 0.15); color: var(--color-success); } | |
| .result-badge.medium { background: rgba(245, 158, 11, 0.15); color: var(--color-warning); } | |
| .result-badge.low { background: rgba(239, 68, 68, 0.15); color: var(--color-error); } | |
| /* Confidence bar */ | |
| .confidence-bar-container { | |
| margin-bottom: 1.5rem; | |
| } | |
| .confidence-bar-label { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.85rem; | |
| color: var(--color-text-secondary); | |
| margin-bottom: 6px; | |
| } | |
| .confidence-bar { | |
| height: 8px; | |
| background: var(--color-bg-primary); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .confidence-bar-fill { | |
| height: 100%; | |
| border-radius: 4px; | |
| background: var(--gradient-accent); | |
| transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| /* Top-K predictions */ | |
| .topk-list { | |
| margin-bottom: 1.5rem; | |
| } | |
| .topk-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 10px 0; | |
| border-bottom: 1px solid var(--color-border); | |
| } | |
| .topk-item:last-child { border-bottom: none; } | |
| .topk-rank { | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| background: var(--color-bg-primary); | |
| color: var(--color-text-secondary); | |
| margin-right: 12px; | |
| } | |
| .topk-rank.first { background: var(--color-accent-glow); color: var(--color-accent); } | |
| .topk-name { flex: 1; font-weight: 500; } | |
| .topk-conf { color: var(--color-text-secondary); font-size: 0.9rem; } | |
| /* Breed info grid */ | |
| .breed-info-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 12px; | |
| } | |
| .breed-info-item { | |
| padding: 12px; | |
| background: var(--color-bg-primary); | |
| border-radius: var(--radius-sm); | |
| } | |
| .breed-info-label { | |
| font-size: 0.75rem; | |
| color: var(--color-text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| margin-bottom: 4px; | |
| } | |
| .breed-info-value { | |
| font-weight: 600; | |
| font-size: 0.95rem; | |
| } | |
| /* Warning */ | |
| .prediction-warning { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 10px; | |
| padding: 12px 16px; | |
| background: rgba(245, 158, 11, 0.1); | |
| border: 1px solid rgba(245, 158, 11, 0.2); | |
| border-radius: var(--radius-md); | |
| margin-top: 1rem; | |
| font-size: 0.85rem; | |
| color: var(--color-warning); | |
| } | |
| /* ============ BREED EXPLORER ============ */ | |
| .breed-filters { | |
| display: flex; | |
| gap: 12px; | |
| margin-bottom: 2rem; | |
| flex-wrap: wrap; | |
| } | |
| .breed-filters input, | |
| .breed-filters select { | |
| padding: 10px 16px; | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--color-border); | |
| background: var(--color-bg-input); | |
| color: var(--color-text-primary); | |
| font-size: 0.9rem; | |
| outline: none; | |
| } | |
| .breed-filters input:focus, | |
| .breed-filters select:focus { | |
| border-color: var(--color-accent); | |
| } | |
| .breeds-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .breed-card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 0.75rem; | |
| } | |
| .breed-card-name { | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| font-family: var(--font-heading); | |
| } | |
| .breed-type-badge { | |
| padding: 4px 10px; | |
| border-radius: 12px; | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .breed-type-badge.cow { | |
| background: rgba(59, 130, 246, 0.15); | |
| color: var(--color-info); | |
| } | |
| .breed-type-badge.buffalo { | |
| background: rgba(139, 92, 246, 0.15); | |
| color: #8b5cf6; | |
| } | |
| .breed-card-detail { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 6px 0; | |
| font-size: 0.85rem; | |
| } | |
| .breed-card-detail .label { color: var(--color-text-muted); } | |
| .breed-card-detail .value { font-weight: 500; } | |
| .breed-card-description { | |
| margin-top: 0.75rem; | |
| color: var(--color-text-secondary); | |
| font-size: 0.85rem; | |
| line-height: 1.5; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 3; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| } | |
| /* ============ CAMERA ============ */ | |
| .camera-container { | |
| position: relative; | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| background: #000; | |
| } | |
| .camera-container video { | |
| width: 100%; | |
| max-height: 350px; | |
| object-fit: cover; | |
| } | |
| .camera-controls { | |
| display: flex; | |
| justify-content: center; | |
| gap: 12px; | |
| margin-top: 1rem; | |
| } | |
| .camera-capture-btn { | |
| width: 56px; | |
| height: 56px; | |
| border-radius: 50%; | |
| border: 3px solid var(--color-accent); | |
| background: transparent; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all var(--transition-fast); | |
| } | |
| .camera-capture-btn:hover { | |
| background: var(--color-accent-glow); | |
| } | |
| .camera-capture-btn::after { | |
| content: ''; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background: var(--color-accent); | |
| } | |
| /* ============ LOADING ============ */ | |
| .loading-spinner { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 1rem; | |
| padding: 3rem; | |
| } | |
| .spinner { | |
| width: 40px; | |
| height: 40px; | |
| border: 3px solid var(--color-border); | |
| border-top-color: var(--color-accent); | |
| border-radius: 50%; | |
| animation: spin 0.8s linear infinite; | |
| } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| /* ============ FOOTER ============ */ | |
| .footer { | |
| border-top: 1px solid var(--color-border); | |
| padding: 2rem; | |
| text-align: center; | |
| color: var(--color-text-muted); | |
| font-size: 0.85rem; | |
| margin-top: auto; | |
| } | |
| .footer a { color: var(--color-accent); } | |
| /* ============ ABOUT PAGE ============ */ | |
| .about-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 1.5rem; | |
| margin-top: 2rem; | |
| } | |
| .about-card h3 { | |
| font-size: 1.1rem; | |
| margin-bottom: 0.75rem; | |
| color: var(--color-accent); | |
| } | |
| .about-card p, | |
| .about-card li { | |
| color: var(--color-text-secondary); | |
| font-size: 0.9rem; | |
| line-height: 1.7; | |
| } | |
| .about-card ul { | |
| list-style: none; | |
| padding: 0; | |
| } | |
| .about-card li::before { | |
| content: '→ '; | |
| color: var(--color-accent); | |
| } | |
| /* Image quality tips */ | |
| .tips-box { | |
| background: rgba(59, 130, 246, 0.08); | |
| border: 1px solid rgba(59, 130, 246, 0.2); | |
| border-radius: var(--radius-md); | |
| padding: 1rem 1.25rem; | |
| margin-top: 1rem; | |
| } | |
| .tips-box h4 { | |
| color: var(--color-info); | |
| font-size: 0.9rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .tips-box li { | |
| color: var(--color-text-secondary); | |
| font-size: 0.8rem; | |
| margin-bottom: 4px; | |
| } | |
| /* ============ RESPONSIVE ============ */ | |
| @media (max-width: 768px) { | |
| .hero h1 { font-size: 2rem; } | |
| .page { padding: 1rem; } | |
| .breed-info-grid { grid-template-columns: 1fr; } | |
| .navbar-inner { padding: 0; } | |
| .nav-links a { padding: 8px 10px; font-size: 0.8rem; } | |
| .features-grid { grid-template-columns: 1fr; } | |
| .breeds-grid { grid-template-columns: 1fr; } | |
| } | |