*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body{margin:0;background:#08111f;color:#f7f7f4;font-family:'Inter','Noto Sans Kannada',Arial,sans-serif;line-height:1.6}body.kn{font-family:'Noto Sans Kannada','Inter',Arial,sans-serif}a{color:inherit;text-decoration:none}.wrap{width:min(1160px,calc(100% - 48px));margin-inline:auto}:root{--ink:#08111f;--orange:#c01823;--blue-accent:#2155a3;--muted:#aeb8c4;--line:rgba(255,255,255,.15);--display:'Barlow Condensed','Noto Sans Kannada',Impact,sans-serif}.announcement{min-height:36px;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--orange);font-size:10px;font-weight:800;letter-spacing:1.6px;padding:4px 12px}.live-dot{height:6px;width:6px;border-radius:50%;background:white}.announcement-location{opacity:.8;margin-left:15px}.lang-toggle{position:absolute;right:18px;top:4px;border:1px solid #ffffff8a;background:transparent;color:white;padding:4px 9px;font-weight:700;font-size:11px;cursor:pointer}.site-header{height:86px;padding:0 max(24px,calc((100% - 1160px)/2));display:flex;align-items:center;justify-content:space-between;background:#08111ff2;position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:12px}.club-logo{width:auto;height:48px;max-width:100%;object-fit:contain;display:block}.logo-placeholder{display:none;width:48px;height:48px;place-content:center;text-align:center;background:var(--orange);color:#fff;font:900 20px/18px var(--display);border:2px solid white}.logo-placeholder small{font:700 7px/10px 'Inter',sans-serif;letter-spacing:1px}.brand-copy{display:flex;flex-direction:column;line-height:1.05}.brand-copy strong{font:900 26px var(--display);letter-spacing:.5px}.brand-copy span{font-size:9px;letter-spacing:1.3px;font-weight:700;margin-top:5px}.nav{display:flex;align-items:center;gap:30px}.nav a{font-size:11px;font-weight:700;color:#c8d0d9}.nav a:hover{color:white}.nav .nav-cta{background:var(--orange);padding:13px 17px;color:white}.menu-toggle{display:none;background:none;border:0;color:white;font-size:25px;cursor:pointer}.hero{position:relative;min-height:660px;overflow:hidden;display:flex;align-items:center;background:#101d2d}.hero-image{position:absolute;inset:0;background:linear-gradient(90deg,#08111f 0%,rgba(8,17,31,.95) 32%,rgba(8,17,31,.62) 66%,rgba(8,17,31,.4) 100%),linear-gradient(0deg,#08111f 0%,transparent 45%),url('https://images.unsplash.com/photo-1461896836934-iffe607ba821?auto=format&fit=crop&w=2000&q=85') center 42%/cover no-repeat}.hero-content{position:relative;z-index:1;padding-top:32px}.eyebrow,.section-kicker{font-size:10px;letter-spacing:2px;font-weight:800;color:var(--orange)}.eyebrow{display:flex;align-items:center;gap:10px}.eyebrow>span:first-child{height:2px;width:28px;background:var(--orange)}h1,h2,h3{font-family:var(--display);font-weight:900;line-height:.98;letter-spacing:-.5px}h1{font-size:clamp(62px,9vw,116px);margin:27px 0 22px;max-width:780px}h1 em,h2 em{color:var(--orange);font-style:normal}h2{font-size:clamp(43px,6vw,72px);margin:20px 0 24px}p{margin-top:0}.hero-intro{max-width:440px;color:#c2cbd4;font-size:14px;line-height:1.8}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;padding:15px 18px;font-size:10px;font-weight:800;letter-spacing:1px;transition:transform .2s}.button:hover{transform:translateY(-3px)}.button span:last-child{font-size:16px}.button-primary{background:var(--orange);color:white}.button-ghost{border:1px solid #ffffff73}.hero-foot{display:flex;align-items:center;gap:14px;margin-top:64px;color:#9eabb8;font-size:9px;letter-spacing:1.5px;font-weight:700}.hero-foot-line{width:60px;height:1px;background:var(--orange)}.hero-side-label{position:absolute;right:20px;top:50%;writing-mode:vertical-rl;transform:translateY(-50%);font-size:9px;letter-spacing:3px;color:#d2d9df}.ticker{overflow:hidden;background:var(--orange);color:white;padding:13px 0;white-space:nowrap;font:800 16px var(--display);letter-spacing:2px}.ticker b{padding:0 10px;color:#111}.section{padding-top:100px;padding-bottom:95px}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin-top:20px}.lead{font-size:20px;font-weight:600;line-height:1.5;color:#fff}.about-copy p:not(.lead),.culture-copy>p{font-size:13px;color:#aeb8c4;line-height:1.9}.text-link{display:inline-flex;gap:25px;align-items:center;color:white;font-size:10px;font-weight:800;letter-spacing:1.4px;border-bottom:1px solid var(--orange);padding:12px 0;margin-top:10px}.text-link span:last-child{color:var(--orange);font-size:17px}.values-row{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:65px}.values-row>div{padding:22px 18px;border-right:1px solid var(--line);display:flex;flex-direction:column}.values-row>div:first-child{padding-left:0}.values-row>div:last-child{border:0}.value-icon{font:700 13px var(--display);color:var(--orange);margin-bottom:18px}.values-row strong{font:800 22px var(--display)}.values-row small{font-size:10px;color:#aeb8c4;margin-top:3px}.sports-section,.updates-section{padding:90px 0 95px;background:#101d2d}.section-top{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:34px}.section-top h2{margin-bottom:0}.section-top>p{max-width:300px;color:#aeb8c4;font-size:12px;line-height:1.8;margin-bottom:3px}.sport-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.sport-card{min-height:370px;position:relative;display:flex;align-items:end;overflow:hidden;background-size:cover;background-position:center}.sport-card:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,12,22,.98),rgba(5,12,22,.55) 45%,rgba(5,12,22,.08))}.kabaddi{background-image:url('https://images.unsplash.com/photo-1517466787929-bc90951d0974?auto=format&fit=crop&w=900&q=80')}.cricket{background-image:url('https://images.unsplash.com/photo-1531415074968-036ba1b575da?auto=format&fit=crop&w=900&q=80')} .football{background-image:url('/Image/football1.jpeg') !important}.sport-number{position:absolute;top:20px;left:20px;font:800 13px var(--display);border:1px solid #ffffff80;padding:7px 10px}.sport-content{position:relative;padding:28px 24px}.sport-content>span{font-size:8px;letter-spacing:1.5px;color:#ff9b7a;font-weight:800}.sport-content h3{font-size:48px;margin:9px 0}.sport-content p{font-size:11px;color:#c3ccd5;line-height:1.7;margin-bottom:0;max-width:260px}.sport-arrow{position:absolute;right:20px;bottom:28px;font-size:20px;color:var(--orange)}.section-note{font-size:10px;color:#8492a1;margin-top:18px}.service-section{display:grid;grid-template-columns:1fr 1fr;background:#f1efe8;color:var(--ink)}.service-photo{min-height:760px;background:linear-gradient(#08111f22,#08111f22),url('https://images.unsplash.com/photo-1559027615-cd4628902d4a?auto=format&fit=crop&w=1200&q=85') center/cover no-repeat}.service-content{padding:90px clamp(30px,6vw,95px)}.service-content h2{font-size:clamp(45px,5vw,70px)}.service-content h2 em{color:var(--orange)}.service-content .lead{color:var(--ink);font-size:17px}.service-content>p:not(.lead){font-size:12px;color:#566170;line-height:1.9}.service-list{margin:30px 0 28px;border-top:1px solid #d7d5cf}.service-list>div{display:flex;gap:17px;padding:14px 0;border-bottom:1px solid #d7d5cf}.service-list>div>span{font:800 13px var(--display);color:var(--orange)}.service-list strong,.service-list small{display:block}.service-list strong{font-size:12px}.service-list small{font-size:10px;color:#65707b;margin-top:4px}.culture-section{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding-top:105px;padding-bottom:105px;align-items:center}.culture-art{height:360px;position:relative;background:radial-gradient(circle at 70% 30%,#c01823 0,#8b1018 20%,#18263a 20%,#0b1524 70%);display:grid;place-items:center;overflow:hidden}.culture-art:before,.culture-art:after{content:"";position:absolute;width:250px;height:250px;border:1px solid #ffffff33;border-radius:50%}.culture-art:after{width:330px;height:330px}.culture-circle{position:relative;z-index:1;border:1px solid #ffffff99;width:180px;height:180px;border-radius:50%;display:grid;place-content:center;text-align:center;font:900 32px/.85 var(--display);letter-spacing:2px;transform:rotate(-9deg)}.culture-circle span{font-size:18px;color:var(--orange);padding:5px}.culture-caption{position:absolute;bottom:20px;left:22px;font-size:9px;letter-spacing:2px;font-weight:800;color:#bfc7d0}.updates-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px}.updates-grid h3{font-size:25px;border-bottom:1px solid var(--line);padding-bottom:12px}.dynamic-list{min-height:90px}.empty-note{color:#9eabb8;font-size:12px}.update-card{padding:13px 0;border-bottom:1px solid var(--line)}.update-card strong{display:block;font-size:13px}.update-card p{font-size:11px;color:#b3bdc7;margin:5px 0}.update-card small{font-size:9px;color:var(--orange)}.admin-hint{font-size:10px;color:#aeb8c4;margin-top:20px}.admin-hint a{color:#ff8057;text-decoration:underline}.gallery-section{background:#101d2d;padding:90px 0 100px}.gallery-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;grid-template-rows:190px 190px;gap:12px}.gallery-tile{position:relative;background-position:center;background-size:cover;display:flex;align-items:end;padding:17px;overflow:hidden}.gallery-tile:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#050c16d9,transparent 65%)}.gallery-tile span{position:relative;font:800 16px var(--display);letter-spacing:1px}.tile-one{grid-row:span 2;background-image:url('https://images.unsplash.com/photo-1461896836934-iffe607ba821?auto=format&fit=crop&w=900&q=80')}.tile-two{background-image:url('https://images.unsplash.com/photo-1521412644187-c49fa049e84d?auto=format&fit=crop&w=700&q=80')}.tile-three{background-image:url('https://images.unsplash.com/photo-1559027615-cd4628902d4a?auto=format&fit=crop&w=700&q=80')}.tile-four{background-image:url('https://images.unsplash.com/photo-1511632765486-a01980e01a18?auto=format&fit=crop&w=700&q=80');grid-column:2/4}.join-section{padding-top:90px;padding-bottom:90px}.join-panel{background:var(--orange);padding:55px;display:grid;grid-template-columns:1fr .75fr;gap:70px;align-items:center}.join-panel .section-kicker{color:#ffe1d7}.join-panel h2{font-size:clamp(43px,5.5vw,68px);margin-bottom:0}.join-panel h2 em{color:var(--ink)}.join-right .lead{font-size:18px}.join-right p:not(.lead){font-size:12px;color:#fff0eb;line-height:1.8}.button-light{background:white;color:var(--ink);margin-top:12px}.setup-note{display:block;margin-top:13px;font-size:9px;color:#ffe1d7}.footer{background:#050b13;border-top:1px solid var(--line);padding:35px 0 20px}.footer-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:30px}.footer-top>p{font:800 21px/.95 var(--display);margin:0;color:#d5dbe1}.back-top{font-size:9px;font-weight:800;letter-spacing:1px}.footer-bottom{border-top:1px solid var(--line);padding-top:18px;display:flex;justify-content:space-between;gap:15px;color:#8793a1;font-size:8px;letter-spacing:1px}
@media(max-width:800px){.site-header{height:74px}.lang-toggle{right:8px}.nav{display:none;position:absolute;left:0;right:0;top:74px;background:#08111f;padding:18px 24px 24px;flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid var(--line);z-index:999}.nav.open,.nav.nav-open{display:flex!important}.nav a{padding:13px 0}.nav .nav-cta{padding:13px 15px;margin-top:7px;text-align:center}.menu-toggle{display:block}.hero{min-height:620px}.hero-side-label{display:none}.about-grid,.culture-section{grid-template-columns:1fr;gap:24px}.values-row{grid-template-columns:repeat(2,1fr)}.values-row>div:nth-child(2){border-right:0}.values-row>div:nth-child(3),.values-row>div:nth-child(4){border-top:1px solid var(--line)}.section-top{align-items:start;flex-direction:column;gap:14px}.sport-grid{grid-template-columns:1fr}.sport-card{min-height:340px}.service-section{grid-template-columns:1fr}.service-photo{min-height:350px}.service-content{padding:60px 24px}.gallery-grid{grid-template-columns:1fr 1fr;grid-template-rows:220px 170px 170px}.tile-one{grid-row:span 2}.tile-four{grid-column:1/3}.join-panel{grid-template-columns:1fr;gap:30px;padding:35px 25px}.footer-bottom{flex-direction:column;gap:8px}.footer-top>p{display:none}.updates-grid{grid-template-columns:1fr;gap:22px}}
@media(max-width:480px){.wrap{width:calc(100% - 36px)}.announcement{font-size:8px;letter-spacing:.8px;justify-content:flex-start;padding-left:12px;padding-right:60px}.announcement-location{display:none}.lang-toggle{top:5px}.brand-copy strong{font-size:23px}.brand-copy span{font-size:8px}.club-logo{width:auto;height:42px}.hero{min-height:610px}.hero-image{background-position:58% center}h1{font-size:65px}.hero-intro{font-size:12px}.hero-actions{flex-direction:column;align-items:flex-start}.hero-foot{margin-top:44px;font-size:7px;gap:8px}.hero-foot-line{width:25px}.section{padding-top:75px;padding-bottom:70px}.values-row{margin-top:38px}.sports-section,.gallery-section,.updates-section{padding:70px 0}.sport-card{min-height:320px}.culture-section{padding-top:75px;padding-bottom:75px}.culture-art{height:300px}.gallery-grid{grid-template-rows:170px 140px 140px;gap:8px}.gallery-tile{padding:10px}.gallery-tile span{font-size:13px}.join-section{padding-top:65px;padding-bottom:65px}.footer-top{gap:15px}.footer-brand .brand-copy strong{font-size:21px}}
.menu-toggle {
cursor: pointer;
z-index: 1000;
padding: 8px 12px;
touch-action: manipulation;
}
/* Contact & Social Section */
.contact-section {
background: #0d1726;
border-top: 1px solid var(--line);
}
.contact-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 36px;
}
.contact-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--line);
padding: 24px 20px;
display: flex;
flex-direction: column;
transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
color: inherit;
border-radius: 4px;
}
.contact-card:hover {
transform: translateY(-4px);
background: rgba(255, 255, 255, 0.06);
}
.contact-badge {
font-family: var(--display);
font-size: 11px;
letter-spacing: 1.5px;
font-weight: 800;
color: var(--muted);
margin-bottom: 12px;
}
.contact-card strong {
font-family: var(--display);
font-size: 22px;
letter-spacing: 0.5px;
margin-bottom: 6px;
color: #fff;
}
.contact-card span {
font-size: 13px;
color: #d2d9df;
word-break: break-all;
}
.contact-card small {
font-size: 11px;
color: var(--muted);
margin-top: 8px;
}
/* Hover Accent Colors */
.contact-card.whatsapp:hover {
border-color: #25d366;
}
.contact-card.whatsapp:hover .contact-badge {
color: #25d366;
}
.contact-card.instagram:hover {
border-color: #e1306c;
}
.contact-card.instagram:hover .contact-badge {
color: #e1306c;
}
.contact-card.email:hover {
border-color: var(--orange);
}
.contact-card.email:hover .contact-badge {
color: var(--orange);
}
@media (max-width: 800px) {
.contact-grid {
grid-template-columns: 1fr;
}
}
/* ===================================================
ALBUM GALLERY & WALL OF FRAME STYLES
=================================================== */
.album-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin-top: 24px;
}
@media (min-width: 768px) {
.album-grid {
grid-template-columns: 1.25fr 1fr;
grid-template-rows: 240px 240px auto;
}
.card-match {
grid-column: 1;
grid-row: 1 / span 2; /* Large portrait height */
}
.card-community {
grid-column: 2;
grid-row: 1;
}
.card-brotherhood {
grid-column: 2;
grid-row: 2;
}
.card-trophies {
grid-column: 1 / span 2; /* Full width 16:9 banner */
min-height: 360px;
aspect-ratio: 16 / 9;
}
}
/* Base Album Card Style (Frame Look) */
.album-card {
position: relative;
border-radius: 14px;
overflow: hidden;
cursor: pointer;
background-size: cover;
background-position: center;
min-height: 240px;
background-color: #0d1527;
border: 1px solid rgba(255, 255, 255, 0.12);
outline: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
transition: transform 0.25s ease, box-shadow 0.25s ease, outline-color 0.25s ease;
}
.album-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7);
outline-color: rgba(239, 68, 68, 0.6);
}
.album-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
z-index: 2;
}
.album-badge {
display: inline-block;
background: rgba(239, 68, 68, 0.2);
color: #ef4444;
border: 1px solid rgba(239, 68, 68, 0.4);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 4px;
margin-bottom: 8px;
letter-spacing: 0.5px;
}
.album-overlay h3,
.album-overlay p,
.album-badge {
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95), 0 1px 3px rgba(0, 0, 0, 0.9);
}
.album-overlay h3 {
font-size: 1.4rem;
color: #ffffff;
margin: 0 0 4px;
font-weight: 700;
}
.album-overlay p {
display: none !important;
}
/* ===================================================
FULLSCREEN ALBUM MODAL POPUP
=================================================== */
.album-modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.88);
backdrop-filter: blur(8px);
z-index: 9999;
overflow-y: auto;
padding: 20px 16px;
}
.album-modal-content {
background: #0d1527;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 14px;
max-width: 960px;
margin: 30px auto;
padding: 20px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
}
.album-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 14px;
margin-bottom: 20px;
}
.album-modal-header h3 {
color: #ffffff;
margin: 0;
font-size: 1.3rem;
}
.album-modal-header .close-btn {
background: none;
border: none;
color: #94a3b8;
font-size: 2rem;
line-height: 1;
cursor: pointer;
padding: 0 6px;
}
.album-modal-header .close-btn:hover {
color: #ffffff;
}
/* Photos inside the opened album */
.modal-photo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 14px;
}
.modal-photo-item {
display: flex;
flex-direction: column;
}
.modal-photo-grid img {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.12);
cursor: pointer;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.modal-photo-grid img:hover {
transform: scale(1.02);
border-color: #ef4444;
}
.modal-photo-item small {
color: #94a3b8;
font-size: 0.8rem;
margin-top: 6px;
line-height: 1.3;
}
/* ===================================================
MOBILE PHOTO WALL / BENTO MOSAIC LAYOUT
=================================================== */
@media (max-width: 768px) {
.album-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 160px 160px 170px;
gap: 10px;
margin-top: 18px;
}
/* Reset min-height and contain overflow to stop cards from overlapping */
.album-card {
min-height: 0 !important;
height: 100% !important;
position: relative;
overflow: hidden;
}
/* Match Day: Tall card on left */
.album-card:nth-child(1) {
grid-column: 1 / 2;
grid-row: 1 / 3;
}
/* Hands That Serve: Top right */
.album-card:nth-child(2) {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
/* Brotherhood & Vibes: Bottom right */
.album-card:nth-child(3) {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
/* Hall of Champions: Wide banner */
.album-card:nth-child(4) {
grid-column: 1 / 3;
grid-row: 3 / 4;
}
.album-overlay {
padding: 10px;
}
.album-badge {
font-size: 0.62rem;
padding: 2px 6px;
margin-bottom: 4px;
letter-spacing: 0.5px;
}
.album-overlay h3 {
font-size: 0.9rem;
margin: 0 0 2px;
line-height: 1.2;
}
.album-overlay p {
font-size: 0.7rem;
margin: 0;
line-height: 1.1;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
.kabaddi {
background-image: url('kabaddi.png') !important;
}
.service-photo {
background: url('volunteer.png') center/cover no-repeat !important;
}
.football {
background-image: url('/Image/football1.jpeg') !important;
}