@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@300;400;600;700&display=swap'); :root { /* Sci‑fi purple + neon accent */ --purple: #6c2bd6; /* main purple */ --purple-rgb: 108, 43, 214; --neon: #33fff6; /* cyan neon accent */ --glass: rgba(255, 255, 255, 0.04); --bg-dark: #05020a; --fs-base: clamp(14px, 1.1vw, 18px); --fs-small: clamp(12px, 1vw, 14px); --fs-large: clamp(20px, 3.2vw, 36px); --muted: rgba(255, 255, 255, 0.08); --muted-2: rgba(255, 255, 255, 0.02); --muted-3: rgba(255, 255, 255, 0.01); --muted-hover: rgba(255, 255, 255, 0.03); --muted-border: rgba(255, 255, 255, 0.16); --muted-strong: rgba(255, 255, 255, 0.4); --admin-bg: linear-gradient(180deg, #1a0517 0%, #2d0630 100%); } /* Theme-aware variables and light-theme overrides */ :root { --page-bg: black; --panel-bg: rgba(99, 16, 119, 0.815); --text-main: #eaf6ff; } /* Light theme: applied when `data-theme="light"` on */ html[data-theme="light"] { --page-bg: #ffffff; --panel-bg: rgba(191, 138, 235, 0.815); --text-main: #071028; --muted: rgba(0, 0, 0, 0.06); --muted-2: rgba(0, 0, 0, 0.02); --muted-3: rgba(224, 19, 197, 0.01); --muted-hover: rgba(0, 0, 0, 0.03); --muted-border: rgba(0, 0, 0, 0.12); --muted-strong: rgba(0, 0, 0, 0.28); --admin-bg: var(--panel-bg); --purple-rgb: 131, 55, 255; } /* apply page background via variable so theme toggle can switch */ body { background: var(--page-bg); color: var(--text-main); } /* Profile button + popup menu */ .profile-container { position: relative; display: inline-block; } .profile-btn { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.9), rgba(88, 30, 200, 0.9)); border: 2px solid var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-main); font-weight: 700; font-size: 18px; box-shadow: 0 6px 18px rgba(var(--purple-rgb), 0.12); /* Ensure no margin issues */ margin: 0 10px; } .profile-btn:focus { outline: none; box-shadow: 0 0 18px 6px rgba(var(--purple-rgb), 0.08); } .profile-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; background: linear-gradient(180deg, var(--muted-2), var(--muted-3)); border: 1px solid rgba(var(--purple-rgb), 0.08); color: var(--text-main); padding: 8px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); display: none; z-index: 2000; backdrop-filter: blur(6px); background: linear-gradient(180deg, rgba(var(--purple-rgb), 1), rgba(var(--purple-rgb), 0.5)); } .profile-menu.show { display: block; } .profile-menu a, .profile-menu button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 6px; background: transparent; color: inherit; border: 0; cursor: pointer; text-decoration: none; } .profile-menu a:hover, .profile-menu button:hover { background: var(--muted-hover); } .theme-toggle { display: flex; align-items: center; gap: 8px; } .theme-switch { width: 40px; height: 22px; background: var(--muted); border-radius: 40px; position: relative; cursor: pointer; } .theme-knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-main); transition: transform 180ms ease; } html[data-theme="light"] .theme-knob { transform: translateX(18px); } /* Ensure nav has space for profile */ .ulnav { gap: 14px; } body { background: radial-gradient(circle at 10% 10%, rgba(var(--purple-rgb), 0.06), transparent 10%), var(--page-bg); background-attachment: fixed; color: var(--text-main); margin: 10px; font-size: var(--fs-base); display: flex; flex-direction: column; min-height: 100vh; font-family: 'Orbitron', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; -webkit-font-smoothing: antialiased; } /* General typography scaling */ body, p, li, input, button, select, textarea { line-height: 1.45; } h3 { font-size: clamp(16px, 2vw, 22px); } h4 { font-size: clamp(14px, 1.6vw, 18px); } h5 { font-size: clamp(13px, 1.4vw, 16px); } h1, h2 { text-align: center; font-size: clamp(28px, 5vw, 48px); text-transform: uppercase; font-weight: 600; } div p { font-size: clamp(14px, 1.6vw, 20px); text-transform: uppercase; font-weight: 600; } /*footer stuff*/ footer { background: linear-gradient(180deg, var(--muted-3), var(--panel-bg)); text-align: center; padding: 0; margin-top: auto; /* push footer to bottom when page content is short */ width: 100%; box-sizing: border-box; color: var(--text-main); border-top: 1px solid rgba(var(--purple-rgb), 0.18); } footer div { display: grid; grid-template-columns: auto auto auto; column-gap: 0px; padding: 20px; } @media (max-width: 768px) { footer div { grid-template-columns: 1fr; gap: 20px; } } footer ul { list-style-type: none; } footer img { display: inline; max-width: 32px; /* Fixed size for better visibility */ height: auto; margin: 5px; } @media (max-width: 768px) { footer img { max-width: 40px; /* Even larger on mobile for touch */ } } form { font-size: var(--fs-base); text-align: center; text-transform: uppercase; font-weight: 600; } /*navigation bar div*/ /*navigation bar div - Adidas-like dark bar */ .navdiv { background: linear-gradient(180deg, var(--muted-3), var(--panel-bg)); padding: 10px 20px; width: 100%; box-sizing: border-box; position: -webkit-sticky; /* Safari */ position: sticky; margin: 0; margin-bottom: 2px; top: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(var(--purple-rgb), 0.25); backdrop-filter: blur(6px) saturate(120%); /* Ensure relative positioning for dropdown placement */ position: sticky; top: 0; flex-wrap: wrap; /* Allow items to stack on mobile */ } /* Filter Dropdown Container */ .filter-dropdown { position: absolute; top: 100%; left: 0; width: 100%; background: var(--panel-bg); border-bottom: 1px solid rgba(var(--purple-rgb), 0.25); padding: 10px 20px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); order: 50; /* Ensure it stays after nav links on mobile */ display: flex; gap: 12px; align-items: center; overflow-x: auto; white-space: nowrap; /* Hidden by default */ transform: translateY(-10px); opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 900; } /* Scrollbar styling for dropdown */ .filter-dropdown::-webkit-scrollbar { height: 4px; } .filter-dropdown::-webkit-scrollbar-track { background: rgba(var(--purple-rgb), 0.1); } .filter-dropdown::-webkit-scrollbar-thumb { background: rgba(var(--purple-rgb), 0.5); border-radius: 4px; } /* Open State */ .filter-dropdown.show { transform: translateY(0); opacity: 1; visibility: visible; } @media (max-width: 900px) { .filter-dropdown { position: relative; /* Take up space in the flow */ top: 0; transform: none; max-height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; } .filter-dropdown.show { max-height: 500px; padding-top: 10px; padding-bottom: 15px; border-top: 1px solid rgba(var(--purple-rgb), 0.15); } } /* Bubble Styling */ .filter-item { display: inline-block; padding: 8px 20px; border-radius: 50px; background: rgba(var(--purple-rgb), 0.2); border: 1px solid rgba(var(--purple-rgb), 0.4); color: var(--text-main); text-decoration: none; font-size: clamp(12px, 1vw, 15px); font-weight: 600; text-transform: uppercase; transition: all 0.2s ease; cursor: pointer; flex-shrink: 0; /* Prevent shrinking */ } /* Hover & Active States */ .filter-item:hover, .filter-item.active { background: var(--purple); color: white; border-color: var(--neon); box-shadow: 0 0 10px rgba(var(--purple-rgb), 0.4); transform: translateY(-1px); } /* Mobile: Vertical Alignment */ @media (max-width: 900px) { .filter-dropdown { flex-direction: column; align-items: flex-start; overflow-x: hidden; overflow-y: auto; max-height: 60vh; gap: 8px; } .filter-item { width: 100%; text-align: left; box-sizing: border-box; } } /* Desktop Events Page: Always Visible */ /* Desktop Events Page: Always Visible */ body.events-page .filter-dropdown { @media (min-width: 900px) { transform: translateY(0); opacity: 1; visibility: visible; /* Position kept as absolute (from default) to float below nav. */ } } /* logo in the nav - Default Left (Desktop) */ .nav-logo { position: relative; z-index: 10; margin-right: auto; /* Push others if needed */ } /* Mobile Responsive Logo (Centered) applied in media query below */ .nav-logo img { height: 40px; width: auto; display: block; border-radius: 8px; /* Added rounded corners */ } /* Ensure profile stays on left */ .profile-container { order: 10; margin-left: auto; /* Push to the right, creating space on the left */ margin-right: 0; } .ulnav { list-style-type: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 18px; margin-left: auto; /* push nav to the right when a logo exists */ } /* Accessible focus styles for nav controls */ .nav-toggle:focus, .nav-toggle:focus .hamburger, .nav-search input[type="search"]:focus, li a:focus { outline: none; box-shadow: 0 0 18px 4px rgba(var(--purple-rgb), 0.12), 0 0 6px 2px rgba(51, 255, 246, 0.06); border-radius: 6px; } /* make links keyboard-visible in mobile dropdown too */ .ulnav a:focus { background: var(--muted-hover); color: var(--text-main); } /* nav search (keeps visible) */ .nav-search { display: flex; align-items: center; gap: 6px; margin-left: 0; position: relative; /* Anchor for search results */ } .nav-search input[type="search"] { padding: 6px 16px; border-radius: 50px; border: 0; min-width: 140px; } .nav-search button { background: transparent; border: 0; color: var(--text-main); font-size: clamp(13px, 1.2vw, 16px); cursor: pointer; } /* Search Results Dropdown */ .search-results-dropdown { position: absolute; top: 100%; left: 0; width: 100%; min-width: 200px; background: var(--panel-bg); border: 1px solid rgba(var(--purple-rgb), 0.2); border-radius: 12px; margin-top: 8px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); z-index: 2000; overflow: hidden; max-height: 300px; display: none; /* Hidden by default */ } .search-results-dropdown.show { display: block; } .search-result-item { padding: 12px 16px; display: flex; align-items: center; gap: 12px; color: var(--text-main); text-decoration: none; transition: background 0.2s ease; border-bottom: 1px solid rgba(var(--purple-rgb), 0.1); font-size: 14px; } .search-result-item:last-child { border-bottom: 0; } .search-result-item:hover { background: rgba(var(--purple-rgb), 0.15); } .search-result-item img { width: 32px; height: 32px; object-fit: cover; border-radius: 4px; } .search-result-info { display: flex; flex-direction: column; } .search-result-title { font-weight: 600; } .search-result-meta { font-size: 11px; opacity: 0.7; } /* hamburger button */ .nav-toggle { display: none; /* shown at small widths */ background: transparent; border: 0; cursor: pointer; padding: 8px; margin-left: 8px; } .hamburger { display: block; width: 20px; height: 2px; background: var(--text-main); position: relative; transition: background 180ms ease; } .hamburger::before, .hamburger::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--text-main); transition: transform 200ms ease, top 200ms ease, opacity 200ms ease; } .hamburger::before { top: -6px; } .hamburger::after { top: 6px; } /* Mobile / responsive behavior */ @media (max-width: 900px) { .navdiv { display: grid; grid-template-columns: 1fr auto 1fr; /* Toggle, Logo, Profile */ grid-template-rows: auto auto auto; align-items: center; gap: 0; padding: 10px 15px; } /* Mobile: Logo Centered in middle grid cell */ .nav-logo { grid-column: 2; grid-row: 1; position: relative; left: 0; transform: none; margin: 0; display: flex; justify-content: center; z-index: 10; } .nav-toggle { grid-column: 1; grid-row: 1; justify-self: start; display: inline-block; margin: 0; padding: 8px 0; } .profile-container { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; } .nav-search { display: none; /* Hide internal search on mobile to keep top row clean */ } .ulnav { grid-column: 1 / -1; /* Span full width */ grid-row: 2; display: flex; position: relative; left: 0; top: 0; width: 100%; background: var(--panel-bg); border-top: 1px solid var(--muted-border); padding: 0 20px; flex-direction: column; gap: 8px; z-index: 1001; max-height: 0; opacity: 0; transform: translateY(-8px); overflow: hidden; transition: max-height 260ms ease, opacity 200ms ease, transform 200ms ease; box-sizing: border-box; } .filter-dropdown { grid-column: 1 / -1; /* Span full width */ grid-row: 3; position: relative; top: 0; transform: none; max-height: 0; padding: 0 20px; visibility: hidden; opacity: 0; overflow: hidden; transition: all 0.3s ease; } .navdiv.open .ulnav { max-height: 500px; padding: 12px 20px; opacity: 1; transform: translateY(0); } .filter-dropdown.show { max-height: 500px; padding: 10px 20px 15px; opacity: 1; visibility: visible; border-top: 1px solid rgba(var(--purple-rgb), 0.15); } /* animate hamburger into X when open */ .navdiv.open .hamburger { background: transparent; } .navdiv.open .hamburger::before { transform: rotate(45deg); top: 0; } .navdiv.open .hamburger::after { transform: rotate(-45deg); top: 0; } } @media (max-width: 480px) { .nav-search input[type="search"] { min-width: 90px; } } /*div for body text content*/ .bdydiv { background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.10), rgba(10, 6, 20, 0.04)); border: 1px solid rgba(var(--purple-rgb), 0.12); margin: auto; padding: 18px; max-width: 1500px; top: 0; box-shadow: 0 8px 30px rgba(108, 43, 214, 0.06), inset 0 1px 0 var(--muted-2); border-radius: 12px; color: var(--text-main); backdrop-filter: blur(6px); } /*main div for galleries*/ .galdiv { background: linear-gradient(180deg, rgba(10, 6, 20, 0.02), rgba(var(--purple-rgb), 0.02)); margin: auto 20px; padding: 18px; margin-bottom: 30px; max-width: 100%; top: 0; overflow: visible; display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 18px; border-radius: 12px; border: 1px solid rgba(var(--purple-rgb), 0.08); } /* Event two-column layout: image left 50%, text right */ .event-layout { display: flex; gap: 24px; align-items: flex-start; max-width: 1200px; margin: 24px auto; padding: 12px; } .event-layout .event-img { flex: 0 0 50%; max-width: 50%; } .event-layout .event-img img { width: 100%; height: auto; object-fit: cover; border-radius: 10px; } .event-layout .event-text { flex: 1 1 50%; max-width: 50%; color: var(--text-main); } @media (max-width: 900px) { .event-layout { flex-direction: column; padding: 8px; } .event-layout .event-img, .event-layout .event-text { max-width: 100%; flex: 1 1 100%; } } .galdiv img { padding: clamp(8px, 2%, 18px); width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; display: block; margin: 0 auto; border-radius: 12px; transition: transform 260ms cubic-bezier(.2, .9, .2, 1), box-shadow 260ms ease; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45); } /* .galdiv img:hover { background-color: rgba(0,0,0,0.3); }* /*responsive gallery*/ @media screen and (max-width: 1400px) { .galdiv { max-width: 100%; min-width: 600px; grid-template-columns: auto auto; } .galdiv img { width: clamp(200px, 85%, 350px); min-width: 50px; aspect-ratio: 3/4; object-fit: cover; } #imgdiv img { width: 300px; min-width: 200px; object-fit: cover; } } @media screen and (max-width: 800px) { .galdiv { max-width: 100%; min-width: 300px; grid-template-columns: auto; } .galdiv img { width: clamp(180px, 90%, 300px); min-width: 50px; aspect-ratio: 3/4; object-fit: cover; display: block; margin: auto; } } /*responsive gallery end*/ .evdiv { background: var(--panel-bg); margin: auto 20px; padding: 12px; margin-bottom: 30px; max-width: 100%; top: 0; overflow: auto; box-shadow: 0px 12px 16px 0px rgba(0, 0, 0, 0.5); display: grid; grid-template-columns: auto; column-gap: 0px; } /*navbar lists and anchors*/ li.nav { display: inline-block; } li.nav2 { display: inline-block; } li a { display: inline-block; text-align: center; font-size: clamp(12px, 1.2vw, 16px); text-transform: uppercase; font-weight: 600; padding: 8px 20px; text-decoration: none; color: var(--text-main); /* theme-aware links */ transition: all 200ms ease; border-radius: 50px; border: 1px solid transparent; } .active { background: var(--panel-bg); color: var(--page-bg); border: 1px solid var(--text-main); box-shadow: 0 4px 12px rgba(var(--purple-rgb), 0.3); transform: scale(1.05); } li a:hover:not(.active) { color: var(--text-main); background: var(--muted-hover); border: 1px solid var(--muted-border); transform: scale(1.1); } /*video*/ video { width: 100%; margin-left: auto; margin-right: auto; object-fit: contain; } /*responsive navbar text*/ @media screen and (max-width: 600px) { li a { font-size: var(--fs-small); /*mobile size*/ } /* no extra rules for video here */ } /*individual divs for each img*/ #imgdiv { display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 10px; } #imgdiv h3 { width: 90%; margin: 12px 0 4px 0; font-size: clamp(16px, 2vw, 22px); color: var(--text-main); z-index: 1; } #imgdiv p { width: 90%; margin: 0; font-size: clamp(13px, 1.5vw, 16px); color: var(--text-main); opacity: 0.8; /* Animation - Hidden by default */ max-height: 0; opacity: 0; overflow: hidden; transform: translateY(-10px); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } #imgdiv:hover p { max-height: 150px; /* ample space for text */ opacity: 1; margin-top: 8px; transform: translateY(0); } #imgdiv img { width: clamp(250px, 90%, 400px); min-width: 250px; aspect-ratio: 3/4; object-fit: cover; transition: transform 260ms ease, box-shadow 260ms ease; } #imgdiv img:hover { transform: scale(1.04) translateY(-6px); box-shadow: 0 18px 50px rgba(var(--purple-rgb), 0.18), 0 4px 12px rgba(51, 255, 246, 0.06); } /* Events content: image left, text right (portrait images) */ .evdiv { max-width: 1200px; margin: 24px auto; padding: 0 16px; } .event-item { display: grid; /* Desktop Default: Grid */ grid-template-columns: 1fr auto 1fr; /* Left (1fr) | Image (auto) | Right (1fr) */ gap: 24px; align-items: start; /* Changed from center to start */ background: transparent; border: 2px solid transparent; border-image: linear-gradient(180deg, rgba(var(--purple-rgb), 1), rgba(var(--purple-rgb), 0.1)); border-image-slice: 1; margin: 12px 0; padding: 20px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); } .event-item .ev-poster { width: clamp(200px, 20vw, 300px); /* Adjust image size for center position */ aspect-ratio: 3/4; object-fit: cover; border-radius: 10px; justify-self: center; /* Center in grid cell */ } /* Fix for anchor tags potentially breaking grid/flex layout */ .event-item>a, .hot-card>a, #imgdiv>a { display: contents; } /* Base Text Styles */ .ev-left, .ev-right { display: flex; flex-direction: column; justify-content: flex-start; /* Changed from center to flex-start */ margin-top: 10px; /* Optional: adds a bit of spacing from the very top edge if needed */ } .ev-left { text-align: right; /* Text on left aligns towards image (right) */ padding-right: 10px; } .ev-right { text-align: left; /* Text on right aligns towards image (left) */ padding-left: 10px; } /* Typography */ .ev-title { font-size: clamp(20px, 2.5vw, 28px); font-weight: 700; margin-bottom: 8px; color: var(--text-main); } .ev-date, .ev-time { font-size: 1rem; opacity: 0.9; margin: 4px 0; } .ev-location { font-weight: 600; font-size: 1.1rem; margin-bottom: 8px; } .ev-desc { opacity: 0.8; line-height: 1.5; } /* Mobile Layout */ @media (max-width: 800px) { .event-item { display: flex; flex-direction: column; align-items: center; /* Center everything */ text-align: center; gap: 12px; } /* 1. Poster on Top */ .event-item .ev-poster { order: 1; width: 100%; max-width: 320px; /* Limit max width on mobile */ margin-bottom: 8px; } /* 2. Left Info (Title, Date, Time) below Poster */ .ev-left { order: 2; text-align: center; padding: 0; width: 100%; } /* 3. Right Info (Location) below Left Info */ .ev-right { order: 3; text-align: center; padding: 0; width: 100%; } /* Hide Description on Mobile */ .ev-desc { display: none; } /* Ensure other elements in Right section (Location) are visible */ .ev-location { display: block; } } .evdiv { background: linear-gradient(180deg, rgba(10, 6, 20, 0.02), rgba(var(--purple-rgb), 0.02)); margin: auto 20px; padding: 12px; margin-bottom: 30px; max-width: 100%; top: 0; overflow: auto; display: grid; grid-template-columns: 1fr; } @media screen and (max-width: 800px) { #imgdiv img { width: 300px; min-width: 200px; object-fit: cover; } } .formdiv { background: linear-gradient(135deg, rgba(var(--purple-rgb), 0.5), rgba(43, 10, 60, 0.1)); margin: clamp(20px, 5%, 60px) auto; padding: clamp(24px, 4%, 44px); max-width: clamp(300px, 90%, 1200px); width: 60%; border-radius: 12px; box-shadow: 0 12px 30px rgba(108, 43, 214, 0.06); color: var(--text-main); border: 1px solid rgba(var(--purple-rgb), 0.08); } .contact-form { display: flex; flex-direction: column; gap: clamp(15px, 3%, 25px); } .form-group { display: flex; flex-direction: column; gap: 8px; } .form-group label { font-weight: 600; text-transform: uppercase; font-size: clamp(12px, 2vw, 14px); letter-spacing: 0.5px; color: var(--text-main); } .form-group input, .form-group select, .form-group textarea { padding: clamp(10px, 2%, 16px); border: 2px solid var(--muted-border); border-radius: 6px; background-color: var(--muted); color: var(--text-main); font-size: clamp(13px, 1.5vw, 15px); font-family: inherit; transition: all 0.3s ease; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--muted-2); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--muted-border); background-color: var(--muted-2); box-shadow: 0 0 18px 6px rgba(var(--purple-rgb), 0.08), 0 0 6px 2px rgba(51, 255, 246, 0.06); } .form-group textarea { resize: vertical; min-height: clamp(100px, 20vh, 180px); font-family: inherit; } .form-submit { padding: clamp(12px, 2.5%, 18px); margin-top: 10px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(240, 240, 255, 0.9)); color: var(--purple); border: none; border-radius: 8px; font-weight: 700; font-size: clamp(13px, 1.5vw, 15px); text-transform: uppercase; cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease; box-shadow: 0 8px 30px rgba(var(--purple-rgb), 0.08), 0 2px 6px rgba(51, 255, 246, 0.04); } .form-submit:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 18px 40px rgba(var(--purple-rgb), 0.12), 0 6px 18px rgba(51, 255, 246, 0.06); } .form-submit:active { transform: translateY(0); } @media (max-width: 600px) { .formdiv { margin: 20px auto; padding: 20px 18px; width: 92%; max-width: 520px; box-sizing: border-box; } .contact-form { gap: 15px; } /* Ensure inputs fill the available width on small screens */ .form-group input, .form-group select, .form-group textarea { width: 100%; box-sizing: border-box; } } #Fback { width: 100%; box-sizing: border-box; } /* Image Carousel Banner */ .carousel-container { width: 100%; position: relative; overflow: hidden; background: var(--panel-bg); } .carousel-wrapper { width: 100%; position: relative; height: 75vh; /* 75% of viewport height */ } .carousel-image { width: 50%; /* Start at 15% to be centered (15 + 70 + 15 = 100) */ left: 25%; height: 100%; position: absolute; top: 0; /* Default: Off screen far right to prevent flash */ transform: translateX(200%) scale(0.85); opacity: 0.5; z-index: 0; transition: transform 600ms cubic-bezier(0.25, 1, 0.5, 1), opacity 600ms ease, scale 600ms ease, width 400ms ease, left 400ms ease, border-radius 400ms ease, box-shadow 400ms ease; will-change: transform, opacity; /* Cuboid Look */ border-radius: 24px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); overflow: hidden; /* Ensure image clips to corners */ } /* Explicit Positions for JS Control */ .carousel-pos-center { transform: translateX(0) scale(1); opacity: 1; z-index: 10; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6); /* stronger shadow for center */ } .carousel-pos-left { transform: translateX(-105%) scale(0.85); opacity: 0.6; z-index: 5; /* -100% would touch the edge of the center image. -105% gives a bit of gap/overlap control if width is adjusted */ /* Wait, if width is 70% and left is 15%. Center: left 15%. Left neighbor wants to be visible on the left edge. If we utilize translateX: Center: 0. Left: we want it to sit to the left. If we move it -100% of its own width (70%), it moves 70vw to the left. 15% - 70% = -55%. Visible area is 0-100%. So it will range from -55% to 15%. 15% is visible on the left edge? No. The viewport is 0 to 100%. Image is 70% wide. Center image occupies 15% to 85%. Left gap is 0% to 15%. We want the left image to peek into that 0-15% instructions "last image focused be visible at the edge". If left image is at 15% start. TranslateX(-100%) -> moves it -70 units. New Pos: 15-70 = -55. End Pos: 85-70 = 15. So it occupies -55% to 15%. So exactly 15% of the right side of the Left Image is visible in the 0-15% viewport gap. This is perfect for "visible at the edge". Right neighbor: TranslateX(100%) -> moves it +70 units. New Pos: 15+70=85. End Pos: 85+70=155. It occupies 85% to 155%. Visible area 85% to 100% is 15%. This is perfect. */ transform: translateX(-100%) scale(0.9); } .carousel-pos-right { transform: translateX(100%) scale(0.9); opacity: 0.6; z-index: 5; } .carousel-pos-far-left { transform: translateX(-200%) scale(0.8); opacity: 0; z-index: 0; pointer-events: none; } .carousel-pos-far-right { transform: translateX(200%) scale(0.8); opacity: 0; z-index: 0; pointer-events: none; } /* Active image is centered */ /* .carousel-active and .carousel-exit are deprecated in favor of specific POS classes */ .carousel-image img { width: 100%; height: 100%; object-fit: cover; /* Fill the box to look solid/cuboid */ display: block; } /* Hover Effect: Full Banner on Wide Screens */ @media (min-width: 900px) { /* Slight zoom on center image hover */ .carousel-pos-center:hover { transform: translateX(0) scale(1.05) !important; z-index: 20; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.7); } } .carousel-controls { position: absolute; bottom: 16px; right: 16px; display: flex; gap: 8px; z-index: 10; } .carousel-btn { background: rgba(0, 0, 0, 0.6); border: 1px solid var(--muted-strong); color: var(--text-main); font-size: clamp(12px, 1.2vw, 16px); padding: 8px 12px; border-radius: 4px; cursor: pointer; transition: background 200ms ease; } .carousel-btn:hover { background: rgba(0, 0, 0, 0.8); } .carousel-btn:focus { outline: none; box-shadow: 0 0 18px 6px rgba(var(--purple-rgb), 0.08), 0 0 8px 3px rgba(51, 255, 246, 0.06); } /* Responsive: smaller screens */ @media (max-width: 768px) { .carousel-wrapper { height: 300px; /* portrait-ish on tablet */ } .carousel-controls { right: 12px; bottom: 12px; } } @media (max-width: 480px) { .carousel-wrapper { height: 240px; /* portrait rectangle on mobile */ } .carousel-controls { right: 8px; bottom: 8px; } /* hide back and forward on small screens */ .carousel-back, .carousel-forward { display: none; } .carousel-btn { padding: 6px 10px; font-size: clamp(11px, 2.4vw, 14px); } } /* View Transitions (scoped) */ /* Give the main content a transition name so swaps animate */ .main-content { view-transition-name: main; } /* Old content: fade out and slightly scale down */ ::view-transition-old(main) { animation: vt-fade-out 300ms ease-in forwards; } /* New content: fade in and slightly scale up */ ::view-transition-new(main) { animation: vt-fade-in 300ms ease-out forwards; } @keyframes vt-fade-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-6px) scale(0.99); } } @keyframes vt-fade-in { from { opacity: 0; transform: translateY(6px) scale(1.01); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Fallback for browsers that don't support the pseudo-elements: keep transitions simple */ .main-content { transition: opacity 200ms ease, transform 200ms ease; } /* Admin console layout */ .admin-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; max-width: 1400px; margin: 24px auto; width: calc(100% - 48px); } .admin-sidebar { background: linear-gradient(180deg, var(--panel-bg), var(--muted-3)); color: var(--text-main); padding: 16px; border-radius: 10px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45); position: relative; transition: width 240ms ease, transform 240ms ease, opacity 240ms ease; } .sidebar-toggle { display: inline-block; background: transparent; color: var(--text-main); border: 1px solid var(--muted-border); padding: 6px 10px; border-radius: 6px; cursor: pointer; margin-bottom: 12px; } .sidebar-nav ul { list-style: none; padding: 0; margin: 8px 0; } .sidebar-nav li { margin: 6px 0; } .sidebar-nav a { color: var(--text-main); text-decoration: none; padding: 8px 10px; display: block; border-radius: 6px; } .sidebar-nav a:hover, .sidebar-nav a.active { background: var(--muted-hover); } .admin-main { background: linear-gradient(180deg, var(--muted-3), var(--panel-bg)); padding: 18px; border-radius: 10px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); min-height: 60vh; } .admin-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; } .admin-header h1 { margin: 0; font-size: clamp(20px, 2.4vw, 32px); } .header-actions a { color: var(--text-main); text-decoration: none; } .admin-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; } .card { background: linear-gradient(180deg, rgba(var(--purple-rgb), 0.08), rgba(var(--purple-rgb), 0.5)); padding: 16px; border-radius: 8px; box-shadow: 0 8px 26px rgba(var(--purple-rgb), 0.05), inset 0 -1px 0 var(--muted-2); border: 1px solid rgba(var(--purple-rgb), 0.06); } .card h3 { margin: 0 0 8px 0; font-size: clamp(14px, 1.6vw, 18px); } .card .stat { font-size: clamp(20px, 3.2vw, 36px); font-weight: 700; margin: 6px 0; color: var(--text-main); } .card small.muted { color: var(--muted); } .data-table { width: 100%; border-collapse: collapse; margin-top: 12px; background: rgba(var(--purple-rgb), 0.06); border-radius: 8px; overflow: hidden; } .data-table thead { background: rgba(var(--purple-rgb), 0.08); } .data-table th, .data-table td { padding: 10px 12px; border-bottom: 1px solid var(--muted-2); text-align: left; } .data-table tbody tr { background: linear-gradient(180deg, var(--muted-2), var(--muted-3)); } .data-table tbody tr:nth-child(even) { background: var(--muted-3); } .data-table tbody tr:hover { background: rgba(var(--purple-rgb), 0.06); } .data-table thead th { text-transform: uppercase; font-size: clamp(11px, 1.2vw, 13px); color: var(--text-main); } /* content panels */ .admin-panel-content { animation: none; } /* collapsed sidebar state removed - sidebar is permanently expanded */ /* responsive: stack on small screens */ @media (max-width: 900px) { .admin-layout { grid-template-columns: 1fr; } .admin-sidebar { order: 2; width: 100%; } .admin-main { order: 1; } .admin-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .admin-cards { grid-template-columns: 1fr; } } /* Ticket button (sci-fi neon style) */ .btn-ticket { display: inline-block; margin-top: 1rem; padding: 0.75rem 1.25rem; background: linear-gradient(90deg, rgba(var(--purple-rgb), 0.95), var(--neon)); color: #fff; text-decoration: none; border-radius: 10px; border: 1px solid rgba(var(--purple-rgb), 0.25); box-shadow: 0 6px 18px rgba(var(--purple-rgb), 0.12), 0 0 12px rgba(var(--purple-rgb), 0.12) inset; font-weight: 700; letter-spacing: 0.6px; transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease; } .btn-ticket:hover, .btn-ticket:focus { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(var(--purple-rgb), 0.22), 0 0 28px rgba(var(--purple-rgb), 0.18); outline: none; } .btn-ticket:active { transform: translateY(0); box-shadow: 0 6px 18px rgba(var(--purple-rgb), 0.12); } @media (max-width: 900px) { .btn-ticket { width: 100%; text-align: center; display: block; } } /* Event Page Tabs - Matching Nav Bubbles */ .event-tabs { display: flex; justify-content: center; gap: 16px; margin: 30px auto 20px; flex-wrap: wrap; padding: 0 20px; } .tab-btn { display: inline-block; text-align: center; font-size: clamp(12px, 1.2vw, 16px); text-transform: uppercase; font-weight: 600; padding: 8px 20px; /* Same as nav */ text-decoration: none; color: var(--text-main); background: transparent; transition: all 200ms ease; border-radius: 50px; /* Bubble */ border: 1px solid transparent; cursor: pointer; } .tab-btn:hover:not(.active) { color: var(--text-main); background: var(--muted-hover); border: 1px solid var(--muted-border); transform: scale(1.05); /* Matching nav hover enlargement */ } .tab-btn.active { background: var(--panel-bg); /* Match .active */ color: var(--page-bg); /* Match .active */ border: 1px solid var(--text-main); /* Match .active */ box-shadow: 0 4px 12px rgba(var(--purple-rgb), 0.3); /* Match .active */ transform: scale(1.05); /* Match .active */ } /* Ensure sections animate nicely */ .event-section { display: none; animation: fadeUp 300ms ease-out; } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Hot Events Horizontal Scroller */ .hot-events-scroller { display: flex; gap: 20px; overflow-x: auto; padding: 20px 20px 40px 20px; /* Bottom padding for scrollbar space/shadows */ width: 90%; max-width: 1200px; margin: 0 auto 30px; scroll-behavior: smooth; /* Hide scrollbar for cleaner look if desired, but user asked for scrollability */ scrollbar-width: thin; scrollbar-color: var(--purple) transparent; } .hot-events-scroller::-webkit-scrollbar { height: 8px; } .hot-events-scroller::-webkit-scrollbar-track { background: transparent; } .hot-events-scroller::-webkit-scrollbar-thumb { background-color: var(--purple); border-radius: 20px; } .hot-card { flex: 0 0 auto; width: 200px; height: 280px; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } .hot-card:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 12px 24px rgba(var(--purple-rgb), 0.3); } .hot-card img { width: 100%; height: 100%; object-fit: cover; } /* View More Link (at the end) */ .hot-view-more { flex: 0 0 auto; width: 60px; height: 60px; border-radius: 50%; /* Circle */ align-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(var(--purple-rgb), 0.1); border: 2px solid var(--purple); padding: 0; text-decoration: none; color: var(--text-main); transition: all 0.3s ease; } .hot-view-more span:first-child { display: none; /* Hide text, just show arrow */ } .hot-view-more .arrow { font-size: 20px; } .hot-view-more:hover { background: var(--purple); color: #fff; transform: scale(1.05); } .hot-view-more:hover .arrow { transform: translateX(5px); } /* Date Box Layout */ /* Date Box Layout */ .ev-date-box { display: flex; align-items: center; justify-content: flex-end; /* Ensure content aligns right if box is full width */ margin-left: auto; /* Push to right side */ gap: 12px; /* Slightly reduced gap */ margin-bottom: 8px; color: var(--neon); font-family: 'Orbitron', sans-serif; text-align: right; } .ev-day { font-size: clamp(100px, 13vw, 150px); /* Reduced by ~20% */ font-weight: 700; line-height: 1; color: var(--purple); text-shadow: 0 0 20px rgba(var(--purple-rgb), 0.6); } .ev-month-year { display: flex; flex-direction: column; justify-content: center; line-height: 0.9; align-items: flex-start; /* keep month/year left-aligned relative to each other */ } .ev-month { font-size: clamp(38px, 4vw, 50px); /* Reduced by ~20% */ font-weight: 700; text-transform: uppercase; color: var(--text-main); } .ev-year { font-size: clamp(32px, 3vw, 45px); /* Reduced by ~20% */ font-weight: 400; color: var(--muted-strong); } .ev-title { font-size: clamp(32px, 5vw, 48px); font-weight: 700; margin-bottom: 10px; color: var(--text-main); text-transform: uppercase; text-shadow: 0 0 10px rgba(var(--purple-rgb), 0.3); } @media (max-width: 900px) { .ev-date-box { justify-content: flex-start; margin-left: 0; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; /* Safety */ } .ev-day { font-size: clamp(18px, 4vw, 24px); /* Significantly smaller */ text-shadow: none; } .ev-month-year { flex-direction: row; align-items: baseline; gap: 6px; } .ev-month { font-size: clamp(16px, 3.5vw, 22px); margin-bottom: 0; } .ev-year { font-size: clamp(16px, 3.5vw, 22px); } } /* Footer Styling with Strong Blur */ footer { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); background: rgba(var(--purple-rgb), 0.15); border-top: 1px solid rgba(var(--purple-rgb), 0.3); padding: 40px 20px; margin-top: 60px; position: relative; z-index: 10; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5); } footer div { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 30px; max-width: 1200px; margin: 0 auto; } footer ul { list-style: none; padding: 0; margin: 0; } footer ul li { margin-bottom: 12px; color: var(--text-main); font-size: var(--fs-base); } /* Header items in the lists */ footer ul li:first-child { font-weight: 700; font-size: clamp(18px, 1.5vw, 24px); margin-bottom: 20px; color: var(--text-main); text-shadow: 0 0 10px rgba(var(--purple-rgb), 0.5); text-transform: uppercase; border-bottom: 1px solid rgba(var(--purple-rgb), 0.3); padding-bottom: 5px; display: inline-block; } footer a { text-decoration: none; color: var(--text-main); opacity: 0.8; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px; } footer a:hover { color: var(--neon); opacity: 1; transform: translateX(5px); /* Slide effect */ text-shadow: 0 0 8px var(--neon); } footer img { height: 32px; margin-bottom: 15px; width: 32px; transition: transform 0.3s ease; filter: drop-shadow(0 0 5px rgba(var(--purple-rgb), 0.5)); } footer img:hover { transform: scale(1.2) rotate(5deg); filter: drop-shadow(0 0 10px var(--neon)); } /* Floating Filter Icon - Mobile Only */ .floating-filter-container { display: none; position: fixed; z-index: 9999; touch-action: none; /* Better for dragging on mobile */ } @media (max-width: 900px) { .floating-filter-container { display: block; } } .floating-filter-btn { width: 60px; height: 60px; border-radius: 50%; background: var(--purple); border: 2px solid var(--neon); color: white; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: grab; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 10px rgba(var(--purple-rgb), 0.5); transition: transform 0.2s ease, box-shadow 0.2s ease; user-select: none; } .floating-filter-btn:active { cursor: grabbing; transform: scale(0.95); } .floating-filter-menu { position: absolute; background: var(--panel-bg); backdrop-filter: blur(15px); border: 1px solid rgba(var(--purple-rgb), 0.3); border-radius: 20px; padding: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); min-width: 200px; max-height: 400px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; z-index: 10000; /* Animation base */ opacity: 0; visibility: hidden; transform-origin: center center; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .floating-filter-menu.visible { opacity: 1; visibility: visible; } /* Expansion Directions */ .floating-filter-menu.expand-up-left { transform-origin: bottom right; transform: scale(0); margin-bottom: 70px; right: 0; bottom: 0; } .floating-filter-menu.expand-up-right { transform-origin: bottom left; transform: scale(0); margin-bottom: 70px; left: 0; bottom: 0; } .floating-filter-menu.expand-down-left { transform-origin: top right; transform: scale(0); margin-top: 70px; right: 0; top: 0; } .floating-filter-menu.expand-down-right { transform-origin: top left; transform: scale(0); margin-top: 70px; left: 0; top: 0; } .floating-filter-menu.visible.expand-up-left, .floating-filter-menu.visible.expand-up-right, .floating-filter-menu.visible.expand-down-left, .floating-filter-menu.visible.expand-down-right { transform: scale(1); } /* Scrollbar for the floating menu */ .floating-filter-menu::-webkit-scrollbar { width: 4px; } .floating-filter-menu::-webkit-scrollbar-thumb { background: var(--purple); border-radius: 4px; } .floating-filter-tag { display: block; padding: 10px 15px; border-radius: 50px; background: rgba(var(--purple-rgb), 0.2); border: 1px solid rgba(var(--purple-rgb), 0.4); color: var(--text-main); text-decoration: none; font-size: 14px; font-weight: 600; text-transform: uppercase; transition: all 0.2s ease; text-align: center; } .floating-filter-tag:hover, .floating-filter-tag.active { background: var(--purple); color: white; border-color: var(--neon); }