/* WebVikash — custom bits Tailwind doesn't cover well. Layout/spacing/colors live in the Tailwind classes on the markup. Colors here are kept in sync with js/tw-config.js */ :root { --bg: #0B0F1A; --accent: #7C5CFF; --accent2: #22D3EE; --grad: linear-gradient(120deg, #7C5CFF 0%, #6D8BFF 46%, #22D3EE 100%); } /* set the dark base early so there's no white flash before Tailwind kicks in */ html { scroll-behavior: smooth; } body { background: var(--bg); color: #F5F7FF; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* soft ambient glows behind everything */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(58% 48% at 12% -6%, rgba(124,92,255,.22), transparent 60%), radial-gradient(52% 42% at 96% 6%, rgba(34,211,238,.15), transparent 60%), radial-gradient(46% 46% at 50% 112%, rgba(109,139,255,.13), transparent 60%); } /* gradient text used on headlines */ .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* the signature filled gradient button */ .btn-grad { background: var(--grad); color: #0A0713; box-shadow: 0 12px 30px -10px rgba(124,92,255,.6); } .btn-grad:hover { box-shadow: 0 18px 44px -12px rgba(124,92,255,.85); } /* card hover glow (the radial top light) */ .glow-card { position: relative; overflow: hidden; } .glow-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; background: radial-gradient(120% 80% at 50% -10%, rgba(124,92,255,.18), transparent 60%); transition: opacity .35s ease; pointer-events: none; } .glow-card:hover::after { opacity: 1; } /* scroll reveal — only hide when JS is active (.js on ), so no-JS users still see everything */ .reveal { transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); } .js .reveal { opacity: 0; transform: translateY(26px); } .js .reveal.in { opacity: 1; transform: none; } .reveal[data-delay="1"] { transition-delay: .08s; } .reveal[data-delay="2"] { transition-delay: .16s; } .reveal[data-delay="3"] { transition-delay: .24s; } .reveal[data-delay="4"] { transition-delay: .32s; } /* tech marquee */ .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee__track { display: flex; gap: 46px; width: max-content; animation: scrollx 34s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes scrollx { to { transform: translateX(-50%); } } /* floating whatsapp pulse ring */ .pulse-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(37,211,102,.5); animation: pulse 2.4s infinite; } @keyframes pulse { 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } } /* portfolio browser-mockup thumbnail (fallback when there's no screenshot) */ .mock__body { background: radial-gradient(90% 70% at 50% -10%, rgba(124,92,255,.30), transparent 70%); } .work-card:hover .mock, .work-card:hover .work-thumb img { transform: scale(1.04); } .mock, .work-thumb img { transition: transform .55s cubic-bezier(.22,1,.36,1); } /* mobile menu slide-in */ .mobile-menu { transform: translateX(100%); transition: transform .4s cubic-bezier(.22,1,.36,1); } .mobile-menu.open { transform: translateX(0); } body.menu-open { overflow: hidden; } /* hamburger -> x */ .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .hamburger span { transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .2s; } /* header goes glassy once you scroll */ .site-header.scrolled { background: rgba(11,15,26,.72); backdrop-filter: blur(16px) saturate(140%); border-bottom-color: rgba(255,255,255,.09) !important; } /* respect reduced motion */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .reveal, .js .reveal { opacity: 1 !important; transform: none !important; } } /* ---- Leadership / team cards ---- */ .team-card { position: relative; overflow: hidden; } .team-card .spotlight { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .5s ease; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(124,92,255,.16), transparent 60%); } .team-card:hover .spotlight { opacity: 1; } /* avatar: rotating gradient ring + soft glow */ .av { position: relative; width: 116px; height: 116px; flex-shrink: 0; } .av::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; z-index: 0; background: conic-gradient(from 0deg, #7C5CFF, #22D3EE, #6D8BFF, #7C5CFF); animation: spin 7s linear infinite; } .av::after { content: ""; position: absolute; inset: -16px; border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, rgba(124,92,255,.45), transparent); filter: blur(14px); } .av__inner { position: absolute; inset: 4px; border-radius: 50%; z-index: 1; display: grid; place-items: center; background: linear-gradient(160deg, #161d30, #0d1220); border: 1px solid rgba(255,255,255,.12); letter-spacing: .02em; } .av--float { animation: floaty 6s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .av::before, .av--float { animation: none !important; } } /* nicer form focus + select arrow on dark bg */ .field:focus { outline: none; border-color: var(--accent); } select.field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239AA3B2' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }