/* =========================================================== Gurudwara Gobind Dham — shared design system White / Gold / Royal-Blue. Day / Evening / Aarti theme states driven by assets/js/theme-time.js via [data-theme] on . =========================================================== */ :root{ --gold-1:#F0D77B; --gold-2:#C9A227; --gold-3:#8C6E15; --blue-1:#0B2F6B; --blue-2:#123A82; --blue-deep:#061A3E; --paper:#FDFBF6; --paper-2:#F6F1E4; --ink:#1B2436; --ink-soft:#4A5266; --bg: var(--paper); --bg-2: var(--paper-2); --surface: #FFFFFF; --text: var(--ink); --text-soft: var(--ink-soft); --nav-bg: rgba(255,255,255,0.86); --border: rgba(11,47,107,0.14); --dome-glow: 0; --transition: 900ms cubic-bezier(.4,0,.2,1); --live-red:#C4302B; --radius-lg: 22px; --radius-md: 14px; --radius-sm: 10px; --header-bg: rgba(253,247,231,0.92); } [data-theme="evening"]{ --bg:#0C1830; --bg-2:#0A1428; --surface:#10203F; --text:#F3ECD8; --text-soft:#B9C2DE; --nav-bg: rgba(10,20,40,0.86); --border: rgba(240,215,123,0.18); --dome-glow:.55; --header-bg: rgba(16,32,63,0.9); } [data-theme="aarti"]{ --bg:#0A1226; --bg-2:#080E1E; --surface:#101F3E; --text:#FBF3D9; --text-soft:#D9CFA6; --nav-bg: rgba(8,14,30,0.9); --border: rgba(240,215,123,0.4); --dome-glow:1; --header-bg: rgba(16,31,62,0.94); } *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ background:var(--bg); color:var(--text); font-family:'Poppins', sans-serif; font-weight:300; transition:background var(--transition), color var(--transition); overflow-x:hidden; } h1,h2,h3,.serif{ font-family:'Jost', sans-serif; } .display{ font-family:'Italiana', sans-serif; letter-spacing:.03em; } .gurmukhi{ font-family:'Noto Sans Gurmukhi', sans-serif; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } .wrap{ max-width:1180px; margin:0 auto; padding:0 28px; } :focus-visible{ outline:2px solid var(--gold-2); outline-offset:3px; } header.site .wrap { padding: 7px 0px; } @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* ---------- Ambient gold halo ---------- */ .halo{ position:fixed; inset:0; pointer-events:none; z-index:0; background: radial-gradient(ellipse 60% 40% at 50% -5%, rgba(240,215,123,calc(var(--dome-glow) * .35)), transparent 60%); transition: background var(--transition); } /* ---------- Theme preview control (manual override) ---------- */ .theme-demo{ position:fixed; bottom:20px; right:20px; z-index:60; background:var(--surface); border:1px solid var(--border); border-radius:40px; padding:6px; display:flex; gap:4px; box-shadow:0 8px 30px rgba(0,0,0,.15); } .theme-demo button{ border:none; background:transparent; padding:8px 13px; border-radius:30px; font-family:'Poppins'; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-soft); cursor:pointer; transition:.3s; } .theme-demo button.active{ background:linear-gradient(135deg,var(--gold-1),var(--gold-2)); color:#231a02; font-weight:600; } /* ---------- Floating Live Radio button (bottom-left, every page) ---------- */ .float-radio{ position:fixed; bottom:22px; left:22px; z-index:60; width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,var(--gold-1),var(--gold-2)); color:#231a02; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 28px rgba(201,162,39,.4), 0 0 0 4px rgba(201,162,39,.14); animation: radioGlow 3s ease-in-out infinite; } .float-radio svg{ width:24px; height:24px; } .float-radio .radio-dot{ position:absolute; top:6px; right:6px; } /* ---------- Preloader ---------- */ .preloader{ position:fixed; inset:0; z-index:200; background:var(--bg); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px; transition:opacity .7s ease, visibility .7s ease; } .preloader img{ width:56px; height:56px; animation:preloaderPulse 1.6s ease-in-out infinite; } .preloader-bar{ width:120px; height:2px; background:var(--border); border-radius:2px; overflow:hidden; position:relative; } .preloader-bar::after{ content:''; position:absolute; top:0; bottom:0; width:40%; border-radius:2px; background:linear-gradient(90deg,var(--gold-1),var(--gold-2)); animation:preloaderSweep 1.2s ease-in-out infinite; } @keyframes preloaderPulse{ 0%,100%{ transform:scale(1); opacity:.85; } 50%{ transform:scale(1.12); opacity:1; } } @keyframes preloaderSweep{ 0%{ left:-40%; } 100%{ left:100%; } } .preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; } /* ---------- Scroll reveal ---------- */ .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease; } .reveal.revealed{ opacity:1; transform:translateY(0); } /* ---------- Utility bar ---------- */ .utility{ background:var(--blue-deep); color:#EFE6C2; font-size:11.5px; letter-spacing:.04em; } .utility .wrap{ display:flex; justify-content:space-between; align-items:center; padding:7px 28px; gap:12px; flex-wrap:wrap; } .utility .u-left{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; } .utility a{ color:#EFE6C2; } .lang-switch{ display:flex; gap:2px; align-items:center; } .lang-switch button{ background:none; border:none; color:#C9C2A3; font-size:11.5px; padding:2px 8px; cursor:pointer; font-family:'Poppins'; } .lang-switch button.active{ color:var(--gold-1); font-weight:600; border-bottom:1px solid var(--gold-1); } /* ---------- Header / Nav ---------- */ header.site{ position:sticky; top:0; z-index:40; background:linear-gradient(180deg, var(--header-bg), var(--nav-bg) 90%); backdrop-filter:blur(16px) saturate(1.15); border-bottom:1px solid var(--border); box-shadow:0 2px 24px rgba(11,47,107,.08); transition: background var(--transition), border-color var(--transition), box-shadow var(--transition); } header.site::before{ content:''; display:block; height:4px; width:100%; background:linear-gradient(90deg, var(--gold-2), var(--gold-1) 25%, var(--gold-2) 50%, var(--gold-1) 75%, var(--gold-2)); background-size:200% 100%; animation:goldSheen 8s linear infinite; } /*header.site::after{ content:''; display:block; height:8px; width:100%; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='8' viewBox='0 0 40 8'%3E%3Cpath d='M0 8 L10 0 L20 8 L30 0 L40 8' fill='none' stroke='%23C9A227' stroke-width='1' opacity='0.35'/%3E%3C/svg%3E"); background-repeat:repeat-x; }*/ header.site::after { content: ""; display: block; height: 8px; width: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='8' viewBox='0 0 40 8'%3E%3Cpath d='M0 8 L10 0 L20 8 L30 0 L40 8' fill='none' stroke='%23C9A227' stroke-width='1' opacity='0.35'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-position: 0 0; opacity: 0.4; animation: zigzag-scroll 2s linear infinite; } @keyframes zigzag-scroll { from { background-position: 0 0; } to { background-position: 40px 0; } } @keyframes goldSheen{ 0%{background-position:0% 0;} 100%{background-position:200% 0;} } nav{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 28px; position:relative; flex-wrap:nowrap; } .brand{ display:flex; align-items:center; gap:13px; flex-shrink:0; } .brand img{ width:46px; height:46px; flex-shrink:0; filter:drop-shadow(0 0 calc(3px + var(--dome-glow)*10px) rgba(240,215,123,calc(.5 + var(--dome-glow)*.5))); transition:filter var(--transition); } .brand .name{ line-height:1.1; white-space:nowrap; } .brand .name .big{ font-size:20px; letter-spacing:.02em; display:block; background:linear-gradient(90deg,var(--text),var(--gold-2)); -webkit-background-clip:text; background-clip:text; white-space:nowrap; } .brand .name .small{ font-size:10px; letter-spacing:.18em; color:var(--gold-2); text-transform:uppercase; white-space:nowrap; } .nav-links{ display:flex; gap:19px; align-items:center; flex-wrap:nowrap; } .nav-links a{ font-size:13px; letter-spacing:.01em; color:var(--text); position:relative; padding:6px 1px; white-space:nowrap; } .nav-links a::after{ content:''; position:absolute; left:50%; bottom:-2px; width:0; height:2px; background:linear-gradient(90deg,var(--gold-1),var(--gold-2)); transition:.3s; transform:translateX(-50%); border-radius:2px; } .nav-links a:hover, .nav-links a.current{ color:var(--gold-2); } .nav-links a:hover::after, .nav-links a.current::after{ width:100%; } .nav-actions{ display:flex; align-items:center; gap:14px; flex-shrink:0; } .radio-btn{ display:flex; align-items:center; gap:7px; background:linear-gradient(135deg,var(--gold-1),var(--gold-2)); color:#231a02; padding:8px 16px; border-radius:30px; font-size:12px; font-weight:600; letter-spacing:.03em; white-space:nowrap; box-shadow:0 4px 14px rgba(201,162,39,.35), 0 0 0 3px rgba(201,162,39,.12); animation: radioGlow 3s ease-in-out infinite; cursor:pointer; border:none; } @keyframes radioGlow{ 0%,100%{box-shadow:0 4px 14px rgba(201,162,39,.35),0 0 0 0 rgba(201,162,39,.25);} 50%{box-shadow:0 4px 20px rgba(201,162,39,.5),0 0 0 6px rgba(201,162,39,0);} } .radio-dot{ width:7px; height:7px; border-radius:50%; background:#231a02; animation: pulse 1.6s infinite; } @keyframes pulse{ 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.4; transform:scale(1.5);} } .nav-toggle{ display:none; width:42px; height:42px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface); align-items:center; justify-content:center; cursor:pointer; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{ content:''; display:block; width:18px; height:2px; background:var(--text); position:relative; transition:.3s; } .nav-toggle span::before{ position:absolute; top:-6px; } .nav-toggle span::after{ position:absolute; top:6px; } .mobile-panel{ display:none; } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 28px; border-radius:var(--radius-sm); font-size:13px; letter-spacing:.04em; font-weight:500; cursor:pointer; border:none; font-family:'Poppins'; } .btn-primary{ background:var(--blue-1); color:#fff; box-shadow:0 10px 26px rgba(11,47,107,.28); } .btn-primary:hover{ background:var(--blue-2); } .btn-gold{ background:linear-gradient(135deg,var(--gold-1),var(--gold-2)); color:#231a02; font-weight:600; box-shadow:0 10px 26px rgba(201,162,39,.28); } .btn-ghost{ border:1px solid var(--border); color:var(--text); background:transparent; } .btn-ghost:hover{ border-color:var(--gold-2); color:var(--gold-2); } .btn-block{ width:100%; } .btn-sm{ padding:10px 18px; font-size:11.5px; } /* ---------- Cards ---------- */ .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); transition: background var(--transition), border-color var(--transition), transform .3s; } .card:hover{ transform:translateY(-3px); } /* ---------- Section shell ---------- */ section{ padding:76px 0; } .section-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:38px; gap:20px; flex-wrap:wrap; } .section-head .tag{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-2); margin-bottom:10px; display:block; } .section-head h2{ font-size:34px; font-weight:600; } .section-head a.see-all{ font-size:12.5px; letter-spacing:.05em; border-bottom:1px solid var(--gold-2); padding-bottom:2px; white-space:nowrap; } .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-2); margin-bottom:22px; } .eyebrow::before{ content:''; width:26px; height:1px; background:var(--gold-2); } .ik-onkar{ font-family:'Noto Sans Gurmukhi'; font-size:15px; letter-spacing:0; } /* ---------- Ambient page-hero (inner pages) ---------- */ .page-hero{ position:relative; padding:64px 0 54px; overflow:hidden; text-align:center; } .page-hero-rays{ position:absolute; top:-40%; left:50%; width:900px; height:900px; transform:translateX(-50%); background:conic-gradient(from 0deg, transparent 0deg, rgba(240,215,123,calc(.05 + var(--dome-glow)*.16)) 8deg, transparent 16deg, transparent 40deg, rgba(240,215,123,calc(.04 + var(--dome-glow)*.14)) 48deg, transparent 56deg, transparent 90deg, rgba(240,215,123,calc(.05 + var(--dome-glow)*.16)) 98deg, transparent 106deg, transparent 140deg, rgba(240,215,123,calc(.04 + var(--dome-glow)*.14)) 148deg, transparent 156deg, transparent 200deg); animation: rotateRays 60s linear infinite; pointer-events:none; z-index:0; } @keyframes rotateRays{ from{transform:translateX(-50%) rotate(0deg);} to{transform:translateX(-50%) rotate(360deg);} } .page-hero .wrap{ position:relative; z-index:1; } .page-hero h1{ font-size:44px; font-weight:600; margin-bottom:14px; } .page-hero p{ font-size:15px; color:var(--text-soft); max-width:560px; margin:0 auto; line-height:1.75; } .hero-particles{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; } .hero-particles span{ position:absolute; bottom:-10px; width:4px; height:4px; border-radius:50%; background:radial-gradient(circle, var(--gold-1), transparent 70%); opacity:.7; animation:floatUp linear infinite; } @keyframes floatUp{ 0%{ transform:translateY(0) translateX(0); opacity:0; } 10%{ opacity:.8; } 90%{ opacity:.5; } 100%{ transform:translateY(-620px) translateX(30px); opacity:0; } } .corner-motif{ position:absolute; width:90px; height:90px; opacity:.3; z-index:0; pointer-events:none; } .corner-motif.tl{ top:16px; left:16px; } .corner-motif.br{ bottom:16px; right:16px; transform:rotate(180deg); } /* ---------- Quote rotator ---------- */ .vision-strip{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:26px 0; background:var(--bg-2); transition: background var(--transition); } .vision-strip .wrap{ display:flex; align-items:center; gap:18px; } .quote-rotator{ position:relative; min-height:32px; width:100%; } .quote-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; display:flex; align-items:center; gap:18px; flex-wrap:wrap; } .quote-slide.active{ opacity:1; position:relative; } .quote-slide p{ font-style:italic; font-family:'Jost', sans-serif; font-weight:300; font-size:19px; } .quote-slide .src{ font-size:11px; color:var(--text-soft); letter-spacing:.05em; white-space:nowrap; } /* ---------- Pillars ---------- */ .pillars-section{ background:var(--bg-2); } .pillars-head{ text-align:center; max-width:640px; margin:0 auto 50px; } .pillars-head .ik-onkar{ font-size:30px; color:var(--gold-2); display:block; margin-bottom:14px; } .pillars-head h2{ font-size:30px; font-weight:600; margin-bottom:12px; } .pillars-head p{ font-size:14px; color:var(--text-soft); line-height:1.7; } .pillars-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .pillar{ padding:36px 30px; text-align:center; } .pillar .gurmukhi{ font-size:26px; margin-bottom:6px; } .pillar h3{ font-weight:500; letter-spacing:.03em; margin-bottom:14px; color:var(--gold-2); text-transform:uppercase; font-size:11.5px; } .pillar p{ font-size:13.5px; color:var(--text-soft); line-height:1.75; margin-bottom:16px; } .pillar .maps-to{ font-size:11px; color:var(--text-soft); border-top:1px solid var(--border); padding-top:14px; } .pillar .maps-to b{ color:var(--text); font-weight:500; } /* ---------- Equality banner ---------- */ /* Sangat & Pangat — a real photo backdrop (everyone sitting together) with glass panels on top, instead of a flat cream/navy band. */ .equality-banner{ position:relative; overflow:hidden; padding:100px 0; } .equality-banner::before{ content:''; position:absolute; inset:0; z-index:0; background:url('../images/gallery/09.jpg'); background-size:cover; background-position:center; } .equality-banner::after{ content:''; position:absolute; inset:0; z-index:1; background: linear-gradient(180deg, rgba(6,20,48,.85) 0%, rgba(9,30,66,.68) 50%, rgba(6,20,48,.88) 100%), linear-gradient(210deg, rgba(240,215,123,.08), transparent 45%); } .equality-banner .wrap{ position:relative; z-index:2; } .equality-banner .section-head .tag{ color:var(--gold-1); } .equality-banner .section-head h2{ color:#FFFFFF; text-shadow:0 3px 16px rgba(0,0,0,.4); } .equality-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; } .eq-card{ padding:36px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3); box-shadow:0 22px 55px rgba(2,8,24,.3), inset 0 1px 0 rgba(255,255,255,.14); } .eq-card:hover{ transform:translateY(-4px); } .eq-card .tag{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-1); margin-bottom:12px; display:block; } .eq-card h3{ font-size:21px; margin-bottom:10px; color:#FFFFFF; } .eq-card p{ font-size:13.5px; color:#E4E9F5; line-height:1.75; } .eq-card a{ color:var(--gold-1); border-bottom:1px solid rgba(240,215,123,.45); } /* ---------- Hukamnama cards — a distinct "frame" per author ---------- */ .hukamnama-row{ display:grid; grid-template-columns: 1.2fr .8fr; gap:26px; } .hukam-card{ padding:40px 42px; position:relative; overflow:hidden; --author-accent:var(--gold-2); --author-accent-2:var(--gold-1); border:1.5px solid color-mix(in srgb, var(--author-accent) 35%, var(--border)); background: radial-gradient(ellipse 340px 220px at 100% 0%, color-mix(in srgb, var(--author-accent) 10%, transparent), transparent 70%), var(--surface); box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 14px 34px -18px color-mix(in srgb, var(--author-accent) 45%, transparent); } .hukam-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--author-accent-2),var(--author-accent),var(--author-accent-2)); } .hukam-card::after{ content:''; position:absolute; top:14px; left:14px; width:26px; height:26px; pointer-events:none; border-top:2px solid var(--author-accent); border-left:2px solid var(--author-accent); border-radius:8px 0 0 0; opacity:.55; } .hukam-card .frame-corner-br{ content:''; position:absolute; bottom:14px; right:14px; width:26px; height:26px; pointer-events:none; border-bottom:2px solid var(--author-accent); border-right:2px solid var(--author-accent); border-radius:0 0 8px 0; opacity:.55; } .author-badge{ display:inline-flex; align-items:center; gap:6px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; color:var(--author-accent); background:color-mix(in srgb, var(--author-accent) 14%, transparent); padding:6px 14px 6px 10px; border-radius:20px; margin-bottom:16px; border:1px solid color-mix(in srgb, var(--author-accent) 30%, transparent); } .author-badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--author-accent); flex-shrink:0; } .author-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--author-accent); margin-right:7px; vertical-align:middle; } .hukam-author-group{ margin-bottom:44px; } .hukam-author-group:last-child{ margin-bottom:0; } .hukam-author-heading{ display:flex; align-items:center; gap:14px; font-family:'Jost'; font-size:15px; letter-spacing:.04em; color:var(--text); padding-bottom:12px; margin-bottom:22px; border-bottom:2px solid var(--author-accent); } .hukam-author-heading .count{ margin-left:auto; font-family:'Poppins'; font-size:11px; color:var(--text-soft); text-transform:none; letter-spacing:0; font-weight:400; } .hukam-date{ font-size:11.5px; letter-spacing:.1em; color:var(--gold-2); text-transform:uppercase; margin-bottom:16px; } .hukam-gurmukhi{ font-size:22px; line-height:1.95; margin-bottom:18px; position:relative; } .hukam-translation{ font-size:14px; color:var(--text-soft); line-height:1.8; font-style:italic; display:none; } .hukam-translation.active{ display:block; } .hukam-toggle{ display:flex; gap:8px; margin:22px 0; flex-wrap:wrap; } .hukam-toggle button{ font-size:11px; padding:6px 13px; border-radius:20px; border:1px solid var(--border); background:transparent; color:var(--text-soft); cursor:pointer; font-family:'Poppins'; transition:.2s; } .hukam-toggle button.active{ background:var(--author-accent); color:#fff; border-color:var(--author-accent); } .hukam-actions{ display:flex; gap:14px; align-items:center; } .icon-btn{ width:34px; height:34px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--text-soft); background:transparent; cursor:pointer; } .icon-btn:hover{ border-color:var(--author-accent,var(--gold-2)); color:var(--author-accent,var(--gold-2)); } .archive-teaser{ display:flex; flex-direction:column; gap:14px; } .mini-hukam{ padding:20px 22px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; } .mini-hukam .d{ font-size:11px; color:var(--gold-2); letter-spacing:.06em; margin-bottom:4px; text-transform:uppercase; } .mini-hukam .g{ font-size:14.5px; } /* ---------- Live strip ---------- */ .live-strip, .section-alt{ background:var(--bg-2); transition:background var(--transition); } .live-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:26px; } .live-video{ aspect-ratio:16/9; border-radius:var(--radius-lg); position:relative; overflow:hidden; background:linear-gradient(135deg,#1a2e5c,#0b1730); display:flex; align-items:flex-end; padding:24px; box-shadow:0 0 0 1px rgba(240,215,123,.25), 0 20px 50px rgba(6,26,62,.35); } .live-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .live-video .lv-caption{ position:relative; z-index:1; } .live-badge{ position:absolute; top:18px; left:18px; background:var(--live-red); color:#fff; font-size:10.5px; letter-spacing:.1em; padding:5px 11px; border-radius:20px; display:flex; align-items:center; gap:6px; font-weight:600; z-index:2; } .live-badge .d{ width:6px; height:6px; background:#fff; border-radius:50%; animation:pulse 1.4s infinite; } .live-video h3{ color:#fff; font-size:20px; } .live-video p{ color:#c9d3ec; font-size:12px; margin-top:4px; } .radio-card{ padding:32px; display:flex; flex-direction:column; justify-content:space-between; } .radio-visual{ display:flex; align-items:center; gap:16px; margin-bottom:20px; } .radio-disc{ width:56px; height:56px; border-radius:50%; background:conic-gradient(from 0deg, var(--gold-1), var(--gold-2), var(--gold-1)); position:relative; } .radio-disc.spinning{ animation: spin 4s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg); } } .radio-disc::after{ content:''; position:absolute; inset:38%; background:var(--surface); border-radius:50%; } .bars{ display:flex; gap:3px; align-items:flex-end; height:26px; } .bars span{ width:3px; background:var(--gold-2); animation:bar 1s infinite ease-in-out; animation-play-state:paused; } .bars.playing span{ animation-play-state:running; } .bars span:nth-child(1){height:40%; animation-delay:0s;} .bars span:nth-child(2){height:100%; animation-delay:.15s;} .bars span:nth-child(3){height:65%; animation-delay:.3s;} .bars span:nth-child(4){height:85%; animation-delay:.45s;} @keyframes bar{ 0%,100%{transform:scaleY(.4);} 50%{transform:scaleY(1);} } /* ---------- Programs ---------- */ .programs-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .prog-card{ padding:0 0 22px; overflow:hidden; } .prog-card-photo{ height:104px; background-size:cover; background-position:center; margin-bottom:18px; position:relative; } .prog-card-photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,26,62,.1), rgba(6,26,62,.55)); } .prog-card .prog-body{ padding:0 22px; } .prog-day{ font-size:11px; letter-spacing:.08em; color:var(--gold-2); text-transform:uppercase; margin-bottom:10px; } .prog-title{ font-size:17px; font-family:'Jost', sans-serif; font-weight:600; margin-bottom:8px; } .prog-date{ font-size:12px; color:var(--text-soft); } /* ---------- Gallery ---------- */ .gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:150px; gap:14px; } .g-item{ border-radius:var(--radius-md); position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:16px; transition:transform .35s; background-size:cover; background-position:center; } .g-item:hover{ transform:translateY(-4px); } .g-item.big{ grid-column:span 2; grid-row:span 2; } .g-item::before{ content:''; position:absolute; inset:0; opacity:.9; } .g-item.g1::before{ background:linear-gradient(150deg,#1d3a76,#0b1730 70%); } .g-item.g2::before{ background:linear-gradient(150deg,#8c6e15,#3a2d08 70%); } .g-item.g3::before{ background:linear-gradient(150deg,#123a82,#061a3e 70%); } .g-item.g4::before{ background:linear-gradient(150deg,#b8901f,#5c4712 70%); } .g-item.g5::before{ background:linear-gradient(150deg,#1a2e5c,#123a82 70%); } .g-item.g6::before{ background:linear-gradient(150deg,#6a1f6a,#2b0b2b 70%); } .g-item::after{ content:''; position:absolute; inset:0; background: linear-gradient(0deg, rgba(4,12,30,.88) 0%, rgba(4,12,30,.5) 32%, transparent 62%), linear-gradient(160deg, rgba(240,215,123,.14), transparent 50%); } .g-item svg{ position:absolute; top:14px; right:14px; width:26px; height:26px; opacity:.85; z-index:1; filter:drop-shadow(0 1px 4px rgba(0,0,0,.5)); } .g-item span{ position:relative; z-index:1; color:#FFFFFF; font-size:12.5px; letter-spacing:.03em; font-weight:500; text-shadow:0 2px 8px rgba(0,0,0,.55); } .g-item.big span{ font-size:15px; } /* ---------- Live-event takeover (above footer, all pages) ---------- */ .live-takeover{ margin:0; padding:150px 0; position:relative; overflow:hidden; background: var(--blue-deep); border-top:2px solid var(--gold-2); border-bottom:2px solid var(--gold-2); box-shadow: inset 0 0 60px 10px rgba(0,0,0,.35); } .live-takeover.is-live{ padding:52px 0; } /* Slow Ken-Burns drift on the real photo — calm, not the old busy diagonal shimmer */ .live-takeover::before{ content:''; position:absolute; inset:-14px; z-index:0; background:url('../images/hero/night.jpg'); background-size:cover; background-position:center 35%; animation: liveTakeoverDrift 26s ease-in-out infinite alternate; filter:saturate(1.05); } @keyframes liveTakeoverDrift{ 0%{ transform:scale(1) translate(0,0); } 100%{ transform:scale(1.09) translate(-1%, -1%); } } /* Readable, glossy tint over the photo — replaces the old opaque flat gradient */ .live-takeover::after{ content:''; position:absolute; inset:0; z-index:1; background: linear-gradient(100deg, rgba(6,20,48,.88) 0%, rgba(9,30,66,.62) 45%, rgba(6,20,48,.82) 100%), linear-gradient(200deg, rgba(240,215,123,.08), transparent 45%); } .lt-inner{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; } .lt-left{ display:flex; align-items:center; gap:20px; } .lt-badge{ background:linear-gradient(135deg,var(--gold-1),var(--gold-2)); color:#231a02; font-weight:700; font-size:11px; letter-spacing:.14em; padding:8px 16px; border-radius:30px; display:flex; align-items:center; gap:8px; } .lt-badge .d{ width:7px; height:7px; border-radius:50%; background:#231a02; animation:pulse 1.2s infinite; } .lt-badge.quiet{ background:transparent; border:1px solid rgba(240,215,123,.4); color:var(--gold-1); } .lt-badge.quiet .d{ background:var(--gold-1); animation:none; } .lt-left h3{ color:#F6EFD6; font-size:24px; } .lt-left p{ color:#B9C6E8; font-size:12.5px; margin-top:4px; } .lt-actions{ display:flex; gap:12px; flex-wrap:wrap; } .lt-actions a{ font-size:11.5px; padding:10px 18px; border-radius:30px; border:1px solid rgba(240,215,123,.4); color:#F6EFD6; } .lt-actions a.solid{ background:linear-gradient(135deg,var(--gold-1),var(--gold-2)); color:#231a02; font-weight:600; border:none; } /* ---------- Forms (booking / donation / volunteer / newsletter) ---------- */ .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .field{ display:flex; flex-direction:column; gap:7px; } .field.full{ grid-column:1/-1; } .field label{ font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-soft); } .field input, .field select, .field textarea{ font-family:'Poppins'; font-size:14px; padding:12px 14px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--bg); color:var(--text); } .field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold-2); } .field textarea{ resize:vertical; min-height:90px; } .form-note{ font-size:12px; color:var(--text-soft); margin-top:14px; line-height:1.7; } .form-success{ display:none; padding:14px 18px; border-radius:var(--radius-sm); background:rgba(201,162,39,.12); border:1px solid var(--gold-2); font-size:13px; margin-top:16px; } .form-success.show{ display:block; } /* ---------- Footer ---------- */ footer{ background:linear-gradient(180deg, var(--blue-deep), #030d22); color:#CBD3E8; padding:0 0 26px; position:relative; overflow:hidden; } .foot-jaali{ height:26px; width:100%; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='26' viewBox='0 0 52 26'%3E%3Cg fill='none' stroke='%23C9A227' stroke-width='1' opacity='0.55'%3E%3Cpath d='M0 26 L13 4 L26 26 L39 4 L52 26'/%3E%3Ccircle cx='13' cy='12' r='3'/%3E%3Ccircle cx='39' cy='12' r='3'/%3E%3C/g%3E%3C/svg%3E"); background-repeat:repeat-x; background-position:top center; animation: zigzag-scroll 2s linear infinite; opacity: 0.4;} footer::after{ content:''; position:absolute; right:-80px; bottom:-80px; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle, rgba(240,215,123,.08), transparent 70%); pointer-events:none; } footer .wrap{ position:relative; padding-top:56px; } .foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:36px; } footer h4{ color:var(--gold-1); font-size:12px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px; font-weight:500; font-family:'Poppins'; } footer .foot-brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; } footer .foot-brand img{ width:30px; filter:drop-shadow(0 0 10px rgba(240,215,123,.5)); } footer p, footer li{ font-size:12.5px; line-height:2; color:#9AA6C4; list-style:none; } footer li a:hover{ color:var(--gold-1); } .foot-social{ display:flex; gap:10px; margin-top:16px; } .foot-social a{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(240,215,123,.3); display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--gold-1); transition:.3s; } .foot-social a:hover{ background:linear-gradient(135deg,var(--gold-1),var(--gold-2)); color:#231a02; border-color:transparent; transform:translateY(-2px); } .foot-bottom{ border-top:1px solid rgba(255,255,255,.08); padding-top:20px; display:flex; justify-content:space-between; font-size:11px; color:#75809E; flex-wrap:wrap; gap:10px; } /* ---------- Responsive ---------- */ @media(max-width:880px){ .nav-links{ display:none; } .nav-toggle{ display:flex; } .mobile-panel.open{ display:flex; flex-direction:column; gap:2px; position:absolute; top:100%; left:0; right:0; background:var(--surface); border-bottom:1px solid var(--border); padding:10px 28px 18px; z-index:39; } .mobile-panel a{ padding:12px 4px; font-size:14.5px; border-bottom:1px solid var(--border); } .hukamnama-row, .live-grid, .foot-grid, .equality-grid, .form-grid{ grid-template-columns:1fr; } .programs-grid, .gallery-grid{ grid-template-columns:repeat(2,1fr); } .pillars-grid{ grid-template-columns:1fr; } .page-hero h1{ font-size:32px; } .section-head h2{ font-size:26px; } } @media(max-width:520px){ .programs-grid, .gallery-grid{ grid-template-columns:1fr; } .g-item.big{ grid-column:span 1; } }