/* ---------------------- ROOT VARIABLES ---------------------- */
:root {
--primary-color: #0f74bd;
--primary-hover: #095a8f;
--secondary-color: #848484;
--bg-color: #ffffff;
--text-light: #666;
--border-color: #ddd;
--shadow-light: 0 2px 10px rgba(0,0,0,0.05);
--shadow-medium: 0 4px 15px rgba(0,0,0,0.1);
--shadow-dark: 0 6px 20px rgba(0,0,0,0.1);
--font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", sans-serif; --border-radius: 12px;
--transition: 0.3s ease;
}
/* ---------------------- GLOBAL RESET ---------------------- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scrollbar-width: thin;
scrollbar-color: var(--primary-color) #f1f1f1;
}
body {
font-family: var(--font-family);
background-color: var(--bg-color);
color: var(--secondary-color);
line-height: 1.6;
}
/* ---------------------- TYPOGRAPHY ---------------------- */
h1, h2, h3 {
color: var(--primary-color);
margin: 0.5rem 0 1rem;
}
h1 {
font-size: 2rem;
}
p {
color: var(--secondary-color);
}
ul {
list-style: inside disc;
padding-left: 1.2rem;
margin-top: 1rem;
}
.fa {
color: #0f74bd; /* Replace with your desired color, e.g., #007bff, red, or rgba(255, 0, 0, 0.8) */
}
.fa:hover {
color: #666 !important; /* Replace with your desired color, e.g., #007bff, red, or rgba(255, 0, 0, 0.8) */
}
.fa:active {
color: #666 !important; /* Replace with your desired color, e.g., #007bff, red, or rgba(255, 0, 0, 0.8) */
}
/* ---------------------- SCROLLBAR STYLING ---------------------- */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: var(--primary-color);
border-radius: var(--border-radius);
}
::-webkit-scrollbar-thumb:hover {
background: var(--primary-hover);
}
/* ---------------------- BUTTONS & INTERACTIVE ELEMENTS ---------------------- */
button, .button {
cursor: pointer;
border: none;
border-radius: var(--border-radius);
transition: var(--transition);
padding: 0.8rem 2rem;
background: var(--primary-color);
color: #fff;
font-size: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-weight: 500;
}
button:hover, .button:hover {
background: #fff;
color: var(--primary-color);
transform: translateY(-2px);
}
.button.secondary {
background: #fff;
color: var(--primary-color);
border: 1px solid var(--primary-color);
}
.button.secondary:hover {
background: white;
color: #0f74bd;
}
.button.danger {
background: #dc3545;
color: #fff;
}
.button.danger:hover {
background: #a71d2a;
}
#btn-clear{
color: #095a8f !important;
}
/* ---------------------- HEADER & NAVIGATION ---------------------- */
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background-color: #fff;
position: sticky;
top: 0;
z-index: 1000;
transition: background 0.3s ease, transform 0.2s ease;
height: 70px;
}
header.transparent {
background-color: transparent !important;
border-bottom: none;
}
.logo-img {
height: 80px;
width: auto;
display: block;
}
nav {
display: flex;
align-items: center;
gap: 1.5rem;
}
nav a {
text-decoration: none;
color: var(--secondary-color);
font-weight: 500;
transition: var(--transition);
}
nav a:hover {
color: var(--primary-color);
font-weight: 550;
}
/* Hamburger Menu */
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
}
.hamburger span {
width: 25px;
height: 3px;
background: var(--primary-color);
margin: 4px 0;
transition: var(--transition);
}
/* ---------------------- HERO SECTION ---------------------- */
#hero {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
background: url('./images/friends.jpg') no-repeat center center;
background-size: cover;
background-attachment: fixed;
color: #fff !important;
position: relative;
overflow: hidden;
max-width: 100% !important;
}
#hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 0;
}
#hero .hero-content {
position: relative;
z-index: 1;
}
#hero h1 {
font-size: 2.5rem !important;
margin-bottom: 1rem;
opacity: 0;
animation: fadeIn 1s forwards;
}
#hero p {
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0;
animation: fadeIn 1s 0.5s forwards;
color: #fff;
}
.hero-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
/* ---------------------- SEARCH SECTION ---------------------- */
#search {
display: flex;
justify-content: center;
margin: 2rem 0;
gap: 0.5rem;
}
#search input {
padding: 0.7rem 1rem;
width: 300px;
border: 2px solid var(--primary-color);
border-radius: var(--border-radius);
}
#search button {
padding: 0.7rem 1rem;
background: var(--primary-color);
color: #fff;
border-radius: var(--border-radius);
}
/* ---------------------- LAYOUT SECTIONS ---------------------- */
section {
max-width: 1200px;
margin: 2rem auto;
padding: 0 1rem;
}
/* ---------------------- GRID LAYOUTS ---------------------- */
.events-grid,
.categories-grid,
.artists-grid,
.venues-grid,
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.venues-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 30px;
padding: 0 20px;
}
.testimonials-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
/* ---------------------- CARD COMPONENTS ---------------------- */
.event-card,
.category-card,
.venue-card,
.artist,
.testimonial-card,
.stat-card {
background: #fff;
border-radius: var(--border-radius);
transition: var(--transition);
cursor: pointer;
}
.event-card,
.category-card {
padding: 1.5rem;
background: #f7f7f7;
text-align: center;
}
.event-card:hover,
.category-card:hover,
.venue-card:hover,
.artist:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-medium);
}
.category-card:hover {
background-color: #6a11cb;
color: white;
}
/* Event Card Specific */
.event-card {
position: relative;
min-width: 300px;
margin: 10px;
overflow: hidden;
box-shadow: var(--shadow-medium);
}
.event-image {
width: 100%;
height: 250px !important;
object-fit: cover;
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.event-content,
.event-details {
padding: 15px;
}
.event-details h3 {
margin: 0 0 10px;
font-size: 1.2rem;
color: #111;
}
.event-details p {
margin: 5px 0;
font-size: 0.9rem;
color: #555;
}
/* Venue Card */
.venue-card {
overflow: hidden;
box-shadow: var(--shadow-medium);
}
.venue-image {
width: 100%;
height: 150px;
object-fit: cover;
}
.venue-info {
padding: 20px;
}
/* Artist Card */
.artist {
text-align: center;
}
.artist img {
width: 200px !important;
height: 200px !important;
border-radius: 50%;
object-fit: cover;
margin-bottom: 0.5rem;
transition: var(--transition);
}
/* Testimonial Card */
.testimonial-card {
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
padding: 30px;
border: 1px solid rgba(255,255,255,0.2);
}
/* Stat Card */
.stat-card {
padding: 20px;
text-align: center;
box-shadow: var(--shadow-light);
}
.stat-number {
font-size: 2rem;
font-weight: bold;
color: var(--primary-color);
}
.stat-label {
margin-top: 5px;
font-size: 0.9rem;
color: var(--text-light);
}
/* ---------------------- SPECIAL COMPONENTS ---------------------- */
.price-tag {
background-color: #0f74bd;
color: white !important;
padding: 4px 12px;
border-radius: var(--border-radius);
font-size: 0.9em;
margin-top: 8px;
display: inline-block;
}
.urgency-badge {
background: #dc3545;
color: white;
padding: 2px 8px;
border-radius: var(--border-radius);
font-size: 0.8em;
position: absolute;
top: 10px;
right: 10px;
}
.location-icon {
color: var(--text-light);
margin-right: 5px;
}
.stars {
color: #ffc107;
margin-bottom: 15px;
}
/* ---------------------- DASHBOARD LAYOUT ---------------------- */
.dashboard {
display: flex;
flex-wrap: wrap;
margin-top: 1rem;
gap: 1rem;
}
.dashboard-sidebar {
flex: 1 1 220px;
background: #fff;
padding: 1.5rem 1rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow-light);
min-width: 200px;
}
.dashboard-sidebar ul {
list-style: none;
padding: 0;
}
.dashboard-sidebar ul li {
margin-bottom: 1rem;
}
.dashboard-sidebar ul li a {
text-decoration: none;
color: var(--primary-color);
font-weight: 500;
transition: var(--transition);
}
.dashboard-sidebar ul li a:hover {
color: var(--primary-hover);
transform: translateX(5px);
}
.dashboard-content {
flex: 3 1 600px;
min-width: 300px;
padding: 1.5rem;
}
.dashboard-content h2 {
margin-bottom: 1rem;
color: var(--primary-color);
border-bottom: 2px solid var(--primary-color);
display: inline-block;
padding-bottom: 0.3rem;
}
/* Dashboard Grid Components */
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
}
.dashboard-box {
background: var(--primary-color);
color: white;
text-align: center;
padding: 1rem;
border-radius: var(--border-radius);
text-decoration: none;
font-weight: bold;
transition: transform 0.2s, background 0.2s;
}
.dashboard-box:hover {
background: var(--primary-hover);
transform: translateY(-5px);
}
.overview-cards {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 2rem;
}
.overview-cards .card {
background: #fff;
flex: 1 1 150px;
padding: 1rem 1.2rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow-light);
font-weight: 500;
text-align: center;
min-width: 120px;
}
/* ---------------------- FORMS ---------------------- */
#new-event-form,
.auth-container {
background: #fff;
padding: 2rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow-dark);
max-width: 400px;
width: 100%;
text-align: center;
}
#new-event-form {
max-width: 100%;
}
#new-event-form input,
#new-event-form textarea,
#new-event-form select,
.auth-container input {
width: 100%;
padding: 0.8rem 1rem;
margin-bottom: 1rem;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
font-size: 1rem;
}
#new-event-form input:focus,
.auth-container input:focus {
border-color: var(--primary-color);
outline: none;
}
.auth-container h2 {
color: var(--primary-color);
margin-bottom: 1.5rem;
}
.auth-container .auth-links {
margin: 1rem 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.auth-container .auth-links a {
color: var(--primary-color);
font-size: 0.9rem;
text-decoration: none;
}
.auth-container .auth-links a:hover {
text-decoration: underline;
}
.divider {
margin: 1rem 0;
font-size: 0.9rem;
color: #888;
}
/* ---------------------- SPECIAL SECTIONS ---------------------- */
#auth {
display: flex;
justify-content: center;
align-items: center;
min-height: 90vh;
padding: 2rem;
background: #f4f6f8;
}
#cta-sell {
background: var(--primary-color);
color: #fff;
text-align: center;
padding: 3rem 1rem;
border-radius: var(--border-radius);
}
#cta-sell button {
margin-top: 1rem;
}
/* Themed Sections */
.social-proof {
padding: 40px 0;
text-align: center;
}
.social-proof {
text-align: center;
padding: 40px 20px;
background: #f9f9f9;
}
.trust-badges {
display: flex;
justify-content: center;
align-items: stretch;
gap: 20px;
flex-wrap: wrap;
}
.trust-badge {
flex: 1 1 100px;
max-width: 220px;
background: white;
border-radius: var(--border-radius);
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 150px;
}
.trust-badge i {
font-size: 35px !important;
color: #0f74bd;
margin-bottom: 10px;
}
.trust-badge span {
font-weight: bold;
font-size: 16px;
color: #fff !important;
}
.trust-badges {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
flex-wrap: wrap;
margin-top: 20px;
color: #fff !important;
}
.trust-badge {
background: #0f74bd;
padding: 15px 25px;
border-radius: var(--border-radius);
box-shadow: var(--shadow-medium);
display: flex;
align-items: center;
gap: 10px;
color: #fff !important;
}
.trust-badge i {
color: #ffffff !important;
font-size: 1.5em;
}
.testimonials {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 60px 0;
text-align: center;
}
.popular-venues {
padding: 60px 0;
}
.newsletter-signup {
background: linear-gradient(135deg, #2575fc, #6a11cb);
color: white;
padding: 60px 0;
text-align: center;
}
.newsletter-form {
display: flex;
max-width: 500px;
margin: 0 auto;
gap: 10px;
padding: 0 20px;
}
.newsletter-form input {
flex: 1;
padding: 15px;
border: none;
border-radius: var(--border-radius);
font-size: 16px;
}
.newsletter-form button {
padding: 15px 30px;
background: white;
color: #6a11cb;
border: none;
border-radius: var(--border-radius);
font-weight: bold;
cursor: pointer;
transition: transform 0.2s ease;
}
.newsletter-form button:hover {
transform: scale(1.05);
}
.stats {
background: #1a1a1a;
color: white;
padding: 40px 0;
text-align: center;
}
.mobile-app-cta {
background: #141a20;
padding: 50px 0;
text-align: center;
align-items: center;
align-self: center;
align-content: center;
margin: auto!important;
}
.hero-buttons{
align-items: center !important;
align-self: center !important;
align-content: center !;
margin: auto!important;
}
.app-buttons {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
flex-wrap: wrap;
}
.app-button {
background: #000;
color: white;
padding: 12px 25px;
border-radius: var(--border-radius);
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
font-weight: bold;
transition: background 0.3s ease;
}
.app-button:hover {
background: #333;
}
/* ---------------------- CAROUSEL ---------------------- */
.carousel {
position: relative;
max-width: 1000px;
margin: 0 auto;
overflow: hidden;
border-radius: var(--border-radius);
}
.carousel-track {
display: flex;
transition: transform 0.5s ease-in-out;
}
.carousel-btn {
background: var(--primary-color);
color: #fff;
padding: 0.6rem 1.2rem;
border: none;
border-radius: var(--border-radius);
font-size: 1rem;
cursor: pointer;
transition: var(--transition);
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
}
.carousel-btn.left {
left: 10px;
}
.carousel-btn.right {
right: 10px;
}
/* ---------------------- CATEGORIES ---------------------- */
.categories {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 20px 0;
}
.category {
background: #fff;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
padding: 10px 20px;
margin: 10px;
cursor: pointer;
transition: var(--transition);
}
.category:hover {
background: #111;
color: #fff;
}
/* ---------------------- SPECIALTY COMPONENTS ---------------------- */
#seat-map {
display: grid;
grid-template-columns: repeat(10, 40px);
gap: 5px;
margin-top: 1rem;
}
.seat {
width: 40px;
height: 40px;
background: #eee;
border-radius: var(--border-radius);
text-align: center;
line-height: 40px;
cursor: pointer;
}
.seat.selected {
background: #28a745;
color: white;
}
.seat.occupied {
background: #dc3545;
cursor: not-allowed;
}
#ticket-variants .ticket-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr auto;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
/* ---------------------- TABLES ---------------------- */
.table {
width: 100%;
border-collapse: collapse;
}
.table th,
.table td {
padding: 10px;
border-bottom: 1px solid #eee;
font-size: 0.9rem;
}
.table th {
text-align: left;
color: #34495e;
}
.table td {
color: #555;
}
/* ---------------------- UTILITY CLASSES ---------------------- */
.grid-box {
background: #fff;
padding: 20px;
border-radius: var(--border-radius);
box-shadow: var(--shadow-light);
margin-bottom: 20px;
overflow-x: auto;
}
.content-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
}
.activity-grid {
display: grid;
gap: 15px;
}
.activity-card {
background: #f9f9f9;
border-radius: var(--border-radius);
padding: 15px;
display: grid;
gap: 6px;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
/* ---------------------- FOOTER ---------------------- */
footer {
text-align: center;
padding: 2rem 1rem;
background: var(--primary-color);
color: #fff;
margin-top: 2rem;
font-size: 0.9rem;
}
/* ---------------------- RESPONSIVE DESIGN ---------------------- */
@media screen and (max-width: 1024px) {
.dashboard {
flex-direction: column;
}
.dashboard-sidebar {
width: 100%;
margin-bottom: 2rem;
}
.overview-cards {
flex-direction: column;
}
.content-grid {
grid-template-columns: 1fr;
}
}
@media screen and (max-width: 768px) {
.logo-img {
height: 35px;
}
header {
padding: 1rem;
height: 75px;
}
nav {
display: none;
flex-direction: column;
width: 100%;
background: #fff;
position: absolute;
top: 75px;
left: 0;
}
nav.active {
display: flex;
gap: 1rem;
position: absolute;
top: 60px;
right: 1rem;
background: #fff;
padding: 1rem 1.5rem;
box-shadow: var(--shadow-medium);
}
nav a {
margin: 1rem 0;
text-align: center;
font-size: 1.2rem;
}
.hamburger {
display: flex;
}
/* Hero Mobile */
#hero {
padding: 4rem 1.5rem;
background-position: center;
text-align: center;
}
#hero .hero-content h1 {
font-size: 1.8rem;
line-height: 2.2rem;
margin-bottom: 1rem;
padding: 10px;
margin-top: -150px;
}
#hero .hero-content p {
font-size: 1rem;
line-height: 1.6rem;
margin-bottom: 1.5rem;
padding: 10px;
}
#hero .hero-buttons {
display: flex;
flex-direction: column;
gap: 0.8rem;
align-items: center;
}
#hero .hero-buttons .button {
width: 100%;
max-width: 280px;
padding: 0.8rem 1rem;
font-size: 1rem;
}
/* Carousel Mobile */
.event-card {
min-width: 90%;
}
/* Grid adjustments */
.events-grid,
.categories-grid,
.artists-grid {
grid-template-columns: 1fr;
}
.stats-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
}
/* ---------------- EVENT HERO ---------------- */
#event-hero {
position: relative;
width: 108% !important;
height: 450px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
#event-hero .banner-img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 1;
transition: transform 0.5s ease;
}
#event-hero:hover .banner-img {
transform: scale(1.05);
}
/* Overlay with text */
#event-hero .overlay {
color: #fff;
padding: 20px 25px;
border-radius: var(--border-radius);
max-width: 90%;
}
#event-hero .overlay h1 {
font-size: 2.5rem;
margin-bottom: 12px;
}
#event-hero .overlay p {
font-size: 1rem;
margin: 4px 0;
display: flex;
align-items: center;
justify-content: center;
}
#event-hero .overlay i {
margin-right: 6px;
color: #ffd700;
}
/* Responsive adjustments */
@media (max-width: 768px) {
#event-hero {
height: 300px;
}
#event-hero .overlay h1 {
font-size: 1.8rem;
}
#event-hero .overlay p {
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
#event-hero {
height: 250px;
width: 105% !important;
}
#event-hero .overlay h1 {
font-size: 1.4rem;
}
#event-hero .overlay p {
font-size: 0.8rem;
}
}
/* New styles for added elements */
.hero-actions {
display: flex;
gap: 10px;
margin-top: 15px;
}
.button.secondary {
background-color: transparent;
border: 1px solid white;
color: white;
}
.button.small {
padding: 5px 10px;
font-size: 0.8rem;
}
#event-info-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 30px 0;
}
.info-card {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 20px;
border-radius: var(--border-radius);
background-color: #f9f9f9;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.info-icon {
font-size: 24px;
color: #4a6cf7;
}
.info-content h3 {
margin-top: 0;
margin-bottom: 10px;
}
.tags-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag {
padding: 5px 10px;
background-color: #e9ecef;
border-radius: var(--border-radius);
font-size: 0.8rem;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.artist {
position: relative;
text-align: center;
}
.artist-actions {
position: absolute;
top: 5px;
right: 5px;
display: flex;
gap: 5px;
}
.icon-btn {
background: rgba(0,0,0,0.5);
color: white;
border: none;
border-radius: 50%;
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.timeline-item {
margin-bottom: 20px;
position: relative;
}
.timeline-item:before {
content: '';
position: absolute;
left: -40px;
top: 5px;
width: 12px;
height: 12px;
border-radius: 50%;
background: #4a6cf7;
}
.timeline-time {
font-weight: bold;
margin-bottom: 5px;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}
.gallery-item img {
width: 100%;
height: 100px;
object-fit: cover;
border-radius: var(--border-radius);
}
.ticket-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.popular-badge {
background: #ffc107;
color: #000;
padding: 3px 8px;
border-radius: var(--border-radius);
font-size: 0.7rem;
display: flex;
align-items: center;
gap: 3px;
}
.ticket-features {
text-align: left;
margin: 10px 0;
}
.feature {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 5px;
font-size: 0.9rem;
}
.ticket-price {
margin: 15px 0;
font-size: 1.1rem;
}
.ticket-filters {
display: flex;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.filter-btn {
padding: 5px 15px;
border: 1px solid #ddd;
background: white;
border-radius: var(--border-radius);
cursor: pointer;
}
.filter-btn.active {
background: #4a6cf7;
color: white;
border-color: #4a6cf7;
}
.social-grid, .events-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.social-placeholder, .event-card {
padding: 20px;
text-align: center;
border-radius: var(--border-radius);
background: #f9f9f9;
}
.event-card img {
width: 100%;
height: 250px !important;
object-fit: cover;
border-radius: var(--border-radius);
}
.event-card-content {
padding: 10px 0;
}
.checkout-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.quantity-selector {
margin: 15px 0;
}
.quantity-controls {
display: flex;
align-items: center;
gap: 10px;
margin-top: 5px;
}
.qty-btn {
width: 30px;
height: 30px;
border: 1px solid #ddd;
background: white;
border-radius: var(--border-radius);
cursor: pointer;
}
#ticket-quantity {
width: 50px;
text-align: center;
padding: 5px;
}
.order-total {
font-size: 1.2rem;
font-weight: bold;
margin: 15px 0;
}
.checkout-actions {
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
}
.fab {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
}
.fab-button {
width: 60px;
height: 60px;
border-radius: 50%;
background: #4a6cf7;
color: white;
border: none;
font-size: 1.5rem;
cursor: pointer;
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
display: flex;
align-items: center;
justify-content: center;
}
.fab-actions {
position: absolute;
bottom: 70px;
right: 0;
display: flex;
flex-direction: column;
gap: 10px;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.3s ease;
}
.fab-actions.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.fab-action {
width: 45px;
height: 45px;
border-radius: 50%;
background: white;
color: #333;
border: 1px solid #ddd;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
display: flex;
align-items: center;
justify-content: center;
}
.toast {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%) translateY(100px);
background: white;
padding: 15px 20px;
border-radius: var(--border-radius);
box-shadow: 0 3px 10px rgba(0,0,0,0.2);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 1001;
display: flex;
align-items: center;
gap: 10px;
}
.toast.show {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-bottom: 20px;
}
.footer-logo {
max-width: 150px;
margin-bottom: 15px;
}
.footer-section h3 {
margin-bottom: 15px;
}
.footer-section ul {
list-style: none;
padding: 0;
}
.footer-section ul li {
margin-bottom: 10px;
}
.footer-section ul li a {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
color: inherit;
}
.social-icons {
display: flex;
gap: 15px;
}
.social-icons a {
font-size: 1.5rem;
color: inherit;
}
.copyright {
text-align: center;
padding-top: 20px;
border-top: 1px solid #ddd;
}
.button.saved {
background-color: #28a745;
border-color: #28a745;
}
@media (max-width: 768px) {
.checkout-container {
grid-template-columns: 1fr;
}
.hero-actions {
flex-direction: column;
align-items: flex-start;
}
.section-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}
/* ---------------------- EVENT HERO SECTION ---------------------- */
#event-hero {
position: relative;
width: 100%;
height: 60vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-family: 'Arial', sans-serif;
}
#event-banner {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(70%);
}
#event-hero .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
text-align: center;
padding: 0 15px;
}
#event-hero .overlay h1 {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 15px;
}
#event-hero .overlay p {
font-size: 1.1rem;
margin: 5px 0;
}
#event-hero .overlay i {
margin-right: 8px;
color: #f9d342;
}
/* ---------------------- RESPONSIVE ---------------------- */
@media (max-width: 768px) {
#event-hero {
height: 50vh;
}
#event-hero .overlay h1 {
font-size: 1.8rem;
}
#event-hero .overlay p {
font-size: 1rem;
}
}
@media (max-width: 480px) {
#event-hero {
height: 45vh;
}
#event-hero .overlay h1 {
font-size: 1.5rem;
}
#event-hero .overlay p {
font-size: 0.9rem;
}
}
#featured-events {
padding: 2rem;
background: #f9f9f9;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.categories-menu {
display: flex;
gap: .5rem;
}
.cat-btn {
padding: .5rem 1rem;
border: none;
border-radius: var(--border-radius);
background: #eee;
cursor: pointer;
transition: background .3s;
}
.cat-btn.active,
.cat-btn:hover {
background: #0f74bd;
color: #fff;
}
/* Carousel */
.carousel {
position: relative;
overflow: hidden;
}
.carousel-track {
display: flex;
gap: 1rem;
overflow-x: auto;
scroll-behavior: smooth;
}
.event-card {
flex: 0 0 280px;
background: #fff;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.event-image {
width: 100%;
height: 250px !important;
object-fit: cover;
}
.event-content {
padding: 1rem;
}
.urgency-badge {
position: absolute;
top: 10px;
left: 10px;
background: #e63946;
color: #fff;
padding: .3rem .6rem;
border-radius: var(--border-radius);
font-size: .8rem;
}
.price-tag {
margin-top: .5rem;
font-weight: bold;
color: #0f74bd;
}
.carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
border: none;
background: rgba(0,0,0,0.5);
color: #fff;
padding: .5rem 1rem;
cursor: pointer;
border-radius: 50%;
}
.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }
#trending-artists {
padding: 40px 20px;
text-align: center;
}
#trending-artists h2 {
font-size: 2rem;
margin-bottom: 30px;
color: #0f74bd;
}
.artists-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
justify-items: center;
align-items: stretch;
}
.artist {
border-radius: var(--border-radius);
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: transform 0.3s, box-shadow 0.3s;
width: 100%;
}
.artist img {
width: 100%;
height: 185px;
object-fit: cover;
}
.artist p {
margin: 10px 0 15px 0;
font-weight: bold;
font-size: 1.3rem;
color: #333;
}
.artist:hover {
transform: translateY(-5px);
}
.popular-venues {
padding: 40px 20px;
text-align: center;
}
.popular-venues h2 {
font-size: 2rem;
margin-bottom: 30px;
color: #0f74bd;
}
.venues-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
justify-items: center;
align-items: stretch;
}
.venue-card {
background: white;
border-radius: var(--border-radius);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.3s, box-shadow 0.3s;
width: 100%;
}
.venue-card img.venue-image {
width: 100%;
height: 180px;
object-fit: cover;
}
.venue-info {
padding: 15px 10px 20px 10px;
text-align: center;
}
.venue-info h4 {
font-size: 1.2rem;
margin-bottom: 8px;
color: #0f74bd;
}
.venue-info p {
font-size: 0.95rem;
color: #555;
margin-bottom: 5px;
}
.location-icon {
color: #0f74bd;
margin-right: 5px;
}
.venue-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
#categories {
padding: 40px 20px;
text-align: center;
}
#categories h2 {
font-size: 2rem;
margin-bottom: 20px;
color: #0f74bd;
}
.categories-grid {
display: flex;
gap: 15px;
overflow-x: auto;
scroll-behavior: smooth;
padding-bottom: 10px;
-ms-overflow-style: none;
scrollbar-width: none;
}
.categories-grid::-webkit-scrollbar {
display: none;
}
.category-card {
flex: 0 0 150px;
background: white;
border-radius: var(--border-radius);
padding: 20px;
font-weight: bold;
font-size: 1rem;
color: #0f74bd;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s;
}
.category-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
/* ---------------------- EVENTS SECTIONS ---------------------- */
.events-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
justify-items: center;
align-items: stretch;
padding: 20px 0;
}
.event-card {
background: white;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
transition: transform 0.3s, box-shadow 0.3s;
width: 100%;
}
.event-card img.event-image {
width: 100%;
height: 250px !important;
object-fit: cover;
}
.event-content {
padding: 15px;
display: flex;
flex-direction: column;
gap: 5px;
text-align: center;
}
.event-content h3 {
font-size: 1.2rem;
color: #0f74bd;
margin-bottom: 5px;
}
.event-content p {
font-size: 0.95rem;
color: #555;
margin: 0;
}
.location-icon {
color: #0f74bd;
margin-right: 5px;
}
.price-tag {
margin-top: 10px;
font-weight: bold;
color: #0f74bd;
}
.event-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
/* ---------------------- MOBILE APP CTA ---------------------- */
.mobile-app-cta {
padding: 40px 20px;
background: #d1d1d1;
color: white;
text-align: center;
}
.mobile-app-cta h2 {
font-size: 2rem;
margin-bottom: 15px;
}
.mobile-app-cta p {
font-size: 1rem;
margin-bottom: 20px;
}
.app-buttons {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
.app-button {
display: flex;
align-items: center;
gap: 10px;
background: white;
color: #0f74bd;
font-weight: bold;
padding: 12px 20px;
border-radius: var(--border-radius);
text-decoration: none;
transition: transform 0.3s, box-shadow 0.3s;
}
.app-button:hover {
transform: translateY(-3px);
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.app-button i {
font-size: 1.3rem;
}
/* ---------------------- NEWSLETTER SIGNUP ---------------------- */
.newsletter-signup {
padding: 40px 20px;
background: #f9f9f9;
text-align: center;
border-radius: var(--border-radius);
}
.newsletter-signup h2 {
font-size: 2rem;
margin-bottom: 15px;
color: #0f74bd;
}
.newsletter-signup p {
font-size: 1rem;
margin-bottom: 20px;
}
.newsletter-form {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}
.newsletter-form input[type="email"] {
padding: 12px 15px;
border-radius: var(--border-radius);
border: 1px solid #ccc;
min-width: 250px;
font-size: 1rem;
}
.newsletter-form button {
padding: 12px 20px;
background: #0f74bd;
color: white;
font-weight: bold;
border: none;
border-radius: var(--border-radius);
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s;
}
.newsletter-form button:hover {
transform: translateY(-3px);
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
/* ---------------------- GENERAL ---------------------- */
section h2 {
margin-bottom: 20px;
font-weight: bold;
text-align: center;
}
.app-button img.app-icon {
height: 24px;
display: inline-block;
border-radius: 0 !important;
}
/* ---------------- GLOBAL IMAGE STYLING ---------------- */
img {
max-width: 100%;
height: auto;
display: block;
border-radius: var(--border-radius);
object-fit: cover;
}
/* Hero banner */
#event-hero {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
#event-hero .banner-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
#event-hero:hover .banner-img {
transform: scale(1.05);
}
#event-hero .overlay {
position: absolute;
bottom: 20px;
left: 20px;
color: #fff;
}
/* Artist circular images */
.artist .circle-img {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 10px;
transition: transform 0.3s ease;
}
.artist .circle-img:hover {
transform: scale(1.1);
}
/* Gallery images */
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 15px;
}
.gallery-item img {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: var(--border-radius);
transition: transform 0.3s ease;
}
.gallery-item img:hover {
transform: scale(1.05);
}
/* Ticket card images (if any) */
.ticket-card img {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: var(--border-radius);
margin-bottom: 10px;
}
/* ---------------- EVENT HERO ---------------- */
#event-hero {
position: relative;
width: 100%;
height: 450px;
overflow: hidden;
}
#event-hero .banner-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
#event-hero:hover .banner-img {
transform: scale(1.05);
}
/* Overlay with text */
#event-hero .overlay {
position: absolute;
bottom: 20px;
left: 20px;
color: #fff;
padding: 15px 20px;
border-radius: var(--border-radius);
max-width: 80%;
}
#event-hero .overlay h1 {
font-size: 2rem;
margin-bottom: 8px;
}
#event-hero .overlay p {
font-size: 1rem;
margin: 2px 0;
display: flex;
align-items: center;
}
#event-hero .overlay i {
margin-right: 6px;
color: #ffd700;
}
/* Responsive adjustments */
@media (max-width: 768px) {
#event-hero {
height: 300px;
}
#event-hero .overlay {
max-width: 90%;
bottom: 10px;
left: 10px;
padding: 10px 15px;
}
#event-hero .overlay h1 {
font-size: 1.5rem;
}
#event-hero .overlay p {
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
#event-hero {
height: 250px;
}
#event-hero .overlay h1 {
font-size: 1.2rem;
}
#event-hero .overlay p {
font-size: 0.8rem;
}
}
#categories {
max-width: 1200px;
margin: 50px auto;
padding: 0 20px;
text-align: center;
}
#categories h2 {
font-size: 2rem;
margin-bottom: 30px;
}
.categories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
}
.category-card {
background: #0f74bd;
color: #fff;
padding: 30px 10px;
border-radius: var(--border-radius);
font-size: 1.1rem;
cursor: pointer;
transition: transform 0.2s, background 0.2s;
}
.category-card:hover {
transform: scale(1.05);
background: #0c5a96;
}
/* ---------------------- TICKETS SECTION ---------------------- */
#tickets {
padding: 3rem 2rem;
}
#tickets h2 {
font-size: 2rem;
margin-bottom: 1.5rem;
text-align: center;
color: #0f74bd;
}
.ticket-filters {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.filter-btn {
padding: 0.6rem 1.2rem;
border: 2px solid #0f74bd;
background: transparent;
color: #0f74bd;
border-radius: var(--border-radius);
cursor: pointer;
font-size: 0.95rem;
font-weight: 600;
transition: all 0.3s ease;
}
.filter-btn:hover {
background: #0f74bd;
color: #fff;
}
.filter-btn.active {
background: #0f74bd;
color: #fff;
}
.tickets-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
max-width: 1200px;
margin: 0 auto;
}
.ticket-card {
background: #fff;
padding: 1.5rem;
border-radius: var(--border-radius);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
justify-content: space-between;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ticket-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.ticket-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.ticket-type {
font-size: 1.1rem;
font-weight: bold;
text-transform: uppercase;
color: #0f74bd;
}
.ticket-price {
font-size: 1.3rem;
font-weight: bold;
color: #333;
}
.ticket-details {
font-size: 0.95rem;
color: #666;
margin-bottom: 1rem;
}
.ticket-btn {
padding: 0.7rem;
text-align: center;
background: #0f74bd;
color: #fff;
font-weight: bold;
border: none;
border-radius: var(--border-radius);
cursor: pointer;
transition: background 0.3s ease;
}
.ticket-btn:hover {
background: #09568d;
}
/* Responsive */
@media (max-width: 600px) {
.ticket-filters {
flex-direction: column;
align-items: center;
}
.filter-btn {
width: 100%;
max-width: 250px;
}
}
/* Schedule Section */
#schedule {
padding: 2rem;
border-radius: var(--border-radius);
}
#schedule h2 {
font-size: 1.8rem;
margin-bottom: 1rem;
color: #0f74bd;
}
/* Timeline Container */
.timeline {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Day Header (Collapsible Button) */
.day-header {
width: 100%;
text-align: left;
background: #0f74bd;
color: #fff;
padding: 1rem;
font-size: 1.1rem;
border: none;
border-radius: var(--border-radius);
cursor: pointer;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
transition: background 0.3s;
}
.day-header:hover {
background: #095b91;
}
.day-header i {
transition: transform 0.3s ease;
}
/* Collapsible Content */
.day-content {
display: none;
padding: 1rem;
background: #fff;
border-radius: 0 0 var(--border-radius) var(--border-radius);
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
/* Event Items */
.event {
display: flex;
gap: 1rem;
padding: 0.8rem 0;
border-bottom: 1px solid #eee;
}
.event:last-child {
border-bottom: none;
}
.event .time {
font-weight: bold;
color: #0f74bd;
min-width: 80px;
}
.event .details h3 {
margin: 0;
font-size: 1rem;
color: #333;
}
.event .details p {
margin: 0.2rem 0 0;
color: #666;
font-size: 0.9rem;
}
/* Active state */
.day.active .day-content {
display: block;
}
.day.active .day-header i {
transform: rotate(180deg);
}
#policies {
padding: 2rem;
background-color: #f9f9f9;
border-radius: var(--border-radius);
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
margin-bottom: 2rem;
}
#policies h2 {
font-size: 1.8rem;
color: var(--primary-color);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.rules-list {
list-style: none;
padding-left: 0;
}
.rules-list li {
font-size: 1rem;
color: #333;
margin-bottom: 0.8rem;
display: flex;
align-items: center;
gap: 0.6rem;
}
.rules-list li i {
color: var(--primary-color);
min-width: 20px;
text-align: center;
}
/* Event Map Section */
#event-map {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px 10px;
box-sizing: border-box;
}
#event-map #map {
width: 100%;
height: 400px;
max-height: 600px;
border-radius: var(--border-radius);
overflow: hidden;
}
/* Responsive adjustments */
@media (max-width: 768px) {
#event-map #map {
height: 300px;
}
}
@media (max-width: 480px) {
#event-map #map {
height: 250px;
}
}
/* Make images responsive */
img, .banner-img, .artist img, .gallery-item img {
max-width: 100%;
height: auto;
display: block;
}
/* Grid and card containers */
#event-info-cards, .tickets-grid, .artists-grid, .gallery-grid, .events-grid, .social-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
width: 100%;
overflow: hidden;
box-sizing: border-box;
}
/* Info cards, ticket cards, artist cards */
.info-card, .ticket-card, .artist, .gallery-item, .event-card {
width: 100%;
box-sizing: border-box;
overflow-wrap: break-word;
}
/* Hero banner overlay adjustments */
#event-hero {
position: relative;
width: 100%;
max-width: 100%;
overflow: hidden;
}
#event-hero .banner-img {
width: 100%;
object-fit: cover;
display: block;
}
/* Map */
#map {
width: 100%;
max-width: 100%;
height: 400px;
overflow: hidden;
}
/* Make long text wrap instead of stretching */
p, h1, h2, h3, h4, h5 {
word-wrap: break-word;
overflow-wrap: break-word;
}
/* Schedule timeline */
.timeline, .day-content {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
/* Footer links */
footer div a {
word-break: break-word;
}
/* FAB container adjustments */
.fab {
max-width: 100%;
overflow: hidden;
}
/* Event Hero Section */
#event-hero {
position: relative;
width: 100%;
max-width: 100vw;
height: 60vh;
overflow: hidden;
}
#event-hero .banner-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
#event-hero:hover .banner-img {
transform: scale(1.05);
}
/* Overlay for text */
#event-hero .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.45);
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 0 20px;
box-sizing: border-box;
}
#event-hero .overlay h1 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 10px;
}
#event-hero .overlay p {
font-size: 1.1rem;
margin: 5px 0;
}
/* Responsive adjustments */
@media (max-width: 1024px) {
#event-hero {
height: 50vh;
}
#event-hero .overlay h1 {
font-size: 2rem;
}
}
@media (max-width: 768px) {
#event-hero {
height: 40vh;
}
#event-hero .overlay h1 {
font-size: 1.5rem;
}
#event-hero .overlay p {
font-size: 1rem;
}
}
#event-hero {
position: relative;
width: 100%;
height: 60vh;
overflow: hidden;
}
#event-hero .banner-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
/* Overlay for text */
#event-hero .overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.45);
color: #fff;
text-align: center;
padding: 20px;
border-radius: var(--border-radius);
}
#event-hero .overlay h1 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 10px;
}
#event-hero .overlay p {
font-size: 1.1rem;
margin: 5px 0;
}
/* Hover zoom effect for image */
#event-hero:hover .banner-img {
transform: scale(1.05);
}
/* Responsive adjustments */
@media (max-width: 1024px) {
#event-hero {
height: 50vh;
}
#event-hero .overlay h1 {
font-size: 2rem;
}
}
@media (max-width: 768px) {
#event-hero {
height: 40vh;
}
#event-hero .overlay h1 {
font-size: 1.5rem;
}
#event-hero .overlay p {
font-size: 1rem;
}
}
#eventName {
font-size: 3rem;
font-weight: 700;
text-align: center;
margin: 20px 0;
line-height: 1.2;
margin-bottom: -50px;
}
/* Optional: Responsive sizes */
@media (max-width: 1024px) {
#eventName {
font-size: 2.5rem;
}
}
@media (max-width: 768px) {
#eventName {
font-size: 2rem;
}
}
#event-details {
text-align: center;
padding: 40px 20px;
color: #333;
max-width: 900px;
margin: 0 auto;
border-radius: var(--border-radius);
}
#event-details h1 {
font-size: 2.5rem;
margin-bottom: 20px;
}
#event-details p {
font-size: 1.2rem;
margin: 5px 0;
}
/* Responsive */
@media (max-width: 768px) {
#event-details h1 {
font-size: 1.8rem;
}
#event-details p {
font-size: 1rem;
}
}
/* SVG icons for date and location */
#event-details svg {
width: 30px;
height: 30px;
vertical-align: middle;
margin-right: 6px;
}
/* Simple toast style */
.toast {
position: fixed;
bottom: 20px;
right: 20px;
background: #333;
color: #fff;
padding: 10px 20px;
border-radius: var(--border-radius);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 9999;
}
.toast.show {
opacity: 1;
}
/* ---------------------- Quantity Selector ---------------------- */
.quantity-selector {
display: flex;
align-items: center;
justify-content: center;
margin: 10px 0;
gap: 5px;
}
.quantity-selector input.ticket-quantity {
width: 50px;
text-align: center;
font-size: 16px;
padding: 5px 0;
border: 1px solid #ccc;
border-radius: var(--border-radius);
}
.quantity-selector input.ticket-quantity::-webkit-outer-spin-button,
.quantity-selector input.ticket-quantity::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.qty-btn {
background-color: #0f74bd;
color: #fff;
border: none;
border-radius: var(--border-radius);
font-size: 18px;
padding: 5px 12px;
cursor: pointer;
transition: background 0.2s ease;
}
.qty-btn:hover {
background-color: #095a8c;
}
.ticket-card .buy-btn {
margin-top: 10px;
background-color: #0f74bd;
color: #fff;
border: none;
border-radius: var(--border-radius);
padding: 8px 15px;
font-size: 16px;
cursor: pointer;
transition: background 0.2s ease;
}
.ticket-card .buy-btn:hover {
background-color: #095a8c;
}
/* Optional: make the quantity selector responsive */
@media (max-width: 600px) {
.quantity-selector {
gap: 3px;
}
.quantity-selector input.ticket-quantity {
width: 40px;
font-size: 14px;
}
.qty-btn {
padding: 4px 10px;
font-size: 16px;
}
}
main {
max-width: 800px;
margin: 30px auto;
background: #fff;
padding: 20px;
border-radius: var(--border-radius);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #0f74bd;
}
#checkout-summary {
margin-top: 20px;
}
#checkout-summary div {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
font-size: 16px;
}
#total-amount {
font-weight: bold;
font-size: 18px;
border-top: 1px solid #ccc;
padding-top: 10px;
}
.checkout-btn {
display: block;
width: 100%;
text-align: center;
background-color: #0f74bd;
color: #fff;
padding: 12px;
border-radius: var(--border-radius);
text-decoration: none;
font-weight: bold;
margin-top: 20px;
}
.checkout-btn:hover {
background-color: #095a8c;
}
/* Payment Section */
#payment-section {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
margin: 2rem auto !important;
max-width: 700px !important;
background: #f9f9f9 !important;
padding: 2rem !important;
border-radius: var(--border-radius) !important;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05) !important;
text-align: center !important;
margin-top: -50px !important;
}
#payment-section h2 {
font-size: 1.8rem !important;
margin-bottom: 0.5rem !important;
color: #0f74bd !important;
}
#payment-section p {
font-size: 1rem !important;
color: #555 !important;
margin-bottom: 2rem !important;
}
/* Buttons Container */
#payment-section form,
#payment-section button {
display: inline-block !important;
margin: 10px !important;
padding: 12px 25px !important;
border-radius: var(--border-radius) !important;
border: none !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
background: #fff !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
text-align: center !important;
}
/* Hover effect for all buttons */
#payment-section form:hover,
#payment-section button:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
}
/* Logos: uniform size */
#payment-section img {
width: 150px !important;
height: 50px !important;
object-fit: contain !important;
display: block !important;
margin: 0 auto !important;
border-radius: var(--border-radius) !important;
}
/* Responsive layout: stack buttons on smaller screens */
@media (max-width: 500px) {
#payment-section form,
#payment-section button {
width: 80% !important;
padding: 15px 0 !important;
margin: 8px 0 !important;
}
#payment-section img {
width: 120px !important;
height: 40px !important;
}
}
/* Container for all tickets */
#cart-items {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 1rem;
}
/* Each ticket category box */
.ticket-category {
background-color: #f8f8f8;
border: 1px solid #ddd;
border-radius: var(--border-radius);
padding: 1rem;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
/* Ticket list styling */
.ticket-category ul {
list-style-type: none;
margin-top: 0.5rem;
}
.ticket-category li {
padding: 0.25rem 0;
font-size: 0.95rem;
color: #333;
}
/* Loader Overlay */
#loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.95);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
transition: opacity 0.3s ease;
}
/* Loader content */
.loader-content {
text-align: center;
}
/* Logo */
.loader-logo {
max-width: 120px;
margin-bottom: 1rem;
animation: logo-bounce 1s infinite alternate;
}
/* Spinner */
.spinner {
border: 6px solid #f3f3f3;
border-top: 6px solid #0f74bd;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
}
/* Animations */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes logo-bounce {
0% { transform: translateY(0); }
100% { transform: translateY(-10px); }
}
/* Hide loader */
#loader.hidden {
opacity: 0;
pointer-events: none;
}
/* ---------------- CONTACT SECTION ---------------- */
#contact {
background: rgba(255, 255, 255, 0.05) !important;
backdrop-filter: blur(10px)!important;
padding: 3rem 1.5rem!important;
max-width: 600px!important;
margin: 3rem auto!important;
border-radius: var(--border-radius)!important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15)!important;
text-align: center!important;
margin: 1rem!important;
}
#contact h2 {
font-size: 2rem!important;
color: var(--primary-color, #0f74bd);
margin-bottom: 2rem;
font-weight: 700;
}
#contact form {
display: flex;
flex-direction: column;
gap: 1.2rem;
}
#contact input,
#contact textarea {
padding: 0.8rem 1rem;
border-radius: var(--border-radius);
border: 1px solid rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.1);
color: #0f74bd;
font-size: 1rem;
transition: all 0.3s ease;
border: 2px solid #0f74bd;
font-size: 1rem;
}
#contact input::placeholder,
#contact textarea::placeholder {
color: rgba(0, 0, 0, 0.6);
}
#contact input:focus,
#contact textarea:focus {
outline: none;
border-color: var(--primary-color, #0f74bd);
background: rgba(255, 255, 255, 0.15);
}
#contact button.button {
padding: 0.9rem 1.5rem;
border: none;
border-radius: var(--border-radius);
background: var(--primary-color, #0f74bd);
color: #fff;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
#contact button.button:hover {
background: #095a9d;
transform: translateY(-2px);
}
/* Responsive for smaller screens */
@media (max-width: 480px) {
#contact {
padding: 2rem 1rem;
}
#contact h2 {
font-size: 1.6rem;
}
}
gmpx-place-autocomplete {
display: block;
width: 100%;
min-height: 40px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: var(--border-radius);
padding: 0 12px;
box-sizing: border-box;
}
.forms-panel section {
position: relative;
z-index: auto;
}
gmpx-place-autocomplete {
position: relative;
z-index: 10;
}
gmpx-place-autocomplete {
display: block;
min-height: 40px;
width: 100%;
cursor: text;
z-index: 10;
}
.autocomplete-input {
width: 100%;
background: var(--panel-2);
border: 1px solid var(--border);
color: var(--text);
border-radius: var(--border-radius);
padding: 12px 14px;
outline: none;
transition: border-color .2s ease, box-shadow .2s ease;
font-family: inherit;
font-size: 1rem;
}
.autocomplete-input:focus {
border-color: var(--brand);
box-shadow: 0 0 0 4px rgba(106,164,255,.15);
}
/* ================= Flatpickr Inputs ================= */
#event-date,
#event-time {
width: 100%;
background: var(--panel-2);
border: 1px solid var(--border);
color: var(--text);
border-radius: var(--border-radius);
padding: 12px 14px;
outline: none;
font-family: inherit;
font-size: 1rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#event-date:focus,
#event-time:focus {
border-color: var(--brand);
box-shadow: 0 0 0 4px rgba(106, 164, 255, 0.15);
}
/* ================= Flatpickr Calendar Styling ================= */
.flatpickr-calendar {
background: var(--panel-2);
border: 1px solid var(--border);
border-radius: var(--border-radius);
color: var(--text);
box-shadow: var(--shadow);
font-family: inherit;
}
.flatpickr-months {
background: var(--panel);
color: var(--text);
border-bottom: 1px solid var(--border);
}
.flatpickr-weekdays {
background: var(--panel-2);
color: var(--muted);
}
.flatpickr-days .flatpickr-day {
background: var(--panel-2);
color: var(--text);
border-radius: var(--border-radius);
transition: background 0.2s, color 0.2s;
}
.flatpickr-days .flatpickr-day:hover {
background: var(--brand);
color: #fff;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
background: var(--brand);
color: #fff;
}
.flatpickr-time {
background: var(--panel-2);
color: var(--text);
}
.flatpickr-time input {
background: var(--panel-2);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--border-radius);
padding: 6px 8px;
}
.flatpickr-current-month {
font-weight: 600;
}
.flatpickr-weekday {
font-weight: 500;
}
/* Skeleton card base */
.event-card.skeleton {
background: #ffffff;
border-radius: var(--border-radius);
overflow: hidden;
margin: 0 10px;
width: 250px;
height: 350px;
display: flex;
flex-direction: column;
animation: pulse 1.5s infinite;
}
/* Skeleton image placeholder */
.skeleton-image {
background: #d3d3d3;
height: 180px;
width: 100%;
object-fit: cover;
}
/* Skeleton text placeholders */
.skeleton-text {
background: #ffffff;
height: 20px;
margin: 10px 0;
border-radius: var(--border-radius);
}
/* Pulse animation to give a loading effect */
@keyframes pulse {
0% {
background-color: #ffffff;
}
50% {
background-color: #ebebeb;
}
100% {
background-color: #e4e4e4;
}
}
/* Skeleton artist card */
.artist.skeleton-artist {
display: flex;
flex-direction: column;
align-items: center;
width: 200px;
margin: 10px;
animation: pulse 1.5s infinite;
}
/* Skeleton image circle */
.artist-image.skeleton-image {
width: 100px;
height: 100px;
border-radius: 50%;
background: #ffffff;
margin-bottom: 10px;
}
/* Skeleton venue card */
.venue-card.skeleton-venue {
display: flex;
flex-direction: column;
background: #1a1a1a;
border-radius: var(--border-radius);
padding: 10px;
margin: 10px;
width: 290px;
animation: pulse 1.5s infinite;
}
/* Skeleton image rectangle */
.venue-image.skeleton-image {
width: 100%;
height: 120px;
border-radius: var(--border-radius);
background: #ffffff;
margin-bottom: 10px;
}
.skeleton-text.short {
width: 50%;
}
.skeleton-text.long {
width: 90%;
}
/* Skeleton event card */
.event-card.skeleton-event {
background: #1a1a1a;
border-radius: var(--border-radius);
padding: 10px;
width: 220px;
margin: 10px;
animation: pulse 1.5s infinite;
}
/* Skeleton image rectangle */
.event-image.skeleton-image {
width: 100%;
height: 140px;
border-radius: var(--border-radius);
background: #ffffff;
margin-bottom: 10px;
}
.skeleton-banner {
width: 100%;
max-width: 800px;
height: 380px;
border-radius: var(--border-radius);
background-color: #f5f5f5;
animation: pulse 1.5s infinite;
}
.skeleton-card {
background-color: #acacac;
border-radius: var(--border-radius);
padding: 16px;
margin: 8px;
width: 250px;
display: flex;
flex-direction: column;
animation: pulse 1.5s infinite;
}
.skeleton-image {
width: 100%;
height: 150px;
border-radius: var(--border-radius);
background-color: #d3d3d3;
margin-bottom: 12px;
}
.skeleton-text {
height: 16px;
width: 80%;
background-color: #ffffff;
border-radius: var(--border-radius);
margin: 8px 0;
}
.price-tag.skeleton-text {
height: 20px;
width: 50%;
margin-top: 12px;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.4; }
100% { opacity: 1; }
}
#event-hero {
width: 100% !important;
max-width: 1800px !important;
height: 100% !important;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
border-radius: var(--border-radius);
margin-top: -30px !important;
}
.footer-social {
text-align: center;
}
.footer-social h4 {
margin-bottom: 20px;
font-size: 1.2em;
}
.social-icons {
display: flex;
justify-content: center;
gap: 15px;
}
.social-icons a {
display: inline-block;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.social-icons a:hover {
background-color: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
.social-icons svg {
width: 20px;
height: 20px;
fill: white;
}
/* Footer Styling */
.site-footer {
background: #111;
color: #ccc;
font-family: 'Inter', Arial, sans-serif;
padding: 60px 20px 30px;
margin-top: 50px;
border-top: 1px solid rgba(255,255,255,0.1);
}
.footer-container {
max-width: 1300px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 40px;
align-items: start;
}
.footer-logo {
width: 140px;
margin-bottom: 15px;
}
.footer-description {
font-size: 14px;
line-height: 1.6;
color: #aaa;
}
/* Headings */
.footer-links h4,
.footer-social h4 {
color: #fff;
margin-bottom: 15px;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Links */
.footer-links ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links ul li {
margin-bottom: 10px;
}
.footer-links ul li a {
color: #ccc;
text-decoration: none;
font-size: 14px;
transition: color 0.3s ease;
}
.footer-links ul li a:hover {
color: #fff;
}
/* Bottom */
.footer-bottom {
margin-top: 50px;
text-align: center;
font-size: 13px;
color: #aaa;
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: 20px;
}
.footer-disclaimer {
font-size: 12px;
color: #777;
margin-top: 5px;
}
/* --- RESPONSIVE GRID IMPROVEMENT --- */
@media (max-width: 768px) {
.footer-container {
grid-template-columns: repeat(2, 1fr);
gap: 25px;
text-align: center;
}
.footer-logo {
margin: 0 auto 10px auto;
}
.social-icons {
justify-content: center;
}
}
@media (max-width: 500px) {
.footer-container {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.footer-links h4,
.footer-social h4 {
font-size: 14px;
}
.footer-links ul li a {
font-size: 13px;
}
}
/* Countdown container */
#event-countdown {
display: flex;
gap: 10px;
font-family: 'Arial', sans-serif;
margin-top: 20px;
justify-content: center;
align-items: center;
}
/* Individual time unit boxes */
.countdown-unit {
background: #000;
color: #fff;
text-align: center;
padding: 10px 15px;
border-radius: var(--border-radius);
min-width: 60px;
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
display: flex;
flex-direction: column;
transition: transform 0.2s ease;
}
/* Hover effect (optional) */
.countdown-unit:hover {
transform: scale(1.05);
}
.countdown-unit span.value {
font-size: 1.5rem;
font-weight: 700;
}
.countdown-unit span.label {
font-size: 0.75rem;
text-transform: uppercase;
margin-top: 4px;
opacity: 0.8;
}
/* Event started message */
#event-countdown .event-started {
font-size: 1.2rem;
font-weight: 600;
color: #000;
background: #fff;
padding: 10px 20px;
border-radius: var(--border-radius);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
text-align: center;
}
.event-detail {
display: block; /* Force them into vertical stacking */
margin: 10px 5px !important; /* Space between paragraphs */
padding: 12px 15px; /* Inner spacing */
border: 1px solid #ddd; /* Light border */
border-radius: 12px; /* Rounded corners */
background: #f9f9f9; /* Light background */
font-size: 16px; /* Readable size */
line-height: 1.6; /* Nice line spacing */
}
.event-detail strong {
color: #222; /* Darker label text */
font-weight: 600; /* Emphasis */
}
/* Container styling */
.artist-header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 40px 20px;
background: #ffffff !important; /* Solid white background */
color: #000000;
border-radius: 12px; /* Rounded corners */
max-width: 600px;
margin: 40px auto;
margin-top: -30px;
}
/* Artist photo styling */
#artist-photo {
width: 180px;
height: 180px;
border-radius: 50%;
object-fit: cover;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Hover effect for image */
#artist-photo:hover {
transform: scale(1.05);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}
/* Artist name styling */
#artist-name {
font-size: 2rem;
font-weight: 700;
margin: 20px 0 10px;
letter-spacing: 1px;
color: #0f74bd;
}
/* Genre styling */
#artist-genre {
font-size: 1.1rem;
margin: 5px 0;
color: #0f74bd;
}
/* Bio styling */
#artist-bio {
font-size: 1rem;
max-width: 500px;
margin-top: 10px;
line-height: 1.6;
color: #0f74bd;
}
.artist-events h2 {
text-align: center; /* Center the heading */
font-size: 2rem; /* Adjust size as needed */
font-weight: 600; /* Slightly bold */
margin-bottom: 1.5rem; /* Space below the heading */
font-family: inherit; /* Use page’s default font */
}
.btn-download-zip {
display: inline-block;
padding: 12px 25px;
background: #0056ff;
color: #fff;
border-radius: 8px;
text-decoration: none;
font-weight: bold;
transition: background 0.3s;
}
.btn-download-zip:hover {
background: #0041cc;
}
#customer-info-section {
max-width: 600px;
margin: 20px auto;
}
#customer-info-section label {
display: block;
margin: 10px 0 5px;
font-weight: bold;
}
#customer-info-section input,
#customer-info-section textarea {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border-radius: 6px;
border: 1px solid #ccc;
}
#customer-info-section button {
display: block;
margin: auto;
}
.qr-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%; /* allow centering */
overflow: visible; /* prevent clipping */
}
.qr-container canvas,
.qr-container img {
border-radius: 0 !important;
width: 256px !important;
height: 256px !important;
display: block; /* avoids inline spacing that causes cut-off */
}
/* Ensure the QR area doesn't get clipped or rounded */
.ticket-card { overflow: visible; } /* allow content to render fully */
.qrcode { overflow: visible; } /* no clipping inside the section */
/* A wrapper that provides a physical quiet zone (white border) around the code */
.qr-wrapper {
display: inline-block;
background: #fff; /* quiet zone color */
padding: 16px; /* ~ 4 modules for a 256px code; we’ll also add a drawn quiet zone */
line-height: 0; /* remove inline gaps */
border-radius: 0; /* no rounding of the QR */
}
/* Force the bitmap to exact pixels and avoid CSS stretching */
.qr-wrapper canvas,
.qr-wrapper img {
width: 256px !important;
height: 256px !important;
image-rendering: pixelated; /* keep crisp */
image-rendering: crisp-edges;
border-radius: 0 !important;
display: block;
}
/* Center the wrapper nicely */
.qr-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
overflow: visible;
}
/* Artist search results */
.artist-results{
display:grid;
gap:10px;
}
.artist-row{
display:flex;
align-items:center;
gap:10px;
padding:10px 12px;
border:1px solid var(--border);
border-radius:12px;
background:#fff;
cursor:pointer;
transition: box-shadow .2s, transform .1s, border-color .2s;
}
.artist-row:hover{
border-color:#cfd7e6;
box-shadow: 0 10px 22px rgba(2,8,23,.06);
transform: translateY(-1px);
}
.artist-thumb{
width:48px; height:48px !important;
border-radius:10px!important;
overflow:hidden!important;
background:#eee!important;
flex:0 0 48px!important;
}
.artist-thumb img{
width:100%!important;
height:100%!important;
object-fit: cover!important; /* center-cropped square */
object-position: center!important; /* <-- prevents “top-only” */
}
@media (max-width: 520px){
.artist-row{ padding:8px 10px!important; }
.artist-thumb{ width:44px; height:44px!important; flex-basis:44px; }
}
.i {
color: none !important;
}
/* Share buttons: solid, themeable icons */
#share-buttons .share-btn{
--icon-color: var(--primary-color, #0f74bd); /* default = your page color */
color: var(--icon-color);
margin-bottom: 20px;
}
#share-buttons {
--icon-color: var(--primary-color, #0f74bd); /* default = your page color */
color: #000 !important;
border: 3px solid var(--primary-color, #0f74bd);
border-radius: 12px;
}
#share-buttons .share-btn svg{ width:30px;height:30px;display:block; }
/* force solid fill even if SVG had fill="none" */
#share-buttons .share-btn svg path,
#share-buttons .share-btn svg circle,
#share-buttons .share-btn svg rect{
fill: currentColor;
stroke: none !important;
width: 2000px !important;
color: #000 !important;
}
/* subtle hover that works for any icon color */
#share-buttons .share-btn:hover{
background: color-mix(in oklab, currentColor 12%, transparent);
}
/* keep event title neutral, not accent */
:root { --heading-color: var(--primary-color, #0f74bd); } /* tweak to your default text color */
#eventName {
color: var(--heading-color) !important;
}
/* utility to opt-out of accent theming */
.no-theme { color: inherit !important; }
h2, .accent { color: var(--primary-color); }
/* and explicitly keep the event title neutral */
#eventName { color: var(--heading-color, #111); }
/* Event links as small side-by-side cards */
#event-links .links-grid{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap:10px;
padding:0;
list-style:none;
}
#event-links .links-grid li{ list-style:none; }
#event-links .links-grid a{
display:inline-flex;
align-items:center;
gap:.5rem;
padding:.6rem .75rem;
border:1px solid rgba(0,0,0,.08);
border-radius:10px;
background:var(--primary-color, #0f74bd);
color: #ffffff !important;
text-decoration:none;
box-shadow: 0 1px 2px rgba(0,0,0,.04);
transition: transform .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
min-height: 40px;
}
#event-links .links-grid a:hover{
color: var(--primary-color, #0f74bd);
border-color: var(--primary-color, #0f74bd);
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(0,0,0,.06);
}
#event-links .links-grid a i,
#event-links .links-grid a svg{
width:1em; height:1em; flex:0 0 auto;
}
#event-links .links-grid a svg path{ fill: currentColor; }
#event-links .links-grid a{ padding:.5rem .6rem; font-size:.92rem; border-radius:8px; }
#event-details{
flex-wrap:wrap;
gap:.6rem;
align-items:center;
}
/* the chip itself */
#event-details > p,
#event-address{
display:inline-flex;
align-items:center;
gap:.5rem;
margin:0; /* remove default margins */
padding:.55rem .75rem;
border:1px solid var(--chip-border);
border-radius:999px; /* pill */
background:
linear-gradient(
to bottom right,
color-mix(in oklab, var(--primary-color) 8%, transparent),
color-mix(in oklab, var(--primary-color) 3%, transparent)
),
var(--chip-bg);
color: var(--muted-color);
box-shadow: 0 1px 2px rgba(0,0,0,.04);
line-height:1;
font-size:.95rem;
white-space:nowrap;
}
/* icon sizing + theme color */
#event-details p svg,
#event-address svg{
inline-size: 1.1rem;
block-size: 1.1rem;
flex:0 0 auto;
color: var(--primary-color); /* ← SVGs will inherit this */
}
/* force inline SVGs to inherit color from the container */
#event-details p svg :is(path, circle, rect, line, polyline, polygon){
stroke: currentColor !important;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
#event-details p svg :is(path[fill], circle[fill], rect[fill]){
fill: currentColor !important; /* keeps filled dots in the calendar on-theme */
}
/* nicer visual separator between date & time (you can remove the literal "|" in HTML) */
#event-date::after{
content: "•";
margin: 0 .5rem;
color: color-mix(in oklab, var(--muted-color) 70%, var(--primary-color) 30%);
}
/* clamp long addresses gracefully */
#event-address{
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
}
/* hover polish (optional) */
#event-details > p:hover,
#event-address:hover{
border-color: color-mix(in oklab, var(--primary-color) 35%, var(--chip-border));
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(0,0,0,.06);
transition: .18s ease;
}
/* dark mode (optional) */
@media (prefers-color-scheme: dark){
:root{
--text-color:#e6e7ea;
--muted-color:#a8b0bb;
--chip-border: rgba(255,255,255,.08);
}
}
#event-date { text-transform: uppercase; }
/* Make Font Awesome icons black in the info cards */
#event-info-cards .info-icon i {
color: #000 !important;
}
/* If you ever use FA duotone there */
#event-info-cards .info-icon .fa-duotone {
--fa-primary-color: #000;
--fa-secondary-color: #000;
}
/* If any inline SVGs sneak in those .info-icon blocks */
#event-info-cards .info-icon svg {
fill: #000 !important;
stroke: #000 !important;
}
/* Tickets header: icon + text in black */
#tickets h2,
#tickets h2 i,
#tickets h2 svg {
color: #000 !important;
fill: #000 !important;
stroke: #000 !important;
}
/* Quantity selector: buttons, input, text in black */
#tickets .quantity-selector {
color: #000 !important;
}
#tickets .quantity-selector .qty-btn {
color: #000 !important;
border: 1px solid #000 !important;
background: transparent !important;
}
#tickets .quantity-selector .ticket-quantity {
color: #000 !important;
border: 1px solid #000 !important;
background: #fff; /* keeps the number readable */
}
#tickets .quantity-selector .qty-btn:disabled,
#tickets .quantity-selector .ticket-quantity:disabled {
opacity: .6;
}
/* Price tag (and its skeleton placeholder) in black */
.tickets {
color: #000 !important;
border: 1px solid #000;
background: transparent;
}
.price-tag {
color: #000 !important;
border: 1px solid #000 !important;
background: transparent;
}
#tickets .price-tag.skeleton-text,
#similar-events .price-tag.skeleton-text {
background: rgba(0,0,0,.12) !important; /* subtle black shimmer */
}
/* Catch-all for any FA icon inside #tickets */
#tickets i.fa,
#tickets i.fas,
#tickets i.far,
#tickets i.fab {
color: #000 !important;
}
/* Prevent horizontal scroll caused by wide inline SVGs and force wrapping */
.event-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .5rem .6rem; /* row/column gap */
max-width: 100%;
}
/* Make the inline SVG the size of text, not 300px */
.event-meta svg {
width: 1.15em;
height: 1.15em;
flex: 0 0 auto;
display: inline-block;
}
/* Allow long times/timezones to wrap instead of pushing the layout */
.event-meta span {
min-width: 0;
overflow-wrap: anywhere;
line-height: 1.25;
}
/* Divider behavior */
.event-meta .sep {
opacity: .5;
flex: 0 0 auto;
}
/* On small screens, drop the divider so each piece can wrap cleanly */
@media (max-width: 480px) {
.event-meta .sep { display: none; }
}
/* If any global style forced no-wrap on
or spans, undo it here */
.event-meta,
.event-meta * {
white-space: normal !important;
}
/* Optional last-resort safety (use only if you still see a tiny horizontal scroll) */
html, body { overflow-x: hidden; }
/* Header logo sizing & containment */
header .logo .logo-img {
height: 36px;
width: auto;
max-width: 180px;
object-fit: contain;
display: block;
border-radius: none !important;
}
@media (min-width: 768px) {
header .logo .logo-img { height: 44px; }
}
.logo{
border-radius: none !important;
}
/* Kill any rounding on the logo image */
#site-logo,
.logo-img,
.logo img {
border-radius: 0 !important;
clip-path: none !important;
mask: none !important;
-webkit-mask: none !important;
}
/* If a parent was doing it + hiding overflow */
.logo,
#site-logo-link {
border-radius: 0 !important;
overflow: visible !important;
}
/* Container */
#event-badges{
display:flex;
flex-wrap:wrap;
gap:.5rem;
align-items:center;
margin:.75rem 0 1rem;
}
/* Base chip */
#event-badges [id^="badge-"],
#event-badges .chip{
display:inline-flex;
align-items:center;
gap:.4rem;
padding:.35rem .65rem;
border:1px solid #e5e7eb; /* light outline */
background:#fafafa; /* subtle fill */
color:#111;
border-radius:9999px;
font-weight:600;
font-size:.85rem;
line-height:1;
box-shadow:0 1px 0 rgba(0,0,0,.04);
white-space:nowrap;
}
/* Emphasis for Featured */
#badge-featured{
background:var(--primary-color, #0f74bd);
color:var(--on-primary, #fff);
border-color:transparent;
box-shadow:0 6px 14px rgba(0,0,0,.12);
}
#skeleton-text h3{
color:var(--on-primary, #fff) !important;
}
/* Optional subtle accents per type (keeps “Featured” strongest) */
#badge-minage{ border-color:#fca5a5; background:#fff7f7; }
#badge-capacity{ border-color:#93c5fd; background:#f7fbff; }
#badge-category{ border-color:#a7f3d0; background:#f6fffb; }
#badge-timezone{ border-color:#e9d5ff; background:#fbf7ff; }
/* Optional: tiny dot before each chip (comment out if not desired) */
#event-badges [id^="badge-"]::before{
content:"";
width:.4rem; height:.4rem;
border-radius:50%;
background:currentColor;
opacity:.28;
}
/* Accessibility & interactions */
#event-badges [id^="badge-"]:focus-visible{
outline:2px solid var(--primary-color, #0f74bd);
outline-offset:2px;
}
#event-badges [id^="badge-"]{
transition:transform .08s ease, box-shadow .15s ease, background-color .2s ease;
}
#event-badges [id^="badge-"]:hover{
transform:translateY(-1px);
box-shadow:0 3px 10px rgba(0,0,0,.06);
}
/* Dark mode (optional) */
@media (prefers-color-scheme: dark){
#event-badges [id^="badge-"],
#event-badges .chip{
background:#ffffff;
border-color:#374151;
color:#e5e7eb;
box-shadow:none;
}
#badge-featured{
background:var(--primary-color, #0f74bd);
color:var(--on-primary, #fff);
}
}
.event-badges{
min-height: 100vh; /* fill the viewport */
display: flex!important;
align-items: center!important; /* vertical */
justify-content: center !important; /* horizontal */
}
/* Global form sizing — 1rem everywhere */
:root { --control-fs: 1rem; }
button,
input,
select,
textarea {
font-size: var(--control-fs) !important; /* enforce 1rem */
line-height: 1.25; /* nice vertical rhythm */
font-family: inherit; /* match site font */
}
/* Placeholders too */
input::placeholder,
textarea::placeholder {
font-size: var(--control-fs) !important;
}
/* If you also want consistent control height/padding, uncomment: */
/*
input,
select,
textarea {
padding: 0.65rem 0.85rem;
}
*/
/* Backdrop: center the modal and keep some breathing room around it */
.modal-backdrop{
position: fixed;
inset: 0;
display: none; /* shown via JS: display:flex */
align-items: center; /* vertical center */
justify-content: center; /* horizontal center */
background: rgba(2,8,23,.45);
z-index: 2000;
/* space around modal so it doesn't touch screen edges */
padding: clamp(16px, 4vh, 40px);
}
/* Modal panel: fixed width cap, auto height with a max, scroll inside if needed */
.modal{
width: min(560px, 100%);
max-height: 85vh; /* prevents full-height takeover */
overflow: auto; /* scroll inner content when tall */
background: #fff;
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: 0 20px 60px rgba(2,8,23,.18);
}
/* Optional: tidy spacing inside the modal */
.modal .modal-head{
padding: 16px 20px;
border-bottom: 1px solid var(--border);
}
.modal .modal-body{
padding: 16px 20px;
}
/* Small screens: a little more height to reduce inner scrolling */
@media (max-width: 480px){
.modal{ max-height: 90vh; }
}
#policies .rules-list li { display:flex; gap:.5rem; align-items:flex-start; }
#policies .rules-list li i { margin-top:.2rem; }
#policies .rules-list strong { font-weight:600; }
/* Fullscreen overlay */
#loader{
position: fixed !important;
inset: 0!important; /* top:0; right:0; bottom:0; left:0 */
background: rgba(255,255,255,.7)!important;
backdrop-filter: blur(2px)!important;
z-index: 9999!important;
display: none!important; /* hidden by default */
}
/* When visible, center content */
#loader.is-visible{
display: grid!important;
place-items: center!important;
}
/* Ensure inner box fills overlay (not strictly required but tidy) */
#loader .loader-content{
width: 100%!important;
height: 100%!important;
display: grid!important;
place-items: center!important;
}
/* Spinner */
.spinner{
width: 56px!important;
height: 56px!important;
border: 4px solid #e5e7eb!important;
border-top-color: #0f74bd!important;
border-radius: 50%!important;
animation: spin 1s linear infinite!important;
}
@keyframes spin { to { transform: rotate(360deg); } }
.card-banner img{ width:100%; height:100% !important; object-fit:cover }
.success-overlay{position:fixed;inset:0;background:#fff;display:flex;align-items:center;justify-content:center;z-index:9999;padding:24px}
.success-overlay[hidden]{display:none}
.success-card{max-width:520px;width:100%;text-align:center;background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 24px 60px rgba(2,8,23,.18);padding:24px}
.success-icon{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;background:#e6f9ef;color:#0f5132;font-size:38px}
/* Add these styles to your existing CSS */
.checkout-breakdown {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 15px;
margin-top: 15px;
}
.checkout-breakdown .subtotal {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
color: #374151;
}
.checkout-breakdown .fees {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
color: #6b7280;
font-size: 0.9rem;
}
.checkout-breakdown .total-line {
display: flex;
justify-content: space-between;
padding-top: 10px;
border-top: 2px solid #e5e7eb;
margin-top: 10px;
font-size: 1.1rem;
font-weight: bold;
color: #111827;
}
/* Multi-line clamp utilities for event descriptions */
.event-content .description {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* 3 lines on mobile */
.event-content .description.clamp-3 {
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important; /* modern browsers */
}
/* bump to 4 lines on medium+ screens */
@media (min-width: 768px) {
.event-content .description.clamp-3 {
-webkit-line-clamp: 4 !important;
line-clamp: 4 !important;
}
}
/* Square poster wrapper */
.event-card .poster {
position: relative !important;
width: 100%!important;
aspect-ratio: 1 / 1!important; /* forces a perfect square */
border-radius: 12px!important;
overflow: hidden!important;
}
/* Fill the square, nicely cropped */
.event-card .poster > img.event-image {
position: absolute!important;
inset: 0!important;
width: 100%!important;
height: 100%!important;
object-fit: cover!important;
display: block!important;
}
/* Skeleton stays square too */
.event-card .skeleton-image {
width: 100%!important;
aspect-ratio: 1 / 1!important;
border-radius: 12px!important;
}
/* Nuke any old fixed heights that might be fighting you */
.event-card .event-image,
.event-card .skeleton-image {
height: auto !important;
max-height: none !important;
}
/* --- Square event posters (1:1) --- */
/* A) Your current Artist page markup:
![]()
... */
#artist-events-grid .event-card > img,
.events-grid .event-card > img {
width: 100% !important;
aspect-ratio: 1 / 1 !important; /* forces square */
object-fit: cover !important; /* crop to fill square */
object-position: center !important;
display: block !important; /* remove inline-gap */
}
/* B) If you use a wrapper like:
![]()
*/
.event-card .poster {
position: relative !important;
width: 100% !important;
aspect-ratio: 1 / 1 !important; /* square container */
overflow: hidden !important; /* hide overflow for cropping */
}
.event-card .poster > img {
position: absolute !important;
inset: 0 !important; /* top/right/bottom/left:0 */
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
}
/* ===== Revert any previous pseudo-element hack ===== */
#artist-events-grid .event-card::before,
.events-grid .event-card::before {
content: none !important;
display: none !important;
}
/* ===== Ensure card stacks image (top) then content (below) ===== */
#artist-events-grid .event-card,
.events-grid .event-card {
display: flex;
flex-direction: column;
}
/* ===== A) When your markup is:
![]()
... ===== */
#artist-events-grid .event-card > img,
.events-grid .event-card > img {
/* make it a square that crops nicely */
width: 100% !important;
height: auto !important; /* let aspect-ratio decide height */
aspect-ratio: 1 / 1 !important; /* force square box */
object-fit: cover !important; /* crop to fill */
object-position: center !important;
display: block !important;
/* prevent flex parents from stretching it weirdly */
flex: 0 0 auto !important;
max-height: none !important;
}
/* Keep text below the image with some space */
#artist-events-grid .event-card .event-content,
.events-grid .event-card .event-content {
margin-top: 12px;
}
/* ===== B) If some cards use a wrapper:
![]()
===== */
.event-card .poster {
width: 100% !important;
aspect-ratio: 1 / 1 !important; /* square wrapper */
overflow: hidden !important;
}
.event-card .poster > img {
width: 100% !important;
height: 100% !important; /* fill wrapper */
object-fit: cover !important;
object-position: center !important;
display: block !important;
}
/* Optional: rounding only on the image top edge */
#artist-events-grid .event-card > img,
.events-grid .event-card > img,
.event-card .poster { border-radius: 12px 12px 0 0; }
/* Make the event poster fully rounded (all corners) */
#artist-events-grid .event-card > img,
.events-grid .event-card > img,
.event-card .poster,
.event-card .poster > img {
border-radius: 12px !important; /* instead of 12px 12px 0 0 */
}
/* (Optional) tiny gap so the rounded bottom isn't hidden by content */
#artist-events-grid .event-card .event-content,
.events-grid .event-card .event-content {
margin-top: 10px;
}
.contact-modal{
align-items: center !important;
align-self: center !important;
margin: auto !important;
align-content: center;
margin-left: 100px !important;
}
/* Defaults (already set by your JS)
:root { --primary-color:#0f74bd; --primary-hover:#095a8c; --on-primary:#fff; } */
/* Headings & icons */
#similar-events h2,
#similar-events h2 i,
#checkout h2,
#checkout h2 i {
color: var(--primary-color);
}
#similar-events .event-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px var(--primary-20a, rgba(0,0,0,.12));
border-color: var(--primary-hover);
}
#similar-events .event-content h3 {
color: inherit; /* inherit from parent if you color card titles later */
}
/* CHECKOUT */
#checkout .checkout-container {
border-top: 2px solid var(--primary-10a, rgba(0,0,0,.06));
}
#checkout .checkout-summary h3 {
color: var(--primary-color);
}
/* Buttons */
#checkout .button,
#checkout .qty-btn {
background: var(--primary-color);
color: var(--on-primary);
border: 1px solid var(--primary-color);
border-radius: 15px;
transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
#checkout .button:hover,
#checkout .qty-btn:hover {
background: var(--primary-hover);
border-color: var(--primary-hover);
}
/* Secondary button */
#checkout .button.secondary {
background: transparent;
color: var(--primary-color);
border-color: var(--primary-color);
}
#checkout .button.secondary:hover {
background: var(--primary-color);
color: var(--on-primary);
}
/* Inputs */
#checkout input[type="number"] {
border: 1px solid var(--primary-10a, rgba(0,0,0,.12));
border-radius: 15px;
padding: .4rem .6rem;
}
#checkout input[type="number"]:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px var(--primary-20a, rgba(0,0,0,.15));
}
/* Links inside checkout (if any) */
#checkout a {
color: var(--primary-color);
}
#checkout a:hover {
color: var(--primary-hover);
}
/* Make themed icons follow currentColor (your JS already fixes legacy hex fills) */
#similar-events h2 i,
#checkout h2 i,
#checkout .button i {
color: currentColor;
}
/* In the Similar Events cards, the description is the 2nd
*/
#similar-events .event-card .event-content p:nth-of-type(2) {
display: -webkit-box;
-webkit-line-clamp: 2; /* number of lines */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: anywhere; /* handle long words/urls */
}
/* Square images in Similar Events */
#similar-events .event-card {
display: flex;
flex-direction: column;
}
#similar-events .event-card .event-image {
width: 100% !important;
height: 100% !important;
aspect-ratio: 1 / 1!important; /* force square */
object-fit: cover!important; /* crop to fill */
object-position: center!important;
display: block!important;
border-radius: 12px!important; /* match your card style (optional) */
}
/* Make skeletons square too */
#similar-events .skeleton-card .skeleton-image {
width: 100%!important;
aspect-ratio: 1 / 1!important;
border-radius: 12px!important; /* optional, to match */
}
.btn[disabled]{ opacity:.6; cursor:not-allowed; filter:grayscale(20%); }
.dnd-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ticket-item{
display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--border);
border-radius:12px;background:#fff;box-shadow:var(--shadow)
}
.ticket-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.drag-handle{
width:28px;height:28px;border:1px dashed #cfd7e6;border-radius:8px;display:flex;align-items:center;justify-content:center;
cursor:grab; user-select:none; flex:0 0 28px
}
.ticket-title{font-weight:700;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ticket-meta{color:#6b7280;font-size:.9rem}
.ticket-actions{display:flex;gap:6px}
.ticket-item.dragging{opacity:.6}
.ticket-item.drop-target{outline:2px dashed var(--primary);outline-offset:2px}
/* Make the color input render a visible swatch instead of a thin line */
.field input[type="color"]{
padding: 0; /* the native control doesn't like big padding */
height: 42px; /* pick a size that fits your UI */
width: 100%;
border-radius: 12px;
}
/* Chrome / Edge */
.field input[type="color"]::-webkit-color-swatch-wrapper{ padding: 0; border-radius: 12px; }
.field input[type="color"]::-webkit-color-swatch{ border: none; border-radius: 12px; }
/* Firefox */
.field input[type="color"]::-moz-color-swatch{ border: none; border-radius: 12px; }
.rev-kpis{
display:grid; gap:10px;
grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (min-width: 900px){
.rev-kpis{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
.rev-kpi{
border:1px solid var(--border);
border-radius:12px;
padding:10px; background:#fff;
}
#seating-wrap textarea{min-height:120px;resize:vertical}
.seat-ok.badge{border-color:#c7f0d5;background:#eefcf3;color:#136d2b}
.seat-warn.badge{border-color:#ffe08a;background:#fff8e1;color:#6b4e00}
.seat-err.badge{border-color:#ffd1d6;background:#fff1f2;color:#b42318}
/* Stadium SVG viewer */
.stadium-canvas{
position:relative; width:100%; aspect-ratio:1.6/1;
border:1px solid var(--border); border-radius:12px; background:#fff;
overflow:hidden;
}
#stadium-svg{ width:100%; height:100%; display:block; }
.stadium-tip{
position:absolute; pointer-events:none; transform:translate(-50%, -120%);
padding:.35rem .55rem; font-size:.85rem; background:#111827; color:#fff;
border-radius:8px; box-shadow:0 8px 20px rgba(2,8,23,.2); opacity:0; transition:.15s;
left:-9999px; top:-9999px; white-space:nowrap; z-index:2;
}
/* Blocks & seats look */
.block-wedge{
cursor:pointer; stroke:#fff; stroke-width:1.5;
transition:transform .18s ease, opacity .18s ease, fill-opacity .2s ease;
transform-origin:center;
}
.block-wedge:hover{ transform:scale(1.03); }
.block-wedge.selected{ outline:2px solid #111827; filter:drop-shadow(0 6px 16px rgba(2,8,23,.18)); }
.seat-dot{
fill:#94a3b8; opacity:.8; transition:opacity .15s, r .15s, transform .1s;
}
.seat-dot:hover{ opacity:1; r:2.7; }
.seat-dot.blocked{ fill:#cbd5e1; opacity:.5; }
.seat-dot.highlight{ fill:#0f74bd; opacity:1; r:3.2; transform:scale(1.15); }
.level-label, .block-label{
font-size:10px; fill:#0f172a; text-anchor:middle; dominant-baseline:middle; user-select:none;
}
/* View modes */
#stadium-svg .layer-overview{ transition:opacity .18s ease; }
#stadium-svg .layer-block{ transition:opacity .18s ease; }
.badge.lvl { border-color:#cfd7e6; background:#f8fafc; }