Spaces:
Running
Running
| /* ═══════════════════════════════════════════════════════════════════════════ | |
| VrukshaVed — Ayurvedic Plant Intelligence | |
| Design: Forest-earth tones, sacred geometry, Cormorant + Yatra One typography | |
| ═══════════════════════════════════════════════════════════════════════════ */ | |
| /* ── Reset & Variables ──────────────────────────────────────────────────── */ | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| :root { | |
| --ink: #1a1a0e; | |
| --deep-green: #1e4d1a; | |
| --mid-green: #3a7a30; | |
| --leaf-green: #5aab40; | |
| --lime: #a8d85c; | |
| --cream: #faf6ee; | |
| --parchment: #f2ead8; | |
| --earth: #8b6b3d; | |
| --gold: #c9953a; | |
| --saffron: #e8a020; | |
| --red-tika: #b83030; | |
| --muted: #6b7a5e; | |
| --border: rgba(90, 171, 64, 0.2); | |
| --shadow: rgba(30, 77, 26, 0.12); | |
| --glass: rgba(255, 255, 255, 0.72); | |
| --glass-dark: rgba(30, 40, 20, 0.65); | |
| --ff-head: 'Yatra One', serif; | |
| --ff-body: 'Cormorant Garamond', serif; | |
| --ff-ui: 'DM Sans', sans-serif; | |
| --radius: 16px; | |
| --radius-sm: 8px; | |
| --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| font-family: var(--ff-body); | |
| background: var(--cream); | |
| color: var(--ink); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| line-height: 1.7; | |
| } | |
| /* ── Background Layer ───────────────────────────────────────────────────── */ | |
| .bg-layer { | |
| position: fixed; | |
| inset: 0; | |
| pointer-events: none; | |
| z-index: 0; | |
| overflow: hidden; | |
| background: | |
| radial-gradient(ellipse 80% 60% at 10% 20%, rgba(168, 216, 92, 0.08) 0%, transparent 60%), | |
| radial-gradient(ellipse 60% 80% at 90% 80%, rgba(201, 149, 58, 0.06) 0%, transparent 60%), | |
| var(--cream); | |
| } | |
| .mandala-ring { | |
| position: absolute; | |
| border-radius: 50%; | |
| border: 1px solid rgba(90, 171, 64, 0.12); | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| animation: mandala-spin linear infinite; | |
| } | |
| .ring-1 { width: 600px; height: 600px; animation-duration: 80s; border-style: dashed; } | |
| .ring-2 { width: 1000px; height: 1000px; animation-duration: 140s; animation-direction: reverse; } | |
| .ring-3 { width: 1400px; height: 1400px; animation-duration: 200s; } | |
| @keyframes mandala-spin { to { transform: translate(-50%, -50%) rotate(360deg); } } | |
| .leaf-scatter { | |
| position: absolute; | |
| inset: 0; | |
| } | |
| /* ── Header ─────────────────────────────────────────────────────────────── */ | |
| .site-header { | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| background: var(--glass); | |
| backdrop-filter: blur(16px); | |
| -webkit-backdrop-filter: blur(16px); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .header-inner { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 2rem; | |
| height: 72px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .logo-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .logo-icon { | |
| width: 44px; | |
| height: 44px; | |
| filter: drop-shadow(0 2px 8px rgba(58, 122, 48, 0.3)); | |
| } | |
| .logo-icon svg { width: 100%; height: 100%; } | |
| .site-title { | |
| font-family: var(--ff-head); | |
| font-size: 1.6rem; | |
| color: var(--deep-green); | |
| line-height: 1; | |
| } | |
| .site-tagline { | |
| font-family: var(--ff-ui); | |
| font-size: 0.72rem; | |
| color: var(--muted); | |
| letter-spacing: 0.05em; | |
| margin-top: 2px; | |
| } | |
| .header-nav { | |
| display: flex; | |
| gap: 2rem; | |
| } | |
| .header-nav a { | |
| font-family: var(--ff-ui); | |
| font-size: 0.88rem; | |
| font-weight: 500; | |
| color: var(--mid-green); | |
| text-decoration: none; | |
| letter-spacing: 0.03em; | |
| transition: color var(--transition); | |
| } | |
| .header-nav a:hover { color: var(--deep-green); } | |
| /* ── Hero ───────────────────────────────────────────────────────────────── */ | |
| .hero { | |
| position: relative; | |
| z-index: 1; | |
| min-height: 88vh; | |
| display: flex; | |
| align-items: center; | |
| padding: 6rem 2rem 4rem; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .hero-content { max-width: 620px; } | |
| .hero-badge { | |
| display: inline-block; | |
| font-family: var(--ff-ui); | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| letter-spacing: 0.12em; | |
| text-transform: uppercase; | |
| color: var(--mid-green); | |
| background: rgba(90, 171, 64, 0.12); | |
| border: 1px solid rgba(90, 171, 64, 0.3); | |
| padding: 6px 14px; | |
| border-radius: 100px; | |
| margin-bottom: 1.5rem; | |
| } | |
| .hero-headline { | |
| font-family: var(--ff-head); | |
| font-size: clamp(2.8rem, 6vw, 5.2rem); | |
| line-height: 1.05; | |
| color: var(--deep-green); | |
| margin-bottom: 1.5rem; | |
| } | |
| .hero-headline em { | |
| font-style: italic; | |
| color: var(--gold); | |
| font-family: 'Cormorant Garamond', serif; | |
| } | |
| .hero-subtext { | |
| font-size: 1.15rem; | |
| color: var(--muted); | |
| margin-bottom: 2.5rem; | |
| max-width: 520px; | |
| font-weight: 300; | |
| } | |
| .cta-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-family: var(--ff-ui); | |
| font-size: 1rem; | |
| font-weight: 500; | |
| color: #fff; | |
| background: linear-gradient(135deg, var(--mid-green), var(--deep-green)); | |
| padding: 14px 32px; | |
| border-radius: 100px; | |
| text-decoration: none; | |
| box-shadow: 0 8px 32px rgba(30, 77, 26, 0.3); | |
| transition: transform var(--transition), box-shadow var(--transition); | |
| } | |
| .cta-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 12px 40px rgba(30, 77, 26, 0.4); | |
| } | |
| .cta-btn svg { width: 18px; height: 18px; } | |
| .hero-decoration { | |
| position: absolute; | |
| right: 0; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| width: 480px; | |
| height: 480px; | |
| pointer-events: none; | |
| } | |
| .deco-circle { | |
| position: absolute; | |
| border-radius: 50%; | |
| opacity: 0.12; | |
| } | |
| .c1 { | |
| width: 380px; height: 380px; | |
| top: 50%; left: 50%; | |
| transform: translate(-50%, -50%); | |
| background: radial-gradient(circle, var(--leaf-green) 0%, transparent 70%); | |
| } | |
| .c2 { | |
| width: 200px; height: 200px; | |
| top: 20%; left: 60%; | |
| background: radial-gradient(circle, var(--gold) 0%, transparent 70%); | |
| opacity: 0.18; | |
| } | |
| .rotating-mandala { | |
| position: absolute; | |
| top: 50%; left: 50%; | |
| transform: translate(-50%, -50%); | |
| font-size: 14rem; | |
| color: var(--leaf-green); | |
| opacity: 0.06; | |
| animation: mandala-spin 60s linear infinite; | |
| line-height: 1; | |
| } | |
| /* ── Section Commons ────────────────────────────────────────────────────── */ | |
| .section-container { | |
| position: relative; | |
| z-index: 1; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 5rem 2rem; | |
| } | |
| .section-header { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| } | |
| .section-label { | |
| display: inline-block; | |
| font-family: var(--ff-ui); | |
| font-size: 0.72rem; | |
| font-weight: 600; | |
| letter-spacing: 0.15em; | |
| text-transform: uppercase; | |
| color: var(--gold); | |
| margin-bottom: 0.75rem; | |
| } | |
| .section-header h2 { | |
| font-family: var(--ff-head); | |
| font-size: clamp(1.8rem, 4vw, 3rem); | |
| color: var(--deep-green); | |
| line-height: 1.1; | |
| margin-bottom: 0.75rem; | |
| } | |
| .section-header p { | |
| font-size: 1rem; | |
| color: var(--muted); | |
| max-width: 500px; | |
| margin: 0 auto; | |
| } | |
| /* ── Upload Section ─────────────────────────────────────────────────────── */ | |
| .upload-section { background: var(--parchment); } | |
| .upload-area { | |
| max-width: 680px; | |
| margin: 0 auto; | |
| background: white; | |
| border: 2px dashed var(--border); | |
| border-radius: 24px; | |
| min-height: 320px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: border-color var(--transition), box-shadow var(--transition); | |
| box-shadow: 0 4px 32px var(--shadow); | |
| overflow: hidden; | |
| } | |
| .upload-area.drag-over { | |
| border-color: var(--leaf-green); | |
| box-shadow: 0 8px 48px rgba(90, 171, 64, 0.2); | |
| } | |
| .upload-idle { | |
| text-align: center; | |
| padding: 3rem 2rem; | |
| } | |
| .upload-icon { | |
| width: 80px; | |
| height: 80px; | |
| margin: 0 auto 1.5rem; | |
| color: var(--leaf-green); | |
| opacity: 0.6; | |
| } | |
| .upload-icon svg { width: 100%; height: 100%; } | |
| .upload-main-text { | |
| font-family: var(--ff-head); | |
| font-size: 1.4rem; | |
| color: var(--deep-green); | |
| margin-bottom: 0.5rem; | |
| } | |
| .upload-sub-text { | |
| font-size: 0.9rem; | |
| color: var(--muted); | |
| margin-bottom: 1.5rem; | |
| } | |
| .upload-buttons { | |
| display: flex; | |
| gap: 1rem; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| } | |
| .btn-upload, .btn-camera { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-family: var(--ff-ui); | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| padding: 10px 22px; | |
| border-radius: 100px; | |
| cursor: pointer; | |
| transition: all var(--transition); | |
| border: none; | |
| } | |
| .btn-upload { | |
| background: var(--deep-green); | |
| color: #fff; | |
| } | |
| .btn-upload:hover { background: var(--mid-green); transform: translateY(-1px); } | |
| .btn-camera { | |
| background: transparent; | |
| color: var(--mid-green); | |
| border: 1.5px solid var(--mid-green); | |
| } | |
| .btn-camera:hover { background: rgba(58, 122, 48, 0.08); } | |
| .btn-upload svg, .btn-camera svg { width: 16px; height: 16px; } | |
| /* Camera */ | |
| .camera-view { | |
| width: 100%; | |
| position: relative; | |
| } | |
| .camera-view video { | |
| width: 100%; | |
| max-height: 420px; | |
| object-fit: cover; | |
| display: block; | |
| } | |
| .camera-overlay { | |
| position: absolute; | |
| inset: 0; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| pointer-events: none; | |
| } | |
| .camera-frame { | |
| width: 260px; | |
| height: 260px; | |
| border: 2px solid rgba(168, 216, 92, 0.8); | |
| border-radius: 12px; | |
| box-shadow: 0 0 0 9999px rgba(0,0,0,0.4); | |
| } | |
| .camera-hint { | |
| margin-top: 12px; | |
| color: rgba(255,255,255,0.9); | |
| font-family: var(--ff-ui); | |
| font-size: 0.85rem; | |
| } | |
| .camera-controls { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 1.5rem; | |
| padding: 1.5rem; | |
| background: var(--deep-green); | |
| } | |
| .btn-capture { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| background: var(--lime); | |
| color: var(--deep-green); | |
| font-family: var(--ff-ui); | |
| font-weight: 600; | |
| font-size: 1rem; | |
| padding: 12px 28px; | |
| border-radius: 100px; | |
| border: none; | |
| cursor: pointer; | |
| transition: all var(--transition); | |
| } | |
| .btn-capture:hover { transform: scale(1.04); } | |
| .capture-ring { | |
| display: block; | |
| width: 16px; | |
| height: 16px; | |
| border: 2.5px solid var(--deep-green); | |
| border-radius: 50%; | |
| } | |
| .btn-cancel-camera { | |
| background: none; | |
| color: rgba(255,255,255,0.7); | |
| border: 1px solid rgba(255,255,255,0.3); | |
| font-family: var(--ff-ui); | |
| font-size: 0.85rem; | |
| padding: 10px 20px; | |
| border-radius: 100px; | |
| cursor: pointer; | |
| transition: all var(--transition); | |
| } | |
| .btn-cancel-camera:hover { color: #fff; border-color: #fff; } | |
| /* Preview */ | |
| .image-preview { | |
| width: 100%; | |
| padding: 1.5rem; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 1.5rem; | |
| } | |
| .image-preview img { | |
| max-width: 100%; | |
| max-height: 360px; | |
| object-fit: contain; | |
| border-radius: 12px; | |
| box-shadow: 0 8px 32px var(--shadow); | |
| } | |
| .preview-actions { | |
| display: flex; | |
| gap: 1rem; | |
| align-items: center; | |
| } | |
| .btn-analyze { | |
| font-family: var(--ff-ui); | |
| font-size: 1rem; | |
| font-weight: 600; | |
| color: #fff; | |
| background: linear-gradient(135deg, var(--mid-green), var(--deep-green)); | |
| padding: 12px 36px; | |
| border-radius: 100px; | |
| border: none; | |
| cursor: pointer; | |
| box-shadow: 0 6px 24px rgba(30, 77, 26, 0.3); | |
| transition: all var(--transition); | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .btn-analyze:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(30, 77, 26, 0.4); } | |
| .btn-analyze:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } | |
| .btn-spinner { display: flex; align-items: center; gap: 8px; } | |
| .btn-spinner svg { width: 18px; height: 18px; animation: spin 1s linear infinite; } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| .btn-clear { | |
| font-family: var(--ff-ui); | |
| font-size: 0.88rem; | |
| color: var(--muted); | |
| background: none; | |
| border: 1px solid var(--border); | |
| padding: 10px 20px; | |
| border-radius: 100px; | |
| cursor: pointer; | |
| transition: all var(--transition); | |
| } | |
| .btn-clear:hover { color: var(--red-tika); border-color: var(--red-tika); } | |
| /* ── Results Section ─────────────────────────────────────────────────────── */ | |
| .results-section { | |
| background: white; | |
| border-top: 1px solid var(--border); | |
| } | |
| .result-hero-card { | |
| display: grid; | |
| grid-template-columns: 280px 1fr; | |
| gap: 3rem; | |
| background: linear-gradient(135deg, var(--parchment) 0%, white 100%); | |
| border: 1px solid var(--border); | |
| border-radius: 24px; | |
| padding: 2.5rem; | |
| margin-bottom: 3rem; | |
| box-shadow: 0 8px 48px var(--shadow); | |
| animation: fadeSlideUp 0.5s ease forwards; | |
| } | |
| @keyframes fadeSlideUp { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .result-leaf-thumb { | |
| position: relative; | |
| } | |
| .result-leaf-thumb img { | |
| width: 100%; | |
| aspect-ratio: 1; | |
| object-fit: cover; | |
| border-radius: 16px; | |
| box-shadow: 0 8px 32px var(--shadow); | |
| } | |
| .confidence-badge { | |
| position: absolute; | |
| bottom: 12px; | |
| right: 12px; | |
| background: var(--deep-green); | |
| color: #fff; | |
| font-family: var(--ff-ui); | |
| font-size: 0.82rem; | |
| font-weight: 600; | |
| padding: 5px 12px; | |
| border-radius: 100px; | |
| } | |
| .result-family { | |
| font-family: var(--ff-ui); | |
| font-size: 0.8rem; | |
| font-weight: 500; | |
| letter-spacing: 0.1em; | |
| text-transform: uppercase; | |
| color: var(--gold); | |
| margin-bottom: 0.5rem; | |
| } | |
| .result-common-name { | |
| font-family: var(--ff-head); | |
| font-size: clamp(1.8rem, 3vw, 2.8rem); | |
| color: var(--deep-green); | |
| line-height: 1.1; | |
| margin-bottom: 0.5rem; | |
| } | |
| .result-botanical { | |
| font-family: var(--ff-body); | |
| font-style: italic; | |
| font-size: 1.1rem; | |
| color: var(--muted); | |
| margin-bottom: 0.5rem; | |
| } | |
| .result-ayurvedic { | |
| font-family: var(--ff-ui); | |
| font-size: 0.88rem; | |
| color: var(--earth); | |
| margin-bottom: 1rem; | |
| } | |
| .result-habitat { | |
| font-size: 0.95rem; | |
| color: var(--muted); | |
| line-height: 1.6; | |
| } | |
| .demo-warning { | |
| margin-top: 1rem; | |
| background: rgba(232, 160, 32, 0.1); | |
| border: 1px solid rgba(232, 160, 32, 0.3); | |
| color: var(--earth); | |
| padding: 10px 16px; | |
| border-radius: var(--radius-sm); | |
| font-family: var(--ff-ui); | |
| font-size: 0.85rem; | |
| } | |
| .demo-warning code { background: rgba(0,0,0,0.06); padding: 2px 6px; border-radius: 4px; } | |
| /* Medicinal Grid */ | |
| .medicinal-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 1.5rem; | |
| margin-bottom: 3rem; | |
| } | |
| .med-card { | |
| background: var(--parchment); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 1.75rem; | |
| animation: fadeSlideUp 0.5s ease forwards; | |
| } | |
| .med-card-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-bottom: 1.25rem; | |
| } | |
| .med-icon { font-size: 1.3rem; } | |
| .med-card-header h3 { | |
| font-family: var(--ff-head); | |
| font-size: 1.1rem; | |
| color: var(--deep-green); | |
| } | |
| .uses-list { | |
| list-style: none; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .uses-list li { | |
| font-size: 0.95rem; | |
| color: var(--ink); | |
| padding-left: 20px; | |
| position: relative; | |
| line-height: 1.5; | |
| } | |
| .uses-list li::before { | |
| content: "✦"; | |
| position: absolute; | |
| left: 0; | |
| color: var(--leaf-green); | |
| font-size: 0.65rem; | |
| top: 5px; | |
| } | |
| .compounds-tags, .parts-tags { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .compound-tag, .part-tag { | |
| font-family: var(--ff-ui); | |
| font-size: 0.78rem; | |
| font-weight: 500; | |
| padding: 5px 13px; | |
| border-radius: 100px; | |
| } | |
| .compound-tag { | |
| background: rgba(58, 122, 48, 0.1); | |
| color: var(--deep-green); | |
| border: 1px solid rgba(58, 122, 48, 0.2); | |
| } | |
| .part-tag { | |
| background: rgba(201, 149, 58, 0.1); | |
| color: var(--earth); | |
| border: 1px solid rgba(201, 149, 58, 0.2); | |
| } | |
| /* Rasa Grid */ | |
| .rasa-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 10px; | |
| } | |
| .rasa-item { | |
| background: white; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| padding: 10px 14px; | |
| } | |
| .rasa-label { | |
| font-family: var(--ff-ui); | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: var(--gold); | |
| display: block; | |
| margin-bottom: 4px; | |
| } | |
| .rasa-value { | |
| font-family: var(--ff-body); | |
| font-size: 0.95rem; | |
| color: var(--deep-green); | |
| } | |
| /* Dosage Card */ | |
| .dosage-text { | |
| font-size: 0.95rem; | |
| color: var(--ink); | |
| margin-bottom: 1rem; | |
| line-height: 1.6; | |
| } | |
| .precaution-box { | |
| margin-top: 1rem; | |
| background: rgba(184, 48, 48, 0.06); | |
| border-left: 3px solid var(--red-tika); | |
| padding: 10px 14px; | |
| border-radius: 0 var(--radius-sm) var(--radius-sm) 0; | |
| font-size: 0.88rem; | |
| color: var(--ink); | |
| line-height: 1.5; | |
| } | |
| /* Top 5 Bars */ | |
| .top5-section { | |
| background: var(--parchment); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| padding: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .top5-title { | |
| font-family: var(--ff-head); | |
| font-size: 1.1rem; | |
| color: var(--deep-green); | |
| margin-bottom: 1.5rem; | |
| } | |
| .top5-bars { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .pred-bar { | |
| display: grid; | |
| grid-template-columns: 180px 1fr 60px; | |
| align-items: center; | |
| gap: 14px; | |
| } | |
| .pred-name { | |
| font-family: var(--ff-ui); | |
| font-size: 0.88rem; | |
| font-weight: 500; | |
| color: var(--ink); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .pred-track { | |
| height: 8px; | |
| background: rgba(0,0,0,0.06); | |
| border-radius: 100px; | |
| overflow: hidden; | |
| } | |
| .pred-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--leaf-green), var(--deep-green)); | |
| border-radius: 100px; | |
| transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .pred-fill.top-fill { | |
| background: linear-gradient(90deg, var(--lime), var(--mid-green)); | |
| } | |
| .pred-pct { | |
| font-family: var(--ff-ui); | |
| font-size: 0.82rem; | |
| color: var(--muted); | |
| text-align: right; | |
| } | |
| .result-actions { | |
| text-align: center; | |
| } | |
| .btn-new-scan { | |
| font-family: var(--ff-ui); | |
| font-size: 0.95rem; | |
| font-weight: 500; | |
| color: var(--mid-green); | |
| background: none; | |
| border: 2px solid var(--mid-green); | |
| padding: 12px 32px; | |
| border-radius: 100px; | |
| cursor: pointer; | |
| transition: all var(--transition); | |
| } | |
| .btn-new-scan:hover { background: var(--mid-green); color: #fff; } | |
| /* ── About Section ──────────────────────────────────────────────────────── */ | |
| .about-section { | |
| background: | |
| linear-gradient(160deg, #f8f4e8 0%, #f1ead7 48%, #e7dcc2 100%); | |
| color: var(--deep-green); | |
| border-top: 1px solid rgba(90, 171, 64, 0.2); | |
| border-bottom: 1px solid rgba(90, 171, 64, 0.2); | |
| } | |
| .about-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 360px; | |
| gap: 4rem; | |
| align-items: center; | |
| } | |
| .about-text .section-label { color: var(--mid-green); } | |
| .about-text h2 { | |
| font-family: var(--ff-head); | |
| font-size: clamp(1.8rem, 3.5vw, 2.8rem); | |
| color: var(--deep-green); | |
| margin-bottom: 1.5rem; | |
| line-height: 1.1; | |
| } | |
| .about-text p { | |
| font-size: 1rem; | |
| color: #395637; | |
| margin-bottom: 1rem; | |
| line-height: 1.75; | |
| } | |
| .about-text strong { color: var(--mid-green); font-weight: 700; } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1rem; | |
| } | |
| .stat-box { | |
| background: rgba(255, 255, 255, 0.72); | |
| border: 1px solid rgba(58, 122, 48, 0.18); | |
| border-radius: var(--radius); | |
| padding: 1.5rem; | |
| text-align: center; | |
| transition: all var(--transition); | |
| } | |
| .stat-box:hover { | |
| background: rgba(255, 255, 255, 0.92); | |
| border-color: rgba(58, 122, 48, 0.35); | |
| } | |
| .stat-number { | |
| display: block; | |
| font-family: var(--ff-head); | |
| font-size: 2.2rem; | |
| color: var(--lime); | |
| line-height: 1.1; | |
| } | |
| .stat-label { | |
| display: block; | |
| font-family: var(--ff-ui); | |
| font-size: 0.78rem; | |
| color: #54704f; | |
| margin-top: 4px; | |
| letter-spacing: 0.04em; | |
| } | |
| /* ── Plants Browser ──────────────────────────────────────────────────────── */ | |
| .plants-section { background: var(--parchment); } | |
| .search-bar-wrap { | |
| max-width: 480px; | |
| margin: 0 auto 2.5rem; | |
| } | |
| .plant-search { | |
| width: 100%; | |
| font-family: var(--ff-ui); | |
| font-size: 1rem; | |
| padding: 12px 20px; | |
| border: 2px solid var(--border); | |
| border-radius: 100px; | |
| background: white; | |
| color: var(--ink); | |
| outline: none; | |
| transition: border-color var(--transition); | |
| } | |
| .plant-search:focus { border-color: var(--mid-green); } | |
| .plant-search::placeholder { color: var(--muted); } | |
| .plant-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
| gap: 1rem; | |
| } | |
| .plant-pill { | |
| background: white; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| padding: 1rem 1.25rem; | |
| cursor: pointer; | |
| transition: all var(--transition); | |
| } | |
| .plant-pill:hover { | |
| border-color: var(--leaf-green); | |
| box-shadow: 0 4px 16px var(--shadow); | |
| transform: translateY(-2px); | |
| } | |
| .plant-pill.active { | |
| background: linear-gradient(135deg, rgba(90, 171, 64, 0.14), rgba(58, 122, 48, 0.08)); | |
| border-color: rgba(58, 122, 48, 0.42); | |
| } | |
| .pill-name { | |
| font-family: var(--ff-head); | |
| font-size: 0.95rem; | |
| color: var(--deep-green); | |
| display: block; | |
| margin-bottom: 3px; | |
| } | |
| .pill-botanical { | |
| font-family: var(--ff-body); | |
| font-style: italic; | |
| font-size: 0.78rem; | |
| color: var(--muted); | |
| display: block; | |
| } | |
| .plant-detail-card { | |
| margin-top: 2rem; | |
| background: white; | |
| border: 1px solid var(--border); | |
| border-radius: 20px; | |
| box-shadow: 0 8px 36px var(--shadow); | |
| overflow: hidden; | |
| } | |
| .plant-detail-head { | |
| padding: 1.8rem 2rem 1.4rem; | |
| background: linear-gradient(160deg, rgba(90, 171, 64, 0.14), rgba(255, 255, 255, 0.94)); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .plant-detail-family { | |
| font-family: var(--ff-ui); | |
| font-size: 0.78rem; | |
| letter-spacing: 0.09em; | |
| text-transform: uppercase; | |
| color: #567050; | |
| } | |
| .plant-detail-name { | |
| font-family: var(--ff-head); | |
| font-size: clamp(1.6rem, 3vw, 2.3rem); | |
| color: var(--deep-green); | |
| margin-top: 0.25rem; | |
| } | |
| .plant-detail-botanical { | |
| font-family: var(--ff-body); | |
| font-style: italic; | |
| color: #456142; | |
| margin-top: 0.2rem; | |
| } | |
| .plant-detail-ayurvedic, | |
| .plant-detail-habitat { | |
| font-family: var(--ff-ui); | |
| font-size: 0.92rem; | |
| color: #496346; | |
| margin-top: 0.45rem; | |
| } | |
| .plant-detail-grid { | |
| padding: 1.5rem 1.5rem 1.8rem; | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 1rem; | |
| } | |
| .plant-detail-block { | |
| background: #f9f5ea; | |
| border: 1px solid rgba(90, 171, 64, 0.16); | |
| border-radius: var(--radius); | |
| padding: 1rem 1.1rem; | |
| } | |
| .plant-detail-block h4 { | |
| font-family: var(--ff-head); | |
| color: var(--deep-green); | |
| font-size: 1.02rem; | |
| margin-bottom: 0.65rem; | |
| } | |
| .plant-detail-block ul { | |
| list-style: none; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.45rem; | |
| } | |
| .plant-detail-block li { | |
| font-size: 0.95rem; | |
| line-height: 1.45; | |
| color: var(--ink); | |
| padding-left: 1rem; | |
| position: relative; | |
| } | |
| .plant-detail-block li::before { | |
| content: "•"; | |
| position: absolute; | |
| left: 0; | |
| color: var(--mid-green); | |
| } | |
| .detail-tags { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .detail-tag { | |
| font-family: var(--ff-ui); | |
| font-size: 0.77rem; | |
| font-weight: 500; | |
| padding: 4px 11px; | |
| border-radius: 999px; | |
| border: 1px solid rgba(58, 122, 48, 0.22); | |
| background: rgba(90, 171, 64, 0.1); | |
| color: var(--deep-green); | |
| } | |
| .detail-tag.parts { | |
| border-color: rgba(201, 149, 58, 0.3); | |
| background: rgba(201, 149, 58, 0.12); | |
| color: #7a5d32; | |
| } | |
| .detail-rasa-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 8px; | |
| } | |
| .detail-rasa-item { | |
| background: #fff; | |
| border: 1px solid rgba(90, 171, 64, 0.2); | |
| border-radius: 8px; | |
| padding: 7px 9px; | |
| } | |
| .detail-rasa-label { | |
| display: block; | |
| font-family: var(--ff-ui); | |
| font-size: 0.68rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| color: #718468; | |
| } | |
| .detail-rasa-value { | |
| font-size: 0.9rem; | |
| color: var(--deep-green); | |
| } | |
| .detail-dosage, | |
| .detail-precautions { | |
| font-size: 0.92rem; | |
| color: #3d563a; | |
| } | |
| .detail-precautions { | |
| margin-top: 0.7rem; | |
| border-left: 3px solid #be4c4c; | |
| padding-left: 0.6rem; | |
| } | |
| /* ── Footer ─────────────────────────────────────────────────────────────── */ | |
| .site-footer { | |
| background: var(--ink); | |
| color: rgba(255,255,255,0.5); | |
| } | |
| .footer-inner { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 3rem 2rem; | |
| text-align: center; | |
| } | |
| .footer-logo { | |
| display: flex; | |
| align-items: baseline; | |
| justify-content: center; | |
| gap: 10px; | |
| margin-bottom: 1rem; | |
| } | |
| .footer-title { | |
| font-family: var(--ff-head); | |
| font-size: 1.5rem; | |
| color: var(--lime); | |
| } | |
| .footer-sub { | |
| font-family: var(--ff-body); | |
| font-style: italic; | |
| color: rgba(255,255,255,0.3); | |
| } | |
| .footer-note, .footer-disclaimer { | |
| font-family: var(--ff-ui); | |
| font-size: 0.82rem; | |
| line-height: 1.7; | |
| margin-bottom: 0.5rem; | |
| } | |
| .footer-note em { color: rgba(255,255,255,0.7); } | |
| /* ── Floating leaf animation ─────────────────────────────────────────────── */ | |
| .floating-leaf { | |
| position: absolute; | |
| width: 24px; | |
| height: 24px; | |
| opacity: 0.06; | |
| animation: floatLeaf linear infinite; | |
| color: var(--leaf-green); | |
| font-size: 20px; | |
| pointer-events: none; | |
| } | |
| @keyframes floatLeaf { | |
| 0% { transform: translateY(100vh) rotate(0deg); opacity: 0; } | |
| 10% { opacity: 0.06; } | |
| 90% { opacity: 0.06; } | |
| 100% { transform: translateY(-100px) rotate(360deg); opacity: 0; } | |
| } | |
| /* ── Responsive ──────────────────────────────────────────────────────────── */ | |
| @media (max-width: 900px) { | |
| .hero { flex-direction: column; min-height: auto; padding-top: 4rem; } | |
| .hero-decoration { display: none; } | |
| .result-hero-card { grid-template-columns: 1fr; } | |
| .result-leaf-thumb img { max-height: 240px; } | |
| .medicinal-grid { grid-template-columns: 1fr; } | |
| .about-grid { grid-template-columns: 1fr; } | |
| .stats-grid { grid-template-columns: repeat(4, 1fr); } | |
| .header-nav { display: none; } | |
| } | |
| @media (max-width: 600px) { | |
| .stats-grid { grid-template-columns: 1fr 1fr; } | |
| .rasa-grid { grid-template-columns: 1fr; } | |
| .pred-bar { grid-template-columns: 120px 1fr 50px; } | |
| .plant-detail-grid { grid-template-columns: 1fr; } | |
| } | |