/* ArogyaKrishi UI polish layer. Loaded after the legacy theme CSS to modernize spacing, typography, and components. */ :root { --ak-ink: #101312; --ak-muted: #5a6a65; --ak-card: rgba(255, 255, 255, 0.82); --ak-card-strong: rgba(255, 255, 255, 0.92); --ak-stroke: rgba(16, 19, 18, 0.12); --ak-shadow: 0 20px 60px rgba(0, 0, 0, 0.18); --ak-accent: #1d7a4e; --ak-accent-2: #f0b429; --ak-danger: #b42318; --ak-radius: 18px; --ak-radius-lg: 26px; } /* Background */ .ak-body { color: var(--ak-ink); background: radial-gradient(900px 500px at 10% 0%, rgba(29, 122, 78, 0.22), transparent 60%), radial-gradient(900px 500px at 90% 10%, rgba(240, 180, 41, 0.18), transparent 60%), radial-gradient(1200px 700px at 60% 110%, rgba(16, 19, 18, 0.10), transparent 60%), linear-gradient(180deg, #f6faf7 0%, #f2f7f4 40%, #eef4f0 100%); min-height: 100vh; } .ak-main { padding: 28px 0 56px; } /* Nav */ .ak-nav { border-bottom: 1px solid rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.55) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .ak-brand { display: inline-flex; align-items: center; gap: 12px; } .ak-brand img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10); } .ak-brand strong { font-weight: 800; letter-spacing: 0.4px; } .ak-nav .nav-link { font-weight: 700; letter-spacing: 0.3px; color: rgba(16, 19, 18, 0.88) !important; } .ak-nav .nav-link:hover { color: rgba(16, 19, 18, 1) !important; } .ak-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; font-weight: 800; font-size: 0.82rem; letter-spacing: 0.2px; border: 1px solid var(--ak-stroke); background: rgba(255, 255, 255, 0.7); } .ak-pill--ok { border-color: rgba(29, 122, 78, 0.28); background: rgba(29, 122, 78, 0.10); color: #14563a; } .ak-pill--off { border-color: rgba(180, 35, 24, 0.22); background: rgba(180, 35, 24, 0.08); color: #7a1c14; } /* Page scaffolding */ .ak-wrap { max-width: 1100px; } .ak-hero { border-radius: var(--ak-radius-lg); padding: 34px 24px; background: linear-gradient(135deg, rgba(29, 122, 78, 0.20), rgba(240, 180, 41, 0.14)), rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: var(--ak-shadow); overflow: hidden; position: relative; } .ak-hero::after { content: ""; position: absolute; inset: -40px -80px auto auto; width: 260px; height: 260px; border-radius: 999px; background: radial-gradient(circle at 30% 30%, rgba(240, 180, 41, 0.45), transparent 65%); filter: blur(2px); transform: rotate(12deg); pointer-events: none; } .ak-title { font-weight: 900; letter-spacing: 0.4px; color: var(--ak-ink); } .ak-subtitle { color: rgba(16, 19, 18, 0.74); font-weight: 700; letter-spacing: 0.3px; } .ak-card { border-radius: var(--ak-radius); border: 1px solid var(--ak-stroke); background: var(--ak-card); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.10); } .ak-card--strong { background: var(--ak-card-strong); } .ak-card-hd { padding: 18px 18px 10px; border-bottom: 1px solid rgba(16, 19, 18, 0.06); } .ak-card-bd { padding: 18px; } .ak-form label { font-weight: 800; letter-spacing: 0.25px; color: rgba(16, 19, 18, 0.82); } .ak-input { border-radius: 14px !important; border: 1px solid rgba(16, 19, 18, 0.16) !important; padding: 12px 12px !important; font-weight: 700 !important; } .ak-drop { border-radius: 18px; border: 1.5px dashed rgba(16, 19, 18, 0.22); background: rgba(255, 255, 255, 0.55); padding: 16px; } .ak-drop strong { font-weight: 900; } .ak-btn { border-radius: 14px !important; font-weight: 900 !important; letter-spacing: 0.4px; padding: 12px 16px !important; } .ak-btn--primary { background: linear-gradient(135deg, var(--ak-accent), #0f5a37) !important; border: 0 !important; box-shadow: 0 14px 34px rgba(29, 122, 78, 0.28); } .ak-btn--primary:hover { filter: brightness(1.03); } .ak-btn--ghost { background: rgba(255, 255, 255, 0.65) !important; border: 1px solid rgba(16, 19, 18, 0.14) !important; color: rgba(16, 19, 18, 0.86) !important; } /* Result layout */ .ak-result-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 18px; } @media (max-width: 992px) { .ak-result-grid { grid-template-columns: 1fr; } } .ak-kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; align-items: start; } .ak-kv dt { color: rgba(16, 19, 18, 0.62); font-weight: 900; } .ak-kv dd { margin: 0; font-weight: 900; letter-spacing: 0.2px; } .ak-meter { height: 10px; border-radius: 999px; border: 1px solid rgba(16, 19, 18, 0.12); background: rgba(16, 19, 18, 0.06); overflow: hidden; } .ak-meter > span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--ak-accent), var(--ak-accent-2)); } .ak-alert { border-radius: 16px; padding: 12px 14px; border: 1px solid rgba(180, 35, 24, 0.22); background: rgba(180, 35, 24, 0.06); color: rgba(122, 28, 20, 0.92); font-weight: 800; } /* Footer */ .ak-footer { color: rgba(16, 19, 18, 0.70); } .ak-footer a { color: rgba(16, 19, 18, 0.86); }