/* ============================================ MPL - Mali Samaj Premier League Main Stylesheet ============================================ */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap'); /* ------------------------------------------------------------------ THEME TOKENS Website do roop me chalti hai - Dark (asli wala) aur Light. Header ke sun/moon button se badalti hai aur choice browser me yaad rehti hai (localStorage -> ). Neeche wale :root me DARK ke rang hain. Light ke rang isi file ke aakhir me [data-theme="light"] block me hain. Poori stylesheet sirf in tokens ko use karti hai, isliye ek jagah badalne se saari website badal jaati hai. --s0 .. --s5 surface ki seedhi (s0 sabse gehra/peechhe, s5 sabse uthaa hua) - card, panel, gradient --s-red laal jhaank wala gehra background --fx hairline / halke bhare hisson ka channel "rgba(var(--fx),0.07)" ki tarah use hota hai --shade parchhai (shadow) ka channel --text-strong sabse tez text (dark me safed) --text-soft halka pheeka text ------------------------------------------------------------------ */ :root{ --bg-body: #0b0e17; --bg-darker: #05070c; --bg-card: #10141f; --bg-card-alt: #12161f; --red: #e31e26; --red-dark: #b3151b; --gold: #e0a94d; --text-light: #f5f6f8; --text-muted: #9aa0ad; --border-red: rgba(227,30,38,0.35); --border-gold: rgba(224,169,77,0.4); --radius: 4px; --container: 1200px; /* Surface ki seedhi - gehre se uthe hue tak */ --s0: #05070c; --s1: #0a0d14; --s2: #0d1119; --s3: #11151f; --s4: #151a27; --s5: #1b2130; --s-red: #1a0d10; /* Channels - inhi ke sahare hairline aur shadow palat jaate hain */ --fx: 255,255,255; --shade: 0,0,0; /* Text */ --text-strong: #ffffff; --text-soft: #c8ccd6; /* Logo / photo ke peechhe ki safed gaddi (dono theme me safed hi) */ --plate: #ffffff; /* Laal/sunehre button ke uper ka text - dono theme me safed */ --on-brand: #ffffff; /* Jeet / haar ke rang - point table, match result, form message */ --ok: #4caf50; --lose: #ff4d55; --lose-soft: #ffb3b7; --info: #3b9dff; /* Orange / Purple Cap ka rang - text ke liye */ --cap-orange: #f0873c; --cap-purple: #a06ee0; --cap-mvp: #35b36a; /* MVP / best all-rounder - green */ /* Match card ke ghoomte hue accent (schedule.php se aate hain) */ --acc-red: 227,30,38; --acc-purple: 168,85,247; --acc-blue: 59,157,255; --acc-amber: 245,158,11; --acc-green: 34,197,94; --acc-gold: 224,169,77; color-scheme: dark; } *,*::before,*::after{ box-sizing: border-box; } /* JS jab kisi item ko chhupata hai to `hidden` attribute lagata hai. Kai jagah class me display:block/grid likha hai jo hidden ko dabaa deta hai, isliye ye rule sabse upar rakhna zaroori hai. */ [hidden]{ display:none !important; } body{ margin:0; background: var(--bg-body); color: var(--text-light); font-family: 'Poppins', sans-serif; line-height: 1.6; } a{ text-decoration:none; color:inherit; } ul{ list-style:none; margin:0; padding:0; } img{ max-width:100%; display:block; } button{ font-family:inherit; cursor:pointer; } .container{ max-width: var(--container); margin:0 auto; padding: 0 24px; } .section-pad{ padding: 60px 0; } /* ---------- Section Heading ---------- */ .section-heading{ text-align:center; margin-bottom: 40px; font-size: 26px; font-weight:700; letter-spacing:1px; display:flex; align-items:center; justify-content:center; gap:14px; text-transform:uppercase; } .section-heading::before, .section-heading::after{ content:""; width:60px; height:1px; background: linear-gradient(90deg, transparent, var(--red)); } .section-heading::after{ background: linear-gradient(90deg, var(--red), transparent); } .page-heading{ font-size: 44px; font-weight:800; text-transform:uppercase; line-height:1.15; margin:0 0 10px 0; } .page-heading .accent{ color: var(--red); } .page-underline{ display:flex; align-items:center; gap:10px; margin: 14px 0; } .page-underline span.line{ width:60px;height:1px;background:#555; } .page-underline span.dot{ width:8px;height:8px;border-radius:50%;background:#fff; } /* ---------- Header / Nav (floating pill bar) ---------- Header khud transparent hai - andar wali .nav-wrap ek gol kinaaron wali "pill" hai jo page ke top se thoda hat kar tairti hui dikhti hai. */ header.site-header{ position: sticky; top:0; z-index: 100; padding: 16px 18px 12px; background: linear-gradient(180deg, rgba(5,7,12,0.94) 0%, rgba(5,7,12,0.60) 60%, rgba(5,7,12,0) 100%); } .nav-wrap{ position:relative; max-width: 1540px; margin:0 auto; padding: 10px 14px 10px 22px; display:flex; align-items:center; justify-content:space-between; gap: 18px; border-radius: 30px; background: linear-gradient(180deg,var(--s5) 0%, var(--s2) 58%, var(--s0) 100%); border:1px solid rgba(var(--fx),0.09); box-shadow: inset 0 1px 0 rgba(var(--fx),0.07), 0 18px 40px rgba(var(--shade),0.55); } /* Neeche-baaye halki si garam roshni - logo ki flame ka reflection */ .nav-wrap::before{ content:""; position:absolute; left:0; bottom:0; width:340px; height:100%; border-radius:inherit; background:radial-gradient(130px 62px at 100px 100%, rgba(224,169,77,0.16), transparent 72%); pointer-events:none; } .logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; position:relative; /* glow ke uper */ } /* Logo ke saath ab koi text nahi hai, isliye height fix aur width auto - warna wide logo square me daba kar khinch jata hai */ .logo img{ height:74px; width:auto; max-width:270px; display:block; } /* Header ka logo ek fix height wale dabbe me baithta hai. Scroll par sirf andar wali chhoti hoti hai - dabba utna hi rehta hai, isliye header ki height nahi badalti aur page neeche khisakta nahi. */ .site-header .logo{ height:74px; } .site-header .logo img{ align-self:center; } /* Do logo - ek dark mode ka, ek light mode ka (Admin > Website Settings > Light Mode Logo). Sunehra logo safed header par phika lagta hai, isliye light mode ke liye gehra/laal roop dala ja sakta hai. Dono HTML me rehte hain, dikhta ek hi hai. Isse theme badalte hi logo turant badalta hai - photo pehle se load hoti hai, jhatka nahi lagta. Light logo na diya ho to .has-light lagti hi nahi aur normal logo dono theme me chalta rehta hai. */ .logo .logo-light{ display:none; } [data-theme="light"] .logo.has-light .logo-dark { display:none; } [data-theme="light"] .logo.has-light .logo-light{ display:block; } nav.main-nav ul{ display:flex; gap: 4px; } nav.main-nav a{ display:block; font-size:13.5px; font-weight:600; letter-spacing:1.2px; color: var(--text-light); padding:10px 13px; border-radius:11px; position:relative; white-space:nowrap; } nav.main-nav a:hover{ color:var(--text-strong); background:rgba(var(--fx),0.06); } /* Jis page pe ho wo link lal, chaaro taraf lal glow ke saath */ nav.main-nav a.active{ color: var(--red); background:rgba(227,30,38,0.10); box-shadow:0 0 0 1px rgba(227,30,38,0.35), 0 0 22px rgba(227,30,38,0.28), inset 0 0 18px rgba(227,30,38,0.18); } nav.main-nav a.active:hover{ color: var(--red); background:rgba(227,30,38,0.15); } /* Us pill ke neeche chhoti si lal patti */ nav.main-nav a.active::after{ content:""; position:absolute; left:50%; bottom:-9px; transform:translateX(-50%); width:46px; height:3px; border-radius:3px; background: var(--red); box-shadow:0 0 10px rgba(227,30,38,0.75); } /* --- Samaj badges row in mobile header --- */ .samaj-row{ display:none; } @media (max-width: 900px){ .samaj-row{ display:flex; align-items:center; gap:4px; margin:0; flex-shrink:0; } .samaj-badge{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:radial-gradient(circle at 40% 35%, rgba(255,255,255,0.18), rgba(0,0,0,0.55)); border:1px solid rgba(224,169,77,0.8); box-shadow:0 0 6px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.3); overflow:hidden; flex-shrink:0; } .samaj-badge img{ width:100%; height:100%; object-fit:cover; border-radius:50%; } header.site-header{ padding:8px 8px 6px; } .site-header .nav-wrap{ padding:6px 10px 6px 12px; gap:6px; border-radius:22px; } .site-header .logo{ height:38px; } .logo img{ height:38px; max-width:115px; } .header-actions{ gap:6px; } .lang-btn{ width:32px; height:32px; border-radius:8px; } .lang-btn .lang-icon-svg{ width:16px; height:16px; } .nav-toggle{ width:32px; height:32px; font-size:14px; } .btn-admin{ padding:7px 10px; font-size:10.5px; letter-spacing:0; } } .header-actions{ display:flex; align-items:center; gap:14px; flex-shrink:0; } /* ---------- 3-Language Switcher (Dropdown matching screenshot) ---------- */ .lang-switch-wrap{ position:relative; } .lang-btn{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0; border-radius:10px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); color:var(--gold); cursor:pointer; transition:all .2s ease; } .lang-btn .lang-icon-svg{ width:20px; height:20px; display:block; color:var(--gold); } [data-theme="light"] .lang-btn{ background:rgba(0,0,0,0.05); border-color:rgba(0,0,0,0.12); color:var(--text-strong); } [data-theme="light"] .lang-btn .lang-icon-svg{ color:var(--text-strong); } .lang-btn:hover, .lang-switch-wrap.is-open .lang-btn{ background:rgba(255,255,255,0.14); border-color:var(--gold); box-shadow:0 0 14px rgba(224,169,77,0.35); } .lang-dropdown{ position:absolute; top:calc(100% + 8px); right:0; min-width:170px; background:#1d2129; border:1px solid rgba(255,255,255,0.12); border-radius:12px; box-shadow:0 18px 45px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.06); padding:6px; z-index:9999; opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .18s ease, transform .18s ease; } .lang-dropdown.show{ opacity:1; transform:translateY(0); pointer-events:auto; } .lang-opt{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:8px; font-size:13.5px; font-weight:500; color:#f0f2f5; cursor:pointer; transition:background .15s ease, color .15s ease; } .lang-opt:hover{ background:rgba(255,255,255,0.08); color:#fff; } .lang-opt .lang-check{ font-size:12px; color:var(--gold); opacity:0; transform:scale(0.8); transition:opacity .15s ease, transform .15s ease; } .lang-opt.is-active{ background:rgba(224,169,77,0.14); color:var(--gold); font-weight:700; } .lang-opt.is-active .lang-check{ opacity:1; transform:scale(1); } /* Hide Google Translate top banner & iframe styling */ body{ top:0 !important; } .goog-te-banner-frame{ display:none !important; } .skiptranslate{ display:none !important; } #goog-gt-tt, .goog-te-balloon-frame{ display:none !important; } .goog-text-highlight{ background:none !important; box-shadow:none !important; } .btn-admin{ background: var(--red); color:var(--on-brand); padding:10px 18px; border-radius:2px; font-size:13px; font-weight:700; letter-spacing:0.5px; display:flex; align-items:center; gap:8px; border:none; white-space:nowrap; text-decoration:none; cursor:pointer; }.btn-admin:hover{ background: var(--red-dark); color:var(--on-brand); } /* ---------- Header ka "Registration" CTA ---------- Desktop par nav ke baad ek chamakta hua button. Mobile par ye chhup jata hai aur wahi link hamburger menu ke andar (.nav-register-item) dikhta hai - dono ek saath kabhi nahi dikhte. */ .btn-register{ display:inline-flex; align-items:center; padding:11px 18px; border-radius:999px; background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%); color:#fff; font-family:'Barlow Condensed', sans-serif; font-size:15px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; text-decoration:none; white-space:nowrap; border:1px solid rgba(224,169,77,0.55); box-shadow:0 8px 20px rgba(227,30,38,0.32); transition:transform .25s ease, box-shadow .25s ease, filter .25s ease; } .btn-register:hover{ color:#fff; transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 12px 26px rgba(227,30,38,0.45); } .btn-register.active{ border-color:var(--gold); box-shadow:0 0 0 2px rgba(224,169,77,0.28), 0 10px 24px rgba(227,30,38,0.42); } /* Desktop par menu se REGISTER hata dete hain - button hi kaafi hai */ @media (min-width: 769px){ .nav-register-item{ display:none; } } /* Laptop par pill me jagah kam hoti hai - button ko utna hi chhota rakhte hain jitni jagah pehle nav ka REGISTER link leta tha, taki header ki chaudai na badhe (nav ka 1320px wala compaction isi soch se hai). */ @media (max-width: 1560px){ .btn-register{ padding:9px 13px; font-size:13px; letter-spacing:0.3px; } } @media (max-width: 1400px){ .btn-register{ padding:8px 11px; font-size:12.5px; } } /* mobile nav toggle */ .nav-toggle{ display:none; background:none;border:none;color:var(--text-strong);font-size:24px; } /* ---------- Hero Banner (inner pages) ---------- Home slider ki tarah: image poore banner ko bharti hai aur heading/subtitle uske uper aate hain. Pehle image side me chhoti si dikhti thi. */ .page-hero{ position:relative; overflow:hidden; background: linear-gradient(120deg, var(--s1) 40%, var(--s-red) 100%); border-bottom: 1px solid rgba(227,30,38,0.2); } .page-hero .container{ display:flex; align-items:center; gap: 30px; padding-top: 80px; padding-bottom: 80px; min-height: 320px; position:relative; z-index:2; } /* Background image layer */ .page-hero .hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; } .page-hero .hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; } /* Image ke uper dark layer - warna text padha nahi jaata */ .page-hero .hero-bg::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(11,14,23,0.92) 0%, rgba(11,14,23,0.76) 45%, rgba(11,14,23,0.35) 100%), linear-gradient(0deg, rgba(11,14,23,0.85) 0%, transparent 60%); } .page-hero-text{ max-width:640px; position:relative; z-index:2; } .page-hero-text p.subtitle{ color: var(--text-soft); font-size:15px; margin-top:10px; max-width:480px; text-shadow:0 2px 10px rgba(var(--shade),0.6); } .page-hero .breadcrumb{ color: var(--text-soft); font-size:14px; margin-top:6px; } .page-hero .breadcrumb .current{ color: var(--red); } .hero-glow{ position:absolute; inset:0; background: radial-gradient(circle at 15% 20%, rgba(227,30,38,0.15), transparent 40%), radial-gradient(circle at 85% 60%, rgba(224,169,77,0.08), transparent 45%); z-index:1; } /* ---------- Home Hero Slider ---------- */ .home-hero{ position:relative; background: linear-gradient(120deg,var(--s1) 35%, var(--s-red) 100%); overflow:hidden; border-bottom: 1px solid rgba(227,30,38,0.15); } .home-hero .container{ display:flex; align-items:center; gap:40px; padding: 90px 24px 80px; min-height:460px; position:relative; z-index:2; } /* Ek waqt me sirf active slide dikhegi */ .home-hero .hero-slide{ display:none; position:relative; z-index:2; } .home-hero .hero-slide.active{ display:block; animation: heroFade .5s ease; } @keyframes heroFade{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } /* Slide ki image poore slider ko bharti hai (chhoti ho ya badi, object-fit:cover use stretch kiye bina crop karke full cover kar deta hai) */ .home-hero .hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; } .home-hero .hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; } /* Image ke uper dark layer - warna uske uper ka text padha nahi jaata */ .home-hero .hero-bg::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(11,14,23,0.92) 0%, rgba(11,14,23,0.78) 45%, rgba(11,14,23,0.35) 100%), linear-gradient(0deg, rgba(11,14,23,0.85) 0%, transparent 55%); } .home-hero-text{ max-width:620px; position:relative; z-index:2; } .home-hero-text .eyebrow{ color:var(--text-strong); font-size:34px; font-weight:800; text-transform:uppercase; /* Hindi (Devanagari) me har akshar ke uper-neeche matra lagti hai, isliye 1.1 par do line aapas me chipak jaati thi. 1.34 dono script (English caps + Hindi matra) ke liye saaf rehta hai. */ line-height:1.34; margin:0; text-shadow: 0 2px 14px rgba(var(--shade),0.6); } .home-hero-text .eyebrow .accent{ color: var(--gold); display:block; font-size:36px; } .home-hero-text .season{ color: var(--red); font-weight:700; margin: 14px 0 6px; display:flex; align-items:center; gap:10px; font-size:15px; } .home-hero-text .season::before{ content:""; width:30px;height:1px;background:var(--red); } .home-hero-text .tagline{ color:var(--text-soft); font-size:13px; letter-spacing:0.5px; line-height:1.55; /* chhote Hindi text ki do line touch na ho */ margin: 10px 0 26px; text-transform:uppercase; text-shadow: 0 1px 8px rgba(var(--shade),0.6); }.btn-primary{ background: var(--red); color:var(--on-brand); padding:14px 28px; border-radius:2px; font-weight:700; font-size:14px; letter-spacing:0.5px; display:inline-flex; align-items:center; gap:10px; border:none; } .btn-primary:hover{ background:var(--red-dark); } .btn-outline{ background:transparent; color:var(--text-strong); border:1px solid var(--red); padding:13px 26px; border-radius:2px; font-weight:700; font-size:13px; letter-spacing:0.5px; display:inline-flex; align-items:center; gap:8px; } .btn-outline:hover{ background:var(--red); } .btn-insta{ background: linear-gradient(90deg, #d6249f, #e2436b, #f77737); color:var(--text-strong); padding:14px 30px; border-radius:30px; font-weight:700; font-size:14px; letter-spacing:0.5px; display:inline-flex; align-items:center; gap:10px; border:none; } .btn-insta:hover{ filter:brightness(1.08); } /* purana side-image layout hata diya - ab image slider ka background hai */ .slider-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:40px;height:40px; border-radius:50%; background:rgba(var(--fx),0.06); border:1px solid rgba(var(--fx),0.2); display:flex;align-items:center;justify-content:center; color:var(--text-strong); z-index:3; } .slider-arrow.left{ left:20px; } .slider-arrow.right{ right:20px; } .slider-arrow{ cursor:pointer; } .slider-dots{ position:absolute; bottom:20px;left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:3; } .slider-dots span{ width:8px;height:8px;border-radius:50%;background:rgba(var(--fx),0.3); cursor:pointer; } .slider-dots span.active{ background:var(--red); width:22px;border-radius:4px; } /* ---------- Cards (generic) ---------- */ .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .grid-5{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; } .grid-6{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; } .grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; } .grid-10{ display:grid; grid-template-columns:repeat(10,1fr); gap:10px; } .grid-8{ display:grid; grid-template-columns:repeat(8,1fr); gap:12px; } /* Slider row: arrows sit OUTSIDE the grid (absolutely), so the grid itself always keeps the full container width and cards never get squeezed. */ .slider-row{ position:relative; padding: 0 54px; } .slider-row .slider-arrow{ position:absolute; top:50%; transform:translateY(-50%); } .slider-row .slider-arrow.left{ left:0; } .slider-row .slider-arrow.right{ right:0; } @media (max-width:768px){ .slider-row{ padding:0; } .slider-row .slider-arrow{ display:none; } } .card{ background: var(--bg-card); border: 1px solid rgba(var(--fx),0.06); border-radius: var(--radius); padding: 24px; } .card:hover{ border-color: var(--border-red); } /* Team badge card - dark card, thin gold/red border, soft red glow spreading below the card, matching the reference design exactly. */ .team-badge-card{ background: linear-gradient(180deg,var(--s3),var(--s1)); border: 1px solid rgba(227,30,38,0.35); text-align:center; padding: 22px 10px 20px; border-radius: 6px; box-shadow: 0 22px 26px -14px rgba(227,30,38,0.55); position:relative; } .team-badge-card img{ width:110px;height:110px;object-fit:contain;margin:0 auto 12px; background:transparent; border-radius:0; padding:0; } .team-badge-card .t-name{ font-weight:700; font-size:13px; letter-spacing:0.5px; color:var(--text-strong); } /* Compact variant used in the home-page "Our Teams" strip (10 teams, one row) */ .team-badge-card.compact{ padding:16px 8px 14px; } .team-badge-card.compact img{ width:82px; height:82px; margin-bottom:8px; } .team-badge-card.compact .t-name{ font-size:11px; letter-spacing:0.3px; } @media (max-width:1024px){ .grid-10{ grid-template-columns:repeat(5,1fr); gap:14px; } .grid-8{ grid-template-columns:repeat(4,1fr); gap:14px; } } @media (max-width:600px){ .grid-10{ grid-template-columns:repeat(3,1fr); } .grid-8{ grid-template-columns:repeat(2,1fr); } } /* Real uploaded team logos vary (transparent / white / solid-color backgrounds). Give the smaller inline badges (point table rows, match rows, team list) a consistent light rounded backing so they sit cleanly at small sizes. The big home-page team cards show logos plain/direct (no circle) per the reference design - see .team-badge-card img above, which overrides this. */ .team-badge-card img, .team-hero .team-logo-big, .pt-table .team-cell img, .match-row .m-team img { background:#fff; border-radius:50%; padding:4px; } /* Point table ke neeche wale live/completed match box me logo bina safed round card ke, seedha dikhna chahiye */ .match-team img, .match-info-box img{ background:transparent; border-radius:0; padding:0; } .team-badge-card img{ background:transparent !important; border-radius:0 !important; padding:0 !important; } /* Click karke image badi dekhi ja sakti hai, isliye cursor + hover effect */ .insta-card img[data-lightbox]{ cursor:pointer; transition:transform .25s ease, filter .25s ease; } .insta-card img[data-lightbox]:hover{ transform:scale(1.04); filter:brightness(1.08); } /* ========================================================= HOME - COMMITTEE + GALLERY (reference design) Dono section ka heading, ornament aur button ek jaise hain, isliye wo styles yahan share hoti hain. ========================================================= */ /* ---------- Heading ---------- */ .hx-title{ text-align:center; margin:0 0 34px; } /* Heading ke upar chhota laal text, dono taraf line */ .hx-eyebrow{ display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:8px; color:var(--red); font-size:13.5px; font-weight:600; letter-spacing:5px; text-transform:uppercase; } .hx-eyebrow::before, .hx-eyebrow::after{ content:""; width:52px; height:1.5px; background:var(--red); box-shadow:0 0 10px rgba(227,30,38,0.8); } .hx-head{ display:flex; align-items:center; justify-content:center; gap:22px; margin:0; font-family:'Anton',Impact,'Arial Black',sans-serif; font-weight:400; font-size:42px; line-height:1.05; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-strong); } .hx-head span{ color:var(--red); } .hx-head.big{ font-size:66px; letter-spacing:2px; gap:0; } /* Heading ke dono taraf lambi line + uske paas chhota dash */ .hx-head::before, .hx-head::after{ content:""; flex:0 0 auto; width:118px; height:8px; background: linear-gradient(90deg, var(--red), var(--red)) no-repeat right center / 30px 2px, linear-gradient(90deg, var(--red), var(--red)) no-repeat left center / 74px 1.5px; opacity:0.85; } .hx-head::after{ background: linear-gradient(90deg, var(--red), var(--red)) no-repeat left center / 30px 2px, linear-gradient(90deg, var(--red), var(--red)) no-repeat right center / 74px 1.5px; } .hx-head.big::before, .hx-head.big::after{ display:none; } /* Heading ke neeche line - beech me chhota gol icon */ .hx-orn{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:14px; } .hx-orn .orn-line{ width:104px; height:8px; background:linear-gradient(90deg, transparent, var(--red)) no-repeat left center / 104px 1.5px; } /* Daayein wali line ke sire pe ek chhota bindu */ .hx-orn .orn-line.right{ background: radial-gradient(circle at calc(100% - 3px) 50%, var(--red) 0 3px, transparent 3.5px) no-repeat, linear-gradient(90deg, var(--red), transparent) no-repeat left center / 86px 1.5px; } .hx-orn .orn-badge{ display:grid; place-items:center; flex:0 0 auto; width:44px; height:44px; border:1.5px solid var(--red); border-radius:50%; background:radial-gradient(circle at 50% 40%, rgba(227,30,38,0.22), var(--s1) 74%); color:var(--red); font-size:17px; box-shadow:0 0 22px -5px rgba(227,30,38,0.9); } .hx-orn .orn-badge.sm{ width:26px; height:26px; font-size:11px; border-width:1px; } /* ---------- Button jiske dono taraf teen chhoti lakeerein ---------- */ .dash-btn{ display:flex; align-items:center; justify-content:center; gap:30px; margin-top:38px; } .dash-btn .db-lines{ flex:0 0 auto; width:120px; height:20px; background: linear-gradient(90deg, var(--red), var(--red)) no-repeat right 0 top 3px / 62px 1.5px, linear-gradient(90deg, var(--red), var(--red)) no-repeat right 0 center / 118px 1.5px, linear-gradient(90deg, var(--red), var(--red)) no-repeat right 0 bottom 3px / 40px 1.5px; opacity:0.75; } .dash-btn .db-lines:last-child{ background: linear-gradient(90deg, var(--red), var(--red)) no-repeat left 0 top 3px / 62px 1.5px, linear-gradient(90deg, var(--red), var(--red)) no-repeat left 0 center / 118px 1.5px, linear-gradient(90deg, var(--red), var(--red)) no-repeat left 0 bottom 3px / 40px 1.5px; } .dash-btn .db-link{ display:inline-flex; align-items:center; justify-content:center; gap:16px; text-align:center; padding:17px 34px; border:1px solid rgba(227,30,38,0.8); border-radius:6px; background:rgba(227,30,38,0.05); color:var(--text-strong); text-decoration:none; font-size:15px; font-weight:600; letter-spacing:2px; text-transform:uppercase; transition:background .25s ease, box-shadow .25s ease; } .dash-btn .db-link i{ color:var(--red); font-size:17px; } .dash-btn .db-link:hover{ background:rgba(227,30,38,0.16); box-shadow:0 0 26px -6px rgba(227,30,38,0.9); } .dash-btn .db-link:hover .db-arrow{ transform:translateX(4px); } .dash-btn .db-arrow{ transition:transform .25s ease; } /* ---------- Committee card ---------- */ /* 6 ek line me, aakhri adhoori line beech me aati hai - isliye grid nahi flex */ .cm-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; } .cm-card{ flex:0 0 calc((100% - 5 * 16px) / 6); position:relative; border:1px solid rgba(227,30,38,0.5); border-radius:10px; background:var(--s0); box-shadow:0 0 26px -10px rgba(227,30,38,0.75); overflow:hidden; text-align:center; } /* Photo ka neeche wala kinara beech me jhukta hai - upar laal lakeer */ .cm-media{ position:relative; overflow:hidden; border-bottom:2px solid var(--red); border-radius:0 0 50% 50% / 0 0 26px 26px; } .cm-media img{ width:100%; display:block; aspect-ratio:1 / 1.08; object-fit:cover; } /* Sponsor card me photo ek link ke andar hoti hai - link inline rahe to neeche patli si khali lakeer aa jaati hai, isliye block kar diya */ .cm-media a{ display:block; } .cm-body{ padding:14px 10px 18px; } /* Naam ke aage chhota icon inline rehta hai (flex nahi) - flex me icon ek alag dabba ban jaata tha aur naam kaard ke beech se 9px daayein khisak jaata tha. Phone par lamba naam do line me toota to ye aur saaf dikhta tha. Block + text-align:center se har line theek beech me. */ .cm-name{ display:block; text-align:center; color:var(--text-strong); font-size:14px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; } .cm-name i{ color:var(--red); font-size:13px; margin-right:6px; } .cm-role{ margin-top:7px; color:var(--red); font-size:12.5px; letter-spacing:1.2px; text-transform:uppercase; } /* ---------- Home gallery card ---------- */ .hg-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; } .hg-card{ position:relative; border:1px solid rgba(227,30,38,0.5); border-radius:10px; background:var(--s0); box-shadow:0 0 26px -10px rgba(227,30,38,0.75); overflow:hidden; cursor:pointer; } .hg-card img{ width:100%; display:block; aspect-ratio:5 / 7; object-fit:cover; transition:transform .45s ease; } .hg-card:hover img{ transform:scale(1.06); } .hg-card:hover{ box-shadow:0 0 34px -6px rgba(227,30,38,0.95); } /* Photo ke neeche naam - upar se kaala halka halka gehra hota hai */ .hg-cap{ position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:9px; padding:14px 12px 13px; background:linear-gradient(180deg, rgba(5,7,12,0) 0%, rgba(5,7,12,0.88) 45%, rgba(5,7,12,0.97) 100%); color:var(--text-strong); font-size:12.5px; font-weight:700; letter-spacing:0.7px; text-transform:uppercase; text-align:left; } .hg-cap i{ color:var(--red); font-size:15px; flex:0 0 auto; } .hg-cap span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Asli Instagram embeds (home page ka social section). ------------------------------------------------------------------ Instagram ka embed page hamesha safed hota hai aur uski height post ke hisaab se badalti rehti hai - isliye har post ko fix box me rakhte hain taki grid seedha rahe. Card chhota karne ka tarika: Instagram ka embed 326px se kam chaudai par toot jata hai (photo kat jati hai, caption gayab ho jata hai). Isliye iframe HAMESHA apni poori 326px chaudai ka hi rehta hai aur use transform:scale() se sikoda kar chhote box me fit karte hain - isse post poori dikhti hai, bas size chhota ho jata hai. Do variable saath saath chalte hain: --ig-box = card ki chaudai --ig-scale = --ig-box / 326 (iframe kitna sikodna hai) Isliye jab bhi ek badla, dusra bhi badalna zaroori hai. Desktop par ek line me 4 post aate hain. */ .insta-embed-grid{ --ig-box:276px; /* (1152 - 3x16) / 4 = 276 */ --ig-scale:0.847; /* 276 / 326 */ --ig-h:500px; /* iframe ki asli lambai */ /* Flex isliye (grid nahi) - post 4 se zyada hon to doosri line bhi beech me center rehti hai. 4x276 + 3x16 = 1152 = container ki andar ki chaudai, isliye ek line me theek 4 aate hain. */ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; } .insta-embed{ position:relative; flex:0 0 var(--ig-box); width:var(--ig-box); height:calc(var(--ig-h) * var(--ig-scale)); overflow:hidden; border-radius:12px; background:#fff; border:1px solid rgba(var(--fx),0.08); box-shadow:0 14px 30px -18px rgba(var(--shade),0.95); } .insta-embed iframe{ width:326px; /* Instagram ki minimum chaudai */ height:var(--ig-h); border:0; display:block; transform:scale(var(--ig-scale)); transform-origin:top left; } /* Neeche patti - post kholne ke liye */ .insta-embed-link{ position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center; gap:8px; padding:9px; font-size:11.5px; font-weight:700; letter-spacing:0.4px; color:var(--text-strong); background:linear-gradient(90deg,#d6249f,#fd5949,#fdf497); opacity:0; transition:opacity .25s ease; } .insta-embed:hover .insta-embed-link{ opacity:1; } /* Chhoti screen par columns kam karte jaate hain - warna card itna chhota ho jayega ki post padhi hi nahi jayegi. */ @media (max-width:1179px){ .insta-embed-grid{ --ig-box:232px; /* 1024px screen par theek theek fit */ --ig-scale:0.712; } } @media (max-width:1023px){ /* Ab ek line me 3 - 3x226 + 2x16 = 710, 768px screen me fit */ .insta-embed-grid{ --ig-box:226px; --ig-scale:0.693; } } @media (max-width:767px){ /* Ek line me 2 - 2x200 + 14 = 414 */ .insta-embed-grid{ --ig-box:200px; --ig-scale:0.613; gap:14px; } } @media (max-width:420px){ /* Phone par bhi ek line me do post. Container ki andar ki chaudai 375px screen par 375 - 32 = 343px hoti hai; do card + 10px gap ke liye (343 - 10) / 2 = 166px milta hai. */ .insta-embed-grid{ --ig-box:166px; --ig-scale:0.509; gap:10px; } /* Touch pe hover nahi hota - link hamesha dikhe */ .insta-embed-link{ opacity:1; font-size:10.5px; padding:7px; gap:5px; } } @media (max-width:359px){ /* Sabse chhote phone (320px). Andar ki chaudai 320 - 32 = 288px bachti hai, to do card + 8px gap ke liye (288 - 8) / 2 = 140px. Isse choti screen par bhi do post ek hi line me rehti hain. */ .insta-embed-grid{ --ig-box:140px; --ig-scale:0.429; gap:8px; } .insta-embed-link{ font-size:9.5px; padding:6px; gap:4px; } } /* Instagram strip */ .insta-strip{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; } .insta-card{ position:relative; border-radius:8px; overflow:hidden; background: var(--bg-card); border: 1px solid rgba(var(--fx),0.08); } .insta-card .insta-header{ display:flex; align-items:center; justify-content:space-between; gap:6px; padding:8px 10px; background:#000; } .insta-card .insta-user{ display:flex; align-items:center; gap:6px; min-width:0; } .insta-card .insta-icon{ width:20px;height:20px; border-radius:6px; flex-shrink:0; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); display:flex;align-items:center;justify-content:center; color:var(--text-strong); font-size:11px; } .insta-card .insta-handle{ font-size:11px; color:var(--text-soft); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .insta-card .insta-time{ font-size:11px; color:#9aa0ad; flex-shrink:0; } .insta-card img{ height:150px; width:100%; object-fit:cover; display:block; } /* ---------- Buttons small ---------- */ .btn-view{ border:1px solid var(--gold); color: var(--gold); background:transparent; padding:11px 24px; font-size:13px; font-weight:700; letter-spacing:0.5px; display:inline-flex; gap:8px; align-items:center; border-radius:2px; } .btn-view:hover{ background:var(--gold); color:var(--s1); } .btn-red-outline{ border:1px solid var(--red); color:var(--text-strong); background:transparent; padding:11px 24px; font-size:13px; font-weight:700; letter-spacing:0.5px; display:inline-flex; gap:8px; align-items:center; border-radius:2px; text-decoration:none; cursor:pointer; }.btn-red-outline:hover{ background:var(--red); color:var(--on-brand); } .center{ text-align:center; } /* ---------- Footer ---------- */ footer.site-footer{ background: var(--bg-darker); border-top: 1px solid rgba(var(--fx),0.06); padding-top: 50px; position:relative; } .footer-grid{ display:grid; grid-template-columns: 1.3fr 1.3fr 1fr 1.2fr; gap:30px; padding-bottom: 30px; } /* Grid ke column by default min-content jitne chaude rehte hain - min-width:0 lagane se chhoti screen pe wo sikud jate hain */ .footer-grid > *{ min-width:0; } .footer-grid a, .footer-grid p, .footer-grid li{ overflow-wrap:anywhere; } .footer-about .logo{ margin-bottom:14px; } .footer-about .logo img{ height:64px; max-width:100%; } .footer-about p{ color: var(--text-muted); font-size:13.5px; } .footer-social{ display:flex; gap:10px; margin-top:16px; } .footer-social a{ width:34px;height:34px;border-radius:50%; border:1px solid rgba(var(--fx),0.2); display:flex;align-items:center;justify-content:center; color:var(--text-strong); } .footer-social a:hover{ background:var(--red); border-color:var(--red); } .footer-col h4{ font-size:15px; text-transform:uppercase; margin-bottom:18px; font-weight:700; letter-spacing:0.5px; } .footer-col ul li{ margin-bottom:12px; } /* Quick Links ek lambi line ban jati thi - ab 2 column me aati hai */ .footer-col ul.two-col{ display:grid; grid-template-columns:1fr 1fr; column-gap:16px; } .footer-col ul li a{ color: var(--text-muted); font-size:13.5px; display:flex; align-items:center; gap:6px; } .footer-col ul li a:hover{ color:var(--red); } .footer-col ul li a::before{ content:"›"; color:var(--red); } .footer-contact li{ display:flex; gap:10px; align-items:flex-start; color: var(--text-muted); font-size:13.5px; margin-bottom:16px; } .footer-contact li i{ color:var(--red); margin-top:3px; } .newsletter p{ color:var(--text-muted); font-size:13.5px; margin-bottom:16px; } .newsletter form{ display:flex; } .newsletter input{ flex:1; min-width:0; /* warna input apni default chaudai se chhota nahi hota */ background: var(--bg-card); border:1px solid rgba(var(--fx),0.1); padding:12px 14px; color:var(--text-strong); font-size:13px; border-radius:2px 0 0 2px; }.newsletter button{ background:var(--red); border:none; color:var(--on-brand); padding:0 18px; font-weight:700; font-size:13px; border-radius:0 2px 2px 0; } .footer-bottom{ border-top:1px solid rgba(var(--fx),0.06); padding: 18px 0; display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color: var(--text-muted); } .footer-bottom .heart{ color:var(--red); } .footer-bottom .credit-name{ color:var(--text-strong); font-weight:700; }.back-to-top{ position:fixed; bottom:26px; right:26px; width:44px;height:44px; border-radius:50%; background: var(--red); color:var(--on-brand); display:flex;align-items:center;justify-content:center; z-index:200; border:none; box-shadow:0 4px 14px rgba(227,30,38,0.4); } /* ============================================================ ABOUT US PAGE (reference design) Poore page ka ek hi andaaz hai: chhoti laal eyebrow, do-rang ka bada heading, uske neeche ek line jiske sire pe chamakta bindu, aur muted paragraph. Mission/Vision/Values card apna rang inline style="--c:R,G,B" se lete hain, isliye border, glow, icon aur underline sab apne aap us rang me ho jate hain. ============================================================ */ /* Heading ke upar laal chhoti line + text */ .ab-eyebrow{ display:flex; align-items:center; gap:14px; margin-bottom:14px; color:var(--red); font-size:12.5px; font-weight:700; letter-spacing:4px; text-transform:uppercase; } .ab-eyebrow::before{ content:""; flex:0 0 auto; width:42px; height:2px; background:var(--red); box-shadow:0 0 10px rgba(227,30,38,0.9); } /* dono taraf line wali eyebrow - "WHY MPL?" ke liye */ .ab-eyebrow.dual::after{ content:""; flex:0 0 auto; width:42px; height:2px; background:var(--red); box-shadow:0 0 10px rgba(227,30,38,0.9); } .ab-h2{ margin:0; font-family:'Anton',Impact,'Arial Black',sans-serif; font-weight:400; font-size:58px; line-height:1.02; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-strong); } .ab-h2 span{ color:var(--red); } /* Line jiske daayein sire pe chamakta bindu hai */ .ab-rule{ width:112px; height:8px; margin:20px 0 24px; background: radial-gradient(circle at calc(100% - 5px) 50%, var(--red) 0 3.5px, transparent 4px) no-repeat, linear-gradient(90deg, var(--red), var(--red)) no-repeat left center / 80px 2px; } /* ---------- Who We Are ---------- */ .ab-who-grid{ position:relative; display:grid; grid-template-columns:1fr 1.06fr; gap:56px; align-items:center; } .ab-who-left, .ab-who-media{ position:relative; z-index:1; } .ab-who-left p{ color:var(--text-muted); font-size:15px; line-height:1.85; margin:0 0 16px; } /* Peeche halka sa bat ka nishaan - sirf texture ke liye */ .ab-wm{ position:absolute; left:42%; top:48%; translate:0 -50%; font-size:220px; color:rgba(227,30,38,0.055); pointer-events:none; z-index:0; } /* Neeche teen chhoti khubiyan, beech me patli line */ .ab-minis{ display:flex; margin-top:36px; } .ab-mini{ flex:1 1 0; padding:0 22px; text-align:center; } .ab-mini:first-child{ padding-left:0; } .ab-mini + .ab-mini{ border-left:1px solid rgba(var(--fx),0.08); } .am-ic{ display:grid; place-items:center; width:60px; height:60px; margin:0 auto 14px; border:1px solid rgba(227,30,38,0.65); border-radius:50%; background:radial-gradient(circle at 50% 40%, rgba(227,30,38,0.18), var(--s1) 72%); color:var(--red); font-size:22px; box-shadow:0 0 20px -4px rgba(227,30,38,0.75), inset 0 0 18px -8px rgba(227,30,38,0.9); } .ab-mini h4{ margin:0; font-size:14px; font-weight:800; color:var(--text-strong); letter-spacing:0.6px; text-transform:uppercase; } .ab-mini p{ margin:5px 0 0; color:var(--text-muted); font-size:13px; } /* Photo ka laal chamakta frame, aur peeche ek khali outline */ .ab-who-media::after{ content:""; position:absolute; inset:-26px -34px 26px 62px; border:1px solid rgba(227,30,38,0.5); border-radius:24px; box-shadow:0 0 26px -10px rgba(227,30,38,0.8); z-index:0; } .ab-frame{ position:relative; z-index:1; padding:10px; border:1.5px solid var(--red); border-radius:22px; background:var(--s1); box-shadow:0 0 42px -10px rgba(227,30,38,0.85), 0 30px 60px -34px rgba(var(--shade),0.9); } .ab-frame img{ width:100%; display:block; border-radius:14px; } /* ---------- Mission / Vision / Values ---------- */ .mvv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; } .mvv-card{ --c:227,30,38; position:relative; overflow:hidden; padding:30px 28px 34px; border:1px solid rgba(var(--c),0.55); border-radius:16px; background:linear-gradient(150deg, rgba(var(--c),0.14), var(--s1) 58%); box-shadow:0 0 30px -12px rgba(var(--c),0.7), 0 20px 40px -30px rgba(var(--shade),0.9); } .mvv-icon{ display:grid; place-items:center; width:62px; height:62px; margin-bottom:24px; border:1.5px solid rgb(var(--c)); border-radius:50%; background:radial-gradient(circle at 50% 40%, rgba(var(--c),0.3), var(--s1) 74%); color:rgb(var(--c)); font-size:24px; box-shadow:0 0 22px -3px rgba(var(--c),0.85); } .mvv-card h3{ margin:0; font-size:22px; font-weight:800; color:var(--text-strong); letter-spacing:0.8px; text-transform:uppercase; } .mvv-card h3 span{ color:rgb(var(--c)); } .mvv-card .underline{ width:78px; height:8px; margin:12px 0 18px; background: radial-gradient(circle at calc(100% - 4px) 50%, rgb(var(--c)) 0 3px, transparent 3.5px) no-repeat, linear-gradient(90deg, rgb(var(--c)), rgb(var(--c))) no-repeat left center / 54px 2px; } .mvv-card p{ position:relative; z-index:1; margin:0; color:var(--text-muted); font-size:14px; line-height:1.9; } /* Values ek hi line me, shuru me ek chevron */ .mvv-vals{ position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:center; gap:7px 15px; margin:0; padding:0; list-style:none; } .mvv-vals::before{ content:"\203A"; color:rgb(var(--c)); font-size:22px; line-height:1; } .mvv-vals li{ color:var(--text-muted); font-size:14px; } /* Card ke kone me halka sa nishaan */ .mvv-wm{ position:absolute; right:-10px; bottom:-20px; font-size:112px; color:rgba(var(--c),0.1); pointer-events:none; z-index:0; } /* ---------- MPL In Numbers ---------- */ .ab-nums{ position:relative; } .ab-nums-wm{ position:absolute; left:50%; top:-26px; translate:-50% 0; font-family:'Anton',Impact,'Arial Black',sans-serif; font-size:118px; line-height:1; letter-spacing:8px; color:rgba(var(--fx),0.035); white-space:nowrap; pointer-events:none; } .ab-nums .sec-title{ position:relative; } .stats-bar{ display:grid; grid-template-columns:repeat(5,1fr); padding:26px 18px; border:1px solid rgba(227,30,38,0.4); border-radius:16px; background:linear-gradient(180deg,var(--s2),var(--s0)); box-shadow:0 0 40px -14px rgba(227,30,38,0.55), 0 24px 48px -34px rgba(var(--shade),0.9); } .stat-item{ display:flex; align-items:center; justify-content:center; gap:16px; padding:6px 14px; } .stat-item + .stat-item{ border-left:1px solid rgba(var(--fx),0.07); } .stat-item .si-ic{ display:grid; place-items:center; flex:0 0 auto; width:58px; height:58px; border:1px solid rgba(227,30,38,0.7); border-radius:50%; background:radial-gradient(circle at 50% 40%, rgba(227,30,38,0.2), var(--s1) 74%); box-shadow:0 0 20px -4px rgba(227,30,38,0.8); } .stat-item .si-ic i{ color:var(--red); font-size:23px; } .stat-item .num{ font-family:'Anton',Impact,'Arial Black',sans-serif; font-weight:400; font-size:32px; line-height:1; letter-spacing:1px; color:var(--text-strong); } .stat-item .lbl{ margin-top:6px; color:var(--text-muted); font-size:11.5px; text-transform:uppercase; letter-spacing:1.4px; } /* ---------- Why Choose MPL ---------- */ .why-shell{ position:relative; overflow:hidden; padding:52px 44px 56px; border:1px solid rgba(227,30,38,0.35); border-radius:20px; background:linear-gradient(160deg,var(--s2),var(--s0) 70%); box-shadow:0 0 44px -18px rgba(227,30,38,0.5), 0 26px 60px -34px rgba(227,30,38,0.8); } /* neeche baayein kone me laal bindu ka jaal */ .why-shell::before{ content:""; position:absolute; left:0; bottom:0; width:190px; height:150px; background:radial-gradient(circle, rgba(227,30,38,0.55) 1px, transparent 1.4px) 0 0 / 13px 13px; -webkit-mask-image:linear-gradient(to top right, #000, transparent 62%); mask-image:linear-gradient(to top right, #000, transparent 62%); pointer-events:none; } .why-grid{ position:relative; display:grid; grid-template-columns:1.35fr repeat(4,1fr); align-items:start; } .why-grid > *{ padding:0 26px; } .why-grid > * + *{ border-left:1px solid rgba(var(--fx),0.07); } .why-grid > *:first-child{ padding-left:0; } .why-grid > *:last-child{ padding-right:0; } .why-intro h3{ margin:0; font-family:'Anton',Impact,'Arial Black',sans-serif; font-weight:400; font-size:38px; line-height:1.08; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-strong); } .why-intro h3 span{ display:block; color:var(--red); } .why-intro p{ margin:0; color:var(--text-muted); font-size:14.5px; line-height:1.9; } /* Kaanch jaisa gola - bindu aur chamak dono background layer se bante hain */ .why-card{ text-align:center; } .wc-orb{ display:grid; place-items:center; width:104px; height:104px; margin:0 auto 20px; border:1px solid rgba(var(--fx),0.13); border-radius:50%; background: radial-gradient(circle at 22% 16%, rgba(var(--fx),0.8) 0 2px, transparent 2.6px), radial-gradient(circle at 79% 18%, rgba(var(--fx),0.5) 0 2px, transparent 2.6px), radial-gradient(circle at 88% 71%, rgba(227,30,38,0.95) 0 2px, transparent 2.6px), radial-gradient(circle at 50% 42%, rgba(227,30,38,0.16), rgba(10,13,20,0.35) 62%, rgba(10,13,20,0) 74%); box-shadow:inset 0 0 34px -10px rgba(227,30,38,0.55), 0 0 30px -12px rgba(227,30,38,0.6); } .wc-orb i{ color:var(--red); font-size:32px; filter:drop-shadow(0 0 12px rgba(227,30,38,0.85)); } .why-card h4{ margin:0; font-size:15px; font-weight:800; color:var(--text-strong); letter-spacing:0.7px; text-transform:uppercase; } .wc-rule{ width:70px; height:8px; margin:12px auto 16px; background: radial-gradient(circle at calc(100% - 4px) 50%, var(--red) 0 3px, transparent 3.5px) no-repeat, linear-gradient(90deg, var(--red), var(--red)) no-repeat left center / 48px 2px; } .why-card p{ margin:0; color:var(--text-muted); font-size:13.5px; line-height:1.85; } /* ---------- Gallery Page (reference design) ---------- Category ke tab alag alag dabbe hain, aur har album card ka apna rang - rang inline style="--c:R,G,B" se aata hai, isliye border, glow, icon aur arrow sab apne aap us rang me ho jate hain. */ .gtabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-bottom:34px; } .gtab{ display:flex; align-items:center; gap:11px; padding:15px 22px; border:1px solid rgba(var(--fx),0.08); border-radius:12px; background:linear-gradient(180deg,var(--s4),var(--s1)); color:var(--text-light); font-size:12.5px; font-weight:600; letter-spacing:0.9px; text-decoration:none; white-space:nowrap; } .gtab i{ font-size:15px; color:var(--text-muted); } .gtab:hover{ border-color:rgba(227,30,38,0.5); }.gtab.active{ border-color:var(--red); background:linear-gradient(120deg,var(--red-dark),var(--red)); color:var(--on-brand); box-shadow:0 0 22px -4px rgba(227,30,38,0.85); } .gtab.active i{ color:var(--text-strong); } /* Album ke card - teen ek row me, aakhri row apne aap chaudi ho jati hai */ .gwrap{ display:flex; flex-wrap:wrap; gap:26px; } .gcard{ --c:227,30,38; flex:1 1 300px; display:block; border:1px solid rgba(var(--c),0.5); border-radius:16px; overflow:hidden; text-decoration:none; background:var(--s1); box-shadow:0 0 26px -8px rgba(var(--c),0.55), 0 18px 34px -26px rgba(var(--shade),0.9); } /* max-height se aakhri row ke chaude card ki image bahut lambi nahi hoti */ .gc-media{ position:relative; aspect-ratio:16/10; max-height:250px; overflow:hidden; } .gc-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease; } .gc-count{ position:absolute; top:14px; left:14px; display:flex; align-items:center; gap:7px; padding:6px 11px; border-radius:9px; background:rgba(var(--c),0.92); /* Gaddi rangeen hai - isliye text dono theme me safed */ color:var(--on-brand); font-size:12.5px; font-weight:700; box-shadow:0 0 16px -3px rgba(var(--c),0.9); } .gc-count i{ font-size:12px; } .gc-body{ position:relative; padding:20px 74px 20px 86px; background:linear-gradient(180deg, rgba(var(--c),0.12), var(--s1) 70%); } /* Gol icon aadha image pe aur aadha neeche wale hisse pe baithta hai */ .gc-ico{ position:absolute; left:20px; top:-26px; display:grid; place-items:center; width:52px; height:52px; border:1.5px solid rgb(var(--c)); border-radius:50%; background:radial-gradient(circle at 50% 40%, rgba(var(--c),0.35), var(--s1) 75%); color:rgb(var(--c)); font-size:19px; box-shadow:0 0 18px -3px rgba(var(--c),0.8); } .gc-title{ margin:0; font-size:17px; font-weight:800; color:var(--text-strong); letter-spacing:0.6px; line-height:1.25; } .gc-desc{ margin:5px 0 0; font-size:12.5px; color:var(--text-muted); line-height:1.45; } .gc-go{ position:absolute; right:20px; top:50%; translate:0 -50%; display:grid; place-items:center; width:42px; height:42px; border:1.5px solid rgba(var(--c),0.75); border-radius:50%; color:rgb(var(--c)); font-size:14px; transition:background .25s ease, color .25s ease; } .gcard:hover .gc-media img{ transform:scale(1.06); } .gcard:hover .gc-go{ background:rgb(var(--c)); color:var(--text-strong); } .gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .gallery-grid .g-item{ position:relative; border:1px solid rgba(227,30,38,0.25); border-radius: var(--radius); overflow:hidden; display:block; cursor:pointer; text-decoration:none; } .gallery-grid .g-item img{ height:230px; width:100%; object-fit:cover; transition:.3s; display:block; } .gallery-grid .g-item:hover img{ transform:scale(1.05); } .gallery-grid .g-item .g-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; background: linear-gradient(0deg, rgba(var(--shade),0.6), transparent 50%); padding-bottom:16px; font-weight:800; font-size:18px; letter-spacing:1.5px; text-transform:uppercase; text-align:center; color: var(--gold); } .gallery-grid .g-item .g-count{ color:var(--text-strong); font-size:11px; font-weight:600; letter-spacing:1px; margin-top:4px; opacity:.8; } /* Lightbox - assets/css/lightbox.css se aata hai (single, sab pages ke liye) */ /* ---------- Section title (Point Table / Schedule reference design) ---------- Teen hisse: upar icon wala row, beech me do-rang ka bada title, aur neeche teen sitare ya ek chamakti patti. Jo chahiye wahi markup me daalo. */ .sec-title{ text-align:center; margin:0 0 34px; } .sec-title-row{ display:flex; align-items:flex-start; justify-content:space-between; } .sec-title-row .sec-title{ flex:1; margin-bottom:34px; } .sec-title-row .season-sw{ padding-top:6px; } .sec-title .st-top{ display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:14px; } .sec-title .st-top::before, .sec-title .st-top::after{ content:""; width:80px; height:1px; background:linear-gradient(90deg, transparent, var(--red)); } .sec-title .st-top::after{ background:linear-gradient(90deg, var(--red), transparent); } .sec-title .st-top i{ color:var(--red); font-size:26px; filter:drop-shadow(0 0 12px rgba(227,30,38,0.75)); } /* Title ke upar icon wala chhota dabba */ .sec-title .st-badge{ display:inline-grid; place-items:center; width:52px; height:52px; margin-bottom:14px; border:1px solid rgba(227,30,38,0.35); border-radius:14px; background:linear-gradient(160deg, rgba(227,30,38,0.2), rgba(227,30,38,0.03)); box-shadow:0 0 22px -6px rgba(227,30,38,0.8); } .sec-title .st-badge i{ color:var(--red); font-size:23px; filter:drop-shadow(0 0 10px rgba(227,30,38,0.8)); } .sec-title .st-head{ margin:0; font-family:'Anton',Impact,'Arial Black',sans-serif; font-weight:400; font-size:40px; line-height:1.1; letter-spacing:1.6px; color:var(--text-strong); text-transform:uppercase; } .sec-title .st-head span{ color:var(--red); } /* Title ke dono taraf patli laal line */ .sec-title .st-head.lined{ display:flex; align-items:center; justify-content:center; gap:20px; } .sec-title .st-head.lined::before, .sec-title .st-head.lined::after{ content:""; flex:0 0 auto; width:70px; height:2px; background:linear-gradient(90deg, transparent, var(--red)); } .sec-title .st-head.lined::after{ background:linear-gradient(90deg, var(--red), transparent); } /* Wahi line, par beech me ek chamakta bindu bhi - do background layer se banti hai */ .sec-title .st-head.dotted{ display:flex; align-items:center; justify-content:center; gap:22px; } .sec-title .st-head.dotted::before, .sec-title .st-head.dotted::after{ content:""; flex:0 0 auto; width:96px; height:8px; background: radial-gradient(circle at 22px 50%, var(--red) 0 3px, transparent 3.5px) no-repeat, linear-gradient(90deg, transparent, var(--red)) no-repeat center / 100% 2px; } .sec-title .st-head.dotted::after{ background: radial-gradient(circle at calc(100% - 22px) 50%, var(--red) 0 3px, transparent 3.5px) no-repeat, linear-gradient(90deg, var(--red), transparent) no-repeat center / 100% 2px; } .sec-title .st-sub{ margin:12px 0 0; color:var(--text-muted); font-size:14.5px; } .sec-title .st-stars{ display:flex; justify-content:center; gap:11px; margin-top:12px; } .sec-title .st-stars i{ color:var(--red); font-size:10px; opacity:0.8; } .sec-title .st-stars i:nth-child(2){ font-size:14px; opacity:1; filter:drop-shadow(0 0 9px rgba(227,30,38,0.9)); } .sec-title .st-streak{ width:200px; height:3px; margin:15px auto 0; border-radius:3px; background:linear-gradient(90deg, transparent, var(--red) 32%, #ff6a70 50%, var(--red) 68%, transparent); box-shadow:0 0 18px rgba(227,30,38,0.9); } /* ---------- Point Table page (reference design) ---------- */ .pt-bar{ display:flex; align-items:center; justify-content:flex-end; margin-bottom:14px; } .pt-shell{ border:1px solid rgba(227,30,38,0.5); border-radius:16px; overflow:hidden; background:linear-gradient(180deg,var(--s2),var(--s0)); box-shadow:0 0 44px rgba(227,30,38,0.2), 0 26px 50px -26px rgba(var(--shade),0.95); } .pt-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; } .pt-grid{ width:100%; min-width:880px; border-collapse:separate; border-spacing:0 10px; background:transparent; } /* --- Header row: laal gradient, label ke uper chhota icon --- */ .pt-grid thead tr{ background:linear-gradient(90deg,var(--red-dark),var(--red)); } .pt-grid th{ padding:14px 10px 13px; text-align:center; vertical-align:middle; border-left:1px solid rgba(var(--fx),0.14); background:linear-gradient(180deg, rgba(var(--fx),0.10), rgba(var(--fx),0)); } .pt-grid th:first-child{ border-left:none; } /* Header laal gaddi par baitha hai - text/icon dono theme me safed */ .pt-grid th i{ display:block; margin:0 auto 6px; font-size:14px; color:var(--on-brand); } .pt-grid th span{ display:block; font-size:11px; font-weight:700; color:var(--on-brand); letter-spacing:1px; text-transform:uppercase; white-space:nowrap; } .pt-grid th.c-team{ text-align:left; padding-left:20px; } .pt-grid th.c-team i{ margin-left:0; } .pt-grid th.c-won i{ color:#7dea8a; } .pt-grid th.c-lost i{ color:var(--lose-soft); } .pt-grid th.c-tied i{ color:#ffd782; } .pt-grid th.c-nr i{ color:#a5d4ff; } /* --- Body: har row apni alag gehri pill --- */ .pt-grid tbody td{ padding:12px 10px; text-align:center; font-size:15px; font-weight:700; color:var(--text-strong); background:var(--s3); border-top:1px solid rgba(var(--fx),0.05); border-bottom:1px solid rgba(var(--fx),0.05); transition:background .28s ease; } .pt-grid tbody td:first-child{ width:88px; border-left:1px solid rgba(var(--fx),0.05); border-radius:10px 0 0 10px; } .pt-grid tbody td:last-child{ border-right:1px solid rgba(var(--fx),0.05); border-radius:0 10px 10px 0; } .pt-grid tbody tr:hover td{ background:var(--s4); } .pt-grid td.c-team{ text-align:left; padding-left:18px; } .pt-grid td.c-won{ color:var(--ok); } .pt-grid td.c-lost{ color:var(--lose); } .pt-grid td.c-tied{ color:var(--gold); } .pt-grid td.c-nr{ color:var(--info); } .pt-grid td.c-pts{ color:var(--red); font-size:19px; font-weight:800; } /* --- Position ka hexagon badge (do layer trick se patla rim) --- */ .pos-hex{ --pc:154,160,173; position:relative; display:inline-grid; place-items:center; width:44px; height:48px; padding:2px; background:rgb(var(--pc)); clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); filter:drop-shadow(0 0 10px rgba(var(--pc),0.45)); } .pos-hex::before{ content:""; position:absolute; inset:2px; background:var(--s1); clip-path:inherit; } .pos-hex b{ position:relative; z-index:1; font-size:17px; font-weight:800; color:rgb(var(--pc)); } .pt-grid tr.rank-1 .pos-hex{ --pc:224,169,77; } .pt-grid tr.rank-2 .pos-hex{ --pc:201,210,224; } .pt-grid tr.rank-3 .pos-hex{ --pc:217,122,43; } /* Top 3 rows ki baayi taraf rang ki patti */ .pt-grid tr.rank-1 td:first-child{ box-shadow:inset 4px 0 0 #e0a94d; } .pt-grid tr.rank-2 td:first-child{ box-shadow:inset 4px 0 0 var(--text-soft); } .pt-grid tr.rank-3 td:first-child{ box-shadow:inset 4px 0 0 #d97a2b; } /* --- Team cell: koi circle nahi, saaf logo + naam --- */ .pt-team{ display:flex; align-items:center; gap:14px; color:var(--text-strong); } .pt-team img{ width:48px; height:48px; object-fit:contain; background:transparent; flex-shrink:0; filter:drop-shadow(0 4px 10px rgba(var(--shade),0.7)); } .pt-team .pt-tname{ font-size:14px; font-weight:800; letter-spacing:0.6px; text-transform:uppercase; white-space:nowrap; transition:color .28s ease; } .pt-team:hover .pt-tname{ color:var(--gold); } /* --- Legend: shell ke andar hi ek dabba --- */ .pt-legend{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 26px; margin:6px 14px 14px; padding:14px 18px; border:1px solid rgba(var(--fx),0.07); border-radius:10px; background:rgba(var(--fx),0.02); font-size:12.5px; color:var(--text-muted); } .pt-legend b{ font-weight:800; margin-right:5px; } .pt-legend .lg-p{ color:var(--info); } .pt-legend .lg-w{ color:var(--ok); } .pt-legend .lg-l{ color:var(--lose); } .pt-legend .lg-t{ color:var(--gold); } .pt-legend .lg-nr{ color:var(--info); } .pt-legend .lg-pts{ color:var(--red); } .pt-legend .lg-nrr{ color:var(--red); } /* ---------- Stats table (Orange/Purple cap) ---------- */ .pt-table-wrap{ border: 1px solid rgba(227,30,38,0.45); border-radius: 10px; overflow:hidden; background: var(--bg-card); box-shadow: 0 0 40px rgba(227,30,38,0.12), 0 20px 30px -20px rgba(227,30,38,0.4); } .pt-table{ width:100%; border-collapse:collapse; background:transparent; } .pt-table thead tr{ background: linear-gradient(90deg, var(--red-dark), var(--red)); border-bottom:none; } .pt-table th{ padding:18px 16px; text-align:left; font-size:12.5px; font-weight:700; color:var(--text-strong); text-transform:uppercase; letter-spacing:0.5px; } .pt-table td{ padding:16px; border-top:1px solid rgba(var(--fx),0.06); font-size:14.5px; color:var(--text-strong); } .pt-table tbody tr:hover{ background: rgba(227,30,38,0.06); } .pt-table .team-cell{ display:flex; align-items:center; gap:10px; font-weight:700; text-transform:uppercase; font-size:13.5px; color:var(--text-strong); text-decoration:none; } .pt-table .team-cell:hover{ color:var(--gold); } .pt-table .team-cell img{ width:52px;height:52px; object-fit:contain; background:transparent; border-radius:0; padding:0; } .pt-table .pos-col{ font-weight:800; font-size:16px; } .pt-table .pts-col{ color:var(--red); font-weight:800; font-size:16px; } .match-info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:30px; } .match-info-box{ background:var(--bg-card); border:1px solid rgba(var(--fx),0.07); border-radius:var(--radius); padding:22px; } .match-info-box .tag{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; margin-bottom:16px; } .match-info-box.upcoming .tag{ color:var(--red); } .match-info-box.completed .tag{ color:var(--ok); } .match-vs-row{ display:flex; align-items:center; justify-content:space-between; } .match-team{ display:flex; flex-direction:column; align-items:center; gap:8px; font-weight:700; font-size:13px; text-align:center; } .match-team img{ width:56px;height:56px;object-fit:contain; } .match-vs-mid{ text-align:center; color:var(--text-muted); font-size:12px; } .match-vs-mid .vs-badge{ border:1px solid var(--red); color:var(--red); border-radius:50%; width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;margin:0 auto 6px; } .match-result{ color:var(--ok); font-size:12px; font-weight:600; text-align:center; margin-top:6px; } /* ---------- Schedule Page (reference design) ---------- */ .sched-tabbar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:36px; } /* Tabs ek gehri pill ke andar baithte hain */ .stabs{ display:flex; align-items:stretch; gap:6px; padding:6px; border:1px solid rgba(var(--fx),0.08); border-radius:12px; background:linear-gradient(180deg,var(--s3),var(--s1)); box-shadow:inset 0 1px 0 rgba(var(--fx),0.05), 0 14px 26px -20px rgba(var(--shade),0.9); } .stab{ display:inline-flex; align-items:center; gap:9px; padding:11px 22px; border-radius:8px; color:var(--text-muted); font-size:12.5px; font-weight:700; letter-spacing:0.9px; white-space:nowrap; transition:color .25s ease, background .25s ease; } .stab i{ font-size:13px; } .stab:hover{ color:var(--text-strong); background:rgba(var(--fx),0.05); }/* Active tab: laal gradient aur daayi taraf tirchhi kati hui edge */ .stab.active{ color:var(--on-brand); padding-right:32px; border-radius:8px 0 0 8px; background:linear-gradient(100deg,var(--red-dark),var(--red)); clip-path:polygon(0 0, 100% 0, calc(100% - 15px) 100%, 0 100%); filter:drop-shadow(0 0 13px rgba(227,30,38,0.8)); } .stab.active:hover{ color:var(--text-strong); } .stab.active i{ color:var(--text-strong); } .tz-note{ display:inline-flex; align-items:center; gap:9px; padding:11px 20px; border:1px solid rgba(var(--fx),0.1); border-radius:10px; background:rgba(var(--fx),0.02); color:var(--text-muted); font-size:12.5px; font-weight:600; } .tz-note i{ color:var(--red); } /* --- Match ka lamba card - upcoming, live aur completed teeno ke liye --- Har card ka apna rang `--c` se aata hai (laal / jamuni / neela ghoomte hain) */ .mrow{ --c:227,30,38; position:relative; display:grid; grid-template-columns:minmax(0,1fr) 190px minmax(0,1fr) 158px; align-items:stretch; gap:16px; margin-bottom:14px; padding:15px 20px 15px 32px; border:1px solid rgba(var(--fx),0.07); border-radius:14px; background: radial-gradient(90% 150% at 0% 50%, rgba(var(--c),0.11), transparent 62%), linear-gradient(180deg,var(--s3),var(--s0)); box-shadow:0 18px 34px -26px rgba(var(--shade),0.9); overflow:hidden; } /* Baayi taraf chamakti patti aur uske beech ek dot */ .mrow::before{ content:""; position:absolute; left:0; top:12px; bottom:12px; width:4px; border-radius:0 4px 4px 0; background:linear-gradient(180deg, rgba(var(--c),0.18), rgb(var(--c)) 50%, rgba(var(--c),0.18)); box-shadow:0 0 16px 2px rgba(var(--c),0.75); } .mrow::after{ content:""; position:absolute; left:11px; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:rgb(var(--c)); box-shadow:0 0 12px 3px rgba(var(--c),0.85); } .mrow:hover{ border-color:rgba(var(--c),0.45); } .mrow.live{ border-color:rgba(227,30,38,0.5); } /* --- Team ka hissa --- */ .mr-side{ display:flex; align-items:center; gap:16px; min-width:0; } .mr-side.right{ justify-content:flex-end; text-align:right; padding-left:18px; border-left:1px solid rgba(var(--fx),0.07); } .mr-logo{ flex-shrink:0; display:grid; place-items:center; width:86px; height:86px; border:1px solid rgba(var(--fx),0.08); border-radius:14px; background:linear-gradient(160deg,var(--s4),var(--s1)); box-shadow:inset 0 0 20px rgba(var(--c),0.16), 0 0 16px -6px rgba(var(--c),0.55); } .mr-logo img{ width:62px; height:62px; object-fit:contain; filter:drop-shadow(0 4px 10px rgba(var(--shade),0.75)); } /* Naam Poppins me - Anton me lambe naam padhne me dikkat hoti hai */ .mr-nm{ min-width:0; } .mr-nm .n1, .mr-nm .n2{ display:block; font-family:'Poppins',sans-serif; line-height:1.24; letter-spacing:0.2px; text-transform:uppercase; } .mr-nm .n1{ font-size:14.5px; font-weight:600; color:rgba(var(--fx),0.72); } .mr-nm .n2{ font-size:16px; font-weight:800; color:var(--text-strong); } .mr-nm .n3{ display:flex; align-items:center; gap:7px; margin-top:6px; font-size:10.5px; font-weight:600; letter-spacing:0.7px; color:var(--text-muted); text-transform:uppercase; } .mr-nm .n3 i{ color:rgb(var(--c)); font-size:11px; } .mr-side.right .mr-nm .n3{ flex-direction:row-reverse; } /* --- Beech ka hissa --- */ .mr-mid{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:2px 14px; border-left:1px solid rgba(var(--fx),0.07); text-align:center; } .mr-no{ color:rgb(var(--c)); font-size:11px; font-weight:700; letter-spacing:1.2px; } .mr-date{ color:var(--text-strong); font-size:14px; font-weight:800; letter-spacing:0.4px; } .mr-time{ display:flex; align-items:center; gap:7px; color:var(--text-muted); font-size:11.5px; font-weight:600; } .mr-time i{ font-size:11px; } /* VS ka hexagon - clip-path box-shadow kaat deta hai, isliye drop-shadow */ .mr-vs{ position:relative; display:grid; place-items:center; width:46px; height:51px; margin:2px 0; padding:1px; background:rgba(var(--c),0.9); clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); filter:drop-shadow(0 0 14px rgba(var(--c),0.65)); } .mr-vs::before{ content:""; position:absolute; inset:1px; background:radial-gradient(circle at 50% 50%, rgba(var(--c),0.38), var(--s1) 72%); clip-path:inherit; } .mr-vs span{ position:relative; z-index:1; font-family:'Poppins',sans-serif; font-size:13px; font-weight:800; letter-spacing:0.8px; color:var(--text-strong); }/* --- Live / completed ka score hissa --- */ .mr-live{ display:inline-flex; align-items:center; gap:7px; padding:5px 14px; border-radius:20px; background:var(--red); color:var(--on-brand); font-size:11px; font-weight:800; letter-spacing:1.2px; box-shadow:0 0 16px -2px rgba(227,30,38,0.9); } .mr-scores{ display:flex; align-items:center; justify-content:center; gap:13px; margin:3px 0; } .mr-scores .sb{ text-align:center; } .mr-scores .score{ font-size:18px; font-weight:800; color:var(--text-strong); line-height:1.15; } .mr-scores .overs{ font-size:11px; color:var(--text-muted); } .mr-dash{ color:var(--text-muted); font-size:15px; } .mr-result{ color:var(--ok); font-size:12.5px; font-weight:700; line-height:1.35; } /* --- LIVE row: score team ke NAAM ke neeche (home page ke card jaisa) --- Batting wali team ke neeche "123/4 (12.0)" + "RR 10.25", aur jo team abhi aayi hi nahi uske neeche "Yet to bat". Beech me sirf toss line. */ .mr-sc-wrap{ margin-top:9px; } .mr-sc{ display:flex; align-items:baseline; gap:7px; } .mr-side.right .mr-sc{ justify-content:flex-end; } .mr-sc-run{ font-family:'Anton',Impact,sans-serif; font-size:23px; line-height:1; letter-spacing:0.5px; color:var(--text-strong); font-variant-numeric:tabular-nums; } .mr-sc-ov{ font-size:12px; font-weight:600; color:var(--text-muted); } .mr-sc-rr{ margin-top:4px; font-size:11px; font-weight:700; letter-spacing:0.5px; color:var(--gold); } .mr-sc-yet{ font-size:12.5px; font-style:italic; color:var(--text-muted); } /* Beech ki toss line - "Toss: Marwad Cricket Academy opt to bat" */ .mr-note{ max-width:172px; margin:2px 0; font-size:11.5px; line-height:1.45; color:var(--text-soft); } .mr-note:empty{ display:none; } /* --- Venue ka hissa --- */ .mr-venue{ display:flex; flex-direction:column; justify-content:center; gap:8px; min-width:0; padding-left:14px; border-left:1px solid rgba(var(--fx),0.07); } .mv-top{ display:flex; align-items:flex-start; gap:8px; min-width:0; } .mv-top > i{ color:rgb(var(--c)); font-size:13px; margin-top:2px; flex-shrink:0; filter:drop-shadow(0 0 8px rgba(var(--c),0.7)); } .mv-name{ font-size:11.5px; font-weight:700; color:var(--text-strong); letter-spacing:0.4px; text-transform:uppercase; line-height:1.3; } .mv-city{ margin-top:2px; font-size:11px; color:var(--text-muted); } .mv-stadium{ display:block; width:100%; max-width:138px; height:auto; color:rgb(var(--c)); opacity:0.75; filter:drop-shadow(0 0 10px rgba(var(--c),0.55)); } .live-dot{ width:7px;height:7px;border-radius:50%;background:#fff; animation:pulse 1.2s infinite; } @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.3;} } /* --- Live Boundary / Wicket Pulse Ticker --- */ .live-event-ticker { position: absolute; top: 10px; right: 14px; z-index: 10; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; font-size: 11.5px; font-weight: 900; letter-spacing: 0.8px; text-transform: uppercase; color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,0.5); animation: tickerSpring 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; pointer-events: none; } .live-event-ticker.six { background: linear-gradient(135deg, #e31e26, #ff5e62); border: 1.5px solid #ff999b; box-shadow: 0 0 20px rgba(227,30,38,0.7); } .live-event-ticker.four { background: linear-gradient(135deg, #d97706, #f59e0b); border: 1.5px solid #fde68a; box-shadow: 0 0 18px rgba(245,158,11,0.65); } .live-event-ticker.wicket { background: linear-gradient(135deg, #7f1d1d, #dc2626); border: 1.5px solid #fca5a5; box-shadow: 0 0 24px rgba(220,38,38,0.85); } .live-event-ticker.milestone { background: linear-gradient(135deg, #b45309, #e0a94d); border: 1.5px solid #fef3c7; color: #0b0e17; box-shadow: 0 0 22px rgba(224,169,77,0.8); } @keyframes tickerSpring { 0% { opacity: 0; transform: scale(0.6) translateY(-8px); } 60% { opacity: 1; transform: scale(1.1) translateY(0); } 100% { opacity: 1; transform: scale(1) translateY(0); } } /* Sound toggle button on live headers */ .sound-toggle-btn { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); border-radius: 16px; padding: 3px 10px; font-size: 11px; font-weight: 700; color: var(--text-soft); cursor: pointer; transition: all 0.2s; } .sound-toggle-btn:hover { background: rgba(255,255,255,0.12); color: var(--text-strong); } .sound-toggle-btn.active { background: rgba(224,169,77,0.18); border-color: rgba(224,169,77,0.5); color: #e0a94d; } /* ---------- Team Detail Page ---------- */ .back-link{ display:flex; align-items:center; gap:8px; color:var(--text-muted); font-size:13px; margin-bottom:20px; } /* Team banner - team ki photo poore banner me (home slider jaisi) aur logo + details uske uper. Photo na ho to sirf gradient background. */ .team-banner{ position:relative; overflow:hidden; background:linear-gradient(120deg,var(--s1) 40%,var(--s-red) 100%); border-bottom:1px solid rgba(227,30,38,0.2); } .team-banner .tb-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; } .team-banner .tb-bg img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; transform:scale(1.04); } /* Image ke uper dark layer - warna text padha nahi jaata */ .team-banner .tb-bg::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(11,14,23,0.94) 0%, rgba(11,14,23,0.78) 45%, rgba(11,14,23,0.42) 100%), linear-gradient(0deg, rgba(11,14,23,0.92) 0%, transparent 62%); } .team-banner.no-photo::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 15% 20%, rgba(227,30,38,0.18), transparent 42%), radial-gradient(circle at 85% 70%, rgba(224,169,77,0.10), transparent 45%); } .team-banner .tb-inner{ position:relative; z-index:2; padding-top:34px; padding-bottom:40px; min-height:400px; display:flex; flex-direction:column; justify-content:center; } .tb-back{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; font-size:11.5px; font-weight:700; letter-spacing:1.4px; color:var(--text-soft); background:rgba(var(--shade),0.35); border:1px solid rgba(var(--fx),0.14); border-radius:30px; padding:8px 16px; margin-bottom:auto; transition:background .25s, color .25s, border-color .25s; }.tb-back:hover{ background:var(--red); border-color:var(--red); color:var(--on-brand); } .tb-head{ display:flex; align-items:center; gap:26px; margin-top:34px; flex-wrap:wrap; } .tb-logo{ flex-shrink:0; width:150px; height:150px; border-radius:50%; padding:10px; background:rgba(11,14,23,0.55); border:2px solid var(--border-gold); box-shadow:0 14px 40px rgba(var(--shade),0.55), 0 0 46px rgba(224,169,77,0.14); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); } .tb-logo img{ width:100%; height:100%; object-fit:contain; } .tb-tag{ display:inline-flex; align-items:center; gap:7px; font-size:10px; font-weight:800; letter-spacing:1.8px; text-transform:uppercase; color:var(--gold); border:1px solid var(--border-gold); border-radius:30px; padding:4px 13px; margin-bottom:12px; } .tb-text h1{ font-family:'Anton',Impact,'Arial Black',sans-serif; font-size:46px; line-height:1.05; text-transform:uppercase; font-weight:900; margin:0; color:var(--text-strong); letter-spacing:1px; text-shadow:0 4px 26px rgba(var(--shade),0.7); } .tb-meta{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; } .tb-meta span{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-soft); background:rgba(var(--fx),0.06); border:1px solid rgba(var(--fx),0.1); border-radius:30px; padding:7px 15px; } .tb-meta i{ color:var(--red); font-size:12px; } .tb-stats{ display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; } .tb-stat{ min-width:118px; background:rgba(11,14,23,0.6); border:1px solid rgba(var(--fx),0.1); border-top:2px solid var(--red); border-radius:var(--radius); padding:13px 20px; backdrop-filter:blur(4px); } .tb-stat b{ display:block; font-family:'Anton',Impact,'Arial Black',sans-serif; font-size:28px; line-height:1; color:var(--gold); font-variant-numeric:tabular-nums; } .tb-stat span{ display:block; margin-top:5px; font-size:10.5px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--text-muted); } /* ---------- Team sponsors (captain-card style - photo left, info right) ---------- */ .td-sponsor-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(430px,1fr)); gap:22px; } .td-sponsor{ position:relative; overflow:hidden; display:flex; align-items:center; gap:32px; background:linear-gradient(160deg,var(--s4) 0%,var(--s2) 65%); border:1px solid rgba(var(--fx),0.07); border-radius:12px; padding:30px 34px; text-align:left; transition:transform .3s cubic-bezier(.22,.61,.36,1), border-color .3s, box-shadow .3s; } .td-sponsor::before{ content:''; position:absolute; right:-50px; top:-70px; width:220px; height:200px; background:radial-gradient(ellipse at center,rgba(224,169,77,0.16),transparent 70%); pointer-events:none; } .td-sponsor:hover{ transform:translateY(-7px); border-color:var(--border-gold); box-shadow:0 18px 38px rgba(var(--shade),0.5); } /* Captain card ke barabar - photo bada dikhe */ .td-sponsor .ts-photo{ position:relative; flex-shrink:0; width:158px; height:158px; border-radius:50%; padding:4px; background:conic-gradient(from 0deg,var(--gold),rgba(224,169,77,0.15),var(--gold),rgba(224,169,77,0.15),var(--gold)); display:flex; } .td-sponsor .ts-photo img{ width:100%; height:100%; border-radius:50%; object-fit:cover; background:var(--bg-darker); } .td-sponsor .ts-info{ position:relative; flex:1; min-width:0; } .td-sponsor .ts-tag{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--on-brand); background:var(--red); border-radius:30px; padding:4px 14px; } .td-sponsor .ts-brand{ position:relative; font-family:'Anton',Impact,'Arial Black',sans-serif; margin-top:12px; font-size:30px; font-weight:400; letter-spacing:1px; text-transform:uppercase; color:var(--gold); line-height:1.1; word-break:break-word; } .td-sponsor .ts-name{ position:relative; margin-top:8px; font-size:14px; line-height:1.6; color:var(--text-muted); } .td-sponsor .ts-link{ position:relative; display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-light); border:1px solid rgba(var(--fx),0.16); border-radius:30px; padding:9px 20px; transition:background .25s, border-color .25s, color .25s; }.td-sponsor .ts-link:hover{ background:var(--red); border-color:var(--red); color:var(--on-brand); } .td-sponsor .ts-link.none{ color:var(--text-muted); border-style:dashed; } .td-sponsor .ts-link.none:hover{ background:transparent; border-color:rgba(var(--fx),0.16); color:var(--text-muted); } /* ---------- Captain card ---------- */ .td-captain{ position:relative; overflow:hidden; display:flex; align-items:center; gap:34px; background:linear-gradient(115deg,var(--s4) 0%,var(--s2) 60%); border:1px solid var(--border-gold); border-radius:12px; padding:32px 36px; flex-wrap:wrap; } .td-captain::before{ content:''; position:absolute; right:-60px; top:-60px; width:300px; height:300px; background:radial-gradient(circle,rgba(224,169,77,0.16),transparent 68%); pointer-events:none; } .td-captain .tc-photo{ position:relative; flex-shrink:0; width:158px; height:158px; border-radius:50%; padding:4px; background:conic-gradient(from 0deg,var(--gold),rgba(227,30,38,0.65),var(--gold),rgba(227,30,38,0.65),var(--gold)); display:flex; } .td-captain .tc-photo img{ width:100%; height:100%; border-radius:50%; object-fit:cover; background:var(--bg-darker); } .td-captain .tc-crown{ position:absolute; right:2px; bottom:6px; width:44px; height:44px; border-radius:50%; background:var(--gold); border:3px solid var(--s2); color:var(--s1); font-size:16px; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(224,169,77,0.35); } .td-captain .tc-info{ position:relative; flex:1; min-width:240px; }.td-captain .tc-label{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--on-brand); background:var(--red); border-radius:30px; padding:4px 14px; } .td-captain h3{ font-family:'Anton',Impact,'Arial Black',sans-serif; font-size:34px; line-height:1.1; text-transform:uppercase; letter-spacing:1px; margin:12px 0 10px; color:var(--text-strong); } .td-captain p{ margin:0; font-size:14px; line-height:1.75; color:var(--text-muted); } .td-captain p b{ color:var(--text-light); } .td-captain .tc-badges{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; } .td-captain .tc-badges span{ display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--text-light); background:rgba(var(--fx),0.05); border:1px solid rgba(var(--fx),0.1); border-radius:30px; padding:8px 16px; } .td-captain .tc-badges i{ color:var(--gold); font-size:12px; } /* ---------- Teams Listing Page - neon esports cards ---------- */ .teams-header{ position:relative; margin-bottom:26px; } .teams-header .season-sw{ position:absolute; right:0; top:50%; transform:translateY(-50%); } .team-card-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:26px; } /* Har card ka apna rang PHP se aata hai: style="--c:227,30,38" Bahar wala layer sirf 1px ka rangeen border hai - kate hue kono pe normal border kaam nahi karta, isliye do layer ka tareeka use kiya hai. */ .tcard{ --c:227,30,38; --cut:30px; position:relative; padding:1px; background:linear-gradient(150deg, rgba(var(--c),0.95) 0%, rgba(var(--c),0.30) 45%, rgba(var(--c),0.85) 100%); clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); filter:drop-shadow(0 0 16px rgba(var(--c),0.32)) drop-shadow(0 18px 30px rgba(var(--shade),0.6)); transition:transform .38s cubic-bezier(.22,.61,.36,1), filter .38s ease; } .tcard-inner{ position:relative; clip-path:inherit; display:flex; align-items:center; gap:24px; padding:26px 28px; /* upar accent ki chamak, uske neeche halka madhumakhi ka chhatta (honeycomb), aur sabse neeche gehra gradient */ background: radial-gradient(130% 130% at 0% 0%, rgba(var(--c),0.17), transparent 58%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.64' height='60' viewBox='0 0 17.32 30'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='0.6'%3E%3Cpath d='M8.66 -10L0 -5L0 5L8.66 10L17.32 5L17.32 -5Z'/%3E%3Cpath d='M8.66 20L0 25L0 35L8.66 40L17.32 35L17.32 25Z'/%3E%3Cpath d='M0 5L-8.66 10L-8.66 20L0 25L8.66 20L8.66 10Z'/%3E%3Cpath d='M17.32 5L8.66 10L8.66 20L17.32 25L25.98 20L25.98 10Z'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(150deg,var(--s3) 0%, var(--s1) 55%, var(--s0) 100%); } /* --- Team ka logo - koi frame nahi, sirf saaf logo --- */ .tc-crest{ flex-shrink:0; } .tc-logo{ display:grid; place-items:center; width:150px; height:150px; } .tc-logo img{ display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 8px 18px rgba(var(--shade),0.75)) drop-shadow(0 0 24px rgba(var(--c),0.30)); transition:transform .38s cubic-bezier(.22,.61,.36,1); } .tcard:hover .tc-logo img{ transform:scale(1.06); } /* --- Beech ka hissa: naam, tagline, button --- */ .tc-main{ flex:1; min-width:0; } .tc-name{ margin:0 0 10px; font-family:'Anton',Impact,'Arial Black',sans-serif; font-weight:400; font-size:30px; line-height:1.06; letter-spacing:1.2px; text-transform:uppercase; } .tc-name .l1{ display:block; color:var(--text-strong); } .tc-name .l2{ display:block; color:rgb(var(--c)); } .tc-tagline{ margin:0 0 18px; font-size:12.5px; font-weight:500; letter-spacing:0.7px; color:var(--text-muted); } .tc-tagline .dot{ color:rgb(var(--c)); margin:0 7px; font-size:14px; } .tc-btn{ display:inline-flex; align-items:center; gap:9px; border:1px solid rgba(var(--fx),0.32); border-radius:3px; padding:10px 20px; color:var(--text-strong); font-size:11.5px; font-weight:700; letter-spacing:1.3px; white-space:nowrap; transition:background .3s ease, border-color .3s ease, box-shadow .3s ease; } .tc-btn i{ color:rgb(var(--c)); font-size:11px; transition:transform .3s ease, color .3s ease; } .tc-btn:hover{ background:rgba(var(--c),0.16); border-color:rgba(var(--c),0.9); box-shadow:0 0 18px -4px rgba(var(--c),0.75); } .tc-btn:hover i{ color:var(--text-strong); transform:translateX(4px); } /* --- Captain --- */ .tc-captain{ flex-shrink:0; text-align:center; width:132px; } .tc-ring{ display:block; width:118px; height:118px; margin:0 auto 12px; padding:3px; border-radius:50%; background:linear-gradient(160deg, rgba(var(--c),1), rgba(var(--c),0.35)); box-shadow:0 0 22px -2px rgba(var(--c),0.55); } .tc-ring img{ display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; background:var(--s1); } .tc-captain .cap-name{ font-size:14px; font-weight:700; color:var(--text-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tc-captain .cap-label{ margin-top:3px; font-size:11px; font-weight:700; letter-spacing:1.4px; color:rgb(var(--c)); } .tcard:hover{ transform:translateY(-6px); filter:drop-shadow(0 0 26px rgba(var(--c),0.55)) drop-shadow(0 26px 38px rgba(var(--shade),0.68)); } /* Chhoti screen pe do column tang lagte hain - ek hi column rakho */ @media (max-width:1080px){ .team-card-grid{ grid-template-columns:1fr; } } @media (max-width:620px){ .team-card-grid{ gap:20px; } .tcard{ --cut:22px; } .tcard-inner{ flex-direction:column; text-align:center; gap:18px; padding:26px 20px; } .tc-logo{ width:130px; height:130px; } .tc-name{ font-size:26px; } .tc-tagline{ margin-bottom:16px; } .tc-captain{ width:auto; max-width:100%; } .tc-ring{ width:104px; height:104px; } } .champion-banner{ background: linear-gradient(90deg, rgba(227,30,38,0.15), rgba(224,169,77,0.08)); border:1px solid var(--border-gold); border-radius: var(--radius); padding: 22px 30px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top: 30px; } .champion-banner .cb-text{ font-weight:800; font-size:18px; letter-spacing:1px; text-transform:uppercase; display:flex; align-items:center; gap:10px;} /* ---------- Responsive ---------- */ @media (max-width: 1024px){ .grid-4{ grid-template-columns:repeat(2,1fr); } .grid-5{ grid-template-columns:repeat(3,1fr); } .grid-6{ grid-template-columns:repeat(3,1fr); } .insta-strip{ grid-template-columns:repeat(3,1fr); } /* --- Home: committee + gallery --- */ .hx-head{ font-size:34px; gap:16px; } .hx-head.big{ font-size:52px; } .hx-head::before, .hx-head::after{ width:80px; } .cm-card{ flex:0 0 calc((100% - 3 * 16px) / 4); } .hg-grid{ grid-template-columns:repeat(3,1fr); } .dash-btn .db-lines{ width:80px; } .footer-grid{ grid-template-columns:1fr 1fr; } .gallery-grid{ grid-template-columns:repeat(2,1fr); } .match-info-grid{ grid-template-columns:1fr; } /* --- About page --- */ .ab-who-grid{ grid-template-columns:1fr; gap:42px; } .ab-wm{ display:none; } .ab-h2{ font-size:46px; } .mvv-grid{ grid-template-columns:repeat(2,1fr); } .why-shell{ padding:40px 30px 44px; } /* 2 column me: baayein wale card ki line hata do */ .why-grid{ grid-template-columns:repeat(2,1fr); gap:34px 0; } .why-grid > *:nth-child(odd){ padding-left:0; border-left:none; } /* 3 column me: pehle column wale item ki line hata do */ .stats-bar{ grid-template-columns:repeat(3,1fr); gap:24px 0; } .stat-item:nth-child(3n+1){ border-left:none; } } /* ============================================================ CONTACT PAGE (reference design) Do dabbe: baayein "Get In Touch" (halka border, kone me bindu ka jaal), daayein "Send Us A Message" (laal chamakta border, upar daayein bindu aur neeche daayein tirchi lakeerein). Har input ke andar baayein taraf ek icon baithta hai. ============================================================ */ .contact-grid{ display:grid; grid-template-columns:0.88fr 1.32fr; gap:32px; align-items:start; } .contact-info{ position:relative; overflow:hidden; padding:38px 34px 40px; border:1px solid rgba(var(--fx),0.09); border-radius:18px; background:linear-gradient(160deg,var(--s2),var(--s0) 72%); } .contact-info::before{ content:""; position:absolute; left:0; bottom:0; width:150px; height:180px; background:radial-gradient(circle, rgba(227,30,38,0.5) 1px, transparent 1.4px) 0 0 / 13px 13px; -webkit-mask-image:linear-gradient(to top right, #000, transparent 60%); mask-image:linear-gradient(to top right, #000, transparent 60%); pointer-events:none; } .contact-info > *{ position:relative; } .ct-h{ margin:0; font-family:'Anton',Impact,'Arial Black',sans-serif; font-weight:400; font-size:38px; line-height:1.05; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-strong); } .ct-h span{ color:var(--red); } .ct-rule{ width:64px; height:3px; margin:12px 0 18px; background:var(--red); box-shadow:0 0 12px rgba(227,30,38,0.9); } .ct-lead{ margin:0 0 30px; color:var(--text-muted); font-size:14.5px; line-height:1.85; } .contact-info .ci-row{ display:flex; gap:18px; align-items:center; margin-bottom:22px; } .contact-info .ci-icon{ display:grid; place-items:center; flex:0 0 auto; width:52px; height:52px; border:1px solid rgba(227,30,38,0.75); border-radius:50%; background:radial-gradient(circle at 50% 40%, rgba(227,30,38,0.2), var(--s1) 76%); color:var(--text-strong); font-size:18px; box-shadow:0 0 20px -4px rgba(227,30,38,0.85); } .contact-info .ci-txt{ border-left:1px solid rgba(var(--fx),0.13); padding-left:18px; } .contact-info .ci-label{ margin-bottom:4px; color:var(--red); font-size:12px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; } .contact-info .ci-row a, .contact-info .ci-row span{ color:var(--text-strong); text-decoration:none; font-size:15px; line-height:1.5; } .contact-info .ci-row a:hover{ color:var(--red); } /* Beech me chamakti patli line */ .ci-sep{ height:1px; margin:30px 0 20px; background:linear-gradient(90deg, rgba(var(--fx),0.12), rgba(227,30,38,0.95) 60%, rgba(var(--fx),0.12)); box-shadow:0 0 14px rgba(227,30,38,0.5); } .ci-follow{ margin-bottom:16px; color:var(--red); font-size:12.5px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; } .contact-info .ci-social{ display:flex; gap:14px; } .contact-info .ci-social a{ display:grid; place-items:center; width:46px; height:46px; border-radius:50%; border:1px solid rgba(227,30,38,0.55); color:var(--text-strong); font-size:17px; text-decoration:none; transition:background .25s ease, border-color .25s ease, box-shadow .25s ease; } .contact-info .ci-social a:hover{ background:var(--red); border-color:var(--red); box-shadow:0 0 20px -3px rgba(227,30,38,0.9); } /* ---------- Form wala dabba ---------- */ .contact-form-box{ position:relative; overflow:hidden; padding:34px 34px 38px; border:1.5px solid var(--red); border-radius:18px; background:linear-gradient(160deg,var(--s3),var(--s0) 68%); box-shadow:0 0 46px -14px rgba(227,30,38,0.85), 0 26px 56px -34px rgba(var(--shade),0.9); } .contact-form-box::before{ /* upar daayein bindu ka jaal */ content:""; position:absolute; right:0; top:0; width:170px; height:150px; background:radial-gradient(circle, rgba(227,30,38,0.6) 1px, transparent 1.4px) 0 0 / 13px 13px; -webkit-mask-image:linear-gradient(to bottom left, #000, transparent 62%); mask-image:linear-gradient(to bottom left, #000, transparent 62%); pointer-events:none; } .contact-form-box::after{ /* neeche daayein tirchi lakeerein */ content:""; position:absolute; right:0; bottom:0; width:150px; height:120px; background:repeating-linear-gradient(135deg, transparent 0 13px, rgba(227,30,38,0.4) 13px 14px); -webkit-mask-image:linear-gradient(to top left, #000, transparent 65%); mask-image:linear-gradient(to top left, #000, transparent 65%); pointer-events:none; } .contact-form-box > *{ position:relative; } .cf-head{ display:flex; align-items:center; gap:20px; margin-bottom:28px; } .cf-badge{ display:grid; place-items:center; flex:0 0 auto; width:58px; height:58px; border:1.5px solid var(--red); border-radius:50%; background:radial-gradient(circle at 50% 40%, rgba(227,30,38,0.28), var(--s1) 76%); color:var(--red); font-size:23px; box-shadow:0 0 24px -4px rgba(227,30,38,0.9); } .contact-form-box h3{ margin:0; font-family:'Anton',Impact,'Arial Black',sans-serif; font-weight:400; font-size:28px; letter-spacing:1.1px; text-transform:uppercase; color:var(--text-strong); } .contact-form-box h3 span{ color:var(--red); } .cf-rule{ width:78px; height:8px; margin-top:9px; background: radial-gradient(circle at calc(100% - 4px) 50%, var(--red) 0 3px, transparent 3.5px) no-repeat, linear-gradient(90deg, rgba(var(--fx),0.32), rgba(var(--fx),0.32)) no-repeat left center / 56px 2px; } .cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .cf-field{ margin-bottom:18px; display:flex; flex-direction:column; } .cf-field label{ margin-bottom:9px; color:var(--text-strong); font-size:12.5px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; } .cf-field label b{ color:var(--red); } /* Input ke andar baayein icon */ .cf-inp{ position:relative; display:block; } .cf-inp > i{ position:absolute; left:16px; top:50%; translate:0 -50%; color:var(--text-muted); font-size:15px; pointer-events:none; } .cf-inp.ta > i{ top:19px; translate:0 0; } .cf-inp .cf-chev{ left:auto; right:17px; font-size:13px; } .cf-field input, .cf-field select, .cf-field textarea{ background:var(--s1); border:1px solid rgba(var(--fx),0.13); border-radius:10px; color:var(--text-strong); padding:15px 16px 15px 45px; font-size:14.5px; font-family:inherit; width:100%; } .cf-field select{ -webkit-appearance:none; appearance:none; padding-right:44px; cursor:pointer; } .cf-field select option{ background:var(--s1); color:var(--text-strong); } .cf-field textarea{ resize:vertical; min-height:130px; line-height:1.7; } .cf-field input::placeholder, .cf-field textarea::placeholder{ color:rgba(154,160,173,0.9); } .cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(227,30,38,0.14); }.cf-send{ display:inline-flex; align-items:center; gap:14px; margin-top:6px; padding:17px 34px; border:none; border-radius:10px; background:linear-gradient(120deg,var(--red),#ff3b42); color:var(--on-brand); font-family:inherit; font-size:14px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; cursor:pointer; box-shadow:0 0 30px -6px rgba(227,30,38,0.9); transition:filter .25s ease, box-shadow .25s ease; } .cf-send:hover{ filter:brightness(1.08); box-shadow:0 0 40px -4px rgba(227,30,38,1); } .form-alert{ border-radius:6px; padding:12px 14px; font-size:13.5px; margin-bottom:18px; line-height:1.7; } .form-alert.ok{ background:rgba(76,175,80,0.12); border:1px solid rgba(76,175,80,0.4); color:#7ddb81; } .form-alert.err{ background:rgba(227,30,38,0.12); border:1px solid rgba(227,30,38,0.45); color:#ff8b90; } @media (max-width: 900px){ .contact-grid{ grid-template-columns:1fr; } .cf-row{ grid-template-columns:1fr; } } /* Jab table khali ho tab dikhne wala message */ .empty-note{ text-align:center; color:rgba(var(--fx),0.55); padding:40px 20px; font-size:15px; border:1px dashed rgba(var(--fx),0.15); border-radius: var(--radius); } /* Newsletter ka result message */ .sub-msg{ font-size:13px; margin-top:10px; font-weight:600; } .sub-msg.ok{ color:var(--ok); } .sub-msg.err{ color: var(--red); } /* --- Laptop / bada tablet: pill ek hi line me rahe isliye nav sikodte hain --- */ @media (max-width: 1320px){ .nav-wrap{ padding:8px 12px 8px 16px; gap:10px; } .logo img{ height:62px; max-width:190px; } .site-header .logo{ height:62px; } nav.main-nav ul{ gap:2px; } nav.main-nav a{ font-size:12.5px; letter-spacing:0.6px; padding:9px 9px; } header.site-header.scrolled .logo img{ height:52px; } } @media (max-width: 1040px){ nav.main-nav a{ font-size:12px; letter-spacing:0.3px; padding:9px 8px; } nav.main-nav a.active::after{ width:34px; bottom:-7px; } .logo img{ height:56px; max-width:170px; } .site-header .logo{ height:56px; } header.site-header.scrolled .logo img{ height:48px; } } @media (max-width: 768px){ nav.main-nav{ display:none; } nav.main-nav.open{ display:block; position:absolute; left:0; right:0; top:calc(100% + 10px); background:var(--s3); border:1px solid rgba(var(--fx),0.09); border-radius:18px; padding:8px 16px; box-shadow:0 18px 40px rgba(var(--shade),0.6); z-index:60; } nav.main-nav.open ul{ flex-direction:column; gap:0; } nav.main-nav.open li{ border-bottom:1px solid rgba(var(--fx),0.06); } nav.main-nav.open li:last-child{ border-bottom:none; } nav.main-nav.open a{ display:block; padding:12px 10px; font-size:13px; letter-spacing:0.8px; } nav.main-nav.open a.active::after{ display:none; } /* list me patti ki zarurat nahi */ .site-header .nav-wrap{ position:relative; } .nav-toggle{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:rgba(var(--fx),0.05); border:1px solid rgba(var(--fx),0.14); color:var(--text-strong); font-size:16px; } .home-hero .container, .page-hero .container{ flex-direction:column; text-align:center; } .home-hero-image{ max-width:100%; } .grid-3, .grid-2{ grid-template-columns:1fr; } .grid-4{ grid-template-columns:repeat(2,1fr); } .footer-grid{ grid-template-columns:1fr; } .why-grid{ grid-template-columns:1fr 1fr; } .gallery-grid{ grid-template-columns:1fr; } .stats-bar{ grid-template-columns:repeat(2,1fr); } .team-hero-photo{ margin-left:0; } .footer-bottom{ flex-direction:column; gap:8px; text-align:center; } /* --- Header thoda compact, par pill waisi hi tairti hui --- */ header.site-header{ padding:10px 12px 8px; } .nav-wrap{ padding:8px 10px 8px 14px; gap:10px; border-radius:22px; } .nav-wrap::before{ width:190px; background:radial-gradient(90px 44px at 66px 100%, rgba(224,169,77,0.15), transparent 72%); } .logo img{ height:50px; max-width:170px; } .site-header .logo{ height:50px; } .header-actions{ gap:10px; } .btn-admin{ padding:9px 13px; font-size:11px; letter-spacing:0; } .btn-register{ display:none; } /* mobile par register hamburger menu ke andar hai */ /* Mobile par bhi header ki height scroll par na badle - sirf pill ka radius aur logo image chhoti. Padding badalna band (page khisakta tha). */ header.site-header.scrolled .nav-wrap{ border-radius:20px; } header.site-header.scrolled .logo img{ height:44px; } /* --- Spacing / typography --- */ .container{ padding:0 16px; } .section-pad{ padding:40px 0; } .section-heading{ font-size:20px; margin-bottom:28px; gap:10px; } .section-heading::before, .section-heading::after{ width:30px; } .page-heading{ font-size:32px; } /* --- Hero --- */ /* min-height rakha hai taki background image ko dikhne ki jagah mile */ .home-hero .container{ padding:56px 16px 52px; min-height:360px; gap:28px; } .page-hero .container{ padding-top:48px; padding-bottom:48px; min-height:220px; } .page-hero-text{ max-width:100%; } /* mobile pe text center me hai isliye overlay bhi upar-neeche wala chahiye */ .page-hero .hero-bg::after{ background: linear-gradient(180deg, rgba(11,14,23,0.70) 0%, rgba(11,14,23,0.90) 100%); } .home-hero-text{ max-width:100%; } .home-hero-text .eyebrow{ font-size:24px; } .home-hero-text .eyebrow .accent{ font-size:28px; } .home-hero-text .season{ justify-content:center; } /* mobile pe text center me hai isliye overlay bhi upar-neeche wala chahiye */ .home-hero .hero-bg::after{ background: linear-gradient(180deg, rgba(11,14,23,0.72) 0%, rgba(11,14,23,0.88) 100%); } .page-hero-text p.subtitle{ margin-left:auto; margin-right:auto; } .slider-dots{ bottom:12px; } /* --- Grids --- */ .insta-strip{ grid-template-columns:repeat(2,1fr); } /* --- Point table side me scroll hogi --- */ .pt-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; } .pt-table{ min-width:700px; } /* naam ek hi line me rahe, warna 3 line me tootkar numbers se takra jata hai */ .pt-table th, .pt-table td{ padding:12px 10px; white-space:nowrap; } /* max-content isliye taki cell naam ke hisaab se chaudi ho, warna flex container sikud jata hai aur naam agle column pe chadh jata hai */ .pt-table .team-cell{ white-space:nowrap; gap:8px; width:max-content; } .pt-table .team-cell img{ width:36px; height:36px; } .pt-legend{ gap:12px; font-size:11.5px; } /* --- Point table: Mobile Compact IPL-App View (Zero horizontal scroll, fits screen) --- */ .pt-shell{ border-radius:12px; } .pt-grid{ width:100% !important; min-width:100% !important; border-spacing:0 4px; table-layout:fixed; } .pt-grid thead tr{ background:linear-gradient(90deg,var(--red-dark),var(--red)); } .pt-grid th{ padding:8px 2px; font-size:10px; border-left:none; } .pt-grid th i{ display:none !important; } .pt-grid th span{ font-size:10px; letter-spacing:0; white-space:nowrap; } .pt-grid th.c-team{ padding-left:4px; text-align:left; } /* Chhoti screen par "Played / Won / Lost / Points" apne column se bahar nikal kar ek dusre pe chadh jaate hain. Isliye mobile par sirf chhota naam dikhate hain - P / W / L / PTS. Asli shabd DOM me hi rehta hai (font-size:0) taki screen reader ko poora sunai de, aur neeche wali legend inka matlab already samjha deti hai. */ .pt-grid th.c-pl span, .pt-grid th.c-won span, .pt-grid th.c-lost span, .pt-grid th.c-pts span{ font-size:0; } .pt-grid th.c-pl span::before, .pt-grid th.c-won span::before, .pt-grid th.c-lost span::before,.pt-grid th.c-pts span::before{ font-size:10.5px; letter-spacing:0.3px; } .pt-grid th.c-pl span::before { content:'P'; } .pt-grid th.c-won span::before { content:'W'; } .pt-grid th.c-lost span::before{ content:'L'; } .pt-grid th.c-pts span::before { content:'PTS'; } /* Column overflow ka aakhri taala - kuchh bhi padosi column me na girre */ .pt-grid th{ overflow:hidden; } .pt-grid th.c-tied, .pt-grid th.c-nr, .pt-grid td.c-tied, .pt-grid td.c-nr{ display:none !important; } /* Mobile par T aur NR hide karke screen pe fit karte hain */ .pt-grid tbody td{ padding:6px 2px; font-size:12px; font-weight:700; } .pt-grid th.c-pos, .pt-grid tbody td.c-pos, .pt-grid tbody td:first-child{ width:32px; padding-left:3px; padding-right:2px; } .pt-grid th.c-team, .pt-grid td.c-team{ width:auto; text-align:left; padding-left:4px; padding-right:2px; } .pt-grid th.c-pl, .pt-grid td.c-pl{ width:25px; font-size:11.5px; font-variant-numeric:tabular-nums; } .pt-grid th.c-won, .pt-grid td.c-won{ width:25px; font-size:11.5px; font-variant-numeric:tabular-nums; } .pt-grid th.c-lost, .pt-grid td.c-lost{ width:25px; font-size:11.5px; font-variant-numeric:tabular-nums; } .pt-grid th.c-pts, .pt-grid td.c-pts{ width:32px; font-size:13.5px; font-weight:900; color:var(--red); padding:6px 2px; } .pt-grid th.c-nrr, .pt-grid td.c-nrr{ width:45px; font-size:11px; font-weight:600; color:var(--text-soft); padding-right:4px; } .pos-hex{ width:24px; height:26px; filter:none; } .pos-hex b{ font-size:11px; font-weight:800; } .pt-team{ gap:5px; } .pt-team img{ width:22px; height:22px; flex-shrink:0; filter:none; } .pt-team .pt-tname{ font-size:11px; font-weight:800; letter-spacing:0; white-space:normal; line-height:1.15; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .pt-legend{ gap:6px 10px; font-size:10.5px; padding:10px 12px; justify-content:center; } /* --- Schedule: sab kuch ek ke neeche ek --- */ .sched-tabbar{ justify-content:center; } .stabs{ flex-wrap:wrap; justify-content:center; } .mrow{ grid-template-columns:1fr; gap:14px; padding:20px 18px 20px 28px; } /* Mobile pe logo hamesha baayi taraf, naam uske daayi taraf */ .mr-side.right{ flex-direction:row-reverse; justify-content:flex-end; text-align:left; padding-left:0; border-left:none; } .mr-side.right .mr-nm .n3{ flex-direction:row; } /* Mobile pe score bhi naam ki tarah baayi se - dono side ek jaisi */ .mr-side.right .mr-sc{ justify-content:flex-start; } .mr-note{ max-width:none; } .mr-mid{ padding:14px 0; border-left:none; border-top:1px solid rgba(var(--fx),0.07); border-bottom:1px solid rgba(var(--fx),0.07); } .mr-venue{ flex-direction:row; align-items:center; justify-content:space-between; gap:16px; padding:14px 0 0; border-left:none; border-top:1px solid rgba(var(--fx),0.07); } .mv-stadium{ max-width:120px; flex-shrink:0; } .mv-name{ font-size:12px; } .mr-logo{ width:74px; height:74px; border-radius:12px; } .mr-logo img{ width:52px; height:52px; } .mr-nm .n1{ font-size:13.5px; } .mr-nm .n2{ font-size:15px; } .sec-title .st-head{ font-size:28px; } .sec-title .st-head.lined{ gap:12px; } .sec-title .st-head.lined::before, .sec-title .st-head.lined::after{ width:34px; } .sec-title .st-top::before, .sec-title .st-top::after{ width:46px; } .match-info-grid{ grid-template-columns:1fr; } /* --- Teams listing --- */ .champion-banner{ flex-direction:column; text-align:center; padding:20px; } .champion-banner .cb-text{ font-size:15px; justify-content:center; } /* --- Team detail --- */ .team-hero{ justify-content:center; text-align:center; } .team-hero .team-logo-big{ width:110px; height:110px; } .team-hero-info h1{ font-size:26px; } .team-hero-info .meta{ justify-content:center; flex-wrap:wrap; gap:12px; } .team-hero-photo{ max-width:100%; } .player-card img{ height:160px; } /* --- Gallery: ek row me ek hi album card --- */ .gwrap{ gap:20px; } .gcard{ flex:1 1 100%; } .gc-body{ padding:18px 62px 18px 76px; } .gc-ico{ left:16px; top:-24px; width:48px; height:48px; font-size:17px; } .gc-title{ font-size:16px; } .gc-go{ right:14px; width:38px; height:38px; } .gtabs{ gap:10px; } .gtab{ padding:12px 16px; font-size:11.5px; letter-spacing:0.5px; } .sec-title .st-badge{ width:46px; height:46px; border-radius:12px; } .sec-title .st-badge i{ font-size:20px; } .sec-title .st-head.dotted{ gap:12px; } .sec-title .st-head.dotted::before, .sec-title .st-head.dotted::after{ width:48px; } .sec-title .st-sub{ font-size:13px; } /* --- About page --- */ .ab-eyebrow{ font-size:11.5px; letter-spacing:3px; } .ab-eyebrow::before, .ab-eyebrow.dual::after{ width:30px; } .ab-h2{ font-size:36px; } .ab-rule{ width:96px; margin:16px 0 20px; } .ab-who-left p{ font-size:14.5px; } .ab-minis{ margin-top:28px; } .ab-mini{ padding:0 10px; } .am-ic{ width:52px; height:52px; font-size:19px; margin-bottom:11px; } .ab-mini h4{ font-size:12px; letter-spacing:0.3px; } .ab-mini p{ font-size:11.5px; } .ab-who-media::after{ display:none; } .ab-frame{ padding:7px; border-radius:16px; } .ab-frame img{ border-radius:11px; } .mvv-grid{ grid-template-columns:1fr; gap:20px; } .mvv-card h3{ font-size:20px; } .mvv-wm{ font-size:92px; } .ab-nums-wm{ font-size:72px; top:-12px; } /* 2 column me: pehle column wale item ki line hata do */ .stats-bar{ grid-template-columns:repeat(2,1fr); padding:20px 12px; } .stat-item:nth-child(2n){ border-left:1px solid rgba(var(--fx),0.07); } .stat-item:nth-child(2n+1){ border-left:none; } .stat-item{ gap:12px; padding:6px 8px; } .stat-item .si-ic{ width:50px; height:50px; } .stat-item .si-ic i{ font-size:20px; } .stat-item .num{ font-size:26px; } .stat-item .lbl{ font-size:10.5px; letter-spacing:1px; } .why-shell{ padding:32px 22px 36px; border-radius:16px; } .why-intro h3{ font-size:30px; } /* --- Contact page --- */ .contact-info{ padding:28px 22px 30px; } .contact-form-box{ padding:26px 20px 30px; } .ct-h, .contact-form-box h3{ font-size:28px; } .cf-head{ gap:14px; margin-bottom:22px; } .cf-badge{ width:50px; height:50px; font-size:20px; } .contact-info .ci-icon{ width:46px; height:46px; font-size:16px; } .contact-info .ci-txt{ padding-left:14px; } .contact-info .ci-social a{ width:42px; height:42px; font-size:15px; } .cf-send{ width:100%; justify-content:center; padding:16px 24px; } /* --- Home: committee + gallery --- */ .hx-eyebrow{ font-size:11.5px; letter-spacing:3.5px; gap:12px; } .hx-eyebrow::before, .hx-eyebrow::after{ width:32px; } /* Lamba heading (jaise "Our Committee Members") phone par ek line me nahi aata tha aur dabbe se bahar nikal jata tha - jisse poore page me side scroll aa jata tha. Ab shabd nayi line par chale jaate hain. */ .hx-head{ font-size:25px; gap:12px; letter-spacing:1px; flex-wrap:wrap; row-gap:2px; } .hx-head.big{ font-size:40px; } .hx-head::before, .hx-head::after{ width:46px; } .hx-head::before{ background: linear-gradient(90deg, var(--red), var(--red)) no-repeat right center / 14px 2px, linear-gradient(90deg, var(--red), var(--red)) no-repeat left center / 26px 1.5px; } .hx-head::after{ background: linear-gradient(90deg, var(--red), var(--red)) no-repeat left center / 14px 2px, linear-gradient(90deg, var(--red), var(--red)) no-repeat right center / 26px 1.5px; } .hx-orn{ gap:10px; margin-top:11px; } .hx-orn .orn-line{ width:62px; background-size:62px 1.5px; } .hx-orn .orn-line.right{ background-size:auto, 48px 1.5px; } .hx-orn .orn-badge{ width:38px; height:38px; font-size:15px; } .cm-grid{ gap:12px; } .cm-card{ flex:0 0 calc((100% - 2 * 12px) / 3); } .cm-name{ font-size:12px; } .cm-name i{ margin-right:5px; } .cm-role{ font-size:10.5px; letter-spacing:0.8px; } .hg-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } .hg-cap{ font-size:11px; padding:11px 10px 10px; gap:7px; } .hg-cap i{ font-size:13px; } .dash-btn{ gap:14px; margin-top:30px; } .dash-btn .db-lines{ width:34px; } .dash-btn .db-link{ padding:14px 20px; font-size:12.5px; letter-spacing:1.2px; gap:11px; } .back-to-top{ width:40px; height:40px; bottom:18px; right:18px; } } @media (max-width: 600px){ .grid-5, .grid-6{ grid-template-columns:repeat(2,1fr); } .cm-card{ flex:0 0 calc((100% - 12px) / 2); } /* Why MPL: sab ek ke neeche ek, saari line hata do */ .why-grid{ grid-template-columns:1fr; gap:30px 0; } .why-grid > *{ padding:0; border-left:none; } .gtabs{ gap:8px; } .gtab{ padding:10px 14px; font-size:11px; } .gtab i{ font-size:13px; } .stabs{ width:100%; } .stab{ padding:9px 14px; font-size:11.5px; letter-spacing:0.5px; } .stab.active{ padding-right:22px; clip-path:polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); } .tz-note{ padding:9px 15px; font-size:11.5px; } .mvv-card{ padding:24px 18px; } .contact-form-box{ padding:22px 18px; } /* iPhone pe input focus karte hi zoom na ho */ .cf-field input, .cf-field textarea, .newsletter input{ font-size:16px; } } @media (max-width: 420px){ .page-heading{ font-size:26px; } .home-hero-text .eyebrow{ font-size:20px; } .home-hero-text .eyebrow .accent{ font-size:23px; } /* Ek column me: line side se hatakar upar le aao */ .stats-bar{ grid-template-columns:1fr; } .stat-item:nth-child(n){ justify-content:flex-start; border-left:none; border-top:1px solid rgba(var(--fx),0.07); padding:14px 8px 8px; } .stat-item:first-child{ border-top:none; padding-top:6px; } .ab-minis{ flex-wrap:wrap; gap:20px 0; } .ab-mini{ flex:1 1 40%; } .ab-mini:nth-child(odd){ padding-left:0; border-left:none; } .ab-h2{ font-size:31px; } .ct-h, .contact-form-box h3{ font-size:24px; } .grid-4{ grid-template-columns:1fr; } .insta-strip{ grid-template-columns:1fr; } .logo img{ height:42px; max-width:150px; } .site-header .logo{ height:42px; } header.site-header.scrolled .logo img{ height:38px; } /* Admin button sirf icon reh jata hai - jagah bachane ke liye */ .btn-admin{ font-size:0; padding:10px 12px; gap:0; } .btn-admin i{ font-size:13px; } } /* ============================================================ SEASON STATS (All Players / Orange Cap / Purple Cap) ------------------------------------------------------------ Teen tab hote hain. Tab badalne pe page load nahi hota - JS sirf panel dikhata/chhupata hai. ============================================================ */ /* Tab patti + daayein taraf chhota note */ .ss-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; } .ss-tabs{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .ss-tab{ display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border-radius:11px; border:1px solid rgba(var(--fx),0.09); background:linear-gradient(180deg, rgba(24,29,41,0.95), rgba(13,17,25,0.95)); color:var(--text-muted); font-size:13px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase; cursor:pointer; box-shadow:inset 0 1px 0 rgba(var(--fx),0.06), 0 10px 22px -14px rgba(var(--shade),0.9); transition:color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .3s ease; } .ss-tab i{ font-size:15px; line-height:1; transition:color .25s ease; } .ss-tab:hover{ color:var(--text-strong); transform:translateY(-2px); border-color:rgba(var(--fx),0.18); }/* Jo tab khula hai - "All Players" laal, baaki apne apne rang me */ .ss-tab.is-on{ color:var(--on-brand); border-color:rgba(var(--fx),0.20); background:linear-gradient(135deg,#f0343c 0%, var(--red) 48%, #a5141a 100%); box-shadow:inset 0 1px 0 rgba(var(--fx),0.30), 0 10px 26px -10px rgba(227,30,38,0.85); } /* Tab par cap ki photo */ .ss-tab-cap{ width:19px; height:19px; object-fit:contain; flex:0 0 auto; filter:drop-shadow(0 2px 4px rgba(var(--shade),0.5)); transition:transform .25s ease, filter .25s ease; } .ss-tab:hover .ss-tab-cap{ transform:translateY(-1px) rotate(-7deg); } /* Khula tab usi rang ki gaddi par hota hai - cap ko ujla kinara de dete hain warna wo apne hi rang me ghul jati hai */ .ss-tab.is-on .ss-tab-cap{ filter:drop-shadow(0 0 1px rgba(255,255,255,0.95)) drop-shadow(0 0 4px rgba(255,255,255,0.75)) drop-shadow(0 2px 4px rgba(0,0,0,0.35)); } .ss-tab-orange i{ color:#f0873c; } .ss-tab-orange.is-on{ background:linear-gradient(135deg,#ffab5e 0%, #f0873c 48%, #b85c1c 100%); box-shadow:inset 0 1px 0 rgba(var(--fx),0.34), 0 10px 26px -10px rgba(240,135,60,0.85); } .ss-tab-purple i{ color:#a06ee0; } .ss-tab-purple.is-on{ background:linear-gradient(135deg,#c39bf5 0%, #a06ee0 48%, #6a3fa8 100%); box-shadow:inset 0 1px 0 rgba(var(--fx),0.34), 0 10px 26px -10px rgba(160,110,224,0.85); } /* MVP - koi cap PNG nahi, isliye green medal icon + green gaddi */ .ss-tab-mvp i{ color:var(--cap-mvp); } .ss-tab-mvp.is-on{ background:linear-gradient(135deg,#5fe39a 0%, #35b36a 48%, #1c7a45 100%); box-shadow:inset 0 1px 0 rgba(var(--fx),0.34), 0 10px 26px -10px rgba(53,179,106,0.85); } /* Khula hua tab rangeen gaddi par hai - icon bhi safed hi rahe */ .ss-tab.is-on i{ color:var(--on-brand); } .ss-note{ display:inline-flex; align-items:center; gap:9px; padding:12px 20px; border-radius:11px; border:1px solid rgba(var(--fx),0.08); background:linear-gradient(180deg, rgba(24,29,41,0.9), rgba(13,17,25,0.9)); color:var(--text-muted); font-size:12.5px; letter-spacing:0.4px; } .ss-note i{ color:var(--red); } /* Panel - band tab ka hissa DOM me rehta hai bas dikhta nahi */ .ss-panel[hidden]{ display:none; } .ss-panel.is-on{ animation:ssFade .35s ease both; } @keyframes ssFade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } } /* --- List ki row ek ek karke andar aati hain --- Tab badalte hi champion card aur phir table ki har row thodi thodi der ke antar se side se slide hoti hai. Delay JS se har row par --ss-i (row ka number) set hota hai, isliye stagger apne aap banta hai - chahe list me 5 player hon ya 50. Sirf .is-on panel ke andar chalti hai, warna chhupe hue panel bhi background me animate hote rehte. */ .ss-panel.is-on .ss-hero{ animation:ssHeroIn .5s cubic-bezier(.22,.9,.3,1) both; } @keyframes ssHeroIn{ from{ opacity:0; transform:translateY(14px) scale(.985); } to{ opacity:1; transform:none; } } .ss-panel.is-on .ss-table tbody tr{ animation:ssRowIn .42s cubic-bezier(.22,.9,.3,1) both; animation-delay:calc(var(--ss-i, 0) * 42ms + 90ms); } @keyframes ssRowIn{ from{ opacity:0; transform:translateX(-16px); } to{ opacity:1; transform:none; } } /* Table ka laal header bhi halka sa neeche aata hai */ .ss-panel.is-on .ss-table thead th{ animation:ssFade .3s ease both; } /* Jinhone phone/PC me animation band kar rakhi hai unke liye sab turant dikh jaye - hilna dulna bilkul nahi. */ @media (prefers-reduced-motion:reduce){ .ss-panel.is-on, .ss-panel.is-on .ss-hero, .ss-panel.is-on .ss-table thead th, .ss-panel.is-on .ss-table tbody tr{ animation:none !important; } } /* ---- Champion card (tab ke theek neeche) ---- */ .ss-hero{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; padding:22px 30px; margin-bottom:20px; border-radius:14px; border:1px solid rgba(var(--fx),0.08); background:linear-gradient(120deg, rgba(30,12,14,0.95) 0%, rgba(16,20,31,0.95) 55%, rgba(10,13,20,0.95) 100%); box-shadow:inset 0 1px 0 rgba(var(--fx),0.05), 0 18px 40px -26px rgba(var(--shade),0.95); position:relative; overflow:hidden; } /* Peeche halki roshni - cap ke rang ki */ .ss-hero::before{ content:""; position:absolute; left:-10%; top:-60%; width:46%; height:220%; border-radius:50%; opacity:0.5; pointer-events:none; } .ss-hero-orange::before{ background:radial-gradient(circle, rgba(240,135,60,0.30), transparent 68%); } .ss-hero-purple::before{ background:radial-gradient(circle, rgba(160,110,224,0.30), transparent 68%); } .ss-hero-mvp::before{ background:radial-gradient(circle, rgba(53,179,106,0.30), transparent 68%); } .ss-hero-face{ position:relative; flex:0 0 auto; z-index:1; } .ss-hero-face img{ width:88px; height:88px; border-radius:50%; object-fit:cover; display:block; border:3px solid rgba(var(--fx),0.16); } /* Photo ke chaaron taraf chamakta halka gol */ .ss-hero-orange .ss-hero-face img{ box-shadow:0 0 0 3px rgba(240,135,60,0.55), 0 0 30px rgba(240,135,60,0.45); } .ss-hero-purple .ss-hero-face img{ box-shadow:0 0 0 3px rgba(160,110,224,0.55), 0 0 30px rgba(160,110,224,0.45); } .ss-hero-mvp .ss-hero-face img{ box-shadow:0 0 0 3px rgba(53,179,106,0.55), 0 0 30px rgba(53,179,106,0.45); } .ss-hero-info{ flex:1 1 200px; min-width:0; z-index:1; } .ss-hero-name{ font-family:'Anton',Impact,'Arial Black',sans-serif; font-size:34px; line-height:1.1; letter-spacing:0.5px; color:var(--text-strong); } .ss-hero-team{ margin-top:4px; font-size:13.5px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; } .ss-hero-orange .ss-hero-team{ color:var(--cap-orange); } .ss-hero-purple .ss-hero-team{ color:var(--cap-purple); } .ss-hero-mvp .ss-hero-team{ color:var(--cap-mvp); } /* Bada number - daayein kinare, beech me halki lakeer se alag */ .ss-hero-num{ margin-left:auto; text-align:center; z-index:1; padding-left:34px; border-left:1px solid rgba(var(--fx),0.10); } .ss-hero-num .n{ display:block; font-family:'Anton',Impact,'Arial Black',sans-serif; font-size:62px; line-height:1; font-style:italic; color:var(--red); text-shadow:0 0 30px rgba(227,30,38,0.55); } .ss-hero-num .l{ display:block; margin-top:6px; font-size:12px; font-weight:700; letter-spacing:2.4px; color:var(--text-muted); } /* ---- Leaderboard table ---- */ .ss-table-wrap{ border-radius:14px; border:1px solid rgba(var(--fx),0.07); background:linear-gradient(180deg, rgba(18,22,33,0.96), rgba(10,13,20,0.96)); box-shadow:0 18px 40px -28px rgba(var(--shade),0.95); overflow-x:auto; } .ss-table{ width:100%; border-collapse:collapse; min-width:640px; }.ss-table thead th{ padding:15px 18px; background:linear-gradient(135deg,#f0343c 0%, var(--red) 50%, #a5141a 100%); color:var(--on-brand); font-size:11.5px; font-weight:800; letter-spacing:1.6px; text-align:left; white-space:nowrap; } .ss-table thead th:first-child{ border-top-left-radius:13px; } .ss-table thead th:last-child{ border-top-right-radius:13px; } .ss-table tbody td{ padding:11px 18px; border-bottom:1px solid rgba(var(--fx),0.05); font-size:14px; color:var(--text-light); vertical-align:middle; } .ss-table tbody tr:last-child td{ border-bottom:0; } .ss-table tbody tr{ transition:background .22s ease; } .ss-table tbody tr:hover{ background:rgba(var(--fx),0.035); } /* Cap holder ki line halki laal */ .ss-table tbody tr.is-champ{ background:rgba(227,30,38,0.07); } .ss-table tbody tr.is-champ:hover{ background:rgba(227,30,38,0.11); } /* Position ka dabba */ .c-pos{ width:74px; } .ss-pos{ display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 8px; border-radius:8px; border:1px solid rgba(var(--fx),0.10); background:rgba(var(--fx),0.04); font-family:'Anton',Impact,sans-serif; font-size:17px; color:var(--text-strong); } .is-champ .ss-pos{ border-color:rgba(227,30,38,0.55); background:rgba(227,30,38,0.16); box-shadow:0 0 16px -2px rgba(227,30,38,0.6); } /* Player ka naam + chhoti gol photo */ .ss-player{ display:flex; align-items:center; gap:12px; min-width:0; } .ss-player img{ width:38px; height:38px; border-radius:50%; object-fit:cover; flex:0 0 auto; border:2px solid rgba(var(--fx),0.14); } .is-champ .ss-player img{ border-color:rgba(227,30,38,0.6); } .ss-pname{ font-size:15.5px; font-weight:600; color:var(--text-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Sabse upar wale player ke naam ke saath asli cap ki photo. Orange/Purple - dono ki apni PNG hai, isliye rang badalne ki zaroorat nahi rahi. */ .ss-cap{ width:19px; height:19px; object-fit:contain; flex:0 0 auto; filter:drop-shadow(0 2px 4px rgba(var(--shade),0.5)); } /* MVP ka koi cap PNG nahi - green medal icon isi ss-cap slot me */ .ss-cap-mvp{ display:inline-flex; align-items:center; justify-content:center; color:var(--cap-mvp); font-size:16px; filter:drop-shadow(0 2px 4px rgba(53,179,106,0.5)); } /* Team ka logo + naam */ .ss-team{ display:flex; align-items:center; gap:11px; min-width:0; color:var(--text-muted); } .ss-team img{ width:32px; height:32px; object-fit:contain; flex:0 0 auto; } .ss-team span{ font-size:12px; font-weight:700; letter-spacing:0.8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } a.ss-team:hover span{ color:var(--text-strong); } .ss-team-none span{ opacity:0.6; } .c-mat{ width:90px; color:var(--text-muted); } /* Bada laal number - italic, image jaisa */ .c-num{ width:110px; } .ss-table tbody td.c-num{ font-family:'Anton',Impact,sans-serif; font-size:19px; font-style:italic; color:var(--red); letter-spacing:0.5px; } @media (max-width:768px){ .ss-bar{ gap:12px; } .ss-tabs{ gap:8px; width:100%; } .ss-tab{ flex:1 1 auto; justify-content:center; padding:11px 12px; font-size:11px; letter-spacing:0.6px; gap:7px; } .ss-tab i{ font-size:13px; } .ss-note{ display:none; } .ss-hero{ padding:18px 18px; gap:16px; } .ss-hero-face img{ width:64px; height:64px; } .ss-hero-name{ font-size:24px; } .ss-hero-team{ font-size:11.5px; letter-spacing:1px; } /* Number neeche apni line me - phone pe side me jagah nahi bachti */ .ss-hero-num{ margin-left:0; padding-left:0; padding-top:14px; width:100%; text-align:left; border-left:0; border-top:1px solid rgba(var(--fx),0.10); } .ss-hero-num .n{ font-size:42px; } .ss-table{ min-width:540px; } .ss-table thead th{ padding:12px 12px; font-size:10.5px; letter-spacing:1px; } .ss-table tbody td{ padding:9px 12px; font-size:13px; } .c-pos{ width:56px; } .ss-pos{ min-width:28px; height:28px; font-size:14px; } .ss-player img{ width:32px; height:32px; } .ss-pname{ font-size:13.5px; } .ss-team img{ width:26px; height:26px; } .ss-team span{ font-size:10.5px; } .c-mat{ width:60px; } .c-num{ width:76px; } .ss-table tbody td.c-num{ font-size:16px; } } @media (max-width:420px){ /* Chhoti screen pe bhi poora naam hi dikhana hai - "ORANGE CAP" / "PURPLE CAP". Sirf font aur padding kam karke jagah banayi hai, naam kaata nahi hai. */ .ss-tabs{ gap:5px; } .ss-tab{ padding:10px 5px; gap:4px; font-size:9.5px; letter-spacing:0.2px; } .ss-tab i{ font-size:12px; } .ss-tab span{ white-space:nowrap; } } @media (max-width:359px){ /* Bahut hi chhoti screen - icon hata do, naam poora hi rahega */ .ss-tab i{ display:none; } .ss-tab{ padding:10px 4px; font-size:9px; } } /* ============================================================ LIVE SCORE (auto refresh + upar chipakne wali patti) ============================================================ */ /* Score badla to number ek baar halka sa uchalta hai */ @keyframes scorePop{ 0% { transform:scale(1); color:inherit; } 40% { transform:scale(1.18); color:var(--red); } 100%{ transform:scale(1); color:inherit; } } .score-pop{ animation:scorePop .55s ease; display:inline-block; } .live-sticky{ position:fixed; left:0; right:0; top:0; z-index:90; background:rgba(11,14,23,0.96); border-bottom:1px solid rgba(227,30,38,0.5); backdrop-filter:blur(8px); transform:translateY(-130%); transition:transform .3s ease; } .live-sticky.show{ transform:translateY(0); } .ls-inner{ max-width:1200px; margin:0 auto; padding:9px 20px; display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:nowrap; } .ls-badge{ display:inline-flex; align-items:center; gap:6px; flex-shrink:0; font-size:11px; letter-spacing:1.5px; font-weight:700; color:var(--red); } .ls-side{ display:inline-flex; align-items:center; gap:8px; min-width:0; font-size:13px; white-space:nowrap; overflow:hidden; } .ls-side img{ width:24px; height:24px; object-fit:contain; flex-shrink:0; } .ls-side b{ letter-spacing:0.6px; overflow:hidden; text-overflow:ellipsis; } .ls-score{ font-family:'Anton',Impact,sans-serif; font-size:17px; letter-spacing:1px; color:var(--gold); flex-shrink:0; } .ls-vs{ font-size:11px; letter-spacing:1px; color:var(--text-muted); flex-shrink:0; } .ls-link{ font-size:11px; letter-spacing:1.5px; font-weight:700; color:var(--text-strong); text-decoration:none; border:1px solid rgba(var(--fx),0.25); padding:6px 12px; border-radius:20px; flex-shrink:0; transition:all .25s ease; } .ls-link:hover{ background:var(--red); border-color:var(--red); } @media (max-width:760px){ .ls-inner{ gap:10px; padding:8px 12px; } .ls-side b{ display:none; } /* mobile pe sirf logo + score */ .ls-link{ display:none; } .ls-score{ font-size:15px; } } /* ============================================================ NEXT MATCH COUNTDOWN (home page) ============================================================ */ .countdown-sec{ padding:46px 0; background:var(--bg-darker); } .cd-box{ position:relative; overflow:hidden; padding:30px 26px; border-radius:16px; text-align:center; border:1px solid rgba(var(--fx),0.08); background:linear-gradient(135deg,rgba(227,30,38,0.16),rgba(11,14,23,0.6) 55%); } .cd-label{ font-size:12px; letter-spacing:3px; color:var(--gold); text-transform:uppercase; margin-bottom:18px; } .cd-teams{ display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; } .cd-team{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; transition:transform .25s ease; } .cd-team:hover{ transform:translateY(-3px); } .cd-team img{ width:56px; height:56px; object-fit:contain; flex-shrink:0; border-radius:50%; background:rgba(var(--fx),0.06); padding:5px; } .cd-team span{ font-family:'Anton',Impact,sans-serif; font-size:18px; letter-spacing:1px; } .cd-vs{ font-family:'Anton',Impact,sans-serif; font-size:15px; letter-spacing:1px; color:var(--red); border:1px solid var(--red); border-radius:50%; width:38px; height:38px; line-height:36px; flex-shrink:0; } /* Ginti ke 4 dabbe */ .cd-timer{ display:flex; justify-content:center; gap:12px; margin:24px 0 20px; flex-wrap:wrap; } .cd-unit{ min-width:78px; padding:12px 8px; border-radius:12px; background:rgba(var(--fx),0.05); border:1px solid rgba(var(--fx),0.08); } .cd-unit .n{ display:block; font-family:'Anton',Impact,sans-serif; font-size:34px; line-height:1; font-variant-numeric:tabular-nums; } .cd-unit .l{ display:block; font-size:10px; letter-spacing:2px; color:var(--text-muted); margin-top:6px; } .cd-meta{ display:flex; justify-content:center; gap:20px; flex-wrap:wrap; color:var(--text-muted); font-size:13px; margin-bottom:20px; } .cd-meta i{ color:var(--gold); margin-right:5px; } .cd-btn{ display:inline-flex; align-items:center; gap:8px; } /* Match ka time aa gaya - ab ginti ki jagah ye line dikhti hai */ .cd-live-note{ font-family:'Anton',Impact,sans-serif; font-size:24px; letter-spacing:2px; color:var(--red); margin:26px 0 20px; } @media (max-width:640px){ .cd-box{ padding:24px 16px; } .cd-teams{ gap:14px; } .cd-team{ flex-direction:column; gap:6px; } .cd-team img{ width:46px; height:46px; } .cd-team span{ font-size:14px; } .cd-timer{ gap:8px; } .cd-unit{ min-width:68px; padding:10px 6px; } .cd-unit .n{ font-size:26px; } .cd-meta{ gap:10px 16px; font-size:12px; } } /* ============================================================ LIVE SCORE (home page widget - live-score-ajax.php se refresh) ------------------------------------------------------------ Numbers CricHeroes/manual se; naam-logo hamesha MPL DB se. Sab rang token se aate hain, isliye light theme apne aap chalta hai (neeche sirf do chhote light-tweaks). */ .live-sec{ padding:44px 0 6px; } .live-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; } .live-title{ display:flex; align-items:center; gap:10px; margin:0; font-family:'Anton',Impact,sans-serif; font-size:24px; letter-spacing:1px; color:var(--text-strong); text-transform:uppercase; } .live-title .live-dot{ width:11px; height:11px; background:var(--red); box-shadow:0 0 0 4px rgba(227,30,38,0.18); } .live-auto{ display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--text-muted); letter-spacing:.5px; } .live-auto i{ color:var(--gold); animation:spin-slow 3.5s linear infinite; } .live-wrap{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px; } .lv-card{ position:relative; overflow:hidden; border-radius:16px; padding:18px 18px 4px; background:linear-gradient(160deg,rgba(227,30,38,0.14),var(--bg-card) 46%); border:1px solid rgba(var(--fx),0.09); box-shadow:0 18px 40px -26px rgba(var(--shade),0.9); } .lv-card::before{ content:''; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--red),var(--gold)); } .lv-card.is-done{ background:linear-gradient(160deg,rgba(224,169,77,0.14),var(--bg-card) 46%); } .lv-card.is-done::before{ background:linear-gradient(90deg,var(--gold),var(--ok)); } /* Upar ki patti - LIVE tag + match/venue */ .lv-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; } .lv-tag{ display:inline-flex; align-items:center; gap:7px; font-family:'Anton',Impact,sans-serif; font-size:12px; letter-spacing:2px; color:#fff; background:var(--red); padding:4px 11px; border-radius:999px; } .lv-tag i{ width:7px; height:7px; border-radius:50%; background:#fff; animation:pulse 1.2s infinite; } .lv-tag.is-done{ background:var(--ok); } .lv-tag.is-done i{ animation:none; } .lv-meta{ font-size:11.5px; color:var(--text-muted); letter-spacing:.4px; text-align:right; } /* Dono team - beech me VS */ .lv-body{ display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:10px; } .lv-side{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:5px; min-width:0; } .lv-crest{ width:58px; height:58px; border-radius:50%; padding:5px; background:var(--plate); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px -8px rgba(var(--shade),0.9); } .lv-crest img{ width:100%; height:100%; object-fit:contain; } .lv-name{ font-family:'Anton',Impact,sans-serif; font-size:14.5px; letter-spacing:.6px; color:var(--text-strong); text-decoration:none; line-height:1.15; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } a.lv-name:hover{ color:var(--red); } .lv-score{ font-family:'Anton',Impact,sans-serif; font-size:26px; line-height:1; color:var(--text-strong); font-variant-numeric:tabular-nums; margin-top:2px; } .lv-score .lv-ov{ font-size:13px; color:var(--text-muted); } .lv-rr{ font-size:11px; letter-spacing:.5px; color:var(--gold); } .lv-yet{ font-size:12.5px; color:var(--text-muted); font-style:italic; margin-top:8px; } .lv-vs{ align-self:center; font-family:'Anton',Impact,sans-serif; font-size:13px; color:var(--red); border:1px solid var(--red); border-radius:50%; width:34px; height:34px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } /* Neeche ki patti - toss line, target/req-RR chips, result */ .lv-foot{ margin-top:14px; border-top:1px solid rgba(var(--fx),0.08); padding:11px 0 14px; text-align:center; } .lv-note{ font-size:12.5px; color:var(--text-soft); line-height:1.5; } .lv-chips{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:9px; } .lv-chip{ font-size:11px; letter-spacing:.5px; color:var(--text-soft); background:rgba(var(--fx),0.05); border:1px solid rgba(var(--fx),0.09); padding:4px 10px; border-radius:999px; white-space:nowrap; } .lv-result{ margin-top:9px; font-family:'Anton',Impact,sans-serif; font-size:14px; letter-spacing:.6px; color:var(--ok); line-height:1.35; } @media (max-width:640px){ .live-sec{ padding:32px 0 4px; } .live-title{ font-size:20px; } .live-wrap{ grid-template-columns:1fr; gap:14px; } .lv-card{ padding:15px 14px 2px; } .lv-body{ gap:6px; } .lv-crest{ width:48px; height:48px; } .lv-name{ font-size:12.5px; } .lv-score{ font-size:22px; } .lv-score .lv-ov{ font-size:11.5px; } .lv-vs{ width:28px; height:28px; font-size:11px; } .lv-meta{ font-size:10.5px; } } @media (prefers-reduced-motion:reduce){ .live-auto i, .live-title .live-dot, .lv-tag i{ animation:none !important; } } /* Light theme - dark me card par gehra red wash tha; safed page par wahi wash gehre text ko kha jata, isliye halka kar dete hain */ [data-theme="light"] .lv-card{ background:linear-gradient(160deg,var(--s-red) 0%,var(--bg-card) 52%); border-color:rgba(var(--fx),0.12); box-shadow:0 12px 28px -20px rgba(var(--shade),0.75); } [data-theme="light"] .lv-card.is-done{ background:linear-gradient(160deg,rgba(224,169,77,0.13) 0%,var(--bg-card) 52%); } [data-theme="light"] .lv-crest{ border:1px solid rgba(var(--fx),0.10); } /* ============================================================ SEASON LEADERS (home page widget - Orange / Purple / MVP) ------------------------------------------------------------ Teen champion card. Rang stats page ke cap token se hi aate hain (--cap-orange / --cap-purple / --cap-mvp), isliye home aur stats page ka rang kabhi alag nahi dikhta. ============================================================ */ .lead-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:18px; } .lead-card{ position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; text-align:center; padding:26px 18px 20px; border-radius:16px; border:1px solid rgba(var(--fx),0.09); background:linear-gradient(170deg, rgba(var(--lead-rgb),0.13) 0%, var(--bg-card) 46%); box-shadow:0 18px 40px -30px rgba(var(--shade),0.9); color:inherit; text-decoration:none; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } /* Sabse upar patli rangeen lakeer - card ka pehchaan chinh */ .lead-card::before{ content:""; position:absolute; left:0; top:0; width:100%; height:3px; background:linear-gradient(90deg, transparent, rgb(var(--lead-rgb)), transparent); } .lead-card:hover{ transform:translateY(-4px); border-color:rgba(var(--lead-rgb),0.45); box-shadow:0 22px 46px -26px rgba(var(--shade),1); } .lead-card:focus-visible{ outline:2px solid rgb(var(--lead-rgb)); outline-offset:3px; } .lead-badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; border:1px solid rgba(var(--lead-rgb),0.35); background:rgba(var(--lead-rgb),0.12); font-size:11px; font-weight:800; letter-spacing:1.3px; text-transform:uppercase; color:rgb(var(--lead-rgb)); } .lead-badge img{ width:17px; height:17px; object-fit:contain; } .lead-badge i{ font-size:13px; } .lead-face{ margin:16px 0 12px; } .lead-face img{ width:96px; height:96px; border-radius:50%; object-fit:cover; display:block; border:3px solid rgba(var(--fx),0.14); box-shadow:0 0 0 3px rgba(var(--lead-rgb),0.45), 0 0 28px rgba(var(--lead-rgb),0.35); } .lead-name{ font-family:'Anton',Impact,'Arial Black',sans-serif; font-size:22px; line-height:1.15; letter-spacing:0.4px; color:var(--text-strong); } .lead-team{ margin-top:5px; font-size:11.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-muted); } .lead-num{ margin-top:14px; padding-top:13px; width:100%; border-top:1px solid rgba(var(--fx),0.09); display:flex; align-items:baseline; justify-content:center; gap:8px; } .lead-num .n{ font-family:'Anton',Impact,'Arial Black',sans-serif; font-size:40px; line-height:1; font-style:italic; color:rgb(var(--lead-rgb)); text-shadow:0 0 26px rgba(var(--lead-rgb),0.45); } .lead-num .u{ font-size:11px; font-weight:800; letter-spacing:1.4px; color:var(--text-muted); } .lead-sub{ margin-top:6px; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--text-soft); } .lead-cta{ margin-top:26px; text-align:center; } /* Har card ka apna rang - ek hi jagah se, baaki CSS badalti nahi */ .lead-orange{ --lead-rgb:240,135,60; } .lead-purple{ --lead-rgb:160,110,224; } .lead-mvp{ --lead-rgb:53,179,106; } @media (max-width:640px){ .lead-grid{ grid-template-columns:1fr; gap:14px; } .lead-card{ padding:22px 16px 18px; } .lead-face img{ width:84px; height:84px; } .lead-name{ font-size:20px; } .lead-num .n{ font-size:34px; } } /* Light theme - safed gaddi par wash halka, rang gehra (cap token already gehra ho jata hai, yahan card ka background theek karte hain) */ [data-theme="light"] .lead-card{ background:linear-gradient(170deg, rgba(var(--lead-rgb),0.10) 0%, #ffffff 52%); border-color:rgba(var(--fx),0.12); box-shadow:inset 0 1px 0 #ffffff, 0 16px 34px -26px rgba(var(--shade),0.8); } [data-theme="light"] .lead-orange{ --lead-rgb:184,86,15; } [data-theme="light"] .lead-purple{ --lead-rgb:107,58,168; } [data-theme="light"] .lead-mvp{ --lead-rgb:22,131,63; } @media (prefers-reduced-motion:reduce){ .lead-card{ transition:none; } .lead-card:hover{ transform:none; } } /* ============================================================ ANIMATIONS ------------------------------------------------------------ Sab kuch `html.anim` ke andar hai. Ye class ki chhoti si script lagati hai - aur sirf tab lagati hai jab user ne apne system me "reduce motion" on na kiya ho. Agar animation wali script kisi wajah se na chale to wahi script 3 second baad class hata deti hai, taki content kabhi chhupa na rahe. Reveal ke liye `transform` ki jagah alag `translate` property use ki hai - isse hover wale transform se koi takraav nahi hota. ============================================================ */ /* ---------- Scroll reveal: neeche se halka sa upar aana ---------- */ html.anim .section-heading, html.anim .sec-title, html.anim .team-badge-card, html.anim .g-item, html.anim .gcard, html.anim .insta-embed, html.anim .insta-card, html.anim .mrow, html.anim .match-info-box, html.anim .stat-item, html.anim .ab-mini, html.anim .ab-frame, html.anim .mvv-card, html.anim .why-card, html.anim .hx-title, html.anim .cm-card, html.anim .hg-card, html.anim .contact-info, html.anim .contact-form-box, html.anim .pt-table-wrap, html.anim .pt-shell, html.anim .tcard, html.anim .champion-banner, html.anim .player-card, html.anim .sponsor-card, html.anim .captain-box, html.anim .rule-card, html.anim .td-sponsor, html.anim .td-captain, html.anim .sp-card, html.anim .footer-col, html.anim .footer-about{ opacity:0; translate:0 26px; transition:opacity .65s cubic-bezier(.22,.61,.36,1), translate .65s cubic-bezier(.22,.61,.36,1); } html.anim .rv-in{ opacity:1; translate:0 0; } /* Committee / sponsor card ka apna reveal - neeche se aate hue thoda bada hota hai aur halka sa seedha khada ho jata hai (3D jhukav). JS har card ko thoda thoda delay deta hai, isliye ek ke baad ek aate hain. */ /* transform yahan use nahi kiya - wo hover ke lift ke liye khali chahiye */ html.anim .cm-card{ opacity:0; translate:0 40px; scale:0.9; rotate:x 12deg; transform-origin:50% 100%; transition:opacity .7s cubic-bezier(.22,.61,.36,1), translate .7s cubic-bezier(.22,.61,.36,1), scale .7s cubic-bezier(.34,1.42,.64,1), rotate .7s cubic-bezier(.22,.61,.36,1); } html.anim .cm-card.rv-in{ opacity:1; translate:0 0; scale:1; rotate:x 0deg; } /* Table ki rows pe sirf fade - transform table layout bigaad sakta hai */ html.anim .pt-table tbody tr, html.anim .pt-grid tbody tr{ opacity:0; transition:opacity .5s ease; } html.anim .pt-table tbody tr.rv-in, html.anim .pt-grid tbody tr.rv-in{ opacity:1; } /* ---------- Card hover: halka sa upar uthna ---------- */ .team-badge-card, .g-item, .insta-embed, .match-info-box, .mrow, .gcard, .sponsor-card{ transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease; } /* Committee / sponsor card - hover pe halka sa upar uthta hai aur uski laal chamak tez ho jaati hai */ .cm-card{ transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease; } .cm-card:hover{ transform:translateY(-7px); border-color:rgba(227,30,38,0.95); box-shadow:0 26px 34px -18px rgba(227,30,38,0.85); } .cm-card img{ transition:transform .5s cubic-bezier(.22,.61,.36,1); } .cm-card:hover img{ transform:scale(1.07); } .team-badge-card:hover{ transform:translateY(-7px); box-shadow:0 30px 36px -16px rgba(227,30,38,0.75); } .g-item:hover, .insta-embed:hover{ transform:translateY(-6px); } .match-info-box:hover{ transform:translateY(-4px); box-shadow:0 22px 34px -22px rgba(var(--shade),0.95); } .mrow:hover{ transform:translateY(-4px); box-shadow:0 26px 40px -26px rgba(var(--shade),0.95), 0 0 26px -12px rgba(var(--c),0.6); } .gcard:hover{ transform:translateY(-6px); border-color:rgb(var(--c)); box-shadow:0 0 34px -6px rgba(var(--c),0.75), 0 26px 40px -26px rgba(var(--shade),0.95); } .sponsor-card:hover{ transform:translateY(-4px); border-color:rgba(224,169,77,0.7); } /* Player ki photo pe halka zoom */ .player-card img{ transition:transform .4s cubic-bezier(.22,.61,.36,1); } .player-card:hover img{ transform:scale(1.05); } /* Team logo pe halka sa zoom */ .team-badge-card img{ transition:transform .4s cubic-bezier(.22,.61,.36,1); } .team-badge-card:hover img{ transform:scale(1.08); } /* ---------- Buttons ---------- */ .btn-primary, .btn-view, .btn-insta, .btn-admin{ transition:background .25s ease, transform .25s ease, box-shadow .25s ease; } .btn-primary:hover, .btn-view:hover, .btn-insta:hover, .btn-admin:hover{ transform:translateY(-2px); box-shadow:0 12px 22px -12px rgba(227,30,38,0.85); } /* ---------- Nav link ka hover pill soft fade ho ---------- (Pehle poori chaudai ka underline slide hota tha - ab link khud ek rounded pill hai, isliye underline ki jagah background fade karte hain) */ nav.main-nav a{ transition:color .25s ease, background .25s ease, box-shadow .3s ease; } /* ---------- Header scroll karne pe chhota ho jata hai ---------- ZAROORI: sticky header ki BAAHRI height kabhi nahi badalni chahiye. Pehle scroll par header aur pill ki padding kam ho jaati thi, jisse poora page 12px upar khisak jata tha - browser scroll bhi utna hi adjust karta tha, aur threshold ke aas-paas header "friz hoke shrink" hone jaisa lagta tha. Ab sirf DIKHNE wali cheezein badalti hain (background, blur, radius, logo ka size). Logo ka dabba fix height ka hai, isliye andar ki image chhoti hone par bhi header ki height wahi rehti hai. */ header.site-header{ transition:background .3s ease; } .nav-wrap{ transition:border-radius .3s ease, box-shadow .3s ease, background .3s ease; } .logo img{ transition:height .3s ease; } header.site-header.scrolled .nav-wrap{ border-radius:26px; background:linear-gradient(180deg, rgba(27,32,44,0.93) 0%, rgba(12,15,22,0.95) 100%); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow: inset 0 1px 0 rgba(var(--fx),0.07), 0 14px 34px rgba(var(--shade),0.6); } header.site-header.scrolled .logo img{ height:58px; } /* ---------- Back to top: scroll karne pe hi dikhe ---------- */ html.anim .back-to-top{ opacity:0; visibility:hidden; translate:0 14px; transition:opacity .3s ease, translate .3s ease, visibility .3s; } html.anim .back-to-top.show{ opacity:1; visibility:visible; translate:0 0; } .back-to-top:hover{ background:var(--red-dark); } /* ---------- Hero ka text ek ke baad ek aata hai ---------- */ html.anim .hero-slide.active .home-hero-text > *{ animation:heroUp .6s cubic-bezier(.22,.61,.36,1) both; } html.anim .hero-slide.active .home-hero-text > *:nth-child(1){ animation-delay:.05s; } html.anim .hero-slide.active .home-hero-text > *:nth-child(2){ animation-delay:.15s; } html.anim .hero-slide.active .home-hero-text > *:nth-child(3){ animation-delay:.25s; } html.anim .hero-slide.active .home-hero-text > *:nth-child(4){ animation-delay:.35s; } @keyframes heroUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } } /* ---------- Live match ka dot dhadakta hai ---------- */ html.anim .live-dot, html.anim .mrow.live .tag i{ animation:pulse 1.4s ease-in-out infinite; } /* ---------- Slider ki image dheere dheere zoom hoti hai (Ken Burns) ---------- */ html.anim .hero-slide.active .hero-bg img{ animation:kenBurns 14s ease-out both; } @keyframes kenBurns{ from{ transform:scale(1) translate3d(0,0,0); } to { transform:scale(1.09) translate3d(-1.2%,-1.2%,0); } } /* ---------- Section heading ki line beech se khulti hai ---------- */ html.anim .section-heading::before, html.anim .section-heading::after{ transform:scaleX(0); transition:transform .7s cubic-bezier(.22,.61,.36,1) .1s; } html.anim .section-heading::before{ transform-origin:right; } html.anim .section-heading::after { transform-origin:left; } html.anim .section-heading.rv-in::before, html.anim .section-heading.rv-in::after{ transform:scaleX(1); } /* ---------- Upar chalne wali page loading patti ---------- */ .page-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:9999; pointer-events:none; opacity:0; transition:opacity .25s ease; } .page-progress.on{ opacity:1; } .page-progress span{ display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--red),var(--gold)); transform:scaleX(0); transform-origin:left; transition:transform .35s ease; box-shadow:0 0 10px rgba(227,30,38,0.8); } /* ---------- Sponsor logo ki chalti patti ---------- */ .logo-marquee{ overflow:hidden; /* dono kinaron pe halka fade, taki card kate hue na lagein */ -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); } .lm-track{ display:flex; width:max-content; } /* Gap set ke andar hi rakha hai (right padding se) taki dono set ki width bilkul barabar rahe - warna -50% khiskane pe patti me halka jhatka aata hai */ .lm-set{ display:flex; gap:20px; padding:6px 20px 6px 0; } /* Patti wala card committee card jaisa hi hai, bas uski chaudai fix rehti hai (committee grid ka % wala flex-basis yahan kaam nahi karega) */ .lm-card{ flex:0 0 auto; width:200px; } /* Marquee ke card scroll-reveal se bahar - patti side me chalti hai, is liye duplicate copy screen pe kabhi nahi aati aur chhupi hi reh jaati */ html.anim .lm-card{ opacity:1; translate:0 0; scale:1; rotate:none; transition-delay:0s !important; } html.anim .lm-track{ animation:lmScroll 45s linear infinite; } html.anim .logo-marquee:hover .lm-track{ animation-play-state:paused; } @keyframes lmScroll{ from{ transform:translate3d(0,0,0); } to { transform:translate3d(-50%,0,0); } } /* ---------- Point table: top 3 ka badge halka sa chamakta hai ---------- */ html.anim .pt-grid tr.rank-1 .pos-hex, html.anim .pt-grid tr.rank-2 .pos-hex, html.anim .pt-grid tr.rank-3 .pos-hex{ animation:rankGlow 2.8s ease-in-out infinite; } @keyframes rankGlow{ 0%,100%{ filter:drop-shadow(0 0 6px rgba(var(--pc),0.35)); } 50% { filter:drop-shadow(0 0 16px rgba(var(--pc),0.9)); } } /* ---------- Mobile menu ke link ek ke baad ek aate hain ---------- */ html.anim nav.main-nav.open li{ animation:menuIn .32s cubic-bezier(.22,.61,.36,1) both; } html.anim nav.main-nav.open li:nth-child(1){ animation-delay:.02s; } html.anim nav.main-nav.open li:nth-child(2){ animation-delay:.06s; } html.anim nav.main-nav.open li:nth-child(3){ animation-delay:.10s; } html.anim nav.main-nav.open li:nth-child(4){ animation-delay:.14s; } html.anim nav.main-nav.open li:nth-child(5){ animation-delay:.18s; } html.anim nav.main-nav.open li:nth-child(6){ animation-delay:.22s; } html.anim nav.main-nav.open li:nth-child(7){ animation-delay:.26s; } html.anim nav.main-nav.open li:nth-child(8){ animation-delay:.30s; } @keyframes menuIn{ from{ opacity:0; transform:translateX(-14px); } to { opacity:1; transform:none; } } /* ---------- Photo load hone tak chamakta hua khaali dabba ---------- */ html.anim .g-item img, html.anim .hg-card img, html.anim .cm-media img, html.anim .lm-card img{ background-image:linear-gradient(100deg, rgba(var(--fx),0.04) 30%, rgba(var(--fx),0.11) 50%, rgba(var(--fx),0.04) 70%); background-size:220% 100%; animation:shimmer 1.3s linear infinite; } html.anim .g-item img.img-done, html.anim .hg-card img.img-done, html.anim .cm-media img.img-done, html.anim .lm-card img.img-done{ background-image:none; animation:none; } @keyframes shimmer{ from{ background-position:120% 0; } to { background-position:-120% 0; } } /* Motion band ho to kuch bhi na hile */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } } /* ============================================================ PLAYERS PAGE (players.php) Auction se pehle jitne bhi players ne registration karaya hai, sab yahan card ke roop me dikhte hain. Card ke 3 hisse hain: peeche bada halka number, beech me photo, aur neeche patti - jisme ya to team ka logo hai ya "AUCTION BAAKI HAI". ============================================================ */ /* ---------- Upar ki ginti wali patti ---------- */ .plr-count-band{ position:relative; overflow:hidden; background:linear-gradient(120deg,var(--s1) 0%,var(--s3) 55%,var(--s1) 100%); border-bottom:1px solid rgba(var(--fx),0.06); padding:34px 0; } .plr-count-band::before{ content:''; position:absolute; inset:0 auto 0 0; width:46%; background:linear-gradient(90deg,rgba(227,30,38,0.16),transparent); transform:skewX(-16deg); transform-origin:top left; pointer-events:none; } .plr-count-inner{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; } .plr-big-count{ display:flex; align-items:center; gap:14px; } .plr-big-count .n{ font-family:'Anton',Impact,'Arial Black',sans-serif; font-size:64px; line-height:.85; font-weight:900; color:var(--gold); text-shadow:0 0 26px rgba(224,169,77,0.28); font-variant-numeric:tabular-nums; } .plr-big-count .l{ font-size:13px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--text-light); border-left:2px solid var(--red); padding-left:14px; line-height:1.45; } .plr-chips{ display:flex; gap:12px; flex-wrap:wrap; } .plr-chip{ display:flex; align-items:center; gap:9px; background:rgba(var(--fx),0.035); border:1px solid rgba(var(--fx),0.08); border-radius:var(--radius); padding:10px 16px; } .plr-chip i{ color:var(--red); font-size:15px; } .plr-chip.pending i{ color:var(--gold); } .plr-chip b{ font-size:19px; color:var(--text-light); font-variant-numeric:tabular-nums; } .plr-chip span{ font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--text-muted); } /* ---------- Search + filter ---------- */ .plr-tools{ padding:26px 0 0; } .plr-search-row{ position:relative; margin-bottom:18px; } .plr-search-row .plr-search{ max-width:440px; margin:0 auto; } .plr-search-row .season-sw{ position:absolute; right:0; top:50%; transform:translateY(-50%); } .plr-search{ position:relative; max-width:440px; margin:0 auto 18px; } .plr-search i{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:14px; pointer-events:none; } .plr-search input{ width:100%; background:var(--bg-card); border:1px solid rgba(var(--fx),0.09); border-radius:var(--radius); color:var(--text-light); font-size:14px; padding:13px 40px 13px 42px; outline:none; transition:border-color .2s, box-shadow .2s; } .plr-search input::placeholder{ color:var(--text-muted); } .plr-search input:focus{ border-color:var(--border-gold); box-shadow:0 0 0 3px rgba(224,169,77,0.10); } .plr-search input::-webkit-search-cancel-button{ display:none; } .plr-clear{ position:absolute; right:8px; top:50%; transform:translateY(-50%); width:28px; height:28px; background:none; border:0; color:var(--text-muted); font-size:22px; line-height:1; cursor:pointer; } .plr-clear:hover{ color:var(--red); } .plr-filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; } .plr-fbtn{ display:inline-flex; align-items:center; gap:7px; background:var(--bg-card); border:1px solid rgba(var(--fx),0.09); border-radius:var(--radius); color:var(--text-muted); font-size:11px; font-weight:700; letter-spacing:1px; padding:9px 14px; cursor:pointer; transition:color .2s, border-color .2s, background .2s; } .plr-fbtn i{ font-size:12px; } .plr-fbtn span{ background:rgba(var(--fx),0.07); border-radius:20px; padding:1px 7px; font-size:10px; } .plr-fbtn:hover{ color:var(--text-light); border-color:var(--border-red); }.plr-fbtn.active{ background:var(--red); border-color:var(--red); color:var(--on-brand); } .plr-fbtn.active span{ background:rgba(var(--shade),0.22); } .plr-fbtn.gold.active{ background:var(--gold); border-color:var(--gold); color:var(--s1); } .plr-result{ text-align:center; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--gold); margin-top:16px; } /* ---------- Card grid ---------- */ .plr-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:18px; } .plr-card{ position:relative; overflow:hidden; display:flex; flex-direction:column; background:linear-gradient(165deg,var(--s4) 0%,var(--s2) 62%); border:1px solid rgba(var(--fx),0.07); border-radius:var(--radius); padding:30px 16px 0; text-align:center; transition:transform .3s cubic-bezier(.22,.61,.36,1), border-color .3s, box-shadow .3s; } /* Upar halki si roshni - is se card flat nahi lagta */ .plr-card::before{ content:''; position:absolute; left:50%; top:-90px; width:230px; height:180px; transform:translateX(-50%); background:radial-gradient(ellipse at center,rgba(227,30,38,0.22),transparent 70%); pointer-events:none; } .plr-card.is-pending::before{ background:radial-gradient(ellipse at center,rgba(224,169,77,0.20),transparent 70%); } /* Hover pe ek chamak nikalti hai */ .plr-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(115deg,transparent 40%,rgba(var(--fx),0.07) 50%,transparent 60%); background-size:260% 100%; background-position:140% 0; opacity:0; pointer-events:none; transition:background-position .8s ease, opacity .3s; } .plr-card:hover{ transform:translateY(-7px); border-color:var(--border-red); box-shadow:0 16px 34px rgba(var(--shade),0.5); } .plr-card.is-pending:hover{ border-color:var(--border-gold); } .plr-card:hover::after{ opacity:1; background-position:-60% 0; } /* Peeche ka bada number */ .plr-ghost{ position:absolute; top:4px; right:12px; font-family:'Anton',Impact,'Arial Black',sans-serif; font-size:58px; font-weight:900; line-height:1; color:rgba(var(--fx),0.05); letter-spacing:-2px; pointer-events:none; } /* Kone wali chhoti patti */ .plr-corner{ position:absolute; top:10px; left:0; font-size:9px; font-weight:800; letter-spacing:1.5px; padding:3px 9px 3px 10px; border-radius:0 var(--radius) var(--radius) 0; }.plr-card.is-sold .plr-corner{ background:var(--red); color:var(--on-brand); } .plr-card.is-pending .plr-corner{ background:var(--gold); color:var(--s1); } /* Photo */ .plr-face{ position:relative; align-self:center; margin-bottom:14px; } .plr-ring{ width:104px; height:104px; border-radius:50%; padding:3px; background:conic-gradient(from 0deg,var(--gold),rgba(224,169,77,0.15),var(--gold),rgba(224,169,77,0.15),var(--gold)); display:flex; transition:transform .5s ease; } .plr-card.is-sold .plr-ring{ background:conic-gradient(from 0deg,var(--red),rgba(227,30,38,0.15),var(--red),rgba(227,30,38,0.15),var(--red)); } .plr-card:hover .plr-ring{ transform:rotate(180deg); } .plr-ring img{ width:100%; height:100%; border-radius:50%; object-fit:cover; background:var(--bg-darker); transition:transform .5s ease; } .plr-card:hover .plr-ring img{ transform:rotate(-180deg); } .plr-initials{ width:100%; height:100%; border-radius:50%; background:linear-gradient(150deg,var(--s5),var(--s2)); display:flex; align-items:center; justify-content:center; font-family:'Anton',Impact,'Arial Black',sans-serif; font-size:34px; letter-spacing:1px; color:var(--gold); transition:transform .5s ease; } .plr-card:hover .plr-initials{ transform:rotate(-180deg); }.plr-role-dot{ position:absolute; right:-2px; bottom:2px; width:30px; height:30px; border-radius:50%; background:var(--red); border:2px solid var(--s2); color:var(--on-brand); font-size:12px; display:flex; align-items:center; justify-content:center; z-index:2; } .plr-card.is-pending .plr-role-dot{ background:var(--gold); color:var(--s1); } /* Naam + details */ .plr-name{ position:relative; font-size:15px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--text-light); margin:0 0 8px; line-height:1.3; word-break:break-word; } .plr-meta{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:14px; } .plr-role{ font-size:10px; font-weight:700; letter-spacing:1.4px; color:var(--gold); border:1px solid var(--border-gold); border-radius:20px; padding:3px 11px; } .plr-city{ font-size:12px; color:var(--text-muted); } .plr-city i{ color:var(--red); margin-right:4px; font-size:11px; } .plr-stats{ display:flex; justify-content:center; margin-bottom:14px; } .plr-stats span{ flex:1; display:flex; flex-direction:column; gap:2px; font-size:9px; letter-spacing:1px; color:var(--text-muted); border-left:1px solid rgba(var(--fx),0.07); } .plr-stats span:first-child{ border-left:0; } .plr-stats b{ font-size:15px; color:var(--text-light); font-variant-numeric:tabular-nums; } /* Neeche ki patti - team ya auction pending. `margin-top:auto` isliye taki chhote aur bade naam wale card ki patti ek hi line me rahe (card ki height barabar dikhe). */ .plr-team{ display:flex; align-items:center; justify-content:center; gap:8px; margin:auto -16px 0; min-height:46px; padding:11px 12px; background:rgba(var(--fx),0.035); border-top:1px solid rgba(var(--fx),0.07); font-size:11px; font-weight:700; letter-spacing:1px; color:var(--text-light); text-decoration:none; transition:background .25s, color .25s; } .plr-team img{ width:22px; height:22px; object-fit:contain; } .plr-team i{ font-size:10px; color:var(--text-muted); }a.plr-team:hover{ background:var(--red); color:var(--on-brand); } a.plr-team:hover i{ color:var(--text-strong); } .plr-team.pending{ background:rgba(224,169,77,0.07); border-top:1px dashed var(--border-gold); color:var(--gold); } .plr-team.pending i{ color:var(--gold); font-size:12px; } /* Search me kuch na mile to */ .plr-empty{ text-align:center; color:var(--text-muted); font-size:14px; padding:50px 0; } .plr-empty i{ display:block; font-size:34px; color:var(--red); margin-bottom:14px; opacity:.65; } .plr-note{ margin-top:30px; text-align:center; font-size:13px; line-height:1.8; color:var(--text-muted); background:rgba(224,169,77,0.06); border:1px dashed var(--border-gold); border-radius:var(--radius); padding:16px 20px; } .plr-note i{ color:var(--gold); margin-right:6px; } .plr-note b{ color:var(--text-light); } /* Card ek ke baad ek upar aate hain (sirf jab animation on ho) */ html.anim .plr-card{ animation:plrIn .55s cubic-bezier(.22,.61,.36,1) both; animation-delay:calc(var(--i,0) * 45ms); } @keyframes plrIn{ from{ opacity:0; transform:translateY(22px) scale(.97); } to { opacity:1; transform:none; } } @media (max-width:768px){ .plr-count-band{ padding:26px 0; } .plr-count-inner{ justify-content:center; text-align:center; } .plr-big-count{ width:100%; justify-content:center; } .plr-big-count .n{ font-size:52px; } .plr-chips{ width:100%; justify-content:center; } .plr-chip{ flex:1 1 30%; justify-content:center; padding:9px 8px; } .plr-chip span{ font-size:9px; letter-spacing:.5px; } .plr-grid{ grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:12px; } .plr-card{ padding:24px 10px 0; } .plr-ghost{ font-size:44px; } .plr-ring{ width:84px; height:84px; } .plr-initials{ font-size:27px; } .plr-name{ font-size:13px; } .plr-team{ margin:auto -10px 0; padding:9px 8px; font-size:10px; } .plr-fbtn{ font-size:10px; padding:8px 11px; } } /* ========================================================== MPL RULES PAGE (rules.php) Har rule ek card - number, icon, title aur explanation. ========================================================== */ .rule-band{ position:relative; overflow:hidden; background:linear-gradient(120deg,var(--s1) 0%,var(--s3) 55%,var(--s1) 100%); border-bottom:1px solid rgba(var(--fx),0.06); padding:30px 0; } .rule-band::before{ content:''; position:absolute; inset:0 auto 0 0; width:44%; background:linear-gradient(90deg,rgba(224,169,77,0.15),transparent); transform:skewX(-16deg); transform-origin:top left; pointer-events:none; } .rule-band-inner{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; } .rule-count{ display:flex; align-items:center; gap:14px; } .rule-count .n{ font-family:'Anton',Impact,'Arial Black',sans-serif; font-size:58px; line-height:.85; font-weight:900; color:var(--gold); text-shadow:0 0 26px rgba(224,169,77,0.28); font-variant-numeric:tabular-nums; } .rule-count .l{ font-size:12.5px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--text-light); border-left:2px solid var(--red); padding-left:14px; line-height:1.45; } .rule-jump{ display:flex; gap:10px; flex-wrap:wrap; } .rule-jump a{ display:inline-flex; align-items:center; gap:8px; background:rgba(var(--fx),0.035); border:1px solid rgba(var(--fx),0.09); border-radius:30px; padding:9px 16px; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--text-muted); transition:background .25s, color .25s, border-color .25s; } .rule-jump a span{ background:rgba(var(--fx),0.07); border-radius:20px; padding:1px 8px; font-size:10.5px; color:var(--text-light); }.rule-jump a:hover{ background:var(--red); border-color:var(--red); color:var(--on-brand); } .rule-jump a:hover span{ background:rgba(var(--shade),0.2); color:var(--text-strong); } .rule-sec{ margin-bottom:40px; } .rule-sec:last-of-type{ margin-bottom:10px; } .rule-sec .section-heading{ margin-bottom:22px; } .rule-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:18px; } .rule-card{ position:relative; overflow:hidden; display:flex; align-items:flex-start; gap:16px; background:linear-gradient(150deg,var(--s4) 0%,var(--s2) 65%); border:1px solid rgba(var(--fx),0.07); border-left:3px solid var(--red); border-radius:var(--radius); padding:22px 22px 22px 20px; transition:transform .3s cubic-bezier(.22,.61,.36,1), border-color .3s, box-shadow .3s; } /* Peeche ka bada number - card flat na lage */ .rule-card .rc-no{ position:absolute; right:14px; top:2px; font-family:'Anton',Impact,'Arial Black',sans-serif; font-size:52px; font-weight:900; line-height:1; color:rgba(var(--fx),0.045); letter-spacing:-2px; pointer-events:none; } /* Hover pe ek chamak nikalti hai - baki cards jaisi */ .rule-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(115deg,transparent 40%,rgba(var(--fx),0.06) 50%,transparent 60%); background-size:260% 100%; background-position:140% 0; opacity:0; pointer-events:none; transition:background-position .8s ease, opacity .3s; } .rule-card:hover{ transform:translateY(-5px); border-color:rgba(var(--fx),0.14); border-left-color:var(--gold); box-shadow:0 16px 32px rgba(var(--shade),0.45); } .rule-card:hover::after{ opacity:1; background-position:-60% 0; } .rule-card .rc-icon{ flex-shrink:0; width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(227,30,38,0.14); border:1px solid rgba(227,30,38,0.32); color:var(--red); font-size:18px; transition:background .3s, border-color .3s, color .3s, transform .3s; } .rule-card:hover .rc-icon{ background:rgba(224,169,77,0.14); border-color:var(--border-gold); color:var(--gold); transform:rotate(-8deg) scale(1.06); } .rule-card .rc-body{ position:relative; z-index:1; } .rule-card h3{ margin:2px 0 8px; font-size:15.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--text-light); line-height:1.35; } .rule-card p{ margin:0; font-size:13.5px; line-height:1.75; color:var(--text-muted); } .rule-note{ margin-top:26px; background:rgba(224,169,77,0.06); border:1px solid var(--border-gold); border-radius:var(--radius); padding:15px 20px; font-size:13.5px; color:var(--text-muted); line-height:1.7; } .rule-note i{ color:var(--gold); margin-right:6px; } .rule-note a{ color:var(--gold); text-decoration:underline; } @media (max-width:768px){ .rule-band{ padding:24px 0; } .rule-band-inner{ justify-content:center; text-align:center; } .rule-count{ width:100%; justify-content:center; } .rule-count .n{ font-size:48px; } .rule-jump{ width:100%; justify-content:center; } .rule-jump a{ font-size:10px; padding:8px 13px; } .rule-grid{ grid-template-columns:1fr; gap:14px; } .rule-card{ padding:18px 16px; gap:13px; } .rule-card .rc-icon{ width:40px; height:40px; font-size:16px; } .rule-card .rc-no{ font-size:42px; right:10px; } .rule-card h3{ font-size:14px; } .rule-card p{ font-size:13px; } } /* ---------- Team detail page - mobile ---------- */ @media (max-width:768px){ .team-banner .tb-inner{ min-height:0; padding-top:22px; padding-bottom:28px; } .team-banner .tb-bg::after{ background: linear-gradient(90deg, rgba(11,14,23,0.9) 0%, rgba(11,14,23,0.72) 100%), linear-gradient(0deg, rgba(11,14,23,0.95) 0%, transparent 70%); } .tb-back{ font-size:10.5px; padding:7px 13px; } .tb-head{ gap:16px; margin-top:22px; } .tb-logo{ width:96px; height:96px; padding:7px; } .tb-text{ width:100%; } .tb-text h1{ font-size:28px; } .tb-tag{ font-size:9px; padding:3px 11px; margin-bottom:9px; } .tb-meta{ gap:7px; margin-top:11px; } .tb-meta span{ font-size:11.5px; padding:6px 12px; } .tb-stats{ gap:8px; margin-top:20px; } .tb-stat{ flex:1; min-width:0; padding:10px 12px; text-align:center; } .tb-stat b{ font-size:22px; } .tb-stat span{ font-size:9px; letter-spacing:1px; } .td-sponsor-grid{ grid-template-columns:1fr; gap:14px; } .td-sponsor{ flex-direction:column; gap:14px; padding:22px 18px; border-radius:9px; text-align:center; justify-content:center; } .td-sponsor .ts-photo{ width:130px; height:130px; margin:0 auto; } .td-sponsor .ts-info{ min-width:0; } .td-sponsor .ts-tag{ font-size:9px; padding:3px 11px; } .td-sponsor .ts-brand{ font-size:22px; margin-top:9px; } .td-sponsor .ts-name{ font-size:12.5px; margin-top:6px; } .td-sponsor .ts-link{ font-size:10px; padding:7px 14px; margin-top:12px; } .td-captain{ gap:18px; padding:22px 18px; text-align:center; justify-content:center; } .td-captain .tc-photo{ width:118px; height:118px; margin:0 auto; } .td-captain .tc-crown{ width:36px; height:36px; font-size:13px; right:0; bottom:2px; } .td-captain .tc-info{ min-width:0; } .td-captain h3{ font-size:24px; margin:10px 0 8px; } .td-captain p{ font-size:13px; } .td-captain .tc-badges{ justify-content:center; gap:8px; } .td-captain .tc-badges span{ font-size:10.5px; padding:7px 13px; } } /* ============================================ ALL SPONSORS PAGE (sponsors.php) Category wise sponsor cards. Ginti wali patti aur category chips rules.php se hi share hoti hain (.rule-band). ============================================ */ .sp-sec{ margin-bottom:42px; } .sp-sec:last-of-type{ margin-bottom:0; } .sp-sec .section-heading{ margin-bottom:26px; } .sp-count{ display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:26px; padding:0 8px; margin-left:4px; border-radius:20px; background:rgba(224,169,77,0.14); border:1px solid var(--border-gold); color:var(--gold); font-size:12px; font-weight:700; letter-spacing:0; } .sp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:18px; } .sp-card{ position:relative; background:linear-gradient(160deg,var(--s4) 0%, var(--bg-card) 100%); border:1px solid rgba(var(--fx),0.07); border-radius:10px; padding:22px 14px 20px; text-align:center; overflow:hidden; transition:transform .35s cubic-bezier(.22,.61,.36,1), border-color .3s ease, box-shadow .35s ease; } /* Upar ek patli lal-gold line jo hover pe poori chal jaati hai */ .sp-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--red), var(--gold)); transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.22,.61,.36,1); } .sp-card:hover{ transform:translateY(-6px); border-color:var(--border-gold); box-shadow:0 14px 34px rgba(var(--shade),0.45); } .sp-card:hover::before{ transform:scaleX(1); } .sp-photo{ width:104px; height:104px; margin:0 auto 14px; border-radius:50%; padding:4px; background:linear-gradient(135deg, var(--gold), rgba(227,30,38,0.7)); transition:transform .35s ease; } .sp-photo a{ display:block; width:100%; height:100%; } .sp-photo img{ width:100%; height:100%; border-radius:50%; object-fit:cover; background:#fff; display:block; } .sp-card:hover .sp-photo{ transform:scale(1.05); } .sp-name{ margin:0; font-size:15px; font-weight:700; letter-spacing:0.3px; color:var(--gold); text-transform:uppercase; line-height:1.35; } /* Sponsor ke neeche wali chhoti line. Pehle flex thi - team ka chhota logo ek alag dabba ban jaata tha aur naam kaard ke beech se khisak jaata tha (phone par do line me toote to saaf dikhta tha). Ab seedha block hai, logo naam ke saath inline chalta hai, isliye har line theek beech me. */ .sp-sub{ margin-top:5px; font-size:12.5px; color:var(--text-muted); line-height:1.5; text-align:center; } .sp-sub .sp-team-logo{ display:inline-block; width:16px; height:16px; border-radius:50%; object-fit:cover; margin-right:5px; vertical-align:middle; } /* Home page ke sponsor section ke neeche "View All Sponsors" */ @media (max-width:768px){ .sp-sec{ margin-bottom:32px; } .sp-grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; } .sp-card{ padding:18px 10px 16px; border-radius:8px; } .sp-photo{ width:78px; height:78px; margin-bottom:11px; } .sp-name{ font-size:12.5px; } .sp-sub{ font-size:11px; } } /* ============================================================ MOBILE - SAMAJ LOGO + NEECHE WALI NAVIGATION PATTI ------------------------------------------------------------ Dono cheezein SIRF phone/tablet pe dikhti hain. Desktop pe header ka poora menu already hai, isliye wahan zarurat nahi. ============================================================ */ /* ---- Header ke theek beech me samaj ke gol logo ---- */ .samaj-row{ display:none; } /* ---- Neeche tairti hui gol patti ---- */ .mob-nav{ display:none; } @media (max-width:768px){ /* --- Samaj logo: MPL logo aur menu button ke beech me --- Pehle ye position:absolute + left:50% se pill ke exact center par lagta tha. Dikkat ye thi ki scroll karne par MPL logo chhota ho jata hai, uska right edge center ki taraf khisak aata hai - aur samaj logo waise ka waisa hi khada rehta tha, isliye dono ekdum chipke hue lagne lagte the. Ab row header ki normal flex line ka hissa hai (absolute nahi). margin:auto dono taraf barabar jagah kha jata hai, isliye row apne aap beech me rehti hai AUR logo chhota-bada ho to gap khud adjust ho jata hai. Upar se minimum gap bhi pakka kar diya hai. */ .samaj-row{ display:flex; align-items:center; justify-content:center; gap:14px; /* teeno logo ke beech khuli jagah */ margin:0 auto; /* dono taraf barabar - yahi centering hai */ padding:0 6px; min-width:0; z-index:2; /* pill ki andar wali roshni ke upar */ pointer-events:none; /* logo par click header ko na roke */ } .samaj-badge{ display:block; flex:0 0 auto; width:46px; height:46px; border-radius:50%; background:rgba(var(--fx),0.96); border:1px solid rgba(var(--fx),0.35); box-shadow:0 0 0 3px rgba(227,30,38,0.22), 0 6px 18px rgba(var(--shade),0.55); overflow:hidden; } .samaj-badge img{ width:100%; height:100%; display:block; object-fit:contain; } /* Jitne zyada logo, utne thode chhote - taki qatar chaudi na ho jaye. Gap phir bhi khula rakha hai, warna chipke hue lagte hain. */ .samaj-row.samaj-n2{ gap:13px; } .samaj-row.samaj-n2 .samaj-badge{ width:42px; height:42px; } .samaj-row.samaj-n3{ gap:11px; } .samaj-row.samaj-n3 .samaj-badge{ width:38px; height:38px; box-shadow:0 0 0 2px rgba(227,30,38,0.22), 0 5px 14px rgba(var(--shade),0.55); } header.site-header.scrolled .samaj-badge{ width:40px; height:40px; } header.site-header.scrolled .samaj-row.samaj-n2 .samaj-badge{ width:36px; height:36px; } header.site-header.scrolled .samaj-row.samaj-n3 .samaj-badge{ width:33px; height:33px; } .samaj-badge{ transition:width .3s ease, height .3s ease; } /* Menu khula ho to logo chhup jaye - list uske upar aati hai */ nav.main-nav.open ~ .header-actions .nav-toggle{ color:var(--red); } /* --- Bottom navigation --- */ .mob-nav{ display:block; position:fixed; left:10px; right:10px; bottom:10px; z-index:190; padding:6px 5px; border-radius:26px; border:1px solid rgba(var(--fx),0.10); /* Poori tarah thos - pehle 0.97 tha aur peeche ka text halka sa jhalakta tha, jisse patti gandi lagti thi */ background:linear-gradient(180deg, rgb(27,32,44) 0%, rgb(14,18,25) 58%, rgb(7,10,16) 100%); box-shadow:inset 0 1px 0 rgba(var(--fx),0.07), 0 -4px 26px rgba(var(--shade),0.6); /* Neeche scroll karte waqt patti raste se hat jaati hai, upar scroll karte hi wapas aa jaati hai - isse padhte waqt wo content ke uper nahi aati. Class JS lagata hai (main.js). */ transition:transform .32s cubic-bezier(.22,.9,.3,1), opacity .28s ease; } .mob-nav.mn-hide{ transform:translateY(calc(100% + 14px)); opacity:0; pointer-events:none; } /* Upar se halki laal chamak - header ki pill se milti hui */ .mob-nav::before{ content:""; position:absolute; left:50%; top:0; transform:translateX(-50%); width:60%; height:1px; background:linear-gradient(90deg, transparent, rgba(227,30,38,0.55), transparent); } .mob-nav ul{ display:flex; align-items:stretch; } .mob-nav li{ flex:1 1 0; min-width:0; } .mob-nav a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:8px 2px 6px; border-radius:19px; color:var(--text-muted); font-size:9.5px; font-weight:700; letter-spacing:0.7px; text-transform:uppercase; text-decoration:none; transition:color .25s ease, background .25s ease, box-shadow .25s ease; } .mob-nav a i{ font-size:16px; line-height:1; transition:transform .25s ease; } .mob-nav a span{ display:block; } .mob-nav a:active i{ transform:scale(0.88); } /* Jis page pe ho wo laal pill ban jata hai */ .mob-nav a.active{ color:var(--text-strong); background:rgba(227,30,38,0.16); box-shadow:0 0 0 1px rgba(227,30,38,0.40), inset 0 0 18px rgba(227,30,38,0.20); } .mob-nav a.active i{ color:var(--red); filter:drop-shadow(0 0 8px rgba(227,30,38,0.75)); } /* Patti footer ko dhak na le - footer neeche se itni jagah chhod deta hai. Padding footer par hai (body par nahi) taki uska gehra rang patti ke peeche tak jaye, warna neeche halki patti dikhti hai. */ footer.site-footer{ padding-bottom:74px; } .back-to-top{ bottom:88px; right:14px; } } @media (max-width:420px){ .samaj-badge{ width:40px; height:40px; } .samaj-row{ gap:12px; } .samaj-row.samaj-n2{ gap:11px; } .samaj-row.samaj-n2 .samaj-badge{ width:36px; height:36px; } .samaj-row.samaj-n3{ gap:9px; } .samaj-row.samaj-n3 .samaj-badge{ width:32px; height:32px; } header.site-header.scrolled .samaj-badge{ width:36px; height:36px; } header.site-header.scrolled .samaj-row.samaj-n2 .samaj-badge{ width:32px; height:32px; } header.site-header.scrolled .samaj-row.samaj-n3 .samaj-badge{ width:29px; height:29px; } .mob-nav{ left:8px; right:8px; bottom:8px; border-radius:23px; } .mob-nav a{ font-size:8.5px; letter-spacing:0.4px; padding:7px 1px 5px; gap:3px; } .mob-nav a i{ font-size:15px; } footer.site-footer{ padding-bottom:68px; } .back-to-top{ bottom:82px; } } /* ========================================================== * PRIZE MONEY RAIL - home page ke daayin kinare par * * Rail `right:0` par tiki hai, isliye uska daayan kinara hamesha * screen se chipka rehta hai. Jab plate khulti hai to item chaudi * hoti hai aur trophy apne aap BAAYIN taraf khisak jaati hai - * bilkul waisa hi jaisa design me hai. * ========================================================== */ .prize-rail{ position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:70; display:flex; flex-direction:column; align-items:flex-end; gap:12px; /* rail khud click nahi rokti - sirf button rokte hain */ pointer-events:none; } .prz{ /* har rang ka apna accent - neeche tone-* me set hota hai */ --prz-a:#f0c14b; --prz-a2:#a9761c; pointer-events:auto; position:relative; display:flex; align-items:center; padding:0; border:0; background:none; cursor:pointer; font-family:inherit; -webkit-tap-highlight-color:transparent; /* page khulte hi ek ek karke daayin se andar aati hain */ animation:przIn .7s cubic-bezier(.22,.9,.3,1) both; animation-delay:calc(var(--prz-i, 0) * 140ms + 500ms); } @keyframes przIn{ from{ opacity:0; transform:translateX(80px); } to{ opacity:1; transform:none; } } /* ---- Trophy (hamesha dikhti hai - yahi handle hai) ---- */ .prz-trophy{ position:relative; z-index:2; flex:0 0 auto; width:48px; height:78px; display:block; /* Band haalat me overlap 0 rakhte hain, warna item trophy se patli ho jaati hai aur trophy ka daayan hissa screen ke bahar kat jata hai. Khulne par hi trophy plate ke kinare par chadhti hai. */ margin-right:0; transition:transform .5s cubic-bezier(.34,1.56,.64,1), margin-right .55s cubic-bezier(.22,.9,.3,1); } .prz.is-open .prz-trophy{ margin-right:-12px; } .prz-trophy img{ position:relative; z-index:2; width:100%; height:100%; display:block; object-fit:contain; filter:drop-shadow(0 6px 14px rgba(var(--shade),0.75)); /* halka sa upar neeche tairna - teeno alag alag time par */ animation:przFloat 3.6s ease-in-out infinite; animation-delay:calc(var(--prz-i, 0) * .5s); } @keyframes przFloat{ 0%,100%{ transform:translateY(0); } 50% { transform:translateY(-6px); } } /* Trophy ke peeche dhadakti hui roshni */ .prz-ring{ position:absolute; z-index:1; left:50%; top:52%; width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%; background:radial-gradient(circle, rgba(var(--fx),0.22), transparent 68%); box-shadow:0 0 0 0 var(--prz-a); opacity:.9; animation:przPulse 2.8s ease-out infinite; animation-delay:calc(var(--prz-i, 0) * .5s); } @keyframes przPulse{ 0% { box-shadow:0 0 0 0 rgba(var(--fx),0.30); } 70% { box-shadow:0 0 0 16px rgba(var(--fx),0); } 100%{ box-shadow:0 0 0 0 rgba(var(--fx),0); } } .prz:hover .prz-trophy{ transform:scale(1.09) rotate(-4deg); } .prz.is-open .prz-trophy{ transform:scale(1.14); } /* Click par trophy ek halki si uchhal maarti hai */ .prz.is-pop .prz-trophy{ animation:przPop .55s cubic-bezier(.34,1.56,.64,1); } @keyframes przPop{ 0% { transform:scale(1) rotate(0); } 35% { transform:scale(1.26) rotate(-9deg); } 70% { transform:scale(1.05) rotate(5deg); } 100%{ transform:scale(1.14) rotate(0); } } /* ---- Inaam wali plate (band haalat me chaudai 0) ---- */ .prz-plate{ position:relative; display:block; max-width:0; overflow:hidden; border-radius:12px 0 0 12px; background:linear-gradient(135deg, var(--s5) 0%, var(--s1) 55%, var(--s0) 100%); box-shadow:inset 0 1px 0 rgba(var(--fx),0.09), 0 14px 34px -14px rgba(var(--shade),0.95); transition:max-width .55s cubic-bezier(.22,.9,.3,1); } .prz.is-open .prz-plate{ max-width:280px; } /* Plate ke baayin taraf accent ki patli patti */ .prz-plate::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg, var(--prz-a), var(--prz-a2)); opacity:0; transition:opacity .3s ease .2s; } .prz.is-open .prz-plate::before{ opacity:1; } .prz-in{ display:block; padding:11px 18px 11px 26px; white-space:nowrap; text-align:left; opacity:0; transform:translateX(18px); transition:opacity .35s ease .14s, transform .45s cubic-bezier(.22,.9,.3,1) .14s; } .prz.is-open .prz-in{ opacity:1; transform:none; } .prz-title{ display:block; font-size:14px; font-weight:800; letter-spacing:0.5px; line-height:1.2; color:#f5f6f8; text-transform:capitalize; } .prz-amt{ display:block; margin-top:2px; font-style:normal; font-size:19px; font-weight:900; letter-spacing:0.4px; line-height:1.15; background:linear-gradient(180deg, #fff, var(--prz-a) 55%, var(--prz-a2)); -webkit-background-clip:text; background-clip:text; color:transparent; } /* Plate khulne ke baad ek chamak upar se guzarti hai */ .prz-shine{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(105deg, transparent 30%, rgba(var(--fx),0.16) 48%, transparent 66%); transform:translateX(-110%); } .prz.is-open .prz-shine{ animation:przShine 1.5s ease .35s 1; } @keyframes przShine{ to{ transform:translateX(110%); } } /* ---- Teen rang ---- */ .prz.tone-gold { --prz-a:#f4c95d; --prz-a2:#a9761c; } .prz.tone-silver{ --prz-a:#dfe5ee; --prz-a2:#8b94a3; } .prz.tone-copper{ --prz-a:#e0906a; --prz-a2:#93502f; } /* Jinhone animation band kar rakhi hai unke liye sab sthir */ @media (prefers-reduced-motion:reduce){ .prz, .prz-trophy img, .prz-ring, .prz-shine{ animation:none !important; } .prz-trophy, .prz-in, .prz-plate{ transition:none !important; } } /* ---- Chhoti screen ---- */ @media (max-width:900px){ .prize-rail{ gap:10px; } .prz-trophy{ width:40px; height:66px; } .prz.is-open .prz-trophy{ margin-right:-10px; } .prz-ring{ width:44px; height:44px; margin:-22px 0 0 -22px; } .prz-in{ padding:9px 14px 9px 22px; } .prz-title{ font-size:12.5px; } .prz-amt{ font-size:16px; } .prz.is-open .prz-plate{ max-width:230px; } } @media (max-width:600px){ /* Neeche mobile menu chalta hai, isliye patti thodi upar utha di */ .prize-rail{ top:44%; gap:8px; } .prz-trophy{ width:34px; height:56px; } .prz.is-open .prz-trophy{ margin-right:-9px; } .prz-ring{ width:38px; height:38px; margin:-19px 0 0 -19px; } .prz-in{ padding:8px 12px 8px 19px; } .prz-title{ font-size:11px; letter-spacing:0.3px; } .prz-amt{ font-size:14.5px; } .prz.is-open .prz-plate{ max-width:200px; } } /* ================================================================== SEASON SWITCHER — custom dropdown ------------------------------------------------------------------ Native