/* =========================================================== 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; } /* box-shadow (not outline) so the focus ring follows each element's own border-radius — an outline ignores border-radius and draws a square box around circular buttons (close ✕, icon actions, avatars), which reads as a rendering glitch. */ :focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-2) 55%, transparent); } 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; } } header.site 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 dropdown groups (Events&Gallery / Live&Radio / About&Connect) ---------- */ .nav-dropdown { position: relative; } .nav-dropdown-trigger { display: flex; align-items: center; gap: 5px; font-family: 'Poppins'; font-size: 13px; letter-spacing: .01em; color: var(--text); background: none; border: none; cursor: pointer; padding: 6px 1px; position: relative; } .nav-dropdown-trigger svg { opacity: .55; transition: transform .25s; flex-shrink: 0; } .nav-dropdown-trigger::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-dropdown:hover .nav-dropdown-trigger, .nav-dropdown.current .nav-dropdown-trigger, .nav-dropdown:focus-within .nav-dropdown-trigger { color: var(--gold-2); } .nav-dropdown:hover .nav-dropdown-trigger::after, .nav-dropdown.current .nav-dropdown-trigger::after, .nav-dropdown:focus-within .nav-dropdown-trigger::after { width: 100%; } .nav-dropdown:hover .nav-dropdown-trigger svg, .nav-dropdown:focus-within .nav-dropdown-trigger svg { transform: rotate(180deg); } .nav-dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 10px; opacity: 0; visibility: hidden; transition: opacity .18s, visibility .18s; z-index: 45; } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; } .nav-dropdown-menu-inner { min-width: 170px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 14px 34px -12px rgba(11, 47, 107, .25); padding: 6px; display: flex; flex-direction: column; gap: 2px; } .nav-dropdown-menu-inner a { display: block; padding: 9px 14px; font-size: 13px; border-radius: 8px; color: var(--text); white-space: nowrap; } .nav-dropdown-menu-inner a:hover, .nav-dropdown-menu-inner a.current { background: var(--bg-2); color: var(--gold-2); } .mobile-nav-group-label { padding: 12px 4px 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); } .mobile-panel a.mobile-nav-child { padding-left: 16px; } .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; } .modal-close.btn-ghost { border: 1px solid var(--border) !important; color: var(--text); background: transparent; padding: 14px 28px !important; border-radius: var(--radius-sm) !important; width: auto !important; height: auto !important; } /* ---------- 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; } /* Keep the hamburger reachable on narrow screens: nav row is flex-wrap:nowrap by design (so it never wraps to a second line), which means every sibling's width counts against the viewport. The "Live Radio" pill is redundant here — .float-radio already gives mobile visitors the same action — so drop it, and let the brand name truncate instead of forcing overflow. */ header.site nav { padding: 14px 16px; gap: 10px; } .radio-btn { display: none; } .brand { min-width: 0; } .brand .name { min-width: 0; overflow: hidden; } .brand .name .big { font-size: 16px; overflow: hidden; text-overflow: ellipsis; } .brand .name .small { display: none; } .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; } }