/* ========================================== 1. CORE COLORS & GLOBAL STYLES ========================================== */ .nav-blue { background-color: #3b6fb6; } .footer-gray { background-color: #e5e7eb; border-radius: 20px; } /* Modal Animation */ #modalContent { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; } .scale-0 { transform: scale(0); opacity: 0; } .scale-100 { transform: scale(1); opacity: 1; } /* ========================================== 2. SHARED LAYOUT ENGINE (Symmetry Lock) ========================================== */ html { /* Forces scrollbar gutter to always exist so the 'center' never shifts */ overflow-y: scroll; } body { margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; width: 100%; background-color: white; } /* The Global Symmetry Lock (98.5% width) */ header, footer, main { width: 98.5%; max-width: 1500px; margin-left: auto !important; margin-right: auto !important; flex-shrink: 0; box-sizing: border-box; } /* ========================================== 3. INDEX PAGE LOGIC (The Accordion) ========================================== */ /* Triggers when has no extra classes */ body:not(.content-page) { height: 100vh; overflow: hidden; /* Lock the viewport for the carousel */ } body:not(.content-page) main { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; /* Strict Height Math to keep footer visible on laptops */ max-height: calc(100vh - 250px); min-height: 50vh; position: relative; } /* ========================================== 4. CONTENT PAGE LOGIC (Lessons/About) ========================================== */ /* Triggered by */ body.content-page { height: auto; min-height: 100vh; overflow-y: auto; /* Allows natural scrolling */ } body.content-page main { height: auto; max-height: none; min-height: 60vh; padding: 2rem 0; justify-content: flex-start; display: flex; flex-direction: column; align-items: center; } /* ========================================== 5. HEADER & NAVIGATION ========================================== */ #header-title { display: flex; align-items: center; gap: clamp(4px, 1vw, 12px); } #header-title img { height: clamp(26px, 3.8vw, 44px) !important; width: auto; object-fit: contain; } #header-title a { color: inherit; text-decoration: none; white-space: nowrap; font-size: clamp(0.95rem, 1.6vw, 1.6rem); font-weight: 900; } .btn-glass { background-color: rgba(255, 255, 255, 0.15) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; border-radius: 10px !important; padding: clamp(0.25rem, 0.6vw, 0.7rem) clamp(0.4rem, 1.2vw, 1.3rem) !important; font-size: clamp(0.6rem, 0.85vw, 0.9rem) !important; font-weight: 700 !important; color: white !important; text-decoration: none !important; display: inline-flex; align-items: center; justify-content: center; } /* ========================================== 6. CAROUSEL (Index Specific) ========================================== */ .carousel-container { width: 100%; flex: 1; position: relative; overflow: hidden; display: flex; align-items: center; } .carousel-track { display: flex; height: 100%; align-items: center; } .slide { width: 85vw; height: 100%; flex-shrink: 0; padding: 10px; box-sizing: border-box; } .slide img { width: 100%; height: 100%; object-fit: cover; border-radius: 1.5rem; box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.15); } #prevBtn, #nextBtn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 30; background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; padding: clamp(0.5rem, 1.2vw, 1rem); color: white; } #prevBtn { left: 15px; } #nextBtn { right: 15px; } /* ========================================== 7. FOOTER ========================================== */ .footer-gray { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.25rem; margin: 0 0 1rem 0; width: 100%; text-align: center; box-sizing: border-box; } .footer-link { text-decoration: none; color: #4b5563; font-size: 0.9rem; font-weight: 500; } /* ========================================== 8. RESPONSIVE FINESSE ========================================== */ @media (min-width: 768px) { .slide { width: 60vw; } .footer-gray { flex-direction: row; justify-content: space-between; text-align: left; } } @media (max-width: 640px) and (orientation: portrait) { .header-container { padding: 0.5rem; } .utility-row { margin-bottom: 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.5rem; } .main-row { flex-direction: column; gap: 0.8rem; } .nav-menu { width: 100%; justify-content: center; } }