@import url('https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wght@0,200..900;1,200..900&display=swap'); *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; } html, body { height: 100%; background: #fff; color: #000; font-family: 'Mona Sans', sans-serif; overflow-x: hidden; } body { display: flex; flex-direction: column; } /* Main content fade-in/out (keeps fixed header stable) */ main, .main-content { flex: 1 0 auto; opacity: 1; transition: opacity 0.08s ease-out; will-change: opacity; } /* Initial load: page-loader.js toggles this class on */ html.page-loading main, html.page-loading .main-content { opacity: 0; transition: none; } /* Internal navigation transitions: components.js toggles this class on */ body.page-transitioning main, body.page-transitioning .main-content { opacity: 0.92; } /* Fade in on load */ body.page-loaded { /* Some pages use this as a general "ready" flag (see critical.css, if used). */ } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } button, input, select, textarea, a { font-family: inherit; } /* Main content area - sits directly under fixed header */ main, .main-content { padding-top: 80px; margin-top: 0; } /* Prevent header/footer flash on page load */ #header-placeholder { position: fixed; top: 0; left: 0; width: 100%; min-height: 80px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.1); z-index: 1000; } #footer-placeholder { min-height: 200px; background: #042dac; } .site-header { position: fixed; top: 0; left: 0; width: 100%; height: 80px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.1); z-index: 1000; margin: 0; } .header-content { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 1rem; gap: 2rem; } .main-nav { display: flex; gap: 2rem; align-items: center; margin: 0 auto; } .nav-link { color: #000; text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: color 0.2s, opacity 0.15s; white-space: nowrap; position: relative; } .nav-link:hover { color: #042dac; } .nav-link:active { opacity: 0.6; } /* Active state indicator */ .nav-link.active { color: #042dac; font-weight: 600; } .nav-link.active::after { content: ''; position: absolute; bottom: -8px; left: 0; right: 0; height: 2px; background: #042dac; border-radius: 2px; } .mobile-nav { display: none; } .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; z-index: 1001; position: relative; } .hamburger-line { width: 22px; height: 2px; background: #000; border-radius: 2px; transition: all 0.25s ease-in-out; transform-origin: center; } .hamburger[aria-expanded="true"] .hamburger-line { background: #000; } .hamburger[aria-expanded="true"] .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger[aria-expanded="true"] .hamburger-line:nth-child(2) { opacity: 0; transform: scale(0); } .hamburger[aria-expanded="true"] .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 768px) { .hamburger { display: flex; } .main-nav { display: none; } .auth-nav { display: none !important; } .mobile-nav { display: flex; position: fixed; top: 80px; left: 0; width: 100%; height: calc(100vh - 80px); background: #042dac; flex-direction: column; justify-content: flex-start; align-items: stretch; padding: 0; z-index: 998; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; overflow-y: auto; } .mobile-nav.active { opacity: 1; visibility: visible; } .mobile-nav-link { color: #fff !important; text-decoration: none; font-size: 0.95rem; font-weight: 500; padding: 1rem 1.5rem; transition: background 0.2s; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.15); display: flex; justify-content: space-between; align-items: center; } .mobile-nav-link::after { content: ''; width: 28px; height: 28px; background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19' stroke='rgba(255,255,255,0.8)' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M13 6L19 12L13 18' stroke='rgba(255,255,255,0.8)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; } .mobile-nav-link:hover { background: rgba(255,255,255,0.1); } } .logo-img { height: 1.2rem; width: auto; position: relative; top: 2px; margin: 0 1rem; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; backface-visibility: hidden; transform: translateZ(0); will-change: transform; } .logo { display: inline-block; line-height: 0; } .logo picture { display: block; line-height: 0; } .auth-nav .btn { margin-left: 0.75rem; padding: 0.5rem 1rem; font-size: 0.9rem; text-decoration: none; border-radius: 6px; display: inline-block; min-width: 100px; text-align: center; transition: opacity 0.2s; } .btn-signup { background: transparent; color: #000; border: 1px solid #000; } .btn-signup:hover { background: #f5f5f5; } .btn-login { background: #042dac; color: #fff; border: 1px solid #000; } .btn-login:hover { opacity: 0.9; } /* Final CTA Section - Gold Journey Block */ .final-cta-section { padding: 100px 2rem; background: #AC8304; text-align: center; position: relative; overflow: hidden; } .final-cta-section::before { content: ''; position: absolute; top: -150px; right: -150px; width: 400px; height: 400px; background: rgba(255,255,255,0.08); border-radius: 50%; } .final-cta-section::after { content: ''; position: absolute; bottom: -100px; left: -100px; width: 300px; height: 300px; background: rgba(255,255,255,0.05); border-radius: 50%; } .final-cta-container { max-width: 800px; margin: 0 auto; position: relative; z-index: 1; } .final-cta-badge { display: none; } .final-cta-title { font-size: 2.75rem; font-weight: 700; color: #fff; margin-bottom: 2rem; line-height: 1.2; letter-spacing: -0.02em; } .final-cta-subtitle { font-size: 1.2rem; color: rgba(255,255,255,0.9); margin-bottom: 3rem; line-height: 1.6; max-width: 600px; margin-left: auto; margin-right: auto; } .final-cta-buttons { display: flex; justify-content: center; } .final-cta-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 1.1rem 3.5rem; font-size: 1rem; font-weight: 600; border-radius: 8px; text-decoration: none; transition: all 0.3s ease; } .final-cta-btn-primary { background: #fff; color: #AC8304; } .final-cta-btn-primary:hover { background: #f0f0f0; transform: translateY(-3px); box-shadow: 0 15px 40px rgba(0,0,0,0.2); } @media (max-width: 768px) { .final-cta-section { padding: 70px 1.5rem; } .final-cta-title { font-size: 2rem; } .final-cta-subtitle { font-size: 1rem; } .final-cta-btn { width: 100%; justify-content: center; } } footer { background: #042dac; color: #fff; text-align: left; padding: 5rem 2rem 2rem; margin-top: auto; }