Spaces:
Running on Zero
Running on Zero
| /* ───────────────────────────────────────────────────────────────── | |
| GharScan — styles.css | |
| Concrete-grey inspection report aesthetic. | |
| Mobile-first. Custom UI for Off-Brand badge. | |
| ───────────────────────────────────────────────────────────────── */ | |
| /* ── Reset & base ─────────────────────────────────────────────── */ | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| :root { | |
| --bg-primary: #0f1114; | |
| --bg-card: #181b20; | |
| --bg-elevated: #20242b; | |
| --bg-input: #1a1d23; | |
| --border: #2a2f38; | |
| --border-subtle: #1e2229; | |
| --text-primary: #e8eaed; | |
| --text-secondary: #8b9099; | |
| --text-muted: #555d6b; | |
| --text-mono: #6fb3e0; | |
| --accent-blue: #3b82f6; | |
| --accent-green: #22c55e; | |
| --accent-yellow: #f59e0b; | |
| --accent-orange: #ef4444; | |
| --accent-dark-red: #7f1d1d; | |
| --severity-1: #22c55e; | |
| --severity-2: #84cc16; | |
| --severity-3: #f59e0b; | |
| --severity-4: #ef4444; | |
| --severity-5: #991b1b; | |
| --font-sans: 'Inter', system-ui, sans-serif; | |
| --font-mono: 'IBM Plex Mono', 'Courier New', monospace; | |
| --radius-sm: 6px; | |
| --radius-md: 10px; | |
| --radius-lg: 14px; | |
| --shadow-card: 0 2px 12px rgba(0,0,0,0.4); | |
| } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| font-family: var(--font-sans); | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| min-height: 100vh; | |
| font-size: 15px; | |
| line-height: 1.55; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| .mono { font-family: var(--font-mono); } | |
| .hidden { display: none ; } | |
| /* ── Header ──────────────────────────────────────────────────── */ | |
| .site-header { | |
| background: var(--bg-card); | |
| border-bottom: 1px solid var(--border); | |
| padding: 14px 16px; | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .header-inner { | |
| max-width: 640px; | |
| margin: 0 auto; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .brand { display: flex; align-items: center; gap: 10px; } | |
| .brand-icon { font-size: 26px; } | |
| .brand-name { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; } | |
| .brand-tagline { font-size: 11px; color: var(--text-secondary); margin-top: 1px; } | |
| .model-badge { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| border-radius: 20px; | |
| padding: 4px 10px; | |
| font-size: 11px; | |
| color: var(--text-mono); | |
| font-family: var(--font-mono); | |
| } | |
| .model-dot { | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 50%; | |
| background: var(--accent-green); | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.4; } | |
| } | |
| /* ── Main layout ─────────────────────────────────────────────── */ | |
| .app-main { | |
| max-width: 640px; | |
| margin: 0 auto; | |
| padding: 20px 16px 60px; | |
| } | |
| .section-label { | |
| font-size: 11px; | |
| font-weight: 500; | |
| color: var(--text-mono); | |
| letter-spacing: .06em; | |
| margin-bottom: 10px; | |
| font-family: var(--font-mono); | |
| } | |
| /* ── Capture section ──────────────────────────────────────────── */ | |
| .capture-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| margin-bottom: 14px; | |
| } | |
| .capture-preview { | |
| width: 100%; | |
| aspect-ratio: 4/3; | |
| background: var(--bg-input); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| overflow: hidden; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .capture-placeholder { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 10px; | |
| color: var(--text-muted); | |
| padding: 20px; | |
| text-align: center; | |
| } | |
| .placeholder-icon { font-size: 40px; } | |
| .capture-placeholder p { font-size: 13px; max-width: 240px; } | |
| .preview-image { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .capture-actions { | |
| display: flex; | |
| gap: 10px; | |
| padding: 14px; | |
| } | |
| .language-toggle { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 0 14px 14px; | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| } | |
| .lang-btn { | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| color: var(--text-secondary); | |
| border-radius: 4px; | |
| padding: 3px 10px; | |
| font-size: 12px; | |
| cursor: pointer; | |
| } | |
| .lang-btn.active { | |
| background: var(--accent-blue); | |
| border-color: var(--accent-blue); | |
| color: #fff; | |
| } | |
| /* ── Buttons ──────────────────────────────────────────────────── */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 7px; | |
| padding: 10px 16px; | |
| border-radius: var(--radius-md); | |
| font-size: 14px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| border: none; | |
| transition: background 0.15s, opacity 0.15s; | |
| text-decoration: none; | |
| white-space: nowrap; | |
| flex: 1; | |
| } | |
| .btn-primary { | |
| background: var(--accent-blue); | |
| color: #fff; | |
| } | |
| .btn-primary:hover { background: #2563eb; } | |
| .btn-secondary { | |
| background: var(--bg-elevated); | |
| color: var(--text-primary); | |
| border: 1px solid var(--border); | |
| } | |
| .btn-secondary:hover { background: #252930; } | |
| .btn-analyze { | |
| width: 100%; | |
| padding: 14px; | |
| font-size: 15px; | |
| font-weight: 600; | |
| background: linear-gradient(135deg, #2563eb, #1d4ed8); | |
| color: #fff; | |
| border-radius: var(--radius-md); | |
| margin-bottom: 0; | |
| cursor: pointer; | |
| border: none; | |
| transition: opacity 0.15s, transform 0.1s; | |
| } | |
| .btn-analyze:disabled { opacity: 0.4; cursor: not-allowed; } | |
| .btn-analyze:not(:disabled):hover { opacity: 0.9; } | |
| .btn-full { width: 100%; margin-top: 12px; } | |
| /* ── Loading section ──────────────────────────────────────────── */ | |
| .loading-section { margin-top: 24px; } | |
| .loading-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| padding: 28px 20px; | |
| text-align: center; | |
| } | |
| .loading-spinner { | |
| width: 44px; | |
| height: 44px; | |
| border: 3px solid var(--border); | |
| border-top-color: var(--accent-blue); | |
| border-radius: 50%; | |
| animation: spin 0.8s linear infinite; | |
| margin: 0 auto 16px; | |
| } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| .loading-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; } | |
| .loading-sub { font-size: 12px; color: var(--text-mono); margin-bottom: 20px; } | |
| .loading-steps { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| text-align: left; | |
| } | |
| .load-step { | |
| padding: 10px 14px; | |
| border-radius: var(--radius-sm); | |
| font-size: 13px; | |
| color: var(--text-muted); | |
| background: var(--bg-elevated); | |
| border-left: 3px solid transparent; | |
| transition: all 0.3s; | |
| } | |
| .load-step.active { | |
| color: var(--text-primary); | |
| border-color: var(--accent-blue); | |
| } | |
| .load-step.done { | |
| color: var(--accent-green); | |
| border-color: var(--accent-green); | |
| } | |
| /* ── Report section ──────────────────────────────────────────── */ | |
| .report-section { margin-top: 8px; } | |
| .structural-banner { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 12px; | |
| border-radius: var(--radius-md); | |
| padding: 14px 16px; | |
| margin-bottom: 12px; | |
| font-size: 14px; | |
| } | |
| .structural-banner.danger { | |
| background: rgba(127,29,29,0.25); | |
| border: 1px solid #7f1d1d; | |
| color: #fca5a5; | |
| } | |
| .structural-banner.safe { | |
| background: rgba(21,128,61,0.2); | |
| border: 1px solid #166534; | |
| color: #86efac; | |
| } | |
| .banner-icon { font-size: 20px; flex-shrink: 0; } | |
| .report-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| padding: 20px; | |
| margin-bottom: 12px; | |
| box-shadow: var(--shadow-card); | |
| } | |
| .report-header { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| margin-bottom: 16px; | |
| gap: 12px; | |
| } | |
| .defect-label { | |
| font-size: 18px; | |
| font-weight: 700; | |
| display: block; | |
| line-height: 1.2; | |
| } | |
| .defect-type-sub { | |
| font-size: 11px; | |
| color: var(--text-secondary); | |
| display: block; | |
| margin-top: 3px; | |
| } | |
| .severity-chip { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| background: var(--bg-elevated); | |
| border-radius: var(--radius-md); | |
| padding: 8px 14px; | |
| min-width: 70px; | |
| flex-shrink: 0; | |
| border: 2px solid var(--border); | |
| } | |
| .severity-num { font-size: 22px; font-weight: 700; font-family: var(--font-mono); line-height: 1; } | |
| .severity-word { font-size: 10px; color: var(--text-secondary); margin-top: 3px; text-transform: uppercase; letter-spacing: .04em; } | |
| /* Severity meter */ | |
| .severity-meter-wrap { margin-bottom: 16px; } | |
| .severity-track { | |
| height: 8px; | |
| background: var(--bg-elevated); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| margin-bottom: 4px; | |
| } | |
| .severity-fill { | |
| height: 100%; | |
| border-radius: 4px; | |
| transition: width 0.6s cubic-bezier(.22,.68,0,1.2), background 0.4s; | |
| } | |
| .severity-ticks { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 10px; | |
| color: var(--text-muted); | |
| font-family: var(--font-mono); | |
| } | |
| .report-divider { height: 1px; background: var(--border-subtle); margin: 14px 0; } | |
| .report-row { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| margin-bottom: 12px; | |
| } | |
| .row-key { | |
| font-size: 10px; | |
| color: var(--text-mono); | |
| letter-spacing: .08em; | |
| font-weight: 500; | |
| } | |
| .row-val { font-size: 14px; color: var(--text-primary); line-height: 1.5; } | |
| .action-highlight { | |
| background: rgba(59,130,246,0.08); | |
| border: 1px solid rgba(59,130,246,0.2); | |
| border-radius: var(--radius-md); | |
| padding: 12px; | |
| margin-bottom: 12px; | |
| } | |
| .action-text { font-weight: 500; color: #93c5fd; } | |
| .urgency-text { font-weight: 500; } | |
| /* Cost block */ | |
| .cost-block { | |
| background: var(--bg-elevated); | |
| border-radius: var(--radius-md); | |
| padding: 14px; | |
| margin-bottom: 12px; | |
| } | |
| .cost-main { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 6px; | |
| margin-bottom: 8px; | |
| } | |
| .cost-rupee { font-size: 22px; font-weight: 700; color: var(--accent-green); font-family: var(--font-mono); } | |
| .cost-range { font-size: 20px; font-weight: 700; color: var(--accent-green); font-family: var(--font-mono); } | |
| .professional-line { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| } | |
| /* Monsoon warning */ | |
| .monsoon-warning { | |
| background: rgba(234,179,8,0.1); | |
| border: 1px solid rgba(234,179,8,0.3); | |
| border-radius: var(--radius-sm); | |
| padding: 10px 14px; | |
| font-size: 13px; | |
| color: #fde68a; | |
| margin-top: 10px; | |
| } | |
| /* Liability banner (Watch-Out 2) */ | |
| .liability-banner { | |
| display: flex; | |
| gap: 10px; | |
| background: rgba(239,68,68,0.1); | |
| border: 1px solid rgba(239,68,68,0.3); | |
| border-radius: var(--radius-md); | |
| padding: 14px; | |
| font-size: 12px; | |
| color: #fca5a5; | |
| margin-bottom: 10px; | |
| line-height: 1.5; | |
| } | |
| .disclaimer-card { | |
| background: var(--bg-elevated); | |
| border-left: 3px solid var(--accent-yellow); | |
| border-radius: 0 var(--radius-sm) var(--radius-sm) 0; | |
| padding: 10px 14px; | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| margin-bottom: 10px; | |
| line-height: 1.5; | |
| } | |
| /* ── Error state ──────────────────────────────────────────────── */ | |
| .error-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| padding: 32px 20px; | |
| text-align: center; | |
| } | |
| .error-icon { font-size: 40px; } | |
| .error-title { font-size: 17px; font-weight: 600; margin: 12px 0 6px; } | |
| .error-msg { font-size: 14px; color: var(--text-secondary); margin-bottom: 20px; } | |
| /* ── Footer ───────────────────────────────────────────────────── */ | |
| .site-footer { | |
| text-align: center; | |
| padding: 24px 16px; | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| border-top: 1px solid var(--border-subtle); | |
| line-height: 1.8; | |
| } | |
| .site-footer a { color: var(--text-secondary); } | |
| .site-footer .disclaimer-footer { color: var(--text-muted); margin-top: 4px; } | |
| /* ── Responsive ───────────────────────────────────────────────── */ | |
| @media (min-width: 480px) { | |
| .capture-actions { flex-direction: row; } | |
| } | |
| @media (max-width: 360px) { | |
| .brand-tagline { display: none; } | |
| .model-badge { display: none; } | |
| } | |