/* Core look & feel (ported from the React/Vite version) */ :root{ --bg:#020617; --fg:#f8fafc; } html, body { height: 100%; } body{ font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--fg); } /* Mesh background */ .mesh-bg{ position: fixed; inset: 0; z-index: -1; background-color: #020617; background-image: radial-gradient(at 0% 0%, hsla(220, 100%, 15%, 1) 0px, transparent 50%), radial-gradient(at 100% 0%, hsla(260, 100%, 10%, 1) 0px, transparent 50%), radial-gradient(at 50% 50%, hsla(220, 100%, 5%, 1) 0px, transparent 100%); } /* Gradient text */ .gradient-text{ background: linear-gradient(135deg, #60a5fa 0%, #a855f7 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Glass cards */ .glass-card{ background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); } .glass-card:hover{ border-color: rgba(255, 255, 255, 0.15); } /* Scrollbar */ ::-webkit-scrollbar{ width: 8px; } ::-webkit-scrollbar-track{ background: #020617; } ::-webkit-scrollbar-thumb{ background: #1e293b; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover{ background: #334155; } /* Small animation helpers (since we’re not using Tailwind plugins) */ @keyframes fadeInUp { from{ opacity:0; transform: translateY(12px);} to{ opacity:1; transform: translateY(0);} } .fade-in-up{ animation: fadeInUp 700ms ease both; } @media (prefers-reduced-motion: reduce){ .fade-in-up{ animation: none; } } /* ----------------------------- Themes (Dark / Light) - Default: dark - Toggle: add class "theme-light" on ------------------------------ */ :root{ --bg: #050914; --fg: #e2e8f0; --muted: #94a3b8; --muted2: #64748b; --card: rgba(255,255,255,0.04); --card-border: rgba(255,255,255,0.10); --glass: rgba(255,255,255,0.03); --meshA: rgba(37,99,235,0.12); --meshB: rgba(59,130,246,0.10); } html.theme-light{ --bg: #ffffff; --fg: #0f172a; --muted: #334155; --muted2: #475569; --card: rgba(15,23,42,0.04); --card-border: rgba(15,23,42,0.10); --glass: rgba(15,23,42,0.03); --meshA: rgba(37,99,235,0.10); --meshB: rgba(59,130,246,0.08); } body{ background: var(--bg); color: var(--fg); overflow-x: hidden; } img, svg, video, canvas{ max-width: 100%; height: auto; } /* Mesh background uses variables so it works in both themes */ .mesh-bg{ background: radial-gradient(800px 800px at 20% 10%, var(--meshA), transparent 60%), radial-gradient(900px 900px at 80% 30%, var(--meshB), transparent 60%), radial-gradient(800px 800px at 50% 90%, rgba(139,92,246,0.08), transparent 60%); } /* Glass card base (both themes) */ .glass-card{ background: var(--glass); border-color: var(--card-border); } /* Light theme: override common Tailwind "dark-ish" utility colors used in markup */ html.theme-light .text-slate-400{ color: var(--muted) !important; } html.theme-light .text-slate-500{ color: var(--muted2) !important; } html.theme-light .text-slate-600{ color: #64748b !important; } html.theme-light .text-slate-700{ color: #475569 !important; } html.theme-light .text-slate-800{ color: #334155 !important; } html.theme-light .border-white\/5, html.theme-light .border-white\/10{ border-color: var(--card-border) !important; } html.theme-light .bg-white\/5{ background-color: rgba(15,23,42,0.04) !important; } html.theme-light .bg-white\/10{ background-color: rgba(15,23,42,0.08) !important; } /* Make inputs readable in light theme */ html.theme-light input, html.theme-light textarea{ color: #0f172a !important; } html.theme-light input::placeholder, html.theme-light textarea::placeholder{ color: #94a3b8 !important; } /* Prevent huge headings from overflowing on very small screens */ @media (max-width: 360px){ .hero-title{ font-size: 44px !important; line-height: 1.05 !important; } } /* Extra light-theme readability fixes */ html.theme-light .text-slate-200{ color: #0f172a !important; } html.theme-light .text-slate-300{ color: #1f2937 !important; } html.theme-light .hover\:text-white:hover{ color: #0f172a !important; } html.theme-light .group-hover\:text-white{ color: inherit !important; } html.theme-light .glass-card{ box-shadow: 0 1px 0 rgba(15,23,42,0.04); } /* Light theme: make icon tiles visible */ html.theme-light .bg-blue-600\/10{ background-color: rgba(37,99,235,0.12) !important; } html.theme-light .bg-emerald-600\/10{ background-color: rgba(16,185,129,0.12) !important; } html.theme-light .bg-purple-600\/10{ background-color: rgba(147,51,234,0.12) !important; } html.theme-light .text-blue-400{ color: #2563eb !important; } html.theme-light .text-emerald-400{ color: #059669 !important; } html.theme-light .text-purple-400{ color: #7c3aed !important; } /* Light theme: skill icon tile bg-slate-900 becomes light */ html.theme-light .bg-slate-900{ background-color: rgba(15,23,42,0.06) !important; } html.theme-light .group:hover .group-hover\:bg-blue-600{ background-color: #2563eb !important; } html.theme-light .group:hover .group-hover\:text-white{ color: #ffffff !important; } /* Light theme: elegant background gradient */ html.theme-light body{ background: radial-gradient(900px 900px at 15% 10%, rgba(37,99,235,0.10), transparent 60%), radial-gradient(900px 900px at 85% 30%, rgba(147,51,234,0.08), transparent 60%), radial-gradient(900px 900px at 50% 90%, rgba(16,185,129,0.06), transparent 60%), #ffffff; } html.theme-light .current-status-title{ color: #ffffff !important; } /* Contact mobile tweaks */ @media (max-width: 640px){ #contact .glass-card{ border-radius: 2.5rem !important; } } /* Light theme: prevent low-opacity white text from disappearing */ html.theme-light .text-white\/10{ color: rgba(15,23,42,0.35) !important; } html.theme-light .text-white\/20{ color: rgba(15,23,42,0.45) !important; } html.theme-light .text-white\/30{ color: rgba(15,23,42,0.55) !important; } html.theme-light .text-white\/40{ color: rgba(15,23,42,0.65) !important; } /* Hero accent phrase */ .hero-accent{ font-weight: 700; color: #ffffff; } html.theme-light .hero-accent{ background: linear-gradient(90deg, #2563eb, #38bdf8); -webkit-background-clip: text; background-clip: text; color: transparent !important; } /* Krishna logo + Quote gradient */ .krishna-logo{ width: 64px; height: 64px; flex: 0 0 auto; } html.theme-light .quote-text{ color: #0f172a !important; } /* Full quote gradient */ html.theme-light .quote-gradient{ background: linear-gradient(90deg, #2563eb, #38bdf8); -webkit-background-clip: text; background-clip: text; color: transparent !important; } /* Krishna logo next to quote */ .krishna-logo{ width: 56px; height: 56px; flex: 0 0 auto; border-radius: 16px; } /* Quote gradient: subtle in dark, vivid in light */ .quote-gradient{ background: linear-gradient(90deg, rgba(37,99,235,0.55), rgba(56,189,248,0.55)); -webkit-background-clip: text; background-clip: text; color: transparent; } html.theme-light .quote-gradient{ background: linear-gradient(90deg, #2563eb, #38bdf8); -webkit-background-clip: text; background-clip: text; color: transparent !important; } /* Divine glow for Rama logo */ .krishna-logo{ width:64px; height:64px; border-radius:999px; filter: drop-shadow(0 0 10px rgba(37,99,235,0.55)) drop-shadow(0 0 22px rgba(56,189,248,0.35)); } /* Fix: gradient text should not render as a solid background bar */ .quote-gradient{ display: inline; background: linear-gradient(90deg, #2563eb, #38bdf8) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; background-repeat: no-repeat !important; }