Spaces:
Sleeping
Sleeping
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| Biopesticide-AI — Custom Web UI | |
| Design language: modern agritech (verteal-inspired) | |
| Palette: forest green, sage, cream, charcoal | |
| Typography: Fraunces (serif headlines) + Inter (body) + JetBrains Mono | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| :root { | |
| /* Colors */ | |
| --c-forest: #1a3c34; | |
| --c-forest-light: #2d5a4a; | |
| --c-sage: #7fb069; | |
| --c-sage-light: #a8d5ba; | |
| --c-sage-pale: #e8f5ec; | |
| --c-cream: #faf8f3; | |
| --c-warm-white: #fefdfa; | |
| --c-charcoal: #1a1a1a; | |
| --c-text: #2d2d2d; | |
| --c-muted: #6b7280; | |
| --c-border: #e5e7eb; | |
| --c-border-dark: #d1d5db; | |
| --c-surface: #ffffff; | |
| --c-accent: #2f86b2; | |
| --c-accent-warm: #ba5a6a; | |
| --c-success: #449f63; | |
| --c-warning: #b69045; | |
| --c-error: #964039; | |
| /* Typography */ | |
| --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif; | |
| --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; | |
| --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; | |
| /* Spacing */ | |
| --space-xs: 4px; | |
| --space-sm: 8px; | |
| --space-md: 16px; | |
| --space-lg: 24px; | |
| --space-xl: 40px; | |
| --space-2xl: 64px; | |
| /* Radius */ | |
| --radius-sm: 6px; | |
| --radius-md: 10px; | |
| --radius-lg: 16px; | |
| --radius-xl: 24px; | |
| /* Shadows */ | |
| --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); | |
| --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06); | |
| --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08); | |
| --shadow-green: 0 8px 24px rgba(26, 60, 52, 0.12); | |
| } | |
| /* ─── Reset ─── */ | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| font-family: var(--font-sans); | |
| font-size: 15px; | |
| line-height: 1.6; | |
| color: var(--c-text); | |
| background: var(--c-cream); | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| .container { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-lg); } | |
| /* ─── Header ─── */ | |
| .site-header { | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| background: rgba(250, 248, 243, 0.85); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border-bottom: 1px solid var(--c-border); | |
| } | |
| .header-inner { | |
| max-width: 1120px; | |
| margin: 0 auto; | |
| padding: 14px var(--space-lg); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: var(--space-lg); | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| text-decoration: none; | |
| color: var(--c-forest); | |
| } | |
| .logo-mark { | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, var(--c-forest) 0%, var(--c-sage) 100%); | |
| position: relative; | |
| } | |
| .logo-mark::after { | |
| content: ''; | |
| position: absolute; | |
| top: 6px; left: 6px; | |
| width: 16px; height: 16px; | |
| border-radius: 50%; | |
| background: var(--c-cream); | |
| } | |
| .logo-text { | |
| font-family: var(--font-serif); | |
| font-size: 18px; | |
| font-weight: 700; | |
| letter-spacing: -0.3px; | |
| } | |
| .logo-accent { color: var(--c-sage); } | |
| .header-nav { | |
| display: flex; | |
| gap: var(--space-lg); | |
| } | |
| .header-nav a { | |
| color: var(--c-muted); | |
| text-decoration: none; | |
| font-size: 14px; | |
| font-weight: 500; | |
| transition: color 0.2s; | |
| } | |
| .header-nav a:hover { color: var(--c-forest); } | |
| .header-status { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 12px; | |
| color: var(--c-muted); | |
| } | |
| .status-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--c-warning); | |
| transition: background 0.3s; | |
| } | |
| .status-dot.active { background: var(--c-success); } | |
| .status-dot.degraded { background: var(--c-warning); } | |
| .status-dot.error { background: var(--c-error); } | |
| /* ─── Hero ─── */ | |
| .hero { | |
| position: relative; | |
| padding: var(--space-2xl) 0 var(--space-xl); | |
| text-align: center; | |
| overflow: hidden; | |
| } | |
| .hero-inner { | |
| position: relative; | |
| z-index: 2; | |
| max-width: 760px; | |
| margin: 0 auto; | |
| padding: 0 var(--space-lg); | |
| } | |
| .hero-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 6px 14px; | |
| border-radius: 20px; | |
| background: var(--c-sage-pale); | |
| border: 1px solid var(--c-sage-light); | |
| font-size: 12px; | |
| font-weight: 500; | |
| color: var(--c-forest); | |
| margin-bottom: var(--space-lg); | |
| } | |
| .hero-badge-dot { | |
| width: 6px; height: 6px; | |
| border-radius: 50%; | |
| background: var(--c-sage); | |
| } | |
| .hero-title { | |
| font-family: var(--font-serif); | |
| font-size: clamp(36px, 6vw, 56px); | |
| font-weight: 700; | |
| line-height: 1.1; | |
| letter-spacing: -1.5px; | |
| color: var(--c-forest); | |
| margin-bottom: var(--space-lg); | |
| } | |
| .hero-title-accent { | |
| font-style: italic; | |
| color: var(--c-sage); | |
| font-weight: 600; | |
| } | |
| .hero-subtitle { | |
| font-size: 17px; | |
| line-height: 1.65; | |
| color: var(--c-muted); | |
| max-width: 620px; | |
| margin: 0 auto var(--space-xl); | |
| } | |
| .hero-metrics { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--space-lg); | |
| flex-wrap: wrap; | |
| } | |
| .hero-metric { text-align: center; } | |
| .hero-metric-num { | |
| font-family: var(--font-serif); | |
| font-size: 32px; | |
| font-weight: 700; | |
| color: var(--c-forest); | |
| line-height: 1; | |
| } | |
| .hero-metric-lbl { | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.8px; | |
| color: var(--c-muted); | |
| margin-top: 4px; | |
| } | |
| .hero-metric-sep { | |
| width: 1px; | |
| height: 36px; | |
| background: var(--c-border-dark); | |
| } | |
| /* Hero background pattern (subtle leaf-like organic shapes) */ | |
| .hero-bg-pattern { | |
| position: absolute; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| background-image: | |
| radial-gradient(ellipse 400px 200px at 10% 20%, rgba(127, 176, 105, 0.06) 0%, transparent 50%), | |
| radial-gradient(ellipse 300px 300px at 90% 80%, rgba(26, 60, 52, 0.04) 0%, transparent 50%), | |
| radial-gradient(ellipse 200px 200px at 50% 50%, rgba(168, 213, 186, 0.05) 0%, transparent 50%); | |
| z-index: 1; | |
| } | |
| /* ─── Design Section ─── */ | |
| .design-section { | |
| padding: var(--space-xl) 0; | |
| } | |
| .section-header { | |
| text-align: center; | |
| margin-bottom: var(--space-xl); | |
| } | |
| .section-title { | |
| font-family: var(--font-serif); | |
| font-size: 32px; | |
| font-weight: 600; | |
| color: var(--c-forest); | |
| margin-bottom: var(--space-sm); | |
| letter-spacing: -0.5px; | |
| } | |
| .section-subtitle { | |
| font-size: 15px; | |
| color: var(--c-muted); | |
| max-width: 560px; | |
| margin: 0 auto; | |
| } | |
| .input-card { | |
| background: var(--c-surface); | |
| border: 1px solid var(--c-border); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-lg); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .pest-input { | |
| width: 100%; | |
| border: none; | |
| outline: none; | |
| resize: vertical; | |
| font-family: var(--font-sans); | |
| font-size: 15px; | |
| line-height: 1.6; | |
| color: var(--c-text); | |
| background: transparent; | |
| min-height: 80px; | |
| } | |
| .pest-input::placeholder { color: var(--c-muted); opacity: 0.7; } | |
| .input-footer { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-end; | |
| gap: var(--space-lg); | |
| margin-top: var(--space-md); | |
| padding-top: var(--space-md); | |
| border-top: 1px solid var(--c-border); | |
| flex-wrap: wrap; | |
| } | |
| .examples { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| flex-wrap: wrap; | |
| } | |
| .examples-label { | |
| font-size: 12px; | |
| color: var(--c-muted); | |
| font-weight: 500; | |
| margin-right: 4px; | |
| } | |
| .example-chip { | |
| padding: 5px 12px; | |
| border: 1px solid var(--c-border-dark); | |
| border-radius: 16px; | |
| background: var(--c-cream); | |
| font-family: var(--font-sans); | |
| font-size: 12px; | |
| font-weight: 500; | |
| color: var(--c-forest-light); | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .example-chip:hover { | |
| background: var(--c-sage-pale); | |
| border-color: var(--c-sage); | |
| color: var(--c-forest); | |
| } | |
| .input-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-md); | |
| } | |
| .topk-control { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .topk-label { | |
| font-size: 12px; | |
| color: var(--c-muted); | |
| font-weight: 500; | |
| } | |
| .topk-input { | |
| width: 56px; | |
| padding: 6px 8px; | |
| border: 1px solid var(--c-border-dark); | |
| border-radius: var(--radius-sm); | |
| font-family: var(--font-sans); | |
| font-size: 13px; | |
| text-align: center; | |
| color: var(--c-text); | |
| background: var(--c-surface); | |
| } | |
| .topk-input:focus { | |
| outline: none; | |
| border-color: var(--c-sage); | |
| box-shadow: 0 0 0 3px rgba(127, 176, 105, 0.15); | |
| } | |
| .design-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 12px 24px; | |
| border: none; | |
| border-radius: var(--radius-md); | |
| background: var(--c-forest); | |
| color: white; | |
| font-family: var(--font-sans); | |
| font-size: 14px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| box-shadow: var(--shadow-green); | |
| } | |
| .design-btn:hover { | |
| background: var(--c-forest-light); | |
| transform: translateY(-1px); | |
| box-shadow: 0 10px 28px rgba(26, 60, 52, 0.18); | |
| } | |
| .design-btn:active { transform: translateY(0); } | |
| .design-btn:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| .design-btn-arrow { transition: transform 0.2s; } | |
| .design-btn:hover .design-btn-arrow { transform: translateX(3px); } | |
| /* ─── Loading State ─── */ | |
| .loading-state { | |
| text-align: center; | |
| padding: var(--space-2xl) 0; | |
| } | |
| .loading-spinner { | |
| width: 40px; | |
| height: 40px; | |
| border: 3px solid var(--c-border); | |
| border-top-color: var(--c-sage); | |
| border-radius: 50%; | |
| margin: 0 auto var(--space-md); | |
| animation: spin 0.8s linear infinite; | |
| } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| .loading-text { | |
| font-family: var(--font-serif); | |
| font-size: 20px; | |
| font-weight: 600; | |
| color: var(--c-forest); | |
| margin-bottom: 4px; | |
| } | |
| .loading-subtext { | |
| font-size: 13px; | |
| color: var(--c-muted); | |
| } | |
| /* ─── Error State ─── */ | |
| .error-state { | |
| background: #fef2f2; | |
| border: 1px solid #fecaca; | |
| border-radius: var(--radius-md); | |
| padding: var(--space-lg); | |
| margin: var(--space-lg) 0; | |
| } | |
| .error-text { | |
| color: var(--c-error); | |
| font-size: 14px; | |
| white-space: pre-wrap; | |
| font-family: var(--font-mono); | |
| } | |
| /* ─── Results Section ─── */ | |
| .results-section { | |
| padding: var(--space-xl) 0; | |
| background: var(--c-warm-white); | |
| border-top: 1px solid var(--c-border); | |
| border-bottom: 1px solid var(--c-border); | |
| } | |
| /* Stats strip */ | |
| .stats-strip { | |
| display: flex; | |
| justify-content: center; | |
| gap: var(--space-xl); | |
| padding: var(--space-lg) 0; | |
| border-bottom: 1px solid var(--c-border); | |
| margin-bottom: var(--space-xl); | |
| flex-wrap: wrap; | |
| } | |
| .stats-strip .stat { | |
| text-align: center; | |
| } | |
| .stats-strip .stat-num { | |
| font-family: var(--font-serif); | |
| font-size: 24px; | |
| font-weight: 700; | |
| color: var(--c-sage); | |
| line-height: 1; | |
| } | |
| .stats-strip .stat-lbl { | |
| font-size: 10px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.6px; | |
| color: var(--c-muted); | |
| margin-top: 4px; | |
| } | |
| /* Result blocks */ | |
| .result-block { margin-bottom: var(--space-xl); } | |
| .block-title { | |
| font-family: var(--font-serif); | |
| font-size: 22px; | |
| font-weight: 600; | |
| color: var(--c-forest); | |
| margin-bottom: var(--space-md); | |
| letter-spacing: -0.3px; | |
| } | |
| /* Pest report card */ | |
| .pest-report-card { | |
| background: var(--c-surface); | |
| border: 1px solid var(--c-border); | |
| border-left: 4px solid var(--c-sage); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-lg); | |
| } | |
| .pest-report-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 14px; | |
| } | |
| .pest-report-table td { | |
| padding: 6px 0; | |
| } | |
| .pest-report-table td:first-child { | |
| color: var(--c-muted); | |
| font-weight: 500; | |
| width: 140px; | |
| } | |
| .pest-report-table td:last-child { | |
| color: var(--c-text); | |
| } | |
| .pest-report-table b { color: var(--c-forest); } | |
| /* Candidate cards */ | |
| .candidates-grid { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: var(--space-sm); | |
| } | |
| .candidate-card { | |
| background: var(--c-surface); | |
| border: 1px solid var(--c-border); | |
| border-left: 4px solid var(--c-sage); | |
| border-radius: var(--radius-md); | |
| padding: 14px var(--space-lg); | |
| transition: all 0.2s; | |
| } | |
| .candidate-card:hover { | |
| box-shadow: var(--shadow-md); | |
| transform: translateX(2px); | |
| } | |
| .candidate-card.rank-good { border-left-color: var(--c-success); } | |
| .candidate-card.rank-warn { border-left-color: var(--c-warning); } | |
| .candidate-card.rank-poor { border-left-color: var(--c-error); } | |
| .candidate-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 8px; | |
| } | |
| .candidate-rank { | |
| font-family: var(--font-sans); | |
| font-size: 11px; | |
| font-weight: 700; | |
| color: var(--c-sage); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .candidate-seq { | |
| font-family: var(--font-mono); | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--c-text); | |
| letter-spacing: 0.5px; | |
| } | |
| .candidate-metrics { | |
| display: flex; | |
| gap: var(--space-lg); | |
| font-size: 12px; | |
| color: var(--c-muted); | |
| flex-wrap: wrap; | |
| } | |
| .candidate-metrics .metric-val { | |
| font-weight: 700; | |
| color: var(--c-text); | |
| } | |
| /* Tabs */ | |
| .tabs { | |
| display: flex; | |
| gap: 4px; | |
| border-bottom: 2px solid var(--c-border); | |
| margin-bottom: var(--space-lg); | |
| } | |
| .tab { | |
| padding: 10px 20px; | |
| border: none; | |
| background: none; | |
| font-family: var(--font-sans); | |
| font-size: 14px; | |
| font-weight: 500; | |
| color: var(--c-muted); | |
| cursor: pointer; | |
| border-bottom: 2px solid transparent; | |
| margin-bottom: -2px; | |
| transition: all 0.2s; | |
| } | |
| .tab:hover { color: var(--c-forest); } | |
| .tab.active { | |
| color: var(--c-forest); | |
| border-bottom-color: var(--c-sage); | |
| font-weight: 600; | |
| } | |
| .tab-content { display: none; } | |
| .tab-content.active { display: block; } | |
| /* Charts */ | |
| .chart-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: var(--space-lg); | |
| margin-bottom: var(--space-lg); | |
| } | |
| .chart-card { | |
| background: var(--c-surface); | |
| border: 1px solid var(--c-border); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-lg); | |
| } | |
| .chart-card-wide { grid-column: 1 / -1; } | |
| .chart-title { | |
| font-family: var(--font-sans); | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--c-forest); | |
| margin-bottom: var(--space-md); | |
| } | |
| .chart-container { | |
| position: relative; | |
| height: 240px; | |
| } | |
| .chart-card-wide .chart-container { height: 320px; } | |
| /* Safety cards */ | |
| .safety-cards-content { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-md); | |
| } | |
| .safety-card-item { | |
| background: var(--c-surface); | |
| border: 1px solid var(--c-border); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-lg); | |
| } | |
| .safety-card-item h4 { | |
| font-family: var(--font-mono); | |
| font-size: 14px; | |
| color: var(--c-forest); | |
| margin-bottom: var(--space-sm); | |
| } | |
| .safety-card-item pre { | |
| font-family: var(--font-sans); | |
| font-size: 13px; | |
| line-height: 1.6; | |
| color: var(--c-text); | |
| white-space: pre-wrap; | |
| } | |
| /* Regulatory memo */ | |
| .regulatory-memo-content { | |
| background: var(--c-surface); | |
| border: 1px solid var(--c-border); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-xl); | |
| font-size: 14px; | |
| line-height: 1.7; | |
| color: var(--c-text); | |
| } | |
| .regulatory-memo-content h1, | |
| .regulatory-memo-content h2, | |
| .regulatory-memo-content h3 { | |
| font-family: var(--font-serif); | |
| color: var(--c-forest); | |
| margin: var(--space-md) 0 var(--space-sm); | |
| } | |
| .regulatory-memo-content h1 { font-size: 20px; } | |
| .regulatory-memo-content h2 { font-size: 16px; } | |
| .regulatory-memo-content h3 { font-size: 14px; } | |
| .regulatory-memo-content p { margin-bottom: var(--space-sm); } | |
| .regulatory-memo-content strong { color: var(--c-forest); } | |
| .regulatory-memo-content table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin: var(--space-sm) 0; | |
| font-size: 13px; | |
| } | |
| .regulatory-memo-content th, | |
| .regulatory-memo-content td { | |
| border: 1px solid var(--c-border); | |
| padding: 6px 10px; | |
| text-align: left; | |
| } | |
| .regulatory-memo-content th { | |
| background: var(--c-sage-pale); | |
| font-weight: 600; | |
| } | |
| /* Export */ | |
| .export-section { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: var(--space-lg); | |
| } | |
| .export-card { | |
| background: var(--c-surface); | |
| border: 1px solid var(--c-border); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-lg); | |
| text-align: center; | |
| } | |
| .export-title { | |
| font-family: var(--font-serif); | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: var(--c-forest); | |
| margin-bottom: 8px; | |
| } | |
| .export-desc { | |
| font-size: 13px; | |
| color: var(--c-muted); | |
| margin-bottom: var(--space-md); | |
| } | |
| .export-btn { | |
| padding: 10px 20px; | |
| border: 1px solid var(--c-forest); | |
| border-radius: var(--radius-sm); | |
| background: transparent; | |
| color: var(--c-forest); | |
| font-family: var(--font-sans); | |
| font-size: 13px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .export-btn:hover { | |
| background: var(--c-forest); | |
| color: white; | |
| } | |
| /* ─── About / Pipeline ─── */ | |
| .about-section { | |
| padding: var(--space-2xl) 0; | |
| background: var(--c-cream); | |
| } | |
| .about-section .section-title { | |
| text-align: center; | |
| margin-bottom: var(--space-xl); | |
| } | |
| .pipeline-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: var(--space-lg); | |
| } | |
| .pipeline-step { | |
| background: var(--c-surface); | |
| border: 1px solid var(--c-border); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-lg); | |
| transition: all 0.2s; | |
| } | |
| .pipeline-step:hover { | |
| box-shadow: var(--shadow-md); | |
| transform: translateY(-2px); | |
| } | |
| .pipeline-num { | |
| font-family: var(--font-serif); | |
| font-size: 28px; | |
| font-weight: 700; | |
| color: var(--c-sage); | |
| line-height: 1; | |
| margin-bottom: var(--space-sm); | |
| } | |
| .pipeline-step h4 { | |
| font-family: var(--font-serif); | |
| font-size: 17px; | |
| font-weight: 600; | |
| color: var(--c-forest); | |
| margin-bottom: 6px; | |
| } | |
| .pipeline-step p { | |
| font-size: 13px; | |
| line-height: 1.6; | |
| color: var(--c-muted); | |
| } | |
| /* ─── Footer ─── */ | |
| .site-footer { | |
| padding: var(--space-xl) 0; | |
| text-align: center; | |
| border-top: 1px solid var(--c-border); | |
| background: var(--c-cream); | |
| } | |
| .site-footer p { | |
| font-size: 12px; | |
| color: var(--c-muted); | |
| } | |
| /* ─── Pest selector grid ─── */ | |
| .pest-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); | |
| gap: var(--space-md); | |
| margin-bottom: var(--space-lg); | |
| } | |
| .pest-card { | |
| background: var(--c-surface); | |
| border: 1px solid var(--c-border); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-lg); | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| text-align: left; | |
| display: flex; | |
| align-items: flex-start; | |
| gap: var(--space-md); | |
| font-family: var(--font-sans); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .pest-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; | |
| height: 3px; | |
| background: var(--c-sage); | |
| opacity: 0; | |
| transition: opacity 0.2s; | |
| } | |
| .pest-card:hover { | |
| border-color: var(--c-sage); | |
| box-shadow: var(--shadow-md); | |
| transform: translateY(-2px); | |
| } | |
| .pest-card:hover::before { opacity: 1; } | |
| .pest-card:active { transform: translateY(0); } | |
| .pest-card.selected { | |
| border-color: var(--c-sage); | |
| box-shadow: 0 0 0 2px var(--c-sage), var(--shadow-md); | |
| } | |
| .pest-card.selected::before { opacity: 1; } | |
| .pest-card-icon { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| flex-shrink: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 20px; | |
| color: white; | |
| font-weight: 700; | |
| } | |
| /* Crop-colored icons */ | |
| .pest-icon-rice { background: linear-gradient(135deg, #d4a574 0%, #b8860b 100%); } | |
| .pest-icon-maize { background: linear-gradient(135deg, #f4d03f 0%, #d4ac0d 100%); } | |
| .pest-icon-wheat { background: linear-gradient(135deg, #daa520 0%, #b8860b 100%); } | |
| .pest-icon-veg { background: linear-gradient(135deg, #7fb069 0%, #5d8a4a 100%); } | |
| .pest-icon-potato { background: linear-gradient(135deg, #c9a87c 0%, #a0825a 100%); } | |
| .pest-icon-tomato { background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); } | |
| .pest-icon-custom { | |
| background: linear-gradient(135deg, var(--c-forest) 0%, var(--c-sage) 100%); | |
| font-size: 24px; | |
| } | |
| .pest-card-body { flex: 1; min-width: 0; } | |
| .pest-card-name { | |
| font-family: var(--font-serif); | |
| font-size: 15px; | |
| font-weight: 600; | |
| color: var(--c-forest); | |
| margin-bottom: 2px; | |
| line-height: 1.3; | |
| } | |
| .pest-card-latin { | |
| font-family: var(--font-serif); | |
| font-size: 12px; | |
| font-style: italic; | |
| color: var(--c-muted); | |
| margin-bottom: 6px; | |
| } | |
| .pest-card-crop { | |
| display: inline-block; | |
| padding: 2px 8px; | |
| background: var(--c-sage-pale); | |
| color: var(--c-forest); | |
| font-size: 10px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| border-radius: 10px; | |
| } | |
| .pest-card-custom { | |
| border-style: dashed; | |
| border-color: var(--c-border-dark); | |
| background: var(--c-cream); | |
| } | |
| .pest-card-custom:hover { border-color: var(--c-sage); } | |
| /* Card-mode top-K control */ | |
| .card-mode-controls { | |
| display: flex; | |
| justify-content: center; | |
| margin-bottom: var(--space-lg); | |
| } | |
| .card-mode-controls .topk-control { | |
| background: var(--c-surface); | |
| padding: 10px 16px; | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--c-border); | |
| } | |
| /* ─── Chart containers (FIX: must have explicit height) ─── */ | |
| .chart-container { | |
| position: relative; | |
| height: 280px; | |
| width: 100%; | |
| } | |
| .chart-container-tall { | |
| height: 400px; | |
| } | |
| .heatmap-scroll { | |
| overflow-x: auto; | |
| max-height: 400px; | |
| overflow-y: auto; | |
| } | |
| /* ─── Wet-lab simulation ─── */ | |
| .sim-intro { | |
| background: var(--c-surface); | |
| border: 1px solid var(--c-border); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-lg); | |
| margin-bottom: var(--space-lg); | |
| text-align: center; | |
| } | |
| .sim-title { | |
| font-family: var(--font-serif); | |
| font-size: 18px; | |
| font-weight: 600; | |
| color: var(--c-forest); | |
| margin-bottom: 8px; | |
| } | |
| .sim-desc { | |
| font-size: 13px; | |
| color: var(--c-muted); | |
| margin-bottom: var(--space-md); | |
| max-width: 600px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .sim-btn { margin: 0 auto; } | |
| .sim-results { margin-top: var(--space-lg); } | |
| .sim-summary-card { | |
| background: var(--c-surface); | |
| border: 1px solid var(--c-border); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-lg); | |
| margin-bottom: var(--space-lg); | |
| } | |
| .sim-card-title { | |
| font-family: var(--font-serif); | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: var(--c-forest); | |
| margin-bottom: var(--space-sm); | |
| } | |
| .sim-meta { | |
| font-size: 12px; | |
| color: var(--c-muted); | |
| margin-bottom: var(--space-md); | |
| } | |
| .sim-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 12px; | |
| } | |
| .sim-table th, | |
| .sim-table td { | |
| border: 1px solid var(--c-border); | |
| padding: 8px 10px; | |
| text-align: center; | |
| } | |
| .sim-table th { | |
| background: var(--c-sage-pale); | |
| color: var(--c-forest); | |
| font-weight: 600; | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.3px; | |
| } | |
| .sim-table .sim-seq { | |
| font-family: var(--font-mono); | |
| font-size: 11px; | |
| } | |
| .sim-table .sim-val { color: var(--c-muted); } | |
| .sim-table .sim-val-good { font-weight: 700; color: var(--c-forest); } | |
| .tier-good { color: var(--c-success); font-weight: 600; } | |
| .tier-warn { color: var(--c-warning); font-weight: 600; } | |
| .tier-poor { color: var(--c-error); font-weight: 600; } | |
| .sim-chart-card { | |
| background: var(--c-surface); | |
| border: 1px solid var(--c-border); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-lg); | |
| margin-bottom: var(--space-lg); | |
| } | |
| .sim-stages { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-md); | |
| } | |
| .sim-stage { | |
| background: var(--c-cream); | |
| border-radius: var(--radius-sm); | |
| padding: var(--space-md); | |
| } | |
| .sim-stage-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 6px; | |
| } | |
| .sim-stage-name { | |
| font-weight: 600; | |
| color: var(--c-forest); | |
| font-size: 13px; | |
| } | |
| .sim-stage-val { | |
| font-family: var(--font-serif); | |
| font-size: 18px; | |
| font-weight: 700; | |
| color: var(--c-sage); | |
| } | |
| .sim-stage-bar { | |
| height: 8px; | |
| background: var(--c-border); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| margin-bottom: 6px; | |
| } | |
| .sim-stage-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--c-forest) 0%, var(--c-sage) 100%); | |
| border-radius: 4px; | |
| transition: width 0.6s ease; | |
| } | |
| .sim-stage-desc { | |
| font-size: 11px; | |
| color: var(--c-muted); | |
| line-height: 1.4; | |
| } | |
| /* ─── Heatmap table ─── */ | |
| .heatmap-table-container { | |
| overflow-x: auto; | |
| } | |
| .heatmap-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 11px; | |
| font-family: var(--font-sans); | |
| } | |
| .heatmap-table th, | |
| .heatmap-table td { | |
| border: 1px solid var(--c-border); | |
| padding: 6px 8px; | |
| text-align: center; | |
| white-space: nowrap; | |
| } | |
| .heatmap-table th { | |
| background: var(--c-sage-pale); | |
| color: var(--c-forest); | |
| font-weight: 600; | |
| font-size: 10px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.3px; | |
| max-width: 80px; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .heatmap-table .heatmap-rank { | |
| font-weight: 700; | |
| color: var(--c-sage); | |
| background: var(--c-cream); | |
| } | |
| .heatmap-table td { | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| } | |
| /* ─── Markdown body (safety cards, memo) ─── */ | |
| .markdown-body { | |
| font-size: 13px; | |
| line-height: 1.6; | |
| color: var(--c-text); | |
| } | |
| .markdown-body h1, | |
| .markdown-body h2, | |
| .markdown-body h3 { | |
| font-family: var(--font-serif); | |
| color: var(--c-forest); | |
| margin: 12px 0 6px; | |
| } | |
| .markdown-body h1 { font-size: 18px; } | |
| .markdown-body h2 { font-size: 15px; } | |
| .markdown-body h3 { font-size: 13px; } | |
| .markdown-body p { margin-bottom: 8px; } | |
| .markdown-body strong { color: var(--c-forest); } | |
| .markdown-body code { | |
| font-family: var(--font-mono); | |
| background: var(--c-cream); | |
| padding: 1px 4px; | |
| border-radius: 3px; | |
| font-size: 12px; | |
| } | |
| .markdown-body table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin: 8px 0; | |
| font-size: 12px; | |
| } | |
| .markdown-body th, | |
| .markdown-body td { | |
| border: 1px solid var(--c-border); | |
| padding: 4px 8px; | |
| text-align: left; | |
| } | |
| .markdown-body th { | |
| background: var(--c-sage-pale); | |
| font-weight: 600; | |
| } | |
| /* ─── Responsive ─── */ | |
| @media (max-width: 768px) { | |
| .hero-metrics { gap: var(--space-md); } | |
| .hero-metric-sep { display: none; } | |
| .chart-grid { grid-template-columns: 1fr; } | |
| .export-section { grid-template-columns: 1fr; } | |
| .header-nav { display: none; } | |
| .input-footer { flex-direction: column; align-items: stretch; } | |
| .input-actions { justify-content: space-between; } | |
| } | |