/* ===================================================================== DHUNUCHI DANCE BATTLE — STYLESHEET All custom classes are prefixed "dhb-" to avoid collisions with any host page. No global `body` styling is applied beyond the scoped `.dhb-app` root so this can be dropped into an existing site. ===================================================================== */ :root{ /* ---- Durga Puja palette ---- */ --dhb-maroon: #5A0010; --dhb-dark-red: #8B0015; --dhb-vermilion: #C62828; --dhb-orange: #F4511E; --dhb-gold-orange: #FF9800; --dhb-gold: #FFC107; --dhb-cream: #FFF4DD; --dhb-white: #FFFFFF; --dhb-ink: #2A0A0A; --dhb-panel: rgba(255, 244, 221, 0.06); --dhb-panel-border: rgba(255, 193, 7, 0.28); --dhb-font-display: 'Marcellus', 'Cormorant Garamond', serif; --dhb-font-serif: 'Cormorant Garamond', serif; --dhb-font-body: 'Manrope', sans-serif; --dhb-ease: cubic-bezier(.22,.9,.32,1); } /* ===================================================================== ROOT / RESET (scoped — never touches the host page's ) ===================================================================== */ .dhb-app{ position: relative; min-height: 100vh; width: 100%; overflow-x: hidden; font-family: var(--dhb-font-body); color: var(--dhb-cream); background: radial-gradient(120% 90% at 50% -10%, #7a0018 0%, transparent 55%), linear-gradient(165deg, var(--dhb-maroon) 0%, #3a0a10 55%, #200608 100%); isolation: isolate; } .dhb-app *{ box-sizing: border-box; } .dhb-app button{ font-family: inherit; } .dhb-app img{ max-width: 100%; display: block; } .dhb-app :focus-visible{ outline: 2px solid var(--dhb-gold); outline-offset: 3px; border-radius: 4px; } /* ===================================================================== AMBIENT BACKDROP ===================================================================== */ .dhb-app-backdrop{ position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .dhb-glow{ position: absolute; border-radius: 50%; filter: blur(70px); opacity: .45; } .dhb-glow--one{ width: 46vw; height: 46vw; top: -12vw; left: -10vw; background: radial-gradient(circle, var(--dhb-gold-orange), transparent 70%); } .dhb-glow--two{ width: 50vw; height: 50vw; bottom: -18vw; right: -14vw; background: radial-gradient(circle, var(--dhb-vermilion), transparent 70%); } .dhb-alpona{ position: absolute; width: 240px; height: 240px; opacity: .10; background: repeating-conic-gradient(from 0deg, var(--dhb-gold) 0deg 4deg, transparent 4deg 18deg); border-radius: 50%; mask: radial-gradient(circle, black 60%, transparent 72%); } .dhb-alpona--left{ top: 8%; left: -60px; } .dhb-alpona--right{ bottom: 6%; right: -60px; } .dhb-smoke-layer{ position: absolute; inset: 0; } @media (prefers-reduced-motion: no-preference){ .dhb-glow--one{ animation: dhb-drift 14s ease-in-out infinite alternate; } .dhb-glow--two{ animation: dhb-drift 16s ease-in-out infinite alternate-reverse; } .dhb-alpona{ animation: dhb-rotate-slow 90s linear infinite; } } @keyframes dhb-drift{ from{ transform: translate(0,0); } to{ transform: translate(3vw, 2vw); } } @keyframes dhb-rotate-slow{ to{ transform: rotate(360deg); } } /* ===================================================================== STAGE SYSTEM — one page, multiple stages shown/hidden with JS ===================================================================== */ .dhb-stage{ position: relative; z-index: 1; display: none; min-height: 100vh; width: 100%; padding: clamp(1.25rem, 4vw, 3rem); align-items: center; justify-content: center; animation: dhb-stage-in .6s var(--dhb-ease) both; } .dhb-stage--active{ display: flex; } @keyframes dhb-stage-in{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce){ .dhb-stage{ animation: none; } } .dhb-eyebrow{ font-size: .8rem; letter-spacing: .04em; color: var(--dhb-gold); margin: 0 0 .5rem; font-weight: 600; } /* ===================================================================== STAGE 1 — INTRO ===================================================================== */ .dhb-intro{ max-width: 640px; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; } .dhb-emblem{ position: relative; width: 108px; height: 108px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.75rem; animation: dhb-emblem-reveal 1s var(--dhb-ease) both; } @keyframes dhb-emblem-reveal{ from{ opacity: 0; transform: scale(.6) rotate(-8deg); } to{ opacity: 1; transform: scale(1) rotate(0); } } .dhb-emblem-ring{ position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--dhb-gold); box-shadow: 0 0 34px 4px rgba(255, 152, 0, .45); } .dhb-emblem-ring::before{ content: ""; position: absolute; inset: 14px; border-radius: 50%; border: 1px solid rgba(255,193,7,.4); } .dhb-emblem-icon{ font-size: 2.6rem; color: var(--dhb-gold); filter: drop-shadow(0 0 10px rgba(255,152,0,.6)); } .dhb-title{ font-family: var(--dhb-font-display); font-weight: 400; line-height: 1.05; margin: 0 0 .85rem; animation: dhb-emblem-reveal 1s .1s var(--dhb-ease) both; } .dhb-title-line{ display: block; font-size: clamp(2.4rem, 8vw, 4.2rem); color: var(--dhb-cream); } .dhb-title-line--accent{ background: linear-gradient(90deg, var(--dhb-gold-orange), var(--dhb-gold) 50%, var(--dhb-orange)); -webkit-background-clip: text; background-clip: text; color: transparent; } .dhb-subtitle{ font-size: 1rem; letter-spacing: .03em; color: var(--dhb-cream); opacity: .85; margin: 0 0 .25rem; } .dhb-tagline{ font-size: .82rem; letter-spacing: .08em; color: var(--dhb-gold); opacity: .8; margin: 0 0 2.5rem; } .dhb-loading{ width: 100%; max-width: 360px; } .dhb-loading-track{ width: 100%; height: 3px; background: rgba(255,244,221,.15); border-radius: 3px; overflow: hidden; } .dhb-loading-fill{ height: 100%; width: 0%; border-radius: 3px; background: linear-gradient(90deg, var(--dhb-vermilion), var(--dhb-gold)); box-shadow: 0 0 12px rgba(255,193,7,.7); transition: width .12s linear; } .dhb-loading-label{ margin: .85rem 0 0; font-size: .85rem; color: var(--dhb-cream); opacity: .75; letter-spacing: .02em; } .dhb-countdown{ margin-top: 1.5rem; } .dhb-countdown-number{ display: inline-block; font-family: var(--dhb-font-display); font-size: clamp(4rem, 18vw, 7rem); color: var(--dhb-gold); text-shadow: 0 0 40px rgba(255,152,0,.6); animation: dhb-countdown-pop .85s var(--dhb-ease); } @keyframes dhb-countdown-pop{ 0%{ opacity: 0; transform: scale(.4); } 35%{ opacity: 1; transform: scale(1.12); } 100%{ opacity: 0; transform: scale(1.4); } } @media (prefers-reduced-motion: reduce){ .dhb-countdown-number{ animation: none; } } /* ===================================================================== STAGE 2 — CAMERA SETUP ===================================================================== */ .dhb-camera-setup{ max-width: 820px; width: 100%; text-align: center; } .dhb-stage-header{ margin-bottom: 2rem; } .dhb-stage-title{ font-family: var(--dhb-font-display); font-size: clamp(1.7rem, 4.5vw, 2.6rem); margin: 0 0 .5rem; color: var(--dhb-cream); } .dhb-stage-subtitle{ font-size: .95rem; color: var(--dhb-cream); opacity: .75; margin: 0; } .dhb-players-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; } @media (max-width: 600px){ .dhb-players-grid{ grid-template-columns: 1fr; } } .dhb-cam-card{ background: var(--dhb-panel); border: 1px solid var(--dhb-panel-border); border-radius: 18px; padding: 1rem; backdrop-filter: blur(6px); } .dhb-cam-card-label{ font-size: .85rem; font-weight: 700; letter-spacing: .02em; color: var(--dhb-gold); margin-bottom: .65rem; display: flex; align-items: center; gap: .4rem; justify-content: center; } .dhb-cam-frame{ position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: rgba(0,0,0,.35); border: 1px solid rgba(255,193,7,.18); } .dhb-cam-video{ width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); /* mirror for natural self-view */ display: none; } .dhb-cam-video.dhb-cam-video--live{ display: block; } .dhb-cam-placeholder{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; color: var(--dhb-cream); opacity: .55; font-size: .82rem; text-align: center; padding: .5rem; } .dhb-cam-placeholder i{ font-size: 1.6rem; } .dhb-cam-placeholder.dhb-hidden{ display: none; } .dhb-cam-note{ font-size: .82rem; color: var(--dhb-cream); opacity: .65; margin: 0 0 1.25rem; } .dhb-cam-error{ background: rgba(139,0,21,.35); border: 1px solid var(--dhb-dark-red); color: var(--dhb-cream); padding: .75rem 1rem; border-radius: 10px; font-size: .85rem; margin-bottom: 1.25rem; text-align: left; } .dhb-cam-actions{ display: flex; gap: .85rem; justify-content: center; flex-wrap: wrap; } /* ===================================================================== BUTTONS ===================================================================== */ .dhb-btn{ font-family: var(--dhb-font-body); font-weight: 700; font-size: .92rem; border: none; border-radius: 999px; padding: .8rem 1.7rem; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; transition: transform .2s var(--dhb-ease), box-shadow .2s var(--dhb-ease), filter .2s; } .dhb-btn--primary{ background: linear-gradient(90deg, var(--dhb-vermilion), var(--dhb-orange)); color: var(--dhb-white); box-shadow: 0 8px 24px -8px rgba(198,40,40,.6); } .dhb-btn--primary:hover{ transform: translateY(-2px); filter: brightness(1.08); } .dhb-btn--ghost{ background: transparent; color: var(--dhb-cream); border: 1px solid rgba(255,244,221,.35); } .dhb-btn--ghost:hover{ background: rgba(255,244,221,.08); } .dhb-btn--large{ padding: 1rem 2.4rem; font-size: 1rem; } /* ===================================================================== INLINE COUNTDOWN (camera stage) ===================================================================== */ .dhb-countdown--inline{ margin-top: 1.5rem; } /* ===================================================================== STAGE 3 — BATTLE ===================================================================== */ .dhb-battle{ width: 100%; max-width: 1320px; display: flex; flex-direction: column; gap: 1rem; } .dhb-battle-topbar{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .dhb-timer{ font-family: var(--dhb-font-display); font-size: 1.5rem; color: var(--dhb-gold); display: flex; align-items: center; gap: .5rem; min-width: 110px; } .dhb-timer.dhb-timer--urgent{ color: var(--dhb-orange); animation: dhb-timer-pulse 1s ease-in-out infinite; } @keyframes dhb-timer-pulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.08); } } .dhb-battle-heading{ text-align: center; flex: 1 1 260px; } .dhb-battle-heading-title{ display: block; font-family: var(--dhb-font-display); font-size: clamp(1rem, 2.4vw, 1.35rem); color: var(--dhb-cream); } .dhb-battle-heading-sub{ display: block; font-size: .74rem; letter-spacing: .04em; color: var(--dhb-gold); opacity: .8; margin-top: .15rem; } .dhb-step-counter{ font-size: .85rem; font-weight: 700; color: var(--dhb-cream); background: var(--dhb-panel); border: 1px solid var(--dhb-panel-border); padding: .4rem .9rem; border-radius: 999px; min-width: 110px; text-align: center; } .dhb-battle-grid{ display: grid; grid-template-columns: 240px 1fr 240px; gap: 1rem; align-items: stretch; } @media (max-width: 991px){ .dhb-battle-grid{ grid-template-columns: 200px 1fr 200px; } } @media (max-width: 768px){ .dhb-battle-grid{ grid-template-columns: 1fr; } } .dhb-player-panel{ background: var(--dhb-panel); border: 1px solid var(--dhb-panel-border); border-radius: 18px; padding: 1rem; display: flex; flex-direction: column; gap: .9rem; backdrop-filter: blur(6px); } .dhb-player-panel-head{ display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--dhb-cream); font-size: .95rem; } .dhb-player-icon{ color: var(--dhb-gold); } .dhb-meter-block, .dhb-gesture-block, .dhb-score-block{ display: flex; flex-direction: column; gap: .35rem; } .dhb-meter-label, .dhb-gesture-label, .dhb-score-label{ font-size: .68rem; letter-spacing: .05em; color: var(--dhb-gold); opacity: .85; } .dhb-meter-track{ width: 100%; height: 8px; border-radius: 999px; background: rgba(255,244,221,.12); overflow: hidden; } .dhb-meter-fill{ height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--dhb-vermilion), var(--dhb-gold)); transition: width .5s var(--dhb-ease); } .dhb-meter-value{ align-self: flex-end; font-size: .8rem; font-weight: 700; color: var(--dhb-cream); } .dhb-gesture-value{ font-size: .92rem; font-weight: 600; color: var(--dhb-cream); min-height: 1.3em; } .dhb-score-value{ font-family: var(--dhb-font-display); font-size: 1.8rem; color: var(--dhb-gold); line-height: 1; } .dhb-panel-cam{ margin-top: auto; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; background: rgba(0,0,0,.35); border: 1px solid rgba(255,193,7,.18); } .dhb-panel-cam-video{ width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); } .dhb-stage-center{ display: flex; flex-direction: column; gap: .6rem; } .dhb-reference-frame{ position: relative; flex: 1; min-height: 320px; border-radius: 20px; overflow: hidden; background: radial-gradient(120% 100% at 50% 100%, rgba(255,152,0,.18), transparent 60%), rgba(0,0,0,.4); border: 1px solid var(--dhb-panel-border); box-shadow: 0 0 40px -10px rgba(255,152,0,.35) inset; } .dhb-reference-video{ width: 100%; height: 100%; object-fit: cover; display: none; } .dhb-reference-video.dhb-reference-video--live{ display: block; } .dhb-reference-placeholder{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; } .dhb-reference-tag{ font-size: .72rem; letter-spacing: .06em; color: var(--dhb-gold); opacity: .8; } /* --- Dual landscape reference videos, side by side --- */ .dhb-reference-frame--dual{ display: flex; flex-direction: row; align-items: stretch; gap: 2px; padding-bottom: 2.1rem; /* room for the shared caption below */ } .dhb-reference-panel{ position: relative; flex: 1 1 50%; min-width: 0; aspect-ratio: 16 / 9; /* landscape orientation for each clip */ overflow: hidden; } .dhb-reference-panel:first-child{ border-right: 1px solid rgba(255,193,7,.25); } .dhb-reference-panel .dhb-reference-video{ object-fit: cover; } .dhb-reference-panel .dhb-reference-placeholder{ transform: scale(.82); /* keep the CSS dancer proportioned in a wide panel */ } .dhb-reference-tag--dual{ position: absolute; left: 50%; bottom: .6rem; transform: translateX(-50%); } @media (max-width: 768px){ .dhb-reference-frame--dual{ flex-direction: column; } .dhb-reference-panel:first-child{ border-right: none; border-bottom: 1px solid rgba(255,193,7,.25); } .dhb-reference-panel{ aspect-ratio: 16 / 9; } } /* Simple CSS "dancer" placeholder choreography */ .dhb-dancer{ position: relative; width: 120px; height: 200px; } .dhb-dancer-head{ position: absolute; top: 0; left: 50%; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; background: var(--dhb-gold); box-shadow: 0 0 18px rgba(255,193,7,.5); } .dhb-dancer-torso{ position: absolute; top: 32px; left: 50%; width: 26px; height: 78px; margin-left: -13px; border-radius: 13px; background: linear-gradient(180deg, var(--dhb-vermilion), var(--dhb-dark-red)); } .dhb-dancer-arm{ position: absolute; top: 42px; width: 10px; height: 62px; border-radius: 6px; background: var(--dhb-orange); transform-origin: top center; } .dhb-dancer-arm--left{ left: calc(50% - 22px); animation: dhb-arm-swing-left 2.2s ease-in-out infinite; } .dhb-dancer-arm--right{ left: calc(50% + 12px); animation: dhb-arm-swing-right 2.2s ease-in-out infinite; } .dhb-dancer-leg{ position: absolute; top: 108px; width: 12px; height: 70px; border-radius: 6px; background: var(--dhb-dark-red); transform-origin: top center; } .dhb-dancer-leg--left{ left: calc(50% - 16px); animation: dhb-leg-swing-left 2.2s ease-in-out infinite; } .dhb-dancer-leg--right{ left: calc(50% + 4px); animation: dhb-leg-swing-right 2.2s ease-in-out infinite; } .dhb-dancer-dhunuchi{ position: absolute; top: 18px; left: calc(50% + 20px); width: 16px; height: 20px; background: var(--dhb-gold); border-radius: 3px 3px 8px 8px; animation: dhb-arm-swing-right 2.2s ease-in-out infinite; transform-origin: top center; } .dhb-dancer-smoke{ position: absolute; top: -14px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: rgba(255,244,221,.5); filter: blur(4px); animation: dhb-smoke-rise 1.8s ease-out infinite; } @keyframes dhb-arm-swing-left{ 0%,100%{ transform: rotate(-18deg); } 50%{ transform: rotate(22deg); } } @keyframes dhb-arm-swing-right{ 0%,100%{ transform: rotate(18deg); } 50%{ transform: rotate(-22deg); } } @keyframes dhb-leg-swing-left{ 0%,100%{ transform: rotate(-10deg); } 50%{ transform: rotate(10deg); } } @keyframes dhb-leg-swing-right{ 0%,100%{ transform: rotate(10deg); } 50%{ transform: rotate(-10deg); } } @keyframes dhb-smoke-rise{ 0%{ opacity: .8; transform: translateY(0) scale(1); } 100%{ opacity: 0; transform: translateY(-26px) scale(1.8); } } @media (prefers-reduced-motion: reduce){ .dhb-dancer-arm, .dhb-dancer-leg, .dhb-dancer-dhunuchi, .dhb-dancer-smoke{ animation: none; } } .dhb-current-step-name{ text-align: center; font-family: var(--dhb-font-display); font-size: 1.1rem; color: var(--dhb-gold); margin: 0; } /* Timeline */ .dhb-timeline{ overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--dhb-gold) transparent; padding-bottom: .35rem; } .dhb-timeline-track{ display: flex; gap: .5rem; width: max-content; } .dhb-timeline-step{ flex: 0 0 auto; font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: var(--dhb-cream); opacity: .55; background: var(--dhb-panel); border: 1px solid var(--dhb-panel-border); padding: .5rem .85rem; border-radius: 999px; white-space: nowrap; transition: all .3s var(--dhb-ease); } .dhb-timeline-step.dhb-timeline-step--active{ opacity: 1; color: var(--dhb-ink); background: linear-gradient(90deg, var(--dhb-gold), var(--dhb-gold-orange)); box-shadow: 0 0 16px rgba(255,193,7,.5); transform: translateY(-2px); } .dhb-timeline-step.dhb-timeline-step--done{ opacity: .8; border-color: rgba(255,193,7,.5); } /* ===================================================================== STAGE 4 — RESULTS ===================================================================== */ .dhb-result{ max-width: 900px; width: 100%; text-align: center; position: relative; } .dhb-result-title{ font-family: var(--dhb-font-display); font-size: clamp(1.7rem, 5vw, 2.6rem); margin: 0 0 2rem; } .dhb-result-cards{ display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 4vw, 3rem); flex-wrap: wrap; margin-bottom: 2rem; } .dhb-result-card{ display: flex; flex-direction: column; align-items: center; gap: .6rem; } .dhb-result-card-label{ font-weight: 700; color: var(--dhb-cream); font-size: .95rem; } .dhb-ring{ position: relative; width: 132px; height: 132px; display: flex; align-items: center; justify-content: center; } .dhb-ring-svg{ width: 100%; height: 100%; transform: rotate(-90deg); } .dhb-ring-track{ fill: none; stroke: rgba(255,244,221,.12); stroke-width: 10; } .dhb-ring-fill{ fill: none; stroke: url(#dhb-ring-gradient); stroke: var(--dhb-gold); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset 1.4s var(--dhb-ease); } .dhb-ring-value{ position: absolute; font-family: var(--dhb-font-display); font-size: 1.6rem; color: var(--dhb-cream); } .dhb-result-card-sub{ font-size: .72rem; letter-spacing: .05em; color: var(--dhb-gold); opacity: .8; } .dhb-result-winner{ display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 1rem 1.5rem; border-radius: 16px; background: linear-gradient(180deg, rgba(255,193,7,.14), transparent); border: 1px solid var(--dhb-panel-border); } .dhb-result-winner i{ font-size: 1.6rem; color: var(--dhb-gold); } .dhb-winner-label{ font-size: .72rem; letter-spacing: .08em; color: var(--dhb-gold); opacity: .85; } .dhb-winner-name{ font-family: var(--dhb-font-display); font-size: 1.5rem; color: var(--dhb-cream); } .dhb-stats-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; margin-bottom: 2.25rem; } @media (max-width: 768px){ .dhb-stats-grid{ grid-template-columns: 1fr 1fr; } } .dhb-stat-card{ background: var(--dhb-panel); border: 1px solid var(--dhb-panel-border); border-radius: 14px; padding: .9rem; display: flex; flex-direction: column; gap: .35rem; } .dhb-stat-label{ font-size: .68rem; letter-spacing: .04em; color: var(--dhb-gold); opacity: .8; } .dhb-stat-value{ font-size: .92rem; font-weight: 700; color: var(--dhb-cream); } .dhb-confetti-layer{ position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: -1; } .dhb-confetti-piece{ position: absolute; top: -20px; width: 8px; height: 14px; opacity: .9; animation: dhb-confetti-fall linear forwards; } @keyframes dhb-confetti-fall{ to{ transform: translateY(110vh) rotate(540deg); opacity: 0; } } @media (prefers-reduced-motion: reduce){ .dhb-confetti-piece{ animation: none; display: none; } } /* ===================================================================== FLOATING PARTICLES (shared, injected by JS) ===================================================================== */ .dhb-particle{ position: absolute; border-radius: 50%; background: var(--dhb-gold); opacity: .55; filter: blur(.5px); animation: dhb-float linear infinite; } @keyframes dhb-float{ 0%{ transform: translateY(0); opacity: 0; } 10%{ opacity: .6; } 90%{ opacity: .5; } 100%{ transform: translateY(-110vh); opacity: 0; } } @media (prefers-reduced-motion: reduce){ .dhb-particle{ animation: none; display: none; } }