Spaces:
Sleeping
Sleeping
| :root{ | |
| --bg1:#0b1020; | |
| --bg2:#111735; | |
| --glass:rgba(255,255,255,0.06); | |
| --border:rgba(255,255,255,0.12); | |
| --text:#eaf2ff; | |
| --muted:#b9c4e4; | |
| --accent:#6ae3ff; | |
| --accent2:#9b8cff; | |
| --pos:#2ecc71; | |
| --neg:#ff5c7a; | |
| --neu:#ffd166; | |
| } | |
| *{box-sizing:border-box} | |
| html,body{height:100%} | |
| body{ | |
| margin:0; | |
| color:var(--text); | |
| background: radial-gradient(1200px 800px at 70% -10%, #1a2255 0%, transparent 70%), | |
| radial-gradient(800px 600px at -10% 110%, #2a1e5c 0%, transparent 70%), | |
| linear-gradient(180deg, var(--bg1), var(--bg2)); | |
| font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji"; | |
| overflow-x:hidden; | |
| } | |
| /* Background layers */ | |
| .bg-gradient{ | |
| position:fixed; inset:0; pointer-events:none; | |
| background: | |
| radial-gradient(1000px 600px at 20% -10%, rgba(155,140,255,.25),transparent 60%), | |
| radial-gradient(900px 500px at 110% 120%, rgba(106,227,255,.18),transparent 60%); | |
| filter: blur(30px); | |
| } | |
| .stars, .shooting-stars{ | |
| position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0; | |
| } | |
| .stars::before, .stars::after{ | |
| content:""; | |
| position:absolute; inset:-200px; | |
| background: | |
| radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.8), transparent 70%), | |
| radial-gradient(1.5px 1.5px at 70% 60%, rgba(255,255,255,.6), transparent 70%), | |
| radial-gradient(1.5px 1.5px at 40% 80%, rgba(255,255,255,.6), transparent 70%), | |
| radial-gradient(2px 2px at 85% 20%, rgba(255,255,255,.8), transparent 70%); | |
| animation: twinkle 8s linear infinite alternate; | |
| } | |
| @keyframes twinkle{ | |
| from{opacity:.6; transform:scale(1)} | |
| to{opacity:1; transform:scale(1.06)} | |
| } | |
| .shooting-stars::before{ | |
| content:""; | |
| position:absolute; | |
| top:-20vh; left:10vw; width:2px; height:2px; background:white; | |
| box-shadow: 0 0 12px 3px rgba(255,255,255,.8); | |
| transform: rotate(45deg); | |
| animation: shoot 6s linear infinite; | |
| opacity:.8; | |
| } | |
| @keyframes shoot{ | |
| 0%{transform:translate(0,0) rotate(45deg); opacity:0} | |
| 5%{opacity:1} | |
| 70%{transform:translate(90vw,80vh) rotate(45deg); opacity:0} | |
| 100%{opacity:0} | |
| } | |
| /* planets */ | |
| .planets{ position:fixed; inset:0; pointer-events:none; z-index:1;} | |
| .planet{ | |
| position:absolute; border-radius:50%; filter: blur(0.2px); | |
| opacity:.8; animation: float 12s ease-in-out infinite; | |
| background: radial-gradient(120px 120px at 40% 40%, rgba(255,255,255,.35), transparent 60%), | |
| radial-gradient(circle at 60% 60%, rgba(255,255,255,.08), rgba(255,255,255,.02)); | |
| border:1px solid rgba(255,255,255,.1); | |
| } | |
| .p1{ width:140px; height:140px; top:12vh; left:8vw; background-color:#5b6cff;} | |
| .p2{ width:90px; height:90px; bottom:14vh; right:10vw; background-color:#35c0ff; animation-duration: 14s;} | |
| .p3{ width:65px; height:65px; top:60vh; left:20vw; background-color:#ff7ad6; animation-duration: 11s;} | |
| @keyframes float{ | |
| 0%,100%{ transform: translateY(-8px)} | |
| 50%{ transform: translateY(8px)} | |
| } | |
| /* Parallax cursor */ | |
| #parallax-cursor{ position:fixed; width:14px; height:14px; border-radius:50%; | |
| background: radial-gradient(circle, rgba(255,255,255,.9), transparent 60%); | |
| pointer-events:none; z-index:5; mix-blend-mode:screen; transform:translate(-50%,-50%); | |
| opacity:.0; transition: opacity .25s ease; | |
| } | |
| /* Layout */ | |
| .container{ width:min(1100px, 92%); margin: 0 auto; position:relative; z-index:2;} | |
| header{ padding: 60px 0 20px;} | |
| .logo{ font-size: clamp(28px, 6vw, 56px); font-weight:900; letter-spacing:.6px;} | |
| .logo span{ | |
| background: linear-gradient(90deg, var(--accent), var(--accent2)); | |
| -webkit-background-clip:text; background-clip:text; color:transparent; | |
| text-shadow: 0 0 28px rgba(106,227,255,.35); | |
| } | |
| .subtitle{ color:var(--muted); margin-top:10px; max-width: 780px; line-height:1.5 } | |
| .card{ | |
| background: var(--glass); | |
| border: 1px solid var(--border); | |
| border-radius: 20px; | |
| padding: 22px; | |
| backdrop-filter: blur(10px); | |
| box-shadow: 0 15px 60px rgba(0,0,0,.35); | |
| transform: translateY(6px); | |
| animation: card-in .6s ease forwards; | |
| } | |
| @keyframes card-in{ to{ transform: translateY(0)} } | |
| .card-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px;} | |
| .card-head .icon{ | |
| width:40px; height:40px; display:grid;place-items:center; | |
| border-radius:12px; background:linear-gradient(135deg, var(--accent2), var(--accent)); | |
| box-shadow: 0 8px 26px rgba(155,140,255,.35); | |
| font-weight:800; | |
| } | |
| .grid{ display:grid; grid-template-columns: 1fr auto; gap:12px; margin-top:16px;} | |
| .form-group{ display:flex; flex-direction:column; gap:8px} | |
| .form-group.col-span{ grid-column: 1 / -1} | |
| label{ color:var(--muted); font-size:14px} | |
| input{ | |
| background: rgba(255,255,255,.05); border:1px solid var(--border); color:var(--text); | |
| padding:12px 14px; border-radius:12px; outline:none; transition:.2s; | |
| } | |
| input:focus{ border-color: var(--accent); box-shadow: 0 0 0 4px rgba(106,227,255,.18)} | |
| .btn{ | |
| position:relative; overflow:hidden; border:0; cursor:pointer; | |
| padding: 12px 16px; border-radius:14px; color:#0b1020; font-weight:800; | |
| background:linear-gradient(135deg, var(--accent), var(--accent2)); | |
| box-shadow: 0 10px 30px rgba(106,227,255,.35); | |
| } | |
| .btn .btn-glow{ | |
| position:absolute; inset:-80% -40%; background: radial-gradient(circle, rgba(255,255,255,.6), transparent 60%); | |
| transform: translateX(-60%); animation: sweep 2.2s ease-in-out infinite; | |
| opacity:.5; | |
| } | |
| @keyframes sweep{ 50%{ transform: translateX(60%)} } | |
| .status{ display:flex; gap:12px; align-items:center; margin-top:14px} | |
| .hidden{ display:none} | |
| .spinner{ | |
| width:20px; height:20px; border:2.5px solid rgba(255,255,255,.2); border-top-color:white; border-radius:50%; | |
| animation: spin .9s linear infinite; | |
| } | |
| @keyframes spin{to{ transform:rotate(360deg)}} | |
| .dots::after{ | |
| content:""; animation: dots 1.2s steps(3,end) infinite; | |
| } | |
| @keyframes dots{ 0%{content:"."} 33%{content:".."} 66%{content:"..."} } | |
| .meta{ margin-top:14px; display:grid; grid-template-columns: repeat(3,1fr); gap:10px} | |
| .meta-item{ background: rgba(255,255,255,.04); border:1px solid var(--border); border-radius:12px; padding:12px} | |
| .meta-label{ color:var(--muted); font-size:12px} | |
| .meta-value{ margin-top:4px; display:flex; gap:8px; flex-wrap:wrap} | |
| .chip{ | |
| display:inline-flex; align-items:center; gap:6px; | |
| border-radius:999px; padding:6px 10px; font-weight:700; font-size:12px; letter-spacing:.2px; | |
| background: rgba(255,255,255,.07); border:1px solid var(--border) | |
| } | |
| .chip-gemini{ color:#00E5FF; border-color: rgba(0,229,255,.4)} | |
| .chip-fallback{ color:#ff9ff3; border-color: rgba(255,159,243,.4)} | |
| .charts{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:14px} | |
| .chart-card{ background: rgba(255,255,255,.04); border:1px solid var(--border); border-radius:12px; padding:10px} | |
| .chart-card h3{ margin:6px 6px 8px; font-size:14px; color:var(--muted)} | |
| .table-card{ margin-top:14px; background: rgba(255,255,255,.04); border:1px solid var(--border); border-radius:12px; overflow:hidden} | |
| .table-head{ | |
| display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--border) | |
| } | |
| .table{ max-height: 360px; overflow:auto } | |
| .row{ | |
| display:grid; grid-template-columns: 1fr 110px 90px; gap:10px; padding:10px 12px; | |
| border-bottom:1px dashed rgba(255,255,255,.08); | |
| transition: background .2s ease, transform .12s ease; | |
| } | |
| .row:hover{ background: rgba(255,255,255,.03); transform: translateX(2px)} | |
| .cell{ font-size:14px; color:var(--text)} | |
| .badge{ padding:4px 10px; border-radius:999px; font-weight:800; font-size:12px} | |
| .badge.pos{ background: rgba(46,204,113,.15); color: var(--pos); border:1px solid rgba(46,204,113,.35)} | |
| .badge.neg{ background: rgba(255,92,122,.12); color: var(--neg); border:1px solid rgba(255,92,122,.35)} | |
| .badge.neu{ background: rgba(255,209,102,.12); color: var(--neu); border:1px solid rgba(255,209,102,.35)} | |
| .footer{ text-align:center; padding:26px 12px 60px; color:var(--muted)} | |
| .signature{ letter-spacing:.4px} | |
| .kavya{ | |
| background: linear-gradient(90deg, #fff, var(--accent), var(--accent2)); | |
| -webkit-background-clip:text; background-clip:text; color:transparent; | |
| text-shadow: 0 0 24px rgba(155,140,255,.45); | |
| } | |
| .heart{ filter: drop-shadow(0 0 10px rgba(255,150,200,.6)) } | |
| /* Responsive */ | |
| @media (max-width: 900px){ | |
| .grid{ grid-template-columns: 1fr} | |
| .charts{ grid-template-columns: 1fr} | |
| .row{ grid-template-columns: 1fr 90px 80px} | |
| } | |
| /* subtle pop on hover */ | |
| .btn:hover{ transform: translateY(-1px); } |