/* ══════════════════════════════════════════════════════ MULTI-THEME DESIGN SYSTEM 5 Themes: Parchment | Midnight | Emerald | Regal | IAGT Classic Applied via data-theme="..." on element ══════════════════════════════════════════════════════ */ /* ── THEME 1: Warm Parchment (default, light) ── */ :root, [data-theme="parchment"] { --ink: #F7F3ED; --ink-mid: #EDE8E0; --ink-soft: #E4DDD3; --gold: #B8772A; --gold-light: #C9894A; --gold-pale: rgba(184,119,42,0.10); --gold-glow: rgba(184,119,42,0.20); --ember: #C4501E; --blush: #A84060; --teal: #1E8C84; --cream: #1C1A16; --white: #FFFFFF; --glass-1: rgba(255,255,255,0.45); --glass-2: rgba(255,255,255,0.60); --glass-3: rgba(255,255,255,0.72); --glass-4: rgba(255,255,255,0.85); --glass-border-1: rgba(184,119,42,0.12); --glass-border-2: rgba(184,119,42,0.20); --glass-border-3: rgba(184,119,42,0.30); --shadow-sm: 0 2px 12px rgba(100,60,20,0.10); --shadow-md: 0 8px 40px rgba(100,60,20,0.14); --shadow-lg: 0 20px 80px rgba(100,60,20,0.18); --glow-gold: 0 0 40px rgba(184,119,42,0.15); --glow-ember: 0 0 40px rgba(196,80,30,0.15); --text-primary: #1C1A16; --text-secondary: rgba(28,26,22,0.62); --text-muted: rgba(28,26,22,0.45); --nav-bg: rgba(247,243,237,0.82); --nav-bg-scroll: rgba(247,243,237,0.96); --nav-border: rgba(184,119,42,0.12); --footer-bg: #1C1A16; --orb1-color: rgba(184,119,42,0.10); --orb2-color: rgba(196,80,30,0.07); --orb3-color: rgba(30,140,132,0.05); --orb4-color: rgba(168,64,96,0.06); --bg-base: linear-gradient(170deg, #F7F3ED 0%, #F2EDE5 40%, #EDE8DF 100%); --grid-line: rgba(184,119,42,0.07); --ring-color: rgba(184,119,42,0.12); --hero-card-bg: rgba(255,255,255,0.52); --hero-card-border: rgba(255,255,255,0.80); --input-bg: rgba(255,255,255,0.65); --input-border: rgba(184,119,42,0.16); --input-focus-border: rgba(184,119,42,0.40); --input-text: #1C1A16; --stat-bg: rgba(255,255,255,0.55); --stat-hover: rgba(255,255,255,0.80); --stat-border: rgba(184,119,42,0.15); --card-bg: rgba(255,255,255,0.55); --card-hover: rgba(255,255,255,0.82); --card-border: rgba(184,119,42,0.12); --card-hover-border: rgba(184,119,42,0.22); --pill-bg: rgba(255,255,255,0.68); --pill-text: rgba(28,26,22,0.65); --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; --r-pill: 100px; } /* ── THEME 2: Midnight (dark, indigo + gold) ── */ [data-theme="midnight"] { --ink: #0D0F1A; --ink-mid: #1A1D2E; --ink-soft: #252840; --gold: #D4A853; --gold-light: #E8C178; --gold-pale: rgba(212,168,83,0.12); --gold-glow: rgba(212,168,83,0.25); --ember: #E86C3A; --blush: #C4647A; --teal: #3ABCB4; --cream: #FBF8F2; --white: #FFFFFF; --glass-1: rgba(255,255,255,0.05); --glass-2: rgba(255,255,255,0.09); --glass-3: rgba(255,255,255,0.14); --glass-4: rgba(255,255,255,0.22); --glass-border-1: rgba(255,255,255,0.10); --glass-border-2: rgba(255,255,255,0.18); --glass-border-3: rgba(255,255,255,0.28); --shadow-sm: 0 2px 12px rgba(0,0,0,0.30); --shadow-md: 0 8px 40px rgba(0,0,0,0.40); --shadow-lg: 0 20px 80px rgba(0,0,0,0.50); --glow-gold: 0 0 40px rgba(212,168,83,0.20); --glow-ember: 0 0 40px rgba(232,108,58,0.20); --text-primary: #FBF8F2; --text-secondary: rgba(251,248,242,0.65); --text-muted: rgba(251,248,242,0.40); --nav-bg: rgba(13,15,26,0.72); --nav-bg-scroll: rgba(13,15,26,0.92); --nav-border: rgba(255,255,255,0.10); --footer-bg: #060709; --orb1-color: rgba(212,168,83,0.12); --orb2-color: rgba(200,100,122,0.08); --orb3-color: rgba(58,188,180,0.07); --orb4-color: rgba(232,108,58,0.08); --bg-base: linear-gradient(170deg, #0D0F1A 0%, #111428 40%, #0F1020 100%); --grid-line: rgba(212,168,83,0.04); --ring-color: rgba(212,168,83,0.12); --hero-card-bg: rgba(255,255,255,0.04); --hero-card-border: rgba(255,255,255,0.12); --input-bg: rgba(255,255,255,0.06); --input-border: rgba(255,255,255,0.12); --input-focus-border: rgba(212,168,83,0.45); --input-text: #FBF8F2; --stat-bg: rgba(255,255,255,0.05); --stat-hover: rgba(255,255,255,0.09); --stat-border: rgba(255,255,255,0.10); --card-bg: rgba(255,255,255,0.05); --card-hover: rgba(255,255,255,0.10); --card-border: rgba(255,255,255,0.10); --card-hover-border: rgba(212,168,83,0.25); --pill-bg: rgba(255,255,255,0.09); --pill-text: rgba(251,248,242,0.65); --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; --r-pill: 100px; } /* ── THEME 3: Emerald (light, green + gold) ── */ [data-theme="emerald"] { --ink: #F2F7F4; --ink-mid: #E4EFE9; --ink-soft: #D5E7DD; --gold: #2A7A52; --gold-light: #3A9466; --gold-pale: rgba(42,122,82,0.10); --gold-glow: rgba(42,122,82,0.20); --ember: #B8772A; --blush: #7A2A5A; --teal: #1A6B60; --cream: #0F2018; --white: #FFFFFF; --glass-1: rgba(255,255,255,0.45); --glass-2: rgba(255,255,255,0.60); --glass-3: rgba(255,255,255,0.72); --glass-4: rgba(255,255,255,0.85); --glass-border-1: rgba(42,122,82,0.12); --glass-border-2: rgba(42,122,82,0.20); --glass-border-3: rgba(42,122,82,0.30); --shadow-sm: 0 2px 12px rgba(20,60,40,0.10); --shadow-md: 0 8px 40px rgba(20,60,40,0.14); --shadow-lg: 0 20px 80px rgba(20,60,40,0.18); --glow-gold: 0 0 40px rgba(42,122,82,0.18); --glow-ember: 0 0 40px rgba(184,119,42,0.18); --text-primary: #0F2018; --text-secondary: rgba(15,32,24,0.62); --text-muted: rgba(15,32,24,0.45); --nav-bg: rgba(242,247,244,0.85); --nav-bg-scroll: rgba(242,247,244,0.96); --nav-border: rgba(42,122,82,0.14); --footer-bg: #0F2018; --orb1-color: rgba(42,122,82,0.10); --orb2-color: rgba(184,119,42,0.07); --orb3-color: rgba(26,107,96,0.06); --orb4-color: rgba(122,42,90,0.05); --bg-base: linear-gradient(170deg, #F2F7F4 0%, #EAF3EE 40%, #E0EDE7 100%); --grid-line: rgba(42,122,82,0.07); --ring-color: rgba(42,122,82,0.12); --hero-card-bg: rgba(255,255,255,0.55); --hero-card-border: rgba(255,255,255,0.85); --input-bg: rgba(255,255,255,0.65); --input-border: rgba(42,122,82,0.18); --input-focus-border: rgba(42,122,82,0.42); --input-text: #0F2018; --stat-bg: rgba(255,255,255,0.55); --stat-hover: rgba(255,255,255,0.80); --stat-border: rgba(42,122,82,0.15); --card-bg: rgba(255,255,255,0.55); --card-hover: rgba(255,255,255,0.82); --card-border: rgba(42,122,82,0.12); --card-hover-border: rgba(42,122,82,0.25); --pill-bg: rgba(255,255,255,0.68); --pill-text: rgba(15,32,24,0.65); --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; --r-pill: 100px; } /* ── THEME 4: Regal (dark, deep purple + gold) ── */ [data-theme="regal"] { --ink: #12091E; --ink-mid: #1C1030; --ink-soft: #261840; --gold: #D4A853; --gold-light: #E8C178; --gold-pale: rgba(212,168,83,0.12); --gold-glow: rgba(212,168,83,0.25); --ember: #C45A8A; --blush: #9A4AC4; --teal: #6A5ACD; --cream: #F5F0FF; --white: #FFFFFF; --glass-1: rgba(255,255,255,0.04); --glass-2: rgba(255,255,255,0.08); --glass-3: rgba(255,255,255,0.13); --glass-4: rgba(255,255,255,0.20); --glass-border-1: rgba(212,168,83,0.10); --glass-border-2: rgba(212,168,83,0.18); --glass-border-3: rgba(212,168,83,0.28); --shadow-sm: 0 2px 12px rgba(0,0,0,0.40); --shadow-md: 0 8px 40px rgba(0,0,0,0.50); --shadow-lg: 0 20px 80px rgba(0,0,0,0.60); --glow-gold: 0 0 40px rgba(212,168,83,0.25); --glow-ember: 0 0 40px rgba(196,90,138,0.25); --text-primary: #F5F0FF; --text-secondary: rgba(245,240,255,0.65); --text-muted: rgba(245,240,255,0.40); --nav-bg: rgba(18,9,30,0.75); --nav-bg-scroll: rgba(18,9,30,0.94); --nav-border: rgba(212,168,83,0.12); --footer-bg: #080412; --orb1-color: rgba(212,168,83,0.12); --orb2-color: rgba(154,74,196,0.12); --orb3-color: rgba(196,90,138,0.08); --orb4-color: rgba(106,90,205,0.10); --bg-base: linear-gradient(170deg, #12091E 0%, #16102A 40%, #120E24 100%); --grid-line: rgba(212,168,83,0.04); --ring-color: rgba(212,168,83,0.14); --hero-card-bg: rgba(255,255,255,0.04); --hero-card-border: rgba(212,168,83,0.14); --input-bg: rgba(255,255,255,0.05); --input-border: rgba(212,168,83,0.15); --input-focus-border: rgba(212,168,83,0.45); --input-text: #F5F0FF; --stat-bg: rgba(255,255,255,0.04); --stat-hover: rgba(255,255,255,0.08); --stat-border: rgba(212,168,83,0.12); --card-bg: rgba(255,255,255,0.04); --card-hover: rgba(255,255,255,0.09); --card-border: rgba(212,168,83,0.10); --card-hover-border: rgba(212,168,83,0.28); --pill-bg: rgba(255,255,255,0.07); --pill-text: rgba(245,240,255,0.65); --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; --r-pill: 100px; } /* ── THEME 5: IAGT Classic (matches iagtok.com — white + medium blue + saffron) ── */ [data-theme="classic"] { /* Backgrounds — pure white like the real site */ --ink: #FFFFFF; --ink-mid: #F5F7FC; --ink-soft: #EEF1F9; /* Primary accent: Indian saffron/orange */ --gold: #D4580A; --gold-light: #E8720E; --gold-pale: rgba(212,88,10,0.08); --gold-glow: rgba(212,88,10,0.18); /* Secondary: Medium blue (like the real nav links) */ --ember: #3A5FA8; --blush: #2B4B9E; --teal: #138808; /* India flag green */ --cream: #FFFFFF; --white: #FFFFFF; /* Glass — barely-there on white */ --glass-1: rgba(245,247,252,0.70); --glass-2: rgba(245,247,252,0.88); --glass-3: rgba(255,255,255,0.94); --glass-4: rgba(255,255,255,0.99); --glass-border-1: rgba(58,95,168,0.10); --glass-border-2: rgba(58,95,168,0.16); --glass-border-3: rgba(58,95,168,0.24); /* Shadows — very soft, barely visible */ --shadow-sm: 0 2px 12px rgba(58,95,168,0.07); --shadow-md: 0 8px 32px rgba(58,95,168,0.10); --shadow-lg: 0 20px 60px rgba(58,95,168,0.13); --glow-gold: 0 0 32px rgba(212,88,10,0.15); --glow-ember: 0 0 32px rgba(58,95,168,0.15); /* Text — dark charcoal, like the real site */ --text-primary: #1A1A2E; --text-secondary: rgba(26,26,46,0.60); --text-muted: rgba(26,26,46,0.40); /* Nav — light white/grey bar like the real site, with blue links */ --nav-bg: rgba(255,255,255,0.92); --nav-bg-scroll: rgba(255,255,255,0.98); --nav-border: rgba(58,95,168,0.10); --nav-link-color: #3A5FA8; /* Footer — medium blue, not too dark */ --footer-bg: #2B4B9E; /* Ambient orbs — tricolor, very subtle */ --orb1-color: rgba(212,88,10,0.06); --orb2-color: rgba(19,136,8,0.04); --orb3-color: rgba(58,95,168,0.05); --orb4-color: rgba(212,88,10,0.03); /* Background — pure white, no tint */ --bg-base: linear-gradient(170deg, #FFFFFF 0%, #F8FAFF 50%, #F4F6FC 100%); --grid-line: rgba(58,95,168,0.04); --ring-color: rgba(212,88,10,0.12); /* Hero card — clean white glass */ --hero-card-bg: rgba(255,255,255,0.82); --hero-card-border: rgba(58,95,168,0.12); /* Inputs */ --input-bg: #FAFBFF; --input-border: rgba(58,95,168,0.18); --input-focus-border: rgba(212,88,10,0.40); --input-text: #1A1A2E; /* Stats */ --stat-bg: rgba(245,247,252,0.90); --stat-hover: rgba(255,255,255,1.00); --stat-border:rgba(58,95,168,0.09); /* Cards */ --card-bg: rgba(248,250,255,0.90); --card-hover: rgba(255,255,255,1.00); --card-border: rgba(58,95,168,0.09); --card-hover-border: rgba(212,88,10,0.25); /* Pills */ --pill-bg: rgba(58,95,168,0.07); --pill-text: rgba(26,26,46,0.65); --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; --r-pill: 100px; } /* Classic theme — nav links are blue on light nav (matching real site) */ [data-theme="classic"] .nav-links a { color: #3A5FA8; font-weight: 500; } [data-theme="classic"] .nav-links a:hover, [data-theme="classic"] .nav-links a.active { color: #D4580A; background: rgba(212,88,10,0.06); } [data-theme="classic"] .nav-logo-text { color: #1A1A2E; } [data-theme="classic"] .nav-cta { background: linear-gradient(135deg, #D4580A, #3A5FA8) !important; color: #fff !important; } /* Classic — gradient uses saffron + blue */ [data-theme="classic"] .btn-primary { background: linear-gradient(135deg, #D4580A 0%, #3A5FA8 100%); box-shadow: 0 4px 20px rgba(212,88,10,0.22); } /* Classic — stat numbers: saffron to blue */ [data-theme="classic"] .stat-num { background: linear-gradient(135deg, #D4580A, #3A5FA8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Classic — gold-text gradient */ [data-theme="classic"] .gold-text { background: linear-gradient(135deg, #D4580A, #3A5FA8); -webkit-background-clip: text; background-clip: text; } /* Classic — eyebrow uses saffron */ [data-theme="classic"] .eyebrow { color: #D4580A; } /* Classic — hamburger bars stay dark for readability on light nav */ [data-theme="classic"] .hamburger span { background: #3A5FA8; } /* Classic — mobile nav dropdown: white with blue links */ @media (max-width: 960px) { [data-theme="classic"] .nav-links { background: rgba(255,255,255,0.98); border-bottom: 1px solid rgba(58,95,168,0.12); } [data-theme="classic"] .nav-links a { color: #3A5FA8; } [data-theme="classic"] .nav-links a:hover { background: rgba(58,95,168,0.07); color: #D4580A; } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--ink); color: var(--text-primary); overflow-x: hidden; min-height: 100vh; } /* ── NOISE TEXTURE OVERLAY ── */ body::after { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E"); opacity: 0.035; pointer-events: none; z-index: 9999; } /* ── PAGES ── */ main { min-height: 100vh; position: relative; padding-top: 72px; } /* ═══════════════ BACKGROUND SYSTEM ═══════════════ */ .bg-scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .bg-gradient { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 15% 20%, var(--orb1-color) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 88% 15%, var(--orb2-color) 0%, transparent 50%), radial-gradient(ellipse 50% 70% at 80% 90%, var(--orb3-color) 0%, transparent 55%), radial-gradient(ellipse 40% 40% at 50% 55%, var(--orb4-color) 0%, transparent 50%), var(--bg-base); } .orb { position: absolute; border-radius: 50%; filter: blur(80px); will-change: transform; } .orb-1 { width:600px;height:600px;background:var(--orb1-color);top:-200px;right:-150px;animation:drift1 20s ease-in-out infinite alternate; } .orb-2 { width:500px;height:500px;background:var(--orb2-color);bottom:-100px;left:-150px;animation:drift2 25s ease-in-out infinite alternate; } .orb-3 { width:350px;height:350px;background:var(--orb3-color);top:30%;right:15%;animation:drift3 18s ease-in-out infinite alternate; } .orb-4 { width:250px;height:250px;background:var(--orb4-color);top:60%;left:20%;animation:drift4 22s ease-in-out infinite alternate; } @keyframes drift1 { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(-40px,60px) scale(1.12)} } @keyframes drift2 { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(50px,-40px) scale(1.08)} } @keyframes drift3 { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(-30px,40px) scale(1.15)} } @keyframes drift4 { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(35px,-30px) scale(0.92)} } /* Grid lines */ .bg-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 60px 60px; } /* ═══════════════ NAVBAR ═══════════════ */ nav { position: fixed; top: 0; left: 0; right: 0; height: 72px; z-index: 1000; padding: 0 48px; display: flex; align-items: center; justify-content: space-between; backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); background: var(--nav-bg); border-bottom: 1px solid var(--nav-border); transition: all 0.4s ease; } nav.scrolled { background: var(--nav-bg-scroll); border-bottom-color: var(--nav-border); box-shadow: 0 1px 0 rgba(184,119,42,0.06), 0 4px 24px rgba(100,60,20,0.08); } .nav-logo { display:flex;align-items:center;gap:12px;cursor:pointer;text-decoration:none; } .nav-logo-mark { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--gold) 0%, var(--ember) 100%); display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 4px 16px rgba(212,168,83,0.35), inset 0 1px 0 rgba(255,255,255,0.2); position: relative; overflow: hidden; } .nav-logo-mark::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%); } .nav-logo-text { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--text-primary); letter-spacing: 0.02em; } .nav-logo-text em { font-style: normal; color: var(--gold); } .nav-links { display:flex;align-items:center;gap:4px;list-style:none; } .nav-links a { text-decoration: none; color: var(--text-secondary); font-size: 0.875rem; font-weight: 500; padding: 8px 14px; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; letter-spacing: 0.01em; } .nav-links a:hover, .nav-links a.active { color: var(--text-primary); background: rgba(184,119,42,0.08); } .nav-cta-pill { background: linear-gradient(135deg, var(--gold), var(--ember)) !important; color: #fff !important; font-weight: 600 !important; padding: 9px 22px !important; border-radius: var(--r-pill) !important; box-shadow: 0 4px 20px rgba(184,119,42,0.30), inset 0 1px 0 rgba(255,255,255,0.2) !important; } .nav-cta-pill:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(184,119,42,0.40) !important; } .hamburger { display:none;flex-direction:column;gap:5px;cursor:pointer; } .hamburger span { display:block;width:24px;height:2px;background:var(--text-primary);border-radius:2px;transition:0.3s; } /* ═══════════════ GLASS CARDS ═══════════════ */ .glass { backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); background: var(--glass-2); border: 1px solid var(--glass-border-2); border-radius: var(--r-lg); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.7); position: relative; overflow: hidden; } .glass::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent); } .glass-deep { backdrop-filter: blur(32px) saturate(200%); -webkit-backdrop-filter: blur(32px) saturate(200%); background: rgba(255,255,255,0.68); border: 1px solid var(--glass-border-3); border-radius: var(--r-xl); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.9); position: relative; overflow: hidden; } .glass-deep::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,1), transparent); } /* ═══════════════ 3D TILT SYSTEM ═══════════════ */ .tilt-card { transition: transform 0.15s ease, box-shadow 0.15s ease; transform-style: preserve-3d; perspective: 800px; will-change: transform; } /* ═══════════════ TYPOGRAPHY ═══════════════ */ h1, h2, h3 { font-family: var(--font-display); line-height: 1.1; } h1 { font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 900; color: var(--text-primary); } h2 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; color: var(--text-primary); } h3 { font-size: 1.5rem; font-weight: 600; color: var(--text-primary); } p { font-size: 1rem; line-height: 1.75; color: var(--text-secondary); } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; } .eyebrow::before, .eyebrow::after { content: ''; display: block; width: 20px; height: 1px; background: var(--gold); opacity: 0.5; } .gold-text { background: linear-gradient(135deg, var(--gold), var(--ember)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ═══════════════ BUTTONS ═══════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 32px; border-radius: var(--r-pill); font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; text-decoration: none; cursor: pointer; border: none; letter-spacing: 0.02em; transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1); position: relative; overflow: hidden; white-space: nowrap; } .btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%); border-radius: inherit; opacity: 1; } /* Primary — Radiant gold */ .btn-primary { background: linear-gradient(135deg, var(--gold) 0%, var(--ember) 100%); color: #fff; box-shadow: 0 4px 24px rgba(212,168,83,0.38), 0 1px 0 rgba(255,255,255,0.15) inset; } .btn-primary:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 40px rgba(212,168,83,0.5), 0 1px 0 rgba(255,255,255,0.2) inset; } /* Secondary — frosted light glass */ .btn-secondary { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: var(--glass-2); color: var(--text-primary); border: 1px solid var(--glass-border-1); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.8); } .btn-secondary:hover { transform: translateY(-3px) scale(1.02); background: rgba(255,255,255,0.85); border-color: rgba(184,119,42,0.35); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.9); } /* Outline — amber border glass */ .btn-outline { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgba(184,119,42,0.07); color: var(--gold); border: 1.5px solid rgba(184,119,42,0.40); box-shadow: 0 0 0 0 rgba(184,119,42,0); } .btn-outline:hover { transform: translateY(-3px) scale(1.02); background: rgba(184,119,42,0.12); border-color: var(--gold); box-shadow: 0 0 24px rgba(184,119,42,0.18), inset 0 1px 0 rgba(255,255,255,0.6); color: var(--ember); } .btn:active { transform: scale(0.98) translateY(0); } /* ═══════════════ SECTION WRAPPER ═══════════════ */ .section { padding: 100px 48px; max-width: 1240px; margin: 0 auto; position: relative; z-index: 1; } .section-sm { padding: 60px 48px; max-width: 1240px; margin: 0 auto; position: relative; z-index: 1; } /* ═══════════════ FADE ANIMATIONS ═══════════════ */ .fade-up { opacity: 0; transform: translateY(32px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); } .fade-up.visible { opacity: 1; transform: translateY(0); } .fade-up.d1 { transition-delay: 0.08s; } .fade-up.d2 { transition-delay: 0.16s; } .fade-up.d3 { transition-delay: 0.24s; } .fade-up.d4 { transition-delay: 0.32s; } .fade-up.d5 { transition-delay: 0.40s; } /* ═══════════════════════════════════════════════ HOME PAGE ═══════════════════════════════════════════════ */ /* ── HERO ── */ .hero { min-height: calc(100vh - 72px); display: flex; align-items: center; justify-content: center; padding: 60px 48px 60px; position: relative; z-index: 1; perspective: 1200px; } .hero-inner { max-width: 860px; text-align: center; position: relative; } /* Floating lotus mandala rings */ .hero-ring { position: absolute; border-radius: 50%; border: 1px solid var(--ring-color); pointer-events: none; animation: ringPulse 6s ease-in-out infinite; } .ring-1 { width:320px;height:320px;top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:0s; } .ring-2 { width:500px;height:500px;top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:1s; } .ring-3 { width:700px;height:700px;top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:2s; } @keyframes ringPulse { 0%,100% { opacity:0.4; transform:translate(-50%,-50%) scale(1); } 50% { opacity:0.15; transform:translate(-50%,-50%) scale(1.04); } } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; border-radius: var(--r-pill); background: var(--glass-2); border: 1px solid var(--glass-border-2); backdrop-filter: blur(12px); font-size: 0.78rem; font-weight: 600; color: var(--gold); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 32px; box-shadow: 0 2px 12px rgba(100,60,20,0.08), inset 0 1px 0 rgba(255,255,255,0.9); } .hero-badge-dot { width:6px;height:6px;border-radius:50%;background:var(--gold);animation:pulse 2s infinite; } @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.3)} } .hero-title { margin-bottom: 24px; letter-spacing: -0.02em; } .hero-sub { font-family: var(--font-display); font-size: clamp(1.1rem,2vw,1.4rem); font-style: italic; color: var(--gold); margin-bottom: 28px; font-weight: 400; } .hero-desc { font-size: 1.1rem; line-height: 1.8; color: var(--text-secondary); margin-bottom: 48px; max-width: 560px; margin-left: auto; margin-right: auto; } .hero-btns { display:flex;gap:16px;justify-content:center;flex-wrap:wrap; } /* 3D hero card */ .hero-card-3d { padding: 64px 56px; background: var(--hero-card-bg); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border: 1px solid var(--hero-card-border); border-radius: 28px; box-shadow: 0 0 0 1px rgba(184,119,42,0.08), 0 30px 100px rgba(100,60,20,0.14), inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -1px 0 rgba(184,119,42,0.06); transform: perspective(1000px) rotateX(2deg); transition: transform 0.5s ease; position: relative; z-index: 2; } .hero-card-3d:hover { transform: perspective(1000px) rotateX(0deg) translateY(-4px); } /* Gold line accent */ .hero-gold-line { width: 80px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin: 0 auto 28px; } /* ── STATS STRIP ── */ .stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--glass-border-1); border: 1px solid var(--stat-border); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 80px; } .stat-item { padding: 32px 24px; text-align: center; background: var(--stat-bg); backdrop-filter: blur(16px); transition: background 0.25s; } .stat-item:hover { background: var(--stat-hover); } .stat-num { font-family: var(--font-display); font-size: 2.6rem; font-weight: 900; background: linear-gradient(135deg, var(--gold), var(--ember)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; margin-bottom: 8px; } .stat-label { font-size: 0.82rem; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; } /* ── MISSION ── */ .mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; } .mission-text { padding: 52px; } .mission-text p { margin-bottom: 20px; } .mission-visual { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; perspective: 600px; } .mission-orb-card { width: 85%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(ellipse at 35% 35%, rgba(212,168,83,0.3), rgba(232,108,58,0.15), rgba(58,188,180,0.08)); border: 1px solid rgba(212,168,83,0.2); display: flex; align-items: center; justify-content: center; font-size: 5rem; box-shadow: 0 0 80px rgba(212,168,83,0.12), inset 0 0 60px rgba(212,168,83,0.05); animation: floatOrb 7s ease-in-out infinite; position: relative; } @keyframes floatOrb { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-16px) rotate(5deg)} } .mission-orb-ring { position: absolute; width: 110%; aspect-ratio: 1; border-radius: 50%; border: 1px dashed rgba(212,168,83,0.15); animation: ringRotate 20s linear infinite; } @keyframes ringRotate { to { transform: rotate(360deg); } } /* ── EVENTS CAROUSEL ── */ .events-shell { background: var(--glass-1); border: 1px solid var(--glass-border-1); border-radius: var(--r-xl); padding: 48px 0 32px; overflow: hidden; position: relative; } .events-shell-header { padding: 0 48px 32px; } .carousel-track-wrap { overflow-x: auto; padding: 8px 48px 16px; scrollbar-width: thin; scrollbar-color: rgba(212,168,83,0.2) transparent; } .carousel-track { display:flex;gap:20px;width:max-content; } .evt-card { width: 290px; padding: 28px; flex-shrink: 0; border-radius: var(--r-lg); background: var(--card-bg); border: 1px solid var(--card-border); backdrop-filter: blur(16px); cursor: pointer; transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1); position: relative; overflow: hidden; } .evt-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent); } .evt-card:hover { transform: translateY(-8px) scale(1.02); background: rgba(255,255,255,0.82); box-shadow: var(--shadow-lg), var(--glow-gold); border-color: rgba(184,119,42,0.28); } .evt-thumb { width: 100%; aspect-ratio: 16/9; border-radius: var(--r-sm); background: linear-gradient(135deg, rgba(212,168,83,0.18), rgba(58,188,180,0.10)); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; margin-bottom: 20px; position: relative; overflow: hidden; } .evt-thumb::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(212,168,83,0.04) 0,rgba(212,168,83,0.04) 1px, transparent 1px, transparent 14px); } .evt-date { font-size: 0.72rem; font-weight: 700; color: var(--gold); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 8px; } .evt-title { font-family: var(--font-display); font-size:1.2rem; font-weight:700; color:var(--text-primary); margin-bottom:8px; line-height:1.3; } .evt-loc { font-size: 0.84rem; color: var(--text-muted); margin-bottom: 20px; } .carr-controls { display:flex;gap:10px;justify-content:center;margin-top:24px;padding:0 48px; } .carr-btn { width: 42px; height: 42px; border-radius: 50%; background: var(--glass-2); border: 1px solid var(--glass-border-1); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--text-primary); backdrop-filter: blur(12px); transition: all 0.25s ease; } .carr-btn:hover { background: var(--gold); color: #fff; border-color: var(--gold); box-shadow: 0 0 20px rgba(184,119,42,0.3); } /* ── ANNUAL GRID ── */ .annual-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:48px; } .ann-card { padding: 36px 24px; text-align: center; border-radius: var(--r-lg); background: var(--card-bg); border: 1px solid var(--card-border); backdrop-filter: blur(16px); cursor: pointer; transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1); position: relative; overflow: hidden; } .ann-card::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--gold), var(--ember)); transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease; } .ann-card:hover { transform: translateY(-8px); background: var(--card-hover); border-color: var(--card-hover-border); box-shadow: var(--shadow-md), var(--glow-gold); } .ann-card:hover::before { transform: scaleX(1); } .ann-icon { font-size: 2.6rem; margin-bottom: 16px; filter: drop-shadow(0 4px 12px rgba(184,119,42,0.25)); } .ann-name { font-family: var(--font-display); font-size:1.15rem; font-weight:700; color:var(--text-primary); margin-bottom:8px; } .ann-desc { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; } /* ── SPONSORS CAROUSEL ── */ .sponsor-shell { border-radius: var(--r-xl); background: var(--glass-1); border: 1px solid var(--glass-border-1); padding: 48px 0 40px; overflow: hidden; } .sponsor-shell-header { padding: 0 48px 36px; text-align: center; } .sponsor-row { margin-bottom: 28px; } .sponsor-row-label { display: flex; align-items: center; gap: 16px; padding: 0 48px; margin-bottom: 14px; } .sponsor-row-line { flex:1;height:1px;background:rgba(184,119,42,0.12); } .sponsor-row-label span { font-size:0.68rem;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;white-space:nowrap; } .tier-plat-label { color: rgba(100,90,80,0.70); } .tier-gold-label { color: var(--gold); } .tier-silv-label { color: rgba(90,90,85,0.65); } .scroll-fade-mask { overflow: hidden; mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); } .inf-track { display: flex; gap: 14px; width: max-content; animation: infiniteScroll 28s linear infinite; } .inf-track.reverse { animation-direction: reverse; animation-duration: 32s; } .inf-track.slow { animation-duration: 22s; } .inf-track:hover { animation-play-state: paused; } @keyframes infiniteScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} } .spon-pill { display: flex; align-items: center; gap: 10px; padding: 0 24px; height: 60px; border-radius: var(--r-pill); background: var(--pill-bg); border: 1px solid var(--glass-border-1); backdrop-filter: blur(12px); font-size: 0.9rem; font-weight: 600; color: var(--pill-text); white-space: nowrap; flex-shrink: 0; cursor: default; transition: all 0.3s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 8px rgba(100,60,20,0.06); } .spon-pill:hover { background: var(--glass-4); color: var(--text-primary); border-color: rgba(184,119,42,0.28); transform: translateY(-2px); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,1); } .spon-pill.plat { border-color: rgba(160,150,140,0.20); } .spon-pill.gold { border-color: rgba(184,119,42,0.22); } .spon-pill.silv { border-color: rgba(150,150,145,0.18); } /* ── MEMBERSHIP CTA ── */ .cta-block { text-align: center; padding: 80px 60px; position: relative; overflow: hidden; } .cta-block::before { content: ''; position: absolute; top: 50%; left: 50%; width: 500px; height: 500px; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(184,119,42,0.06), transparent 70%); pointer-events: none; } .cta-block h2 { margin-bottom: 20px; } .cta-block p { margin-bottom: 40px; max-width: 480px; margin-left: auto; margin-right: auto; } /* ═══════════════════════════════════════════════ PAGE HERO (inner pages) ═══════════════════════════════════════════════ */ .page-hero { padding: 80px 48px 56px; text-align: center; position: relative; overflow: hidden; z-index: 1; } .page-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(212,168,83,0.2), transparent); } .page-hero-glow { position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(ellipse, rgba(184,119,42,0.10), transparent 70%); top: -100px; left: 50%; transform: translateX(-50%); pointer-events: none; } .page-hero h1 { margin-bottom: 16px; } .page-hero p { max-width: 520px; margin: 0 auto; } /* ═══════════════════════════════════════════════ ABOUT PAGE ═══════════════════════════════════════════════ */ .board-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:32px; } .board-card { padding: 32px 20px; text-align: center; border-radius: var(--r-md); background: var(--card-bg); border: 1px solid var(--card-border); backdrop-filter: blur(16px); transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1); position: relative; overflow: hidden; } .board-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--gold), var(--ember)); transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease; } .board-card:hover { transform: translateY(-6px); background: var(--card-hover); border-color: var(--card-hover-border); } .board-card:hover::before { transform: scaleX(1); } .board-avatar { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, rgba(184,119,42,0.12), rgba(196,80,30,0.08)); border: 1px solid rgba(184,119,42,0.18); margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; } .board-name { font-family: var(--font-display);font-size:1rem;font-weight:700;color:var(--text-primary);margin-bottom:5px; } .board-role { font-size:0.76rem;color:var(--gold);font-weight:600;letter-spacing:0.06em;text-transform:uppercase; } /* ═══════════════════════════════════════════════ MEMBERSHIP PAGE ═══════════════════════════════════════════════ */ .pricing-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:20px;margin-top:48px;padding-top:16px; } .price-card { padding: 40px 28px; text-align: center; border-radius: var(--r-lg); background: var(--card-bg); border: 1px solid var(--card-border); backdrop-filter: blur(16px); transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1); position: relative; overflow: visible; } .price-card.featured { background: linear-gradient(160deg, rgba(255,248,235,0.85), rgba(255,240,225,0.75)); border-color: rgba(184,119,42,0.28); box-shadow: 0 0 0 1px rgba(184,119,42,0.10), var(--shadow-md), var(--glow-gold); } .price-card:hover { transform: translateY(-10px) rotateX(2deg); background: var(--card-hover); box-shadow: var(--shadow-lg), var(--glow-gold); } .price-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--gold), var(--ember)); color: #fff; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 16px; border-radius: var(--r-pill); white-space: nowrap; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .price-type { font-size:0.7rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);margin-bottom:10px; } .price-name { font-family: var(--font-display);font-size:1.4rem;font-weight:800;color:var(--text-primary);margin-bottom:20px; } .price-amount { font-family: var(--font-display);font-size:2.8rem;font-weight:900;color:var(--text-primary);line-height:1; } .price-amount span { font-size:1rem;font-family: var(--font-body);color:var(--text-muted);font-weight:400; } .price-divider { height:1px;background:rgba(184,119,42,0.12);margin:24px 0; } /* Benefits list */ .benefits-list { list-style:none;margin-top:32px; } .benefits-list li { padding: 12px 0; border-bottom: 1px solid rgba(184,119,42,0.10); font-size: 0.93rem; color: var(--text-secondary); display: flex; align-items: center; gap: 12px; } .benefits-list li::before { content:'◆';color:var(--gold);font-size:0.5rem;flex-shrink:0; } /* ═══════════════════════════════════════════════ SPONSORSHIP PAGE ═══════════════════════════════════════════════ */ .spon-tier-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-top:48px; } .spon-tier-card { padding: 44px 32px; border-radius: var(--r-lg); background: var(--card-bg); border: 1px solid var(--card-border); backdrop-filter: blur(16px); transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1); position: relative; overflow: hidden; } .spon-tier-card:hover { transform: translateY(-8px); background: var(--card-hover); } .spon-tier-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; opacity: 0; transition: opacity 0.35s ease; } .spon-tier-card:hover::after { opacity: 1; } .spon-tier-card.plat::after { background: linear-gradient(90deg, #C0C0C0, #E8E8E8, #C0C0C0); } .spon-tier-card.gold::after { background: linear-gradient(90deg, var(--gold), var(--ember)); } .spon-tier-card.silv::after { background: linear-gradient(90deg, #AAA, #DDD, #AAA); } .spon-tier-card.brnz::after { background: linear-gradient(90deg, #CD7F32, #E8A96A, #CD7F32); } .tier-chip { display: inline-block; padding: 5px 14px; border-radius: var(--r-pill); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 20px; } .chip-plat { background: rgba(192,192,192,0.12); color: #C0BDB8; border: 1px solid rgba(192,192,192,0.25); } .chip-gold { background: rgba(212,168,83,0.12); color: var(--gold-light); border: 1px solid rgba(212,168,83,0.3); } .chip-silv { background: rgba(170,170,165,0.12); color: #AAAA9F; border: 1px solid rgba(170,170,165,0.25); } .chip-brnz { background: rgba(205,127,50,0.12); color: #D4956E; border: 1px solid rgba(205,127,50,0.25); } .tier-price { font-family: var(--font-display);font-size:2rem;font-weight:900;color:var(--text-primary);margin-bottom:20px; } .tier-benefit { font-size: 0.875rem; color: var(--text-secondary); padding: 8px 0; border-bottom: 1px solid rgba(184,119,42,0.10); display: flex; gap: 10px; align-items: flex-start; } .tier-benefit::before { content: '✦'; color: var(--gold); font-size: 0.55rem; margin-top: 5px; flex-shrink: 0; } /* ═══════════════════════════════════════════════ EVENTS PAGE ═══════════════════════════════════════════════ */ .featured-evt { display: grid; grid-template-columns: 1fr 1.1fr; gap: 0; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--glass-border-2); backdrop-filter: blur(20px); background: var(--glass-2); margin-bottom: 60px; } .featured-evt-thumb { background: linear-gradient(135deg, rgba(212,168,83,0.2), rgba(232,108,58,0.15), rgba(58,188,180,0.08)); display: flex; align-items: center; justify-content: center; font-size: 6rem; position: relative; overflow: hidden; min-height: 320px; } .featured-evt-thumb::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(212,168,83,0.04) 0,rgba(212,168,83,0.04) 1px, transparent 1px, transparent 16px); } .featured-evt-body { padding: 52px; } .free-tag { display: inline-block; background: rgba(58,188,100,0.12); color: #4AE88A; border: 1px solid rgba(58,188,100,0.22); padding: 5px 16px; border-radius: var(--r-pill); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 24px; } .evt-detail-row { display:flex;align-items:center;gap:12px;margin-bottom:14px; } .evt-detail-icon { width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,0.70);border:1px solid rgba(184,119,42,0.15);display:flex;align-items:center;justify-content:center;font-size:0.9rem;flex-shrink:0; } .evt-detail-row span { font-size:0.92rem;color:var(--text-secondary); } .evt-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-bottom:60px; } .evt-grid-card { padding: 32px; border-radius: var(--r-lg); background: var(--card-bg); border: 1px solid var(--card-border); backdrop-filter: blur(16px); transition: all 0.3s ease; } .evt-grid-card:hover { background: var(--card-hover); transform: translateY(-4px); border-color: var(--card-hover-border); } /* ═══════════════════════════════════════════════ BOOTH PAGE ═══════════════════════════════════════════════ */ .booth-fee-grid { display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px; } .booth-fee-card { padding:48px 36px;text-align:center; } .fee-type { font-size:0.72rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-muted);margin-bottom:16px; } .fee-amount { font-family: var(--font-display);font-size:3.5rem;font-weight:900;color:var(--text-primary);line-height:1;margin-bottom:12px; } .fee-amount.free { color: #1A7A42; } .fee-note { font-size:0.88rem;color:var(--text-muted);margin-bottom:32px; } /* ═══════════════════════════════════════════════ CONTACT PAGE ═══════════════════════════════════════════════ */ .contact-grid { display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:start; } .form-card { padding: 52px; } .form-group { margin-bottom: 24px; } label { display:block;font-size:0.8rem;font-weight:600;color:var(--text-secondary);margin-bottom:10px;letter-spacing:0.06em;text-transform:uppercase; } input, textarea { width: 100%; padding: 16px 20px; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--r-sm); font-family: var(--font-body); font-size: 0.95rem; color: var(--input-text); backdrop-filter: blur(12px); transition: all 0.25s ease; outline: none; } input::placeholder, textarea::placeholder { color: var(--text-muted); } input:focus, textarea:focus { border-color: var(--input-focus-border); background: var(--input-bg); box-shadow: 0 0 0 3px rgba(184,119,42,0.06); } textarea { min-height: 140px; resize: vertical; } .contact-info-card { padding: 40px 0; } .info-item { display:flex;gap:16px;margin-bottom:24px;align-items:flex-start; } .info-icon-box { width: 44px; height: 44px; border-radius: 10px; background: rgba(184,119,42,0.09); border: 1px solid rgba(184,119,42,0.16); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; } .info-txt strong { display:block;font-size:0.9rem;font-weight:600;color:var(--text-primary);margin-bottom:2px; } .info-txt span { font-size:0.85rem;color:var(--text-muted); } /* ═══════════════════════════════════════════════ FOOTER — stays dark for contrast anchor ═══════════════════════════════════════════════ */ footer { position: relative; z-index: 1; background: var(--footer-bg); border-top: 1px solid rgba(212,168,83,0.18); padding: 72px 48px 32px; margin-top: 80px; } .footer-grid { max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;margin-bottom:56px; } .footer-brand p { color:rgba(247,243,237,0.40);font-size:0.88rem;margin-top:16px;line-height:1.75; } .footer-col h4 { font-family: var(--font-display);font-size:1.05rem;color:#F7F3ED;margin-bottom:18px;font-weight:700; } .footer-col a { display:block;color:rgba(247,243,237,0.42);font-size:0.87rem;margin-bottom:10px;text-decoration:none;cursor:pointer;transition:color 0.2s; } .footer-col a:hover { color:var(--gold); } .footer-bottom { max-width:1240px;margin:0 auto;padding-top:28px;border-top:1px solid rgba(247,243,237,0.08);display:flex;justify-content:space-between;align-items:center; } .footer-bottom p { color:rgba(247,243,237,0.22);font-size:0.8rem; } .footer-logo { font-family: var(--font-display);font-size:1.2rem;font-weight:800;color:#F7F3ED; } .footer-logo em { font-style:normal;color:var(--gold); } /* ═══════════════ RESPONSIVE ═══════════════ */ /* ═══════════════ THEME SWITCHER ═══════════════ */ .theme-switcher { position: relative; margin-left: 8px; flex-shrink: 0; } .theme-toggle-btn { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r-pill); background: var(--glass-2); border: 1px solid var(--glass-border-2); backdrop-filter: blur(12px); color: var(--text-primary); font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } .theme-toggle-btn:hover { background: var(--glass-3); border-color: var(--glass-border-3); } .theme-icon { font-size: 1rem; line-height: 1; } .theme-label { display: none; } .theme-chevron { opacity: 0.5; font-size: 0.7rem; transition: transform 0.2s ease; } .theme-switcher.open .theme-chevron { transform: rotate(180deg); } .theme-menu { display: none; position: absolute; top: calc(100% + 10px); right: 0; min-width: 200px; background: var(--glass-4); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); border: 1px solid var(--glass-border-2); border-radius: var(--r-lg); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.5); overflow: hidden; z-index: 2000; animation: menuSlide 0.18s cubic-bezier(0.16,1,0.3,1) forwards; } @keyframes menuSlide { from { opacity:0; transform: translateY(-8px) scale(0.97); } to { opacity:1; transform: translateY(0) scale(1); } } .theme-switcher.open .theme-menu { display: block; } .theme-menu-title { padding: 14px 16px 8px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid var(--glass-border-1); margin-bottom: 6px; } .theme-option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px; background: transparent; border: none; cursor: pointer; font-family: var(--font-body); text-align: left; transition: background 0.15s; border-radius: 0; } .theme-option:hover { background: var(--glass-2); } .theme-option.active { background: var(--gold-pale); } .theme-swatch { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; border: 1.5px solid rgba(0,0,0,0.12); box-shadow: 0 2px 6px rgba(0,0,0,0.12); } .theme-option-name { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); display: block; line-height: 1.2; } .theme-option-desc { font-size: 0.72rem; color: var(--text-muted); display: block; } .theme-option-text { display: flex; flex-direction: column; } /* ── Smooth theme transitions ── */ html { transition: background-color 0.35s ease, color 0.35s ease; } /* ════════════════════════════════════════════════════════════ RESPONSIVE — TABLET (max 960px) ════════════════════════════════════════════════════════════ */ @media (max-width: 960px) { /* Nav */ .nav-links { display: none; flex-direction: column; position: absolute; top: 72px; left: 0; right: 0; background: var(--nav-bg-scroll); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); padding: 16px 20px 20px; border-bottom: 1px solid var(--nav-border); gap: 4px; z-index: 999; } .nav-links.open { display: flex; } .nav-links li { width: 100%; } .nav-links a { display: block; width: 100%; padding: 12px 16px; border-radius: 10px; font-size: 1rem; } .nav-cta { margin-top: 8px; text-align: center; padding: 12px 16px !important; } .hamburger { display: flex; } nav { padding: 0 24px; } /* Theme switcher */ .theme-switcher { margin-left: 8px; } .theme-menu { right: 0; min-width: 180px; } /* Sections */ .section { padding: 72px 32px; } .section-sm { padding: 48px 32px; } /* Hero */ .hero { padding: 56px 32px 48px; min-height: auto; } .hero-card-3d { padding: 48px 36px; transform: none !important; } .hero-ring { display: none; } /* Grids → 2 col */ .stats-strip { grid-template-columns: 1fr 1fr; } .mission-grid { grid-template-columns: 1fr; gap: 24px; } .annual-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } .board-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; } .pricing-grid { grid-template-columns: 1fr 1fr; gap: 16px; } .spon-tier-grid{ grid-template-columns: 1fr 1fr; gap: 16px; } .evt-grid { grid-template-columns: 1fr 1fr; gap: 16px; } .booth-fee-grid{ grid-template-columns: 1fr; gap: 16px; } .contact-grid { grid-template-columns: 1fr; gap: 28px; } .featured-evt { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } /* Mission visual hidden on tablet */ .mission-visual { display: none; } /* Page hero */ .page-hero { padding: 56px 32px 40px; } /* Carousel */ .events-shell-header { padding: 0 32px 24px; } .carousel-track-wrap { padding: 8px 32px 16px; } .carr-controls { padding: 0 32px; } /* Sponsor shell */ .sponsor-shell-header { padding: 0 32px 28px; } .sponsor-row-label { padding: 0 32px; } /* Form */ .form-card { padding: 36px 28px; } } /* ════════════════════════════════════════════════════════════ RESPONSIVE — MOBILE (max 640px) ════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { /* Nav */ nav { padding: 0 16px; height: 64px; } main { padding-top: 64px; } .nav-links { top: 64px; padding: 12px 16px 16px; } .nav-logo-text { font-size: 1rem; } .nav-logo-mark { width: 32px; height: 32px; font-size: 15px; } /* Theme switcher */ .theme-menu { right: auto; left: -40px; min-width: 200px; } .theme-toggle-btn { padding: 7px 10px; } /* Sections */ .section { padding: 56px 20px; } .section-sm { padding: 40px 20px; } /* Hero */ .hero { padding: 40px 20px 36px; min-height: calc(100vh - 64px); } .hero-card-3d { padding: 36px 24px; border-radius: 20px; } .hero-gold-line { display: none; } h1 { font-size: clamp(2.2rem, 9vw, 3.2rem); } .hero-sub { font-size: 1rem; } .hero-desc { font-size: 1rem; margin-bottom: 36px; } .hero-btns { flex-direction: column; align-items: stretch; gap: 12px; } .hero-btns .btn { text-align: center; justify-content: center; width: 100%; } .hero-badge { font-size: 0.72rem; padding: 6px 14px; } /* Stats */ .stats-strip { grid-template-columns: 1fr 1fr; gap: 1px; } .stat-num { font-size: 2rem; } .stat-item { padding: 24px 16px; } .stat-label{ font-size: 0.72rem; } /* Typography */ h2 { font-size: clamp(1.7rem, 7vw, 2.4rem); } h3 { font-size: 1.25rem; } p { font-size: 0.95rem; } .eyebrow { font-size: 0.65rem; } /* Grids → single column */ .annual-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .board-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .pricing-grid { grid-template-columns: 1fr; gap: 14px; } .spon-tier-grid{ grid-template-columns: 1fr; gap: 14px; } .evt-grid { grid-template-columns: 1fr; gap: 14px; } .footer-grid { grid-template-columns: 1fr; gap: 28px; } /* Cards — reduce padding */ .ann-card { padding: 24px 16px; } .ann-icon { font-size: 2rem; } .ann-name { font-size: 0.95rem; } .board-card { padding: 24px 14px; } .price-card { padding: 28px 20px; } .spon-tier-card { padding: 28px 20px; } .evt-grid-card { padding: 24px 18px; } .form-card { padding: 28px 20px; } .mission-text { padding: 32px 20px; } /* Buttons */ .btn { padding: 13px 24px; font-size: 0.88rem; } /* Page hero */ .page-hero { padding: 44px 20px 32px; } .page-hero h1 { font-size: clamp(1.8rem, 8vw, 2.4rem); } .page-hero p { font-size: 0.95rem; } /* Carousel */ .events-shell-header { padding: 0 20px 20px; } .carousel-track-wrap { padding: 8px 20px 16px; } .carr-controls { padding: 0 20px; } .evt-card { width: 260px; padding: 22px 18px; } /* Sponsor carousel */ .sponsor-shell-header { padding: 0 20px 24px; } .sponsor-row-label { padding: 0 20px; } /* Booth fees */ .fee-amount { font-size: 2.6rem; } /* Contact info items */ .contact-info-item { padding: 16px 18px; gap: 12px; } .info-icon { width: 40px; height: 40px; font-size: 1rem; flex-shrink: 0; } /* Footer */ .footer-inner { padding: 48px 20px 28px; } .footer-bottom { padding: 20px 20px; flex-direction: column; gap: 8px; text-align: center; } /* Booth grid */ .booth-fee-grid { grid-template-columns: 1fr; } /* Mission */ .mission-visual { display: none; } /* Tilt disabled on mobile (too janky) */ .tilt-card { transform: none !important; } /* Shrink ring animations on mobile */ .ring-1 { width: 220px; height: 220px; } .ring-2 { display: none; } .ring-3 { display: none; } /* Scrollable tables/grids don't overflow */ .scroll-fade-mask { -webkit-mask-image: none; mask-image: none; } } /* ════════════════════════════════════════════════════════════ RESPONSIVE — SMALL MOBILE (max 400px) ════════════════════════════════════════════════════════════ */ @media (max-width: 400px) { .hero-card-3d { padding: 28px 18px; border-radius: 16px; } .annual-grid { grid-template-columns: 1fr; } .board-grid { grid-template-columns: 1fr; } .stats-strip { grid-template-columns: 1fr 1fr; } h1 { font-size: 2rem; } h2 { font-size: 1.6rem; } }