{} *{} /*endBaseStyles*/:root { --apex-black: #050608; --apex-black-soft: #0a0c10; --apex-gold: #f5c354; --apex-gold-soft: #ffd773; --apex-gray: #3d3f44; --apex-soft-gray: #cfd0d4; /* lighter gray */ --apex-soft-gray-2: #e3e4e7; /* near white */ --apex-white: #ffffff; /* pure white for key text */
}
/* Global text color overrides */
body { color: var(--apex-soft-gray-2);
}
h1, h2, h3, h4 { color: var(--apex-white);
}
p, li, small, .small-text, .step-copy, .question-helper, .field-note, .footer-text, .footer-note { color: var(--apex-soft-gray-2);
}
/* Subtitles, taglines, progress label, and accent lines */
.hero-subtitle,
.step-tagline,
.brand-tagline,
.progress-label,
.apex-tagline { color: var(--apex-soft-gray);
}
/* Placeholder text in inputs */
textarea::placeholder,
input::placeholder { color: var(--apex-soft-gray);
}
/* Make button text stronger */
.btn-outline { color: var(--apex-white); border-color: rgba(245,195,84,0.75);
} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } :root { --apex-black: #050608; --apex-black-soft: #0a0c10; --apex-gold: #f5c354; --apex-gold-soft: #ffd773; --apex-soft-gray: #cfd0d4; --apex-soft-gray-2: #e3e4e7; --apex-white: #ffffff; } * { box-sizing: border-box; } body { margin: 0; font-family: 'Montserrat', sans-serif; background: radial-gradient(circle at top, #151922 0, #050608 55%, #020305 100%); color: var(--apex-soft-gray-2); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: 'Bebas Neue', sans-serif; text-transform: uppercase; letter-spacing: 0.18em; color: var(--apex-white); } p, li, small { color: var(--apex-soft-gray-2); } a { color: var(--apex-gold); text-decoration: none; } a:hover { text-decoration: underline; } /* HERO */ .hero { padding: 32px 20px; border-bottom: 1px solid rgba(245,195,84,0.3); background: linear-gradient(135deg, rgba(245,195,84,0.18), transparent 55%); } .hero-inner { max-width: 980px; margin: auto; } .hero-top { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; } .hero-brand { display: flex; align-items: center; gap: 14px; } .lion-mark { width: 56px; height: 56px; border-radius: 14px; border: 2px solid rgba(245,195,84,0.7); background: radial-gradient(circle at top, rgba(245,195,84,0.35), rgba(5,6,8,0.95)); box-shadow: 0 0 18px rgba(245,195,84,0.35); display: flex; align-items: center; justify-content: center; font-size: 28px; } .brand-text { display: flex; flex-direction: column; } .brand-name { font-size: 32px; letter-spacing: 0.22em; color: var(--apex-gold); } .brand-tagline { font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--apex-soft-gray); } .progress-wrap { position: fixed; top: 20px; right: 20px; background: rgba(5, 6, 8, 0.8); backdrop-filter: blur(6px); border: 1px solid rgba(245, 195, 84, 0.3); border-radius: 10px; padding: 10px 14px; z-index: 1000; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); text-align: right; min-width: 220px; } .progress-label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--apex-soft-gray); margin-bottom: 4px; } .progress-bar { width: 100%; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgba(245,195,84,0.4), var(--apex-gold)); transition: width 0.3s ease; } .progress-bar { width: 220px; height: 7px; background: rgba(255,255,255,0.08); border-radius: 999px; margin-top: 4px; overflow: hidden; } .progress-fill { width: 0%; height: 100%; background: linear-gradient(90deg, rgba(245,195,84,0.3), var(--apex-gold)); border-radius: 999px; transition: width 0.25s; } .hero-title { font-size: 44px; letter-spacing: 0.18em; margin-top: 12px; } .hero-subtitle { color: var(--apex-soft-gray); max-width: 640px; } /* SECTION STYLES */ .content { max-width: 980px; margin: auto; padding: 20px; } .step { background: radial-gradient(circle at top left, rgba(245,195,84,0.06), rgba(10,11,14,0.96)); border-radius: 20px; border: 1px solid rgba(245,195,84,0.2); margin-bottom: 20px; padding: 20px; } .step-number { font-family: 'Bebas Neue', sans-serif; font-size: 26px; color: rgba(245,195,84,0.9); letter-spacing: 0.18em; } .step-title { font-size: 16px; letter-spacing: 0.14em; color: var(--apex-white); } .step-tagline { font-size: 12px; color: var(--apex-soft-gray); text-transform: uppercase; } .step-copy { margin: 8px 0 10px; } textarea, input[type="text"], input[type="email"] { width: 100%; border: 1px solid rgba(245,195,84,0.3); border-radius: 10px; background: rgba(8,10,14,0.9); color: var(--apex-white); padding: 10px; font-size: 14px; min-height: 70px; resize: vertical; outline: none; } textarea:focus, input:focus { border-color: var(--apex-gold); box-shadow: 0 0 4px rgba(245,195,84,0.4); } .question-label { color: var(--apex-gold); text-transform: uppercase; font-size: 12px; letter-spacing: 0.1em; } .question-helper { font-size: 12px; color: var(--apex-soft-gray); margin-bottom: 4px; } /* FOOTER ACTIONS */ .footer-cta { background: linear-gradient(135deg, rgba(245,195,84,0.1), rgba(3,4,6,0.95)); border: 1px solid rgba(245,195,84,0.3); border-radius: 20px; padding: 20px; } .footer-heading { background: var(--apex-gold); color: var(--apex-black); font-family: 'Bebas Neue', sans-serif; font-size: 24px; padding: 4px 12px; border-radius: 999px; display: inline-block; letter-spacing: 0.15em; } .footer-text { color: var(--apex-soft-gray-2); margin: 10px 0; } .btn { display: inline-block; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; font-size: 12px; padding: 10px 18px; border-radius: 999px; cursor: pointer; transition: all 0.2s ease; margin-right: 8px; } .btn-gold { background: var(--apex-gold); color: var(--apex-black); } .btn-gold:hover { background: var(--apex-gold-soft); } .btn-outline { border: 1px solid var(--apex-gold); color: var(--apex-white); background: transparent; } .btn-outline:hover { background: rgba(245,195,84,0.1); } .apex-tagline { text-transform: uppercase; font-size: 11px; color: var(--apex-soft-gray); letter-spacing: 0.16em; margin-top: 6px; } @media (max-width: 720px) { .hero-title { font-size: 32px; } .progress-bar { width: 100%; } } .apex-footer { background: linear-gradient(135deg, rgba(245,195,84,0.12), rgba(5,6,8,0.95)); border-top: 1px solid rgba(245,195,84,0.3); padding: 18px 10px; text-align: center; font-family: 'Montserrat', sans-serif; } .apex-footer-inner { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; } .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; } .footer-links a { color: #f5c354; text-decoration: none; transition: color 0.2s ease; } .footer-links a:hover { color: #ffd773; text-decoration: underline; } .footer-links span { color: rgba(245,195,84,0.4); } .footer-copy { font-size: 11px; color: #e3e4e7; letter-spacing: 0.14em; text-transform: uppercase; }