Spaces:
Sleeping
Sleeping
| /* --- Variables & Global Styles --- */ | |
| :root { | |
| --primary-color: #00bfff; /* Deep Sky Blue */ | |
| --accent-color: #ff4757; /* Vibrant Red */ | |
| --dark-bg: #0d0c22; /* Deep Indigo */ | |
| --light-bg-transparent: rgba(26, 26, 46, 0.4); | |
| --border-color: rgba(255, 255, 255, 0.1); | |
| --text-color: #f0f0f0; | |
| --text-muted: #a0a0a0; | |
| --font-family-heading: 'Poppins', sans-serif; | |
| --font-family-body: 'Roboto', sans-serif; | |
| } | |
| body { | |
| font-family: var(--font-family-body); | |
| background-color: var(--dark-bg); | |
| color: var(--text-color); | |
| line-height: 1.6; | |
| margin: 0; | |
| padding: 2rem; | |
| overflow-x: hidden; | |
| } | |
| /* --- Animated Background --- */ | |
| .background-gradient { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| background: linear-gradient(315deg, var(--primary-color), var(--dark-bg), var(--accent-color)); | |
| background-size: 400% 400%; | |
| animation: gradient-flow 15s ease infinite; | |
| } | |
| @keyframes gradient-flow { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| /* --- Main Container & Glassmorphism --- */ | |
| .container { | |
| max-width: 800px; | |
| margin: 2rem auto; | |
| padding: 2.5rem; | |
| background: var(--light-bg-transparent); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border-radius: 20px; | |
| border: 1px solid var(--border-color); | |
| box-shadow: 0 15px 35px rgba(0,0,0,0.4); | |
| } | |
| header { | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| } | |
| header h1 { | |
| font-family: var(--font-family-heading); | |
| color: #fff; | |
| text-shadow: 0 0 10px var(--primary-color); | |
| } | |
| header p { | |
| color: var(--text-muted); | |
| } | |
| /* --- Form & Upgraded Inputs --- */ | |
| #analysis-form { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.5rem; | |
| } | |
| .input-group label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| font-weight: 600; | |
| } | |
| textarea { | |
| width: 100%; | |
| padding: 0.75rem; | |
| background-color: rgba(0,0,0,0.2); | |
| border: 1px solid var(--border-color); | |
| border-radius: 8px; | |
| color: var(--text-color); | |
| font-size: 1rem; | |
| resize: vertical; | |
| transition: border-color 0.3s, box-shadow 0.3s; | |
| } | |
| textarea:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| box-shadow: 0 0 15px rgba(0, 191, 255, 0.5); | |
| } | |
| .separator { | |
| text-align: center; | |
| color: var(--text-muted); | |
| font-weight: 600; | |
| position: relative; | |
| } | |
| .separator span { | |
| background: #1a1a2e; | |
| padding: 0 10px; | |
| } | |
| .separator::before { | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 1px; | |
| background: var(--border-color); | |
| left: 0; | |
| top: 50%; | |
| z-index: -1; | |
| } | |
| /* Custom File Input */ | |
| input[type="file"] { | |
| display: none; | |
| } | |
| .file-label { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 2rem; | |
| border: 2px dashed var(--border-color); | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: background-color 0.3s, border-color 0.3s; | |
| } | |
| .file-label:hover { | |
| background-color: rgba(0, 191, 255, 0.1); | |
| border-color: var(--primary-color); | |
| } | |
| .file-label i { | |
| margin-right: 0.75rem; | |
| font-size: 1.5rem; | |
| color: var(--primary-color); | |
| } | |
| /* Upgraded Button */ | |
| .btn-analyze { | |
| padding: 1rem 1.5rem; | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| font-family: var(--font-family-heading); | |
| color: #fff; | |
| background: linear-gradient(45deg, var(--primary-color), var(--accent-color)); | |
| border: none; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| box-shadow: 0 5px 15px rgba(255, 71, 87, 0.3); | |
| } | |
| .btn-analyze:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 8px 25px rgba(0, 191, 255, 0.5); | |
| } | |
| .btn-analyze:disabled { | |
| background: #555; | |
| cursor: not-allowed; | |
| transform: translateY(0); | |
| box-shadow: none; | |
| } | |
| /* --- Results & Upgraded Loader --- */ | |
| #results-container { | |
| margin-top: 2rem; | |
| } | |
| .loader-hidden { | |
| display: none; | |
| } | |
| #loader { | |
| text-align: center; | |
| padding: 2rem; | |
| } | |
| #loader p { | |
| margin-top: 1rem; | |
| color: var(--primary-color); | |
| font-weight: 500; | |
| } | |
| .scanner-line { | |
| width: 100%; | |
| height: 3px; | |
| background: linear-gradient(90deg, transparent, var(--primary-color), transparent); | |
| animation: scan 2s infinite; | |
| border-radius: 3px; | |
| } | |
| @keyframes scan { | |
| 0% { transform: translateX(-100%); } | |
| 100% { transform: translateX(100%); } | |
| } | |
| /* --- Result Card Styling --- */ | |
| .result-card { | |
| background: var(--light-bg-transparent); | |
| padding: 1.5rem; | |
| border-radius: 12px; | |
| margin-bottom: 1.5rem; | |
| border: 1px solid var(--border-color); | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2); | |
| } | |
| .error-card { | |
| border-color: var(--accent-color); | |
| background: rgba(255, 71, 87, 0.1); | |
| } | |
| .result-card h3 { | |
| margin-bottom: 1rem; | |
| color: var(--primary-color); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .result-card p { | |
| margin-bottom: 0.5rem; | |
| } | |
| .result-card .evidence-item { | |
| background-color: rgba(0,0,0,0.2); | |
| padding: 0.75rem; | |
| border-radius: 6px; | |
| margin-top: 0.5rem; | |
| border: 1px solid var(--border-color); | |
| font-size: 0.9rem; | |
| } | |
| .result-card .sources-section { | |
| margin-top: 1rem; | |
| } | |
| .result-card .sources-section h4 { | |
| color: var(--primary-color); | |
| margin-bottom: 0.5rem; | |
| font-size: 1rem; | |
| } | |
| .result-card .verdict--true { | |
| color: #4CAF50; | |
| font-weight: bold; | |
| } | |
| .result-card .verdict--false { | |
| color: #f44336; | |
| font-weight: bold; | |
| } | |
| .result-card .verdict--neutral { | |
| color: #ff9800; | |
| font-weight: bold; | |
| } | |
| .result-card .verdict--unverifiable { | |
| color: #9e9e9e; | |
| font-weight: bold; | |
| } | |
| /* --- Scroll Animations --- */ | |
| .animate-on-scroll { | |
| opacity: 0; | |
| transition: opacity 0.8s ease-out, transform 0.8s ease-out; | |
| } | |
| .animate-on-scroll.fade-in { | |
| transform: translateY(30px); | |
| } | |
| .animate-on-scroll.slide-up { | |
| transform: translateY(50px); | |
| } | |
| .animate-on-scroll.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| footer { | |
| text-align: center; | |
| margin-top: 3rem; | |
| color: var(--text-muted); | |
| font-size: 0.9rem; | |
| } | |
| /* --- Responsive --- */ | |
| @media (max-width: 600px) { | |
| body { padding: 0.5rem; } | |
| .container { padding: 1.5rem; margin: 1rem; } | |
| header h1 { font-size: 1.8rem; } | |
| } |