/* ========================================================= iGAM · Asset Valuation Engine Custom CSS3 — blueprint/industrial nameplate aesthetic Theme tokens live as CSS variables (RGB triplets) so both Tailwind's arbitrary/opacity utilities and this file can read them, and so the light/dark toggle only has to swap one attribute on . ========================================================= */ :root { --ink: 10 12 15; --panel: 18 21 26; --panel2: 24 28 34; --panel3: 30 35 43; --line: 38 43 51; --line-soft: 28 32 39; --text: 237 239 242; --muted: 136 145 160; --muteddim: 90 98 112; --red: 176 17 39; /* #b01127 */ --reddim: 94 10 23; /* darker red for gradients / borders */ --amber: 227 167 59; --green: 76 175 125; --console-bg: 6 7 8; color-scheme: dark; } :root[data-theme="light"] { --ink: 247 247 248; --panel: 255 255 255; --panel2: 243 244 246; --panel3: 233 235 238; --line: 221 225 230; --line-soft: 231 233 236; --text: 20 23 27; --muted: 91 100 114; --muteddim: 140 147 160; --red: 176 17 39; /* brand red stays constant across themes */ --reddim: 94 10 23; --amber: 138 100 21; --green: 47 122 86; --console-bg: 238 240 242; color-scheme: light; } * { -webkit-font-smoothing: antialiased; } html { background: rgb(var(--ink)); } body { background-color: rgb(var(--ink)); color: rgb(var(--text)); background-image: linear-gradient(rgb(var(--line-soft)) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--line-soft)) 1px, transparent 1px); background-size: 48px 48px; background-position: -1px -1px; transition: background-color 0.25s ease, color 0.25s ease; } .font-display { font-family: "Oswald", ui-sans-serif, system-ui, sans-serif; } .font-mono { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; } /* ---------- Hazard stripe rule (signature motif) ---------- */ .hazard-rule { height: 6px; background-image: repeating-linear-gradient( -45deg, rgb(var(--red)) 0px, rgb(var(--red)) 10px, rgb(var(--ink)) 10px, rgb(var(--ink)) 20px ); opacity: 0.9; } .hazard-rule-thin { height: 3px; background-image: repeating-linear-gradient( -45deg, rgb(var(--red)) 0px, rgb(var(--red)) 7px, rgb(var(--ink)) 7px, rgb(var(--ink)) 14px ); } /* ---------- Corner tick marks (technical drawing reference marks) ---------- */ .ticks { position: relative; } .ticks::before, .ticks::after, .ticks .tick-tr, .ticks .tick-br { content: ""; position: absolute; width: 14px; height: 14px; opacity: 0.85; } .ticks::before { top: -1px; left: -1px; border-top: 2px solid rgb(var(--red)); border-left: 2px solid rgb(var(--red)); } .ticks::after { bottom: -1px; left: -1px; border-bottom: 2px solid rgb(var(--red)); border-left: 2px solid rgb(var(--red)); } .ticks .tick-tr { top: -1px; right: -1px; border-top: 2px solid rgb(var(--red)); border-right: 2px solid rgb(var(--red)); } .ticks .tick-br { bottom: -1px; right: -1px; border-bottom: 2px solid rgb(var(--red)); border-right: 2px solid rgb(var(--red)); } /* ---------- Dropzone reticle + scanline sweep ---------- */ .reticle { position: relative; overflow: hidden; background-image: linear-gradient(rgb(var(--red) / 0.06) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--red) / 0.06) 1px, transparent 1px); background-size: 20px 20px; } .reticle.is-active .scan-line { animation: sweep 1.8s linear infinite; } .scan-line { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, rgb(var(--red)), transparent); box-shadow: 0 0 12px 2px rgb(var(--red) / 0.35); opacity: 0; } @keyframes sweep { 0% { top: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } } /* ---------- Diagnostic step list ---------- */ .step-row { transition: color 0.3s ease, opacity 0.3s ease; } .step-dot { width: 9px; height: 9px; border-radius: 1px; background: rgb(var(--line)); transform: rotate(45deg); transition: background 0.3s ease, box-shadow 0.3s ease; flex: none; } .step-row.is-active .step-dot { background: rgb(var(--red)); box-shadow: 0 0 8px 1px rgb(var(--red) / 0.35); animation: pulse-dot 1s ease-in-out infinite; } .step-row.is-done .step-dot { background: rgb(var(--green)); box-shadow: none; animation: none; } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* ---------- Gauge / progress bar ---------- */ .gauge-track { height: 4px; background: rgb(var(--line)); position: relative; overflow: hidden; } .gauge-fill { height: 100%; background: repeating-linear-gradient( -45deg, rgb(var(--red)) 0px, rgb(var(--red)) 6px, rgb(var(--reddim)) 6px, rgb(var(--reddim)) 12px ); background-size: 200% 100%; animation: gauge-move 1s linear infinite; transition: width 0.6s ease; width: 0%; } @keyframes gauge-move { from { background-position: 0 0; } to { background-position: 17px 0; } } /* ---------- Console readout ---------- */ .console { background: rgb(var(--console-bg)); border: 1px solid rgb(var(--line)); } .console-line { opacity: 0; transform: translateY(2px); animation: line-in 0.35s ease forwards; } @keyframes line-in { to { opacity: 1; transform: translateY(0); } } /* ---------- Valuation bars ---------- */ .val-track { height: 8px; background: rgb(var(--line)); position: relative; } .val-fill { height: 100%; background: linear-gradient(90deg, rgb(var(--reddim)), rgb(var(--red))); } .val-tick { position: absolute; top: -3px; width: 1px; height: 14px; background: rgb(var(--muteddim)); } /* ---------- Report bullets and condition status ---------- */ .report-bullet-list { margin: 0.75rem 0 0; padding-left: 1.15rem; color: rgb(var(--muted)); font-size: 0.75rem; line-height: 1.55; list-style: disc; } .report-bullet-list li + li { margin-top: 0.35rem; } .report-bullet-list li::marker { color: rgb(var(--red)); } .condition-assessment-list { font-size: 0.875rem; line-height: 1.65; } .condition-badge { display: inline-flex; align-items: center; border: 1px solid currentColor; border-radius: 9999px; padding: 0.25rem 0.65rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; line-height: 1; text-transform: uppercase; } .condition-excellent { color: #15803d; background: #dcfce7; } .condition-good { color: #3f6212; background: #ecfccb; } .condition-fair { color: #a16207; background: #fef3c7; } .condition-poor { color: #b91c1c; background: #fee2e2; } .condition-unknown { color: rgb(var(--muted)); background: rgb(var(--panel)); } /* ---------- Fade / reveal transitions between panel states ---------- */ .panel-state { animation: state-in 0.45s ease both; } @keyframes state-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ---------- Custom select chevron on dark inputs ---------- */ select.plate-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0L5 6L10 0' fill='none' stroke='%238891A0' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } /* ---------- Theme toggle ---------- */ .theme-toggle { position: relative; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgb(var(--line)); background: rgb(var(--panel2)); color: rgb(var(--muted)); transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease; } .theme-toggle:hover { border-color: rgb(var(--red)); color: rgb(var(--text)); } .theme-toggle svg { width: 16px; height: 16px; } /* ---------- Auth modal tabs ---------- */ [data-auth-tab] { color: rgb(var(--muted)); background: rgb(var(--panel2)); } [data-auth-tab].is-active { color: rgb(var(--text)); background: rgb(var(--panel)); box-shadow: inset 0 -2px 0 rgb(var(--red)); } /* ---------- Prevent body scroll while modal is open ---------- */ body.modal-open { overflow: hidden; } /* ---------- Scrollbar (webkit) ---------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: rgb(var(--ink)); } ::-webkit-scrollbar-thumb { background: rgb(var(--line)); border-radius: 0; } ::-webkit-scrollbar-thumb:hover { background: rgb(var(--muteddim)); } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .scan-line, .gauge-fill, .step-row.is-active .step-dot, .console-line { animation: none !important; } } /* ---------- Focus visibility ---------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid rgb(var(--red)); outline-offset: 2px; } /* ---------- Generated PDF report ---------- */ .pdf-capture { --ink: 255 255 255; --panel: 255 255 255; --panel2: 247 248 250; --panel3: 241 243 245; --line: 205 210 217; --text: 20 23 27; --muted: 70 78 90; --muteddim: 105 113 125; background: #fff !important; color: #14171b !important; opacity: 1 !important; animation: none !important; } .pdf-capture, .pdf-capture * { animation: none !important; transition: none !important; } .pdf-capture #pdf-report-logo { display: block !important; } .pdf-capture #print-btn, .pdf-capture #review-form, .pdf-capture #restart-btn, .pdf-capture #token-usage, .pdf-capture a[href^="mailto:"] { display: none !important; } #pdf-report-logo { display: none; } .history-page-btn { border: 1px solid rgb(var(--line)); padding: 0.55rem 0.8rem; color: rgb(var(--muted)); font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; } .history-page-btn:hover:not(:disabled) { border-color: rgb(var(--red)); color: rgb(var(--text)); } .history-page-btn:disabled { opacity: 0.35; cursor: not-allowed; } /* Retained as a clean fallback if a user invokes the browser print command. */ @page { size: A4 portrait; margin: 12mm; } @media print { :root, :root[data-theme="light"] { --ink: 255 255 255; --panel: 255 255 255; --panel2: 247 248 250; --panel3: 241 243 245; --line: 205 210 217; --line-soft: 229 231 235; --text: 20 23 27; --muted: 70 78 90; --muteddim: 105 113 125; color-scheme: light; } *, *::before, *::after { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; animation: none !important; transition: none !important; } html, body { width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; background: #fff !important; } header, footer, #pitch-column, #panel-header, #panel-intake, #panel-processing, #print-btn, #review-form, #restart-btn, #token-usage, a[href^="mailto:"] { display: none !important; } main, main > div, main > div > div, #report-column, #panel-shell, #panel-results { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; position: static !important; transform: none !important; } #panel-shell { border: 0 !important; background: #fff !important; } #panel-shell::before, #panel-shell::after, #panel-shell > .tick-tr, #panel-shell > .tick-br { display: none !important; } #panel-results > :first-child { padding: 0 0 5mm !important; margin-bottom: 5mm; border-bottom: 2px solid rgb(var(--red)) !important; } #panel-results > :nth-child(2) { padding: 0 !important; } #panel-results .space-y-6 > :not([hidden]) { break-inside: avoid; page-break-inside: avoid; } #panel-results .grid.sm\:grid-cols-2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 5mm !important; } #panel-results .border, #panel-results .border-l-2 { border-color: rgb(var(--line)) !important; } #result-thumb { max-width: 100% !important; object-fit: contain !important; } #valuation-basis, #condition-basis, #factors-list, #strategy-rationale, #important-notice-text { font-size: 10pt !important; line-height: 1.45 !important; } .condition-badge { border-width: 1px !important; } }