AvinaashA/DualView-BMI

1:root {2    --bg-color: #0f172a;3    --glass-bg: rgba(255, 255, 255, 0.05);4    --glass-border: rgba(255, 255, 255, 0.1);5    --primary: #6366f1;6    --secondary: #a855f7;7    --text-main: #f8fafc;8    --text-muted: #94a3b8;9}10 11* { margin: 0; padding: 0; box-sizing: border-box; }12 13body {14    font-family: 'Outfit', sans-serif;15    background-color: var(--bg-color);16    color: var(--text-main);17    min-height: 100vh;18    overflow-x: hidden;19    display: flex;20    align-items: center;21    justify-content: center;22}23 24/* --- ANIMATED BACKGROUND --- */25.background-blobs {26    position: fixed;27    top: 0; left: 0; width: 100%; height: 100%;28    z-index: -1;29    overflow: hidden;30}31 32.blob {33    position: absolute;34    border-radius: 50%;35    filter: blur(80px);36    opacity: 0.6;37    animation: float 10s infinite ease-in-out alternate;38}39 40.blob-1 { top: -10%; left: -10%; width: 500px; height: 500px; background: var(--primary); }41.blob-2 { bottom: -10%; right: -10%; width: 400px; height: 400px; background: var(--secondary); animation-delay: -5s; }42.blob-3 { top: 40%; left: 40%; width: 300px; height: 300px; background: #ec4899; animation-duration: 15s; }43 44@keyframes float {45    0% { transform: translate(0, 0); }46    100% { transform: translate(30px, 50px); }47}48 49/* --- LAYOUT --- */50.main-container {51    width: 100%;52    max-width: 1200px;53    padding: 20px;54    display: flex;55    flex-direction: column;56    align-items: center;57}58 59.glass-nav {60    position: absolute;61    top: 20px;62    left: 50%;63    transform: translateX(-50%);64    padding: 1rem 2rem;65    background: var(--glass-bg);66    backdrop-filter: blur(10px);67    border: 1px solid var(--glass-border);68    border-radius: 50px;69    width: 90%;70    max-width: 1000px;71    display: flex;72    justify-content: center;73}74 75.logo { font-weight: 700; font-size: 1.5rem; letter-spacing: 1px; }76.highlight { color: var(--secondary); }77 78/* --- CARDS & CONTENT --- */79.content-wrapper {80    display: flex;81    justify-content: center;82    align-items: center;83    width: 100%;84    min-height: 80vh; /* Increased height to center content nicely */85    padding-top: 60px;86}87 88.fade-in { animation: fadeIn 0.8s ease-out forwards; }89@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }90 91/* Home Page */92.hero-section { text-align: center; }93.hero-section h1 { font-size: 4rem; line-height: 1.1; margin-bottom: 1rem; background: linear-gradient(to right, #fff, #94a3b8); -webkit-background-clip: text; color: transparent; }94.hero-section p { color: var(--text-muted); font-size: 1.2rem; margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; }95 96.cta-button {97    display: inline-block;98    padding: 1rem 2.5rem;99    background: linear-gradient(45deg, var(--primary), var(--secondary));100    color: white;101    text-decoration: none;102    border-radius: 50px;103    font-weight: 700;104    transition: transform 0.3s ease, box-shadow 0.3s ease;105}106.cta-button:hover { transform: scale(1.05); box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4); }107 108/* Upload Card */109.upload-card, .result-card {110    background: var(--glass-bg);111    backdrop-filter: blur(20px);112    border: 1px solid var(--glass-border);113    padding: 3rem;114    border-radius: 24px;115    width: 100%;116    max-width: 500px;117    text-align: center;118    box-shadow: 0 20px 50px rgba(0,0,0,0.3);119}120 121.subtitle { color: var(--text-muted); margin-bottom: 2rem; }122 123.input-group { margin-bottom: 1.5rem; text-align: left; }124.file-input { display: none; }125.file-label {126    display: flex;127    align-items: center;128    padding: 1rem;129    background: rgba(255,255,255,0.03);130    border: 1px dashed var(--glass-border);131    border-radius: 12px;132    cursor: pointer;133    transition: 0.3s;134    color: var(--text-muted);135}136.file-label:hover { background: rgba(255,255,255,0.08); border-color: var(--primary); color: #fff; }137.file-label i { margin-right: 10px; color: var(--secondary); font-size: 1.2rem; }138.file-name { margin-left: auto; font-size: 0.9rem; opacity: 0.7; }139 140.submit-btn {141    width: 100%;142    padding: 1rem;143    border: none;144    border-radius: 12px;145    background: var(--primary);146    color: white;147    font-size: 1.1rem;148    font-weight: 600;149    cursor: pointer;150    transition: 0.3s;151    position: relative;152    height: 54px;153}154.submit-btn:hover { background: var(--secondary); }155 156/* Loader */157.loader {158    border: 3px solid rgba(255,255,255,0.3);159    border-top: 3px solid #fff;160    border-radius: 50%;161    width: 24px;162    height: 24px;163    animation: spin 1s linear infinite;164    margin: 0 auto;165}166@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }167 168/* Result Page */169.score-circle {170    width: 140px;171    height: 140px;172    border-radius: 50%;173    border: 4px solid var(--secondary);174    display: flex;175    flex-direction: column;176    justify-content: center;177    align-items: center;178    margin: 0 auto 1.5rem;179    box-shadow: 0 0 30px rgba(168, 85, 247, 0.3);180}181.score-label { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px; }182.score-value { font-size: 2.5rem; font-weight: 700; color: #fff; }183 184.action-buttons { margin-top: 1.5rem; display: flex; gap: 1rem; justify-content: center; }185.secondary-btn {186    padding: 0.8rem 1.5rem;187    border: 1px solid var(--glass-border);188    border-radius: 50px;189    color: var(--text-muted);190    text-decoration: none;191    transition: 0.3s;192}193.secondary-btn:hover { background: rgba(255,255,255,0.1); color: #fff; border-color: #fff; }194 195/* Result Images */196.result-images-container {197    display: flex;198    justify-content: center;199    gap: 20px;200    margin-bottom: 2rem;201    margin-top: 1rem;202}203 204.result-img-box {205    display: flex;206    flex-direction: column;207    align-items: center;208    background: rgba(0, 0, 0, 0.2);209    padding: 10px;210    border-radius: 12px;211    border: 1px solid var(--glass-border);212}213 214.result-img-box img {215    width: 100px;216    height: 100px;217    object-fit: cover;218    border-radius: 8px;219    border: 2px solid rgba(255, 255, 255, 0.1);220}221 222.img-label {223    font-size: 0.75rem;224    color: var(--text-muted);225    margin-bottom: 8px;226    text-transform: uppercase;227    letter-spacing: 1px;228}