Spaces:
Sleeping
Sleeping
| /* === AEGIS-AI Results & Forensic Telemetry Styles === */ | |
| /* Results Container & Entrance */ | |
| .results-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 22px; | |
| opacity: 0; | |
| transform: translateY(15px); | |
| transition: all 0.5s ease-out; | |
| } | |
| .results-container.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| /* TIER 1: Verdict Banner */ | |
| .verdict-banner { | |
| border-radius: 12px; | |
| padding: 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| border: 1px solid transparent; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .verdict-banner::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; | |
| width: 4px; height: 100%; | |
| } | |
| .verdict-banner.fake { | |
| background: var(--danger-dim); | |
| border-color: rgba(255, 42, 85, 0.2); | |
| color: var(--danger); | |
| } | |
| .verdict-banner.fake::before { | |
| background: var(--danger); | |
| box-shadow: var(--shadow-glow-red); | |
| } | |
| .verdict-banner.real { | |
| background: var(--success-dim); | |
| border-color: rgba(0, 255, 170, 0.2); | |
| color: var(--success); | |
| } | |
| .verdict-banner.real::before { | |
| background: var(--success); | |
| box-shadow: 0 0 10px rgba(0, 255, 170, 0.4); | |
| } | |
| .verdict-info h4 { | |
| font-family: var(--font-code); | |
| font-size: 1.35rem; | |
| font-weight: 700; | |
| margin-bottom: 4px; | |
| } | |
| .verdict-info p { | |
| color: var(--text-muted); | |
| font-size: 0.85rem; | |
| } | |
| .verdict-percentage { | |
| font-family: var(--font-code); | |
| font-size: 2.2rem; | |
| font-weight: 800; | |
| display: flex; | |
| align-items: baseline; | |
| gap: 2px; | |
| } | |
| .verdict-percentage span { | |
| font-size: 1rem; | |
| font-weight: 500; | |
| } | |
| .verdict-actions { | |
| display: flex; | |
| gap: 8px; | |
| margin-top: 12px; | |
| } | |
| /* Evidence List & Breakdown Rows */ | |
| .evidence-list { | |
| list-style: none; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .evidence-list li { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 10px; | |
| font-size: 0.85rem; | |
| color: var(--text-main); | |
| } | |
| .evidence-list li i { | |
| margin-top: 3px; | |
| color: var(--accent); | |
| } | |
| .breakdown-table { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .breakdown-row { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 5px; | |
| } | |
| .breakdown-meta { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.85rem; | |
| } | |
| .breakdown-bar-bg { | |
| width: 100%; | |
| height: 6px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 3px; | |
| overflow: hidden; | |
| } | |
| .breakdown-bar-fill { | |
| height: 100%; | |
| border-radius: 3px; | |
| transition: width 1s cubic-bezier(0.1, 0.8, 0.2, 1); | |
| width: 0%; | |
| } | |
| /* Image Comparison & Scanline */ | |
| .images-comparison { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 14px; | |
| } | |
| .img-box { | |
| border-radius: 8px; | |
| overflow: hidden; | |
| border: 1px solid var(--border-subtle); | |
| aspect-ratio: 1; | |
| position: relative; | |
| background: rgba(0, 0, 0, 0.4); | |
| } | |
| .img-box img, .img-box video { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .img-box-label { | |
| position: absolute; | |
| bottom: 8px; left: 8px; | |
| background: rgba(0, 0, 0, 0.75); | |
| backdrop-filter: blur(4px); | |
| font-size: 0.65rem; | |
| font-weight: 600; | |
| letter-spacing: 0.5px; | |
| padding: 3px 8px; | |
| border-radius: 4px; | |
| text-transform: uppercase; | |
| border: 1px solid var(--border-subtle); | |
| } | |
| .scan-line-active::after { | |
| content: ''; | |
| position: absolute; | |
| width: 100%; height: 100%; | |
| top: 0; left: 0; | |
| border-bottom: 3px solid var(--accent); | |
| box-shadow: 0 2px 8px var(--accent); | |
| transform: translateY(-100%); | |
| animation: scanline 2.5s ease-in-out infinite; | |
| will-change: transform; | |
| pointer-events: none; | |
| } | |
| @keyframes scanline { | |
| 0% { transform: translateY(-100%); } | |
| 50% { transform: translateY(0); } | |
| 100% { transform: translateY(-100%); } | |
| } | |
| /* Interactive Heatmap Overlay Slider */ | |
| .heatmap-slider-container { | |
| position: relative; | |
| width: 100%; | |
| aspect-ratio: 1; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| cursor: col-resize; | |
| border: 1px solid var(--border-glow); | |
| background: #000; | |
| } | |
| .heatmap-slider-container img { | |
| position: absolute; | |
| top: 0; left: 0; | |
| width: 100%; height: 100%; | |
| object-fit: cover; | |
| pointer-events: none; | |
| } | |
| .heatmap-slider-container .heatmap-overlay { | |
| clip-path: inset(0 0 0 50%); | |
| transition: clip-path 0.05s linear, opacity 0.2s ease; | |
| } | |
| .heatmap-slider-handle { | |
| position: absolute; | |
| top: 0; bottom: 0; | |
| left: 50%; | |
| width: 3px; | |
| background: var(--accent); | |
| box-shadow: 0 0 10px var(--accent-glow); | |
| z-index: 10; | |
| pointer-events: none; | |
| } | |
| .heatmap-slider-handle::before { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; left: -6px; | |
| width: 15px; height: 15px; | |
| background: var(--accent); | |
| border-radius: 50%; | |
| transform: translateY(-50%); | |
| box-shadow: 0 0 8px var(--accent-glow); | |
| } | |
| .opacity-control { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| margin-top: 10px; | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| } | |
| .opacity-control input[type='range'] { | |
| flex: 1; | |
| height: 4px; | |
| -webkit-appearance: none; | |
| appearance: none; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 2px; | |
| outline: none; | |
| } | |
| .opacity-control input[type='range']::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 14px; height: 14px; | |
| background: var(--accent); | |
| border-radius: 50%; | |
| cursor: pointer; | |
| box-shadow: 0 0 6px var(--accent-glow); | |
| } | |
| .tabs { | |
| display: flex; | |
| gap: 8px; | |
| border-bottom: 1px solid var(--border-subtle); | |
| padding-bottom: 10px; | |
| flex-wrap: wrap; | |
| } | |
| .tab-btn { | |
| background: none; | |
| border: none; | |
| color: var(--text-muted); | |
| font-family: inherit; | |
| font-size: 0.85rem; | |
| cursor: pointer; | |
| padding: 5px 12px; | |
| transition: var(--transition-fast); | |
| border-radius: 4px; | |
| } | |
| .tab-btn:hover { | |
| color: var(--text-main); | |
| background: rgba(255, 255, 255, 0.05); | |
| } | |
| .tab-btn.active { | |
| color: var(--accent); | |
| background: var(--accent-dim); | |
| } | |
| .tab-content { | |
| display: none; | |
| margin-top: 12px; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| /* 9 Forensic Metrics Grid */ | |
| .metrics-grid { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 12px; | |
| } | |
| @media (min-width: 600px) { | |
| .metrics-grid { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| } | |
| .metric-card { | |
| background: rgba(255, 255, 255, 0.02); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 8px; | |
| padding: 14px; | |
| position: relative; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| cursor: pointer; | |
| transition: var(--transition-fast); | |
| } | |
| .metric-card:hover { | |
| background: rgba(255, 255, 255, 0.04); | |
| border-color: rgba(255, 255, 255, 0.1); | |
| } | |
| .metric-meta { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .metric-label { | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| color: var(--text-main); | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .metric-label i { | |
| color: var(--accent); | |
| font-size: 0.85rem; | |
| } | |
| .metric-value { | |
| font-family: monospace; | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| } | |
| .metric-progress-bar { | |
| width: 100%; | |
| height: 4px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 2px; | |
| overflow: hidden; | |
| } | |
| .metric-fill { | |
| height: 100%; | |
| border-radius: 2px; | |
| width: 100%; | |
| transform: scaleX(0); | |
| transform-origin: left; | |
| transition: transform 1s cubic-bezier(0.1, 0.8, 0.2, 1); | |
| will-change: transform; | |
| } | |
| .tooltip { | |
| visibility: hidden; | |
| width: 220px; | |
| background-color: #121212; | |
| color: #ccc; | |
| text-align: left; | |
| border-radius: 6px; | |
| padding: 10px 12px; | |
| position: absolute; | |
| z-index: 100; | |
| bottom: 125%; | |
| left: 50%; | |
| margin-left: -110px; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| font-size: 0.75rem; | |
| line-height: 1.4; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); | |
| pointer-events: none; | |
| } | |
| .tooltip::after { | |
| content: ''; | |
| position: absolute; | |
| top: 100%; left: 50%; | |
| margin-left: -5px; | |
| border-width: 5px; | |
| border-style: solid; | |
| border-color: rgba(255, 255, 255, 0.1) transparent transparent transparent; | |
| } | |
| .metric-card:hover .tooltip, .metric-card.active-tooltip .tooltip { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| /* Audio Player Canvas & Waveform */ | |
| .audio-player-container { | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 8px; | |
| padding: 15px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .audio-canvas-wrapper { | |
| position: relative; | |
| width: 100%; height: 75px; | |
| border-radius: 4px; | |
| overflow: hidden; | |
| background: rgba(255, 255, 255, 0.02); | |
| } | |
| .audio-canvas-wrapper canvas { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .audio-controls { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| font-size: 0.85rem; | |
| color: var(--text-muted); | |
| } | |
| .audio-play-btn { | |
| background: var(--accent); | |
| border: none; | |
| color: #000; | |
| width: 32px; height: 32px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| font-size: 0.85rem; | |
| transition: transform 0.2s; | |
| } | |
| .audio-play-btn:hover { | |
| transform: scale(1.08); | |
| } | |
| /* Video Frame Risk Timeline */ | |
| .video-timeline-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .video-timeline { | |
| width: 100%; | |
| height: 24px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 4px; | |
| display: flex; | |
| overflow: hidden; | |
| cursor: pointer; | |
| border: 1px solid var(--border-subtle); | |
| } | |
| .timeline-segment { | |
| height: 100%; | |
| transition: opacity 0.2s; | |
| position: relative; | |
| } | |
| .timeline-segment:hover { | |
| opacity: 0.75; | |
| } | |
| .timeline-info { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| } | |
| /* Metadata & Tables */ | |
| .meta-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); | |
| gap: 14px; | |
| } | |
| .meta-item { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .meta-label { | |
| font-size: 0.72rem; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .meta-val { | |
| font-size: 0.88rem; | |
| font-weight: 500; | |
| } | |
| .pill-list { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| margin-top: 10px; | |
| } | |
| .pill { | |
| background: rgba(255, 255, 255, 0.04); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| padding: 3px 10px; | |
| border-radius: 12px; | |
| font-size: 0.72rem; | |
| color: var(--text-muted); | |
| } | |
| .identity-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 0.82rem; | |
| } | |
| .identity-table th, .identity-table td { | |
| padding: 8px; | |
| text-align: left; | |
| border-bottom: 1px solid var(--border-subtle); | |
| } | |
| .identity-table th { | |
| color: var(--text-muted); | |
| font-weight: 500; | |
| } | |
| .identity-table tr.flagged td { | |
| color: var(--danger); | |
| } | |