/* ============================================================ Manmohan Dogra — Tabla Virtuoso | Master Stylesheet Four themes selectable via [data-theme] on ============================================================ */ /* ---------- Custom font: Taiganja Type ---------- */ @font-face { font-family: 'Taiganja'; src: url('../fonts/TaiganjType.ttf') format('truetype'), url('../fonts/TaiganjType.otf') format('opentype'); font-weight: normal; font-style: normal; font-display: swap; } /* ---------- Theme: Royal Banaras (default) ---------- */ :root, :root[data-theme="royal-banaras"] { --bg: #1a1410; --bg-alt: #24201c; --bg-card: linear-gradient(145deg,#24201c,#1a1410); --text: #f5ede0; --text-muted: #b8a992; --text-dim: #6a5f52; --accent: #c9a961; --accent-2: #8b1e1e; --border: rgba(201,169,97,0.22); --border-soft: rgba(201,169,97,0.12); --shadow: 0 20px 40px rgba(0,0,0,0.4); --hero-glow: radial-gradient(circle at 20% 30%,rgba(201,169,97,0.10),transparent 50%), radial-gradient(circle at 80% 70%,rgba(139,30,30,0.12),transparent 50%); --font-head: 'Taiganja', 'Ranga', 'Yatra One', serif; --font-body: 'Lora', 'Inter', serif; --font-serif: 'Cormorant Garamond', serif; --hero-overlay: linear-gradient(180deg, rgba(26,20,16,0.35) 0%, rgba(26,20,16,0.85) 100%); --blur-brightness: 0.15; --sharp-opacity: 0.88; } /* ---------- Theme: Editorial Raga ---------- */ :root[data-theme="editorial-raga"] { --bg: #fdfaf4; --bg-alt: #f2ece0; --bg-card: #ffffff; --text: #0f0f0f; --text-muted: #555555; --text-dim: #8b8b8b; --accent: #8b2635; --accent-2: #c4b8a4; --border: rgba(15,15,15,0.12); --border-soft: rgba(15,15,15,0.06); --shadow: 0 20px 40px rgba(0,0,0,0.08); --hero-glow: radial-gradient(circle at 20% 30%,rgba(139,38,53,0.06),transparent 50%), radial-gradient(circle at 80% 70%,rgba(196,184,164,0.25),transparent 50%); --font-head: 'Taiganja', 'Cormorant Garamond', serif; --font-body: 'Lora', serif; --font-serif: 'Cormorant Garamond', serif; --hero-overlay: linear-gradient(180deg, rgba(253,250,244,0.25) 0%, rgba(253,250,244,0.70) 100%); --blur-brightness: 0.40; --sharp-opacity: 0.62; } /* ---------- Theme: Midnight Concert ---------- */ :root[data-theme="midnight-concert"] { --bg: #0a0808; --bg-alt: #1f1a14; --bg-card: linear-gradient(160deg,#1f1a14,#0a0808); --text: #f5e9d0; --text-muted: #c0b69d; --text-dim: #6a5f52; --accent: #d4a547; --accent-2: #8c6a2a; --border: rgba(212,165,71,0.22); --border-soft: rgba(212,165,71,0.08); --shadow: 0 24px 48px rgba(0,0,0,0.6); --hero-glow: radial-gradient(circle at 30% 20%,rgba(212,165,71,0.15),transparent 55%), radial-gradient(circle at 70% 80%,rgba(212,165,71,0.06),transparent 55%); --font-head: 'Taiganja', 'Ranga', 'Yatra One', serif; --font-body: 'Lora', 'Inter', serif; --font-serif: 'Cormorant Garamond', serif; --hero-overlay: linear-gradient(180deg, rgba(10,8,8,0.20) 0%, rgba(10,8,8,0.90) 100%); --blur-brightness: 0.12; --sharp-opacity: 0.90; } /* ---------- Theme: Temple Saffron ---------- */ :root[data-theme="temple-saffron"] { --bg: #fefaf0; --bg-alt: #fbecd2; --bg-card: #ffffff; --text: #2d1810; --text-muted: #5c3a22; --text-dim: #8b6a4a; --accent: #cd6f2c; --accent-2: #8b3a1a; --border: rgba(205,111,44,0.25); --border-soft: rgba(205,111,44,0.10); --shadow: 0 20px 40px rgba(139,58,26,0.10); --hero-glow: radial-gradient(circle at 20% 30%,rgba(205,111,44,0.12),transparent 50%), radial-gradient(circle at 80% 70%,rgba(61,92,61,0.10),transparent 50%); --font-head: 'Taiganja', 'Ranga', 'Yatra One', serif; --font-body: 'Lora', 'Inter', serif; --font-serif: 'Cormorant Garamond', serif; --hero-overlay: linear-gradient(180deg, rgba(254,250,240,0.20) 0%, rgba(254,250,240,0.80) 100%); --blur-brightness: 0.38; --sharp-opacity: 0.65; } /* ---------- Theme: Peacock Teal ---------- */ :root[data-theme="peacock-teal"] { --bg: #060e10; --bg-alt: #0c1a1c; --bg-card: linear-gradient(145deg,#0c1a1c,#060e10); --text: #daf0ec; --text-muted: #5aaa96; --text-dim: #1e4840; --accent: #d4a068; --accent-2: #1ab898; --border: rgba(212,160,104,0.22); --border-soft: rgba(212,160,104,0.10); --shadow: 0 20px 40px rgba(0,0,0,0.50); --hero-glow: radial-gradient(circle at 25% 30%,rgba(26,184,152,0.14),transparent 50%), radial-gradient(circle at 75% 70%,rgba(212,160,104,0.12),transparent 50%); --font-head: 'Taiganja', 'Ranga', 'Yatra One', serif; --font-body: 'Lora', 'Inter', serif; --font-serif: 'Cormorant Garamond', serif; --hero-overlay: linear-gradient(180deg, rgba(6,14,16,0.28) 0%, rgba(6,14,16,0.88) 100%); --blur-brightness: 0.13; --sharp-opacity: 0.88; } /* ---------- Theme: Varanasi Dusk — authentic Banaras maroon & gold ---------- */ :root[data-theme="varanasi-dusk"] { --bg: #1a0a0a; --bg-alt: #26120f; --bg-card: linear-gradient(145deg,#26120f,#1a0a0a); --text: #f5e8d0; --text-muted: #c0a58a; --text-dim: #6a4a38; --accent: #d4a028; --accent-2: #8b1823; --border: rgba(212,160,40,0.25); --border-soft: rgba(212,160,40,0.10); --shadow: 0 22px 45px rgba(0,0,0,0.55); --hero-glow: radial-gradient(circle at 25% 30%,rgba(212,160,40,0.14),transparent 55%), radial-gradient(circle at 75% 70%,rgba(139,24,35,0.16),transparent 55%); --font-head: 'Taiganja', 'Ranga', 'Yatra One', serif; --font-body: 'Lora', serif; --font-serif: 'Cormorant Garamond', serif; --hero-overlay: linear-gradient(180deg, rgba(26,10,10,0.30) 0%, rgba(26,10,10,0.88) 100%); --blur-brightness: 0.16; --sharp-opacity: 0.88; } /* ---------- Global Reset ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;background:var(--bg);transition:background 0.4s ease} body{ font-family:var(--font-body); background:transparent; color:var(--text); line-height:1.7; -webkit-font-smoothing:antialiased; transition:color 0.4s ease; min-height:100vh; } /* ---------- Page background slideshow ---------- */ #page-bg{ position:fixed;inset:0;z-index:-1; background:var(--bg); transition:background 0.4s ease; overflow:hidden; } .bg-slide{ position:absolute;inset:0; opacity:0; transition:opacity 2s ease-in-out; } .bg-slide.active{opacity:1} .bg-blur{ position:absolute;inset:-5%; background-size:cover; background-position:var(--bg-focal,center 30%); background-repeat:no-repeat; filter:blur(40px) brightness(var(--blur-brightness,0.15)) saturate(0.7); } .bg-sharp{ position:absolute;inset:0; background-size:contain; background-position:var(--bg-focal,center 25%); background-repeat:no-repeat; opacity:var(--sharp-opacity,0.88); } img{max-width:100%;display:block} a{color:inherit;text-decoration:none;transition:color 0.3s} a:hover{color:var(--accent)} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} /* ---------- Typography ---------- */ h1,h2,h3,h4{font-family:var(--font-head);font-weight:400;letter-spacing:0.5px;color:var(--text);line-height:1.2} h1{font-size:clamp(2.6rem,6.2vw,4.8rem);letter-spacing:2px;line-height:1.1;font-weight:700} h2{font-size:clamp(2rem,4vw,3.2rem);letter-spacing:1px;margin-bottom:1.5rem} h3{font-size:clamp(1.3rem,2.5vw,1.9rem);letter-spacing:0.5px;margin-bottom:0.75rem} h4{font-size:1.1rem;letter-spacing:1px;margin-bottom:0.5rem} p{margin-bottom:1rem;color:var(--text-muted)} .serif{font-family:var(--font-serif);font-style:italic} .caps{text-transform:uppercase;letter-spacing:3px;font-size:0.85rem} /* ---------- Layout Containers ---------- */ .container{max-width:1280px;margin:0 auto;padding:0 2rem} .narrow{max-width:800px;margin:0 auto;padding:0 2rem} section{ padding:5rem 0; background:color-mix(in srgb,var(--bg) 82%,transparent); transition:background 0.4s ease; } .section-alt{ background:color-mix(in srgb,var(--bg-alt) 85%,transparent); } /* ---------- Navigation ---------- */ .site-nav{ position:fixed;top:0;left:0;right:0;z-index:100; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--border-soft); transition:background 0.4s; } .nav-inner{ max-width:1400px;margin:0 auto;padding:1rem 2rem; display:flex;align-items:center;justify-content:space-between; } .brand{ font-family:var(--font-head);font-size:1.1rem;letter-spacing:4px; color:var(--accent);text-decoration:none;display:flex;align-items:center;gap:0.5rem; } .brand .om{font-size:1.4rem} .nav-links{display:flex;gap:2rem;list-style:none;align-items:center} .nav-links a{ font-size:0.8rem;letter-spacing:2px;text-transform:uppercase; color:var(--text-muted);font-weight:500; } .nav-links a:hover,.nav-links a.active{color:var(--accent)} .nav-toggle{display:none;font-size:1.5rem;color:var(--text)} @media (max-width:900px){ .nav-toggle{display:block} .nav-links{ position:absolute;top:100%;left:0;right:0; flex-direction:column;padding:1.5rem 2rem;gap:1.2rem; background:var(--bg);border-bottom:1px solid var(--border-soft); display:none; } .nav-links.open{display:flex} } /* ---------- Hero ---------- */ .hero{ min-height:100vh;position:relative; display:flex;align-items:center;justify-content:center;text-align:center; padding:8rem 2rem 4rem; background:transparent; background-image:var(--hero-glow); } .hero-image{ position:absolute;inset:0;z-index:0; background-size:cover;background-position:center 20%; opacity:0.45;filter:saturate(0.9) contrast(1.05); } .hero-overlay{position:absolute;inset:0;z-index:1;background:var(--hero-overlay)} .hero-content{position:relative;z-index:2;max-width:900px} .hero .om{font-size:3rem;color:var(--accent);margin-bottom:1rem;display:block} .hero h1{color:var(--text);margin-bottom:1rem} .hero .sub{ font-family:var(--font-serif);font-style:italic;font-size:clamp(1.2rem,2.5vw,1.6rem); color:var(--accent);margin-bottom:0.5rem;letter-spacing:1px; } .hero .tagline{color:var(--text-muted);max-width:640px;margin:1.5rem auto 2.5rem;font-size:1.05rem} .hero-ornament{ display:flex;align-items:center;justify-content:center;gap:1.2rem; margin-bottom:2rem;color:var(--accent); } .hero-ornament .line{width:60px;height:1px;background:var(--accent);opacity:0.5} /* ---------- Buttons ---------- */ .btn{ display:inline-block;padding:0.9rem 2.2rem; font-family:var(--font-head);font-size:0.8rem;letter-spacing:2px;text-transform:uppercase; border:1px solid var(--accent);color:var(--accent); transition:all 0.35s;cursor:pointer; } .btn:hover{background:var(--accent);color:var(--bg);transform:translateY(-2px)} .btn-primary{background:var(--accent);color:var(--bg)} .btn-primary:hover{background:transparent;color:var(--accent)} .btn-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap} /* ---------- Section Headers ---------- */ .section-head{text-align:center;margin-bottom:3.5rem} .section-head .eyebrow{ font-family:var(--font-head);font-size:0.8rem;letter-spacing:4px; color:var(--accent);text-transform:uppercase;margin-bottom:0.8rem;display:block; } .section-head h2{color:var(--text)} .section-head .dash{ display:block;width:60px;height:1px;background:var(--accent); margin:1.5rem auto;opacity:0.5; } .section-head p{max-width:640px;margin:1rem auto 0} /* ---------- Cards & Grids ---------- */ .grid{display:grid;gap:2rem} .grid-2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))} .grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .grid-4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .card{ background:var(--bg-card); border:1px solid var(--border); border-radius:6px;padding:2.2rem; transition:all 0.4s;position:relative;overflow:hidden; } .card::before{ content:"";position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent)); } .card:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:var(--shadow)} .card h3{color:var(--text)} .card .meta{ font-family:var(--font-head);font-size:0.75rem;letter-spacing:3px; color:var(--accent);opacity:0.8;text-transform:uppercase;margin-bottom:0.8rem; } /* ---------- Ornamental divider ---------- */ .ornament{ display:flex;align-items:center;justify-content:center;gap:1rem; color:var(--accent);margin:2rem 0; } .ornament::before,.ornament::after{ content:"";width:80px;height:1px;background:var(--accent);opacity:0.4; } /* ---------- Featured Quote ---------- */ .pull-quote{ font-family:var(--font-serif);font-style:italic; font-size:clamp(1.3rem,2.8vw,2rem);line-height:1.5; text-align:center;color:var(--text); max-width:840px;margin:4rem auto;padding:2rem; border-top:1px solid var(--border);border-bottom:1px solid var(--border); position:relative; } .pull-quote::before{ content:"\201C";position:absolute;top:-0.5rem;left:50%;transform:translateX(-50%); background:var(--bg);padding:0 1rem;font-size:3rem;color:var(--accent); font-family:var(--font-head);line-height:1; } .pull-quote cite{ display:block;margin-top:1.5rem;font-style:normal;font-size:0.85rem; letter-spacing:3px;text-transform:uppercase;color:var(--accent); } /* ---------- Info Rows ---------- */ .info-table{width:100%;border-collapse:collapse;margin:2rem 0} .info-table td{padding:0.9rem 0;border-bottom:1px solid var(--border-soft);vertical-align:top} .info-table td:first-child{ font-family:var(--font-head);color:var(--accent); font-size:0.8rem;letter-spacing:2px;text-transform:uppercase;width:180px; } .info-table td:last-child{color:var(--text)} /* ---------- Gallery ---------- */ .gallery-grid{ display:grid;gap:1rem; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); } .gallery-item{ position:relative;overflow:hidden;border-radius:4px;cursor:pointer; aspect-ratio:3/4;background:var(--bg-alt); } .gallery-item.wide{aspect-ratio:4/3;grid-column:span 2} .gallery-item img{ width:100%;height:100%;object-fit:cover; transition:transform 0.6s;filter:saturate(0.95); } .gallery-item:hover img{transform:scale(1.05);filter:saturate(1.1)} .gallery-filter{ display:flex;gap:0.5rem;justify-content:center;margin-bottom:2.5rem;flex-wrap:wrap; } .gallery-filter button{ font-family:var(--font-head);font-size:0.75rem;letter-spacing:2px;text-transform:uppercase; padding:0.6rem 1.2rem;border:1px solid var(--border);color:var(--text-muted); transition:all 0.3s; } .gallery-filter button.active, .gallery-filter button:hover{border-color:var(--accent);color:var(--accent)} /* ---------- Lightbox ---------- */ .lightbox{ position:fixed;inset:0;z-index:200; background:rgba(0,0,0,0.92);display:none; align-items:center;justify-content:center;padding:2rem; } .lightbox.open{display:flex} .lightbox img{max-width:100%;max-height:90vh;object-fit:contain} .lightbox-close{ position:absolute;top:1.5rem;right:2rem;font-size:2rem; color:#fff;background:none;cursor:pointer; } /* ---------- Video Embeds ---------- */ .video-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))} .video{ position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:4px; border:1px solid var(--border);background:var(--bg-alt); } .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .video-caption{ font-family:var(--font-serif);font-style:italic;font-size:1rem; margin-top:0.8rem;color:var(--text-muted); } /* ---------- Press quote cards ---------- */ .press-card{ background:var(--bg-card);border:1px solid var(--border);padding:2.5rem; border-radius:6px;position:relative; } .press-card::before{ content:"\201C";font-family:var(--font-head);font-size:4rem; color:var(--accent);position:absolute;top:0.5rem;left:1.5rem;line-height:1;opacity:0.5; } .press-card blockquote{ font-family:var(--font-serif);font-style:italic;font-size:1.2rem; line-height:1.6;color:var(--text);margin:0 0 1.5rem;padding-top:2rem; } .press-card .source{ font-family:var(--font-head);font-size:0.75rem;letter-spacing:2px; text-transform:uppercase;color:var(--accent); } .press-card .source a:hover{text-decoration:underline} /* ---------- Upcoming Concert strip ---------- */ .next-concert{ padding:3.5rem 0; background:color-mix(in srgb,var(--bg-alt) 90%,transparent); border-top:3px solid var(--accent); border-bottom:1px solid var(--border-soft); } .concert-label{ display:flex;align-items:center;gap:0.6rem; font-family:var(--font-head);font-size:0.72rem;letter-spacing:4px; text-transform:uppercase;color:var(--accent);margin-bottom:2rem; } .concert-dot{ display:inline-block;width:8px;height:8px;border-radius:50%; background:var(--accent); animation:concertPulse 1.8s ease-in-out infinite; } @keyframes concertPulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.75)} } .concert-body{ display:flex;align-items:center;justify-content:space-between; gap:3rem;flex-wrap:wrap; } .concert-info{flex:1;min-width:260px} .concert-eyebrow{ font-family:var(--font-head);font-size:0.8rem;letter-spacing:3px; text-transform:uppercase;color:var(--text-muted);margin-bottom:0.6rem; } .concert-title{ font-family:var(--font-head);font-weight:700; font-size:clamp(2.8rem,6vw,5rem); color:var(--accent);letter-spacing:2px;line-height:1; margin-bottom:0.3rem; } .concert-subtitle{ font-family:var(--font-serif);font-style:italic; font-size:clamp(1.2rem,2.5vw,1.7rem); color:var(--text);margin-bottom:1.4rem; } .concert-desc{ color:var(--text-muted);max-width:520px; font-size:1.05rem;line-height:1.75;margin:0; } .concert-cta{ text-align:center;flex-shrink:0; } .concert-time{ font-family:var(--font-head);font-size:0.82rem;letter-spacing:3px; text-transform:uppercase;color:var(--text-muted);margin-bottom:1.2rem; } .btn-ticket{ padding:1.1rem 3rem;font-size:0.85rem;letter-spacing:3px; } .concert-note{ margin-top:0.8rem;font-size:0.78rem; letter-spacing:2px;color:var(--text-dim);text-transform:uppercase; } @media(max-width:700px){ .concert-body{flex-direction:column;align-items:flex-start} .concert-cta{width:100%;text-align:left} } /* ---------- Footer ---------- */ .site-footer{ border-top:1px solid var(--border-soft); padding:3rem 2rem 2rem;margin-top:4rem; text-align:center;color:var(--text-dim);font-size:0.85rem; background:color-mix(in srgb,var(--bg) 90%,transparent); transition:background 0.4s ease; } .site-footer .socials{ display:flex;justify-content:center;gap:1.5rem;margin-bottom:1.5rem; } .site-footer .socials a{ width:42px;height:42px;border:1px solid var(--border); border-radius:50%;display:flex;align-items:center;justify-content:center; color:var(--accent);font-size:1rem; } .site-footer .socials a:hover{background:var(--accent);color:var(--bg);border-color:var(--accent)} .site-footer .copy{font-family:var(--font-serif);font-style:italic;color:var(--text-muted)} /* ---------- Form ---------- */ .form{display:grid;gap:1.2rem;max-width:640px;margin:0 auto} .form label{ font-family:var(--font-head);font-size:0.75rem;letter-spacing:2px; text-transform:uppercase;color:var(--accent);margin-bottom:0.3rem;display:block; } .form input,.form textarea,.form select{ width:100%;padding:0.9rem 1rem; background:var(--bg-alt);border:1px solid var(--border); color:var(--text);font-family:var(--font-body);font-size:1rem; border-radius:4px;transition:border-color 0.3s; } .form input:focus,.form textarea:focus,.form select:focus{ outline:none;border-color:var(--accent); } .form textarea{min-height:140px;resize:vertical} /* ---------- Theme switcher panel ---------- */ .theme-switch{ position:fixed;right:1.5rem;bottom:1.5rem;z-index:90; background:color-mix(in srgb,var(--bg-alt) 90%,transparent); backdrop-filter:blur(12px); border:1px solid var(--border); border-radius:22px;padding:0.55rem 0.75rem; display:flex;gap:0.4rem;align-items:center;flex-wrap:wrap; max-width:340px;justify-content:flex-end; box-shadow:var(--shadow); } .theme-switch .label{ font-family:var(--font-head);font-size:0.65rem;letter-spacing:2px; text-transform:uppercase;color:var(--text-muted);margin-right:0.3rem; } .theme-switch button{ width:24px;height:24px;border-radius:50%; border:2px solid transparent;cursor:pointer; transition:transform 0.3s,border-color 0.3s; } .theme-switch button:hover{transform:scale(1.15)} .theme-switch button.active{border-color:var(--text)} .theme-switch button[data-set="royal-banaras"]{ background:linear-gradient(135deg,#3a0e0e 0%,#c9a961 100%); } .theme-switch button[data-set="editorial-raga"]{ background:linear-gradient(135deg,#fdfaf4 0%,#8b2635 100%); } .theme-switch button[data-set="midnight-concert"]{ background:linear-gradient(135deg,#0a0808 0%,#d4a547 100%); } .theme-switch button[data-set="temple-saffron"]{ background:linear-gradient(135deg,#cd6f2c 0%,#3d5c3d 100%); } .theme-switch button[data-set="peacock-teal"]{ background:linear-gradient(135deg,#060e10 0%,#d4a068 50%,#1ab898 100%); } .theme-switch button[data-set="varanasi-dusk"]{ background:linear-gradient(135deg,#1a0a0a 0%,#8b1823 50%,#d4a028 100%); } /* ---------- Utility ---------- */ .text-center{text-align:center} .mt-2{margin-top:2rem}.mt-4{margin-top:4rem} .mb-2{margin-bottom:2rem}.mb-4{margin-bottom:4rem} /* ---------- Responsive image columns ---------- */ .two-col{ display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center; } @media (max-width:800px){ .two-col{grid-template-columns:1fr} .gallery-item.wide{grid-column:auto} section{padding:3.5rem 0} } /* ---------- Page-specific hero variants ---------- */ .page-hero{ min-height:55vh;padding:9rem 2rem 4rem;text-align:center; background:transparent;background-image:var(--hero-glow); border-bottom:1px solid var(--border-soft); position:relative; } .page-hero::before{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 55%,transparent) 0%,color-mix(in srgb,var(--bg) 82%,transparent) 100%); } .page-hero .eyebrow{ font-family:var(--font-head);font-size:0.8rem;letter-spacing:4px; color:var(--accent);text-transform:uppercase;margin-bottom:1rem;display:block; } .page-hero h1{font-size:clamp(2rem,5vw,3.5rem);color:var(--text)} /* ---------- Event Page (Talayan etc.) ---------- */ .event-hero{ min-height:92vh;position:relative; display:flex;align-items:center;justify-content:center;text-align:center; padding:9rem 2rem 5rem; background:transparent;background-image:var(--hero-glow); } .event-hero-overlay{ position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 30%,transparent) 0%,color-mix(in srgb,var(--bg) 80%,transparent) 100%); } .event-hero-content{position:relative;z-index:2;max-width:920px} .event-eyebrow{ display:inline-flex;align-items:center;gap:0.6rem; font-family:var(--font-head);font-size:0.78rem;letter-spacing:4px; text-transform:uppercase;color:var(--accent); margin-bottom:2rem;padding:0.5rem 1.2rem; border:1px solid var(--accent);border-radius:30px; background:color-mix(in srgb,var(--bg) 30%,transparent); } .event-dot{ display:inline-block;width:7px;height:7px;border-radius:50%; background:var(--accent); animation:concertPulse 1.8s ease-in-out infinite; } .event-title{ font-family:var(--font-head);font-weight:700; font-size:clamp(4rem,11vw,8.5rem); letter-spacing:6px;line-height:0.95; color:var(--accent);margin-bottom:0.5rem; } .event-subtitle{ font-family:var(--font-serif);font-style:italic; font-size:clamp(1.3rem,3vw,2rem); color:var(--text);margin-bottom:1.6rem;letter-spacing:1px; } .event-tagline{ color:var(--text-muted);font-size:1.1rem; max-width:620px;margin:0 auto 2.5rem;line-height:1.7; } /* Artist cards */ .artist-card{ background:color-mix(in srgb,var(--bg-card) 92%,transparent); border:1px solid var(--border);border-radius:6px; overflow:hidden;display:flex;flex-direction:column; transition:all 0.4s; } .artist-card:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:var(--shadow)} .artist-photo{ aspect-ratio:4/5;background-size:cover;background-position:center 25%; background-color:var(--bg-alt); border-bottom:1px solid var(--border-soft); } .artist-photo-placeholder{ background:repeating-linear-gradient(45deg, color-mix(in srgb,var(--bg-alt) 80%,transparent) 0, color-mix(in srgb,var(--bg-alt) 80%,transparent) 12px, color-mix(in srgb,var(--bg) 80%,transparent) 12px, color-mix(in srgb,var(--bg) 80%,transparent) 24px); display:flex;align-items:center;justify-content:center; position:relative; } .artist-photo-placeholder::after{ content:"Photo to follow"; font-family:var(--font-head);font-size:0.7rem;letter-spacing:3px; text-transform:uppercase;color:var(--text-dim); background:var(--bg);padding:0.4rem 1rem;border:1px solid var(--border); border-radius:30px; } .artist-body{padding:1.8rem 1.6rem 1.8rem} .artist-instrument{ font-family:var(--font-head);font-size:0.72rem;letter-spacing:3px; text-transform:uppercase;color:var(--accent);margin-bottom:0.5rem; } .artist-card h3{margin-bottom:0.9rem} .artist-card p{font-size:0.97rem;line-height:1.7} .artist-link{ display:inline-block;margin-top:0.5rem; font-family:var(--font-head);font-size:0.78rem;letter-spacing:2px; text-transform:uppercase;color:var(--accent); } .artist-note{ margin-top:0.8rem;font-size:0.82rem;font-style:italic; color:var(--text-dim); } /* Video placeholders */ .video-placeholder{ aspect-ratio:16/9; background:color-mix(in srgb,var(--bg-alt) 85%,transparent); border:1px dashed var(--border);border-radius:6px; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:0.4rem;padding:1.5rem;text-align:center; } .video-placeholder .vp-instrument{ font-family:var(--font-head);font-size:0.72rem;letter-spacing:3px; text-transform:uppercase;color:var(--accent); } .video-placeholder .vp-name{ font-family:var(--font-head);font-size:1.1rem;color:var(--text); } .video-placeholder .vp-note{ font-size:0.78rem;letter-spacing:2px;text-transform:uppercase; color:var(--text-dim);margin-top:0.3rem; } /* ---------- Events Page (event listing cards) ---------- */ .event-listing{ display:grid;grid-template-columns:1fr 2fr;gap:0; background:color-mix(in srgb,var(--bg-card) 92%,transparent); border:1px solid var(--border);border-radius:8px; overflow:hidden;margin-bottom:2.5rem; transition:all 0.4s; } .event-listing:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-4px)} .event-listing-image{ background-size:cover;background-position:center 35%; background-color:var(--bg-alt); min-height:320px; } .event-listing-body{ display:flex;align-items:flex-start;gap:2rem; padding:2.5rem; } .event-listing-date{ flex-shrink:0;text-align:center; border:1px solid var(--accent);border-radius:6px; padding:1rem 1.2rem;background:color-mix(in srgb,var(--bg) 30%,transparent); } .event-listing-date .event-day{ display:block;font-family:var(--font-head);font-weight:700; font-size:2.4rem;color:var(--accent);line-height:1; } .event-listing-date .event-month{ display:block;font-family:var(--font-head); font-size:0.78rem;letter-spacing:3px;text-transform:uppercase; color:var(--accent);margin-top:0.4rem; } .event-listing-date .event-year{ display:block;font-size:0.7rem;letter-spacing:2px; color:var(--text-muted);margin-top:0.2rem; } .event-listing-info{flex:1;min-width:0} .event-listing-eyebrow{ display:inline-flex;align-items:center;gap:0.5rem; font-family:var(--font-head);font-size:0.72rem;letter-spacing:3px; text-transform:uppercase;color:var(--accent);margin-bottom:0; } .event-listing-meta{ font-family:var(--font-head);font-size:0.85rem;letter-spacing:1px; color:var(--text-muted);margin-bottom:1rem; } @media (max-width:800px){ .event-listing{grid-template-columns:1fr} .event-listing-image{min-height:220px} .event-listing-body{flex-direction:column;gap:1.5rem;padding:1.8rem} } /* ---------- Event detail grid (poster + about) ---------- */ .event-detail-grid{ display:grid;grid-template-columns:1fr 1.5fr;gap:3rem; margin-top:3rem;align-items:start; } .event-poster{display:flex;flex-direction:column;align-items:center;gap:1rem} .event-poster-img{width:100%;border-radius:6px;border:2px solid var(--accent);box-shadow:var(--shadow);display:block} .event-poster-frame{ width:100%;aspect-ratio:2/3; background:repeating-linear-gradient(45deg, color-mix(in srgb,var(--bg-alt) 80%,transparent) 0, color-mix(in srgb,var(--bg-alt) 80%,transparent) 14px, color-mix(in srgb,var(--bg) 80%,transparent) 14px, color-mix(in srgb,var(--bg) 80%,transparent) 28px); border:2px solid var(--accent);border-radius:6px; position:relative; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:0.5rem; box-shadow:var(--shadow); } .event-poster-frame .poster-label{ font-family:var(--font-head);font-size:0.85rem;letter-spacing:4px; text-transform:uppercase;color:var(--accent); background:var(--bg);padding:0.6rem 1.4rem; border:1px solid var(--accent);border-radius:30px; } .event-poster-frame .poster-note{ font-family:var(--font-serif);font-style:italic; font-size:0.95rem;color:var(--text-muted); } .event-poster-caption{ font-size:0.85rem;color:var(--text-dim);text-align:center; font-style:italic;margin:0; } .event-about h3{font-family:var(--font-head);font-weight:700;color:var(--accent);margin-bottom:1rem} .event-about p{font-size:1.02rem;line-height:1.75} @media (max-width:800px){ .event-detail-grid{grid-template-columns:1fr;gap:2.5rem} .event-poster-frame{max-width:280px;margin:0 auto} }