@import url('https://fonts.googleapis.com/css2?family=Tiro+Devanagari+Hindi&family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500&display=swap'); /* ── Design Tokens ──────────────────────────────────────────── */ :root { --sf: #E8480C; --sf-d: #C03800; --sf-l: #FF7940; --sf-p: #FFF1EB; --gn: #1A6B3C; --gn-p: #E9F5E1; --nv: #0C3460; --nv-p: #E6EDF6; --mt: #F7F4EE; --mt-d: #EDE8DF; --ink: #1A1410; --i70: rgba(26,20,16,0.7); --i40: rgba(26,20,16,0.4); --i15: rgba(26,20,16,0.15); --pu: #534AB7; --pu-p: #EEEDFE; --tl: #1D9E75; --tl-p: #E1F5EE; --am: #BA7517; --am-p: #FAEEDA; --rd: #A32D2D; --rd-p: #FCEBEB; --pk: #D4537E; --pk-p: #FBEAF0; /* page accent colours (set per page via ) */ --hero-from: #E8480C; --hero-to: #8B2200; /* page-specific named colours */ --health-color: #7B2260; --legal-color: #1A1460; --women-color: #8B1A4A; --market-color: #7A4A10; --market-from: #3A2005; } /* ── Reset ───────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'DM Sans', sans-serif; background: var(--mt); color: var(--ink); overflow-x: hidden; } /* ── India-flag stripe ───────────────────────────────────────── */ .stripe { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--sf) 33.3%, #fff 33.3%, #fff 66.6%, var(--gn) 66.6%); z-index: 999; } /* ── Navigation ──────────────────────────────────────────────── */ nav { position: fixed; top: 3px; left: 0; right: 0; z-index: 998; background: rgba(247,244,238,0.96); backdrop-filter: blur(14px); border-bottom: 1px solid var(--i15); } .nav-inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; height: 56px; padding: 0 24px; } .nav-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; flex-shrink: 0; } .logo-mark { width: 32px; height: 32px; border-radius: 8px; background: var(--sf); display: flex; align-items: center; justify-content: center; } .logo-en { font-family: 'DM Serif Display', serif; font-size: 15px; color: var(--ink); } .logo-en span { color: var(--sf); } .logo-hi { font-family: 'Tiro Devanagari Hindi', serif; font-size: 9px; color: var(--i70); margin-top: 1px; } .nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; position: relative; } .nav-links::-webkit-scrollbar { display: none; } .nav-links a { font-size: 11.5px; color: var(--i70); text-decoration: none; padding: 5px 9px; border-radius: 6px; white-space: nowrap; transition: all .15s; } .nav-links a:hover, .nav-links a.curr { background: var(--sf-p); color: var(--sf); } .nav-cta { background: var(--sf); color: white; border: none; border-radius: 7px; padding: 7px 14px; font-size: 12px; font-weight: 500; cursor: pointer; font-family: 'DM Sans', sans-serif; margin-left: 10px; flex-shrink: 0; text-decoration: none; display: inline-block; transition: background .2s; } .nav-cta:hover { background: var(--sf-d); } /* Hamburger (index + chatbot) */ .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 0; margin-left: 10px; } .nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: all .3s; } .nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(8px, 8px); } .nav-toggle.active span:nth-child(2) { opacity: 0; } .nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); } .nav-links.mobile { position: absolute; top: 56px; left: 0; right: 0; flex-direction: column; background: white; border-bottom: 1px solid var(--i15); padding: 12px 0; gap: 0; max-height: 0; overflow: hidden; transition: max-height .3s ease; width: 100vw; margin-left: calc(-50vw + 50%); } .nav-links.mobile.show { max-height: 500px; } .nav-links.mobile a { padding: 12px 24px; border-radius: 0; border-bottom: 1px solid var(--i15); } .nav-links.mobile a:last-child { border-bottom: none; } /* ── Page wrapper ─────────────────────────────────────────────── */ .page { padding-top: 59px; } /* ── Back button ──────────────────────────────────────────────── */ .back-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,0.65); text-decoration: none; margin-bottom: 16px; transition: color .15s; } .back-btn:hover { color: white; } .back-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; } /* ── Hero ─────────────────────────────────────────────────────── */ .hero { padding: 60px 5% 52px; position: relative; overflow: hidden; } .hero-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; } /* Per-page hero gradients */ .hero--home { min-height: calc(100vh - 59px); display: flex; align-items: center; background: var(--mt); } .hero--chatbot { background: linear-gradient(135deg, #E8480C, #8B2200); } .hero--panchayat, .hero--schemes { background: linear-gradient(135deg, #0C3460, #040f22); } .hero--crop, .hero--shg { background: linear-gradient(135deg, #1A6B3C, #0a3320); } .hero--health { background: linear-gradient(135deg, #7B2260, #3A0F2E); } .hero--literacy{ background: linear-gradient(135deg, #534AB7, #1e1770); } .hero--market { background: linear-gradient(135deg, #7A4A10, #3A2005); } .hero--disaster{ background: linear-gradient(135deg, #A32D2D, #4A0E0E); } .hero--women { background: linear-gradient(135deg, #8B1A4A, #3A0820); } .hero--legal { background: linear-gradient(135deg, #1A1460, #060420); } .hero--emergency{ background: var(--ink); } /* ── Layouts ─────────────────────────────────────────────────── */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } .two-col--center { align-items: center; } .auto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .auto-grid-sm { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .auto-grid-lg { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .auto-grid-xs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; } /* ── Section ─────────────────────────────────────────────────── */ .sec { padding: 64px 5%; } .sec-in { max-width: 1200px; margin: 0 auto; } .sec--white { background: white; } .sec--dark { background: var(--ink); } .sec--no-top { padding-top: 0; } /* ── Typography ──────────────────────────────────────────────── */ .stag { display: inline-block; font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; } h1 { font-family: 'DM Serif Display', serif; font-size: clamp(36px,5.5vw,64px); line-height: 1.05; letter-spacing: -1px; margin-bottom: 10px; } h2 { font-family: 'DM Serif Display', serif; font-size: clamp(26px,3.5vw,40px); line-height: 1.1; letter-spacing: -.5px; margin-bottom: 10px; } h3 { font-family: 'DM Serif Display', serif; font-size: 21px; line-height: 1.2; margin-bottom: 8px; } .lead { font-size: 16px; color: var(--i70); line-height: 1.78; max-width: 560px; margin-bottom: 28px; } .lead--white { color: rgba(255,255,255,.78); } .lead--white-dim { color: rgba(255,255,255,.75); } .lead--white-faint { color: rgba(255,255,255,.72); } .lead--white-dimmer { color: rgba(255,255,255,.6); } .text-center { text-align: center; } .text-white { color: white; } .text-sf { color: var(--sf); } .text-gn { color: var(--gn); } .text-nv { color: var(--nv); } .text-pu { color: var(--pu); } .text-rd { color: var(--rd); } .text-am { color: var(--am); } .text-pk { color: var(--pk); } .text-health { color: var(--health-color); } .text-legal { color: var(--legal-color); } .text-women { color: var(--women-color); } .font-serif { font-family: 'DM Serif Display', serif; } .font-hindi { font-family: 'Tiro Devanagari Hindi', serif; } .italic { font-style: italic; } .subtext { font-size: 13px; color: var(--i40); font-style: italic; margin-bottom: 24px; } .section-intro { font-size: 15px; color: var(--i70); margin-top: 6px; } /* ── Cards ───────────────────────────────────────────────────── */ .card { background: white; border: 1px solid var(--i15); border-radius: 14px; padding: 22px; transition: all .2s; } .card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(26,20,16,0.08); } .card--link { text-decoration: none; } .card--sf { border-top: 3px solid var(--sf); } .card--nv { border-top: 3px solid var(--nv); } .card--gn { border-top: 3px solid var(--gn); } .card--pu { border-top: 3px solid var(--pu); } .card--am { border-top: 3px solid var(--am); } .card--rd { border-top: 3px solid var(--rd); } .card--health { border-top: 3px solid var(--health-color); } .card--women { border-top: 3px solid var(--women-color); } .card--legal { border-top: 3px solid var(--legal-color); } .card--left-pu { border-left: 4px solid var(--pu); } .card--left-tl { border-left: 4px solid var(--tl); } .card--left-nv { border-left: 4px solid var(--nv); } .card--left-rd { border-left: 4px solid var(--rd); } .card--left-gn { border-left: 4px solid var(--gn); } .card--left-am { border-left: 4px solid var(--am); } .card--dark { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 18px; } .card-row { display: flex; justify-content: space-between; align-items: flex-start; } .cicon { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .cname { font-size: 15px; font-weight: 500; color: var(--ink); margin-bottom: 5px; } .cdesc { font-size: 13px; color: var(--i70); line-height: 1.6; } /* ── Buttons ──────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 7px; border-radius: 9px; padding: 11px 22px; font-size: 14px; font-weight: 500; cursor: pointer; font-family: 'DM Sans', sans-serif; text-decoration: none; transition: all .2s; border: none; } .btn-p { background: var(--sf); color: white; } .btn-p:hover { background: var(--sf-d); } .btn-s { background: transparent; color: var(--ink); border: 1.5px solid var(--i15); } .btn-s:hover { border-color: var(--i40); background: white; } .btn-g { background: var(--gn); color: white; } .btn-g:hover { filter: brightness(.9); } .btn-n { background: var(--nv); color: white; } .btn-n:hover { filter: brightness(.9); } .btn-rd { background: var(--rd); color: white; } .btn-rd:hover { filter: brightness(.9); } .btn-pu { background: var(--pu); color: white; } .btn-pu:hover { filter: brightness(.9); } .btn-am { background: var(--am); color: white; } .btn-am:hover { filter: brightness(.9); } .btn-health { background: var(--health-color); color: white; } .btn-health:hover { filter: brightness(.9); } .btn-women { background: var(--women-color); color: white; } .btn-women:hover { filter: brightness(.9); } .btn-legal { background: var(--legal-color); color: white; } .btn-legal:hover { filter: brightness(.9); } .btn-sm { padding: 8px 16px; font-size: 12px; border-radius: 7px; } .btn-full { width: 100%; justify-content: center; } .btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; } .btn-row--no-top { margin-top: 0; } /* ── Badges ──────────────────────────────────────────────────── */ .bdg { display: inline-block; font-size: 10.5px; font-weight: 500; padding: 3px 10px; border-radius: 20px; } .bdg--hero { background: rgba(255,255,255,.15); color: white; margin-bottom: 14px; display: inline-block; } .bdg--hero-nv { background: rgba(255,255,255,.12); color: white; margin-bottom: 14px; display: inline-block; } .bdg--hero-em { background: rgba(255,80,80,.2); color: #FF8080; margin-bottom: 14px; display: inline-block; } .bdg-sf { background: var(--sf-p); color: var(--sf); } .bdg-gn { background: var(--gn-p); color: var(--gn); } .bdg-nv { background: var(--nv-p); color: var(--nv); } .bdg-pu { background: var(--pu-p); color: var(--pu); } .bdg-am { background: var(--am-p); color: var(--am); } .bdg-tl { background: var(--tl-p); color: var(--tl); } .bdg-rd { background: var(--rd-p); color: var(--rd); } .bdg-pk { background: var(--pk-p); color: var(--pk); } /* ── Hero Stats Row ──────────────────────────────────────────── */ .stat-row { display: flex; gap: 28px; flex-wrap: wrap; padding-top: 24px; margin-top: 24px; border-top: 1px solid rgba(255,255,255,.2); } .stat-num { font-family: 'DM Serif Display', serif; font-size: 28px; color: white; line-height: 1; } .stat-lbl { font-size: 11px; color: rgba(255,255,255,.45); margin-top: 2px; } /* Home page stat row (dark ink) */ .stat-row--ink { border-top: 1px solid var(--i15); } .stat-row--ink .stat-num { color: var(--ink); } .stat-row--ink .stat-lbl { color: var(--i40); } /* ── Step List ───────────────────────────────────────────────── */ .step-list { display: flex; flex-direction: column; } .step { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--i15); } .step:last-child { border: none; } .step--sm { padding: 10px 0; } .snum { font-family: 'DM Serif Display', serif; font-size: 24px; color: var(--i15); line-height: 1; flex-shrink: 0; width: 32px; font-style: italic; } .stitle { font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 3px; } .stitle--sm { font-size: 13px; } .sdesc { font-size: 13px; color: var(--i70); line-height: 1.6; } .sdesc--sm { font-size: 12px; } /* ── Feature List ────────────────────────────────────────────── */ .feat-list { display: flex; flex-direction: column; gap: 10px; } .fi { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; background: white; border: 1px solid var(--i15); border-radius: 10px; } .fd { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; } .ft { font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 2px; } .fb { font-size: 12px; color: var(--i70); line-height: 1.55; } /* ── Form Inputs ─────────────────────────────────────────────── */ .ig { margin-bottom: 12px; } .ig label { display: block; font-size: 12px; color: var(--i70); margin-bottom: 5px; font-weight: 500; } .ig select, .ig input, .ig textarea { width: 100%; border: 1px solid var(--i15); border-radius: 8px; padding: 9px 11px; font-size: 13px; font-family: 'DM Sans', sans-serif; color: var(--ink); background: white; outline: none; } .ig select:focus, .ig input:focus, .ig textarea:focus { border-color: var(--sf); } .ig textarea { min-height: 80px; resize: vertical; } .ig input[type="range"] { width: 100%; margin-top: 6px; } /* ── Info / Alert Boxes ──────────────────────────────────────── */ .info-box { border-radius: 14px; padding: 20px; margin-top: 16px; } .info-box--pu { background: var(--pu-p); } .info-box--gn { background: var(--gn-p); border: 1px solid var(--gn); } .info-box--am { background: var(--am-p); border-radius: 16px; padding: 28px; } .info-box--nv { background: var(--nv-p); border-radius: 12px; padding: 16px; } .info-box--pk { background: var(--pk-p); border-radius: 14px; padding: 20px; } .info-box--sf { background: var(--sf-p); border-radius: 12px; padding: 16px; } .info-box--sf-left { background: var(--sf-p); border-left: 3px solid var(--sf); padding: 12px; border-radius: 0 8px 8px 0; margin-bottom: 12px; } .info-box--legal-warn { background: rgba(255,165,0,.12); border: 1px solid rgba(255,165,0,.25); border-radius: 10px; padding: 12px 16px; margin-top: 16px; font-size: 13px; color: rgba(255,200,100,.9); max-width: 560px; } .info-box-title { font-size: 12px; font-weight: 500; margin-bottom: 4px; } .info-box-title--sf { color: var(--sf); } .info-box-title--nv { color: var(--nv); } .info-box-title--gn { color: var(--gn); } .info-box-body { font-size: 13px; color: var(--i70); line-height: 1.6; } .info-box-body--sf { font-size: 14px; color: var(--sf); line-height: 1.7; margin-bottom: 16px; } /* Alert rows (disaster) */ .alert-row { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .alert-item { border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; border-width: 1px; border-style: solid; } .alert-item--gn { background: var(--gn-p); border-color: var(--gn); } .alert-item--am { background: var(--am-p); border-color: var(--am); } .alert-item--nv { background: var(--nv-p); border-color: var(--nv); } .alert-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .alert-title { font-size: 13px; font-weight: 500; } .alert-desc { font-size: 12px; color: var(--i70); } /* ── Chatbot UI ──────────────────────────────────────────────── */ .chat-wrap { background: white; border: 1px solid var(--i15); border-radius: 16px; overflow: hidden; } .chat-header { background: var(--sf); padding: 14px 18px; } .chat-header-title { color: white; font-weight: 500; font-size: 14px; } .chat-header-sub { color: rgba(255,255,255,.65); font-size: 11px; } .chat-msgs { padding: 14px; min-height: 150px; display: flex; flex-direction: column; gap: 8px; } .chat-bubble { max-width: 82%; padding: 10px 13px; border-radius: 10px; font-size: 13px; line-height: 1.5; } .chat-bubble--bot { border-bottom-left-radius: 3px; background: var(--mt); color: var(--ink); } .chat-bubble--user { border-bottom-right-radius: 3px; background: var(--sf); color: white; align-self: flex-end; margin-left: auto; } .chat-input-row { padding: 10px 14px; border-top: 1px solid var(--i15); display: flex; gap: 6px; } .chat-input { flex: 1; border: 1px solid var(--i15); border-radius: 7px; padding: 8px 11px; font-size: 13px; font-family: 'DM Sans', sans-serif; outline: none; color: var(--ink); } .chat-send { background: var(--sf); color: white; border: none; border-radius: 7px; padding: 0 14px; cursor: pointer; font-size: 13px; font-weight: 500; font-family: 'DM Sans', sans-serif; } .chat-mic { width: 34px; height: 34px; background: var(--mt); border: 1px solid var(--i15); border-radius: 7px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } /* ── Panel / Dashboard tile ──────────────────────────────────── */ .panel { background: white; border: 1px solid var(--i15); border-radius: 14px; overflow: hidden; margin-top: 16px; } .panel-header { padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; } .panel-header--nv { background: var(--nv); } .panel-header--gn { background: var(--gn); } .panel-header--sf { background: var(--sf); } .panel-header-title { color: white; font-weight: 500; font-size: 14px; } .panel-header-sub { font-size: 11px; color: rgba(255,255,255,.5); } .panel-body { padding: 14px; } .panel-footer { padding: 14px 18px; border-top: 1px solid var(--i15); display: flex; gap: 8px; } .tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--i15); } .tile { background: white; padding: 16px; } .tile-label { font-size: 10px; color: var(--i40); text-transform: uppercase; letter-spacing: .05em; } .tile-value { font-size: 18px; font-weight: 500; margin: 4px 0; } .tile-desc { font-size: 12px; color: var(--i70); } .tile-value--gn { color: var(--gn); } .tile-value--sf { color: var(--sf); } .tile-value--nv { color: var(--nv); } .tile-value--am { color: var(--am); } /* ── Mini stat (crop weather + mandi) ───────────────────────── */ .mini-stat { border-radius: 10px; padding: 12px; } .mini-stat--gn { background: var(--gn-p); } .mini-stat--am { background: var(--am-p); } .mini-label { font-size: 10px; text-transform: uppercase; } .mini-label--gn { color: var(--gn); } .mini-label--am { color: var(--am); } .mini-value { font-size: 17px; font-weight: 500; margin: 3px 0; } .mini-value--gn { color: var(--gn); } .mini-value--am { color: var(--am); } .mini-desc { font-size: 12px; color: var(--i70); } /* ── Calc / Result output ─────────────────────────────────────── */ .calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; } .calc-tile { background: white; border-radius: 8px; padding: 10px; } .calc-label { font-size: 10px; color: var(--i40); } .calc-value { font-size: 16px; font-weight: 500; } .calc-tile--bg { background: var(--mt); border-radius: 8px; padding: 10px; } .calc-value--gn { color: var(--gn); } .calc-value--sf { color: var(--sf); } .calc-value--nv { color: var(--nv); } .calc-value--ink { color: var(--ink); } /* ── SOS button ──────────────────────────────────────────────── */ .sos-box { background: var(--rd-p); border-radius: 12px; padding: 18px; margin-top: 14px; text-align: center; } .sos-title { font-size: 13px; font-weight: 500; color: var(--rd); margin-bottom: 8px; } .sos-desc { font-size: 12px; color: var(--i70); margin-bottom: 14px; } .sos-btn { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background: var(--rd); margin: 0 auto; cursor: pointer; border: 4px solid rgba(163,45,45,.25); } .sos-btn span { color: white; font-weight: 500; font-size: 14px; text-align: center; line-height: 1.3; } /* ── RTI output ──────────────────────────────────────────────── */ .rti-out { background: var(--mt); border: 1px solid var(--i15); border-radius: 10px; padding: 14px; font-size: 12px; line-height: 1.8; white-space: pre-wrap; color: var(--ink); border-left: 3px solid var(--legal-color); } /* ── Footer logo ─────────────────────────────────────────────── */ .foot-logo-wrap { display: flex; align-items: center; gap: 9px; } .foot-logo-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--sf); display: flex; align-items: center; justify-content: center; } .foot-logo-name { font-family: 'DM Serif Display', serif; font-size: 15px; color: white; } .foot-logo-name span { color: var(--sf); } /* ── Footer ──────────────────────────────────────────────────── */ footer { background: var(--ink); padding: 52px 5% 28px; color: white; } footer.footer-dark { background: #111; } .foot-in { max-width: 1200px; margin: 0 auto; } .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 36px; } .foot-brand p { font-size: 12px; color: rgba(255,255,255,.4); line-height: 1.7; margin-top: 10px; max-width: 220px; } .foot-hi { font-family: 'Tiro Devanagari Hindi', serif; font-size: 12px; color: rgba(255,255,255,.3); margin-top: 12px; } .foot-col h4 { font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.3); margin-bottom: 12px; } .foot-col a { display: block; font-size: 12px; color: rgba(255,255,255,.55); text-decoration: none; margin-bottom: 7px; transition: color .15s; } .foot-col a:hover { color: white; } .foot-bot { border-top: 1px solid rgba(255,255,255,.08); padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .foot-bot p { font-size: 11px; color: rgba(255,255,255,.25); } .foot-bot a { font-size: 12px; color: rgba(255,255,255,.4); text-decoration: none; } /* Emergency page mini-footer */ .foot-mini { padding: 20px 0; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .foot-mini p { font-size: 11px; color: rgba(255,255,255,.25); } .section-divider { padding-top: 40px; border-top: 1px solid rgba(255,255,255,.08); } .emergency-note { font-size: 12px; color: rgba(255,255,255,.55); line-height: 1.75; } .emergency-tile { border-radius: 12px; padding: 20px; cursor: pointer; border: 1px solid rgba(255,255,255,.08); background: var(--emergency-bg, rgba(12,52,96,0.75)); transition: all .2s; } .emergency-tile:hover { transform: translateY(-2px); } .emergency-tile .emergency-description { font-size: 11px; color: rgba(255,255,255,.65); } /* ── Animations ──────────────────────────────────────────────── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .fu { animation: fadeUp .55s ease both; } .fu2 { animation: fadeUp .55s .12s ease both; } .fu3 { animation: fadeUp .55s .24s ease both; } /* ── Helpers ─────────────────────────────────────────────────── */ .mt-4 { margin-top: 4px; } .mt-6 { margin-top: 6px; } .mt-8 { margin-top: 8px; } .mt-10 { margin-top: 10px; } .mt-12 { margin-top: 12px; } .mt-14 { margin-top: 14px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-28 { margin-top: 28px; } .mt-44 { margin-top: 44px; } .mt-48 { margin-top: 48px; } .mb-4 { margin-bottom: 4px; } .mb-6 { margin-bottom: 6px; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-14 { margin-bottom: 14px; } .mb-16 { margin-bottom: 16px; } .mb-18 { margin-bottom: 18px; } .mb-24 { margin-bottom: 24px; } .mb-44 { margin-bottom: 44px; } .flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-28 { gap: 28px; } .w-full { width: 100%; } .hidden { display: none; } /* ── Responsive ──────────────────────────────────────────────── */ @media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } } @media (max-width: 640px) { .sec { padding: 48px 5%; } .hero { padding: 48px 5% 40px; } .foot-grid { grid-template-columns: 1fr 1fr; } .nav-toggle { display: flex; } .nav-links:not(.mobile) { display: none; } .nav-links.mobile { display: flex; } } /* ============================================================ Crop Disease AI Scanner — added block All classes used in the disease scanner section of crop.html ============================================================ */ /* ── Disease section wrapper ─────────────────────────────────── */ .disease-section { background: linear-gradient(160deg, #0d2b14 0%, #1a3d1f 50%, #0a2010 100%); padding: 64px 5%; position: relative; overflow: hidden; } .disease-section::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 50%, rgba(26,107,60,0.15) 0%, transparent 60%), radial-gradient(circle at 80% 20%, rgba(29,158,117,0.10) 0%, transparent 50%); pointer-events: none; } .disease-section .sec-in { position: relative; z-index: 1; } /* ── Disease header ──────────────────────────────────────────── */ .disease-header { text-align: center; margin-bottom: 44px; } .disease-header h2 { color: white; margin-bottom: 8px; } .disease-header p { font-size: 15px; color: rgba(255,255,255,.55); max-width: 520px; margin: 0 auto; line-height: 1.7; } /* ── Animated pill badge ─────────────────────────────────────── */ .stag-pill { display: inline-flex; align-items: center; gap: 7px; background: rgba(29,158,117,0.18); border: 1px solid rgba(29,158,117,0.35); color: #4ecca3; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px; border-radius: 20px; margin-bottom: 16px; } .stag-pill span { width: 6px; height: 6px; border-radius: 50%; background: #4ecca3; display: inline-block; animation: pdot 1.8s ease infinite; } @keyframes pdot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } } /* ── Upload zone ─────────────────────────────────────────────── */ .upload-zone { border: 2px dashed rgba(29,158,117,0.4); border-radius: 18px; padding: 44px 32px; text-align: center; cursor: pointer; transition: all .25s; background: rgba(255,255,255,.03); position: relative; } .upload-zone:hover, .upload-zone.drag-over { border-color: #1D9E75; background: rgba(29,158,117,.07); transform: translateY(-2px); } .upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .upload-zone h3 { color: white; font-size: 18px; margin-bottom: 6px; } .upload-zone p { font-size: 13px; color: rgba(255,255,255,.4); margin-bottom: 16px; } .upload-icon { width: 64px; height: 64px; border-radius: 16px; background: rgba(29,158,117,.15); border: 1px solid rgba(29,158,117,.25); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; transition: transform .2s; } .upload-zone:hover .upload-icon { transform: scale(1.08); } .upload-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,.3); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); padding: 5px 12px; border-radius: 20px; } /* ── Camera capture button ───────────────────────────────────── */ .capture-btn { display: inline-flex; align-items: center; gap: 7px; background: rgba(29,158,117,.15); border: 1px solid rgba(29,158,117,.3); color: #4ecca3; font-size: 12px; font-weight: 500; padding: 8px 16px; border-radius: 8px; cursor: pointer; margin-top: 10px; transition: all .2s; font-family: 'DM Sans', sans-serif; } .capture-btn:hover { background: rgba(29,158,117,.25); } /* ── Language strip ──────────────────────────────────────────── */ .lang-strip { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 16px; } .lang-tag { font-size: 10px; color: rgba(255,255,255,.3); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); padding: 2px 8px; border-radius: 10px; } /* ── Image preview ───────────────────────────────────────────── */ .img-preview-wrap { position: relative; border-radius: 14px; overflow: hidden; border: 2px solid rgba(29,158,117,.3); background: rgba(0,0,0,.3); } .img-preview-wrap img { width: 100%; max-height: 300px; object-fit: cover; display: block; } .img-preview-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 50%); display: flex; align-items: flex-end; padding: 16px; } .img-preview-name { font-size: 12px; color: rgba(255,255,255,.7); } .img-change-btn { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.2); color: white; font-size: 11px; padding: 5px 10px; border-radius: 6px; cursor: pointer; transition: all .2s; font-family: 'DM Sans', sans-serif; } .img-change-btn:hover { background: rgba(0,0,0,.9); } /* ── Analyse button ──────────────────────────────────────────── */ .analyse-btn { width: 100%; padding: 14px; border-radius: 12px; border: none; background: linear-gradient(135deg, #1D9E75, #1a6b3c); color: white; font-size: 15px; font-weight: 500; font-family: 'DM Sans', sans-serif; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px; transition: all .25s; margin-top: 14px; box-shadow: 0 4px 18px rgba(29,158,117,.3); } .analyse-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(29,158,117,.4); } .analyse-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; } .btn-spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.3); border-top-color: white; border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Result card ─────────────────────────────────────────────── */ .result-card { background: rgba(255,255,255,.04); border: 1px solid rgba(29,158,117,.25); border-radius: 18px; overflow: hidden; animation: slideIn .4s ease; } @keyframes slideIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .result-header { background: linear-gradient(135deg, rgba(29,158,117,.2), rgba(26,107,60,.15)); border-bottom: 1px solid rgba(29,158,117,.2); padding: 16px 20px; display: flex; align-items: center; gap: 12px; } .result-icon { width: 38px; height: 38px; border-radius: 10px; background: rgba(29,158,117,.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px; } .result-title { font-size: 15px; font-weight: 500; color: white; } .result-subtitle { font-size: 11px; color: rgba(255,255,255,.45); margin-top: 2px; } .result-body { padding: 20px; } /* ── Severity badges ─────────────────────────────────────────── */ .severity-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 20px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; } .severity-high { background: rgba(163,45,45,.25); color: #ff8080; border: 1px solid rgba(163,45,45,.4); } .severity-medium { background: rgba(186,117,23,.25); color: #ffc068; border: 1px solid rgba(186,117,23,.4); } .severity-low { background: rgba(29,158,117,.25); color: #4ecca3; border: 1px solid rgba(29,158,117,.4); } .severity-none { background: rgba(26,107,60,.25); color: #6de3a0; border: 1px solid rgba(26,107,60,.4); } /* ── Disease name & scientific name ──────────────────────────── */ .disease-name { font-family: 'DM Serif Display', serif; font-size: 22px; color: white; margin-bottom: 6px; line-height: 1.2; } .disease-sci { font-size: 12px; color: rgba(255,255,255,.35); font-style: italic; margin-bottom: 16px; } /* ── Result inner sections ───────────────────────────────────── */ .result-section { margin-bottom: 18px; } .result-section-title { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #4ecca3; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } .result-section-title::after { content: ''; flex: 1; height: 1px; background: rgba(29,158,117,.2); } .result-section p { font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.7; } /* ── Treatment steps ─────────────────────────────────────────── */ .treatment-steps { display: flex; flex-direction: column; gap: 8px; } .treatment-step { display: flex; gap: 10px; align-items: flex-start; background: rgba(255,255,255,.04); border-radius: 9px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.06); } .step-num { width: 22px; height: 22px; border-radius: 50%; background: rgba(29,158,117,.2); color: #4ecca3; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .step-text { font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.55; } /* ── Confidence bar ──────────────────────────────────────────── */ .confidence-wrap { margin-bottom: 18px; } .confidence-label { font-size: 12px; color: rgba(255,255,255,.45); margin-bottom: 6px; display: flex; justify-content: space-between; } .confidence-bar { height: 6px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; } .confidence-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #1D9E75, #4ecca3); width: 0; transition: width 1s ease; } /* ── Crop chips ──────────────────────────────────────────────── */ .crop-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .crop-chip { font-size: 11px; color: rgba(255,255,255,.55); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); padding: 3px 10px; border-radius: 20px; } /* ── Urgent warning box ──────────────────────────────────────── */ .urgent-box { background: rgba(163,45,45,.12); border: 1px solid rgba(163,45,45,.3); border-radius: 10px; padding: 12px 14px; margin-top: 4px; display: flex; gap: 10px; align-items: flex-start; } .urgent-box-icon { font-size: 16px; flex-shrink: 0; } .urgent-box-text { font-size: 12px; color: #ff9090; line-height: 1.6; } /* ── Error state ─────────────────────────────────────────────── */ .result-error { background: rgba(163,45,45,.1); border: 1px solid rgba(163,45,45,.3); border-radius: 12px; padding: 16px; text-align: center; color: #ff9090; font-size: 13px; } .result-error-icon { font-size: 20px; margin-bottom: 8px; } .result-error-sub { font-size: 11px; margin-top: 4px; opacity: .6; } /* ── Tips card (sidebar) ─────────────────────────────────────── */ .tips-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 20px; } .tips-card h3 { color: white; font-size: 17px; margin-bottom: 14px; } .tip-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06); } .tip-item:last-child { border: none; padding-bottom: 0; } .tip-icon { font-size: 18px; flex-shrink: 0; width: 28px; } .tip-text { font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.55; } .tip-text strong { color: rgba(255,255,255,.85); display: block; margin-bottom: 2px; font-size: 13px; } /* ── Upload area center wrapper ──────────────────────────────── */ .upload-camera-row { text-align: center; } /* ── Responsive adjustments for disease section ──────────────── */ @media (max-width: 640px) { .disease-section { padding: 48px 5%; } .upload-zone { padding: 32px 20px; } }