/* ========================================================================== home.css — Legal-style hero treatment for the Home page only ========================================================================== Scoped under `.home-modern` (on of home.html). The shared style.css (incl. the legal theme override) loads first; these rules add a dignified, animated ink-navy hero with warm gold + oxblood glows for the home page. The other pages share the legal theme from style.css. ========================================================================== */ /* -------------------------------------------------------------------------- Hero — deep ink canvas with a slow, measured gold/oxblood/navy wash -------------------------------------------------------------------------- */ .home-modern .hero { position: relative; overflow: hidden; min-height: 94vh; background-color: #0a0f17; background-image: radial-gradient(60rem 40rem at 15% -10%, rgba(200, 162, 74, 0.30), transparent 60%), radial-gradient(50rem 40rem at 110% 10%, rgba(107, 34, 48, 0.34), transparent 60%), radial-gradient(50rem 50rem at 50% 120%, rgba(30, 58, 95, 0.34), transparent 60%), linear-gradient(160deg, #0f1622 0%, #0a0f17 70%); background-size: 180% 180%, 180% 180%, 180% 180%, 100% 100%; animation: hm-aurora 26s ease-in-out infinite; } @keyframes hm-aurora { 0% { background-position: 0% 50%, 100% 0%, 50% 100%, 0 0; } 50% { background-position: 100% 50%, 0% 100%, 60% 0%, 0 0; } 100% { background-position: 0% 50%, 100% 0%, 50% 100%, 0 0; } } /* Floating soft glow orbs behind the content — brass + navy */ .home-modern .hero::before, .home-modern .hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.45; pointer-events: none; animation: hm-float 16s ease-in-out infinite alternate; } .home-modern .hero::before { width: 420px; height: 420px; top: -100px; left: -80px; background: rgba(200, 162, 74, 0.45); } .home-modern .hero::after { width: 360px; height: 360px; right: -80px; bottom: -110px; background: rgba(30, 58, 95, 0.55); animation-delay: -8s; } @keyframes hm-float { from { transform: translateY(-14px) translateX(0); } to { transform: translateY(14px) translateX(18px); } } /* Glass content card with a refined brass hairline + gold top rule */ .home-modern .hero-inner { position: relative; z-index: 1; max-width: 52rem; padding: var(--space-12) var(--space-8); background: rgba(15, 22, 34, 0.55); border: 1px solid rgba(200, 162, 74, 0.30); border-top: 3px solid var(--color-gold); border-radius: 20px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); } /* Hero title — warm gold gradient text, classic serif (from style.css) */ .home-modern .hero-title { background: linear-gradient(120deg, #f5e9c8 0%, #d9b865 45%, #c8a24a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--color-gold); /* fallback */ font-weight: 700; letter-spacing: 0.06em; text-shadow: 0 2px 40px rgba(200, 162, 74, 0.25); } .home-modern .hero-subtitle { color: rgba(232, 226, 208, 0.85); } /* Roles rendered as gold pill badges below the primary subtitle. */ .home-modern .hero-roles { list-style: none; margin: 0.9rem auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0.6rem; max-width: 34rem; } .home-modern .hero-role { padding: 0.3rem 0.85rem; font-size: var(--font-size-small); font-weight: var(--font-weight-medium); letter-spacing: 0.04em; color: var(--color-gold-light); background: rgba(200, 162, 74, 0.1); border: 1px solid rgba(200, 162, 74, 0.45); border-radius: 999px; white-space: nowrap; transition: background var(--transition-base), transform var(--transition-base), border-color var(--transition-base); } .home-modern .hero-role:hover { background: rgba(200, 162, 74, 0.2); border-color: var(--color-gold); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .home-modern .hero-role { transition: none; } .home-modern .hero-role:hover { transform: none; } } /* Hero primary CTA — solid gold pill that reads as a brass seal */ .home-modern .hero .btn--primary { background: var(--color-gold); background-image: none; color: #0a0f17; border-color: var(--color-gold); border-radius: 999px; font-weight: 700; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); } .home-modern .hero .btn--primary:hover { background: var(--color-gold-light); color: #0a0f17; border-color: var(--color-gold-light); transform: translateY(-2px); box-shadow: 0 16px 40px rgba(200, 162, 74, 0.4); } /* -------------------------------------------------------------------------- Subtle alternating section tint for depth -------------------------------------------------------------------------- */ .home-modern .content-section:nth-of-type(even) { background: linear-gradient(180deg, rgba(22, 32, 47, 0.4), transparent); } /* -------------------------------------------------------------------------- Respect reduced-motion: freeze the animated backgrounds -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .home-modern .hero, .home-modern .hero::before, .home-modern .hero::after { animation: none; } } /* ========================================================================== PREMIUM MOTION LAYER (home page) ========================================================================== */ /* --- Monogram preloader --------------------------------------------------- */ .preloader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: #0a0f17; transition: opacity 0.6s ease, visibility 0.6s ease; } .preloader.is-done { opacity: 0; visibility: hidden; } .preloader__ring { stroke-dasharray: 244; stroke-dashoffset: 244; animation: hm-draw-ring 1.1s ease forwards, hm-pulse 1.1s ease-in-out 1.1s infinite; } @keyframes hm-draw-ring { to { stroke-dashoffset: 0; } } @keyframes hm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* --- Hero parallax background layer --------------------------------------- */ .home-modern .hero { isolation: isolate; } .hero-bg { position: absolute; inset: -10% -5% -10% -5%; z-index: -1; background-image: radial-gradient(40rem 30rem at 18% 12%, rgba(200, 162, 74, 0.22), transparent 60%), radial-gradient(34rem 30rem at 86% 78%, rgba(107, 34, 48, 0.28), transparent 60%); will-change: transform; } /* --- Scales-of-justice line drawing --------------------------------------- */ .hero-scales { position: absolute; top: 50%; left: 50%; width: min(70vmin, 540px); height: min(70vmin, 540px); transform: translate(-50%, -50%); opacity: 0.12; z-index: 0; pointer-events: none; } .hero-scales .draw { stroke-dasharray: 320; stroke-dashoffset: 320; animation: hm-draw 2.4s ease forwards; } .hero-scales .draw:nth-child(2) { animation-delay: 0.15s; } .hero-scales .draw:nth-child(3) { animation-delay: 0.3s; } .hero-scales .draw:nth-child(4) { animation-delay: 0.45s; } .hero-scales .draw:nth-child(5) { animation-delay: 0.6s; } .hero-scales .draw:nth-child(6) { animation-delay: 0.75s; } @keyframes hm-draw { to { stroke-dashoffset: 0; } } /* Word-by-word hero title reveal (split by JS into .word spans) */ .home-modern .hero-title[data-split] { opacity: 1; /* override the earlier blanket hero fade */ transform: none; animation: none; } /* Each split word must carry the gold gradient itself — otherwise it inherits the parent's transparent text fill with no background and renders invisible. */ .home-modern .hero-title .word { display: inline-block; background: linear-gradient(120deg, #f5e9c8 0%, #d9b865 45%, #c8a24a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--color-gold); /* fallback if background-clip unsupported */ opacity: 0; filter: blur(8px); transform: translateY(28px); animation: hm-word-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .hero-title .word:nth-child(1) { animation-delay: 0.9s; } .hero-title .word:nth-child(2) { animation-delay: 1.05s; } .hero-title .word:nth-child(3) { animation-delay: 1.2s; } .hero-title .word:nth-child(4) { animation-delay: 1.35s; } @keyframes hm-word-in { to { opacity: 1; filter: blur(0); transform: none; } } /* One-time sheen sweep across the title */ .hero-title { position: relative; background-clip: text; -webkit-background-clip: text; } /* --- Tilt container --------------------------------------------------------*/ [data-tilt] { transform-style: preserve-3d; transition: transform 0.18s ease; will-change: transform; } /* --- Hero scroll cue ------------------------------------------------------ */ .hero-scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: 26px; height: 42px; border: 2px solid rgba(200, 162, 74, 0.6); border-radius: 14px; z-index: 1; } .hero-scroll-cue__dot { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; background: var(--color-gold); border-radius: 2px; animation: hm-cue 1.6s ease-in-out infinite; } @keyframes hm-cue { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 80% { opacity: 0; transform: translateY(14px); } 100% { opacity: 0; } } /* --- Scroll-fill education timeline --------------------------------------- */ .timeline { position: relative; margin-top: var(--space-8); } .timeline__line { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: rgba(200, 162, 74, 0.18); border-radius: 3px; overflow: hidden; } .timeline__fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--grad-accent); box-shadow: 0 0 14px rgba(200, 162, 74, 0.6); } .timeline__node { position: absolute; top: var(--space-6); left: -34px; width: 14px; height: 14px; background: #0a0f17; border: 3px solid var(--color-gold); border-radius: 50%; box-shadow: 0 0 0 4px rgba(10, 15, 23, 1); } @media (max-width: 1023px) { .timeline__line { left: 8px; } .timeline__node { left: -34px; } } @media (prefers-reduced-motion: reduce) { .preloader__ring, .hero-scales .draw, .hero-title .word, .hero-scroll-cue__dot { animation: none !important; } .hero-title .word { opacity: 1; filter: none; transform: none; } .hero-scales .draw { stroke-dashoffset: 0; } [data-tilt] { transition: none; } } /* Remove the vertical gold scroll-fill timeline line + nodes in "About Pranab" (kept the cards; just dropped the connecting line that ran between them). */ .timeline__line, .timeline__node { display: none !important; }