/* --- 1. GENERAL RESET AND TYPOGRAPHY --- */ /* ASSUMPTION: We assume Google Fonts like 'Montserrat' or 'Open Sans' are linked in the HTML for the modern aesthetic. */ :root { --color-primary: #002D59; /* Deeper Ocean Blue */ --color-primary-light: #004488; /* Header Background */ --color-accent-gold: #FFC300; /* Vibrant Gold */ --color-accent-gold-hover: #FFA500; /* Darker Gold for Hover */ --color-accent-silver: #E0E0E0; /* Light Silver/Gray */ --color-background-light: #f4f6f9; /* Soft Off-White for sections */ --color-text-dark: #222222; --color-text-light: #ffffff; --font-heading: 'Montserrat', sans-serif; --font-body: 'Open Sans', sans-serif; --shadow-subtle: 0 4px 15px rgba(0, 0, 0, 0.1); --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.1); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-body); line-height: 1.7; background-color: var(--color-text-light); color: var(--color-text-dark); } h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.2; font-weight: 700; color: var(--color-primary); } a { text-decoration: none; transition: color 0.3s, background-color 0.3s; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .content-section { padding: 80px 0; text-align: center; /* Centers the heading block within the section */ } .bg-light { background-color: var(--color-background-light); } /* --- 2. HEADER AND NAVIGATION --- */ header { background-color: var(--color-primary-light); color: white; padding: 15px 5%; /* Adjusted padding for better responsiveness */ display: flex; /* Use flex for horizontal alignment on desktop */ justify-content: space-between; /* Pushes logo left, nav right */ align-items: center; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } header .logo { display: flex; align-items: center; margin-left: 0; /* Removed margin-left: 20px; for cleaner padding alignment */ } header .header-logo { height: 85px; /* Adjust size for sleek look */ } header h1 { font-size: 1.5em; font-weight: 900; color: white; margin-left: 10px; } nav ul { list-style: none; display: flex; /* Keeps menu horizontal on desktop */ margin-right: 0; /* Removed margin-right: 20px; for cleaner padding alignment */ } nav ul li a { color: white; padding: 10px 15px; font-weight: 500; position: relative; transition: color 0.3s, background-color 0.3s; } nav ul li a:hover { color: var(--color-accent-gold); } /* Underline animation for modern touch */ nav ul li a:after { content: ''; position: absolute; width: 0; height: 3px; display: block; margin-top: 5px; right: 0; background: var(--color-accent-gold); transition: width 0.3s ease; } nav ul li a:hover:after, nav ul li a.active:after { width: 100%; left: 0; background: var(--color-accent-gold); } /* --- NEW HAMBURGER ICON STYLING (Hidden by default on desktop) --- */ .hamburger { display: none; /* Hidden on desktop */ background: none; border: none; cursor: pointer; padding: 10px; z-index: 1000; } .hamburger .bar { display: block; width: 30px; height: 3px; margin: 6px auto; background-color: var(--color-text-light); /* White bars */ transition: all 0.3s ease-in-out; } /* --- 3. CALL TO ACTION BUTTONS (CTA) --- */ .cta-button { background-color: var(--color-accent-gold) !important; color: var(--color-primary) !important; padding: 10px 25px !important; border-radius: 50px; font-weight: 800; margin-left: 20px; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(255, 195, 0, 0.4); } .cta-button:hover { background-color: var(--color-accent-gold-hover) !important; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(255, 165, 0, 0.6); } .cta-primary { background-color: var(--color-accent-gold); color: var(--color-primary) !important; padding: 15px 40px; border-radius: 50px; font-size: 1.1em; font-weight: 900; display: inline-block; margin-top: 30px; transition: all 0.3s ease; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); } .cta-primary:hover { background-color: var(--color-accent-gold-hover); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); } /* --- 4. HERO SECTION (INDEX PAGE - THE "WOW" START) --- */ #hero { height: 100vh; background: linear-gradient(rgba(0, 34, 68, 0.1), rgba(0, 34, 68, 0.1)), url('Assets/band-banner.jpeg') center center no-repeat; background-size: cover; display: flex; align-items: center; justify-content: center; text-align: center; color: white; } .hero-content { padding: 20px; max-width: 900px; animation: fadeIn 1.5s ease-out; } #hero h1 { font-size: 4.5em; /* Large, impressive heading */ font-weight: 900; margin-bottom: 10px; color: var(--color-text-light); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } #hero h2 { font-size: 2em; font-weight: 300; margin-bottom: 25px; color: var(--color-accent-silver); } #hero p { font-size: 1.3em; margin-bottom: 30px; color: var(--color-accent-silver); } /* --- 5. INDEX PREVIEWS (INTERESTING FLOW) --- */ .section-title h2 { font-size: 2.8em; margin-bottom: 5px; color: var(--color-primary); } .section-title h3 { font-size: 1.2em; font-weight: 400; color: var(--color-accent-gold); margin-bottom: 50px; } .preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px; } .preview-item { background-color: white; padding: 30px; border-radius: 12px; text-align: left; box-shadow: var(--shadow-card); transition: transform 0.3s ease, box-shadow 0.3s ease; border-top: 5px solid var(--color-accent-gold); /* Gold stripe for accent */ } .preview-item:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); } .preview-item h3 { color: var(--color-primary-light); font-size: 1.6em; margin-bottom: 15px; border-bottom: 1px solid var(--color-accent-silver); padding-bottom: 10px; } .preview-item p { margin-bottom: 15px; } .preview-link { color: var(--color-primary); font-weight: 700; display: inline-block; margin-top: 10px; } .preview-link:hover { color: var(--color-accent-gold); } /* Media Spotlight Section */ .media-spotlight { background-color: var(--color-primary); /* Deep Blue Background */ padding: 80px 0; margin-top: 80px; color: white; text-align: center; } .media-spotlight h2 { color: var(--color-accent-gold); font-size: 2.5em; margin-bottom: 30px; } .video-placeholder { max-width: 800px; margin: 0 auto 30px; background-color: rgba(255, 255, 255, 0.1); height: 400px; display: flex; align-items: center; justify-content: center; border-radius: 10px; overflow: hidden; position: relative; /* Needed for video iframe */ } /* --- 6. PAGE-SPECIFIC CONTENT SECTIONS --- */ /* General content containers */ .container h2 { font-size: 2.5em; margin-bottom: 10px; text-align: center; } .container h3 { font-size: 1.1em; font-weight: 400; color: var(--color-accent-gold); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; text-align: center; } /* RULE for Left Alignment */ .container p { text-align: left; max-width: 900px; /* Sets a max width for comfortable reading */ margin: 0 auto 1.7em auto; /* Centers the block of text, but the text inside is left-aligned */ } /* Bio/Performance/Workshop Image Placeholders */ .bio-image-placeholder, .performance-image-placeholder, .school-image-placeholder { width: 100%; height: 450px; background-color: var(--color-accent-silver); margin: 40px 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--color-primary); font-weight: 600; font-size: 1.2em; position: relative; /* CRITICAL: To contain the absolute image */ overflow: hidden; /* Ensure image corners are clipped */ } /* *** CRITICAL FIX: The rule below ensures all images (in placeholders and the gallery) fill 100% of their containers and use 'object-fit: cover' to prevent stretching. */ .bio-image-placeholder img, .performance-image-placeholder img, .school-image-placeholder img, .image-placeholder-item img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; /* This prevents stretching/distortion while forcing the image to cover the square space */ border-radius: inherit; } .mission { background-color: var(--color-primary); color: white; padding: 25px; border-left: 5px solid var(--color-accent-gold); margin: 30px auto; max-width: 900px; /* Must set max-width here to match paragraphs */ font-style: italic; border-radius: 0 10px 10px 0; text-align: left; font-weight: 500; } /* Performances Specific */ .client-list { list-style: none; padding: 0; margin: 40px auto; max-width: 900px; /* Adjusting max width for consistency */ display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; text-align: center; /* keep this centered as a block of tags */ } .client-list li { background-color: white; padding: 10px 20px; border-radius: 50px; font-weight: 600; color: var(--color-primary); box-shadow: var(--shadow-subtle); transition: background-color 0.3s; text-align: center; } .client-list li:hover { background-color: var(--color-accent-silver); } .achievement-highlight { background-color: var(--color-accent-gold); color: var(--color-primary); padding: 30px; margin: 50px auto; max-width: 900px; font-size: 1.4em; font-weight: 700; border-radius: 10px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); text-align: center; /* Keep this centered as a callout block */ } /* Workshops Specific */ .callout-box { background-color: white; border: 1px solid var(--color-accent-silver); padding: 30px; margin: 40px auto; max-width: 800px; border-radius: 10px; text-align: left; box-shadow: var(--shadow-subtle); } .callout-box h4 { color: var(--color-accent-gold); font-size: 1.5em; margin-bottom: 20px; border-bottom: 2px solid var(--color-accent-silver); padding-bottom: 10px; } .callout-box ul { list-style-type: none; padding-left: 0; } .callout-box ul li { padding: 10px 0; border-bottom: 1px dashed var(--color-accent-silver); font-size: 1.1em; } .callout-box ul li:before { content: '★'; /* A simple star icon */ color: var(--color-accent-gold); font-weight: 900; margin-right: 10px; } .cta-workshops { font-size: 1.2em; margin-top: 40px; font-weight: 600; text-align: center; /* Keep this centered as a call to action */ } /* Book Us Specific */ @media (max-width: 600px) { /* NEW: Booking config strip stack on small screens */ .config-strip { flex-direction: column; } .config-item { margin-bottom: 15px; } .contact-info { padding-bottom: 20px; } } .intro-text { font-size: 1.4em; margin-bottom: 50px; font-style: italic; color: #555; text-align: center; /* Keep this centered as an intro line */ } .contact-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; text-align: center; margin-bottom: 50px; } .contact-item { background-color: white; padding: 30px; border-radius: 10px; box-shadow: var(--shadow-subtle); text-align: center; /* Keep contact items centered */ } hr { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 34, 68, 0.75), rgba(0, 0, 0, 0)); margin: 50px 0; } /* --- 6.1. NEW SECTION: GALLERY SPOTLIGHT (on Index page) --- */ #gallery-spotlight { padding-top: 50px; } .image-grid-spotlight { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */ gap: 20px; margin: 40px auto; max-width: 1000px; } .image-placeholder-item { background-color: var(--color-accent-silver); border-radius: 8px; overflow: hidden; position: relative; padding-top: 100%; /* CRITICAL: This line forces the DIV to maintain a 1:1 (square) aspect ratio */ box-shadow: var(--shadow-subtle); transition: transform 0.3s ease, box-shadow 0.3s ease; /* The image inside will now fill this container */ display: block; } .image-placeholder-item:hover { transform: scale(1.03); box-shadow: var(--shadow-card); } /* --- 7. REVIEWS & MEDIA STYLES (Book Us Page) --- */ /* NOTE: The reviews carousel design (below) has been replaced by a static stacked design using .reviews-container, per user request for the former design. The code below is now inactive but kept for reference. */ .reviews-carousel-placeholder h3 { margin-top: 0; } /* Video Playback Logic (Applies to Index and Book Us) */ .video-wrapper { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } /* Iframe for the video */ .video-placeholder iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } /* Instagram Mockup Styles */ .instagram-simulation { padding: 30px; text-align: center; width: 100%; } .instagram-simulation h4 { color: var(--color-primary); font-size: 2em; margin-bottom: 5px; } .instagram-simulation p { color: #888; font-weight: 600; font-size: 1.1em; margin-bottom: 25px; } .instagram-grid-mock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 25px; } .mock-post { background-color: var(--color-accent-silver); padding-top: 100%; /* Creates a perfect square for the image placeholder */ position: relative; display: flex; align-items: center; justify-content: center; font-size: 0.9em; color: #777; font-weight: 600; border-radius: 5px; } /* --- 8. FOOTER --- */ footer { background-color: #111; color: var(--color-accent-silver); text-align: center; padding: 20px 0; font-size: 0.9em; } /* --- 9. RESPONSIVENESS (for modern mobile experience) --- */ @media (max-width: 900px) { /* --- NEW HAMBURGER MENU LOGIC --- */ /* 1. Show the Hamburger Icon */ .hamburger { display: block; position: absolute; right: 5%; /* Position the icon nicely on the right */ top: 50%; transform: translateY(-50%); } /* 2. Hide/Style the Navigation Menu for Mobile */ .nav-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; /* Full viewport height */ background-color: rgba(0, 34, 68, 0.98); /* Deep Blue overlay */ padding-top: 80px; /* Slide off-screen to the left by default */ transform: translateX(-100%); transition: transform 0.4s ease-in-out; z-index: 990; } /* 3. Make the links vertical and full-width */ .nav-menu ul { flex-direction: column; text-align: center; padding-top: 40px; } .nav-menu ul li { margin: 0; } .nav-menu ul li a { display: block; padding: 15px 0; font-size: 1.5em; /* Larger links for easy tapping */ border-bottom: 1px solid rgba(255, 255, 255, 0.1); } /* Remove the underline animation style on mobile for cleaner look */ .nav-menu ul li a:after { content: none; } /* Ensure the CTA button looks good in the mobile menu */ .nav-menu ul li a.cta-button { margin: 20px auto; display: inline-block; } /* 4. The Active State (Toggled by JavaScript) */ .nav-menu.active { transform: translateX(0); /* Slides the menu into view */ } /* --- NEW CODE: HAMBURGER TO 'X' TRANSFORMATION --- */ /* This transforms the three bars into an 'X' when the 'open' class is applied by JS */ .hamburger.open .bar:nth-child(1) { transform: translateY(9px) rotate(45deg); } .hamburger.open .bar:nth-child(2) { opacity: 0; /* Hides the middle bar */ } .hamburger.open .bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } /* --- END NEW CODE --- */ /* General Responsive Tweaks below this line */ header { /* Adjusted the header to stay horizontal but compact */ position: fixed; /* Keep it fixed at the top */ width: 100%; padding: 15px 5%; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } @media (max-width: 600px) { /* NEW: Booking config strip stack on small screens */ .config-strip { flex-direction: column; } .config-item { margin-bottom: 15px; } .contact-info { padding-bottom: 20px; } } /* --- 9. MAIN PAGE HERO BANNER HEIGHT ADJUSTMENT --- */ @media (max-width: 768px) { /* Reduce the height of the main content banner to prevent cropping */ #hero { /* *** NEW CHANGE: Significantly shorter on mobile *** */ height: 50vh; /* You can try 45vh or 55vh if needed */ padding: 0 15px; /* Ensures text content has some side padding on small screens */ } /* Ensure text remains visible and not too large */ #hero h1 { font-size: 2.5rem; } #hero h2 { font-size: 1.5rem; } } #hero h1 { font-size: 3em; } #hero h2 { font-size: 1.5em; } /* Index Previews */ .preview-grid { grid-template-columns: 1fr; } /* Gallery Grid adjusts to 2 columns on tablet/mid-screens */ .image-grid-spotlight { grid-template-columns: repeat(2, 1fr); } /* Book Us */ .contact-info-grid { grid-template-columns: 1fr; } /* Ensure review blocks stack on mobile */ .reviews-container { grid-template-columns: 1fr; } .instagram-grid-mock { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { /* Gallery Grid adjusts to 1 column on mobile screens */ .image-grid-spotlight { grid-template-columns: 1fr; } } /* --- NEW VIDEO GALLERY STYLES (Book Us Page & Index Fix) --- */ /* 1. Index Page Video Centering and Sizing Fix */ #media .video-placeholder { max-width: 800px; margin: 30px auto; } /* Hides the title and description text beneath each video card */ .video-card .video-info { /* CRITICAL FIX: Use !important to override any conflicting styles */ display: none !important; } /* 2. Global Video Wrapper (Aspect Ratio Container) */ .video-wrapper { position: relative; width: 100%; padding-top: 100%; /* **FIXED: Square Frame (1:1)** */ background: #000; } /* 3. Global Play Button/Iframe Positioning (Must be inside .video-wrapper) */ .video-wrapper iframe, .video-wrapper .play-button { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; cursor: pointer; } /* CRITICAL FIX: Ensures the image thumbnail is visible beneath the play button */ .video-wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* 4. Global Play Button Centering and Styling */ .play-button { /* **CRITICAL FIX**: Changed from solid color to semi-transparent overlay */ background-color: rgba(0, 0, 0, 0.3); color: var(--color-text-light); font-size: 1.2em; font-weight: bold; border: none; transition: background-color 0.3s ease; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 0; /* Removed padding so image fills the area */ pointer-events: auto; /* Ensure it is clickable */ } .play-button:hover { background-color: rgba(0, 0, 0, 0.5); /* Darker overlay on hover */ } /* Style the play icon itself to be highly visible over the image */ .play-button::before { content: '▶'; font-size: 3em; color: var(--color-accent-gold); background-color: white; padding: 20px 25px; border-radius: 50%; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); transition: transform 0.3s ease; margin-bottom: 0; /* Removed margin-bottom */ } .play-button:hover::before { transform: scale(1.1); } /* 5. Book Us Gallery Specific Styles (Grid structure) */ .video-gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin: 40px 0; } .video-item { background-color: var(--color-background-light); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-subtle); transition: transform 0.3s ease; text-align: center; padding-bottom: 20px; } .video-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); } .video-item h4 { color: var(--color-primary); margin: 15px 10px 5px 10px; } .video-item p { color: var(--color-text-dark); font-size: 0.9em; margin: 0 10px 15px 10px; } /* The video-wrapper definition is repeated here, ensure it is also 100% */ .video-item .video-wrapper { position: relative; width: 100%; padding-top: 100%; /* **FIXED**: Ensures square video frames in the gallery */ background: #000; } /* The rest of the video-item styles for iframe and play button are covered by the global .video-wrapper rules. */ /* --- NEW VIDEO BANNER STYLES (Performances Page Banner) --- */ .video-banner-container { position: relative; width: 100%; padding-top: 56.25%; /* Keeps the banner video 16:9 ratio */ margin: 30px 0; overflow: hidden; border-radius: 8px; box-shadow: var(--shadow-subtle); background-color: #000; } .video-banner-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; /* Prevents users from clicking the YouTube controls while it's a banner */ pointer-events: none; } /* --- 13. BOOKING PAGE STYLES (PROFESSIONAL REFINEMENT) --- */ .booking-section { display: grid; grid-template-columns: 1fr; gap: 0; /* Changed from 40px to 0 for a continuous card look */ max-width: 1000px; /* Increased max width for a grander feel */ margin: 40px auto 60px; background: var(--color-text-light); /* White background for the main container */ border-radius: 12px; /* Increased shadow for more depth and professionalism */ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); overflow: hidden; /* Ensures contents stay within rounded corners */ } @media (min-width: 768px) { .booking-section { grid-template-columns: 1fr 1.5fr; } } /* 13.1 Contact Info Styling (Left Column - Highlighted) */ .contact-info { /* Subtle background to highlight the contact details */ background-color: var(--color-background-light); padding: 30px; /* Removed border-right, as the background difference is enough separation */ } @media (min-width: 768px) { .contact-info { padding: 40px; /* More padding on desktop */ } } .contact-info h4 { color: var(--color-primary); margin-bottom: 25px; font-size: 1.6rem; border-bottom: 2px solid var(--color-accent-gold); /* Professional underline */ padding-bottom: 10px; } .contact-list { list-style: none; padding: 0; margin-top: 30px; } .contact-list li { margin-bottom: 20px; font-size: 1.1rem; display: flex; align-items: flex-start; /* Aligns to top for multi-line text */ } .contact-list li i { color: var(--color-primary); /* Use primary color for icons */ font-size: 1.3rem; /* Slightly larger icon */ margin-right: 20px; width: 25px; text-align: center; } .contact-info .note { font-size: 0.95rem; margin-top: 30px; color: var(--color-text-dark); font-style: italic; } /* 13.2 Form Styling (Right Column) */ .booking-form { padding: 30px; } @media (min-width: 768px) { .booking-form { padding: 40px; /* Padding and border adjustments for desktop */ } } @media (max-width: 767px) { /* Reset mobile styles for seamless transition */ .booking-form { padding-top: 30px; border-top: 1px solid var(--color-accent-silver); } } .booking-form h4 { color: var(--color-primary); margin-bottom: 30px; font-size: 1.6rem; border-bottom: 2px solid var(--color-accent-gold); padding-bottom: 10px; } .form-group { margin-bottom: 25px; } .form-group label { font-weight: 600; /* Bolder label */ font-size: 0.95rem; color: var(--color-primary); /* Use primary color for label */ } .form-group input, .form-group select, .form-group textarea { padding: 14px; /* More vertical padding for better look */ border: 1px solid var(--color-accent-silver); border-radius: 8px; /* Slightly more rounded corners */ } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--color-accent-gold); /* Gold focus border */ outline: none; box-shadow: 0 0 0 2px rgba(255, 195, 0, 0.4); /* Gold shadow on focus */ } .privacy-note { font-size: 0.8rem; color: #888; margin-top: 15px; text-align: center; } /* --- 14. BAND CONFIGURATION STRIP STYLES (REFINED) --- */ .band-configurations { margin-top: 30px; margin-bottom: 30px; padding: 20px 0; /* Use a clean box for containment */ background-color: var(--color-text-light); border-radius: 6px; border: 1px solid var(--color-accent-silver); padding: 15px; } .config-text { font-size: 1rem; margin-bottom: 15px; color: var(--color-text-dark); font-weight: 500; } .config-strip { display: flex; justify-content: space-between; gap: 15px; } .config-item { flex: 1; text-align: center; border: none; background-color: #fff; border-radius: 6px; overflow: hidden; /* Subtle shadow for lift */ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); transition: transform 0.2s; } .config-item:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .config-item img { width: 100%; height: 150px; object-fit: cover; margin-bottom: 0; } .config-item span { display: block; font-size: 0.95rem; font-weight: 700; color: var(--color-primary); padding: 8px 5px; /* Give the text a slight background for separation */ background-color: var(--color-background-light); } /* Mobile Responsiveness for Config Strip */ @media (max-width: 550px) { .config-strip { flex-direction: column; } .config-item img { height: 120px; /* Slightly smaller height for mobile stack */ } } /* --- 7. REVIEWS CAROUSEL STYLES (Book Us Page - Final Slider Look) --- */ .reviews-carousel { max-width: 700px; /* Limits the width of the carousel on large screens */ margin: 30px auto; overflow: hidden; /* CRITICAL: Hides reviews that are off-screen */ position: relative; /* CRITICAL: For positioning the arrows */ border-radius: 10px; box-shadow: var(--shadow-card); } .carousel-track { display: flex; /* CRITICAL: Puts all review cards side-by-side */ transition: transform 0.5s ease-in-out; /* Smooth sliding animation */ } /* This styles the individual review card (The blue design you like) */ .review-card { min-width: 100%; /* CRITICAL: Ensures each card takes up 100% of the visible space */ padding: 40px; background-color: var(--color-primary); /* Deep Blue Background */ color: white; text-align: center; display: flex; flex-direction: column; justify-content: center; border-radius: 10px; box-sizing: border-box; /* Include padding in the width calculation */ } .review-card p { font-size: 1.5em; font-style: italic; margin-bottom: 20px; color: var(--color-accent-silver); } .review-card .client { font-size: 1.1em; font-weight: 700; color: var(--color-text-light); } /* Carousel Navigation Buttons (Using site blue accent) */ .carousel-button { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */ border: none; padding: 10px 15px; cursor: pointer; font-size: 1.5em; z-index: 10; border-radius: 50%; /* Make them round */ transition: background 0.3s, color 0.3s; color: var(--color-primary); /* Button text/icon is primary blue */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .carousel-button:hover { background: white; color: var(--color-primary-light); } .carousel-button.prev { left: 10px; } .carousel-button.next { right: 10px; } /* Hide buttons when disabled */ .carousel-button:disabled { opacity: 0.5; cursor: default; } /* Instagram Embeds (REELS SECTION FIX: Ensures 3 videos side-by-side) */ .instagram-grid-embed { display: grid; grid-template-columns: repeat(3, 1fr); /* Ensures 3 columns side-by-side */ gap: 20px; max-width: 1000px; /* Increased max width for better video display */ margin: 0 auto; } .reel-placeholder { /* *** MODIFIED: Set to 16:9 aspect ratio (standard horizontal YouTube video) *** */ position: relative; width: 100%; padding-top: 56.25%; /* 9 / 16 = 0.5625 (56.25%) */ background-color: #000; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-subtle); } /* Makes the IFRAME fit inside the placeholder using the aspect ratio */ .reel-placeholder iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 8px; } /* Find the .splash-content rule and replace its contents with this: */ .splash-content { /* *** NEW ABSOLUTE CENTERING METHOD *** */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 5; /* Ensures it sits above the video */ /* Optional content styles */ max-width: 90%; padding: 20px; text-align: center; /* CRITICAL: Set general text color to white */ color: var(--color-text-light); } .splash-content h1 { font-size: 5rem; /* CRITICAL: Set color back to white and add dark shadow */ color: var(--color-text-light); text-shadow: 0 0 15px rgba(0, 0, 0, 0.9); /* Strong, dark shadow for visibility */ /* Keep other styles */ border-bottom: 5px solid var(--color-accent-gold); padding-bottom: 15px; display: inline-block; } .splash-buttons { display: flex; gap: 30px; margin-top: 30px; /* CENTERING THE BUTTONS: Added margins for automatic centering */ margin-left: auto; margin-right: auto; /* This ensures the flex container doesn't stretch and the auto margins work */ width: fit-content; } /* --- 6. SPLASH SCREEN MOBILE OPTIMIZATION (FINAL PLACEMENT ADJUSTMENT) --- */ @media (max-width: 600px) { /* --- 5. SPLASH SCREEN (INDEX PAGE) --- */ #splash-screen { height: 100vh; width: 100vw; /* CRITICAL: Must be relative to anchor the content/video */ position: relative; overflow: hidden; } /* Set buttons side-by-side (row) */ .splash-buttons { gap: 15px; flex-direction: row; margin: 0 auto; } /* Keep button size small for mobile */ .cta-primary { padding: 10px 15px; font-size: 0.8rem; width: auto; max-width: none; } } /* --- 10. HEADER & LOGO MOBILE ADJUSTMENTS (Final Small Size - Specificity Fix) --- */ @media (max-width: 768px) { /* Reduce the overall header height for mobile */ header { height: 60px; align-items: center; } /* *** Specificity Fix: Use 'header .header-logo' to ensure the override works *** */ header .header-logo { /* This size MUST be smaller than the header height (60px) */ height: 45px; /* Remove any manual margins */ margin: 0; } /* Ensure the hamburger button also aligns nicely */ .hamburger { margin: 0; } } /* --- 11. YOUTUBE VIDEO BACKGROUND STYLES FOR #splash-screen (FINAL COVER FIX) --- */ /* The container forces the iframe to stretch and sit behind the content */ .video-background-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; /* Puts the video below the text content (z-index: 5) */ overflow: hidden; } /* The iframe itself is stretched and resized to always COVER the container */ .video-background { /* ** CRITICAL FIX: Ensures 16:9 video always covers the whole screen ** */ /* Set based on aspect ratio (16:9) */ width: 100vw; height: 56.25vw; /* Ensure it is never smaller than the viewport height/width */ min-height: 100vh; /* Set minimum height to 100% of viewport height */ min-width: 177.78vh; /* 16 / 9 = 1.7778. Ensures width expands if height is set to 100vh */ /* Center the video within its container */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* Prevents users from clicking or interacting with the background video */ pointer-events: none; } /* --- SPLASH SCREEN MOBILE OPTIMIZATION (FINAL SIZE FIX & BUTTON WRAPPING FIX) --- */ @media (max-width: 768px) { /* 1. Shrink the main title for small screens */ .splash-content h1 { /* Significantly reduced font size for mobile screens */ font-size: 1.8rem !important; /* Reduce the thickness and padding of the border */ border-bottom-width: 2px !important; padding-bottom: 8px !important; /* Ensure less vertical space between the title and buttons */ margin-bottom: 20px; } /* 2. Shrink buttons for a better mobile fit */ .splash-buttons { gap: 15px; /* Reduce space between the two buttons */ /* Ensure buttons stay in a row */ flex-direction: row; } .splash-buttons .cta-primary { padding: 8px 12px; /* Smaller button padding */ font-size: 0.8rem; /* Smaller button text */ /* *** CRITICAL FIX: Stops the text from wrapping *** */ white-space: nowrap; } } /* --- NEW VIDEO BANNER STYLES (Performances Page Banner) --- */ .video-banner-container { position: relative; width: 100%; padding-top: 56.25%; /* Keeps the banner video 16:9 ratio */ margin: 30px 0; overflow: hidden; border-radius: 8px; box-shadow: var(--shadow-subtle); background-color: #000; } .video-banner-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; /* FIX: This line was preventing clicks. Changing to 'auto' enables interaction. */ pointer-events: auto; } /* --- 13. BOOKING PAGE STYLES (PROFESSIONAL REFINEMENT) --- */ /* ... rest of the CSS file ... */ /* New Standalone Configurations Layout */ .band-configurations-new { margin: 40px 0 60px 0; } .config-grid-new { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; } .config-card-new { position: relative; overflow: hidden; border-radius: 12px; height: 300px; /* Large uniform height */ box-shadow: var(--shadow-subtle); } .config-card-new img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .config-card-new:hover img { transform: scale(1.1); } .card-overlay { position: absolute; bottom: 0; width: 100%; background: linear-gradient(transparent, rgba(0, 45, 89, 0.9)); padding: 20px; color: white; text-align: center; } .card-overlay span { font-weight: 700; font-size: 1.2rem; text-transform: uppercase; } /* New Split Hub Layout */ .booking-split-hub { display: grid; grid-template-columns: 1fr 1.5fr; gap: 40px; text-align: left; } .contact-card-hub { background: var(--color-primary); color: white; padding: 40px; border-radius: 15px; } .contact-list-new { list-style: none; margin-top: 25px; } .contact-list-new li { margin-bottom: 20px; display: flex; align-items: center; gap: 15px; } .contact-list-new i { color: var(--color-accent-gold); font-size: 1.2rem; } /* Form Polish */ .form-container-hub { background: white; padding: 40px; border-radius: 15px; box-shadow: var(--shadow-card); } .form-row-new { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .form-group-new { margin-bottom: 15px; } .full-width { width: 100%; } /* Mobile View: Everything stacks beautifully */ @media (max-width: 768px) { .config-grid-new, .booking-split-hub, .form-row-new { grid-template-columns: 1fr; } .config-card-new { height: 200px; } } /* --- STYLISH FORM ENHANCEMENTS --- */ .form-container-hub { background: #ffffff; padding: 50px; border-radius: 20px; box-shadow: var(--shadow-card); border: 1px solid rgba(0, 0, 0, 0.05); } .form-header { margin-bottom: 35px; border-left: 4px solid var(--color-accent-gold); padding-left: 20px; } .form-header h4 { font-size: 2rem; color: var(--color-primary); margin-bottom: 5px; } .form-header p { color: #666; font-size: 0.95rem; } .form-group-new label { display: block; font-weight: 600; margin-bottom: 8px; color: var(--color-primary); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; } /* Input Wrappers with Icons */ .input-wrapper { position: relative; display: flex; align-items: center; } .input-wrapper i { position: absolute; left: 15px; color: #999; transition: color 0.3s ease; } .input-wrapper input, .input-wrapper select, .form-group-new textarea { width: 100%; padding: 14px 15px 14px 45px; /* Extra padding on left for icon */ border: 2px solid #edf2f7; border-radius: 10px; font-family: var(--font-body); font-size: 1rem; background-color: #f8fafc; transition: all 0.3s ease; } .form-group-new textarea { padding-left: 15px; /* No icon for textarea */ resize: none; } /* Hover & Focus Effects */ .input-wrapper input:focus, .input-wrapper select:focus, .form-group-new textarea:focus { outline: none; border-color: var(--color-primary); background-color: #fff; box-shadow: 0 0 0 4px rgba(0, 45, 89, 0.1); } .input-wrapper input:focus + i { color: var(--color-primary); } /* Stylish Submit Button */ .cta-primary-stylish { background-color: var(--color-primary); color: white; padding: 16px 32px; border: none; border-radius: 10px; font-weight: 700; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; transition: all 0.3s ease; margin-top: 10px; } .cta-primary-stylish:hover { background-color: var(--color-primary-light); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 45, 89, 0.3); } .cta-primary-stylish i { font-size: 0.9rem; transition: transform 0.3s ease; } .cta-primary-stylish:hover i { transform: translateX(5px) rotate(-15deg); } /* Responsive adjustments */ @media (max-width: 600px) { .form-container-hub { padding: 30px 20px; } } /* --- NEWS & TOURS PAGE STYLES --- */ /* Tour Table */ .tour-container { overflow-x: auto; /* Enables scrolling on small mobile screens */ margin-top: 30px; } .tour-table { width: 100%; border-collapse: collapse; background: white; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-subtle); } .tour-table th, .tour-table td { padding: 20px; text-align: left; border-bottom: 1px solid var(--color-accent-silver); } .tour-table th { background-color: var(--color-primary); color: white; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 1px; } .tour-btn { display: inline-block; padding: 8px 20px; background-color: var(--color-accent-gold); color: var(--color-primary); font-weight: 700; border-radius: 5px; font-size: 0.85rem; } .tour-btn:hover { background-color: var(--color-accent-gold-hover); } /* News Grid */ .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 40px; } .news-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card); text-align: left; transition: transform 0.3s ease; } .news-card:hover { transform: translateY(-5px); } .news-image { height: 200px; position: relative; } .news-image img { width: 100%; height: 100%; object-fit: contain; } .news-content { padding: 25px; } .news-date { color: var(--color-accent-gold); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; } .news-content h4 { margin: 10px 0; font-size: 1.4rem; } /* Better Layout for News */ .featured-news { display: flex; flex-direction: row; /* Side-by-side layout */ background: white; border-radius: 15px; overflow: hidden; box-shadow: var(--shadow-card); margin-bottom: 40px; text-align: left; } .news-image-container { flex: 1.2; /* Image takes up slightly more space */ min-height: 350px; position: relative; } .news-image-container img { width: 100%; height: 100%; object-fit: cover; /* Still fills the space but looks better in a rectangle */ } .news-text-content { flex: 1; /* Text takes up the remaining space */ padding: 40px; display: flex; flex-direction: column; justify-content: center; } .news-text-content h4 { font-size: 2rem; margin: 10px 0; } .news-date { color: var(--color-accent-gold); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } /* Responsive: Stack them on mobile */ @media (max-width: 768px) { .featured-news { flex-direction: column; } .news-image-container { min-height: 250px; } .news-text-content { padding: 25px; } } .sound-control { position: fixed; top: 20px; right: 20px; z-index: 1000; background: rgba(0, 0, 0, 0.5); border: 2px solid var(--color-accent-gold); color: white; border-radius: 50%; width: 50px; height: 50px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .sound-control:hover { background: var(--color-accent-gold); color: var(--color-primary); transform: scale(1.1); } .sound-control i { font-size: 1.2rem; } /* Ensure the container fills the screen */ .video-background-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; /* Puts the video behind everything */ overflow: hidden; background: black; /* Prevents white flash */ } /* Ensure the player itself fills the container */ #player { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; /* 16:9 aspect ratio */ min-height: 100vh; min-width: 177.77vh; /* 16:9 aspect ratio */ transform: translate(-50%, -50%); pointer-events: none; /* Allows clicks to pass through to the sound button */ } /* Ensure the sound icon is always on top */ .sound-control { z-index: 1001 !important; } .sound-control { position: fixed; /* Changed from absolute to fixed */ top: 20px; right: 20px; z-index: 9999; /* Force it to the very front */ background: rgba(0, 0, 0, 0.6); border: 2px solid var(--color-accent-gold); color: white; border-radius: 50%; width: 50px; height: 50px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; /* This line ensures touches pass directly to the button */ pointer-events: auto !important; } /* Specific mobile adjustment */ @media (max-width: 768px) { .sound-control { top: 15px; right: 15px; width: 55px; /* Slightly larger for easier tapping */ height: 55px; background: rgba(0, 0, 0, 0.8); /* Darker for better visibility */ } }