html {
scroll-behavior: smooth;
background-color: #ffffff; /* Prevent red overscroll background */
overscroll-behavior: none; /* Disable overscroll bounce effect */
}
/* Animation Classes */
.animate-in {
opacity: 1 !important;
transform: translateY(0) !important;
}
.amenity-panel, .thumbnail-item {
opacity: 0;
transform: translateY(30px);
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Section Subtitle Styling */
.section-subtitle {
font-family: 'Playfair Display', serif;
font-size: 1.2rem;
font-weight: 400;
font-style: italic;
color: var(--text-medium);
letter-spacing: 0.5px;
line-height: 1.6;
max-width: 600px;
margin: 0 auto 2rem auto;
position: relative;
}
.section-subtitle::before,
.section-subtitle::after {
content: '';
position: absolute;
top: 50%;
width: 30px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
opacity: 0.6;
}
.section-subtitle::before {
left: -50px;
}
.section-subtitle::after {
right: -50px;
}
@media (max-width: 767.98px) {
.section-subtitle::before,
.section-subtitle::after {
display: none;
}
.section-subtitle {
font-size: 1.1rem;
padding: 0 15px;
}
}
/* Light, Airy & Vibrant Karate Color Scheme */
:root {
--primary: #ffffff; /* Pure white background */
--secondary: #f8f8f8; /* Very light gray */
--accent: #a4332b; /* Karate red from logo */
--accent-light: #d4524a; /* Lighter red variant */
--text-dark: #333433; /* Very dark gray for text */
--text-medium: #535453; /* Medium dark gray */
--text-light: #737171; /* Medium gray */
--text-muted: #cccaca; /* Light gray */
--border-light: rgba(164, 51, 43, 0.1); /* Light red border */
--overlay-light: rgba(255, 255, 255, 0.95); /* Light overlay */
/* Legacy variable mapping for compatibility */
--base-color: var(--primary);
--accent-color: var(--accent);
--text-color: var(--text-dark);
--background-color: var(--primary);
--button-color: var(--accent);
--required-color: var(--accent);
}
/* Import modern fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');
/* Apply light theme to the body */
body {
background-color: var(--primary);
color: var(--text-dark);
padding-top: 0; /* Remove padding for floating nav */
font-family: 'Montserrat', sans-serif; /* Modern sans-serif font */
line-height: 1.6;
overflow-x: hidden;
}
/* 🎨 FLOATING PILLS NAVIGATION - Smart Glass Effect */
.floating-pills-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-light);
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
padding: 38px 0; /* Reduced by 2px */
box-shadow: 0 2px 20px rgba(164, 51, 43, 0.08);
overflow: visible;
}
.floating-pills-nav.scrolled {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-light);
padding: 13px 0; /* Reduced by 2px */
box-shadow: 0 2px 20px rgba(164, 51, 43, 0.12);
}
/* Navigation Container - Consistent spacing for contained logo */
.nav-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 40px 0 180px; /* Consistent space between logo and navigation */
display: flex;
justify-content: flex-start; /* Start from logo area */
align-items: center;
position: relative;
overflow: visible;
}
/* 🎛️ MEGA NAVIGATION CONTAINER (Right Side) */
.mega-nav-container {
display: flex;
align-items: center;
margin-left: 0; /* NO AUTO MARGIN - start right after logo space */
margin-right: 30px; /* Add space after last item */
flex-shrink: 1; /* Allow shrinking if needed */
}
.mega-navbar-nav {
display: flex;
gap: 8px;
flex-wrap: nowrap;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
/* Mega Navigation Items */
.mega-nav-item {
position: relative;
opacity: 0;
transform: translateY(-20px);
animation: pillFadeIn 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
/* Mega Navigation Links */
.mega-nav-link {
display: block;
padding: 8px 16px;
background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
color: white !important;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.3px;
border-radius: 25px;
border: 2px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(15px);
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
position: relative;
white-space: nowrap;
z-index: 1;
box-shadow: 0 4px 20px rgba(164, 51, 43, 0.3);
}
.mega-nav-link:hover {
background: linear-gradient(135deg, var(--accent-light), var(--accent)) !important;
color: white !important;
transform: translateY(-2px);
box-shadow: 0 6px 25px rgba(164, 51, 43, 0.4);
}
.mega-nav-link i {
font-size: 0.7rem;
transition: transform 0.3s ease;
}
.mega-dropdown:hover .mega-nav-link i {
transform: rotate(180deg);
}
/* Register Now and NYC Navigation Button - Visual styling only (no sizing properties) */
/* Register Now and NYC Navigation Button - Visual styling only (no sizing properties) */
html body .mega-navbar-nav .mega-nav-item .register-nav-link {
background: linear-gradient(135deg, #1a1a1a, #2d2d2d) !important;
color: white !important;
border: 2px solid var(--accent) !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 10px rgba(164, 51, 43, 0.3) !important;
position: relative !important;
overflow: hidden !important;
}
.register-nav-link:hover {
background: linear-gradient(135deg, #2d2d2d, #404040) !important;
color: white !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(164, 51, 43, 0.5) !important;
border-color: var(--accent-light) !important;
}
/* Subtle pulsing animation for nav register button */
@keyframes nav-register-pulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 10px rgba(164, 51, 43, 0.3);
}
50% {
transform: scale(1.02);
box-shadow: 0 5px 18px rgba(0, 0, 0, 0.5), 0 0 12px rgba(164, 51, 43, 0.4);
}
}
/* DISABLED - Shimmer effect for register nav button (causing glistening issue) */
/*
.register-nav-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(164, 51, 43, 0.2), transparent);
animation: nav-register-shimmer 3s ease-in-out infinite;
}
@keyframes nav-register-shimmer {
0% { left: -100%; }
50% { left: 100%; }
100% { left: -100%; }
}
*/
/* Mobile Register and NYC Button Styling - EXACT COPY of mobile-nav-item with visual changes */
.mobile-nav-item.register-mobile-nav.mobile-dropdown-toggle {
/* EXACT same properties as .mobile-nav-item */
color: white !important;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 0.8rem !important;
font-weight: 600 !important; /* Will be overridden to 700 below */
text-transform: uppercase;
letter-spacing: 0.2px !important; /* Will be overridden to 1px below */
padding: 6px 12px !important;
border-radius: 50px;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
opacity: 0;
transform: translateY(30px);
position: relative;
overflow: hidden;
backdrop-filter: blur(15px);
/* ONLY visual overrides */
background: linear-gradient(135deg, #1a1a1a, #2d2d2d) !important;
border: 2px solid var(--accent) !important;
font-weight: 700 !important;
letter-spacing: 1px !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}
/* Mobile responsive override - EXACT same as mobile-nav-item */
.register-mobile-nav:hover {
background: linear-gradient(135deg, #2d2d2d, #404040) !important;
color: white !important;
border-color: var(--accent-light) !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6) !important;
}
/* Mega Dropdown Menu - Simple with nice border and shadow */
.mega-nav-item.mega-dropdown.register-dropdown .mega-dropdown-menu {
position: absolute !important;
top: 100% !important;
left: -50px !important;
right: auto !important;
width: 950px !important;
max-width: 95vw !important;
background: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: blur(20px) !important;
border: 2px solid rgba(164, 51, 43, 0.3) !important;
border-radius: 15px !important;
box-shadow: 0 15px 40px rgba(164, 51, 43, 0.2), 0 5px 15px rgba(0, 0, 0, 0.1) !important;
padding: 20px !important;
margin-top: 8px !important;
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(-10px) !important;
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
z-index: 1000 !important;
}
.mega-nav-item.mega-dropdown.register-dropdown:hover .mega-dropdown-menu {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
}
/* OLD MEGA MENU CSS REMOVED - NOW USING CLEAN CSS BELOW */
/* ========================================
CLEAN MEGA MENU STYLING - 992px and above only
All previous mega menu CSS removed and rebuilt from scratch
======================================== */
@media (min-width: 992px) {
/* Clean, simple mega menu columns - equal width, centered */
.mega-menu-column {
flex: 1;
min-width: 180px;
padding: 0 15px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
/* Clean, simple headers - centered, single line */
.mega-menu-header {
color: var(--accent);
font-family: 'Barlow', sans-serif;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 2px solid rgba(164, 51, 43, 0.2);
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
width: 100%;
text-align: center;
}
/* Multi-line header styling for After School */
.after-school-column .mega-menu-header {
white-space: normal !important;
}
.mega-menu-header .header-line-1,
.mega-menu-header .header-line-2 {
display: block;
line-height: 1.2;
text-align: center;
width: 100%;
}
.mega-menu-header .header-line-1 {
margin-bottom: 4px;
padding-bottom: 4px;
position: relative;
}
.mega-menu-header .header-line-1::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 50%;
height: 1px;
background: rgba(164, 51, 43, 0.3);
opacity: 0.6;
}
/* Ensure After School header spans are centered */
.mega-menu-header .header-line-1,
.mega-menu-header .header-line-2 {
text-align: center;
width: 100%;
}
/* Style the register button container */
.register-button-container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 0;
}
/* After School section styling - no background */
/* Fix vertical alignment for After School section */
.mega-menu-column.after-school-column {
align-items: center !important;
justify-content: flex-start !important;
}
.after-school-column .mega-menu-header {
text-align: center !important;
align-items: center !important;
justify-content: center !important;
}
/* Make After School header text and underline red */
.after-school-column .mega-menu-header,
.after-school-column .mega-menu-header .header-line-1,
.after-school-column .mega-menu-header .header-line-2 {
color: var(--accent) !important;
border-bottom-color: rgba(164, 51, 43, 0.2) !important;
}
/* Make the underline between header lines red */
.after-school-column .mega-menu-header .header-line-1::after {
background: rgba(164, 51, 43, 0.3) !important;
}
/* Kaizen Dojo section - streaky cloud shape background */
.mega-menu-column:nth-child(3) {
background: linear-gradient(
135deg,
rgba(0, 0, 0, 0.06) 0%,
rgba(0, 0, 0, 0.12) 25%,
rgba(0, 0, 0, 0.08) 50%,
rgba(0, 0, 0, 0.15) 75%,
rgba(0, 0, 0, 0.07) 100%
) !important;
padding: 15px !important;
position: relative !important;
/* Cloud shape using border-radius */
border-radius: 25px 25px 25px 5px !important;
}
/* Add pronounced streaky overlay */
.mega-menu-column:nth-child(3)::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
45deg,
transparent 0%,
rgba(0, 0, 0, 0.06) 15%,
transparent 25%,
rgba(0, 0, 0, 0.08) 45%,
transparent 55%,
rgba(0, 0, 0, 0.05) 75%,
transparent 85%
);
border-radius: 25px 25px 25px 5px;
pointer-events: none;
z-index: 0;
}
/* Belt Exams section - same streaky cloud shape background as Kaizen Dojo */
.mega-menu-column:nth-child(7) {
background: linear-gradient(
135deg,
rgba(0, 0, 0, 0.06) 0%,
rgba(0, 0, 0, 0.12) 25%,
rgba(0, 0, 0, 0.08) 50%,
rgba(0, 0, 0, 0.15) 75%,
rgba(0, 0, 0, 0.07) 100%
) !important;
padding: 15px !important;
position: relative !important;
/* Cloud shape using border-radius */
border-radius: 25px 25px 25px 5px !important;
}
/* Add pronounced streaky overlay to Belt Exams */
.mega-menu-column:nth-child(7)::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
45deg,
transparent 0%,
rgba(0, 0, 0, 0.06) 15%,
transparent 25%,
rgba(0, 0, 0, 0.08) 45%,
transparent 55%,
rgba(0, 0, 0, 0.05) 75%,
transparent 85%
);
border-radius: 25px 25px 25px 5px;
pointer-events: none;
z-index: 0;
}
/* Removed black styling - Kaizen Dojo and Belt Exams back to default red */
/* Clean mega menu container */
.mega-menu-container {
display: flex;
flex-direction: row;
gap: 20px;
align-items: stretch;
justify-content: space-between;
}
/* Clean mega menu text content */
.mega-menu-text {
text-align: center;
width: 100%;
}
/* Subtle vertical dividers between sections */
.mega-menu-vertical-divider {
width: 1px;
background: linear-gradient(180deg,
transparent 0%,
rgba(164, 51, 43, 0.2) 20%,
rgba(164, 51, 43, 0.4) 50%,
rgba(164, 51, 43, 0.2) 80%,
transparent 100%
);
margin: 0 10px;
opacity: 0.6;
flex-shrink: 0;
align-self: stretch;
}
/* Clean register buttons - much smaller */
.mega-register-btn {
background: linear-gradient(135deg, var(--accent), var(--accent-light));
color: white;
font-weight: 700;
text-align: center;
border-radius: 6px;
padding: 8px 16px;
margin: 4px auto;
border: 2px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 12px rgba(164, 51, 43, 0.3);
transition: all 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
width: 60%;
min-width: 100px;
font-size: 0.8rem;
letter-spacing: 0.5px;
text-transform: uppercase;
text-decoration: none;
}
.mega-register-btn:hover {
background: linear-gradient(135deg, var(--accent-light), var(--accent));
color: white;
transform: translateY(-2px) scale(1.05);
text-decoration: none;
}
/* Summer Camp text styling */
.mega-menu-text {
width: 100%;
text-align: center;
}
.mega-menu-summer-text {
margin: 0;
color: #666;
font-style: italic;
line-height: 1.4;
text-align: center;
}
.summer-camp-explore-link {
color: #a4332b;
text-decoration: underline;
transition: all 0.3s ease;
}
.summer-camp-explore-link:hover {
color: #8b2922;
text-decoration: none;
}
}
/* Center content in striped sections - HANDLED IN STRIPED BACKGROUND RULE */
/* DUPLICATED MEGA MENU CSS REMOVED */
/* Responsive Mega Menu */
/* Desktop Hover Support for Mega Menu */
@media (min-width: 992px) {
.mega-dropdown:hover .mega-dropdown-menu {
display: block;
}
.mega-dropdown-menu.show {
display: block;
}
}
/* Mobile Dropdown Styling */
.mobile-dropdown {
position: relative;
width: 100%;
margin: 0 !important; /* Force no margins */
padding: 0 !important; /* Force no padding */
/* Ensure container doesn't affect child button sizing */
display: block;
box-sizing: border-box;
}
/* Ensure dropdown toggle doesn't override any sizing */
.mobile-dropdown-toggle {
/* NO sizing overrides - inherit everything from mobile-nav-item */
width: 100% !important;
display: block !important;
box-sizing: border-box !important;
margin: 0 !important; /* Remove any margin that might affect spacing */
}
.mobile-dropdown-toggle i {
font-size: 0.7rem;
transition: transform 0.3s ease;
/* Ensure icon doesn't affect button height */
vertical-align: middle;
line-height: 1;
margin-left: 4px !important; /* Override Bootstrap ms-1 */
}
.mobile-dropdown.show .mobile-dropdown-toggle i {
transform: rotate(180deg);
}
.mobile-dropdown-menu {
position: absolute; /* Don't affect layout when hidden */
top: 100%; /* Position below the button */
left: 0;
right: 0;
width: 100%;
background: rgba(255, 255, 255, 0.98); /* Match desktop dropdown */
backdrop-filter: blur(20px); /* Add blur like desktop */
-webkit-backdrop-filter: blur(20px); /* Safari support */
border: 1px solid rgba(164, 51, 43, 0.2);
border-radius: 12px;
box-shadow: 0 10px 40px rgba(164, 51, 43, 0.15); /* Match desktop shadow */
margin-top: 4px; /* Small gap between button and dropdown */
padding: 15px;
height: 0 !important; /* Force zero height when hidden */
max-height: 0 !important; /* Force zero max-height when hidden */
overflow: hidden !important;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000; /* Ensure it appears above other content */
}
.mobile-dropdown.show .mobile-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
height: auto !important; /* Allow natural height when open */
max-height: none !important; /* Remove height restriction when open */
overflow: visible !important; /* No scrolling needed when open */
}
.mobile-dropdown-section {
margin-bottom: 15px;
}
.mobile-dropdown-section:last-child {
margin-bottom: 0;
}
.mobile-dropdown-section h6 {
color: var(--accent);
font-family: 'Playfair Display', serif;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid rgba(164, 51, 43, 0.2);
padding-bottom: 4px;
}
.mobile-dropdown-item {
display: block;
background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
color: white !important;
font-weight: 600 !important;
text-align: center !important;
border-radius: 8px !important;
padding: 10px 16px !important;
margin: 8px 0 !important;
border: 2px solid rgba(255, 255, 255, 0.3) !important;
box-shadow: 0 4px 15px rgba(164, 51, 43, 0.3) !important;
transition: all 0.3s ease !important;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 0.8rem;
}
.mobile-dropdown-item:hover {
background: linear-gradient(135deg, var(--accent-light), var(--accent)) !important;
color: white !important;
transform: translateY(-2px) scale(1.02) !important;
box-shadow: 0 6px 20px rgba(164, 51, 43, 0.4) !important;
}
.mobile-dropdown-text {
color: #666;
font-size: 0.75rem;
line-height: 1.4;
margin: 0;
font-style: italic;
}
.mobile-dropdown-text a {
color: var(--accent);
text-decoration: none;
font-weight: 600;
}
.mobile-dropdown-text a:hover {
text-decoration: underline;
color: var(--accent-light);
}
@media (max-width: 991.98px) {
.mega-nav-container {
display: none;
}
.mega-dropdown-menu {
position: static;
transform: none;
min-width: auto;
width: 100%;
margin-top: 0;
border-radius: 8px;
max-height: 60vh;
overflow-y: auto;
}
.mega-menu-container {
flex-direction: column;
gap: 15px;
}
.mega-menu-column {
min-width: auto;
}
}
.floating-pills-nav.scrolled .nav-pill a::before {
background: transparent !important;
}
/* Maintain Summer Camp inverse styling when scrolled */
.floating-pills-nav.scrolled .summer-camp-nav-pill a {
background: linear-gradient(135deg, #ffffff, #f8f8f8) !important;
-webkit-background-clip: padding-box !important;
background-clip: padding-box !important;
-webkit-text-fill-color: var(--accent) !important;
color: var(--accent) !important;
border: 2px solid var(--accent);
}
.floating-pills-nav.scrolled .summer-camp-nav-pill:hover a {
background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
-webkit-text-fill-color: white !important;
color: white !important;
border-color: var(--accent-light);
}
/* Pill Shimmer Effect */
.nav-pill a::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(164, 51, 43, 0.2), transparent);
transition: left 0.5s ease;
z-index: -1;
}
.nav-pill:hover a::after {
left: 100%;
}
.nav-pill:hover a {
background: linear-gradient(135deg, var(--accent-light), var(--accent)) !important;
transform: translateY(-4px) scale(1.1);
box-shadow: 0 8px 35px rgba(164, 51, 43, 0.5);
border-color: rgba(255, 255, 255, 0.5);
}
.nav-pill:hover a::before {
background: transparent !important;
}
/* Hover effect when navigation is scrolled - Summer Camp style */
.floating-pills-nav.scrolled .nav-pill:hover a {
background: linear-gradient(135deg, var(--accent-light), var(--accent)) !important;
transform: translateY(-4px) scale(1.1);
box-shadow: 0 8px 35px rgba(164, 51, 43, 0.5);
border-color: rgba(255, 255, 255, 0.5);
}
.floating-pills-nav.scrolled .nav-pill:hover a::before {
background: transparent !important;
}
/* Special Summer Camp Navigation Button - Inverse Style */
.summer-camp-nav-pill a {
background: linear-gradient(135deg, #ffffff, #f8f8f8) !important;
-webkit-background-clip: padding-box !important;
background-clip: padding-box !important;
-webkit-text-fill-color: var(--accent) !important;
color: var(--accent) !important;
font-weight: 600;
font-size: 0.8rem;
padding: 8px 16px;
border: 2px solid var(--accent);
box-shadow: 0 4px 20px rgba(164, 51, 43, 0.3);
animation: summerCampPulse 3s ease-in-out infinite;
}
.summer-camp-nav-pill a::before {
background: transparent !important;
}
.summer-camp-nav-pill:hover a {
background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
-webkit-text-fill-color: white !important;
color: white !important;
transform: translateY(-4px) scale(1.1);
box-shadow: 0 8px 35px rgba(164, 51, 43, 0.5);
border-color: var(--accent-light);
}
/* Subtle pulse animation for Summer Camp */
@keyframes summerCampPulse {
0%, 100% {
box-shadow: 0 4px 20px rgba(164, 51, 43, 0.3);
}
50% {
box-shadow: 0 4px 25px rgba(164, 51, 43, 0.4);
}
}
/* Responsive Summer Camp Navigation */
@media (max-width: 767.98px) {
.summer-camp-nav-pill a {
font-size: 0.75rem;
padding: 7px 14px;
box-shadow: 0 3px 15px rgba(164, 51, 43, 0.3);
}
.summer-camp-nav-pill:hover a {
transform: translateY(-3px) scale(1.08);
box-shadow: 0 6px 25px rgba(164, 51, 43, 0.5);
}
}
/* Special Pills (Email, Join Us, Schedule) */
.special-pill.email-pill a {
background: linear-gradient(135deg, rgba(164, 51, 43, 0.1), rgba(212, 82, 74, 0.08));
border: 1px solid var(--accent);
color: var(--accent);
}
.special-pill.waitlist-pill a {
background: linear-gradient(135deg, var(--accent), var(--accent-light));
color: white;
border: none;
box-shadow: 0 4px 20px rgba(164, 51, 43, 0.4);
}
.special-pill.apply-pill a {
background: rgba(164, 51, 43, 0.1);
border: 2px solid var(--accent);
color: var(--accent);
}
.special-pill:hover a {
transform: translateY(-5px) scale(1.08);
}
.special-pill.waitlist-pill:hover a {
background: linear-gradient(135deg, var(--accent-light), var(--accent));
box-shadow: 0 12px 40px rgba(164, 51, 43, 0.5);
}
.special-pill.apply-pill:hover a {
background: var(--accent);
color: white;
}
/* 🏢 KARATE BRAND CONTAINER (Left Side) - Contained within nav */
.luxury-brand-container {
position: absolute;
left: 20px; /* Standard padding from left edge */
top: 50%; /* Center vertically within nav */
transform: translateY(-50%); /* Perfect vertical centering */
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
overflow: visible;
}
/* Brand container adjusts when scrolled - maintain centering */
.floating-pills-nav.scrolled .luxury-brand-container {
top: 50%; /* Keep centered vertically */
transform: translateY(-50%);
}
.luxury-brand {
text-decoration: none;
display: flex;
align-items: center;
transition: all 0.3s ease;
position: relative;
}
/* Prominent Logo styling - Large and prominent on desktop */
.brand-logo-prominent {
height: 120px;
width: auto;
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
filter: drop-shadow(0 3px 12px rgba(164, 51, 43, 0.4));
position: relative;
z-index: 10;
}
/* Logo shrinks when navigation is scrolled */
.floating-pills-nav.scrolled .brand-logo-prominent {
height: 70px;
filter: drop-shadow(0 2px 8px rgba(164, 51, 43, 0.3));
}
.luxury-brand:hover .brand-logo-prominent {
transform: scale(1.05);
filter: drop-shadow(0 6px 16px rgba(164, 51, 43, 0.4));
}
/* Hover effect when scrolled - smaller scale */
.floating-pills-nav.scrolled .luxury-brand:hover .brand-logo-prominent {
transform: scale(1.08);
filter: drop-shadow(0 4px 12px rgba(164, 51, 43, 0.3));
}
/* 📱 MOBILE MENU TOGGLE */
.mobile-menu-toggle {
display: none;
flex-direction: column;
background: linear-gradient(135deg, var(--accent), var(--accent-light));
border: 2px solid rgba(255, 255, 255, 0.3);
cursor: pointer;
padding: 12px;
gap: 4px;
border-radius: 12px;
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
box-shadow: 0 4px 15px rgba(164, 51, 43, 0.3);
backdrop-filter: blur(15px);
}
.toggle-line {
width: 25px;
height: 2px;
background: white;
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
border-radius: 2px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
transform-origin: center center; /* Ensure rotation happens around center */
}
.mobile-menu-toggle.active .toggle-line:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.mobile-menu-toggle.active .toggle-line:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle.active .toggle-line:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
.mobile-menu-toggle:hover {
background: linear-gradient(135deg, var(--accent-light), var(--accent));
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(164, 51, 43, 0.4);
}
/* 📱 MOBILE OVERLAY MENU */
.mobile-overlay-menu {
position: fixed;
top: 80px;
right: 20px;
width: 250px;
max-height: calc(100vh - 120px);
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(30px);
border-radius: 20px;
border: 2px solid rgba(164, 51, 43, 0.2);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
z-index: 999;
opacity: 0;
visibility: hidden;
transform: translateY(-20px) scale(0.95);
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
overflow-y: auto;
}
.mobile-overlay-menu.active {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.mobile-overlay-menu .mobile-menu-content {
text-align: center;
width: 100%;
padding: 5px 15px 15px 15px !important;
display: flex;
flex-direction: column;
}
.mobile-overlay-menu .mobile-brand {
margin-bottom: 5px !important;
margin-top: 0px !important;
display: flex;
justify-content: center;
flex-shrink: 0;
}
.mobile-overlay-menu .mobile-brand-logo {
height: 100px !important;
width: auto;
filter: drop-shadow(0 4px 15px rgba(164, 51, 43, 0.3));
}
.mobile-nav-items {
display: flex;
flex-direction: column;
gap: 2px; /* Reduced gap between buttons */
}
.mobile-nav-item {
color: white !important;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.2px;
padding: 6px 12px;
border-radius: 50px;
background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
border: 2px solid rgba(255, 255, 255, 0.3);
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
opacity: 0;
transform: translateY(30px);
position: relative;
overflow: hidden;
box-shadow: 0 4px 20px rgba(164, 51, 43, 0.3);
backdrop-filter: blur(15px);
margin: 0 !important; /* Force no margin on nav items */
}
.mobile-nav-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
z-index: -1;
}
.mobile-nav-item:hover::before {
left: 100%;
}
.mobile-overlay-menu.active .mobile-nav-item {
opacity: 1;
transform: translateY(0);
}
.mobile-nav-item:hover {
background: linear-gradient(135deg, var(--accent-light), var(--accent)) !important;
transform: translateY(-4px) scale(1.05);
box-shadow: 0 8px 35px rgba(164, 51, 43, 0.5);
border-color: rgba(255, 255, 255, 0.5);
color: white !important;
}
/* Summer Camp Mobile Navigation - Now same as other buttons */
/* Removed special styling - inherits regular mobile-nav-item styles */
/* 🎭 ANIMATIONS */
@keyframes pillFadeIn {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Add staggered animation delays */
.nav-pill[data-delay="0"] { animation-delay: 0.1s; }
.nav-pill[data-delay="100"] { animation-delay: 0.2s; }
.nav-pill[data-delay="200"] { animation-delay: 0.3s; }
.nav-pill[data-delay="300"] { animation-delay: 0.4s; }
.nav-pill[data-delay="400"] { animation-delay: 0.5s; }
.nav-pill[data-delay="500"] { animation-delay: 0.6s; }
.nav-pill[data-delay="600"] { animation-delay: 0.7s; }
/* Mobile animation delays */
.mobile-nav-item[data-delay="0"] { transition-delay: 0.1s; }
.mobile-nav-item[data-delay="100"] { transition-delay: 0.2s; }
.mobile-nav-item[data-delay="200"] { transition-delay: 0.3s; }
.mobile-nav-item[data-delay="300"] { transition-delay: 0.4s; }
.mobile-nav-item[data-delay="400"] { transition-delay: 0.5s; }
.mobile-nav-item[data-delay="500"] { transition-delay: 0.6s; }
.mobile-nav-item[data-delay="600"] { transition-delay: 0.7s; }
/* 📱 RESPONSIVE DESIGN - Standard Bootstrap Breakpoints */
/* Extra Large Desktop: xxl breakpoint (≥1400px) */
@media (min-width: 1400px) {
.nav-container {
padding: 0 30px 0 180px; /* Consistent spacing with other breakpoints */
}
.mega-nav-container {
max-width: 400px;
margin-left: 25px;
}
.mega-navbar-nav {
gap: 6px;
}
.mega-nav-link {
padding: 8px 14px;
font-size: 0.8rem;
}
/* Make register button match regular buttons at 1400px+ */
.mega-navbar-nav .mega-nav-item .mega-nav-link.register-nav-link {
font-size: 0.8rem !important;
padding: 8px 14px !important;
}
.brand-logo-prominent {
height: 130px; /* Slightly bigger logo for largest screens */
}
.floating-pills-nav.scrolled .brand-logo-prominent {
height: 75px;
}
/* REDESIGNED HORIZONTAL LAYOUT for 1400px+ - FULL WIDTH to match nav-container */
.hero-overlay-row .hero-register-panel {
/* ALL GRID OVERRIDES DISABLED */
display: none !important;
}
/* Position sections in grid - 1400px+ with generous spacing */
.register-panel-section:nth-child(1) {
grid-column: 1 !important; /* After School */
padding: 0 30px !important; /* More generous padding for wide layout */
}
.register-panel-section:nth-child(3) {
grid-column: 3 !important; /* Summer Camp */
padding: 0 30px !important; /* More generous padding for wide layout */
}
.register-panel-section:nth-child(5) {
grid-column: 5 !important; /* Belt Exams */
padding: 0 30px !important; /* More generous padding for wide layout */
}
/* Position dividers in grid as vertical lines - 1400px+ */
.register-panel-divider:nth-child(2) {
grid-column: 2 !important;
grid-row: 1 !important;
width: 1px !important;
height: 100% !important;
margin: 0 30px !important; /* Wider spacing for full-width layout */
background: linear-gradient(180deg,
rgba(164, 51, 43, 0.3) 0%,
rgba(164, 51, 43, 0.7) 50%,
rgba(164, 51, 43, 0.3) 100%) !important;
border: none !important;
align-self: stretch !important;
}
.register-panel-divider:nth-child(4) {
grid-column: 4 !important;
grid-row: 1 !important;
width: 1px !important;
height: 100% !important;
margin: 0 30px !important; /* Wider spacing for full-width layout */
background: linear-gradient(180deg,
rgba(164, 51, 43, 0.3) 0%,
rgba(164, 51, 43, 0.7) 50%,
rgba(164, 51, 43, 0.3) 100%) !important;
border: none !important;
align-self: stretch !important;
}
.register-panel-section {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
margin-bottom: 0 !important;
min-height: 120px !important; /* Ensure consistent height */
justify-content: center !important;
}
.register-panel-header {
font-size: 1rem !important;
text-align: center !important;
padding-left: 0 !important;
margin-bottom: 8px !important;
}
.register-panel-text {
font-size: 0.75rem !important;
text-align: center !important;
line-height: 1.3 !important;
}
.hero-register-panel .btn {
margin: 10px auto !important;
display: flex !important;
font-size: 0.95rem !important;
padding: 16px 26px !important;
width: 65% !important;
justify-content: center !important;
align-items: center !important;
}
}
/* Large Desktop: lg breakpoint (992-1199.98px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
.nav-container {
padding: 0 25px 0 180px; /* Consistent spacing with other breakpoints */
}
.mega-nav-container {
max-width: 380px; /* Larger container for bigger buttons */
margin-left: 15px; /* Better spacing */
}
.mega-navbar-nav {
gap: 4px; /* Better spacing between buttons */
}
.mega-nav-link {
padding: 6px 10px; /* Larger padding for bigger buttons */
font-size: 0.7rem; /* Larger font size */
letter-spacing: 0px;
font-weight: 600 !important; /* Ensure consistent weight */
}
/* Make register button match regular buttons EXACTLY at 992-1199px */
.mega-navbar-nav .mega-nav-item .mega-nav-link.register-nav-link {
font-size: 0.7rem !important; /* Exact match */
padding: 6px 10px !important; /* Exact match */
letter-spacing: 0px !important; /* Exact match */
font-weight: 600 !important; /* Exact match - critical for size */
}
/* Logo keeps full size - no shrinking until mobile menu appears */
/* (Logo sizing removed to maintain consistent spacing) */
}
/* Medium Tablet: md breakpoint (≥768px) */
@media (min-width: 768px) and (max-width: 991.98px) {
.nav-container {
padding: 0 25px 0 160px; /* Increased space for medium tablets */
}
/* Keep navigation background same size - don't change padding */
.nav-pills-container {
gap: 1px;
max-width: 240px;
margin-left: 0;
margin-right: 20px;
}
.nav-pill a {
padding: 3px 6px;
font-size: 0.6rem;
letter-spacing: 0px;
}
/* Logo and brand responsive rules for tablets */
.brand-main {
font-size: 2rem;
}
.luxury-brand-container {
left: 20px;
top: 50%;
transform: translateY(-50%);
}
/* Larger logo for tablet range */
.brand-logo-prominent {
height: 140px !important; /* Larger than desktop for tablet */
}
.floating-pills-nav.scrolled .brand-logo-prominent {
height: 90px !important; /* Larger when scrolled too */
}
.floating-pills-nav.scrolled .luxury-brand-container {
top: 50%;
transform: translateY(-50%);
}
/* Hero title sizing moved to clean CSS section to avoid conflicts */
/* (Removed conflicting rule - see tablet override section) */
}
/* Small Tablet: sm breakpoint (576px-767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
.nav-container {
padding: 0 30px 0 140px; /* Increased spacing for small tablets */
}
.nav-pills-container {
gap: 1px;
max-width: 220px;
margin-left: 0;
margin-right: 15px;
}
.nav-pill a {
padding: 3px 5px;
font-size: 0.55rem;
letter-spacing: 0px;
}
/* Logo keeps full size - no shrinking until mobile menu appears */
/* (Logo sizing removed to maintain consistent spacing until 991px) */
.luxury-brand-container {
left: 18px;
top: 50%;
transform: translateY(-50%);
}
.floating-pills-nav.scrolled .luxury-brand-container {
top: 50%;
transform: translateY(-50%);
}
}
/* Mobile and Tablet: Show mobile toggle from 576px to 991.98px */
@media (min-width: 576px) and (max-width: 991.98px) {
.mobile-menu-toggle {
display: flex;
}
}
/* Mobile: xs breakpoint (<576px) */
@media (max-width: 575.98px) {
.floating-pills-nav {
padding: 20px 0; /* Reduced mobile vertical padding */
}
.floating-pills-nav.scrolled {
padding: 15px 0; /* Reduced mobile scrolled padding */
}
.nav-pills-container {
display: none;
}
.mobile-menu-toggle {
display: flex;
}
.nav-container {
justify-content: flex-end; /* Push hamburger menu to right, logo is absolute */
padding: 0 20px 0 120px; /* Clear space for smaller logo on mobile */
}
.luxury-brand-container {
left: 15px; /* Standard padding from left edge */
top: 50%; /* Center vertically within nav */
transform: translateY(-50%);
}
.brand-main {
font-size: 1.8rem;
padding: 12px 0 12px 20px; /* No right padding for flush alignment */
}
.brand-main::before {
width: 60px;
height: 60px;
}
.brand-address {
font-size: 0.75rem;
}
/* Mobile logo sizing */
.brand-logo-prominent {
height: 55px; /* Good size on mobile */
}
.floating-pills-nav.scrolled .brand-logo-prominent {
height: 40px;
}
.floating-pills-nav.scrolled .luxury-brand-container {
top: 50%; /* Keep centered vertically */
transform: translateY(-50%);
}
.col-12 {
padding-top: 60px; /* Much smaller for 70vh container */
}
/* Mobile menu adjustments for smaller screens */
.mobile-menu-content {
max-width: 260px;
padding: 60px 12px 15px 12px;
}
.mobile-brand {
margin-bottom: 5px;
}
.mobile-overlay-menu .mobile-brand-logo {
height: 90px !important;
}
.mobile-nav-items {
gap: 1px; /* Even tighter gap for mobile screens */
}
.mobile-nav-item {
font-size: 0.85rem;
padding: 6px 14px;
letter-spacing: 0.2px;
box-shadow: 0 3px 15px rgba(164, 51, 43, 0.3);
}
.mobile-nav-item:hover {
transform: translateY(-3px) scale(1.03);
box-shadow: 0 6px 25px rgba(164, 51, 43, 0.5);
}
/* Summer Camp mobile nav now uses regular mobile-nav-item:hover styles */
/* Mobile close button adjustments for small screens */
.mobile-close-btn {
top: 20px;
right: 20px;
width: 45px;
height: 45px;
}
.close-line {
width: 18px;
}
.mobile-close-btn:hover .close-line {
width: 20px;
}
}
/* Legacy support removed - all navigation now handled by floating pills */
/* Full-Screen Cinematic Hero Section */
.hero-section {
height: 95vh;
min-height: 95vh;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}
/* Full-screen overlay removed - now using localized text background */
/* Overlay now stays visible permanently */
/* Container for the row */
.container-fluid.h-100 {
height: 100%;
position: relative;
z-index: 2;
}
/* Row inside the container */
.row.h-100 {
display: flex; /* Use flexbox to stretch columns */
align-items: stretch; /* Ensure columns stretch to the same height */
height: 100%; /* Ensure the row takes full height */
}
/* Full-Screen Background Video */
.video-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
}
.video-container video {
position: absolute;
top: 180px; /* Push video content down further to show more video */
left: 50%;
width: 100%;
height: calc(100% + 180px); /* Extend height to compensate for offset */
transform: translateX(-50%);
object-fit: cover;
object-position: center top; /* Show the top portion of the video (heads visible) */
}
/* Video filter now stays consistent */
/* Video Controls Styling */
.video-controls {
position: absolute;
bottom: 25%;
right: 20px;
transform: translateY(50%);
display: flex;
gap: 10px;
z-index: 1000;
pointer-events: auto;
}
.video-control-btn {
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
pointer-events: auto;
}
.video-control-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px) scale(1.05);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.video-control-btn:active {
transform: translateY(0) scale(0.95);
}
/* Mobile Video Controls */
@media (max-width: 767.98px) {
.video-controls {
bottom: 25%;
right: 15px;
transform: translateY(50%);
gap: 8px;
}
.video-control-btn {
width: 45px;
height: 45px;
font-size: 1.1rem;
}
}
/* Video Controls for Small Mobile Breakpoints */
@media (max-width: 575.98px) {
.video-controls {
bottom: 35% !important;
right: 15px;
transform: translateY(50%);
gap: 8px;
}
.video-control-btn {
width: 40px;
height: 40px;
font-size: 1rem;
}
}
/* Video Controls for Extra Small Mobile Breakpoints */
@media (max-width: 480px) {
.video-controls {
bottom: 35% !important;
right: 15px;
transform: translateY(50%);
gap: 6px;
}
.video-control-btn {
width: 38px;
height: 38px;
font-size: 0.9rem;
}
/* Hero Register Panel Headers - Match Mega Menu Styling */
#heroRegisterPanel .register-panel-header {
color: var(--accent) !important;
border-bottom: 2px solid var(--accent) !important;
padding-bottom: 8px !important;
}
/* Remove bullet point for mobile styling */
#heroRegisterPanel .register-panel-header::before {
display: none !important;
}
}
/* Hero Overlay Section - Transparent overlay at top over video */
.hero-overlay-section {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 10;
padding-top: 116px !important;
padding-bottom: 4px !important;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.6) 0%,
rgba(248, 248, 248, 0.5) 50%,
rgba(255, 255, 255, 0.6) 100%
);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
pointer-events: none; /* Allow clicks to pass through to video */
}
/* OLD RESPONSIVE RULES REMOVED - Using new rules at end of file */
/* Original col-12 for hero section video only */
.hero-section .col-12 {
position: relative;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
flex: 1;
overflow: visible; /* Ensure content isn't clipped */
}
.hero-content {
text-align: left;
color: var(--text-dark);
max-width: none !important; margin: 0 20px !important;
padding-left: 0 !important;
padding-right: 0 !important;
z-index: 4;
position: relative;
width: 100%;
pointer-events: auto;
background: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-radius: 0;
box-shadow: none;
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 0 !important;
padding-top: 12px !important;
padding-bottom: 8px !important;
margin-left: 12px !important;
}
/* Hero content now stays visible permanently */
/* Hero Close Button */
.hero-close-btn {
position: absolute;
top: 10px;
right: 10px;
background: rgba(255, 255, 255, 0.8);
border: none;
border-radius: 50%;
width: 28px; /* Smaller button */
height: 28px; /* Smaller button */
font-size: 1.2rem; /* Smaller icon */
font-weight: bold;
color: var(--accent);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 10;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.hero-close-btn:hover {
background: rgba(255, 255, 255, 0.95);
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.hero-close-btn:active {
transform: scale(0.95);
}
/* Hero Hidden State */
.hero-content.hidden {
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(-20px) !important;
transition: all 0.5s ease !important;
pointer-events: none !important;
}
/* Hero Typography */
.hero-title {
font-family: 'Playfair Display', serif;
font-size: clamp(1.4rem, 3.8vw, 2.0rem) !important;
font-weight: 700;
letter-spacing: 1.2px;
margin-bottom: 4px !important;
background: linear-gradient(135deg, var(--accent), var(--accent-light));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
animation: fadeInUp 1s ease-out;
white-space: nowrap; /* Prevent line breaks on desktop */
overflow: visible; /* Ensure text isn't clipped */
width: auto; /* Allow natural width */
}
/* Kaizen Dojo Title - Enhanced Bigger Version */
.kaizen-dojo-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2.2rem, 6vw, 3.5rem) !important;
font-weight: 700;
letter-spacing: 3px;
margin-bottom: 8px !important;
background: linear-gradient(135deg, var(--accent), var(--accent-light));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
white-space: nowrap;
overflow: visible;
width: auto;
text-align: left;
}
/* Enhanced Dojo Logo Styling - Properly Sized */
.dojo-logo,
img.dojo-logo,
.kaizen-dojo-section .dojo-logo,
.dojo-hero .dojo-logo {
max-width: 350px !important;
width: 100% !important;
height: auto !important;
display: block !important;
}
/* Center the Kaizen Dojo logo on mobile screens */
@media (max-width: 767.98px) {
.dojo-logo,
img.dojo-logo,
.kaizen-dojo-section .dojo-logo,
.dojo-hero .dojo-logo {
margin: 0 auto !important;
text-align: center !important;
}
.dojo-hero .col-md-3 {
text-align: center !important;
}
}
/* Kaizen Kenpo Logo Styling - Match Kaizen Dojo Logo */
#kaizen-kenpo img[src*="kenpo-logo.png"] {
max-width: 350px !important;
width: 100% !important;
height: auto !important;
display: block !important;
margin: 0 auto !important;
}
/* Center the Kaizen Kenpo logo on mobile screens */
@media (max-width: 767.98px) {
#kaizen-kenpo img[src*="kenpo-logo.png"] {
margin: 0 auto !important;
text-align: center !important;
}
#kaizen-kenpo .text-center {
text-align: center !important;
}
}
/* Cloud Background Container */
.dojo-hero .col-md-9 {
position: relative;
}
.dojo-hero .col-md-9::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 120%;
background: radial-gradient(ellipse 90% 100% at center,
rgba(255, 255, 255, 0.8) 0%,
rgba(248, 249, 250, 0.6) 40%,
rgba(255, 255, 255, 0.4) 70%,
transparent 100%);
border-radius: 60% 40% 50% 70% / 40% 60% 50% 80%;
transform: translateY(-50%) rotate(-2deg);
z-index: 1;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
/* Clean Dojo Introduction Text Styling */
.dojo-intro {
font-size: 1.1rem;
line-height: 1.6;
color: #444;
font-weight: 400;
margin-bottom: 0;
position: relative;
z-index: 2;
padding: 20px;
}
.dojo-intro strong {
color: var(--accent);
font-weight: 600;
}
.kaizen-dojo-title {
position: relative;
z-index: 2;
}
/* Responsive adjustments for tablets and mobile - PROPER BOOTSTRAP SIZING */
@media (max-width: 991.98px) and (min-width: 768px) {
.dojo-logo {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
margin-bottom: 20px !important;
}
/* Make the logo column bigger to accommodate larger logo */
.dojo-hero .col-md-3 {
flex: 0 0 40% !important;
max-width: 40% !important;
}
.dojo-hero .col-md-9 {
flex: 0 0 60% !important;
max-width: 60% !important;
}
}
@media (max-width: 767.98px) {
.dojo-logo,
img.dojo-logo,
.kaizen-dojo-section .dojo-logo,
.dojo-hero .dojo-logo {
max-width: 300px !important;
width: 100% !important;
margin-bottom: 20px !important;
display: block !important;
}
}
@media (max-width: 767.98px) {
.kaizen-dojo-title {
font-size: clamp(1.5rem, 4vw, 2.2rem) !important;
letter-spacing: 2px;
margin-bottom: 6px !important;
}
.dojo-intro {
font-size: 1rem;
line-height: 1.5;
padding: 15px;
}
.dojo-hero .col-md-9::before {
height: 110%;
border-radius: 50% 60% 40% 80% / 50% 70% 40% 60%;
}
}
@media (max-width: 575.98px) {
.dojo-logo,
img.dojo-logo,
.kaizen-dojo-section .dojo-logo,
.dojo-hero .dojo-logo {
max-width: 270px !important;
width: 100% !important;
}
.kaizen-dojo-title {
font-size: clamp(1.3rem, 3.5vw, 1.8rem) !important;
letter-spacing: 1.5px;
margin-bottom: 5px !important;
}
.dojo-intro {
padding: 12px;
font-size: 0.95rem;
}
}
@media (max-width: 480px) {
.dojo-logo,
img.dojo-logo,
.kaizen-dojo-section .dojo-logo,
.dojo-hero .dojo-logo {
max-width: 250px !important;
width: 100% !important;
}
/* Extra small mobile navigation title - EXTREME minimal to eliminate overlap */
.mobile-brand-text .mobile-brand-name,
.nav-container .mobile-brand-text .mobile-brand-name,
.floating-pills-nav .nav-container .mobile-brand-text .mobile-brand-name,
span.mobile-brand-name {
font-family: 'Playfair Display', serif !important;
font-size: 0.15rem !important; /* EXTREME minimal to eliminate overlap (480px and below) */
font-weight: 700 !important;
letter-spacing: 0px !important; /* No spacing at all */
text-align: center !important;
white-space: nowrap !important;
background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
text-shadow: none !important; /* Remove shadow to save space */
}
/* EXTREME minimal logo for extra small phones */
.brand-logo-prominent {
height: 25px !important; /* EXTREME minimal logo */
}
.floating-pills-nav.scrolled .brand-logo-prominent {
height: 20px !important; /* Tiny when scrolled */
}
/* EXTREME minimal hamburger menu for extra small phones */
.mobile-menu-toggle {
padding: 3px !important; /* EXTREME minimal padding */
gap: 1px !important; /* Minimal gap */
}
.toggle-line {
width: 10px !important; /* EXTREME short hamburger lines */
height: 0.5px !important; /* Ultra thin lines */
}
}
@media (max-width: 360px) {
.dojo-logo,
img.dojo-logo,
.kaizen-dojo-section .dojo-logo,
.dojo-hero .dojo-logo {
max-width: 230px !important;
width: 100% !important;
}
/* Ultra small mobile navigation title - MICRO size to eliminate all overlap */
.mobile-brand-text .mobile-brand-name,
.nav-container .mobile-brand-text .mobile-brand-name,
.floating-pills-nav .nav-container .mobile-brand-text .mobile-brand-name,
span.mobile-brand-name {
font-family: 'Playfair Display', serif !important;
font-size: 0.1rem !important; /* MICRO size to eliminate all overlap (360px and below) */
font-weight: 700 !important;
letter-spacing: 0px !important; /* No letter spacing to save space */
text-align: center !important;
white-space: nowrap !important;
background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
text-shadow: none !important; /* Remove shadow completely */
}
/* MICRO logo for ultra small phones to eliminate overlap */
.brand-logo-prominent {
height: 20px !important; /* MICRO logo to eliminate overlap */
}
.floating-pills-nav.scrolled .brand-logo-prominent {
height: 15px !important; /* Micro when scrolled */
}
/* MICRO hamburger menu for ultra small phones */
.mobile-menu-toggle {
padding: 2px !important; /* MICRO padding */
gap: 0.5px !important; /* Virtually no gap */
}
.toggle-line {
width: 8px !important; /* MICRO hamburger lines */
height: 0.5px !important; /* Ultra thin lines */
}
/* Hero Register Panel Headers - Match Mega Menu Styling */
#heroRegisterPanel .register-panel-header {
color: var(--accent) !important;
border-bottom: 2px solid var(--accent) !important;
padding-bottom: 8px !important;
}
/* Remove bullet point for mobile styling */
#heroRegisterPanel .register-panel-header::before {
display: none !important;
}
}
/* Hide mobile line break on desktop, show desktop space */
.mobile-break {
display: none;
}
.desktop-space {
display: inline;
}
.hero-quote {
font-family: 'Playfair Display', serif;
font-size: 1rem; /* Slightly larger for better readability */
font-weight: 400;
font-style: italic;
color: var(--accent);
margin-top: 5px;
margin-bottom: 10px; /* Reduce bottom margin further */
max-width: none; /* Remove max-width constraint */
margin-left: 0; /* Remove auto centering */
margin-right: 0; /* Remove auto centering */
text-align: left; /* Left align text */
line-height: 1.5; /* Slightly more comfortable line height */
animation: fadeInUp 1s ease-out 0.1s both;
width: 100%; /* Use full width */
}
.hero-subtitle {
font-family: 'Montserrat', sans-serif;
font-size: 1.5rem;
font-weight: 300;
letter-spacing: 2px;
margin-bottom: 30px;
color: var(--text-medium);
text-transform: uppercase;
opacity: 0.9;
animation: fadeInUp 1s ease-out 0.25s both;
}
.hero-description {
font-family: 'Montserrat', sans-serif;
font-size: 0.9rem !important; line-height: 1.45 !important;
font-weight: 400;
line-height: 1.5; /* Slightly more comfortable line height */
margin-top: 4px !important;
color: #000000;
max-width: none; /* Remove max-width constraint */
margin-left: 0; /* Remove auto centering */
margin-right: 0; /* Remove auto centering */
width: 100%; /* Use full width */
animation: fadeInUp 1s ease-out 0.3s both;
}
/* Hero Location Highlighting */
.hero-locations {
font-weight: 600;
color: var(--accent);
background: linear-gradient(135deg, var(--accent), var(--accent-light));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.hero-locations::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
opacity: 0.6;
}
/* Hero Read More Link - Inline */
.hero-read-more-inline {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
color: var(--accent);
text-decoration: none;
border-bottom: 2px solid var(--accent);
padding-bottom: 1px;
transition: all 0.3s ease;
}
.hero-read-more-inline:hover {
color: var(--accent-light);
border-bottom-color: var(--accent-light);
}
/* Hero Action Buttons */
.hero-actions {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
animation: fadeInUp 1s ease-out 0.65s both;
}
.btn-hero {
padding: 15px 35px;
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 50px;
text-decoration: none;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
border: 2px solid transparent;
}
.btn-hero.btn-primary {
background: linear-gradient(135deg, var(--accent), var(--accent-light));
color: white;
border-color: var(--accent);
box-shadow: 0 8px 25px rgba(164, 51, 43, 0.3);
}
.btn-hero.btn-primary:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(164, 51, 43, 0.4);
background: linear-gradient(135deg, var(--accent-light), var(--accent));
}
.btn-hero.btn-secondary {
background: transparent;
color: var(--text-dark);
border-color: var(--text-dark);
backdrop-filter: blur(10px);
}
.btn-hero.btn-secondary:hover {
background: var(--text-light);
color: var(--primary);
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
.hero-content,
.video-container video {
transition: none !important;
animation: none !important;
}
@keyframes fadeInUp {
from { opacity: 0; }
to { opacity: 1; }
}
}
/* OLD RESPONSIVE RULES REMOVED - Using new full-width rules at end of file */
@media (max-width: 1199.98px) {
.hero-title {
font-size: 2.8rem; /* A little bigger with enhanced letter spacing */
letter-spacing: 2.5px; /* Spaced letters for impact */
}
.hero-quote {
font-size: 0.95rem; /* Slightly larger for readability */
}
.hero-subtitle {
font-size: 1.1rem; /* Slightly larger for balance */
}
.hero-description {
font-size: 1rem; /* Larger for better readability */
}
}
/* All hero responsive rules moved to end of file for full-width layout */
/* Legacy Responsive Design */
@media (max-width: 991.98px) {
.hero-section {
height: 95vh; /* Match desktop height for consistent video visibility */
min-height: 95vh;
}
.row.h-100 {
height: 95vh; /* Ensure row takes increased height */
flex-direction: column;
}
.col-lg-8 {
flex: 1; /* Video column takes available space */
position: relative;
}
.col-lg-4 {
height: auto; /* Panel column auto height */
}
.video-container {
height: 95vh; /* Video container takes increased viewport height */
width: 100vw; /* Full viewport width */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.video-container video {
top: 180px; /* Consistent positioning across all breakpoints */
height: calc(95vh + 180px); /* Adjust height to compensate for offset */
width: 100vw; /* Full viewport width */
object-position: center top; /* Show the top portion of the video */
}
.col-lg-4 {
padding: 0 10px;
}
.legacy-panel {
height: 250px; /* Fixed height instead of stretching to full height */
margin-bottom: 20px;
}
.legacy-panel img {
height: 100%;
object-fit: cover;
}
.panel-text {
padding: 12px;
bottom: 0;
text-align: left;
background: rgba(0, 0, 0, 0.5); /* Darker overlay for contrast on small screens */
}
.panel-text h3 {
font-size: 1.1rem;
margin-bottom: 5px;
}
.panel-text p {
font-size: 0.9rem;
line-height: 1.4;
opacity: 1;
}
.panel-text .icon {
font-size: 1rem;
}
}
/* About Section Styling */
/* Dark About Section - Natural Text Wrap */
.about-dark-section {
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
position: relative;
overflow: hidden;
padding: 60px 0;
}
.about-dark-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
z-index: 1;
}
/* Red swoosh - commented out but kept for potential future use
.about-dark-section::after {
content: '';
position: absolute;
bottom: -30px;
right: -50px;
width: 400px;
height: 300px;
background: linear-gradient(135deg, var(--accent), var(--accent-light));
border-radius: 50% 20% 80% 30%;
opacity: 0.15;
transform: rotate(15deg);
z-index: 1;
}
*/
.about-dark-section::after {
content: '';
position: absolute;
bottom: -20px;
right: 40px;
width: 500px;
height: 500px;
background-image: url('../assets/images/logo.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.15;
z-index: 1;
pointer-events: none;
}
/* Content Wrapper */
.about-content-wrapper {
position: relative;
z-index: 2;
padding: 0 20px 0 0; /* Minimal right padding only */
max-width: none;
}
/* Let all text flow naturally around the floated image */
.about-main-title,
.about-section-title,
.about-lead {
/* Remove manual margins - let natural float positioning handle alignment */
padding-left: 0;
margin-right: 0;
}
/* Coach V Image - Floated Left for Natural Text Wrap */
.coach-v-float-image {
float: left;
width: 400px;
height: 75vh; /* Increased height further to show more of Coach V image */
margin: 0 50px 20px -15px; /* Increased right margin for better text spacing */
object-fit: cover;
object-position: center top;
shape-outside: margin-box; /* Text wraps around the image shape */
filter:
drop-shadow(-3px -5px 12px rgba(255, 255, 255, 0.2))
drop-shadow(3px -5px 12px rgba(255, 255, 255, 0.15))
drop-shadow(-5px -2px 15px rgba(255, 255, 255, 0.1))
drop-shadow(5px -2px 15px rgba(255, 255, 255, 0.1))
brightness(1.02)
contrast(1.02);
transition: filter 0.3s ease;
}
.coach-v-float-image:hover {
filter:
drop-shadow(-4px -6px 15px rgba(255, 255, 255, 0.3))
drop-shadow(4px -6px 15px rgba(255, 255, 255, 0.2))
drop-shadow(-6px -3px 18px rgba(255, 255, 255, 0.15))
drop-shadow(6px -3px 18px rgba(255, 255, 255, 0.15))
brightness(1.04)
contrast(1.04);
}
.about-main-title {
color: var(--accent);
font-family: 'Playfair Display', serif;
font-weight: 700;
font-size: 3rem;
margin-bottom: 30px;
text-align: left;
letter-spacing: -1px;
padding-left: 0; /* Remove any extra padding */
margin-right: 0; /* Ensure consistent right margin */
text-decoration: underline;
text-decoration-color: var(--accent);
text-underline-offset: 8px;
text-decoration-thickness: 3px;
}
.about-section-title {
color: var(--accent);
font-family: 'Playfair Display', serif;
font-weight: 600;
font-size: 2rem;
margin-top: 40px;
margin-bottom: 20px;
text-align: left;
}
.about-lead {
color: white !important;
font-size: 1.3rem;
font-weight: 500;
line-height: 1.6;
margin-bottom: 25px;
}
.about-text {
color: white !important;
font-size: 1.1rem;
line-height: 1.7;
margin-bottom: 20px;
}
/* About Action Buttons */
.about-actions {
margin-top: 40px;
}
/* About Section Buttons */
.about-btn-primary {
background: var(--accent);
color: white;
border: 2px solid var(--accent);
padding: 12px 30px;
font-size: 1.1rem;
font-weight: 600;
border-radius: 50px;
text-decoration: none;
transition: all 0.3s ease;
min-width: 200px;
text-align: center;
}
.about-btn-primary:hover {
background: var(--accent-light);
border-color: var(--accent-light);
color: white;
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(164, 51, 43, 0.3);
}
.about-btn-outline {
background: transparent;
color: white;
border: 2px solid white;
padding: 12px 30px;
font-size: 1.1rem;
font-weight: 600;
border-radius: 50px;
text-decoration: none;
transition: all 0.3s ease;
min-width: 200px;
text-align: center;
}
.about-btn-outline:hover {
background: white;
color: var(--accent);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}
/* Mobile Responsive */
@media (max-width: 991.98px) {
.about-dark-section {
padding: 40px 0;
}
/* Red swoosh mobile - commented out
.about-dark-section::after {
bottom: -20px;
right: -30px;
width: 250px;
height: 200px;
transform: rotate(20deg);
}
*/
.about-dark-section::after {
bottom: -10px;
right: 30px;
width: 380px;
height: 380px;
}
.about-content-wrapper {
padding: 0 15px 0 0;
}
.coach-v-float-image {
float: left; /* Keep floated left on mobile */
width: 200px; /* Smaller but still prominent */
height: 70vh;
margin: 0 20px 20px -10px; /* Right margin, slight left overhang */
}
/* Reset margins for mobile - text flows around smaller image */
.about-main-title,
.about-section-title,
.about-lead {
margin-left: 0 !important;
}
.about-main-title {
font-size: 2.2rem;
text-align: left; /* Left aligned like paragraphs */
}
.about-section-title {
font-size: 1.6rem;
text-align: left; /* Left aligned like paragraphs */
}
.about-lead {
font-size: 1.1rem;
text-align: left; /* Left aligned like paragraphs */
color: white !important;
}
.about-text {
font-size: 1rem;
text-align: left; /* Left aligned like paragraphs */
color: white !important;
}
}
@media (max-width: 575.98px) {
.about-dark-section {
padding: 30px 0;
}
/* Red swoosh small mobile - commented out
.about-dark-section::after {
bottom: -15px;
right: -20px;
width: 180px;
height: 140px;
transform: rotate(25deg);
}
*/
.about-dark-section::after {
bottom: -5px;
right: 20px;
width: 280px;
height: 280px;
}
.about-content-wrapper {
padding: 0 10px 0 0;
}
.coach-v-float-image {
width: 160px; /* Smaller for very small screens */
height: 60vh;
margin: 0 15px 15px -8px; /* Adjusted margins */
}
.about-main-title {
font-size: 1.8rem;
}
.about-section-title {
font-size: 1.4rem;
}
.about-lead {
font-size: 1rem;
color: white !important;
}
.about-text {
font-size: 0.9rem;
color: white !important;
}
.summer-camp-title {
font-size: 2.6rem !important;
}
}
@media (max-width: 767.98px) {
.summer-camp-title {
font-size: 3rem !important;
}
}
@media (max-width: 575.98px) {
.summer-camp-title {
font-size: 2.2rem !important;
}
}
/* Summer Camp Title */
.summer-camp-title {
color: var(--accent) !important;
font-family: 'Playfair Display', serif !important;
font-weight: 700 !important;
font-size: 3.8rem !important;
text-decoration: underline !important;
text-decoration-color: var(--accent) !important;
text-underline-offset: 8px !important;
text-decoration-thickness: 3px !important;
letter-spacing: -1px !important;
}
@media (max-width: 1199.98px) {
.summer-camp-title {
font-size: 3.4rem !important;
}
}
.summer-camp-subtitle {
font-family: 'Playfair Display', serif !important;
font-size: 1.6rem !important;
font-weight: 400 !important;
font-style: italic !important;
color: var(--text-medium) !important;
letter-spacing: 0.3px !important;
line-height: 1.6 !important;
margin: 0 auto 3rem auto !important;
position: relative !important;
max-width: 600px !important;
}
.summer-camp-subtitle::before,
.summer-camp-subtitle::after {
content: '';
position: absolute;
top: 50%;
width: 40px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
opacity: 0.7;
}
.summer-camp-subtitle::before {
left: -60px;
}
.summer-camp-subtitle::after {
right: -60px;
}
@media (max-width: 1199.98px) {
.summer-camp-subtitle {
font-size: 1.5rem !important;
}
}
@media (max-width: 767.98px) {
.summer-camp-subtitle {
font-size: 1.4rem !important;
}
.summer-camp-subtitle::before,
.summer-camp-subtitle::after {
display: none;
}
}
@media (max-width: 575.98px) {
.summer-camp-subtitle {
font-size: 1.3rem !important;
}
}
/* Summer Camp Section Headers */
.summer-camp-section-title {
font-family: 'Playfair Display', serif;
font-size: 2.2rem;
font-weight: 700;
color: var(--accent);
margin-bottom: 15px;
position: relative;
}
.summer-camp-section-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 100%);
border-radius: 2px;
}
.summer-camp-section-subtitle {
font-family: 'Montserrat', sans-serif;
font-size: 1.1rem;
font-weight: 500;
color: #666;
margin-bottom: 0;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* SVG Brush Stroke Highlighter - Using External SVG */
.messy-brush-highlight {
background: url(//s2.svgbox.net/pen-brushes.svg?ic=brush-1&color=a4332b);
color: white !important;
font-weight: 700 !important;
padding: 15px 50px;
display: inline-block;
position: relative;
margin: 0 -30px;
background-size: 100% 120%;
background-position: center;
background-repeat: no-repeat;
}
/* Enhanced Summer Camp Campsite Cards */
.campsite-card {
background: linear-gradient(145deg, #ffffff, #fafafa);
border: 2px solid rgba(164, 51, 43, 0.1);
border-radius: 20px;
padding: 0;
height: 100%;
position: relative;
overflow: hidden;
box-shadow:
0 10px 40px rgba(0, 0, 0, 0.1),
0 4px 20px rgba(0, 0, 0, 0.05),
0 2px 10px rgba(164, 51, 43, 0.08);
margin-bottom: 40px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* Camp Locations Row Spacing */
.camp-info-highlight .row.justify-content-center {
row-gap: 30px;
}
/* Ensure consistent spacing for camp location cards */
.camp-info-highlight .campsite-card {
margin-bottom: 40px;
}
.campsite-header {
background: linear-gradient(135deg, var(--accent), var(--accent-light));
padding: 25px 30px;
text-align: center;
margin-bottom: 0;
position: relative;
overflow: hidden;
}
.campsite-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0.05) 50%,
rgba(255, 255, 255, 0.1) 100%);
pointer-events: none;
}
.campsite-title {
font-family: 'Playfair Display', serif;
font-size: clamp(1.2rem, 2vw, 1.5rem);
font-weight: 700;
color: #ffffff;
margin: 0;
text-align: center;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
letter-spacing: 0.5px;
text-transform: uppercase;
position: relative;
z-index: 2;
}
.campsite-divider {
display: none; /* Remove divider since we have the red header */
}
.campsite-content {
text-align: center;
padding: 30px;
position: relative;
z-index: 2;
}
.campsite-venue {
font-family: 'Montserrat', sans-serif;
font-size: 1.1rem;
font-weight: 600;
color: var(--accent);
margin: 0 0 15px 0;
line-height: 1.4;
}
.campsite-address {
font-family: 'Montserrat', sans-serif;
font-size: 0.95rem;
color: var(--text-medium);
margin: 0 0 25px 0;
line-height: 1.6;
}
.campsite-dates {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 25px;
padding-top: 25px;
border-top: 2px solid rgba(164, 51, 43, 0.15);
position: relative;
}
.campsite-dates::before {
content: '';
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 2px;
background: linear-gradient(90deg, var(--accent), var(--accent-light));
}
.campsite-duration {
font-family: 'Montserrat', sans-serif;
font-size: 1.1rem;
font-weight: 600;
color: var(--text-dark);
}
.campsite-weeks {
font-family: 'Playfair Display', serif;
font-size: 1.3rem;
font-weight: 700;
color: var(--accent);
font-style: italic;
}
/* Campsite Registration Buttons */
.campsite-buttons {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 25px;
padding-top: 25px;
border-top: 2px solid rgba(164, 51, 43, 0.15);
position: relative;
}
.campsite-buttons::before {
content: '';
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 2px;
background: linear-gradient(90deg, var(--accent), var(--accent-light));
}
.campsite-btn {
display: block;
text-decoration: none;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 0.85rem;
padding: 10px 16px;
border-radius: 8px;
transition: all 0.3s ease;
letter-spacing: 0.3px;
line-height: 1.2;
}
.campsite-btn-primary {
background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
color: white !important;
border: 2px solid var(--accent);
box-shadow: 0 3px 12px rgba(164, 51, 43, 0.3);
}
.campsite-btn-primary:hover {
background: linear-gradient(135deg, #ffffff, #f8f8f8) !important;
color: var(--accent) !important;
border: 2px solid var(--accent);
transform: translateY(-2px);
box-shadow: 0 5px 18px rgba(164, 51, 43, 0.15);
}
.campsite-btn-secondary {
background: linear-gradient(135deg, #ffffff, #f8f8f8) !important;
color: var(--accent) !important;
border: 2px solid var(--accent);
box-shadow: 0 3px 12px rgba(164, 51, 43, 0.15);
}
.campsite-btn-secondary:hover {
background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
color: white !important;
border: 2px solid transparent;
transform: translateY(-2px);
box-shadow: 0 5px 18px rgba(164, 51, 43, 0.4);
}
/* Responsive Design */
@media (max-width: 1199.98px) {
.campsite-header {
padding: 20px 25px;
}
.campsite-content {
padding: 25px;
}
.campsite-title {
font-size: 1.3rem;
}
}
@media (max-width: 767.98px) {
.campsite-card {
padding: 25px 20px;
margin-bottom: 35px;
}
.campsite-title {
font-size: 1.5rem;
}
.campsite-venue {
font-size: 1.2rem;
}
.campsite-address {
font-size: 1.05rem;
}
}
@media (max-width: 575.98px) {
.campsite-card {
padding: 12px 10px;
margin-bottom: 30px;
}
.campsite-title {
font-size: 1.4rem;
}
.campsite-header {
margin-bottom: 15px;
padding-bottom: 12px;
}
.campsite-dates {
margin-top: 12px;
padding-top: 12px;
}
.campsite-venue {
font-size: 1.1rem;
}
.campsite-address {
font-size: 1rem;
}
.campsite-duration,
.campsite-weeks {
font-size: 1rem;
}
}
/* Summer Camp Important Information Section */
.camp-info-highlight {
background: radial-gradient(circle at center, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.3) 100%);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 2px solid var(--accent);
border-radius: 20px;
padding: 50px 40px;
color: white;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(164, 51, 43, 0.2) inset;
position: relative;
overflow: hidden;
margin-bottom: 40px;
}
.camp-info-highlight::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
/* Dark areas behind text sections for readability */
radial-gradient(ellipse 90% 25% at center 20%, rgba(0, 0, 0, 0.4) 0%, transparent 70%),
radial-gradient(ellipse 80% 30% at center 50%, rgba(0, 0, 0, 0.3) 0%, transparent 70%),
radial-gradient(ellipse 85% 25% at center 85%, rgba(0, 0, 0, 0.4) 0%, transparent 70%),
/* Subtle accent effects */
radial-gradient(circle at 15% 15%, rgba(164, 51, 43, 0.1) 0%, transparent 40%),
radial-gradient(circle at 85% 85%, rgba(255, 255, 255, 0.03) 0%, transparent 40%);
pointer-events: none;
}
/* Camp Features Row - Enhanced Design */
.camp-features {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin-bottom: 40px;
padding: 40px 0;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Standalone Camp Features (Left Column) */
.camp-features-standalone {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
padding: 30px 20px;
max-width: 100%;
height: 100%;
min-height: 400px;
align-content: center;
}
.feature-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
text-align: center;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
cursor: pointer;
}
.feature-item:hover {
transform: translateY(-8px) scale(1.05);
}
.feature-icon-circle {
width: 150px;
height: 150px;
border-radius: 50%;
background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.1),
0 0 0 3px rgba(0, 0, 0, 0.05);
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
overflow: hidden;
}
.feature-icon-circle::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.05) 100%);
border-radius: 50%;
}
.feature-item:hover .feature-icon-circle {
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.15),
0 0 0 5px rgba(0, 0, 0, 0.08),
0 0 40px rgba(0, 0, 0, 0.1);
transform: rotate(5deg);
}
.feature-item i {
font-size: 3.5rem;
color: var(--accent);
z-index: 2;
position: relative;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.feature-item:hover i {
transform: scale(1.1);
}
.feature-text {
font-family: 'Playfair Display', serif;
font-size: 1.3rem;
font-weight: 700;
color: var(--accent);
text-shadow: none;
letter-spacing: 0.5px;
line-height: 1.2;
}
/* Hide the old dividers since we're using a grid now */
.feature-divider {
display: none;
}
/* Summer Camp Section Background Watermark */
#summer-camp {
position: relative;
overflow: hidden;
}
#summer-camp::before {
content: '';
position: absolute;
top: 20%;
left: -250px;
transform: translateY(-50%) rotate(-15deg);
width: 1000px;
height: 1000px;
background-image: url('../assets/images/logo.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.03;
z-index: 0;
pointer-events: none;
}
#summer-camp .container {
position: relative;
z-index: 1;
}
/* Artistic Swooshes */
#summer-camp::after {
content: '';
position: absolute;
top: 20%;
right: -100px;
width: 400px;
height: 300px;
background: linear-gradient(135deg, rgba(164, 51, 43, 0.3) 0%, transparent 70%);
border-radius: 50% 80% 60% 40%;
transform: rotate(45deg);
z-index: 0;
pointer-events: none;
}
/* Additional decorative elements */
#summer-camp .camp-info-highlight::after {
content: '';
position: absolute;
bottom: -50px;
left: -100px;
width: 300px;
height: 200px;
background: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, transparent 60%);
border-radius: 80% 40% 70% 50%;
transform: rotate(-30deg);
z-index: 0;
pointer-events: none;
}
/* Additional lower swoosh */
#summer-camp .summer-camp-features::after {
content: '';
position: absolute;
bottom: -100px;
right: -150px;
width: 350px;
height: 250px;
background: linear-gradient(225deg, rgba(164, 51, 43, 0.28) 0%, transparent 80%);
border-radius: 40% 60% 80% 30%;
transform: rotate(-45deg);
z-index: 0;
pointer-events: none;
}
/* Additional swooshes for more visual interest */
#summer-camp .summer-camp-video::after {
content: '';
position: absolute;
top: -80px;
left: -120px;
width: 280px;
height: 180px;
background: linear-gradient(75deg, rgba(164, 51, 43, 0.25) 0%, transparent 65%);
border-radius: 70% 30% 50% 80%;
transform: rotate(25deg);
z-index: 0;
pointer-events: none;
}
#summer-camp .registration-section::after {
content: '';
position: absolute;
top: -60px;
right: -80px;
width: 320px;
height: 220px;
background: linear-gradient(165deg, rgba(0, 0, 0, 0.18) 0%, transparent 70%);
border-radius: 60% 40% 30% 70%;
transform: rotate(-20deg);
z-index: 0;
pointer-events: none;
}
/* Additional left side bottom swoosh */
#summer-camp .campsite-card:last-child {
position: relative;
}
#summer-camp .campsite-card:last-child::after {
content: '';
/* Online Store Section Background Watermark & Artistic Elements */
#online-store {
position: relative;
overflow: hidden;
}
#online-store::before {
content: '';
position: absolute;
top: 15%;
right: -200px;
transform: translateY(-50%) rotate(20deg);
width: 800px;
height: 800px;
background-image: url('../assets/images/logo.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.025;
z-index: 0;
pointer-events: none;
}
#online-store .container {
position: relative;
z-index: 2;
}
/* Artistic Swooshes for Online Store */
#online-store::after {
content: '';
position: absolute;
top: 25%;
left: -80px;
width: 350px;
height: 280px;
background: linear-gradient(225deg, rgba(164, 51, 43, 0.25) 0%, transparent 70%);
border-radius: 60% 40% 80% 30%;
transform: rotate(-30deg);
z-index: 0;
pointer-events: none;
}
/* Additional Online Store decorative elements */
#online-store .row::after {
content: '';
position: absolute;
bottom: -60px;
right: -100px;
width: 300px;
height: 200px;
background: linear-gradient(45deg, rgba(44, 62, 80, 0.15) 0%, transparent 65%);
border-radius: 70% 30% 60% 80%;
transform: rotate(25deg);
z-index: 0;
pointer-events: none;
}
/* Additional upper right swoosh */
#online-store .container > h2::after {
content: '';
position: absolute;
top: -40px;
right: -120px;
width: 280px;
height: 180px;
background: linear-gradient(135deg, rgba(164, 51, 43, 0.20) 0%, transparent 75%);
border-radius: 40% 80% 50% 30%;
transform: rotate(40deg);
z-index: 0;
pointer-events: none;
}
/* Kenpo Image Shuffle Styles */
.kenpo-image-shuffle .shuffle-container {
position: relative;
display: inline-block;
}
.kenpo-image-shuffle .shuffle-slide {
display: none !important;
}
.kenpo-image-shuffle .shuffle-slide.active {
display: block !important;
}
.kenpo-image-shuffle .shuffle-prev:hover,
.kenpo-image-shuffle .shuffle-next:hover {
background: rgba(220, 53, 69, 0.8);
transform: translateY(-50%) scale(1.1);
}
.kenpo-image-shuffle .shuffle-dot:hover {
background: rgba(220, 53, 69, 1) !important;
transform: scale(1.2);
}
.kenpo-image-shuffle .shuffle-dot.active {
background: rgba(220, 53, 69, 1) !important;
transform: scale(1.1);
}
@keyframes fadeInSlide {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Kenpo Tabs - Clean & Working */
.kenpo-tabs-container .nav-tabs {
border-bottom: 2px solid rgba(220, 53, 69, 0.2) !important;
}
#kenpoTabs .nav-link {
background: rgba(248, 249, 250, 0.5) !important;
border: 1px solid rgba(220, 53, 69, 0.2) !important;
border-bottom: 3px solid transparent !important;
border-radius: 8px 8px 0 0 !important;
color: #333333 !important;
font-weight: 600 !important;
font-size: 1.1rem !important;
padding: 0.8rem 1.5rem !important;
margin-right: 0.5rem !important;
transition: all 0.3s ease !important;
position: relative;
}
#kenpoTabs .nav-link:not(.active) {
color: #333333 !important;
}
#kenpoTabs .nav-link:hover {
background: white !important;
border: 1px solid rgba(220, 53, 69, 0.6) !important;
border-bottom: 3px solid #dc3545 !important;
color: #dc3545 !important;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(220, 53, 69, 0.2) !important;
}
#kenpoTabs .nav-link.active {
background: #dc3545 !important;
border: 1px solid #dc3545 !important;
border-bottom: 3px solid #c82333 !important;
color: white !important;
z-index: 2;
box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3) !important;
}
#kenpoTabs .nav-link.active:hover {
background: #c82333 !important;
border: 1px solid #c82333 !important;
border-bottom: 3px solid #a41e2a !important;
color: white !important;
transform: none;
box-shadow: 0 4px 8px rgba(220, 53, 69, 0.4) !important;
}
/* Responsive adjustments */
@media (max-width: 767.98px) {
.kenpo-image-shuffle .shuffle-container {
margin: 0 15px;
}
.kenpo-image-shuffle .shuffle-slide img {
height: 300px !important;
}
.kenpo-image-shuffle .shuffle-caption {
bottom: 40px;
padding: 15px 10px 5px 10px;
}
.kenpo-image-shuffle .shuffle-caption p {
font-size: 0.9rem;
}
/* Improved mobile tabs */
.kenpo-tabs-container .nav-tabs {
flex-wrap: wrap !important;
gap: 0.5rem !important;
}
.kenpo-tabs-container .nav-link {
font-size: 0.9rem !important;
padding: 0.6rem 0.8rem !important;
margin-right: 0.3rem !important;
margin-bottom: 0.5rem !important;
flex: 1 1 auto !important;
min-width: calc(50% - 0.4rem) !important;
text-align: center !important;
white-space: nowrap !important;
}
}
/* Extra small screens - stack tabs vertically */
@media (max-width: 575.98px) {
.kenpo-tabs-container .nav-link {
font-size: 0.85rem !important;
padding: 0.5rem 0.6rem !important;
margin-right: 0.2rem !important;
margin-bottom: 0.4rem !important;
min-width: calc(50% - 0.2rem) !important;
line-height: 1.3 !important;
}
}
/* Make header logo clickable for scroll to top */
.navbar-brand,
.brand-logo-prominent {
cursor: pointer;
transition: transform 0.2s ease;
}
.navbar-brand:hover,
.brand-logo-prominent:hover {
transform: scale(1.05);
}
position: absolute;
bottom: -80px;
left: -200px;
width: 380px;
height: 280px;
background: linear-gradient(45deg, rgba(164, 51, 43, 0.26) 0%, transparent 75%);
border-radius: 80% 20% 60% 40%;
transform: rotate(15deg);
z-index: 0;
pointer-events: none;
}
/* Swoosh near More Information section */
#summer-camp .master-instructor-accordion {
position: relative;
}
#summer-camp .master-instructor-accordion::before {
content: '';
position: absolute;
top: -60px;
left: -120px;
width: 350px;
height: 250px;
background: linear-gradient(120deg, rgba(0, 0, 0, 0.18) 0%, transparent 70%);
border-radius: 60% 80% 40% 70%;
transform: rotate(-10deg);
z-index: 0;
pointer-events: none;
}
/* Registration Information 2-Column Layout */
.camp-info-left {
height: 100%;
padding: 20px;
background: rgba(255, 255, 255, 0.7);
border-radius: 15px;
border-left: 4px solid #aaa;
}
.camp-registration-section {
height: 100%;
padding: 20px;
background: rgba(248, 248, 248, 0.9);
border-radius: 15px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.registration-header {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
font-weight: 600;
color: var(--accent);
margin-bottom: 10px;
margin-top: 0;
}
.registration-subtext {
font-size: 1.1rem;
color: var(--text-medium);
margin-bottom: 25px;
font-style: italic;
}
/* Improve spacing for the left column items */
.camp-info-left .deadline-notice,
.camp-info-left .special-offer,
.camp-info-left .camp-details {
margin-bottom: 20px;
}
.camp-info-left .camp-details {
margin-bottom: 0;
}
/* Improve readability of titles inside dark container */
.camp-info-highlight .summer-camp-section-title {
color: white;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.camp-info-highlight .summer-camp-section-title::after {
background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 100%);
}
.camp-info-highlight .summer-camp-section-subtitle {
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
/* Camp key info styling for header section */
.camp-key-info {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
margin-top: 15px;
}
.key-info-item {
color: rgba(255, 255, 255, 0.95);
font-size: 1.1rem;
font-weight: 500;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.key-info-item i {
color: rgba(255, 255, 255, 0.8);
font-size: 1rem;
}
@media (max-width: 767.98px) {
.camp-key-info {
flex-direction: column;
gap: 10px;
}
.key-info-item {
justify-content: center;
}
}
/* Enhanced Campsite cards styling within dark container */
.camp-info-highlight .campsite-card {
background: linear-gradient(145deg, #ffffff, #fafafa);
border: 2px solid rgba(164, 51, 43, 0.15);
box-shadow:
0 10px 40px rgba(0, 0, 0, 0.15),
0 4px 20px rgba(0, 0, 0, 0.1),
0 2px 10px rgba(164, 51, 43, 0.12);
}
/* Clean Registration Information Section - No Container */
.registration-clean-title {
font-family: 'Playfair Display', serif;
font-size: 2.2rem;
font-weight: 700;
color: var(--accent);
margin-bottom: 15px;
position: relative;
margin-top: 20px;
}
.registration-clean-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: var(--accent);
border-radius: 2px;
}
.registration-key-info {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
margin-top: 15px;
margin-bottom: 0;
}
.clean-info-item {
color: var(--text-medium);
font-size: 1.1rem;
font-weight: 500;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}
.clean-info-item i {
color: #aaa;
font-size: 1rem;
}
/* Registration Info Cards */
.registration-info-card,
.registration-action-card {
height: 100%;
padding: 25px;
background: #f8f8f8;
border-radius: 15px;
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
margin-bottom: 30px;
}
.registration-action-card {
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Consolidated Registration Card */
.registration-consolidated-card {
padding: 35px 30px;
background: #f8f8f8;
border-radius: 15px;
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
margin-bottom: 30px;
}
/* Enhanced styling for registration info items */
.clean-deadline-notice {
background: linear-gradient(135deg, rgba(220, 38, 38, 0.08), rgba(239, 68, 68, 0.04));
border: 2px solid rgba(220, 38, 38, 0.15);
border-radius: 12px;
padding: 20px;
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 15px;
box-shadow: 0 4px 15px rgba(220, 38, 38, 0.1);
position: relative;
overflow: hidden;
}
.clean-deadline-notice::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, var(--accent), var(--accent-light));
}
.clean-deadline-notice i {
color: var(--accent);
font-size: 1.4rem;
background: rgba(255, 255, 255, 0.9);
padding: 10px;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.clean-deadline-text {
color: var(--text-dark);
font-size: 1.1rem;
font-weight: 500;
line-height: 1.4;
}
.clean-deadline-text strong {
color: var(--accent);
font-weight: 700;
font-size: 1.15rem;
}
.clean-special-offer {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.04));
border: 2px solid rgba(34, 197, 94, 0.2);
border-radius: 12px;
padding: 20px;
margin-bottom: 25px;
display: flex;
align-items: flex-start;
gap: 15px;
box-shadow: 0 4px 15px rgba(34, 197, 94, 0.1);
position: relative;
overflow: hidden;
}
.clean-special-offer::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, #22c55e, #16a34a);
}
.clean-special-offer i {
color: #22c55e;
font-size: 1.4rem;
background: rgba(255, 255, 255, 0.9);
padding: 10px;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin-top: 2px;
}
.clean-offer-main {
color: var(--text-dark);
font-size: 1.1rem;
font-weight: 500;
line-height: 1.5;
}
.clean-offer-main strong {
color: #22c55e;
font-weight: 700;
font-size: 1.15rem;
}
.clean-offer-savings {
display: block;
color: #16a34a;
font-size: 1rem;
font-weight: 600;
font-style: italic;
margin-top: 8px;
background: rgba(34, 197, 94, 0.1);
padding: 4px 8px;
border-radius: 6px;
display: inline-block;
}
.clean-camp-details {
margin-bottom: 0;
display: flex;
flex-direction: column;
gap: 15px;
}
.clean-camp-details.text-center {
display: flex;
flex-direction: row;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
}
.clean-detail-item {
display: flex;
align-items: center;
gap: 12px;
color: var(--text-dark);
font-size: 1rem;
font-weight: 500;
background: rgba(255, 255, 255, 0.6);
padding: 12px 15px;
border-radius: 8px;
border: 1px solid rgba(164, 51, 43, 0.1);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.clean-detail-item i {
color: var(--accent);
font-size: 1.1rem;
width: 20px;
text-align: center;
}
/* Registration Action Section */
.clean-registration-header {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
font-weight: 600;
color: var(--accent);
margin-bottom: 10px;
margin-top: 0;
}
.clean-registration-subtext {
font-size: 1.1rem;
color: var(--text-medium);
margin-bottom: 25px;
font-style: italic;
}
.clean-registration-buttons {
display: flex;
flex-direction: column;
gap: 15px;
}
.clean-register-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 15px 25px;
background: #ffffff;
color: var(--accent);
text-decoration: none;
border-radius: 10px;
border: 2px solid var(--accent);
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.clean-register-btn:hover {
background: var(--accent);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
text-decoration: none;
}
.clean-register-btn i {
font-size: 1.1rem;
}
/* New Families Button - Red Variant */
.clean-register-btn.new-families {
background: linear-gradient(135deg, var(--accent), var(--accent-light));
color: white;
box-shadow: 0 3px 12px rgba(164, 51, 43, 0.3);
}
.clean-register-btn.new-families:hover {
background: linear-gradient(135deg, #ffffff, #f8f8f8);
color: var(--accent);
border-color: var(--accent);
box-shadow: 0 5px 18px rgba(164, 51, 43, 0.15);
}
/* Responsive adjustments */
@media (max-width: 767.98px) {
.registration-key-info {
flex-direction: column;
gap: 10px;
}
.clean-info-item {
justify-content: center;
}
.registration-clean-title {
font-size: 1.8rem;
}
.clean-registration-header {
font-size: 1.5rem;
}
.clean-camp-details.text-center {
flex-direction: column;
gap: 15px;
align-items: center;
}
.registration-consolidated-card {
padding: 25px 20px;
}
}
/* Responsive adjustments */
@media (max-width: 991.98px) {
.camp-info-left,
.camp-registration-section {
margin-bottom: 20px;
}
.registration-header {
font-size: 1.5rem;
}
}
/* Important Information */
.camp-important-info {
display: flex;
flex-direction: column;
gap: 25px;
align-items: center;
text-align: center;
}
.deadline-notice {
display: flex;
align-items: center;
gap: 12px;
background: rgba(255, 255, 255, 0.1);
padding: 15px 25px;
border-radius: 50px;
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid var(--accent);
}
.deadline-notice i {
font-size: 1.3rem;
color: #fff;
}
.deadline-text {
font-family: 'Montserrat', sans-serif;
font-size: 1.1rem;
font-weight: 500;
}
.special-offer {
display: flex;
align-items: flex-start;
gap: 15px;
background: rgba(255, 255, 255, 0.1);
padding: 20px 30px;
border-radius: 15px;
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 2px solid var(--accent);
max-width: 100%;
}
.special-offer i {
font-size: 1.5rem;
color: #fff;
margin-top: 3px;
flex-shrink: 0;
}
.offer-content {
display: flex;
flex-direction: column;
gap: 8px;
}
.offer-main {
font-family: 'Montserrat', sans-serif;
font-size: 1.1rem;
font-weight: 600;
line-height: 1.4;
}
.offer-savings {
font-family: 'Playfair Display', serif;
font-size: 1rem;
font-style: italic;
opacity: 0.9;
font-weight: 500;
}
.camp-details {
display: flex;
gap: 40px;
flex-wrap: wrap;
justify-content: center;
}
.detail-item {
display: flex;
align-items: center;
gap: 10px;
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
font-weight: 500;
}
.detail-item i {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.9);
}
/* Registration Buttons */
.camp-registration-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
margin-top: 30px;
padding-top: 25px;
border-top: 2px solid var(--accent);
}
.camp-register-btn {
display: flex;
align-items: center;
gap: 10px;
padding: 20px 15px;
border-radius: 50px;
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.3px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
width: 300px;
height: 65px;
justify-content: center;
flex-shrink: 0;
text-align: center;
}
.camp-register-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.camp-register-btn:hover::before {
left: 100%;
}
.camp-register-btn i {
font-size: 1.3rem;
flex-shrink: 0;
}
/* New Families Button - White with red text */
.camp-register-btn.new-families {
background: rgba(255, 255, 255, 0.95);
color: var(--accent);
border: 2px solid rgba(255, 255, 255, 0.9);
}
.camp-register-btn.new-families:hover {
background: #ffffff;
color: var(--accent);
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}
/* Returning Families Button - Glass with white text and red border */
.camp-register-btn.returning-families {
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
border: 2px solid var(--accent);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
}
.camp-register-btn.returning-families:hover {
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
border-color: var(--accent-light);
transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}
/* Responsive Design */
@media (max-width: 1199.98px) {
.camp-info-highlight {
padding: 35px 30px;
}
.feature-icon-circle {
width: 100px;
height: 100px;
}
.feature-item i {
font-size: 2.5rem;
}
.feature-text {
font-size: 1.1rem;
}
.summer-camp-section-title {
font-size: 1.9rem;
}
.summer-camp-section-subtitle {
font-size: 1rem;
}
.camp-features-standalone {
gap: 30px;
padding: 25px 15px;
min-height: 350px;
}
.summer-camp-video-container {
min-height: 350px;
}
.deadline-text,
.offer-main {
font-size: 1.05rem;
}
.camp-register-btn {
width: 320px;
height: 70px;
font-size: 1.05rem;
}
}
@media (max-width: 767.98px) {
.camp-info-highlight {
padding: 30px 25px;
}
.camp-features {
grid-template-columns: 1fr;
gap: 25px;
max-width: 300px;
padding: 30px 0;
}
.camp-features-standalone {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
padding: 20px 10px;
text-align: center;
min-height: auto;
height: auto;
}
.summer-camp-video-container {
min-height: 280px;
height: auto;
}
.feature-icon-circle {
width: 145px;
height: 145px;
}
.feature-item i {
font-size: 3.4rem;
}
.feature-text {
font-size: 1.2rem;
}
.summer-camp-section-title {
font-size: 1.6rem;
}
.summer-camp-section-subtitle {
font-size: 0.95rem;
}
.deadline-notice {
flex-direction: column;
gap: 8px;
padding: 15px 20px;
text-align: center;
}
.deadline-text {
font-size: 1rem;
}
.special-offer {
flex-direction: column;
gap: 12px;
padding: 20px 25px;
text-align: center;
}
.offer-main {
font-size: 1rem;
}
.offer-savings {
font-size: 0.9rem;
}
.camp-details {
flex-direction: column;
gap: 20px;
}
.detail-item {
justify-content: center;
font-size: 0.95rem;
}
.camp-registration-buttons {
gap: 15px;
margin-top: 25px;
padding-top: 20px;
}
.camp-register-btn {
font-size: 0.95rem;
width: 280px;
height: 60px;
gap: 8px;
letter-spacing: 0.2px;
}
}
@media (max-width: 575.98px) {
.camp-info-highlight {
padding: 25px 20px;
}
.feature-item {
font-size: 0.85rem;
}
.deadline-text {
font-size: 0.95rem;
}
.offer-main {
font-size: 0.95rem;
}
.offer-savings {
font-size: 0.85rem;
}
.detail-item {
font-size: 0.9rem;
}
.camp-registration-buttons {
flex-direction: column;
gap: 12px;
}
.camp-register-btn {
font-size: 0.9rem;
width: 100%;
max-width: 280px;
height: 55px;
gap: 8px;
letter-spacing: 0.1px;
margin: 0 auto;
}
.camp-register-btn i {
font-size: 1.1rem;
}
}
/* About Section - Instructor Accordion Styling */
.about-instructors-section {
margin-top: 50px;
clear: both; /* Clear the float from Coach V image */
}
/* Master Accordion Styling */
.master-instructor-accordion {
margin-bottom: 20px;
}
.master-instructor-header {
width: 100%;
background: none;
border: none;
padding: 0;
text-align: left;
cursor: pointer;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 6px; /* Reduced since using margin for fine positioning */
transition: all 0.3s ease;
}
.master-instructor-header:hover .about-section-title {
color: var(--accent-light);
}
.master-instructor-header .about-section-title {
margin: 0;
transition: color 0.3s ease;
}
.master-accordion-icon {
color: var(--accent);
font-size: 1.5rem;
transition: transform 0.3s ease;
margin-top: 25px; /* Move down a bit more */
margin-left: 2px; /* Move slightly to the right */
}
.master-instructor-accordion.active .master-accordion-icon {
transform: rotate(180deg);
}
.master-instructor-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.6s ease;
}
.master-instructor-accordion.active .master-instructor-content {
max-height: 25000px; /* Large enough to fit all accordion content */
}
.instructors-accordion {
width: 100%;
margin: 0;
}
.instructor-item {
border: 1px solid rgba(164, 51, 43, 0.3);
border-radius: 8px;
margin-bottom: 15px;
background: rgba(45, 45, 45, 0.8);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.instructor-item:hover {
border-color: var(--accent);
box-shadow: 0 4px 15px rgba(164, 51, 43, 0.2);
}
.instructor-header {
width: 100%;
background: none;
border: none;
padding: 20px 25px;
text-align: left;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
}
.instructor-header:hover {
background: rgba(164, 51, 43, 0.1);
}
.instructor-header h3 {
color: var(--accent);
font-family: 'Playfair Display', serif;
font-weight: 600;
font-size: 1.3rem;
margin: 0;
flex-grow: 1;
}
.accordion-icon {
color: var(--accent);
font-size: 1.5rem;
font-weight: bold;
transition: transform 0.3s ease;
margin-left: 15px;
}
.instructor-item.active .accordion-icon {
transform: rotate(45deg);
}
.instructor-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease, padding 0.4s ease;
background: rgba(30, 30, 30, 0.9);
}
.instructor-item.active .instructor-content {
max-height: 15000px;
padding: 0 25px 25px 25px;
}
.instructor-content .about-text {
margin-bottom: 15px;
padding-top: 0;
}
.instructor-content .about-text:first-child {
padding-top: 20px;
}
.instructor-content .about-text:last-child {
margin-bottom: 0;
}
/* Mobile responsive for accordion */
@media (max-width: 767.98px) {
.about-instructors-section {
margin-top: 30px;
}
.master-accordion-icon {
font-size: 1.3rem;
margin-top: 18px; /* Move down proportionally */
margin-left: 1px; /* Move slightly to the right */
}
.master-instructor-header {
gap: 4px; /* Reduced since using margin for fine positioning */
}
.master-instructor-header .about-section-title {
font-size: 1.6rem;
}
.instructor-header {
padding: 15px 20px;
}
.instructor-header h3 {
font-size: 1.1rem;
}
.instructor-item.active .instructor-content {
padding: 0 20px 20px 20px;
}
.accordion-icon {
font-size: 1.3rem;
}
}
/* Sections (About, Luxury, Contact) */
section {
background-color: var(--background-color);
padding: 60px 0;
}
section h2 {
color: var(--base-color);
font-family: QuorthonDarkIV;
font-weight: 700;
}
/* Contact Section */
.contact-section {
background-color: #FFFFFF; /* White background */
padding: 80px 0;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}
.contact-section h2 {
font-family: QuorthonDarkIV;
font-weight: 700;
font-size: 2.5rem;
margin-bottom: 30px;
text-align: center;
color: var(--text-color);
}
.contact-section p {
color: var(--text-color);
}
/* Contact Form */
.contact-form {
background-color: var(--background-color); /* Light beige */
padding: 30px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Soft shadow */
}
/* Form Labels */
.contact-form .form-label {
font-weight: 600;
color: var(--text-color);
}
/* Form Inputs */
.contact-form .form-control,
.contact-form .form-select {
border: 1px solid rgba(101, 67, 33, 0.2); /* Light brown border */
border-radius: 5px;
background-color: #FFF;
color: var(--text-color);
}
.contact-form .form-control:focus,
.contact-form .form-select:focus {
border-color: var(--accent-color); /* Yellow accent */
box-shadow: 0 0 5px rgba(255, 215, 0, 0.5); /* Subtle yellow glow */
}
/* Submit Button */
.contact-form .btn-primary {
background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
color: white !important;
border: none;
font-weight: 600;
padding: 12px 20px;
border-radius: 25px;
transition: all 0.3s ease;
display: block;
width: 100%; /* Full-width button */
text-align: center;
box-shadow: 0 4px 15px rgba(164, 51, 43, 0.3);
text-transform: uppercase;
letter-spacing: 0.5px;
font-family: 'Montserrat', sans-serif;
}
/* Submit Button - Hover State */
.contact-form .btn-primary:hover {
background: linear-gradient(135deg, var(--accent-light), var(--accent)) !important;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(164, 51, 43, 0.4);
color: white !important;
}
.required {
color: var(--required-color);
font-weight: bold;
margin-left: 3px;
font-size: 1.2rem;
}
/* Wait List Thank You Message Styling */
.waitlist-thankyou {
display: none;
background-color: var(--base-color);
padding: 40px 30px;
margin-top: 40px;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
color: var(--text-color);
max-width: 700px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: 'Arial', sans-serif;
}
.waitlist-thankyou h4 {
font-size: 1.75rem;
font-weight: 700;
color: var(--button-color);
margin-bottom: 16px;
font-family: 'QuorthonDarkIV', serif;
}
.waitlist-thankyou p {
font-size: 1.1rem;
color: var(--text-color);
line-height: 1.6;
margin-bottom: 0;
}
/* Responsive Design */
@media (max-width: 767.98px) {
.contact-section {
padding: 50px 20px;
}
.contact-form {
padding: 20px;
}
.contact-section h2 {
font-size: 2rem;
}
.contact-form .btn-primary {
font-size: 1rem;
}
}
/* Luxury Section */
#luxury {
position: relative;
height: 100vh;
overflow: hidden;
}
#luxury .video-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#luxury .luxury-video {
width: 100%;
height: 100%;
object-fit: cover;
}
.luxury-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--text-color);
text-align: center;
z-index: 1;
background-color: rgba(220, 216, 204, 0.8);
padding: 30px;
border-radius: 10px;
width: 80%;
max-width: 1200px;
}
.luxury-overlay h2 {
font-family: QuorthonDarkIV;
font-size: 3rem;
margin-bottom: 1rem;
color: var(--text-color);
}
.luxury-overlay p {
font-size: 1.5rem;
margin-bottom: 2rem;
}
/* Thumbnail Grid */
.thumbnail-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-top: 20px;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.thumbnail-item {
position: relative;
cursor: pointer;
border-radius: 6px;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
aspect-ratio: 1/1;
width: 100%; /* Will respect parent grid sizing */
}
.thumbnail-item:hover {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.thumbnail-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Smaller label for compact thumbnails */
.thumbnail-label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 6px;
font-size: 0.8rem;
font-weight: 600;
text-align: center;
}
/* Lightbox Styles */
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
z-index: 1000;
justify-content: center;
align-items: flex-start; /* Changed from center to flex-start */
padding-top: 120px;
box-sizing: border-box;
overflow-y: auto;
}
.lightbox-content {
position: relative;
max-width: 90%;
max-height: calc(90vh - 80px); /* Account for padding */
text-align: center;
margin: 20px auto;
}
.media-container {
position: relative;
width: 100%;
height: 100%;
}
.lightbox-media {
max-width: 100%;
max-height: 70vh; /* Reduced slightly for better fit */
border-radius: 5px;
}
.lightbox-caption {
color: #fff;
font-size: 1.2rem;
margin-top: 15px;
padding: 0 20px;
}
.lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: white;
font-size: 3rem;
cursor: pointer;
z-index: 1001;
padding: 0 20px;
user-select: none;
}
.lightbox-nav.prev {
left: 0;
}
.lightbox-nav.next {
right: 0;
}
.close-btn {
position: absolute;
top: 20px;
right: 20px;
color: #fff;
font-size: 2.5rem;
cursor: pointer;
z-index: 1001;
background: rgba(0, 0, 0, 0.5);
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
/* Responsive adjustments */
@media (max-width: 767.98px) {
.thumbnail-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
max-width: 95%; /* optional: lets it scale nicely on small screens */
}
.thumbnail-item {
aspect-ratio: 1/1; /* Keep square thumbnails */
}
.luxury-overlay {
padding: 20px;
margin-top: 20px;
}
.lightbox {
padding-top: 60px; /* Smaller header on mobile */
}
.close-btn {
top: 70px;
}
.lightbox-media {
max-height: 60vh;
}
.lightbox-nav {
width: 40px;
height: 40px;
font-size: 1.5rem;
}
.close-btn {
width: 40px;
height: 40px;
font-size: 2rem;
}
.lightbox-caption {
font-size: 1rem;
}
.thumbnail-label {
font-size: 0.9rem;
}
}
/* Availability Section */
#availability {
background-color: #FFFFFF; /* White background */
padding: 80px 0; /* Consistent padding */
}
#availability h2 {
font-family: QuorthonDarkIV;
font-weight: 700;
color: var(--text-color); /* Black text for better contrast */
font-size: 2.5rem; /* Larger font size for emphasis */
margin-bottom: 20px;
text-align: center;
}
#availability p {
font-family: 'Arial', sans-serif;
color: var(--text-color); /* Black text for better contrast */
font-size: 1.2rem;
line-height: 1.8; /* Improved readability */
text-align: center;
max-width: 800px; /* Limit width for better readability */
margin: 0 auto 40px; /* Center the text and add bottom margin */
}
/* Filter Buttons */
.filter-btn {
font-family: 'Arial', sans-serif;
font-size: 1rem;
font-weight: 500;
color: var(--text-color); /* Black text for better contrast */
background-color: transparent;
border: 2px solid var(--accent-color); /* Accent color for border */
border-radius: 25px;
padding: 10px 20px;
margin: 5px;
transition: all 0.3s ease;
}
.filter-btn:hover,
.filter-btn.active {
background-color: var(--accent-color); /* Accent color for background */
color: #FFFFFF; /* White text for better contrast */
border-color: var(--accent-color); /* Accent color for border */
}
/* Table Styling */
.table {
background-color: #FFFFFF; /* White background */
border-collapse: separate;
border-spacing: 0 10px; /* Add spacing between rows */
}
.table thead th {
font-family: QuorthonDarkIV;
font-weight: 700;
color: var(--text-color); /* Black text for better contrast */
border-bottom: 2px solid var(--accent-color); /* Accent color for border */
}
.table tbody tr {
background-color: #FFFFFF; /* White background */
border: 1px solid rgba(0, 0, 0, 0.1); /* Light border for separation */
border-radius: 10px;
transition: all 0.3s ease;
}
.table tbody tr:hover {
background-color: rgba(0, 0, 0, 0.05); /* Light hover effect */
cursor: pointer;
}
.table tbody td {
font-family: 'Arial', sans-serif;
color: var(--text-color); /* Black text for better contrast */
padding: 15px;
}
/* Modal Styling */
.modal-content {
background-color: #dcd8cc !important;
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, 0.1); /* Light border */
color: #000 !important;
}
.modal-header {
border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Light border */
padding: 20px; /* Add padding for better spacing */
background-color: #dcd8cc;
color: #000;
}
.modal-title {
font-family: QuorthonDarkIV;
font-weight: 700;
color: #000000; /* Black text for better contrast */
font-size: 1.5rem; /* Larger font size for emphasis */
}
.modal-body {
padding: 20px;
background-color: #FFFFFF; /* White background */
}
/* Image in Modal */
.modal-body img {
width: 100%; /* Full width */
height: auto; /* Maintain aspect ratio */
border-radius: 10px; /* Consistent border radius */
margin-bottom: 20px; /* Add spacing below the image */
}
/* Description Text */
.modal-body h4 {
text-align: left;
font-weight: 700;
color: #000000; /* Black text for better contrast */
font-size: 1.25rem; /* Larger font size for emphasis */
margin-bottom: 10px; /* Add spacing below the heading */
}
#unitDescription {
text-align: left;
list-style-type: disc;
padding-left: 20px;
font-family: 'Arial', sans-serif;
color: #000000; /* Black text for better contrast */
font-size: 1rem; /* Consistent font size */
line-height: 1.6; /* Improved readability */
}
/* Form Styling */
#unitInterestForm {
background-color: var(--base-color);
padding: 25px;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
margin-top: 20px;
}
#unitInterestForm label {
font-family: 'Arial', sans-serif;
color: #000000 !important;
font-weight: 500;
font-size: 1rem; /* Consistent font size */
}
#unitInterestForm input,
#unitInterestForm select,
#unitInterestForm textarea {
background-color: #FFFFFF; /* White background */
border: 1px solid rgba(0, 0, 0, 0.1); /* Light border */
border-radius: 5px;
color: #000000 !important;
font-size: 1rem; /* Consistent font size */
padding: 10px; /* Add padding for better input field size */
}
#unitInterestForm input:focus,
#unitInterestForm select:focus,
#unitInterestForm textarea:focus {
border-color: var(--accent-color); /* Accent color for focus */
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}
.btn-primary {
--bs-btn-bg: #8a7f7f !important; /* Custom button background */
--bs-btn-color: #fff !important; /* Force white text */
--bs-btn-border-color: #8a7f7f !important; /* Border color */
--bs-btn-hover-bg: #756b6b !important; /* Darker hover color */
--bs-btn-hover-border-color: #756b6b !important; /* Hover border */
}
#unitInterestForm .btn-primary {
background-color: #8a7f7f !important; /* Force background */
color: #FFFFFF !important; /* Force white text */
border: none !important;
font-weight: 600 !important;
padding: 12px 20px !important;
border-radius: 25px !important;
transition: all 0.3s ease !important;
font-size: 1rem !important;
}
#unitInterestForm .btn-primary:hover {
background-color: #756b6b !important; /* Darker hover effect */
}
/* Custom styles for the "View" button */
.view-floor-plan {
background-color: var(--button-color);
color: var(--text-color);
border: 1px solid var(--accent-color);
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.view-floor-plan:hover {
background-color: var(--accent-color);
color: var(--text-color);
}
/* Leased Unit Styling */
.leased-row {
background-color: rgba(255, 0, 0, 0.1) !important;
position: relative;
}
.leased-row:hover {
background-color: rgba(255, 0, 0, 0.15) !important;
}
/* Leased Modal Styling */
.leased-modal-content {
background-color: #fff8f8 !important;
border: 2px solid #d9534f;
}
.leased-modal-content .modal-header {
background-color: #d9534f !important;
color: white !important;
}
.leased-modal-content .modal-title {
color: white !important;
}
/* Disabled form styling */
#unitModal form[disabled] {
position: relative;
}
#unitModal form[disabled]::before {
content: "LEASED";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 0, 0, 0.2);
backdrop-filter: blur(2px);
display: flex;
align-items: center;
justify-content: center;
color: #d9534f;
font-size: 3rem;
font-weight: bold;
z-index: 1000;
}
#unitModal form[disabled] * {
pointer-events: none;
}
/* Floor Plan Modal Leased Overlay */
.leased-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.leased-overlay .leased-text {
color: #d9534f;
font-size: 3rem;
font-weight: bold;
transform: rotate(-15deg);
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
/* Badge styles for modal titles */
.badge.bg-danger {
font-size: 0.8rem;
vertical-align: middle;
margin-left: 10px;
}
/* More prominent leased row styling */
.leased-row td {
position: relative;
color: #721c24 !important;
background-color: rgba(220, 53, 69, 0.1) !important;
}
.leased-row td:first-child {
font-weight: bold;
}
.leased-row:hover td {
background-color: rgba(220, 53, 69, 0.15) !important;
}
tr.leased-row[data-leased="true"] {
background-color: rgba(255, 0, 0, 0.1) !important;
position: relative;
}
tr.leased-row[data-leased="true"] td {
position: relative;
color: #721c24 !important;
background-color: rgba(220, 53, 69, 0.1) !important;
}
/* Amenities Section */
#amenities {
background-color: var(--background-color);
padding: 80px 0;
}
#amenities h2 {
font-family: QuorthonDarkIV;
font-weight: 700;
color: var(--text-color);
font-size: 2.5rem;
margin-bottom: 40px;
text-align: center;
}
.amenity-panel {
background: linear-gradient(145deg, #ffffff, #f8f9fa);
border-radius: 16px;
overflow: hidden;
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.08),
0 3px 10px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
border: 1px solid rgba(255, 255, 255, 0.8);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.amenity-panel::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(220, 38, 38, 0.02) 0%,
rgba(239, 68, 68, 0.01) 50%,
rgba(185, 28, 28, 0.02) 100%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: 1;
}
.amenity-panel:hover {
transform: translateY(-12px) scale(1.02);
box-shadow:
0 20px 40px rgba(220, 38, 38, 0.12),
0 8px 25px rgba(0, 0, 0, 0.1),
0 3px 15px rgba(220, 38, 38, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 1);
border: 1px solid rgba(220, 38, 38, 0.1);
}
.amenity-panel:hover::before {
opacity: 1;
}
.amenity-video-container {
position: relative;
width: 100%;
height: 250px;
overflow: hidden;
border-radius: 0;
margin: 0;
padding: 0;
}
.amenity-video-container::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.02) 50%,
rgba(0, 0, 0, 0.05) 100%
);
opacity: 1;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: 2;
}
.amenity-panel:hover .amenity-video-container::after {
background: linear-gradient(
to bottom,
rgba(220, 38, 38, 0.05) 0%,
rgba(220, 38, 38, 0.03) 50%,
rgba(220, 38, 38, 0.08) 100%
);
}
.amenity-video {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
filter: brightness(1.05) contrast(1.02);
}
.amenity-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
filter: brightness(1.05) contrast(1.02) saturate(1.1);
}
.amenity-panel:hover .amenity-video,
.amenity-panel:hover .amenity-image {
transform: scale(1.05);
filter: brightness(1.08) contrast(1.05) saturate(1.15);
}
.amenity-content {
padding: 24px;
position: relative;
z-index: 3;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
margin: 0;
}
.amenity-content:first-child {
padding: 0;
background: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.amenity-content h3 {
font-family: 'Playfair Display', serif;
font-weight: 700;
color: #000000;
background: linear-gradient(135deg, var(--accent), var(--accent-light));
font-size: clamp(0.6rem, 1.8vw, 1.3rem);
margin: -24px -24px 0 -24px;
padding: clamp(28px, 5vw, 40px) 32px 24px 32px;
position: relative;
transition: all 0.3s ease;
border-radius: 16px 16px 0 0;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
letter-spacing: clamp(0.2px, 0.5vw, 0.8px);
text-transform: uppercase;
font-weight: 800;
text-align: center;
line-height: 1.2;
}
.amenity-content h3::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0.05) 50%,
rgba(255, 255, 255, 0.1) 100%);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.amenity-panel .amenity-content h3 {
/* Glass white background effect like hero title */
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.8) 0%,
rgba(248, 248, 248, 0.7) 50%,
rgba(255, 255, 255, 0.85) 100%
);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
padding: 32px 32px 24px 32px;
margin-bottom: 0;
color: var(--text-dark);
font-weight: 600;
border: 1px solid var(--accent);
letter-spacing: 1px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.amenity-panel:hover .amenity-content h3 {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.amenity-panel:hover .amenity-content h3::before {
opacity: 1;
}
.amenity-content .amenity-summary {
font-weight: 600;
color: var(--accent);
font-size: 1rem;
margin-bottom: 12px;
opacity: 0.9;
transition: all 0.3s ease;
}
.amenity-panel:hover .amenity-content .amenity-summary {
opacity: 1;
transform: translateX(2px);
}
.amenity-content p {
color: var(--text-color);
line-height: 1.6;
margin-bottom: 15px;
transition: all 0.3s ease;
}
.amenity-panel:hover .amenity-content p {
color: #333;
transform: translateX(1px);
}
.amenity-content .btn {
background: linear-gradient(135deg, var(--accent), var(--accent-light));
border: none;
border-radius: 8px;
padding: 12px 24px;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.5px;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
position: relative;
overflow: hidden;
}
.amenity-content .btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s ease;
}
.amenity-content .btn:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 8px 20px rgba(220, 38, 38, 0.3);
background: linear-gradient(135deg, var(--accent-light), var(--accent));
}
.amenity-content .btn:hover::before {
left: 100%;
}
.amenity-summary {
font-family: 'Arial', sans-serif;
color: var(--text-color);
font-size: 1rem;
margin-bottom: 20px;
}
.amenity-details {
display: none; /* Hidden by default */
margin-top: 20px;
}
.amenity-details p {
font-family: 'Arial', sans-serif;
color: var(--text-color);
font-size: 1rem;
margin-bottom: 10px;
}
.amenity-details ul {
list-style-type: disc;
padding-left: 20px;
margin-bottom: 0;
}
.amenity-details li {
font-family: 'Arial', sans-serif;
color: var(--text-color);
font-size: 0.95rem;
margin-bottom: 8px;
}
.toggle-details {
background-color: var(--accent-color);
color: var(--text-color);
border: none;
font-weight: 500;
padding: 10px 20px;
border-radius: 25px;
transition: all 0.3s ease;
}
.toggle-details:hover {
background-color: var(--button-color);
}
/* Responsive Design */
@media (max-width: 767.98px) {
.amenity-video-container {
height: 200px;
}
.amenity-content h3 {
font-size: 1.5rem;
}
.amenity-summary {
font-size: 0.95rem;
}
.amenity-details li {
font-size: 0.9rem;
}
}
/* Map Section - Enhanced Styling */
/* === Neighborhood Section === */
.neighborhood-section {
background-color: #fff;
padding: 4rem 0;
}
/* Headings & Intro */
.section-title {
font-size: 2rem;
font-weight: 700;
margin-bottom: 1rem;
color: #333;
}
.section-description {
font-size: 1.05rem;
color: #555;
}
/* Carousel */
.carousel-inner img {
object-fit: cover;
height: 350px;
border-radius: 0.5rem;
}
/* Map */
.map-wrapper iframe {
min-height: 350px;
border-radius: 0.5rem;
}
/* Tabs */
.btn-outline-tab {
border: 2px solid var(--button-color);
color: var(--button-color);
background-color: transparent;
margin: 0 6px 10px;
padding: 8px 18px;
font-weight: 600;
border-radius: 8px;
transition: all 0.2s ease;
}
.btn-outline-tab:hover {
background-color: var(--button-color);
color: #fff;
}
.btn-outline-tab.active {
background-color: var(--button-color);
color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Tab Content */
.tab-content {
background-color: #f9f9f9;
padding: 2rem;
border-radius: 0.5rem;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
/* Info List */
.info-list {
list-style: none;
padding: 0;
margin: 0;
}
.info-list li {
padding: 0.75rem 1rem;
border-left: 4px solid #333;
background: #fff;
margin-bottom: 0.5rem;
border-radius: 0.25rem;
color: #333;
}
.subway-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin-right: 6px;
font-size: 13px;
font-weight: bold;
font-family: Arial, sans-serif;
color: white;
border-radius: 50%;
text-align: center;
line-height: 1;
}
/* IND (blue, orange, etc.) */
.subway-icon.A,
.subway-icon.C,
.subway-icon.E {
background-color: #0039A6;
}
.subway-icon.B,
.subway-icon.D,
.subway-icon.F,
.subway-icon.M {
background-color: #FF6319;
}
.subway-icon.G {
background-color: #6CBE45;
}
.subway-icon.L {
background-color: #A7A9AC;
color: #000;
}
.subway-icon.N,
.subway-icon.Q,
.subway-icon.R,
.subway-icon.W {
background-color: #FCCC0A;
color: #000;
}
/* IRT (1-7 lines) */
.subway-icon._1,
.subway-icon._2,
.subway-icon._3 {
background-color: #EE352E;
}
.subway-icon._4,
.subway-icon._5,
.subway-icon._6 {
background-color: #00933C;
}
.subway-icon._7 {
background-color: #B933AD;
}
.info-list i {
color: var(--button-color);
min-width: 20px;
}
.info-list li i.fa-landmark {
color: #7c4dff; /* deep violet or anything culturally rich */
}
.info-list li i.fa-tree {
color: #4CAF50; /* soft park green */
}
/* Optional link style inside tabs */
.tab-pane a {
display: inline-block;
margin-top: 1rem;
color: #0066cc;
text-decoration: underline;
}
.tab-pane a:hover {
text-decoration: none;
}
/* Responsive */
@media (max-width: 767.98px) {
.carousel-inner img,
.map-wrapper iframe {
height: 250px;
}
}
/* Beautiful Black Footer Styles */
.footer {
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #000000 100%);
color: #ffffff;
padding: 80px 0 0 0;
position: relative;
overflow: hidden;
}
.footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 30%, rgba(164, 51, 43, 0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 70%, rgba(164, 51, 43, 0.05) 0%, transparent 50%);
z-index: 1;
}
.footer .container {
position: relative;
z-index: 2;
}
/* Main Footer Content */
.footer-main {
padding-bottom: 50px;
}
/* Perfect equidistant spacing for footer columns */
.footer-main .row {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.footer-main .row > [class*="col-"] {
display: flex;
flex-direction: column;
text-align: center;
padding: 0 20px;
}
/* Desktop spacing - equal distribution */
@media (min-width: 992px) {
.footer-main .row {
justify-content: space-evenly;
gap: 30px;
}
.footer-main .row > [class*="col-"] {
flex: 1;
max-width: none;
text-align: left;
}
/* Center the middle column but keep text left-aligned */
.footer-main .row > [class*="col-"]:nth-child(2) {
text-align: left;
align-items: center;
}
/* Equal height columns */
.footer-main .row > [class*="col-"] {
min-height: 300px;
}
/* Ensure even spacing */
.footer-main .row > [class*="col-"]:first-child {
padding-left: 0;
}
.footer-main .row > [class*="col-"]:last-child {
padding-right: 0;
}
}
/* Footer Brand Section */
.footer-brand {
margin-bottom: 0;
}
.footer-logo {
width: 160px;
height: 160px;
margin-bottom: 20px;
filter: brightness(1.1) drop-shadow(0 2px 10px rgba(164, 51, 43, 0.3));
}
.footer-title {
color: #ffffff;
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 15px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.footer-description {
color: #cccccc;
font-family: 'Montserrat', sans-serif;
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 0;
}
/* Footer Headings */
.footer-heading {
color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 25px;
text-transform: uppercase;
letter-spacing: 1px;
}
.footer-heading {
text-decoration: underline;
text-decoration-color: var(--accent);
text-underline-offset: 3px;
text-decoration-thickness: 3px;
}
/* Footer Links */
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 12px;
}
.footer-links a {
color: #cccccc;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
text-decoration: none;
font-size: 0.9rem;
transition: all 0.3s ease;
position: relative;
}
.footer-links a:hover {
color: var(--accent);
}
/* Contact Information */
.footer-contact {
margin-bottom: 35px;
}
.contact-item {
display: flex;
align-items: center;
margin-bottom: 15px;
color: #cccccc;
font-family: 'Montserrat', sans-serif;
font-size: 0.9rem;
}
.contact-item i {
color: var(--accent);
width: 20px;
margin-right: 15px;
font-size: 1rem;
}
.contact-item span {
transition: color 0.3s ease;
}
.contact-item:hover span {
color: #ffffff;
}
/* Social Media Section */
.footer-social {
margin-top: 30px;
}
.social-heading {
color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
font-weight: 600;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
}
.social-icons {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
color: #cccccc;
text-decoration: none;
font-size: 1.1rem;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.social-icon:hover {
background: linear-gradient(135deg, var(--accent), var(--accent-light));
color: #ffffff;
transform: translateY(-3px) scale(1.1);
box-shadow: 0 8px 25px rgba(164, 51, 43, 0.4);
border-color: var(--accent-light);
}
/* Bottom Footer */
.footer-bottom {
background: none;
padding: 25px 0;
margin-top: 0;
position: relative;
}
.footer-bottom > * {
position: relative;
z-index: 2;
}
.footer-bottom p {
color: #999999;
font-family: 'Montserrat', sans-serif;
font-size: 0.85rem;
margin: 0;
}
.footer-bottom-links {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.footer-bottom-links a {
color: #999999;
font-family: 'Montserrat', sans-serif;
font-size: 0.85rem;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-bottom-links a:hover {
color: var(--accent);
}
.footer-bottom-links .separator {
color: #666666;
font-size: 0.8rem;
}
/* Responsive Footer */
@media (max-width: 767.98px) {
.footer {
padding: 60px 0 0 0;
}
.footer-main {
text-align: center;
}
.social-icons {
justify-content: center;
}
.footer-bottom-links {
flex-direction: column;
gap: 10px;
}
.footer-bottom-links .separator {
display: none;
}
}
/* ===========================
ENHANCED TRAINING OPTIONS SECTION
=========================== */
/* Training Options Section */
.training-options-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #f1f3f4 100%);
padding: 2px 0 80px 0;
position: relative;
overflow: hidden;
}
.training-options-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 20%, rgba(164, 51, 43, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(164, 51, 43, 0.06) 0%, transparent 50%);
z-index: 1;
}
.training-options-section .container {
position: relative;
z-index: 2;
}
/* Black Swoosh at Bottom */
.training-options-section::after {
content: '';
position: absolute;
bottom: -80px;
right: -150px;
width: 400px;
height: 300px;
background: linear-gradient(225deg, rgba(0, 0, 0, 0.25) 0%, transparent 75%);
border-radius: 40% 60% 80% 30%;
transform: rotate(-35deg);
z-index: 0;
pointer-events: none;
}
/* Hero-Style Section Header */
.training-options-header {
text-align: center;
margin-bottom: 70px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.training-options-title {
font-family: 'Playfair Display', serif;
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700;
background: linear-gradient(135deg, var(--accent), var(--accent-light));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 25px;
text-shadow: 0 4px 20px rgba(164, 51, 43, 0.1);
letter-spacing: -1px;
line-height: 1.1;
}
.training-options-subtitle {
font-family: 'Montserrat', sans-serif;
font-size: clamp(1.1rem, 2.5vw, 1.3rem);
font-weight: 400;
color: var(--text-medium);
line-height: 1.6;
margin-bottom: 30px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.header-accent-line {
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--accent), var(--accent-light));
margin: 0 auto;
border-radius: 2px;
box-shadow: 0 2px 10px rgba(164, 51, 43, 0.3);
}
/* Training Cards Grid */
.training-cards-grid {
margin-top: 0;
}
/* Enhanced Training Cards */
.training-card {
background: linear-gradient(145deg, #ffffff, #fafafa);
border-radius: 20px;
overflow: hidden;
box-shadow:
0 10px 40px rgba(0, 0, 0, 0.1),
0 4px 20px rgba(0, 0, 0, 0.05),
0 2px 10px rgba(164, 51, 43, 0.08);
border: 2px solid rgba(164, 51, 43, 0.1);
position: relative;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* Training Card Header */
.training-card-header {
background: linear-gradient(135deg, var(--accent), var(--accent-light));
padding: 25px 30px;
position: relative;
overflow: hidden;
}
.training-card-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0.05) 50%,
rgba(255, 255, 255, 0.1) 100%);
pointer-events: none;
}
/* Consistent styling for all training card titles */
.training-card-header h3 {
font-family: 'Playfair Display', serif;
font-size: clamp(1.2rem, 2vw, 1.5rem) !important;
font-weight: 700;
color: #ffffff;
margin: 0;
text-align: center;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
letter-spacing: 0.5px;
text-transform: uppercase;
position: relative;
z-index: 2;
line-height: 1.2 !important;
white-space: normal !important;
}
/* Mobile-specific adjustments for all training card titles */
@media (max-width: 767.98px) {
.training-card-header h3 {
font-size: 1.1rem !important;
line-height: 1.1 !important;
letter-spacing: 0.3px !important;
}
/* Mobile description truncation and read more functionality */
.training-description {
position: relative;
margin-bottom: 10px !important;
}
.training-description-truncated {
display: inline !important;
}
.training-description-full {
display: none !important;
}
.training-description.expanded .training-description-full {
display: inline !important;
}
.training-description.expanded .training-description-truncated {
display: none !important;
}
.read-more-link {
color: #6c757d;
text-decoration: underline;
font-weight: 400;
font-size: 0.8rem;
cursor: pointer;
display: inline-block !important;
margin-bottom: 15px;
transition: color 0.3s ease;
opacity: 0.7;
font-style: italic;
}
.read-more-link:hover {
color: var(--accent);
text-decoration: none;
opacity: 1;
}
/* Hide expandable content on mobile by default */
.expandable-content {
display: none !important;
}
/* Show expandable content when 'show' class is added */
.expandable-content.show {
display: block !important;
}
.training-card-content {
padding: 20px !important;
}
/* Mobile Navigation Sections */
.mobile-nav-section {
margin: 15px 0;
}
.mobile-section-header {
color: rgba(164, 51, 43, 0.8) !important;
font-family: 'Playfair Display', serif;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
text-align: center;
padding: 0 12px;
}
.mobile-nav-section .mobile-nav-item {
font-size: 0.75rem !important;
padding: 5px 10px !important;
margin: 2px 0 !important;
}
}
/* Training Card Image */
.training-card-image {
position: relative;
width: 100%;
height: 250px;
overflow: hidden;
}
.card-image {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(1.05) contrast(1.02) saturate(1.1);
}
/* Training Card Content */
.training-card-content {
padding: 30px;
position: relative;
z-index: 2;
}
/* Hide read more links on desktop */
.read-more-link {
display: none;
}
/* Hide full text by default on desktop */
.training-description-truncated {
display: none;
}
.training-summary {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
color: var(--accent);
font-size: 1.05rem;
margin-bottom: 15px;
line-height: 1.4;
}
.training-description {
font-family: 'Montserrat', sans-serif;
color: var(--text-medium);
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 25px;
}
/* Training Card Buttons */
.training-card-buttons {
display: flex;
flex-direction: column;
gap: 12px;
}
.training-btn-primary {
background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
-webkit-background-clip: padding-box !important;
background-clip: padding-box !important;
color: white !important;
font-weight: 600;
font-size: 0.9rem;
padding: 12px 24px;
border: 2px solid transparent;
border-radius: 10px;
text-decoration: none;
transition: all 0.3s ease;
text-align: center;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 4px 15px rgba(164, 51, 43, 0.3);
}
.training-btn-primary:hover {
background: linear-gradient(135deg, var(--accent-light), var(--accent)) !important;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(164, 51, 43, 0.4);
color: white !important;
}
.training-btn-secondary {
background: linear-gradient(135deg, #ffffff, #f8f8f8) !important;
color: var(--accent) !important;
font-weight: 600;
font-size: 0.9rem;
padding: 12px 24px;
border: 2px solid var(--accent);
border-radius: 10px;
text-decoration: none;
transition: all 0.3s ease;
text-align: center;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.training-btn-secondary:hover {
background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
color: white !important;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(164, 51, 43, 0.4);
}
.training-btn-black {
background: linear-gradient(135deg, #1a1a1a, #2d2d2d) !important;
-webkit-background-clip: padding-box !important;
background-clip: padding-box !important;
color: white !important;
font-weight: 600;
font-size: 1rem;
padding: 12px 20px;
border: 2px solid transparent;
border-radius: 15px;
text-decoration: none;
transition: all 0.3s ease;
text-align: center;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
letter-spacing: 0.5px;
display: inline-block;
margin-bottom: 20px;
line-height: 1.3;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
.training-btn-black:hover {
background: linear-gradient(135deg, #2d2d2d, #404040) !important;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
color: white !important;
}
/* Hero Registration Button Specific Styling - ENHANCED */
.hero-registration-btn {
margin-top: 15px;
margin-bottom: 0;
position: relative;
overflow: hidden;
animation: subtle-pulse 3s ease-in-out infinite;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(164, 51, 43, 0.3);
border: 3px solid var(--accent);
font-size: 0.9rem !important;
font-weight: 700 !important;
padding: 8px 14px !important;
color: white !important;
letter-spacing: 1px !important;
}
/* Subtle pulsing animation */
@keyframes subtle-pulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(164, 51, 43, 0.3);
}
50% {
transform: scale(1.03);
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.6), 0 0 20px rgba(164, 51, 43, 0.5);
}
}
/* Constant Shimmer Effect */
.hero-registration-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(164, 51, 43, 0.3), transparent);
animation: constant-shimmer 2.5s ease-in-out infinite;
}
/* Constant shimmer animation */
@keyframes constant-shimmer {
0% {
left: -100%;
}
50% {
left: 100%;
}
100% {
left: -100%;
}
}
/* Enhanced hover effect */
.hero-registration-btn:hover {
animation: none;
transform: scale(1.05) !important;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7), 0 0 25px rgba(164, 51, 43, 0.6) !important;
border-color: var(--accent-light);
color: white !important;
}
/* Shimmer continues on hover - no change needed */
/* Responsive Training Options */
@media (max-width: 767.98px) {
.training-options-section {
padding: 30px 0 60px 0;
}
/* Adjust swoosh for mobile */
.training-options-section::after {
bottom: -50px;
right: -100px;
width: 300px;
height: 200px;
transform: rotate(-25deg);
}
.training-card-content {
padding: 25px;
}
.training-card-buttons {
gap: 10px;
}
.training-btn-primary,
.training-btn-secondary {
padding: 10px 20px;
font-size: 0.85rem;
}
.training-btn-black {
padding: 10px 16px;
font-size: 0.9rem;
margin-bottom: 15px;
border-radius: 12px;
}
.hero-registration-btn {
margin-top: 12px;
/* Keep enhanced effects on mobile */
animation: subtle-pulse 3s ease-in-out infinite;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(164, 51, 43, 0.3);
border: 3px solid var(--accent);
color: white !important;
font-size: 1.2rem !important; /* Bigger on mobile but proportional */
letter-spacing: 1.5px !important; /* Slightly less spacing on mobile */
padding: 12px 24px !important; /* Bigger padding for mobile */
}
}
/* Responsive Design */
@media (max-width: 767.98px) {
.hero-content h1 {
font-size: 2.5rem; /* Smaller font size for mobile */
}
.hero-content .lead {
font-size: 1.2rem; /* Smaller font size for mobile */
}
.panel-text {
padding: 10px; /* Less padding for mobile */
}
.feature-overlay h2 {
font-size: 2rem; /* Smaller font size for mobile */
}
.feature-overlay p {
font-size: 1.2rem; /* Smaller font size for mobile */
}
}
.gallery-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.gallery-container img {
width: 150px;
height: 100px;
object-fit: cover;
cursor: pointer;
transition: transform 0.2s ease-in-out;
}
.gallery-container img:hover {
transform: scale(1.1);
}
#pagination {
display: flex;
justify-content: center;
gap: 10px; /* Space between buttons */
margin-top: 20px;
}
#pagination button {
background-color: var(--button-color); /* Use your custom button color */
color: #ffffff; /* White text */
border: none;
font-size: 1rem;
font-weight: 600;
padding: 10px 20px;
border-radius: 25px; /* Rounded corners */
transition: background-color 0.3s ease, transform 0.2s ease;
}
#pagination button:hover {
background-color: #756b6b; /* Slightly darker on hover */
transform: scale(1.05); /* Slight pop effect */
}
#pagination button:disabled {
background-color: #ccc; /* Disabled button color */
cursor: not-allowed;
transform: none;
}
input.is-invalid {
border-color: red;
}
#unitThankYou {
background-color: var(--base-color);
padding: 40px 20px;
margin-top: 20px;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
color: var(--text-color);
font-size: 1.1rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
#unitThankYou h4 {
font-size: 1.5rem;
font-weight: bold;
color: var(--button-color);
margin-bottom: 10px;
text-align: center;
}
#unitThankYou p {
margin: 0;
color: var(--text-color);
}
/* ================================
SUMMER CAMP VIDEO THUMBNAIL & LIGHTBOX
================================ */
/* Video Thumbnail Container - Enhanced */
.summer-camp-video-container {
position: relative;
border-radius: 20px;
overflow: hidden;
cursor: pointer;
box-shadow:
0 25px 80px rgba(0, 0, 0, 0.1),
0 0 0 3px rgba(0, 0, 0, 0.05),
0 0 0 6px rgba(255, 255, 255, 0.05);
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
background: #f0f0f0;
height: 100%;
min-height: 400px;
display: flex;
align-items: center;
}
/* DISABLED FOR PERFORMANCE: Summer camp video hover animation */
/*
.summer-camp-video-container:hover {
transform: translateY(-12px) scale(1.03);
box-shadow:
0 40px 120px rgba(0, 0, 0, 0.15),
0 0 0 5px rgba(0, 0, 0, 0.08),
0 0 0 8px rgba(255, 255, 255, 0.1),
0 0 80px rgba(0, 0, 0, 0.1);
}
*/
/* Video Thumbnail - Sharp Image */
.summer-camp-video-thumbnail {
width: 100%;
height: 100%;
min-height: 400px;
object-fit: cover;
object-position: center;
transition: all 0.3s ease;
cursor: pointer;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
-ms-interpolation-mode: bicubic;
}
/* DISABLED FOR PERFORMANCE: Video thumbnail scale animation */
/*
.summer-camp-video-container:hover .summer-camp-video-thumbnail {
transform: scale(1.02);
}
*/
/* Video Play Overlay - Clear Sharp Style */
.video-play-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.05);
color: white;
transition: all 0.4s ease;
}
/* DISABLED FOR PERFORMANCE: Video overlay background animation */
/*
.summer-camp-video-container:hover .video-play-overlay {
background: rgba(0, 0, 0, 0.15);
}
*/
/* Play Button - Sharp Clear Style */
.play-button {
width: 70px;
height: 70px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
border: 2px solid rgba(255, 255, 255, 1);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.play-button::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.05) 100%);
border-radius: 50%;
}
.play-button i {
margin-left: 3px; /* Adjust play icon position */
color: var(--accent);
text-shadow: none;
z-index: 2;
position: relative;
}
/* RE-ENABLED: Lightweight play button animation */
.summer-camp-video-container:hover .play-button {
transform: translate(-50%, -50%) scale(1.15);
background: rgba(255, 255, 255, 1);
border-color: var(--accent);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
/* Video Overlay Text - Minimalist Style */
.video-overlay-text {
position: absolute;
bottom: 20px;
left: 20px;
max-width: 60%;
text-align: left;
}
.video-overlay-text h4 {
font-family: 'Playfair Display', serif;
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 8px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
letter-spacing: 0.5px;
line-height: 1.2;
}
.video-overlay-text p {
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
font-weight: 400;
opacity: 0.9;
margin: 0;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
letter-spacing: 0.3px;
}
/* Video Overlay Logo */
.video-overlay-logo {
position: absolute;
bottom: 20px;
right: 20px;
z-index: 10;
}
.overlay-logo {
width: 80px;
height: auto;
opacity: 0.9;
filter: brightness(1.2) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
transition: all 0.3s ease;
}
/* DISABLED FOR PERFORMANCE: Overlay logo scale animation */
/*
.summer-camp-video-container:hover .overlay-logo {
opacity: 1;
transform: scale(1.05);
}
*/
/* Lightbox Styles */
.summer-camp-lightbox {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.95);
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 0;
transition: opacity 0.3s ease;
backdrop-filter: blur(10px);
}
.summer-camp-lightbox.active {
opacity: 1;
}
/* Lightbox Content */
.summer-camp-lightbox-content {
position: relative;
width: 90%;
max-width: 1200px;
max-height: 90vh;
background: rgba(20, 20, 20, 0.9);
border-radius: 20px;
padding: 20px;
box-shadow: 0 20px 80px rgba(0, 0, 0, 0.8);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Video Wrapper */
.summer-camp-video-wrapper {
position: relative;
width: 100%;
border-radius: 15px;
overflow: hidden;
background: #000;
}
/* Lightbox Video */
.summer-camp-lightbox-video {
width: 100%;
height: auto;
max-height: 80vh;
border-radius: 15px;
outline: none;
}
/* Close Button */
.summer-camp-close-btn {
position: absolute;
top: -15px;
right: -15px;
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-light));
border: none;
color: white;
font-size: 1.5rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 4px 20px rgba(164, 51, 43, 0.4);
z-index: 10001;
}
.summer-camp-close-btn:hover {
transform: scale(1.1) rotate(90deg);
background: linear-gradient(135deg, var(--accent-light), var(--accent));
box-shadow: 0 8px 30px rgba(164, 51, 43, 0.6);
}
.summer-camp-close-btn:active {
transform: scale(0.95) rotate(90deg);
}
/* ================================
SUMMER CAMP ACCORDION STYLING - REDESIGNED
================================ */
#summer-camp .master-instructor-accordion {
background: transparent;
border: none;
}
#summer-camp .master-instructor-header {
background: transparent;
border: none;
padding: 0 0 1.5rem 0;
transition: all 0.3s ease;
cursor: pointer;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 15px;
width: 100%;
}
#summer-camp .master-instructor-header:hover {
transform: translateY(-2px);
}
#summer-camp .master-instructor-header h2 {
color: var(--accent);
margin: 0;
font-family: 'Playfair Display', serif;
font-size: 2.2rem;
font-weight: 700;
text-align: left;
}
#summer-camp .master-accordion-icon {
color: var(--accent);
font-size: 1.5rem;
font-weight: bold;
transition: all 0.3s ease;
}
#summer-camp .master-instructor-header:hover .master-accordion-icon {
color: var(--accent-light);
}
#summer-camp .master-instructor-content {
background: transparent;
border: none;
margin-top: 0;
}
#summer-camp .instructors-accordion {
width: 100%;
margin: 0;
padding: 0;
}
#summer-camp .instructor-item {
border: 1px solid rgba(164, 51, 43, 0.3);
border-radius: 8px;
margin-bottom: 15px;
background: rgba(255, 255, 255, 0.02);
transition: all 0.3s ease;
}
#summer-camp .instructor-item:hover {
border-color: var(--accent);
}
#summer-camp .instructor-header {
width: 100%;
background: none;
border: none;
padding: 20px 25px;
text-align: left;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
}
#summer-camp .instructor-header:hover {
background: rgba(164, 51, 43, 0.1);
}
#summer-camp .instructor-header h3 {
color: var(--accent);
font-family: 'Playfair Display', serif;
font-weight: 600;
font-size: 1.3rem;
margin: 0;
flex-grow: 1;
}
#summer-camp .accordion-icon {
color: var(--accent);
font-size: 1.5rem;
font-weight: bold;
transition: transform 0.3s ease;
margin-left: 15px;
}
#summer-camp .instructor-item.active .accordion-icon {
transform: rotate(45deg);
}
#summer-camp .instructor-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease, padding 0.4s ease;
background: rgba(164, 51, 43, 0.02);
}
#summer-camp .instructor-item.active .instructor-content {
max-height: 15000px;
padding: 0 25px 25px 25px;
}
#summer-camp .instructor-content .about-text {
color: var(--text-dark);
line-height: 1.6;
margin-bottom: 15px;
padding-top: 0;
}
#summer-camp .instructor-content .about-text:first-child {
padding-top: 15px;
}
#summer-camp .instructor-content .about-text:last-child {
margin-bottom: 0;
}
#summer-camp .instructor-content strong {
color: var(--accent);
font-weight: 600;
}
/* Responsive Summer Camp Accordion */
@media (max-width: 767.98px) {
#summer-camp .master-instructor-header h2 {
font-size: 1.8rem;
}
#summer-camp .instructor-header {
padding: 15px 20px;
}
#summer-camp .instructor-header h3 {
font-size: 1.1rem;
}
#summer-camp .instructor-item.active .instructor-content {
padding: 0 20px 20px 20px;
}
}
/* Responsive Design - Minimalist Video */
@media (max-width: 767.98px) {
.summer-camp-video-thumbnail {
height: 100%;
min-height: 280px;
}
.play-button {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.video-overlay-text {
bottom: 15px;
left: 15px;
max-width: 65%;
}
.video-overlay-text h4 {
font-size: 1.3rem;
margin-bottom: 6px;
}
.video-overlay-text p {
font-size: 0.9rem;
}
.overlay-logo {
width: 60px;
}
.video-overlay-logo {
bottom: 15px;
right: 15px;
}
.summer-camp-lightbox-content {
width: 95%;
padding: 15px;
border-radius: 15px;
}
.summer-camp-close-btn {
width: 40px;
height: 40px;
font-size: 1.2rem;
top: -10px;
right: -10px;
}
.summer-camp-lightbox-video {
max-height: 70vh;
}
}
@media (max-width: 575.98px) {
.summer-camp-video-thumbnail {
height: 100%;
min-height: 250px;
}
.camp-features-standalone {
min-height: auto;
height: auto;
}
.summer-camp-video-container {
min-height: 250px;
height: auto;
}
.play-button {
width: 50px;
height: 50px;
font-size: 1.3rem;
}
.video-overlay-text {
bottom: 12px;
left: 12px;
max-width: 70%;
}
.video-overlay-text h4 {
font-size: 1.1rem;
margin-bottom: 4px;
}
.video-overlay-text p {
font-size: 0.8rem;
}
.overlay-logo {
width: 50px;
}
.video-overlay-logo {
bottom: 12px;
right: 12px;
}
.summer-camp-lightbox-content {
padding: 10px;
border-radius: 12px;
}
.summer-camp-lightbox-video {
max-height: 60vh;
border-radius: 12px;
}
}
/* Fixed Sidebar Widget Styles */
.fixed-sidebar-widget {
position: fixed;
left: 20px;
top: 42%;
transform: translateY(-50%);
z-index: 999;
display: flex;
flex-direction: column;
gap: 2px;
pointer-events: auto;
padding: 8px;
background: rgba(0, 0, 0, 0.8);
border-radius: 30px;
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.sidebar-button {
width: 44px;
height: 44px;
border-radius: 50%;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
background: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.sidebar-button:hover {
transform: scale(1.2);
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 20px rgba(255, 255, 255, 0.3);
}
.sidebar-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-decoration: none;
font-weight: 700;
transition: all 0.3s ease;
font-size: 1.2rem;
}
/* Alternating Red/White Pattern */
/* 1st button (Facebook) - Red, becomes white on hover with red background */
.sidebar-button:nth-child(1) .sidebar-btn {
color: var(--accent);
}
.sidebar-button:nth-child(1):hover {
background: var(--accent) !important;
}
.sidebar-button:nth-child(1):hover .sidebar-btn {
color: #ffffff;
}
/* 2nd button (Twitter/X) - White, becomes red on hover */
.sidebar-button:nth-child(2) .sidebar-btn {
color: #ffffff;
}
.sidebar-button:nth-child(2):hover .sidebar-btn {
color: var(--accent);
}
/* 3rd button (Instagram) - Red, becomes white on hover with red background */
.sidebar-button:nth-child(3) .sidebar-btn {
color: var(--accent);
}
.sidebar-button:nth-child(3):hover {
background: var(--accent) !important;
}
.sidebar-button:nth-child(3):hover .sidebar-btn {
color: #ffffff;
}
/* 4th button (Podcast) - White, becomes red on hover */
.sidebar-button:nth-child(4) .sidebar-btn {
color: #ffffff;
}
.sidebar-button:nth-child(4):hover .sidebar-btn {
color: var(--accent);
}
.sidebar-btn:hover {
text-decoration: none;
}
/* Mobile Responsive */
@media (max-width: 1199.98px) {
.fixed-sidebar-widget {
left: 15px;
padding: 6px;
border-radius: 26px;
}
.sidebar-button {
width: 40px;
height: 40px;
}
.sidebar-btn {
font-size: 1.1rem;
}
}
@media (max-width: 767.98px) {
/* Tablet responsive registration info styling */
.clean-deadline-notice,
.clean-special-offer {
padding: 18px;
gap: 14px;
}
.clean-deadline-notice i,
.clean-special-offer i {
font-size: 1.3rem;
padding: 9px;
}
.clean-deadline-text,
.clean-offer-main {
font-size: 1.05rem;
}
.clean-deadline-text strong,
.clean-offer-main strong {
font-size: 1.12rem;
}
.clean-offer-savings {
font-size: 0.95rem;
}
.clean-detail-item {
padding: 11px 14px;
font-size: 0.98rem;
}
.fixed-sidebar-widget {
left: 10px;
padding: 5px;
border-radius: 22px;
}
.sidebar-button {
width: 36px;
height: 36px;
}
.sidebar-btn {
font-size: 1rem;
}
.sidebar-button:hover {
transform: scale(1.15);
}
}
@media (max-width: 575.98px) {
.fixed-sidebar-widget {
left: 5px;
padding: 4px;
border-radius: 18px;
}
.sidebar-button {
width: 32px;
height: 32px;
}
.sidebar-btn {
font-size: 0.9rem;
}
.sidebar-button:hover {
transform: scale(1.1);
}
}
/* Desktop - Single line titles */
@media (min-width: 768px) {
.amenity-content h3 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
/* Dynamic Title Sizing - Now handled by clamp() function above */
/* These media queries are now primarily for fine-tuning edge cases */
@media (max-width: 575.98px) {
.amenity-content h3 {
font-size: clamp(0.5rem, 1.5vw, 0.9rem);
padding-left: 24px;
padding-right: 24px;
white-space: normal;
line-height: 1.2;
padding-top: clamp(20px, 4vw, 32px);
padding-bottom: 20px;
}
}
/* Inverse Primary Button - White background with red text, inverts on hover */
.btn-inverse-primary {
background-color: #ffffff !important;
background: #ffffff !important;
color: var(--accent);
border: 2px solid var(--accent);
border-radius: 8px;
padding: 12px 24px;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.5px;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.1);
position: relative;
overflow: hidden;
text-decoration: none;
display: inline-block;
}
.btn-inverse-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s ease;
}
.btn-inverse-primary:hover {
background: rgba(220, 38, 38, 0.1) !important;
color: var(--accent);
transform: translateY(-2px) scale(1.05);
box-shadow: 0 8px 20px rgba(220, 38, 38, 0.3);
border-color: var(--accent);
text-decoration: none;
}
.btn-inverse-primary:hover::before {
left: 100%;
}
/* Medium Tablet & Large Desktop Camp Location Spacing - 2x2 Layout */
@media (min-width: 768px) and (max-width: 1199.98px) {
/* Add vertical spacing between rows in 2x2 layout */
.camp-info-highlight .row > [class*="col-"] {
margin-bottom: 50px !important;
}
/* Ensure cards have proper spacing */
.camp-info-highlight .campsite-card {
margin-bottom: 30px !important;
}
/* Additional specificity for 2x2 layout spacing */
#summer-camp .camp-info-highlight .row > [class*="col-"] {
margin-bottom: 50px !important;
}
}
/* Additional Mobile Responsive Fixes for Camp Locations */
@media (max-width: 767.98px) {
/* Improve spacing for campsite cards container */
.camp-info-highlight .row {
margin-left: -15px;
margin-right: -15px;
}
.camp-info-highlight .row > [class*="col-"] {
padding-left: 15px;
padding-right: 15px;
margin-bottom: 40px;
}
/* Maximize container width usage at tablet breakpoint */
.camp-info-highlight .col-lg-10.col-xl-9 {
max-width: 100%;
flex: 0 0 100%;
}
/* Increase card container width for better utilization */
#summer-camp .row .col-lg-10 {
max-width: 100%;
flex: 0 0 100%;
}
/* Force spacing between campsite cards */
.camp-info-highlight .campsite-card {
margin-bottom: 40px !important;
}
/* Mobile campsite card styling */
.campsite-header {
padding: 20px 25px;
}
.campsite-content {
padding: 25px 20px;
}
.campsite-duration {
font-size: 1.05rem;
}
.campsite-weeks {
font-size: 1.25rem;
}
.campsite-btn {
font-size: 0.8rem;
padding: 9px 14px;
}
}
@media (max-width: 575.98px) {
/* Even more spacing on very small screens */
.camp-info-highlight .campsite-card {
margin-bottom: 40px !important;
}
.camp-info-highlight .row > [class*="col-"] {
margin-bottom: 40px;
}
/* Mobile responsive registration info styling */
.clean-deadline-notice,
.clean-special-offer {
padding: 15px;
gap: 12px;
}
.clean-deadline-notice i,
.clean-special-offer i {
font-size: 1.2rem;
padding: 8px;
}
.clean-deadline-text,
.clean-offer-main {
font-size: 1rem;
}
.clean-deadline-text strong,
.clean-offer-main strong {
font-size: 1.1rem;
}
.clean-offer-savings {
font-size: 0.9rem;
}
.clean-detail-item {
padding: 10px 12px;
font-size: 0.95rem;
}
/* Very small screen campsite card styling */
.campsite-header {
padding: 18px 20px;
}
.campsite-content {
padding: 22px 18px;
}
.campsite-title {
font-size: 1.2rem;
}
.campsite-venue {
font-size: 1rem;
}
.campsite-duration {
font-size: 1rem;
}
.campsite-weeks {
font-size: 1.2rem;
}
.campsite-btn {
font-size: 0.75rem;
padding: 8px 12px;
}
/* Optimize icon size for very small screens while keeping them prominent */
.camp-features-standalone .feature-icon-circle {
width: 140px;
height: 140px;
}
.camp-features-standalone .feature-item i {
font-size: 3.2rem;
}
.camp-features-standalone .feature-text {
font-size: 1.1rem;
}
}
/* ========================================
CAMPSITE CARDS - OPTIMIZED FOR 1200-1300px DISPLAYS
======================================== */
/* Optimize spacing for large desktop displays to fit all 4 cards */
@media (min-width: 1200px) {
/* Maximize outer container width */
#summer-camp .row .col-lg-10 {
max-width: 95%;
flex: 0 0 95%;
}
/* Maximize inner container width */
.camp-info-highlight .col-lg-10.col-xl-9 {
max-width: 100%;
flex: 0 0 100%;
}
/* Optimize container padding for maximum space usage */
.camp-info-highlight {
padding: 30px 15px;
}
/* Standard column spacing */
.camp-info-highlight .row > [class*="col-"] {
padding-left: 10px;
padding-right: 10px;
}
/* Standard card content padding */
.camp-info-highlight .campsite-content {
padding: 25px;
}
/* Standard button sizing */
.camp-info-highlight .campsite-btn {
padding: 9px 14px;
font-size: 0.82rem;
}
}
/* Responsive adjustments for hero overlay */
@media (max-width: 1199.98px) {
.hero-overlay-section {
padding-top: 130px !important;
}
.hero-content {
padding: 35px 20px; /* Maintain logo alignment */
}
}
@media (max-width: 991.98px) {
.hero-overlay-section {
padding-top: 120px !important;
}
.hero-content {
padding: 30px 20px; /* Maintain logo alignment */
}
}
@media (max-width: 767.98px) {
.hero-overlay-section {
padding-top: 110px !important;
}
.hero-content {
padding: 25px 20px; /* Maintain logo alignment */
}
}
@media (max-width: 575.98px) {
.hero-overlay-section {
padding-top: 100px !important;
}
.hero-content {
padding: 20px 20px; /* Maintain logo alignment */
}
}
@media (min-width: 1200px) {
.hero-content {
padding: 50px 20px; /* Maintain logo alignment even on large screens */
}
.hero-title {
font-size: 3.2rem; /* Larger title for full-width overlay */
letter-spacing: 3px;
}
.hero-description {
font-size: 1.1rem; /* Slightly larger description */
}
}
@media (max-width: 1199.98px) {
.hero-content {
margin-left: 20px;
padding: 35px 20px 35px 0;
}
}
@media (max-width: 991.98px) {
.hero-content {
margin-left: 20px;
padding: 30px 20px 30px 0;
}
}
@media (max-width: 767.98px) {
.hero-content {
margin-left: 20px;
padding: 25px 20px 25px 0;
}
}
@media (max-width: 575.98px) {
.hero-content {
margin-left: 12px;
padding: 20px 10px 20px 0;
}
}
@media (min-width: 1200px) {
.hero-content {
margin-left: 20px;
padding: 50px 20px 50px 0;
}
}
/* Hero Overlay Two-Column Layout */
.hero-row {
display: flex;
gap: 16px;
align-items: center;
margin-top: 2px !important;
}
.hero-col-left {
flex: 1 1 0;
min-width: 0;
}
.hero-col-right {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: flex-end;
}
@media (max-width: 767.98px) {
.hero-row {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.hero-col-right {
justify-content: flex-start;
}
}
/* Hero Title and Quote Two-Column Layout */
.hero-title-row {
display: flex;
align-items: flex-start;
gap: 8px !important;
margin-bottom: 0 !important;
padding-top: 6px; /* Add space above the row to lower the quote */
}
.hero-title-col {
flex: 0 0 auto;
}
.hero-quote-col {
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
}
.hero-quote {
margin-top: 0 !important; /* Remove margin-top so only the row's padding applies */
}
@media (max-width: 767.98px) {
.hero-title-row {
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
.hero-quote-col {
align-items: flex-start;
}
}
/* ULTRA FRESH START - Beautiful slide-down to match mega menu */
#heroRegisterPanel.hero-register-panel {
overflow: hidden !important;
max-height: 0 !important;
transition: max-height 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
background: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: blur(20px) !important;
border: 2px solid rgba(164, 51, 43, 0.3) !important;
border-radius: 15px !important;
box-shadow: 0 15px 40px rgba(164, 51, 43, 0.2), 0 5px 15px rgba(0, 0, 0, 0.1) !important;
margin-top: 12px !important;
padding: 0 !important;
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
visibility: hidden !important;
display: flex !important;
flex-direction: row !important;
gap: 0 !important;
justify-content: space-between !important;
align-items: flex-start !important;
/* DISABLE ALL GRID PROPERTIES */
grid-template-columns: none !important;
grid-template-rows: none !important;
grid-auto-columns: auto !important;
grid-auto-rows: auto !important;
}
#heroRegisterPanel.hero-register-panel.open {
visibility: visible !important;
max-height: 200px !important;
padding: 20px !important;
}
/* ULTRA FRESH START - Simple 4 columns with max specificity */
#heroRegisterPanel .hero-slide-col {
flex: 1 !important;
text-align: center !important;
padding: 0 8px !important;
margin: 0 !important;
width: auto !important;
max-width: none !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
}
#heroRegisterPanel .hero-slide-header {
color: #a4332b !important;
font-family: 'Barlow', sans-serif !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
margin-bottom: 10px !important;
padding-bottom: 0 !important;
border-bottom: none !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
line-height: 1.2 !important;
width: 100% !important;
text-align: center !important;
}
#heroRegisterPanel .hero-slide-btn {
background: linear-gradient(135deg, #a4332b, #c54033) !important;
color: white !important;
font-weight: 700 !important;
text-align: center !important;
border-radius: 8px !important;
padding: 8px 16px !important;
margin: 5px auto 0 !important;
border: 2px solid rgba(255, 255, 255, 0.3) !important;
box-shadow: 0 4px 12px rgba(164, 51, 43, 0.4) !important;
transition: all 0.3s ease !important;
display: block !important;
width: 80% !important;
max-width: 120px !important;
font-size: 0.75rem !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
text-decoration: none !important;
}
#heroRegisterPanel .hero-slide-btn:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(164, 51, 43, 0.6) !important;
text-decoration: none !important;
color: white !important;
}
#heroRegisterPanel .hero-slide-text {
font-size: 0.8rem !important;
font-style: italic !important;
color: #333 !important;
line-height: 1.4 !important;
text-align: center !important;
margin-top: 5px !important;
}
/* Black cloud backgrounds for Kaizen Dojo and Belt Exams (same as mega menu) */
#heroRegisterPanel .hero-slide-col:nth-child(3),
#heroRegisterPanel .hero-slide-col:nth-child(7) {
background: linear-gradient(135deg,
rgba(0, 0, 0, 0.05) 0%,
rgba(0, 0, 0, 0.08) 30%,
rgba(0, 0, 0, 0.06) 60%,
rgba(0, 0, 0, 0.04) 100%) !important;
border-radius: 25px 25px 25px 5px !important;
position: relative !important;
overflow: hidden !important;
padding: 15px 8px !important;
}
/* Streaky overlay effect */
#heroRegisterPanel .hero-slide-col:nth-child(3)::before,
#heroRegisterPanel .hero-slide-col:nth-child(7)::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: linear-gradient(45deg,
transparent 0%,
rgba(0, 0, 0, 0.02) 20%,
transparent 25%,
rgba(0, 0, 0, 0.03) 45%,
transparent 50%,
rgba(0, 0, 0, 0.02) 70%,
transparent 75%,
rgba(0, 0, 0, 0.01) 95%,
transparent 100%) !important;
pointer-events: none !important;
z-index: 1 !important;
}
/* Ensure content appears above the overlay */
#heroRegisterPanel .hero-slide-col:nth-child(3) > *,
#heroRegisterPanel .hero-slide-col:nth-child(7) > * {
position: relative !important;
z-index: 2 !important;
}
/* Hover effect - lighten on hover */
#heroRegisterPanel .hero-slide-col:nth-child(3):hover,
#heroRegisterPanel .hero-slide-col:nth-child(7):hover {
background: rgba(0, 0, 0, 0.02) !important;
}
/* Vertical dividers between sections (same as mega menu) */
#heroRegisterPanel .hero-slide-vertical-divider {
width: 1px !important;
background: linear-gradient(180deg,
transparent 0%,
rgba(164, 51, 43, 0.2) 20%,
rgba(164, 51, 43, 0.4) 50%,
rgba(164, 51, 43, 0.2) 80%,
transparent 100%
) !important;
margin: 0 10px !important;
opacity: 0.6 !important;
flex-shrink: 0 !important;
align-self: stretch !important;
}
/* Mobile vertical stack for 480px and below */
@media (max-width: 480px) {
.mobile-register-stack {
display: flex !important;
flex-direction: column !important;
gap: 15px !important;
padding: 20px !important;
background: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: blur(20px) !important;
border: 2px solid rgba(164, 51, 43, 0.3) !important;
border-radius: 15px !important;
box-shadow: 0 15px 40px rgba(164, 51, 43, 0.2), 0 5px 15px rgba(0, 0, 0, 0.1) !important;
margin: 20px auto !important;
max-width: 90% !important;
}
.mobile-register-section {
text-align: center !important;
padding: 15px !important;
border-radius: 12px !important;
background: rgba(255, 255, 255, 0.5) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
}
.mobile-register-section.register-section-with-stripes {
background: linear-gradient(135deg,
rgba(0, 0, 0, 0.05) 0%,
rgba(0, 0, 0, 0.08) 30%,
rgba(0, 0, 0, 0.06) 60%,
rgba(0, 0, 0, 0.04) 100%) !important;
border-radius: 25px 25px 25px 5px !important;
position: relative !important;
overflow: hidden !important;
}
.mobile-register-header {
color: #a4332b !important;
font-family: 'Barlow', sans-serif !important;
font-size: 0.9rem !important;
font-weight: 600 !important;
margin-bottom: 0 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
line-height: 1.2 !important;
width: 100% !important;
text-align: center !important;
}
.mobile-register-btn {
background: linear-gradient(135deg, #a4332b, #c54033) !important;
color: white !important;
font-weight: 700 !important;
text-align: center !important;
border-radius: 8px !important;
padding: 8px 16px !important;
border: 2px solid rgba(255, 255, 255, 0.3) !important;
box-shadow: 0 4px 12px rgba(164, 51, 43, 0.4) !important;
transition: all 0.3s ease !important;
display: inline-block !important;
width: auto !important;
max-width: 140px !important;
font-size: 0.75rem !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
text-decoration: none !important;
margin-top: 8px !important;
}
.mobile-register-text {
font-size: 0.8rem !important;
font-style: italic !important;
color: #333 !important;
line-height: 1.4 !important;
}
}
/* Extra small mobile - 360px and below */
@media (max-width: 360px) {
.mobile-register-stack {
gap: 12px !important;
padding: 15px !important;
max-width: 95% !important;
}
.mobile-register-section {
padding: 12px !important;
}
.mobile-register-header {
font-size: 0.85rem !important;
margin-bottom: 10px !important;
}
.mobile-register-btn {
padding: 6px 12px !important;
font-size: 0.7rem !important;
max-width: 120px !important;
}
.mobile-register-text {
font-size: 0.75rem !important;
}
}
/* Mobile Bootstrap Cards - Enhanced Styling */
@media (max-width: 480px) {
/* Style the mobile card titles to match mega menu */
.container-fluid .card .card-title {
color: #a4332b !important;
font-family: 'Barlow', sans-serif !important;
font-weight: 600 !important;
letter-spacing: 0.5px !important;
line-height: 1.2 !important;
margin-bottom: 1rem !important;
font-size: 0.9rem !important;
}
/* Multi-line header with subtle line between */
.mobile-header-line-1,
.mobile-header-line-2 {
display: block !important;
line-height: 1.2 !important;
}
.mobile-header-line-1::after {
content: '' !important;
display: block !important;
width: 50% !important;
height: 1px !important;
background: rgba(164, 51, 43, 0.3) !important;
opacity: 0.7 !important;
margin: 3px auto 3px auto !important;
}
/* Style Register Now buttons to match mega menu */
.container-fluid .card .btn-danger {
background: linear-gradient(135deg, #a4332b, #c54033) !important;
border: 2px solid rgba(255, 255, 255, 0.3) !important;
box-shadow: 0 4px 12px rgba(164, 51, 43, 0.4) !important;
transition: all 0.3s ease !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
border-radius: 8px !important;
padding: 8px 16px !important;
font-size: 0.75rem !important;
}
.container-fluid .card .btn-danger:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(164, 51, 43, 0.6) !important;
background: linear-gradient(135deg, #c54033, #a4332b) !important;
}
/* Black cloud backgrounds for After School, Kaizen Dojo and Belt Exams (same as mega menu) */
.container-fluid .row .col-12:nth-child(1) .card,
.container-fluid .row .col-12:nth-child(2) .card,
.container-fluid .row .col-12:nth-child(4) .card {
background: linear-gradient(135deg,
rgba(0, 0, 0, 0.05) 0%,
rgba(0, 0, 0, 0.08) 30%,
rgba(0, 0, 0, 0.06) 60%,
rgba(0, 0, 0, 0.04) 100%) !important;
border-radius: 25px 25px 25px 5px !important;
position: relative !important;
overflow: hidden !important;
border: none !important;
}
/* Streaky overlay effect */
.container-fluid .row .col-12:nth-child(2) .card::before,
.container-fluid .row .col-12:nth-child(4) .card::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: linear-gradient(45deg,
transparent 0%,
rgba(0, 0, 0, 0.02) 20%,
transparent 25%,
rgba(0, 0, 0, 0.03) 45%,
transparent 50%,
rgba(0, 0, 0, 0.02) 70%,
transparent 75%,
rgba(0, 0, 0, 0.01) 95%,
transparent 100%) !important;
pointer-events: none !important;
z-index: 1 !important;
border-radius: 25px 25px 25px 5px !important;
}
/* Ensure content appears above the overlay */
.container-fluid .row .col-12:nth-child(2) .card .card-body,
.container-fluid .row .col-12:nth-child(4) .card .card-body {
position: relative !important;
z-index: 2 !important;
}
/* Hover effect - lighten on hover */
.container-fluid .row .col-12:nth-child(1) .card:hover,
.container-fluid .row .col-12:nth-child(2) .card:hover,
.container-fluid .row .col-12:nth-child(4) .card:hover {
background: rgba(0, 0, 0, 0.02) !important;
}
/* Registration Center Title */
.registration-center-title {
font-family: 'Barlow', sans-serif !important;
font-size: 1.4rem !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
text-align: center !important;
color: #a4332b !important;
text-transform: uppercase !important;
margin: 30px 0 10px 0 !important;
position: relative !important;
}
.registration-center-title::after {
content: '' !important;
display: block !important;
width: 80px !important;
height: 3px !important;
background: linear-gradient(90deg,
transparent 0%,
rgba(164, 51, 43, 0.4) 20%,
rgba(164, 51, 43, 1) 50%,
rgba(164, 51, 43, 0.4) 80%,
transparent 100%) !important;
margin: 8px auto 0 auto !important;
border-radius: 2px !important;
}
/* Force tighter spacing between panels */
.container-fluid {
margin-top: 10px !important;
padding: 0 15px !important;
}
.container-fluid .row {
gap: 8px !important;
margin: 0 !important;
}
.container-fluid .row .col-12 {
padding: 0 !important;
margin-bottom: 8px !important;
}
.container-fluid .card {
margin-bottom: 0 !important;
border: none !important;
}
/* Custom decorative dividers under specific panels */
.container-fluid .row .col-12:nth-child(1) .card::after, /* After School */
.container-fluid .row .col-12:nth-child(3) .card::after { /* Summer Camp */
content: '' !important;
display: block !important;
width: 60% !important;
height: 2px !important;
background: linear-gradient(90deg,
transparent 0%,
rgba(164, 51, 43, 0.3) 20%,
rgba(164, 51, 43, 0.8) 50%,
rgba(164, 51, 43, 0.3) 80%,
transparent 100%) !important;
margin: 15px auto 0 auto !important;
border-radius: 2px !important;
position: relative !important;
box-shadow: 0 0 8px rgba(164, 51, 43, 0.3) !important;
}
/* Extra spacing for Kaizen Dojo divider - separate from card */
.container-fluid .row .col-12:nth-child(2)::after { /* Kaizen Dojo column */
content: '' !important;
display: block !important;
width: 60% !important;
height: 2px !important;
background: linear-gradient(90deg,
transparent 0%,
rgba(164, 51, 43, 0.3) 20%,
rgba(164, 51, 43, 0.8) 50%,
rgba(164, 51, 43, 0.3) 80%,
transparent 100%) !important;
margin: 20px auto 0 auto !important;
border-radius: 2px !important;
position: relative !important;
box-shadow: 0 0 8px rgba(164, 51, 43, 0.3) !important;
}
/* Remove Kaizen Dojo from card-based dividers */
.container-fluid .row .col-12:nth-child(1) .card::after, /* After School */
.container-fluid .row .col-12:nth-child(3) .card::after { /* Summer Camp only */
content: '' !important;
display: block !important;
width: 60% !important;
height: 2px !important;
background: linear-gradient(90deg,
transparent 0%,
rgba(164, 51, 43, 0.3) 20%,
rgba(164, 51, 43, 0.8) 50%,
rgba(164, 51, 43, 0.3) 80%,
transparent 100%) !important;
margin: 15px auto 0 auto !important;
border-radius: 2px !important;
position: relative !important;
box-shadow: 0 0 8px rgba(164, 51, 43, 0.3) !important;
}
}
@media (max-width: 360px) {
/* Smaller font for extra small screens */
.container-fluid .card .card-title {
font-size: 0.85rem !important;
margin-bottom: 0.8rem !important;
}
/* Smaller buttons for extra small screens */
.container-fluid .card .btn-danger {
padding: 6px 12px !important;
font-size: 0.7rem !important;
}
}
/* Responsive scaling for hero register panel buttons */
@media (max-width: 991.98px) {
.hero-register-panel .btn {
padding: 7px 14px !important;
font-size: 0.75rem !important;
width: 50% !important;
min-width: 90px !important;
}
}
@media (max-width: 767.98px) {
.hero-register-panel {
width: 100%;
max-width: none;
margin-left: 0;
}
.hero-register-panel .btn {
padding: 6px 12px !important;
font-size: 0.7rem !important;
width: 45% !important;
min-width: 80px !important;
}
}
@media (max-width: 575.98px) {
.hero-register-panel .btn {
padding: 5px 10px !important;
font-size: 0.65rem !important;
width: 40% !important;
min-width: 70px !important;
letter-spacing: 0.3px !important;
}
}
/* Hero slide-down uses mega menu header styling */
.hero-register-panel .mega-menu-header {
color: var(--accent);
font-family: 'Barlow', sans-serif;
font-size: 0.9rem; /* Slightly smaller for slide-down */
font-weight: 600;
margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 2px solid rgba(164, 51, 43, 0.2);
text-transform: uppercase;
letter-spacing: 0.5px;
width: 100%;
text-align: center;
}
/* Multi-line header support for slide-down After School */
.hero-register-panel .mega-menu-header .header-line-1,
.hero-register-panel .mega-menu-header .header-line-2 {
display: block;
line-height: 1.1;
white-space: normal;
}
.hero-register-panel .mega-menu-header .header-line-2 {
margin-top: 1px;
}
/* Hero slide-down uses mega menu button styling */
.hero-register-panel .mega-register-btn {
background: linear-gradient(135deg, var(--accent), var(--accent-light));
color: white;
font-weight: 700;
text-align: center;
border-radius: 8px;
padding: 6px 12px; /* Smaller padding for slide-down */
margin: 4px auto;
border: 2px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 12px rgba(164, 51, 43, 0.4);
transition: all 0.3s ease;
display: block;
width: 80%; /* Smaller width for slide-down */
max-width: 140px;
font-size: 0.7rem; /* Smaller font for slide-down */
letter-spacing: 0.5px;
text-transform: uppercase;
text-decoration: none;
}
.hero-register-panel .mega-register-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(164, 51, 43, 0.6);
text-decoration: none;
color: white;
}
.register-panel-text {
font-size: 0.9rem;
font-style: italic;
color: #333;
}
/* Register panel header tweaks (override) */
.hero-register-panel .register-panel-header {
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 1.2rem;
font-weight: 800;
padding-left: 0;
}
.hero-register-panel .register-panel-header::before {
content: none !important;
display: none !important;
}
/* Hide any leftover divider styling - not used in horizontal layout */
.hero-register-panel .register-panel-divider {
display: none !important;
}
/* Clean sections - no stripes */
.register-section-with-stripes {
background: none !important;
}
/* Clean hover - no stripes */
.register-section-with-stripes:hover {
background: none !important;
}
/* Summer Camp explore link styling */
.summer-camp-explore-link {
color: #a4332b !important;
text-decoration: underline;
font-weight: 600;
transition: all 0.3s ease;
position: relative;
}
.summer-camp-explore-link:hover {
color: #8b2922 !important;
text-decoration: none;
background: linear-gradient(
90deg,
rgba(164, 51, 43, 0.1) 0%,
rgba(164, 51, 43, 0.05) 100%
);
padding: 2px 4px;
border-radius: 3px;
transform: translateY(-1px);
}
/* Served States Section */
.served-states-section {
position: relative;
overflow: hidden;
padding: 26px 0;
background: #a4332b; /* solid red band */
}
/* subtle diagonal texture overlay */
.served-states-section::after {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(45deg,
rgba(255,255,255,0.06) 0 10px,
rgba(255,255,255,0.03) 10px 20px);
pointer-events: none;
mix-blend-mode: overlay;
}
.served-states-inner.served-states-row {
display: flex;
align-items: center;
gap: 22px;
}
.served-states-title {
margin: 0;
white-space: nowrap;
font-family: 'Playfair Display', serif;
font-size: clamp(1.25rem, 1.9vw, 1.9rem);
font-weight: 700;
letter-spacing: 0.4px;
color: #ffffff;
position: relative;
}
/* elegant underline */
.served-states-title::after {
content: '';
display: block;
width: 72px;
height: 3px;
border-radius: 3px;
background: rgba(255,255,255,0.95);
margin-top: 6px;
}
.served-states-grid.served-states-inline {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto auto;
gap: 20px 80px;
align-items: center;
justify-items: center;
max-width: 600px;
margin: 0 auto;
}
/* Icons row - each icon in its own grid cell */
.state-icons-row {
display: contents;
}
/* Labels row - each label in its own grid cell */
.state-labels-row {
display: contents;
}
.state-icons-row .state-icon-img {
grid-row: 1;
}
.state-labels-row .state-label {
grid-row: 2;
text-align: center;
width: 100%;
line-height: 1.3;
display: flex;
align-items: center;
justify-content: center;
min-height: 40px;
}
/* Old separator styling - no longer needed with two-row layout */
.served-state {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 0;
background: transparent;
border: none;
box-shadow: none;
transition: transform 0.2s ease, filter 0.2s ease;
}
/* circular white badge behind non-transparent PNGs */
.served-state .state-icon-img,
.state-icons-row .state-icon-img {
width: 56px;
height: 56px;
object-fit: contain;
background: #ffffff;
border-radius: 50%;
box-shadow: 0 4px 10px rgba(0,0,0,0.18);
border: 2px solid rgba(255,255,255,0.8);
}
/* label styling */
.served-state .state-label,
.state-labels-row .state-label {
color: #ffffff;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
font-size: 0.85rem;
}
/* hover lift for icons */
.state-icons-row .state-icon-img:hover {
transform: translateY(-3px);
filter: brightness(1.05);
transition: transform 0.2s ease, filter 0.2s ease;
}
/* legacy hover for old structure */
.served-state:hover {
transform: translateY(-3px);
filter: brightness(1.05);
}
/* responsive tweaks */
@media (max-width: 1199.98px) {
.served-state .state-icon-img { width: 52px; height: 52px; }
.served-states-grid.served-states-inline { gap: 22px; }
}
@media (max-width: 991.98px) {
.served-states-inner.served-states-row { flex-direction: column; align-items: flex-start; gap: 14px; }
.served-states-title::after { width: 60px; }
.served-states-grid.served-states-inline { flex-wrap: wrap; gap: 18px 22px; }
.served-states-grid.served-states-inline .served-state + .served-state { border-left: none; padding-left: 0; }
}
@media (max-width: 575.98px) {
.served-state .state-icon-img { width: 46px; height: 46px; }
.served-state .state-label { font-size: 0.8rem; letter-spacing: 0.5px; }
}
/* Centering overrides for Served States */
.served-states-inner.served-states-row { justify-content: center; }
.served-states-grid.served-states-inline { justify-content: center; }
.served-states-title { text-align: center; }
.served-states-title::after { margin-left: auto; margin-right: auto; }
@media (max-width: 991.98px) {
.served-states-inner.served-states-row { align-items: center; }
.served-states-grid.served-states-inline { justify-content: center; }
}
/* Hero Register Panel: two-column with media */
.hero-panel-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
align-items: start;
}
.hero-panel-media {
display: none;
}
.hero-panel-image {
width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
@media (min-width: 768px) {
.hero-panel-media { display: block; }
}
/* keep panel body as existing content */
.hero-panel-body { display: flex; flex-direction: column; }
/* Hero overlay row: no image, just panel */
.hero-overlay-row {
display: none;
gap: 0px; /* No gap needed without image */
align-items: flex-start;
margin-top: 12px;
justify-content: flex-end; /* Align content to the right side where Register button is */
}
/* Hide image completely on all breakpoints */
.hero-overlay-media { display: none !important; }
.hero-overlay-image { display: none !important; }
@media (min-width: 992px) {
.hero-overlay-row.open { display: flex; align-items: stretch; }
/* Image completely hidden on all breakpoints */
.hero-overlay-media { display: none !important; }
.hero-overlay-image { display: none !important; }
.hero-register-panel { flex: 1; max-width: 560px; width: 100%; margin-left: auto; } /* Right-align under Register button, take full width */
}
/* .hero-overlay-row .hero-register-panel { margin-top: 0 !important; } DISABLED */
.kaizen-dojo-section {
background: #fefbfb;
border-top: 1px solid rgba(0,0,0,0.05);
border-bottom: 1px solid rgba(0,0,0,0.05);
position: relative;
overflow: hidden;
}
/* Kaizen Dojo Section Background Watermark */
.kaizen-dojo-section::before {
content: '';
position: absolute;
top: 30%;
right: -200px;
transform: translateY(-50%) rotate(12deg);
width: 800px;
height: 800px;
background-image: url('../assets/images/logo.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.06;
z-index: 0;
pointer-events: none;
}
/* Responsive positioning for Kaizen Dojo logo watermark */
@media (max-width: 767.98px) {
.kaizen-dojo-section::before {
top: 35%;
left: 50%;
right: auto;
transform: translate(-50%, -50%) rotate(12deg);
width: 500px;
height: 500px;
opacity: 0.04;
}
}
@media (max-width: 575.98px) {
.kaizen-dojo-section::before {
top: 40%;
width: 400px;
height: 400px;
opacity: 0.03;
}
}
.kaizen-dojo-section .container {
position: relative;
z-index: 1;
}
.dojo-card {
background: #ffffff;
border-radius: 14px;
padding: 22px;
box-shadow: 0 8px 20px rgba(0,0,0,0.06);
border: 1px solid rgba(0,0,0,0.06);
text-align: center;
height: 285px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
/* Removed dojo-card hover animations */
.dojo-card-icon {
width: 60px;
height: 60px;
min-width: 60px;
min-height: 60px;
max-width: 60px;
max-height: 60px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
background: rgba(164, 51, 43, 0.08);
color: #a4332b;
font-size: 1.4rem;
border: 1px solid rgba(164, 51, 43, 0.15);
flex-shrink: 0;
aspect-ratio: 1 / 1;
}
.dojo-card-title {
font-family: 'Playfair Display', serif;
font-size: 1.25rem;
font-weight: 700;
margin: 8px 0 6px 0;
color: #333;
}
.dojo-card-text { color: #555; font-size: 1rem; }
/* Removed conflicting dojo-logo rule that was overriding our responsive sizing */
.dojo-intro { font-size: 1.05rem; color: #555; line-height: 1.7; margin: 0; }
.dojo-van {
width: 100%;
max-width: 900px;
height: auto;
display: block;
margin: 0 auto;
}
.dojo-van-wrap {
text-align: center;
margin: 0;
margin-top: -100px !important;
padding: 0;
position: relative;
z-index: 5;
}
/* Kaizen Dojo Register Button */
.dojo-register-button-container {
text-align: center;
margin-top: 30px;
margin-bottom: 40px;
}
.dojo-register-btn {
background: linear-gradient(135deg, var(--accent), var(--accent-light));
color: white !important;
font-family: 'Playfair Display', serif;
font-size: 1.3rem;
font-weight: 700;
letter-spacing: 1px;
padding: 18px 40px;
border: none;
border-radius: 12px;
text-decoration: none;
text-transform: uppercase;
box-shadow: 0 8px 25px rgba(220, 53, 69, 0.3);
transition: all 0.3s ease;
display: inline-block;
position: relative;
overflow: hidden;
}
.dojo-register-btn:hover {
background: linear-gradient(135deg, var(--accent-light), var(--accent));
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(220, 53, 69, 0.4);
color: white !important;
text-decoration: none;
}
.dojo-register-btn:before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.dojo-register-btn:hover:before {
left: 100%;
}
/* Responsive button sizing */
@media (max-width: 767.98px) {
.dojo-register-btn {
font-size: 1.1rem;
padding: 16px 32px;
letter-spacing: 0.8px;
}
}
@media (max-width: 575.98px) {
.dojo-register-btn {
font-size: 1rem;
padding: 14px 28px;
letter-spacing: 0.5px;
}
}
/* Removed dojo-van-decor weird background styling */
@media (max-width: 767.98px) { .dojo-intro { font-size: 1rem; } }
/* Kaizen Dojo: scoped rules to avoid bleed */
.kaizen-dojo-section { scroll-margin-top: 120px; }
/* Removed conflicting scoped dojo-logo rule that was overriding our responsive sizing */
.kaizen-dojo-section .dojo-intro { font-size: 1.05rem; color: #555; line-height: 1.7; margin: 0; }
.kaizen-dojo-section .dojo-van {
width: 100%;
max-width: 900px;
height: auto;
display: block;
margin: 0 auto;
}
.kaizen-dojo-section .dojo-van-wrap {
text-align: center;
margin: 0;
margin-top: -100px !important;
padding: 0;
position: relative;
z-index: 5;
}
/* Kaizen Dojo Register Button - Scoped */
.kaizen-dojo-section .dojo-register-button-container {
text-align: center;
margin-top: 30px;
margin-bottom: 40px;
}
.kaizen-dojo-section .dojo-register-btn {
background: linear-gradient(135deg, var(--accent), var(--accent-light));
color: white !important;
font-family: 'Playfair Display', serif;
font-size: 1.3rem;
font-weight: 700;
letter-spacing: 1px;
padding: 18px 40px;
border: none;
border-radius: 12px;
text-decoration: none;
text-transform: uppercase;
box-shadow: 0 8px 25px rgba(220, 53, 69, 0.3);
transition: all 0.3s ease;
display: inline-block;
position: relative;
overflow: hidden;
}
.kaizen-dojo-section .dojo-register-btn:hover {
background: linear-gradient(135deg, var(--accent-light), var(--accent));
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(220, 53, 69, 0.4);
color: white !important;
text-decoration: none;
}
/* Removed kaizen-dojo-section .dojo-van-decor weird background styling */
.kaizen-dojo-section .dojo-card {
background: #ffffff;
border-radius: 14px;
padding: 22px;
box-shadow: 0 8px 20px rgba(0,0,0,0.06);
border: 1px solid rgba(0,0,0,0.06);
text-align: center;
height: 285px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
/* Removed kaizen-dojo-section dojo-card hover animations */
.kaizen-dojo-section .dojo-card-icon {
width: 60px;
height: 60px;
min-width: 60px;
min-height: 60px;
max-width: 60px;
max-height: 60px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
background: rgba(164, 51, 43, 0.08);
color: #a4332b;
font-size: 1.4rem;
border: 1px solid rgba(164, 51, 43, 0.15);
flex-shrink: 0;
aspect-ratio: 1 / 1;
}
.kaizen-dojo-section .dojo-card-title { font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 700; margin: 8px 0 6px 0; color: #333; }
.kaizen-dojo-section .dojo-card-text { color: #555; font-size: 1rem; }
@media (max-width: 767.98px) {
.kaizen-dojo-section .dojo-intro { font-size: 1rem; }
.dojo-card, .kaizen-dojo-section .dojo-card { height: 255px; }
}
@media (max-width: 575.98px) {
.dojo-card, .kaizen-dojo-section .dojo-card { height: 225px; }
}
/* Van Service panel needs extra height for location cards */
.dojo-card:has(.row.g-3.mt-2) {
height: auto;
min-height: 450px;
padding-bottom: 30px;
}
@media (max-width: 767.98px) {
.dojo-card:has(.row.g-3.mt-2) {
min-height: 550px;
}
}
@media (max-width: 575.98px) {
.dojo-card:has(.row.g-3.mt-2) {
min-height: 650px;
}
}
.kaizen-dojo-section .dojo-accordion { margin: 0; }
.kaizen-dojo-section .dojo-accordion-item { background: #ffffff; border: 1px solid rgba(0,0,0,0.08); border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.kaizen-dojo-section .dojo-accordion-item > summary { cursor: pointer; list-style: none; padding: 14px 18px; font-weight: 700; color: #333; position: relative; }
.kaizen-dojo-section .dojo-accordion-item > summary::-webkit-details-marker { display: none; }
.kaizen-dojo-section .dojo-accordion-item > summary::after { content: '\25BC'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 0.85rem; color: #a4332b; transition: transform 0.2s ease; }
.kaizen-dojo-section .dojo-accordion-item[open] > summary::after { transform: translateY(-50%) rotate(180deg); }
.kaizen-dojo-section .dojo-accordion-content { padding: 0 18px 16px 18px; color: #555; }
.kaizen-dojo-section .dojo-accordion-content ul { margin: 0; padding-left: 1.1rem; }
/* Fine-tune hero quote size and position */
.hero-title-row { padding-top: 2px !important; }
.hero-quote { font-size: 0.95em !important; margin-top: -4px !important; line-height: 1.3 !important; }
/* Extra-tight spacing for hero title + quote */
.hero-title { margin-bottom: 0 !important; }
.hero-title-row { padding-top: 0 !important; margin-bottom: 0 !important; gap: 6px !important; }
.hero-quote { margin-top: -10px !important; }
@media (min-width: 992px) {
.hero-quote-col { flex: 1 1 65% !important; }
.hero-title-col { flex: 0 0 auto; }
}
/* Expand hero overlay horizontally and distribute space */
.hero-content { max-width: none !important; margin: 0 20px !important; }
.hero-title-row { justify-content: space-between; }
.hero-quote-col { flex: 1 1 70% !important; min-width: 0; }
.hero-quote { max-width: 100%; }
.hero-row { justify-content: space-between !important; align-items: flex-start; }
.hero-col-left { flex: 1 1 auto !important; min-width: 0; }
.hero-col-right { flex: 0 0 auto !important; }
.hero-description { max-width: 100% !important; }
/* Make hero overlay container full-width, not constrained by nav container */
.hero-overlay-section .nav-container { max-width: none !important; width: 100% !important; margin: 0 !important; padding-left: 20px; padding-right: 20px; }
/* Bootstrap 5 XL breakpoint (1200-1399.98px) - Better sized buttons with proper spacing */
@media (min-width: 1200px) and (max-width: 1399.98px) {
.nav-container {
padding: 0 15px 0 180px !important; /* Consistent spacing with other breakpoints */
}
.mega-nav-container {
max-width: 400px !important; /* Larger container */
margin-left: 20px !important;
}
.mega-navbar-nav {
gap: 4px !important; /* Better spacing between buttons */
}
.mega-nav-link {
font-size: 0.74rem !important; /* Larger, more readable */
padding: 7px 11px !important; /* Better padding */
letter-spacing: 0px !important;
font-weight: 600 !important; /* Ensure consistent weight */
}
/* Register button matches other buttons EXACTLY at XL breakpoint */
.mega-navbar-nav .mega-nav-item .mega-nav-link.register-nav-link {
font-size: 0.74rem !important; /* Exact match */
padding: 7px 11px !important; /* Exact match */
letter-spacing: 0px !important; /* Exact match */
font-weight: 600 !important; /* Exact match - critical for size */
}
.brand-logo-prominent {
height: 120px !important;
}
.floating-pills-nav.scrolled .brand-logo-prominent {
height: 70px !important;
}
}
/* Critical 992px breakpoint - Ensure navigation appears with proper sizing */
@media (min-width: 992px) and (max-width: 992px) {
.mega-nav-container {
max-width: 330px !important; /* Tight fit for exactly 992px */
margin-left: 8px !important;
}
.mega-navbar-nav {
gap: 1px !important; /* Minimal gap */
}
.mega-nav-link {
padding: 3px 5px !important; /* Very compact */
font-size: 0.55rem !important;
}
/* Make register button match regular buttons at exactly 992px */
.mega-navbar-nav .mega-nav-item .mega-nav-link.register-nav-link {
font-size: 0.55rem !important;
padding: 3px 5px !important;
}
}
/* Ensure mega navigation is properly displayed at desktop breakpoints */
@media (min-width: 992px) {
.nav-container .mega-nav-container {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
.nav-container .mega-nav-container .mega-navbar-nav {
display: flex !important;
}
.nav-container .mega-nav-container .mega-nav-item {
display: block !important;
}
.nav-container .mega-nav-container .mega-nav-link {
display: inline-block !important;
}
/* Hide mobile menu toggle at desktop breakpoints */
.mobile-menu-toggle {
display: none !important;
}
}
/* CRITICAL FIX: Force mega navigation visibility at 992px+ with maximum specificity */
@media screen and (min-width: 992px) {
/* Target with highest possible specificity using ID and class combinations */
nav#uniqueNavbar .nav-container .mega-nav-container,
nav.floating-pills-nav .nav-container .mega-nav-container,
.floating-pills-nav .nav-container .mega-nav-container,
#uniqueNavbar .mega-nav-container,
#megaNavContainer {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
transform: none !important;
clip: auto !important;
clip-path: none !important;
}
nav#uniqueNavbar .nav-container .mega-nav-container .mega-navbar-nav,
nav.floating-pills-nav .nav-container .mega-nav-container .mega-navbar-nav,
.floating-pills-nav .nav-container .mega-nav-container .mega-navbar-nav,
#uniqueNavbar .mega-nav-container .mega-navbar-nav,
#megaNavContainer .mega-navbar-nav {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
nav#uniqueNavbar .nav-container .mega-nav-container .mega-nav-item,
nav.floating-pills-nav .nav-container .mega-nav-container .mega-nav-item,
.floating-pills-nav .nav-container .mega-nav-container .mega-nav-item,
#uniqueNavbar .mega-nav-container .mega-nav-item,
#megaNavContainer .mega-nav-item {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Ensure mobile toggle is hidden with high specificity */
nav#uniqueNavbar .nav-container .mobile-menu-toggle,
nav.floating-pills-nav .nav-container .mobile-menu-toggle,
.floating-pills-nav .nav-container .mobile-menu-toggle,
.mobile-menu-toggle,
#mobileMenuToggle {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
}
/* ========================================
CLEAN NAVIGATION CSS - OVERRIDES ALL ABOVE
This completely replaces the messy navigation CSS above
======================================== */
/* 🧭 CLEAN FLOATING NAVIGATION */
.floating-pills-nav {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 1000 !important;
background: rgba(255, 255, 255, 0.9) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
padding: 38px 0 !important; /* Reduced by 2px */
transition: all 0.3s ease !important;
box-shadow: 0 2px 20px rgba(164, 51, 43, 0.08) !important;
}
.floating-pills-nav.scrolled {
background: rgba(255, 255, 255, 0.95) !important;
padding: 23px 0 !important; /* Reduced by 2px */
box-shadow: 0 2px 20px rgba(164, 51, 43, 0.12) !important;
}
/* 📐 CLEAN NAVIGATION CONTAINER */
.nav-container {
max-width: 1400px !important;
margin: 0 auto !important;
padding: 0 40px 0 180px !important; /* Consistent spacing */
display: flex !important;
justify-content: flex-start !important;
align-items: center !important;
position: relative !important;
}
/* Hide mobile brand text by default (desktop) */
.mobile-brand-text {
display: none !important;
}
/* 🎯 CLEAN MEGA NAVIGATION */
.mega-nav-container {
display: flex !important;
align-items: center !important;
margin-left: 20px !important;
margin-right: 30px !important;
flex-shrink: 1 !important;
}
.mega-navbar-nav {
display: flex !important;
gap: 6px !important;
flex-wrap: nowrap !important;
align-items: center !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* 🔗 CLEAN NAVIGATION LINKS */
.mega-nav-link {
display: block !important;
padding: 8px 16px !important;
background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
color: white !important;
text-decoration: none !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 600 !important;
font-size: 0.85rem !important;
text-transform: uppercase !important;
letter-spacing: 0.3px !important;
border-radius: 25px !important;
border: 2px solid rgba(255, 255, 255, 0.3) !important;
backdrop-filter: blur(15px) !important;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
position: relative !important;
white-space: nowrap !important;
z-index: 1 !important;
box-shadow: 0 4px 20px rgba(164, 51, 43, 0.3) !important;
/* Force alignment */
vertical-align: baseline !important;
line-height: normal !important;
margin: 0 !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
animation: none !important;
}
.mega-nav-link:hover {
background: linear-gradient(135deg, var(--accent-light), var(--accent)) !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 25px rgba(164, 51, 43, 0.4) !important;
}
/* 🎯 MEGA DROPDOWN STYLES */
.mega-dropdown {
position: relative !important;
}
.mega-dropdown-toggle {
position: relative !important;
}
.mega-dropdown-menu {
position: absolute !important;
top: 100% !important;
left: 50% !important;
transform: translateX(-50%) !important;
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(20px) !important;
border: 1px solid rgba(164, 51, 43, 0.2) !important;
border-radius: 15px !important;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
padding: 30px !important;
margin-top: 10px !important;
min-width: 500px !important;
z-index: 1000 !important;
opacity: 0 !important;
visibility: hidden !important;
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
.mega-dropdown:hover .mega-dropdown-menu {
opacity: 1 !important;
visibility: visible !important;
transform: translateX(-50%) translateY(5px) !important;
}
/* OLD MEGA MENU CSS REMOVED */
.register-button-container {
margin-top: 15px !important;
}
/* 🎨 CLEAN REGISTER BUTTON */
.register-nav-link {
background: linear-gradient(135deg, #1a1a1a, #2d2d2d) !important;
color: white !important;
border: 2px solid var(--accent) !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 10px rgba(164, 51, 43, 0.3) !important;
}
/* Disable any old pseudo-element animations */
.register-nav-link::before,
.register-nav-link::after {
display: none !important;
content: none !important;
animation: none !important;
}
.register-nav-link:hover {
background: linear-gradient(135deg, #2d2d2d, #404040) !important;
color: white !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(164, 51, 43, 0.5) !important;
border-color: var(--accent-light) !important;
transform: translateY(-2px) !important;
}
/* 📱 CLEAN MOBILE TOGGLE */
.mobile-menu-toggle {
display: none !important;
flex-direction: column !important;
background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
border: 2px solid rgba(255, 255, 255, 0.3) !important;
cursor: pointer !important;
padding: 12px !important;
gap: 4px !important;
border-radius: 12px !important;
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
box-shadow: 0 4px 15px rgba(164, 51, 43, 0.3) !important;
backdrop-filter: blur(15px) !important;
}
.toggle-line {
width: 25px !important;
height: 2px !important;
background: white !important;
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
border-radius: 2px !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}
.mobile-menu-toggle:hover {
background: linear-gradient(135deg, var(--accent-light), var(--accent)) !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(164, 51, 43, 0.4) !important;
}
/* 📱 MOBILE OVERLAY MENU - DISABLED MEGA-NAV VERSION - Restore original compact menu */
/*
.mobile-overlay-menu {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100vh !important;
background: rgba(0, 0, 0, 0.95) !important;
backdrop-filter: blur(20px) !important;
z-index: 9999 !important;
transform: translateX(-100%) !important;
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
*/
/*
.mobile-overlay-menu.active {
transform: translateX(0) !important;
}
.mobile-menu-content {
padding: 80px 40px 40px !important;
height: 100% !important;
overflow-y: auto !important;
}
.mobile-brand {
text-align: center !important;
margin-bottom: 40px !important;
}
.mobile-brand-logo {
max-width: 120px !important;
height: auto !important;
}
.mobile-nav-items {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
}
.mobile-nav-item {
display: block !important;
padding: 15px 20px !important;
background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
color: white !important;
text-decoration: none !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 600 !important;
font-size: 1.1rem !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
border-radius: 15px !important;
border: 2px solid rgba(255, 255, 255, 0.2) !important;
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
text-align: center !important;
box-shadow: 0 4px 15px rgba(164, 51, 43, 0.3) !important;
}
*/
/*
.mobile-nav-item:hover {
background: linear-gradient(135deg, var(--accent-light), var(--accent)) !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(164, 51, 43, 0.5) !important;
}
.register-mobile-nav {
background: linear-gradient(135deg, #1a1a1a, #2d2d2d) !important;
border: 2px solid var(--accent) !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 10px rgba(164, 51, 43, 0.3) !important;
}
.summer-camp-mobile-nav {
background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
}
*/
/* 📱 MOBILE DROPDOWN STYLES */
.mobile-dropdown {
position: relative !important;
margin: 0 !important; /* Force no margin */
padding: 0 !important; /* Force no padding */
margin-bottom: 0 !important; /* Explicitly no bottom margin */
margin-top: 0 !important; /* Explicitly no top margin */
height: auto !important; /* Only take height of button, not dropdown */
min-height: 0 !important; /* No minimum height */
}
/* Target ONLY the About button (first after dropdown) with light negative positioning */
.mobile-dropdown + .mobile-nav-item {
margin-top: -15px !important; /* Pull About button up lightly - was -20px */
transition: all 0.3s ease !important; /* Smooth transition when dropdown opens/closes */
}
/* Target Summer Camp button (second after dropdown) with minimal negative positioning */
.mobile-dropdown + .mobile-nav-item + .mobile-nav-item {
margin-top: -5px !important; /* Pull Summer Camp up minimally - was -8px */
transition: all 0.3s ease !important;
}
/* Target all other buttons after Summer Camp with very minimal negative positioning */
.mobile-dropdown + .mobile-nav-item + .mobile-nav-item ~ .mobile-nav-item {
margin-top: -1px !important; /* Pull remaining buttons up just slightly - was -2px */
transition: all 0.3s ease !important;
}
/* Override the animation system for About button when menu is active */
.mobile-overlay-menu.active .mobile-dropdown + .mobile-nav-item {
transform: translateY(-10px) !important; /* Even less aggressive - was -15px */
}
/* Override animation for Summer Camp button */
.mobile-overlay-menu.active .mobile-dropdown + .mobile-nav-item + .mobile-nav-item {
transform: translateY(-3px) !important; /* Even less aggressive - was -6px */
}
/* Override animation for remaining buttons */
.mobile-overlay-menu.active .mobile-dropdown + .mobile-nav-item + .mobile-nav-item ~ .mobile-nav-item {
transform: translateY(-1px) !important; /* Minimal transform - was -2px */
}
/* When dropdown is open, reset ALL buttons to normal spacing */
.mobile-dropdown.show ~ .mobile-nav-item {
margin-top: 2px !important; /* Normal spacing when dropdown is open */
transform: translateY(0) !important; /* Reset transform when dropdown is open */
}
/* Ensure the rule applies when menu is active too */
.mobile-overlay-menu.active .mobile-dropdown.show ~ .mobile-nav-item {
margin-top: 2px !important; /* Normal spacing when dropdown is open */
transform: translateY(0) !important; /* Reset transform when dropdown is open */
}
.mobile-dropdown-toggle {
position: relative !important;
}
/* Mobile overlay menu dropdown container - match desktop */
.mobile-overlay-menu .mobile-dropdown-menu {
position: static !important;
background: rgba(255, 255, 255, 0.98) !important; /* Match desktop - white background */
backdrop-filter: blur(20px) !important; /* Enhanced blur like desktop */
-webkit-backdrop-filter: blur(20px) !important; /* Safari support */
border: 2px solid rgba(164, 51, 43, 0.3) !important;
border-radius: 15px !important;
box-shadow: 0 15px 40px rgba(164, 51, 43, 0.2), 0 5px 15px rgba(0, 0, 0, 0.1) !important;
margin-top: 10px !important;
padding: 20px !important;
}
.mobile-dropdown-section {
margin-bottom: 20px !important;
text-align: center !important;
}
.mobile-dropdown-section:last-child {
margin-bottom: 0 !important;
}
/* Mobile overlay menu dropdown headers - match desktop */
.mobile-overlay-menu .mobile-dropdown-section h6 {
color: var(--accent) !important;
font-family: 'Barlow', sans-serif !important;
font-weight: 600 !important;
font-size: 1.0rem !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
margin-bottom: 8px !important;
padding-bottom: 8px !important;
border-bottom: 2px solid rgba(164, 51, 43, 0.2) !important;
text-decoration: none !important;
text-align: center !important;
width: 100% !important;
white-space: normal !important;
}
/* Multi-line header styling for mobile After School */
.mobile-overlay-menu .mobile-dropdown-section h6 .header-line-1,
.mobile-overlay-menu .mobile-dropdown-section h6 .header-line-2 {
display: block;
line-height: 1.2;
text-align: center;
width: 100%;
}
.mobile-overlay-menu .mobile-dropdown-section h6 .header-line-1 {
margin-bottom: 4px;
padding-bottom: 4px;
position: relative;
}
.mobile-overlay-menu .mobile-dropdown-section h6 .header-line-1::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 50%;
height: 1px;
background: rgba(164, 51, 43, 0.3);
opacity: 0.6;
}
/* Mobile overlay menu dropdown sections - add spacing between ALL sections */
.mobile-overlay-menu .mobile-dropdown-section {
margin-bottom: 30px !important;
padding-bottom: 10px !important;
}
/* Target each section individually to ensure spacing */
.mobile-overlay-menu .mobile-dropdown-section:nth-of-type(1) {
margin-bottom: 30px !important;
}
.mobile-overlay-menu .mobile-dropdown-section:nth-of-type(2) {
margin-bottom: 30px !important;
}
.mobile-overlay-menu .mobile-dropdown-section:nth-of-type(3) {
margin-bottom: 30px !important;
}
/* Last section doesn't need bottom margin */
.mobile-overlay-menu .mobile-dropdown-section:nth-of-type(4) {
margin-bottom: 0 !important;
}
/* Mobile overlay menu dropdown buttons - match desktop */
.mobile-overlay-menu .mobile-dropdown-item {
display: flex !important;
justify-content: center !important;
align-items: center !important;
padding: 8px 16px !important;
background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
color: white !important;
text-decoration: none !important;
font-weight: 700 !important;
font-size: 0.8rem !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
border-radius: 6px !important;
border: 2px solid rgba(255, 255, 255, 0.3) !important;
box-shadow: 0 4px 12px rgba(164, 51, 43, 0.3) !important;
transition: all 0.3s ease !important;
text-align: center !important;
margin: 4px auto !important;
width: 60% !important;
min-width: 100px !important;
}
.mobile-dropdown-item:hover {
background: linear-gradient(135deg, var(--accent-light), var(--accent)) !important;
color: white !important;
transform: translateY(-1px) scale(1.03) !important;
box-shadow: 0 6px 18px rgba(164, 51, 43, 0.5) !important;
border-color: rgba(255, 255, 255, 0.5) !important;
}
.mobile-dropdown-text {
color: #666 !important;
font-size: 0.85rem !important;
font-style: italic !important;
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
line-height: 1.4 !important;
width: 100% !important;
box-sizing: border-box !important;
display: block !important;
}
.mobile-dropdown-text a {
color: #a4332b !important;
text-decoration: underline !important;
font-weight: 600 !important;
transition: all 0.3s ease !important;
position: relative !important;
}
.mobile-dropdown-text a:hover {
color: #8b2922 !important;
text-decoration: none !important;
background: linear-gradient(
90deg,
rgba(164, 51, 43, 0.1) 0%,
rgba(164, 51, 43, 0.05) 100%
) !important;
padding: 2px 4px !important;
border-radius: 3px !important;
transform: translateY(-1px) !important;
}
/* Style dividers in mobile dropdown - black dividers - FORCE OVERRIDE */
body .mobile-overlay-menu .mobile-dropdown-menu .register-panel-divider {
display: block !important; /* Override the display: none rule */
border: 0 !important;
height: 1px !important;
background: linear-gradient(90deg,
transparent 0%,
rgba(0, 0, 0, 0.2) 20%,
rgba(0, 0, 0, 0.4) 50%,
rgba(0, 0, 0, 0.2) 80%,
transparent 100%
) !important;
margin: 16px 0 !important;
opacity: 0.8 !important;
}
/* Target each divider individually to force display */
body .mobile-overlay-menu .mobile-dropdown-menu hr:nth-of-type(1),
body .mobile-overlay-menu .mobile-dropdown-menu hr:nth-of-type(2),
body .mobile-overlay-menu .mobile-dropdown-menu hr:nth-of-type(3) {
display: block !important;
border: 0 !important;
height: 1px !important;
background: linear-gradient(90deg,
transparent 0%,
rgba(0, 0, 0, 0.2) 20%,
rgba(0, 0, 0, 0.4) 50%,
rgba(0, 0, 0, 0.2) 80%,
transparent 100%
) !important;
margin: 16px 0 !important;
opacity: 0.8 !important;
}
/* New mobile menu dividers with unique class - MAXIMUM SPECIFICITY */
body .mobile-overlay-menu .mobile-dropdown-menu .mobile-menu-divider,
.mobile-overlay-menu .mobile-dropdown-menu .mobile-menu-divider,
.mobile-dropdown-menu .mobile-menu-divider,
.mobile-menu-divider {
display: block !important;
border: 0 !important;
height: 3px !important;
background: red !important;
margin: 16px 0 !important;
margin-left: 20px !important;
margin-right: 20px !important;
opacity: 1 !important;
}
/* Clean mobile sections - no stripes */
.mobile-overlay-menu .mobile-dropdown-menu .register-section-with-stripes {
background: none !important;
}
.mobile-overlay-menu .mobile-dropdown-menu .register-section-with-stripes:hover {
background: none !important;
}
/* Style mobile dropdown text to match mega menu exactly */
.mobile-overlay-menu .mobile-dropdown-menu .mobile-dropdown-section .mobile-dropdown-text {
color: #666 !important;
font-size: 0.85rem !important;
font-style: italic !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
line-height: 1.4 !important;
width: 100% !important;
box-sizing: border-box !important;
display: block !important;
font-family: inherit !important;
}
/* After School section - clean background (no cloud) */
/* Kaizen Dojo section - target by h6 content */
.mobile-overlay-menu .mobile-dropdown-menu .mobile-dropdown-section:nth-of-type(2) {
background: linear-gradient(
135deg,
rgba(0, 0, 0, 0.06) 0%,
rgba(0, 0, 0, 0.12) 25%,
rgba(0, 0, 0, 0.08) 50%,
rgba(0, 0, 0, 0.15) 75%,
rgba(0, 0, 0, 0.07) 100%
) !important;
padding: 15px !important;
position: relative !important;
border-radius: 25px 25px 25px 5px !important;
}
/* Add streaky overlay to mobile Kaizen Dojo */
.mobile-overlay-menu .mobile-dropdown-menu .mobile-dropdown-section:nth-of-type(2)::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
45deg,
transparent 0%,
rgba(0, 0, 0, 0.06) 15%,
transparent 25%,
rgba(0, 0, 0, 0.08) 45%,
transparent 55%,
rgba(0, 0, 0, 0.05) 75%,
transparent 85%
);
border-radius: 25px 25px 25px 5px;
pointer-events: none;
z-index: 0;
}
/* Belt Exams section - same streaky cloud shape background (4th section type) */
.mobile-overlay-menu .mobile-dropdown-menu .mobile-dropdown-section:nth-of-type(4) {
background: linear-gradient(
135deg,
rgba(0, 0, 0, 0.06) 0%,
rgba(0, 0, 0, 0.12) 25%,
rgba(0, 0, 0, 0.08) 50%,
rgba(0, 0, 0, 0.15) 75%,
rgba(0, 0, 0, 0.07) 100%
) !important;
padding: 15px !important;
position: relative !important;
border-radius: 25px 25px 25px 5px !important;
}
/* Add streaky overlay to mobile Belt Exams */
.mobile-overlay-menu .mobile-dropdown-menu .mobile-dropdown-section:nth-of-type(4)::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
45deg,
transparent 0%,
rgba(0, 0, 0, 0.06) 15%,
transparent 25%,
rgba(0, 0, 0, 0.08) 45%,
transparent 55%,
rgba(0, 0, 0, 0.05) 75%,
transparent 85%
);
border-radius: 25px 25px 25px 5px;
pointer-events: none;
z-index: 0;
}
/* Removed Kaizen Dojo hover effects */
/* Override alignment for Summer Camp section specifically - target the section that contains Summer Camp */
.mobile-overlay-menu .mobile-dropdown-menu .mobile-dropdown-section:nth-of-type(3) {
text-align: center !important;
}
/* Style summer camp explore link in mobile dropdown */
.mobile-overlay-menu .mobile-dropdown-menu .summer-camp-explore-link {
color: #a4332b !important;
text-decoration: underline !important;
font-weight: 600 !important;
transition: all 0.3s ease !important;
position: relative !important;
}
.mobile-overlay-menu .mobile-dropdown-menu .summer-camp-explore-link:hover {
color: #8b2922 !important;
text-decoration: none !important;
background: linear-gradient(90deg, rgba(164, 51, 43, 0.1) 0%, rgba(164, 51, 43, 0.05) 100%) !important;
padding: 2px 4px !important;
border-radius: 3px !important;
transform: translateY(-1px) !important;
}
/* ========================================
CLEAN RESPONSIVE BREAKPOINTS
======================================== */
/* 📱 Mobile: Below 992px */
@media (max-width: 991.98px) {
.mega-nav-container {
display: none !important;
}
.mobile-menu-toggle {
display: flex !important;
}
.nav-container {
justify-content: space-between !important; /* Space between logo, text, and hamburger */
padding: 0 20px 0 120px !important;
}
/* Adjust navigation padding for mobile logo sizes */
.floating-pills-nav {
padding: 30px 0 !important; /* Mobile logo is smaller */
}
.floating-pills-nav.scrolled {
padding: 20px 0 !important;
}
/* Logo shrinks when mobile menu appears - but not for tablets */
.brand-logo-prominent {
height: 70px !important; /* Smaller logo for mobile menu */
}
.floating-pills-nav.scrolled .brand-logo-prominent {
height: 50px !important; /* Even smaller when scrolled */
}
}
/* 📱 Extra Small Mobile Override: Below 576px - Bigger elements */
@media (max-width: 575.98px) {
/* Mobile menu positioned on the right - inherits mobile layout from above */
.nav-container {
justify-content: space-between !important; /* Space between logo, text, and hamburger */
max-width: 95% !important; /* Widen nav container to spread hero text - COPY FROM 576-767px */
margin: 0 auto !important; /* Center it */
padding: 0 20px !important; /* COPY FROM 576-767px - consistent padding */
position: relative !important;
display: flex !important;
align-items: center !important;
}
/* Show navigation title in center - copy centering approach from 576-767px */
.mobile-brand-text {
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
position: absolute !important; /* Position absolutely for perfect centering */
left: 52% !important; /* Slightly right to balance logo space (was 50%) */
transform: translateX(-50%) !important; /* Perfect centering */
width: auto !important;
z-index: 10 !important;
pointer-events: none !important; /* Allow clicks to pass through */
}
/* Ensure hamburger menu stays on the right */
.mobile-menu-toggle {
margin-left: auto !important; /* Push to right */
z-index: 15 !important; /* Above the title */
}
/* Navigation title sizing for mobile - default medium size for mid-range mobile */
.mobile-brand-text .mobile-brand-name,
.nav-container .mobile-brand-text .mobile-brand-name,
.floating-pills-nav .nav-container .mobile-brand-text .mobile-brand-name,
span.mobile-brand-name {
font-family: 'Playfair Display', serif !important;
font-size: 1.8rem !important; /* Medium size for general mobile (768-991px range) */
font-weight: 700 !important;
letter-spacing: 2px !important;
text-align: center !important;
white-space: nowrap !important;
background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}
/* Even bigger logo for extra small mobile - overrides general mobile */
.brand-logo-prominent {
height: 85px !important; /* Even bigger (was 75px) */
}
.floating-pills-nav.scrolled .brand-logo-prominent {
height: 65px !important; /* Even bigger when scrolled (was 55px) */
}
/* Hide hero overlay title */
.hero-title {
display: none !important;
}
/* Ultra-specific selector to ensure hero title is hidden */
.hero-overlay-section .nav-container .hero-content .hero-title-row .hero-title-col .hero-title,
.hero-overlay-section .hero-title,
.hero-content .hero-title,
h1.hero-title {
display: none !important;
}
/* Add top margin to create distance from navigation */
.hero-section {
margin-top: -10px !important; /* Less aggressive - more gap for navigation clearance */
}
/* COPY EXACT WORKING 576-767PX HERO TEXT SPREADING */
.hero-content {
max-width: 100% !important;
}
.hero-title-row {
max-width: 100% !important;
}
.hero-quote-col {
max-width: 100% !important;
justify-content: center !important; /* Support centered quote */
text-align: center !important;
}
.hero-quote {
max-width: 95% !important;
text-align: center !important; /* Center the quote */
font-size: 1.0rem !important; /* Bigger and more prominent */
font-weight: 600 !important; /* Bolder */
margin: 0 auto 20px auto !important; /* Center + add bottom spacing */
line-height: 1.6 !important; /* Better readability */
}
.hero-row {
max-width: 100% !important;
display: flex !important;
flex-direction: row !important; /* Force horizontal layout */
justify-content: space-between !important; /* Description left, button right */
align-items: flex-start !important;
gap: 0 !important;
}
.hero-col-left {
max-width: 100% !important;
flex: 1 !important; /* Take available space */
}
.hero-description {
max-width: 95% !important;
}
/* Position Register button on the right */
.hero-col-right {
justify-content: flex-end !important; /* Force right alignment */
align-items: center !important;
flex: 0 0 auto !important; /* Don't grow, stay on right */
align-self: center !important;
margin-top: 10px !important;
padding-right: 10px !important;
}
/* Register button sizing for extra small mobile - multi-line with bigger font */
.hero-section .hero-registration-btn {
font-size: 1.0rem !important; /* Bigger font (was 0.85rem) */
padding: 12px 15px !important; /* More horizontal padding to prevent touching borders */
max-width: 130px !important; /* Slightly wider to give text breathing room */
min-width: 120px !important; /* Ensure consistent minimum width */
line-height: 1.2 !important; /* Tighter line spacing */
white-space: normal !important; /* Allow text wrapping */
text-align: center !important; /* Force center alignment */
display: flex !important; /* Use flex for better centering */
align-items: center !important; /* Center vertically */
justify-content: center !important; /* Center horizontally */
}
/* FULL VIEWPORT WIDTH SLIDE-DOWN for below 576px - Positioned below hero overlay */
.hero-overlay-row.open {
display: flex !important;
align-items: flex-start !important;
gap: 0 !important; /* No gap needed without image */
justify-content: center !important; /* Center for full width */
/* Position absolute relative to hero section, but span full viewport width */
position: absolute !important;
top: calc(100% + 4px) !important; /* Position with perfect spacing below hero overlay */
bottom: auto !important; /* Let top positioning handle vertical placement */
left: 50% !important; /* Center horizontally */
right: auto !important; /* Let left/transform handle horizontal positioning */
transform: translateX(-50%) !important; /* Center the full-width panel */
margin: 0 !important; /* No margins */
max-width: none !important; /* REMOVE all width constraints */
width: 100vw !important; /* Full viewport width */
z-index: 1050 !important; /* Above everything including nav */
/* Seamless extension of hero overlay background - EXACT MATCH */
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.6) 0%,
rgba(248, 248, 248, 0.5) 50%,
rgba(255, 255, 255, 0.6) 100%
) !important; /* Match hero overlay exactly */
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border-radius: 0 !important; /* No rounded corners for seamless extension */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important; /* Downward shadow */
padding: 10px !important; /* Much more compact padding for tiny screens */
}
/* Hide image completely on extra small mobile */
.hero-overlay-media {
display: none !important;
}
/* Remove grid override for below 576px */
/* Position sections in grid for below 576px with very tight spacing */
.register-panel-section:nth-child(1) {
grid-column: 1 !important; /* After School */
padding: 0 3px !important; /* Very tight spacing for tiny screens */
display: flex !important;
flex-direction: column !important;
align-items: center !important; /* Center all content */
justify-content: center !important;
text-align: center !important; /* Force center alignment */
}
.register-panel-section:nth-child(3) {
grid-column: 3 !important; /* Summer Camp */
padding: 0 3px !important; /* Very tight spacing for tiny screens */
display: flex !important;
flex-direction: column !important;
align-items: center !important; /* Center all content */
justify-content: center !important;
text-align: center !important; /* Force center alignment */
}
.register-panel-section:nth-child(5) {
grid-column: 5 !important; /* Belt Exams */
padding: 0 3px !important; /* Very tight spacing for tiny screens */
display: flex !important;
flex-direction: column !important;
align-items: center !important; /* Center all content */
justify-content: center !important;
text-align: center !important; /* Force center alignment */
}
/* Position dividers in grid as vertical lines for below 576px */
.register-panel-divider:nth-child(2) {
grid-column: 2 !important;
grid-row: 1 !important;
width: 1px !important;
height: 100% !important;
margin: 0 3px !important; /* Match reduced section padding */
background: linear-gradient(180deg,
rgba(164, 51, 43, 0.3) 0%,
rgba(164, 51, 43, 0.7) 50%,
rgba(164, 51, 43, 0.3) 100%) !important;
border: none !important;
align-self: stretch !important;
}
.register-panel-divider:nth-child(4) {
grid-column: 4 !important;
grid-row: 1 !important;
width: 1px !important;
height: 100% !important;
margin: 0 3px !important; /* Match reduced section padding */
background: linear-gradient(180deg,
rgba(164, 51, 43, 0.3) 0%,
rgba(164, 51, 43, 0.7) 50%,
rgba(164, 51, 43, 0.3) 100%) !important;
border: none !important;
align-self: stretch !important;
}
/* Adjust content sizing for extra small screens - MUCH SMALLER */
.register-panel-header {
font-size: 0.65rem !important; /* Much smaller headers for tiny screens */
padding: 0 3px !important; /* Very minimal padding */
text-align: center !important; /* Force center alignment */
align-self: center !important; /* Center in flex container */
}
.hero-register-panel .btn.training-btn-primary {
font-size: 0.7rem !important; /* Much bigger text for readability */
padding: 8px 12px !important; /* Bigger padding to fit text */
font-weight: 600 !important; /* Bolder weight */
margin: 6px auto !important; /* Better margins */
display: flex !important;
width: 45% !important; /* Wider to fit text */
min-width: 80px !important; /* Bigger minimum */
max-width: 110px !important; /* Bigger maximum */
justify-content: center !important;
align-items: center !important;
text-align: center !important;
min-height: 32px !important; /* Taller to fit text */
letter-spacing: 0px !important; /* Normal letter spacing */
}
.register-panel-text {
font-size: 0.6rem !important; /* Much smaller description text */
line-height: 1.2 !important; /* Tighter line height */
padding: 2px 3px !important; /* Very minimal padding */
margin: 2px 0 3px 0 !important; /* Very minimal margins */
word-wrap: break-word !important;
text-align: center !important; /* Force center alignment */
align-self: center !important; /* Center in flex container */
}
/* Grid-based register panel sections for below 576px - COMPACT layout */
.register-panel-section {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
margin-bottom: 0 !important;
min-height: 55px !important; /* Very compact height for tiny screens */
justify-content: center !important;
}
.register-panel-header {
font-size: 0.65rem !important; /* Much smaller headers for mobile */
text-align: center !important;
padding-left: 0 !important;
margin-bottom: 2px !important; /* Reduced margin */
align-self: center !important; /* Center in flex container */
}
.register-panel-text {
font-size: 0.6rem !important; /* Smaller text for mobile */
text-align: center !important;
line-height: 1.1 !important; /* Tighter line height */
align-self: center !important; /* Center in flex container */
}
.hero-register-panel .btn {
font-size: 0.85rem !important; /* Bigger button text to match mega menu style */
padding: 14px 24px !important; /* More substantial padding */
margin: 8px auto !important; /* Better margins */
display: flex !important;
width: 70% !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important; /* Center button text */
}
}
/* 📱 Extra Small Mobile: 480px and below - Properly sized navigation */
@media (max-width: 480px) {
/* Properly sized mobile navigation title */
body nav.floating-pills-nav .nav-container .mobile-brand-text .mobile-brand-name,
body .mobile-brand-text .mobile-brand-name,
body .nav-container .mobile-brand-text .mobile-brand-name,
body .floating-pills-nav .nav-container .mobile-brand-text .mobile-brand-name,
body span.mobile-brand-name {
font-size: 1.4rem !important; /* Even bigger and more prominent */
letter-spacing: 1.8px !important; /* Better spacing */
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important; /* Better shadow */
}
/* Properly sized logo */
body nav.floating-pills-nav img.brand-logo-prominent,
body .brand-logo-prominent,
body img.brand-logo-prominent {
height: 65px !important; /* MUCH bigger logo */
}
body nav.floating-pills-nav.scrolled img.brand-logo-prominent,
body .floating-pills-nav.scrolled .brand-logo-prominent {
height: 55px !important; /* MUCH bigger when scrolled */
}
/* Properly sized hamburger menu */
body nav.floating-pills-nav button.mobile-menu-toggle,
body .mobile-menu-toggle,
body button.mobile-menu-toggle {
padding: 12px !important; /* MUCH bigger padding for better touch */
gap: 4px !important; /* Better gap */
}
body nav.floating-pills-nav .toggle-line,
body .toggle-line,
body span.toggle-line {
width: 26px !important; /* MUCH bigger hamburger lines */
height: 3px !important; /* MUCH thicker lines */
}
/* Hero video positioning for ultra small screens */
body .video-container video {
top: 240px !important; /* Much lower to show more video above overlay */
height: calc(100% + 240px) !important;
object-position: center top !important;
}
/* Reduce hero overlay height to show more video */
body .hero-section {
height: 70vh !important; /* Reduced from 95vh */
min-height: 70vh !important;
}
/* Stack hero content vertically for better space usage */
body .hero-overlay-row {
flex-direction: column !important;
gap: 15px !important;
}
body .hero-col-left {
width: 100% !important;
text-align: center !important;
}
body .hero-col-right {
width: 100% !important;
display: flex !important;
justify-content: center !important;
}
/* Make Register button smaller and centered */
.hero-registration-btn {
padding: 12px 20px !important;
font-size: 0.9rem !important;
}
/* Horizontal scroll slide-down for better mobile UX */
.hero-register-panel {
display: flex !important;
overflow-x: auto !important;
overflow-y: visible !important;
gap: 15px !important;
padding: 15px !important;
scroll-snap-type: x mandatory !important;
}
.register-panel-section {
flex: 0 0 280px !important; /* Fixed width cards */
scroll-snap-align: start !important;
min-height: auto !important;
}
/* Remove decorative elements for cleaner look */
.register-panel-divider {
display: none !important;
}
.register-section-with-stripes {
background: rgba(255, 255, 255, 0.1) !important; /* Simplified background */
}
}
/* 📱 Ultra Small Mobile: 360px and below - Compact but functional navigation */
@media (max-width: 360px) {
/* Compact but readable mobile navigation title */
nav.floating-pills-nav .nav-container .mobile-brand-text .mobile-brand-name,
.mobile-brand-text .mobile-brand-name,
.nav-container .mobile-brand-text .mobile-brand-name,
.floating-pills-nav .nav-container .mobile-brand-text .mobile-brand-name,
span.mobile-brand-name {
font-size: 0.7rem !important; /* Bigger and more readable */
letter-spacing: 0.8px !important; /* Better spacing for readability */
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important; /* Better shadow */
}
/* Compact but visible logo */
nav.floating-pills-nav img.brand-logo-prominent,
.brand-logo-prominent,
img.brand-logo-prominent {
height: 50px !important; /* Bigger but compact logo */
}
nav.floating-pills-nav.scrolled img.brand-logo-prominent,
.floating-pills-nav.scrolled .brand-logo-prominent {
height: 40px !important; /* Bigger when scrolled */
}
/* Compact but functional hamburger menu */
nav.floating-pills-nav button.mobile-menu-toggle,
.mobile-menu-toggle,
button.mobile-menu-toggle {
padding: 7px !important; /* Better padding for touch */
gap: 2.5px !important; /* Better gap */
}
nav.floating-pills-nav .toggle-line,
.toggle-line,
span.toggle-line {
width: 20px !important; /* Bigger hamburger lines */
height: 1.8px !important; /* Thicker lines */
}
/* Hero optimizations for 360px screens */
body .video-container video {
top: 280px !important; /* Even lower for tiny screens */
height: calc(100% + 280px) !important;
object-position: center top !important;
}
body .hero-section {
height: 65vh !important; /* Even more compact */
min-height: 65vh !important;
}
/* Ultra compact text */
.hero-quote {
font-size: 1.1rem !important;
line-height: 1.3 !important;
margin-bottom: 10px !important;
}
/* Even more compact slide-down */
.register-panel-section {
flex: 0 0 250px !important; /* Smaller cards for tiny screens */
}
.hero-register-panel {
padding: 10px !important;
gap: 10px !important;
}
/* Smaller register buttons */
.register-panel-section .training-btn-primary {
padding: 8px 12px !important;
font-size: 0.8rem !important;
}
}
/* 📱 Tablet Override: 768-991px - Larger elements within same background */
@media (min-width: 768px) and (max-width: 991.98px) {
/* Override mobile sizing for tablet - same as desktop size */
.brand-logo-prominent {
height: 100px !important; /* Slightly smaller than desktop */
}
.floating-pills-nav.scrolled .brand-logo-prominent {
height: 60px !important; /* Slightly smaller when scrolled */
}
/* Reduce gap between navigation and hero by adjusting hero section */
.hero-section {
margin-top: -30px !important; /* More gap for navigation clearance - was -50px */
}
/* HIDE hero title at tablet range - title should be in navigation instead */
.hero-title {
display: none !important; /* Hide hero overlay title */
}
/* Ultra-specific selector to ensure hero title is hidden */
.hero-overlay-section .nav-container .hero-content .hero-title-row .hero-title-col .hero-title,
.hero-overlay-section .hero-title,
.hero-content .hero-title,
h1.hero-title {
display: none !important; /* Force hide hero overlay title */
}
/* SHOW mobile nav text on tablet - make it larger */
.mobile-brand-text {
display: flex !important; /* Show navigation title */
align-items: center !important;
flex: 1 !important;
justify-content: center !important;
margin: 0 20px !important;
}
/* Make navigation title LARGER for large tablet - ultra specific to override mobile rule */
.mobile-brand-text .mobile-brand-name,
.nav-container .mobile-brand-text .mobile-brand-name,
.floating-pills-nav .nav-container .mobile-brand-text .mobile-brand-name,
span.mobile-brand-name {
font-family: 'Playfair Display', serif !important;
font-size: 2.5rem !important; /* Large for bigger tablets (768-991px) */
font-weight: 700 !important;
letter-spacing: 3px !important;
text-align: center !important;
white-space: nowrap !important;
background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}
/* Ensure nav container supports proper centering */
.nav-container {
display: flex !important;
align-items: center !important;
justify-content: space-between !important; /* Logo left, hamburger right */
position: relative !important; /* For absolute positioning of title */
}
/* Mobile Brand Text - shows between logo and hamburger menu */
.mobile-brand-text {
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important; /* Ensure text alignment */
position: absolute !important; /* Position absolutely for perfect centering */
left: 50% !important;
transform: translateX(-50%) !important; /* Center perfectly */
width: auto !important;
z-index: 10 !important;
pointer-events: none !important; /* Allow clicks to pass through to elements below */
}
/* Ensure hamburger menu stays on the right */
.mobile-menu-toggle {
display: flex !important;
position: relative !important;
z-index: 15 !important; /* Above the title */
margin-left: auto !important; /* Push to right */
}
/* Hide hero overlay title text on mobile (since it's now in nav) */
.hero-title {
display: none !important;
}
/* Style the discipline quote to be prominent when title is in navigation */
.hero-quote {
text-align: center !important; /* Center the quote */
font-size: 1.05rem !important; /* Just slightly larger than default 1rem */
font-weight: 600 !important; /* Bolder than default 400 */
margin: 0 auto !important; /* Center the element */
max-width: 95% !important; /* Wider - spread across more of the screen */
line-height: 1.6 !important; /* Better readability */
}
/* Adjust the quote column to center properly */
.hero-quote-col {
justify-content: center !important;
text-align: center !important;
}
/* Target the nav-container to widen hero content */
.nav-container {
max-width: 95% !important; /* Widen the nav container that holds hero content */
margin: 0 auto !important; /* Center it */
padding: 0 20px !important; /* Add side padding for breathing room */
}
/* Widen specific hero elements based on HTML structure */
.hero-title-row {
max-width: 100% !important; /* Full width of container */
}
.hero-quote-col {
max-width: 100% !important; /* Let quote use full width */
}
.hero-row {
max-width: 100% !important; /* Full width for description row */
}
.hero-col-left {
max-width: 100% !important; /* Let description column use full width */
}
/* FULL VIEWPORT WIDTH SLIDE-DOWN for 576-767px - Positioned below hero overlay */
.hero-overlay-row.open {
display: flex !important;
align-items: flex-start !important;
gap: 0 !important; /* No gap needed without image */
justify-content: center !important; /* Center for full width */
/* Position absolute relative to hero section, but span full viewport width */
position: absolute !important;
top: calc(100% + 4px) !important; /* Position with perfect spacing below hero overlay */
bottom: auto !important; /* Let top positioning handle vertical placement */
left: 50% !important; /* Center horizontally */
right: auto !important; /* Let left/transform handle horizontal positioning */
transform: translateX(-50%) !important; /* Center the full-width panel */
margin: 0 !important; /* No margins */
max-width: none !important; /* REMOVE all width constraints */
width: 100vw !important; /* Full viewport width */
z-index: 1050 !important; /* Above everything including nav */
/* Seamless extension of hero overlay background - EXACT MATCH */
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.6) 0%,
rgba(248, 248, 248, 0.5) 50%,
rgba(255, 255, 255, 0.6) 100%
) !important; /* Match hero overlay exactly */
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border-radius: 0 !important; /* No rounded corners for seamless extension */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important; /* Downward shadow */
padding: 18px !important; /* Good padding for smaller tablet */
}
/* Hide image completely on mobile/tablet */
.hero-overlay-media {
display: none !important;
}
/* Grid override removed for 576-767px */
/* Position sections in grid for 576-767px with MUCH MORE compact spacing */
.register-panel-section:nth-child(1) {
grid-column: 1 !important; /* After School */
padding: 0 6px !important; /* Much more compact spacing */
}
.register-panel-section:nth-child(3) {
grid-column: 3 !important; /* Summer Camp */
padding: 0 6px !important; /* Much more compact spacing */
}
.register-panel-section:nth-child(5) {
grid-column: 5 !important; /* Belt Exams */
padding: 0 6px !important; /* Much more compact spacing */
}
/* Position dividers in grid as vertical lines for 576-767px */
.register-panel-divider:nth-child(2) {
grid-column: 2 !important;
grid-row: 1 !important;
width: 1px !important;
height: 100% !important;
margin: 0 6px !important; /* Match reduced section padding */
background: linear-gradient(180deg,
rgba(164, 51, 43, 0.3) 0%,
rgba(164, 51, 43, 0.7) 50%,
rgba(164, 51, 43, 0.3) 100%) !important;
border: none !important;
align-self: stretch !important;
}
.register-panel-divider:nth-child(4) {
grid-column: 4 !important;
grid-row: 1 !important;
width: 1px !important;
height: 100% !important;
margin: 0 6px !important; /* Match reduced section padding */
background: linear-gradient(180deg,
rgba(164, 51, 43, 0.3) 0%,
rgba(164, 51, 43, 0.7) 50%,
rgba(164, 51, 43, 0.3) 100%) !important;
border: none !important;
align-self: stretch !important;
}
/* Image styling not needed since image is hidden */
/* Optimize content sizing for mobile/tablet - MUCH SMALLER for 576-767px */
.register-panel-header {
font-size: 0.75rem !important; /* Much smaller headers for compact space */
margin-bottom: 3px !important; /* Reduced margin */
text-align: center !important; /* Center-align headers for compact look */
padding: 0 4px !important; /* Minimal padding */
}
.hero-register-panel .btn {
font-size: 0.8rem !important; /* Bigger button text to match mega menu style */
padding: 12px 20px !important; /* More substantial padding */
margin: 6px auto !important; /* Center with good spacing */
display: flex !important;
width: 70% !important;
justify-content: center !important;
align-items: center !important;
font-weight: 700 !important; /* Bolder button text */
}
.register-panel-text {
font-size: 0.65rem !important; /* Much smaller description text */
line-height: 1.2 !important; /* Tight line height */
text-align: center !important; /* Center-align description text for compact look */
padding: 2px 4px !important; /* Minimal padding */
margin: 2px 0 4px 0 !important; /* Minimal margins */
word-wrap: break-word !important; /* Ensure long words wrap properly */
}
.register-panel-divider {
margin: 8px 0 !important; /* Smaller divider margins */
width: 100% !important; /* Full width divider for horizontal sections */
}
/* Grid-based register panel sections for 576-767px - COMPACT layout */
.register-panel-section {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
margin-bottom: 0 !important;
min-height: 75px !important; /* Much smaller height for compact layout */
justify-content: center !important;
}
.register-panel-header {
font-size: 0.75rem !important; /* Compact size to match earlier styling */
text-align: center !important;
padding-left: 0 !important;
margin-bottom: 3px !important; /* Match earlier compact margin */
}
.register-panel-text {
font-size: 0.65rem !important; /* Smaller text to match compact layout */
text-align: center !important;
line-height: 1.2 !important; /* Tighter line height */
}
.hero-register-panel .btn {
font-size: 0.75rem !important; /* Bigger button text to match mega menu style */
padding: 10px 18px !important; /* More substantial padding */
margin: 6px auto !important; /* Better margins */
display: flex !important;
width: 70% !important;
justify-content: center !important;
align-items: center !important;
}
.mobile-brand-name,
span.mobile-brand-name,
.mobile-brand-text span.mobile-brand-name,
.nav-container .mobile-brand-text span.mobile-brand-name {
font-family: 'Playfair Display', serif !important;
font-size: 0.5rem !important; /* Very small for phone readability */
font-weight: 700 !important;
letter-spacing: 0.5px !important;
text-align: center !important;
white-space: nowrap !important;
background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}
}
/* 📱 Small Tablet: 576-767px - Mobile menu layout */
@media (min-width: 576px) and (max-width: 767.98px) {
/* Hide desktop navigation, show mobile menu */
.mega-nav-container {
display: none !important;
}
.mobile-menu-toggle {
display: flex !important;
}
/* Position mobile menu on the right (nav-container properties set below for hero text) */
/* Reduce gap between navigation and hero */
.hero-section {
margin-top: -20px !important; /* More gap for navigation clearance - was -35px */
}
/* ENABLE SLIDE-DOWN FUNCTIONALITY for 576-767px */
.hero-overlay-row.open {
display: flex !important;
align-items: flex-start !important;
gap: 0 !important;
justify-content: center !important;
position: absolute !important;
top: calc(100% + 4px) !important;
left: 50% !important;
transform: translateX(-50%) !important;
margin: 0 !important;
max-width: none !important;
width: 100vw !important;
z-index: 1050 !important;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.6) 0%,
rgba(248, 248, 248, 0.5) 50%,
rgba(255, 255, 255, 0.6) 100%
) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border-radius: 0 !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
padding: 12px 20px !important; /* Compact padding for 576-767px */
}
/* Grid override removed for 576-767px slide-down */
/* Position sections in grid for 576-767px - COMPACT */
.register-panel-section:nth-child(1) {
grid-column: 1 !important;
padding: 0 4px !important; /* Very compact spacing */
}
.register-panel-section:nth-child(3) {
grid-column: 3 !important;
padding: 0 4px !important; /* Very compact spacing */
}
.register-panel-section:nth-child(5) {
grid-column: 5 !important;
padding: 0 4px !important; /* Very compact spacing */
}
/* Position dividers in grid for 576-767px */
.register-panel-divider:nth-child(2) {
grid-column: 2 !important;
grid-row: 1 !important;
width: 1px !important;
height: 100% !important;
margin: 0 4px !important;
background: linear-gradient(180deg,
rgba(164, 51, 43, 0.3) 0%,
rgba(164, 51, 43, 0.7) 50%,
rgba(164, 51, 43, 0.3) 100%) !important;
border: none !important;
align-self: stretch !important;
}
.register-panel-divider:nth-child(4) {
grid-column: 4 !important;
grid-row: 1 !important;
width: 1px !important;
height: 100% !important;
margin: 0 4px !important;
background: linear-gradient(180deg,
rgba(164, 51, 43, 0.3) 0%,
rgba(164, 51, 43, 0.7) 50%,
rgba(164, 51, 43, 0.3) 100%) !important;
border: none !important;
align-self: stretch !important;
}
/* COMPACT content sizing for 576-767px */
.register-panel-section {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
margin-bottom: 0 !important;
min-height: 60px !important; /* Very compact height */
justify-content: center !important;
}
.register-panel-header {
font-size: 0.7rem !important; /* Very small headers */
margin-bottom: 2px !important;
text-align: center !important;
padding: 0 2px !important;
}
.hero-register-panel .btn {
font-size: 0.6rem !important; /* Very small button text */
padding: 3px 6px !important; /* Very compact button padding */
margin: 0 !important;
display: inline-block !important;
align-self: center !important;
font-weight: 600 !important;
}
.register-panel-text {
font-size: 0.65rem !important; /* Slightly bigger description text for better readability */
line-height: 1.2 !important; /* Slightly more line height for better readability */
text-align: center !important;
padding: 2px 3px !important; /* Slightly more padding for better readability */
margin: 2px 0 3px 0 !important; /* Slightly more margins for better spacing */
word-wrap: break-word !important;
}
/* Override inline styles on Summer Camp text specifically */
.register-panel-text[style] {
font-size: 0.65rem !important; /* Force override of inline styles - slightly bigger */
}
/* Slightly larger logo for small tablet */
.brand-logo-prominent {
height: 100px !important; /* Larger than mobile, smaller than desktop */
}
.floating-pills-nav.scrolled .brand-logo-prominent {
height: 65px !important; /* Proportionally larger when scrolled */
}
/* COPY 768-991PX CENTERING - Ensure nav container supports proper centering */
.nav-container {
display: flex !important;
align-items: center !important;
justify-content: space-between !important; /* Logo left, hamburger right */
position: relative !important; /* For absolute positioning of title */
}
/* FINE-TUNED CENTERING - Mobile Brand Text - shows between logo and hamburger menu */
.mobile-brand-text {
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important; /* Ensure text alignment */
position: absolute !important; /* Position absolutely for perfect centering */
left: 53% !important; /* Fine-tuned: slightly less than 55% but more than 50% */
transform: translateX(-50%) !important; /* Center perfectly */
width: auto !important;
z-index: 10 !important;
pointer-events: none !important; /* Allow clicks to pass through to elements below */
}
/* COPY 768-991PX CENTERING - Ensure hamburger menu stays on the right */
.mobile-menu-toggle {
display: flex !important;
position: relative !important;
z-index: 15 !important; /* Above the title */
margin-left: auto !important; /* Push to right */
}
/* SMALLER NAVIGATION TITLE - Navigation title sizing for small tablet */
.mobile-brand-text .mobile-brand-name,
.nav-container .mobile-brand-text .mobile-brand-name,
.floating-pills-nav .nav-container .mobile-brand-text .mobile-brand-name,
span.mobile-brand-name {
font-family: 'Playfair Display', serif !important;
font-size: 2.0rem !important; /* Medium for small tablets (576-767px) */
font-weight: 700 !important;
letter-spacing: 2px !important;
text-align: center !important;
white-space: nowrap !important;
background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}
/* 1. WIDEN HERO TEXT - COPY EXACT WORKING 768-991PX APPROACH */
/* nav-container already handled above with correct properties */
/* EXACT COPY: Widen specific hero elements based on HTML structure */
.hero-title-row {
max-width: 100% !important; /* Full width of container */
}
.hero-quote-col {
max-width: 100% !important; /* Let quote use full width */
}
.hero-row {
max-width: 100% !important; /* Full width for description row */
}
.hero-col-left {
max-width: 100% !important; /* Let description column use full width */
}
/* EXACT COPY FROM WORKING 768-991PX (lines 8297-8334) */
/* EXACT COPY FROM 768-991PX - Style the discipline quote to be prominent when title is in navigation */
.hero-quote {
text-align: center !important; /* Center the quote */
font-size: 1.0rem !important; /* Same as working version */
font-weight: 600 !important; /* Bolder than default 400 */
margin: 0 auto !important; /* Center the element */
max-width: 95% !important; /* Wider - spread across more of the screen */
line-height: 1.6 !important; /* Better readability */
}
/* Adjust the quote column to center properly */
.hero-quote-col {
justify-content: center !important;
text-align: center !important;
}
/* COPY EXACT 768-991PX PADDING - Target the nav-container to widen hero content + navigation positioning */
.nav-container {
justify-content: space-between !important; /* Space between logo, text, and hamburger */
max-width: 95% !important; /* Widen the nav container that holds hero content */
margin: 0 auto !important; /* Center it */
padding: 0 20px !important; /* EXACT SAME AS 768-991PX - no logo space! */
position: relative !important; /* ADDED: For absolute positioning of title */
display: flex !important; /* ADDED: Ensure flex layout */
align-items: center !important; /* ADDED: Center items vertically */
}
/* Widen specific hero elements based on HTML structure */
.hero-title-row {
max-width: 100% !important; /* Full width of container */
}
.hero-quote-col {
max-width: 100% !important; /* Let quote use full width */
}
.hero-row {
max-width: 100% !important; /* Full width for description row */
display: flex !important; /* Ensure flex layout */
flex-direction: row !important; /* OVERRIDE: Force horizontal layout */
justify-content: space-between !important; /* Description left, button right */
align-items: flex-start !important; /* Align to top */
gap: 0 !important; /* Override gap */
}
.hero-col-left {
max-width: 100% !important; /* Let description column use full width */
flex: 1 !important; /* Take available space */
}
/* Position button higher and slightly more right */
.hero-col-right {
justify-content: flex-end !important; /* Force right alignment */
align-items: center !important; /* Center button vertically (higher than flex-end) */
flex: 0 0 auto !important; /* Don't grow, stay on right */
align-self: center !important; /* Center container vertically */
margin-top: 10px !important; /* Less space from text above (higher) */
padding-right: 10px !important; /* Move button 10px more to the right */
}
/* 2. FIX REGISTER BUTTON SIZE - Keep right alignment */
.hero-section .hero-registration-btn {
font-size: 0.9rem !important; /* Smaller than tablet */
padding: 10px 20px !important; /* Adjusted padding */
max-width: 200px !important; /* Limit button width */
/* Remove margin: 0 auto to keep natural right alignment in hero-col-right */
}
/* Hide hero overlay title */
.hero-title {
display: none !important;
}
/* Ultra-specific selector to ensure hero title is hidden */
.hero-overlay-section .nav-container .hero-content .hero-title-row .hero-title-col .hero-title,
.hero-overlay-section .hero-title,
.hero-content .hero-title,
h1.hero-title {
display: none !important;
}
/* FULL VIEWPORT WIDTH SLIDE-DOWN for 768-991px - Positioned below hero overlay */
.hero-overlay-row.open {
display: flex !important;
align-items: flex-start !important;
gap: 0 !important; /* No gap needed without image */
justify-content: center !important; /* Center for full width */
/* Position absolute relative to hero section, but span full viewport width */
position: absolute !important;
top: calc(100% + 4px) !important; /* Position with perfect spacing below hero overlay */
bottom: auto !important; /* Let top positioning handle vertical placement */
left: 50% !important; /* Center horizontally */
right: auto !important; /* Let left/transform handle horizontal positioning */
transform: translateX(-50%) !important; /* Center the full-width panel */
margin: 0 !important; /* No margins */
max-width: none !important; /* REMOVE all width constraints */
width: 100vw !important; /* Full viewport width */
z-index: 1050 !important; /* Above everything including nav */
/* Seamless extension of hero overlay background - EXACT MATCH */
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.6) 0%,
rgba(248, 248, 248, 0.5) 50%,
rgba(255, 255, 255, 0.6) 100%
) !important; /* Match hero overlay exactly */
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border-radius: 0 !important; /* No rounded corners for seamless extension */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important; /* Downward shadow */
padding: 20px !important; /* Generous padding for mobile */
}
/* Hide image completely on mobile/tablet */
.hero-overlay-media {
display: none !important;
}
/* DISABLED GRID RULE for 768-991px */
/* Position sections in grid for 768-991px with moderate spacing */
.register-panel-section:nth-child(1) {
grid-column: 1 !important; /* After School */
padding: 0 15px !important; /* Moderate spacing for tablet layout */
}
.register-panel-section:nth-child(3) {
grid-column: 3 !important; /* Summer Camp */
padding: 0 15px !important; /* Moderate spacing for tablet layout */
}
.register-panel-section:nth-child(5) {
grid-column: 5 !important; /* Belt Exams */
padding: 0 15px !important; /* Moderate spacing for tablet layout */
}
/* Position dividers in grid as vertical lines for 768-991px */
.register-panel-divider:nth-child(2) {
grid-column: 2 !important;
grid-row: 1 !important;
width: 1px !important;
height: 100% !important;
margin: 0 15px !important; /* Match section padding */
background: linear-gradient(180deg,
rgba(164, 51, 43, 0.3) 0%,
rgba(164, 51, 43, 0.7) 50%,
rgba(164, 51, 43, 0.3) 100%) !important;
border: none !important;
align-self: stretch !important;
}
.register-panel-divider:nth-child(4) {
grid-column: 4 !important;
grid-row: 1 !important;
width: 1px !important;
height: 100% !important;
margin: 0 15px !important; /* Match section padding */
background: linear-gradient(180deg,
rgba(164, 51, 43, 0.3) 0%,
rgba(164, 51, 43, 0.7) 50%,
rgba(164, 51, 43, 0.3) 100%) !important;
border: none !important;
align-self: stretch !important;
}
/* Optimize content sizing for mobile/tablet */
.register-panel-header {
font-size: 1rem !important; /* Smaller headers */
margin-bottom: 6px !important;
text-align: left !important; /* Left-align headers */
padding: 0 12px 0 4px !important; /* Same padding as text - prevent touching sides */
}
.hero-register-panel .btn {
font-size: 0.9rem !important; /* Bigger button text */
padding: 8px 16px !important; /* More generous button padding */
margin: 0 !important; /* Remove auto margin for left alignment */
display: inline-block !important; /* Inline-block for left alignment */
align-self: flex-start !important; /* Align to start of flex container */
font-weight: 600 !important; /* Bolder button text */
}
.register-panel-text {
font-size: 0.8rem !important; /* Smaller description text */
line-height: 1.3 !important; /* Tighter line height */
text-align: left !important; /* Left-align description text */
padding: 4px 12px 4px 4px !important; /* More generous padding on all sides */
margin: 4px 0 8px 0 !important; /* Top and bottom margin for better spacing */
word-wrap: break-word !important; /* Ensure long words wrap properly */
}
.register-panel-divider {
margin: 8px 0 !important; /* Smaller divider margins */
width: 100% !important; /* Full width divider for horizontal sections */
}
/* Grid-based register panel sections for 768-991px - EXPANDED like desktop */
.register-panel-section {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
margin-bottom: 0 !important;
min-height: 120px !important; /* Increased height like desktop */
justify-content: center !important;
}
.register-panel-header {
font-size: 1.0rem !important; /* Larger headers like desktop */
text-align: center !important;
padding-left: 0 !important;
margin-bottom: 8px !important;
}
.register-panel-text {
font-size: 0.8rem !important; /* Readable text size */
text-align: center !important;
line-height: 1.4 !important;
}
.hero-register-panel .btn {
font-size: 0.8rem !important; /* Readable button text */
padding: 6px 12px !important; /* Comfortable button padding */
margin: 8px auto 0 auto !important;
display: block !important;
}
}
/* Placeholder - Extra Small Mobile rule moved to after general mobile rule */
/* 🖥️ Desktop LG: 992-1199px */
@media (min-width: 992px) and (max-width: 1199.98px) {
.nav-container {
padding: 0 25px 0 180px !important;
justify-content: flex-start !important; /* Reset to normal desktop layout */
}
/* Hide mobile brand text on desktop */
.mobile-brand-text {
display: none !important;
}
/* Hero title should be VISIBLE at 992-1199px (desktop navigation) */
.hero-title {
display: block !important;
}
/* Apply same text spacing as 1400px+ */
.hero-title-row {
gap: 20px !important; /* Same as 1400px+ */
}
/* Reduce gap between navigation and hero - gap was too wide */
.hero-section {
margin-top: -32px !important; /* Final 3px more spacing - perfect gap achieved */
}
/* Ensure hero content can contain slide-down */
.hero-content {
position: relative !important;
}
/* Fix slide-down sizing and alignment for smaller desktop width */
.hero-overlay-row {
gap: 0px !important; /* No gap needed without image */
justify-content: flex-end !important; /* Ensure right-alignment under Register button */
}
.hero-overlay-row .hero-register-panel {
flex: 1 !important; /* Take full width since no image */
max-width: 560px !important; /* Keep max width for readability */
padding: 12px 10px !important; /* Tighter padding */
margin-left: auto !important; /* Ensure right alignment */
}
/* Image completely hidden */
.hero-overlay-media {
display: none !important;
}
.hero-overlay-image {
display: none !important;
}
/* REDESIGNED HORIZONTAL LAYOUT for 992-1199px - FULL WIDTH to match nav-container */
.hero-overlay-row .hero-register-panel {
flex: 1 !important; /* Take full available width */
max-width: none !important; /* Remove width constraints to match nav-container */
width: 100% !important; /* Full width of hero content area */
margin-left: 0 !important; /* Start from left edge of content area */
margin-right: 0 !important; /* Extend to right edge of content area */
display: grid !important; /* Use CSS Grid for better control */
grid-template-columns: 1fr auto 1fr auto 1fr !important; /* section | divider | section | divider | section */
grid-template-rows: 1fr !important;
gap: 0 !important;
align-items: stretch !important;
justify-content: center !important;
padding: 15px 30px !important; /* Smaller than larger breakpoints */
}
/* Position sections in grid for 992-1199px with balanced spacing */
.register-panel-section:nth-child(1) {
grid-column: 1 !important; /* After School */
padding: 0 20px !important; /* Balanced spacing for full-width layout */
}
.register-panel-section:nth-child(3) {
grid-column: 3 !important; /* Summer Camp */
padding: 0 20px !important; /* Balanced spacing for full-width layout */
}
.register-panel-section:nth-child(5) {
grid-column: 5 !important; /* Belt Exams */
padding: 0 20px !important; /* Balanced spacing for full-width layout */
}
/* Position dividers in grid as vertical lines for 992-1199px */
.register-panel-divider:nth-child(2) {
grid-column: 2 !important;
grid-row: 1 !important;
width: 1px !important;
height: 100% !important;
margin: 0 20px !important; /* Match section padding */
background: linear-gradient(180deg,
rgba(164, 51, 43, 0.3) 0%,
rgba(164, 51, 43, 0.7) 50%,
rgba(164, 51, 43, 0.3) 100%) !important;
border: none !important;
align-self: stretch !important;
}
.register-panel-divider:nth-child(4) {
grid-column: 4 !important;
grid-row: 1 !important;
width: 1px !important;
height: 100% !important;
margin: 0 20px !important; /* Match section padding */
background: linear-gradient(180deg,
rgba(164, 51, 43, 0.3) 0%,
rgba(164, 51, 43, 0.7) 50%,
rgba(164, 51, 43, 0.3) 100%) !important;
border: none !important;
align-self: stretch !important;
}
.register-panel-section {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
margin-bottom: 0 !important;
min-height: 100px !important; /* Compact for smaller desktop */
justify-content: center !important;
}
/* Adjust register panel content sizing for 992-1199px */
.register-panel-header {
font-size: 0.9rem !important; /* Compact headers */
text-align: center !important; /* Center headers for horizontal layout */
padding-left: 0 !important; /* Remove left padding */
margin-bottom: 6px !important;
}
.hero-register-panel .btn {
font-size: 0.65rem !important; /* Smaller button text for compact layout */
padding: 4px 8px !important; /* Tighter button padding */
margin: 6px auto 0 auto !important; /* Center buttons */
display: block !important;
}
.register-panel-text {
font-size: 0.65rem !important; /* Smaller description text for compact layout */
line-height: 1.3 !important;
text-align: center !important; /* Center text for horizontal layout */
}
.mega-nav-container {
max-width: 380px !important;
margin-left: 15px !important;
}
.mega-navbar-nav {
gap: 4px !important;
}
.mega-nav-link {
padding: 6px 10px !important;
font-size: 0.7rem !important;
letter-spacing: 0px !important;
}
/* Enhanced slide-down Register buttons for 992-1199px */
.hero-register-panel .btn {
font-size: 0.95rem !important;
padding: 16px 28px !important;
margin: 12px auto !important;
min-height: 48px !important;
}
}
/* 💻 Desktop XL: 1200-1399px */
@media (min-width: 1200px) and (max-width: 1399.98px) {
.nav-container {
padding: 0 15px 0 180px !important;
justify-content: flex-start !important; /* Reset to normal desktop layout */
}
/* Hide mobile brand text on desktop */
.mobile-brand-text {
display: none !important;
}
/* Hero title should be VISIBLE at 1200-1399px */
.hero-title {
display: block !important;
}
/* Apply same text spacing as 1400px+ */
.hero-title-row {
gap: 20px !important; /* Same as 1400px+ */
}
/* Reduce gap between navigation and hero */
.hero-section {
margin-top: 0px !important; /* More gap for navigation clearance - was -15px */
}
/* Ensure hero content can contain slide-down */
.hero-content {
position: relative !important;
}
/* Full width panel for slide-down (no image) */
.hero-overlay-row {
gap: 0px !important; /* No gap needed without image */
justify-content: flex-end !important; /* Ensure right-alignment under Register button */
}
/* REDESIGNED HORIZONTAL LAYOUT for 1200-1399px - FULL WIDTH to match nav-container */
.hero-overlay-row .hero-register-panel {
flex: 1 !important; /* Take full available width */
max-width: none !important; /* Remove width constraints to match nav-container */
width: 100% !important; /* Full width of hero content area */
margin-left: 0 !important; /* Start from left edge of content area */
margin-right: 0 !important; /* Extend to right edge of content area */
display: grid !important; /* Use CSS Grid for better control */
grid-template-columns: 1fr auto 1fr auto 1fr !important; /* section | divider | section | divider | section */
grid-template-rows: 1fr !important;
gap: 0 !important;
align-items: stretch !important;
justify-content: center !important;
padding: 18px 35px !important; /* Slightly smaller than 1400px+ */
}
/* Image completely hidden */
.hero-overlay-media {
display: none !important;
}
.hero-overlay-image {
display: none !important;
}
/* Position sections in grid for 1200-1399px with good spacing */
.register-panel-section:nth-child(1) {
grid-column: 1 !important; /* After School */
padding: 0 25px !important; /* Good spacing for wide layout */
}
.register-panel-section:nth-child(3) {
grid-column: 3 !important; /* Summer Camp */
padding: 0 25px !important; /* Good spacing for wide layout */
}
.register-panel-section:nth-child(5) {
grid-column: 5 !important; /* Belt Exams */
padding: 0 25px !important; /* Good spacing for wide layout */
}
/* Position dividers in grid as vertical lines for 1200-1399px */
.register-panel-divider:nth-child(2) {
grid-column: 2 !important;
grid-row: 1 !important;
width: 1px !important;
height: 100% !important;
margin: 0 25px !important; /* Match section padding */
background: linear-gradient(180deg,
rgba(164, 51, 43, 0.3) 0%,
rgba(164, 51, 43, 0.7) 50%,
rgba(164, 51, 43, 0.3) 100%) !important;
border: none !important;
align-self: stretch !important;
}
.register-panel-divider:nth-child(4) {
grid-column: 4 !important;
grid-row: 1 !important;
width: 1px !important;
height: 100% !important;
margin: 0 25px !important; /* Match section padding */
background: linear-gradient(180deg,
rgba(164, 51, 43, 0.3) 0%,
rgba(164, 51, 43, 0.7) 50%,
rgba(164, 51, 43, 0.3) 100%) !important;
border: none !important;
align-self: stretch !important;
}
.register-panel-section {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
margin-bottom: 0 !important;
min-height: 110px !important; /* Slightly shorter than 1400px+ */
justify-content: center !important;
}
.register-panel-header {
font-size: 0.95rem !important;
text-align: center !important;
padding-left: 0 !important;
margin-bottom: 8px !important;
}
.register-panel-text {
font-size: 0.7rem !important;
text-align: center !important;
line-height: 1.3 !important;
}
.hero-register-panel .btn {
margin: 8px auto 0 auto !important;
display: block !important;
font-size: 0.7rem !important;
padding: 5px 10px !important;
}
.mega-nav-container {
max-width: 400px !important;
margin-left: 20px !important;
}
.mega-navbar-nav {
gap: 4px !important;
}
.mega-nav-link {
padding: 7px 11px !important;
font-size: 0.74rem !important;
letter-spacing: 0px !important;
}
/* Enhanced slide-down Register buttons for 1200-1399px */
.hero-register-panel .btn {
font-size: 1rem !important;
padding: 18px 30px !important;
margin: 14px auto !important;
min-height: 52px !important;
}
}
/* 🖥️ Desktop XXL: 1400px+ */
@media (min-width: 1400px) {
.nav-container {
padding: 0 30px 0 180px !important;
justify-content: flex-start !important; /* Reset to normal desktop layout */
}
/* Hide mobile brand text on desktop */
.mobile-brand-text {
display: none !important;
}
/* Hero title should be VISIBLE at 1400px+ */
.hero-title {
display: block !important;
}
/* More spacing between title and quote on large screens */
.hero-title-row {
gap: 20px !important; /* Increased from default 8px */
}
/* Reduce gap between navigation and hero - prevent overlap */
.hero-section {
margin-top: 0px !important; /* More gap for navigation clearance - was -15px */
}
/* Ensure hero content can contain absolutely positioned slide-down */
.hero-content {
position: relative !important;
}
.mega-nav-container {
max-width: 400px !important;
margin-left: 25px !important;
}
.mega-navbar-nav {
gap: 6px !important;
}
.mega-nav-link {
padding: 8px 14px !important;
font-size: 0.8rem !important;
letter-spacing: 0.3px !important;
}
/* Extra padding for largest logo (130px) */
.floating-pills-nav {
padding: 45px 0 !important;
}
.floating-pills-nav.scrolled {
padding: 28px 0 !important;
}
}
/* 📱 CLEAN MOBILE OPTIMIZATION - 480px and below only */
@media (max-width: 480px) {
/* Push video down to show more video above the hero overlay */
.video-container video {
top: 200px !important;
height: calc(100% + 200px) !important;
object-position: center top !important;
}
/* Push hero overlay down to show more video */
.hero-overlay-section {
top: 180px !important;
padding-top: 20px !important;
}
/* Improve hero content spacing */
.hero-content {
padding: 15px !important;
}
/* Better text spacing for small screens */
.hero-quote {
font-size: 1rem !important;
line-height: 1.4 !important;
margin-bottom: 15px !important;
}
.hero-description {
font-size: 0.9rem !important;
line-height: 1.5 !important;
}
/* Mobile register buttons - change text to "Register Now!" with line break */
.mobile-register-option .mobile-register-btn,
.mobile-register-btn {
top: 95px !important; /* Position even lower below the headers */
line-height: 1.2 !important;
padding: 8px 12px !important; /* Adjust padding for multi-line */
white-space: normal !important; /* Allow line breaks */
height: auto !important; /* Allow height to adjust */
text-indent: -9999px !important; /* Hide original text by pushing it off screen */
overflow: hidden !important; /* Hide the indented text */
position: absolute !important;
}
.mobile-register-btn::after {
content: "Register\A Now!" !important; /* \A creates line break */
font-size: 0.7rem !important;
font-weight: 700 !important;
white-space: pre !important; /* Preserve line breaks */
line-height: 1.2 !important;
display: block !important;
text-align: center !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
text-indent: 0 !important; /* Reset text-indent for pseudo-element */
width: 100% !important;
}
/* Move headers closer to buttons */
.mobile-register-header {
margin-bottom: 2px !important; /* Reduce gap between header and button */
}
}
/* Hide mobile hero content section on larger screens */
@media (min-width: 481px) {
.mobile-hero-content-section {
display: none !important;
}
}
/* SIMPLE DIRECT FIX for 992px and below */
@media (max-width: 992px) {
/* Fix Summer Camp to accordion gap - reduced after fixing viewport height */
section#summer-camp .row.justify-content-center.mt-2 {
margin-top: -2rem !important;
}
}
/* Footer text alignment - left aligned on all breakpoints */
.footer .footer-brand,
.footer .footer-title,
.footer .footer-description,
.footer .footer-heading,
.footer .footer-links,
.footer .footer-contact,
.footer .footer-social,
.footer .social-heading,
.footer .social-icons,
.footer .contact-item {
text-align: left !important;
}
.footer .footer-links li,
.footer .contact-item,
.footer .social-icons {
justify-content: flex-start !important;
align-items: flex-start !important;
}
/* 📱 ULTRA SMALL MOBILE OPTIMIZATION - 360px and below only */
@media (max-width: 360px) {
/* Push video down even more for tiny screens */
.video-container video {
top: 220px !important;
height: calc(100% + 220px) !important;
object-position: center top !important;
}
/* Push hero overlay down more for tiny screens */
.hero-overlay-section {
top: 200px !important;
padding-top: 15px !important;
}
/* More compact text for tiny screens */
.hero-quote {
font-size: 0.9rem !important;
line-height: 1.3 !important;
}
.hero-description {
font-size: 0.8rem !important;
line-height: 1.4 !important;
}
/* More compact content padding */
.hero-content {
padding: 10px !important;
}
/* Mobile register buttons for ultra small screens - "Register Now!" with line break */
.mobile-register-option .mobile-register-btn,
.mobile-register-btn {
top: 90px !important; /* Position even lower below the headers */
line-height: 1.1 !important;
padding: 6px 10px !important; /* Even more compact padding */
white-space: normal !important;
height: auto !important;
text-indent: -9999px !important; /* Hide original text */
overflow: hidden !important;
position: absolute !important;
}
.mobile-register-btn::after {
content: "Register\A Now!" !important; /* \A creates line break */
font-size: 0.65rem !important; /* Even smaller font for tiny screens */
font-weight: 700 !important;
white-space: pre !important;
line-height: 1.1 !important;
display: block !important;
text-align: center !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
text-indent: 0 !important;
width: 100% !important;
}
/* Move headers even closer to buttons */
.mobile-register-header {
margin-bottom: 1px !important; /* Minimal gap for tiny screens */
}
}
/* 📱 STRATEGIC MOBILE FIX - Use separate mobile section at 480px and below */
@media (max-width: 480px) {
/* Hide the original floating hero overlay completely */
.hero-overlay-section {
display: none !important;
}
/* Style mobile section exactly like desktop hero overlay */
.mobile-hero-content-section {
display: block !important;
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(10px) !important;
padding: 20px 0 !important;
margin: 0 !important;
color: #333 !important;
}
.mobile-hero-content {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 15px !important;
}
.mobile-hero-title-row {
text-align: center !important;
margin-bottom: 20px !important;
}
.mobile-hero-title {
font-size: 2.5rem !important;
font-weight: bold !important;
color: #333 !important;
margin-bottom: 15px !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
line-height: 1.2 !important;
}
.mobile-hero-quote {
font-family: 'Playfair Display', serif !important;
font-size: 1rem !important;
font-weight: 400 !important;
font-style: italic !important;
color: var(--accent) !important;
line-height: 1.5 !important;
margin-top: 5px !important;
margin-bottom: 10px !important;
max-width: 600px !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
}
.mobile-hero-row {
text-align: center !important;
margin-bottom: 25px !important;
}
.mobile-hero-description-container {
max-width: 600px !important;
margin: 0 auto !important;
}
.mobile-hero-description {
font-size: 1rem !important;
line-height: 1.6 !important;
color: #333 !important;
margin-bottom: 0 !important;
text-align: center !important;
}
/* Horizontal register options layout */
.mobile-register-options-row {
display: flex !important;
gap: 12px !important;
justify-content: center !important;
align-items: stretch !important;
margin-top: 25px !important;
padding: 0 10px !important;
}
.mobile-register-option {
flex: 1 !important;
max-width: 140px !important;
text-align: center !important;
padding: 18px 10px !important;
border-radius: 12px !important;
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(10px) !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: center !important;
min-height: 130px !important;
position: relative !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
border: 1px solid rgba(164, 51, 43, 0.1) !important;
transition: all 0.3s ease !important;
}
.mobile-register-option.register-section-with-stripes {
background: rgba(255, 255, 255, 0.95) !important;
border: 1px solid rgba(164, 51, 43, 0.1) !important;
}
.mobile-register-option:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(164, 51, 43, 0.15) !important;
border-color: rgba(164, 51, 43, 0.2) !important;
}
.mobile-register-header {
font-size: 1rem !important;
font-weight: bold !important;
color: var(--accent) !important;
border-bottom: 2px solid var(--accent) !important;
padding-bottom: 8px !important;
margin-bottom: 5px !important;
line-height: 1.2 !important;
margin-top: 0 !important;
}
.mobile-register-text {
font-size: 0.8rem !important;
color: #666 !important;
line-height: 1.4 !important;
margin-bottom: 12px !important;
padding: 0 8px !important;
font-style: italic !important;
}
.mobile-register-btn {
background: linear-gradient(135deg, var(--accent), var(--accent-light)) !important;
border: 2px solid rgba(255, 255, 255, 0.3) !important;
color: white !important;
padding: 10px 16px !important;
font-size: 0.85rem !important;
font-weight: 700 !important;
border-radius: 8px !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
text-decoration: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
position: absolute !important;
top: 42% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
box-shadow: 0 4px 12px rgba(164, 51, 43, 0.3) !important;
transition: all 0.3s ease !important;
width: 85% !important;
min-width: 80px !important;
}
.mobile-register-btn:hover {
background: linear-gradient(135deg, var(--accent-light), var(--accent)) !important;
color: white !important;
text-decoration: none !important;
transform: translate(-50%, -50%) scale(1.05) !important;
box-shadow: 0 6px 18px rgba(164, 51, 43, 0.4) !important;
border-color: rgba(255, 255, 255, 0.5) !important;
}
/* Stack hero content vertically for mobile with tighter spacing */
.hero-row {
flex-direction: column !important;
gap: 12px !important;
text-align: center !important;
}
.hero-col-left,
.hero-col-right {
width: 100% !important;
max-width: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Force parent containers to use full width */
body .hero-section .hero-content,
.hero-section .hero-content,
body .hero-section .nav-container,
.hero-section .nav-container {
padding-left: 8px !important;
padding-right: 8px !important;
max-width: none !important;
width: 100% !important;
}
/* Mobile-optimized text sizing with tighter spacing */
body .hero-section .hero-overlay-section .hero-title,
.hero-section .hero-overlay-section .hero-title {
font-size: 2rem !important;
margin-bottom: 8px !important;
}
body .hero-section .hero-overlay-section .hero-quote,
.hero-section .hero-overlay-section .hero-quote {
font-size: 1rem !important;
line-height: 1.4 !important;
margin-bottom: 8px !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
body .hero-section .hero-overlay-section .hero-description,
.hero-section .hero-overlay-section .hero-description {
font-size: 0.9rem !important;
line-height: 1.5 !important;
margin-bottom: 12px !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Center and optimize register button for mobile - single line */
body .hero-section .hero-overlay-section .hero-registration-btn,
.hero-section .hero-overlay-section .hero-registration-btn,
.hero-overlay-section .hero-registration-btn {
display: block !important;
margin: 0 auto !important;
padding: 12px 30px !important;
font-size: 1rem !important;
width: auto !important;
max-width: 200px !important;
white-space: nowrap !important;
text-align: center !important;
}
/* Final mobile video positioning - flush with navigation */
body .video-container video,
.video-container video {
top: 116px !important;
left: 0 !important;
transform: none !important;
width: 100vw !important;
height: calc(100vh - 116px) !important;
object-fit: cover !important;
object-position: center center !important;
position: absolute !important;
z-index: 1 !important;
}
/* Move header above video */
.floating-pills-nav {
position: fixed !important;
z-index: 10 !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
}
/* Hero section only contains video */
.hero-section {
height: 100vh !important;
min-height: 100vh !important;
position: relative !important;
}
/* Training section with proper spacing */
.training-options-section {
margin-top: 20px !important;
padding-top: 20px !important;
position: relative !important;
z-index: 5 !important;
}
/* Mobile slide-down menu - positioned to avoid overlap */
body .hero-section .hero-register-panel,
.hero-section .hero-register-panel,
.hero-register-panel {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
padding: 12px !important;
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(10px) !important;
border-radius: 8px !important;
margin: 0 auto 10px auto !important;
max-width: 300px !important;
width: calc(100% - 40px) !important;
position: relative !important;
top: 8px !important;
}
/* Make Kaizen Karate title in header slightly larger */
body .mobile-brand-text .mobile-brand-name,
.mobile-brand-text .mobile-brand-name {
font-size: 1.6rem !important;
letter-spacing: 2px !important;
}
body .hero-section .register-panel-section,
.hero-section .register-panel-section,
.register-panel-section {
width: 100% !important;
flex: none !important;
text-align: center !important;
padding: 8px 6px !important;
border-radius: 6px !important;
}
/* Hide horizontal dividers, not needed in vertical layout */
body .hero-section .register-panel-divider,
.hero-section .register-panel-divider,
.register-panel-divider {
display: none !important;
}
/* Make section titles bigger for better hierarchy */
body .hero-section .register-panel-header,
.hero-section .register-panel-header,
.register-panel-header {
font-size: 1.1rem !important;
font-weight: bold !important;
margin-bottom: 8px !important;
}
/* Make register buttons smaller and more compact */
body .hero-section .register-panel-section .training-btn-primary,
.hero-section .register-panel-section .training-btn-primary,
.register-panel-section .training-btn-primary {
width: 100% !important;
max-width: 140px !important;
margin: 0 auto !important;
padding: 8px 12px !important;
font-size: 0.8rem !important;
}
}
/* Instructor Profile Images */
.instructor-bio-container {
position: relative;
overflow: hidden;
}
.instructor-bio-container::after {
content: "";
display: table;
clear: both;
}
.instructor-profile-image {
width: 300px;
height: 300px;
object-fit: cover;
border-radius: 8px;
border: 2px solid rgba(164, 51, 43, 0.3);
float: left;
margin: 20px 20px 15px 0;
clear: left;
}
.instructor-bio-text {
text-align: justify;
line-height: 1.6;
}
/* Ensure proper text flow around image */
.instructor-bio-text .about-text {
margin-bottom: 15px;
}
/* When no image, text behaves normally */
.instructor-bio-container:not(:has(.instructor-profile-image)) .instructor-bio-text {
width: 100%;
float: none;
}
/* Mobile responsive for instructor images */
@media (max-width: 767.98px) {
.instructor-profile-image {
float: none;
display: block;
width: 180px;
height: 180px;
margin: 0 auto 20px auto;
clear: none;
}
.instructor-bio-text {
text-align: left;
clear: both;
}
}
/* For smaller screens - bigger centered images */
@media (max-width: 480px) {
.instructor-profile-image {
width: 200px;
height: 200px;
margin: 15px auto 18px auto;
}
}
/* For very small screens - even bigger since it's stacked */
@media (max-width: 390px) {
.instructor-profile-image {
width: 220px;
height: 220px;
margin: 20px auto 20px auto;
}
}
/* DESKTOP ONLY - Ensures training content is fully visible on desktop screens */
@media (min-width: 768px) {
body .training-options-section .training-cards-grid .training-card .training-description.expandable-content {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
position: static !important;
}
body .training-options-section .training-cards-grid .training-card .training-description .training-description-full {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
position: static !important;
}
body .training-options-section .training-cards-grid .training-card .training-card-buttons {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
}