/* ========================= Base + Global ========================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; padding: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #f9fafb; } /* Global link reset – kill default blue/purple */ a, a:visited { color: inherit; text-decoration: none; } a:hover { color: inherit; } /* Images */ img { max-width: 100%; display: block; } /* Neon background applied via class on */ html.theme-neon { background: radial-gradient(circle at 0% 0%, rgba(53, 132, 255, 0.4), transparent 55%), radial-gradient(circle at 100% 40%, rgba(255, 0, 184, 0.45), transparent 55%), radial-gradient(circle at 50% 100%, rgba(255, 200, 0, 0.25), transparent 60%), #050510; min-height: 100vh; background-attachment: fixed; } /* Make sure neon mode links match the text + glow on hover */ html.theme-neon, html.theme-neon a, html.theme-neon a:visited { color: #f9fafb; } html.theme-neon a:hover { text-shadow: 0 0 8px rgba(0, 212, 255, 0.75); } /* ========================= Dark mode variant – studio neon ========================= */ html.theme-dark { background: radial-gradient(circle at 0% 0%, rgba(15, 23, 42, 0.9), transparent 55%), radial-gradient(circle at 100% 10%, rgba(88, 28, 135, 0.85), transparent 55%), radial-gradient(circle at 50% 100%, rgba(4, 120, 87, 0.65), transparent 60%), #020617; color: #e5e7eb; } /* Cards a little moodier in dark mode */ html.theme-dark .card { background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.08), transparent 60%), radial-gradient(circle at 100% 100%, rgba(147, 51, 234, 0.15), transparent 60%), rgba(15, 23, 42, 0.98); border-color: rgba(51, 65, 85, 0.9); box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.9), 0 16px 40px rgba(15, 23, 42, 0.9); } /* Hero title in warm gold, not hyper-neon */ html.theme-dark .hero h1 { color: #eab308; } /* Ensure dark mode hero stays warm gold */ html.theme-dark .hero h1 { color: #eab308; } /* Buttons still pop in dark mode */ html.theme-dark .btn.primary { background: radial-gradient(circle at 0 0, #22d3ee, #0ea5e9); box-shadow: 0 0 24px rgba(56, 189, 248, 0.65), 0 0 50px rgba(6, 182, 212, 0.4); color: #02131c; } html.theme-dark .btn.outline, html.theme-dark .btn.ghost { border-color: rgba(148, 163, 184, 0.7); } /* Kill any random link color in dark mode */ html.theme-dark a, html.theme-dark a:visited { color: inherit; } /* Anything inside cards should inherit text color too */ .card a, .card a:visited { color: inherit; } /* Theme toggle button */ .theme-toggle { position: fixed !important; bottom: 1rem !important; right: 1rem !important; top: auto !important; left: auto !important; z-index: 1000 !important; /* above header + nav */ border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.7); background: rgba(15, 23, 42, 0.9); color: #e5e7eb; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; padding: 0.55rem 1rem; cursor: pointer; margin: 0 !important; display: inline-flex; align-items: center; gap: 0.35rem; } .theme-toggle:hover { border-color: #22d3ee; box-shadow: 0 0 12px rgba(34, 211, 238, 0.55); } .theme-toggle:hover { border-color: #22d3ee; box-shadow: 0 0 12px rgba(34, 211, 238, 0.55); } /* ========================= Layout Helpers ========================= */ .container { width: min(1120px, 100% - 2.5rem); margin: 0 auto; } .section { padding: 4.5rem 0; } .section-alt { padding: 4.5rem 0; background: linear-gradient( 135deg, rgba(10, 11, 30, 0.98), rgba(12, 14, 44, 0.98) ); box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.02); } .section-inner { display: flex; flex-direction: column; gap: 2rem; } .section-inner.two-col, .two-col { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr); gap: 2.5rem; } .section-inner.center { text-align: center; align-items: center; } .grid { display: grid; gap: 1.75rem; } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; } .section-title-center { text-align: center; margin: 0 0 2rem; } /* ========================= Header & Navigation ========================= */ .site-header { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(16px); background: linear-gradient( to right, rgba(5, 5, 20, 0.92), rgba(10, 10, 35, 0.9) ); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .header-inner { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0; gap: 1rem; } .logo { display: flex; align-items: center; gap: 0.75rem; } .logo-img { width: 44px; height: 44px; border-radius: 999px; } .logo-text { display: flex; flex-direction: column; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; } .logo-title { font-weight: 700; } .logo-subtitle { opacity: 0.75; } /* NAV LINKS */ .nav { display: flex; flex-wrap: nowrap; gap: 0.4rem; } /* Mobile nav toggle (hamburger) */ .nav-toggle { display: none; /* hidden on desktop */ border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.7); background: rgba(15, 23, 42, 0.9); color: #e5e7eb; font-size: 1.1rem; padding: 0.3rem 0.8rem; cursor: pointer; margin-left: 0.5rem; } .nav-toggle:hover { border-color: #22d3ee; box-shadow: 0 0 10px rgba(34, 211, 238, 0.5); } .nav a { position: relative; display: inline-block; padding: 0.45rem 0.6rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: #f5f5f5; opacity: 0.9; transition: color 0.2s ease, text-shadow 0.2s ease, opacity 0.2s ease; } .nav a:hover { opacity: 1; color: #ffffff; text-shadow: 0 0 6px rgba(0, 234, 255, 0.7), 0 0 14px rgba(0, 234, 255, 0.6); } .nav a.active-link { color: var(--accent-color, #ffd700); font-weight: 600; text-shadow: 0 0 8px rgba(255, 215, 0, 0.6); } /* Gold active nav in dark mode */ html.theme-dark .nav a.nav-active { color: #facc15; text-shadow: 0 0 6px rgba(250, 204, 21, 0.75), 0 0 14px rgba(251, 191, 36, 0.6); } /* Neon underline effect */ .nav a::after { content: ""; position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); width: 0; height: 2px; border-radius: 999px; background: linear-gradient(90deg, #00eaff, #ff00c8); box-shadow: 0 0 10px rgba(0, 234, 255, 0.7); opacity: 0; transition: width 0.22s ease, opacity 0.22s ease; } /* Active + hover underline */ .nav a:hover::after, .nav a.nav-active::after { width: 100%; opacity: 1; } /* Active link color */ .nav a.nav-active { color: #00eaff; text-shadow: 0 0 6px rgba(0, 234, 255, 0.7), 0 0 14px rgba(0, 234, 255, 0.5); opacity: 1; } /* ========================= Hero Sections ========================= */ .hero { padding: 4.5rem 0 3.5rem; } .hero-inner { display: flex; flex-direction: column; gap: 2.5rem; } .hero-center { align-items: center; text-align: center; } .hero-narrow { max-width: 640px; margin: 0 auto; } .hero h1 { font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1.05; margin: 0 0 1rem; color: #fcd34d; } .hero-subtitle { margin: 0 0 1.5rem; color: rgba(226, 232, 240, 0.9); font-size: 1rem; max-width: 36rem; } .eyebrow { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.75rem; color: #6ee7ff; margin-bottom: 0.75rem; } .hero-scripture { font-size: 0.9rem; color: rgba(209, 213, 219, 0.85); font-style: italic; } /* Home hero logo */ .home-logo-wrap { display: flex; justify-content: center; align-items: center; margin-bottom: 30px; } .home-logo { width: 250px; max-width: 28vw; height: auto; display: block; border-radius: 999px; box-shadow: 0 0 25px rgba(56, 189, 248, 0.55), 0 0 50px rgba(251, 191, 36, 0.45); } /* ========================= Buttons ========================= */ .hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 1.25rem; } .hero-actions-center { justify-content: center; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.65rem 1.4rem; border-radius: 999px; border: 1px solid transparent; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.16s ease-out; text-transform: uppercase; letter-spacing: 0.09em; } .btn.primary { background: radial-gradient(circle at 0 0, #22d3ee, #0ea5e9); box-shadow: 0 0 25px rgba(56, 189, 248, 0.6), 0 0 50px rgba(6, 182, 212, 0.35); color: #02131c; } /* Gold primary buttons in dark mode */ html.theme-dark .btn.primary { background: radial-gradient(circle at 0 0, #facc15, #f97316); box-shadow: 0 0 24px rgba(250, 204, 21, 0.6), 0 0 50px rgba(249, 115, 22, 0.45); color: #111827; /* dark text so the gold pops */ } .btn.primary:hover { transform: translateY(-1px); box-shadow: 0 0 35px rgba(56, 189, 248, 0.7), 0 0 70px rgba(6, 182, 212, 0.4); } .btn.outline { border-color: rgba(148, 163, 184, 0.8); background: transparent; color: #e5e7eb; } .btn.outline:hover { border-color: #f97316; box-shadow: 0 0 18px rgba(249, 115, 22, 0.45); } .btn.ghost { border-color: rgba(148, 163, 184, 0.3); background: rgba(15, 23, 42, 0.7); color: #e5e7eb; } .btn.ghost:hover { border-color: rgba(59, 130, 246, 0.7); } .btn.full-width { width: 100%; justify-content: center; } /* ========================= Cards & Content Blocks ========================= */ .label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(148, 163, 184, 0.9); margin-bottom: 0.35rem; } .section h2 { margin-top: 0; font-size: 1.75rem; } .card { background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.11), transparent 60%), radial-gradient(circle at 100% 100%, rgba(239, 68, 68, 0.12), transparent 60%), rgba(15, 23, 42, 0.9); border-radius: 1.2rem; padding: 1.5rem 1.6rem; border: 1px solid rgba(148, 163, 184, 0.3); box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.9), 0 16px 40px rgba(15, 23, 42, 0.95); } .card h3 { margin-top: 0.2rem; margin-bottom: 0.85rem; } .card-link { position: relative; overflow: hidden; cursor: pointer; } .card-link::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.12), transparent 50%); opacity: 0; transition: opacity 0.2s ease; } .card-link:hover::before { opacity: 1; } .card-link:hover { border-color: rgba(56, 189, 248, 0.7); } /* Music embeds */ .music-embeds { align-items: flex-start; } .embed-card { border-radius: 1.4rem; } .embed-wrap { margin-top: 0.75rem; border-radius: 1rem; overflow: hidden; } /* ========================= Lists ========================= */ .bullet-list { list-style: none; padding-left: 0; margin: 0; } .bullet-list li { position: relative; padding-left: 1.25rem; margin-bottom: 0.55rem; font-size: 0.97rem; } .bullet-list li::before { content: "•"; position: absolute; left: 0; color: #38bdf8; } .bullet-list.numbered { counter-reset: item; } .bullet-list.numbered li { padding-left: 1.6rem; } .bullet-list.numbered li::before { counter-increment: item; content: counter(item) "."; color: #f97316; } .small-text { font-size: 0.83rem; color: rgba(148, 163, 184, 0.95); } /* ========================= Founder ========================= */ .founder-hero { align-items: center; } .founder-photo-wrap { justify-self: center; } .founder-photo { width: 260px; height: 260px; object-fit: cover; border-radius: 1.8rem; border: 2px solid rgba(251, 191, 36, 0.8); box-shadow: 0 0 30px rgba(250, 204, 21, 0.45), 0 0 60px rgba(56, 189, 248, 0.3); } /* ========================= Contact Form + Links ========================= */ .contact-form { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1rem; } .form-field { display: flex; flex-direction: column; gap: 0.35rem; } .form-field label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(148, 163, 184, 0.95); } .form-field input, .form-field textarea { border-radius: 0.75rem; border: 1px solid rgba(148, 163, 184, 0.45); background: rgba(15, 23, 42, 0.95); padding: 0.6rem 0.75rem; font-size: 0.9rem; color: #e5e7eb; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; resize: vertical; } .form-field input::placeholder, .form-field textarea::placeholder { color: rgba(148, 163, 184, 0.7); } .form-field input:focus, .form-field textarea:focus { border-color: #22d3ee; box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.5), 0 0 18px rgba(34, 211, 238, 0.4); background: rgba(15, 23, 42, 0.98); } /* Contact links under form */ .contact-links { list-style: none; padding: 0; margin: 0.75rem 0 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; } .contact-links li { display: flex; align-items: center; gap: 0.35rem; } /* These are intentionally styled, overriding global link reset */ .contact-links a { color: #38bdf8; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .contact-links a:hover { color: #f97316; text-shadow: 0 0 6px rgba(249, 115, 22, 0.65), 0 0 14px rgba(248, 250, 252, 0.4); } /* ========================= Footer ========================= */ .site-footer { border-top: 1px solid rgba(148, 163, 184, 0.3); padding: 1.5rem 0 2rem; margin-top: 2rem; background: rgba(5, 7, 20, 0.96); } .footer-inner { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; font-size: 0.85rem; color: rgba(148, 163, 184, 0.95); } /* ========================= Partnership / Symphonic logos ========================= */ /* Home page partnership card */ .partner-card { display: flex; flex-direction: column; gap: 0.75rem; text-align: center; align-items: center; } /* Little pill / badge under the text */ .partner-logo-pill { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.5rem; padding: 0.45rem 0.9rem; border-radius: 999px; background: rgba(15, 23, 42, 0.9); border: 1px solid rgba(148, 163, 184, 0.45); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(226, 232, 240, 0.9); } /* Small logo (home page) */ .partner-logo-small { height: 50px; width: auto; display: block; filter: brightness(1.2); } /* Partnership page logo card */ .partner-logo-card { display: flex; flex-direction: column; align-items: center; text-align: center; } /* Big logo (partnership page) */ .partner-logo-main { max-width: 220px; width: 70%; height: auto; margin: 0 0 0.75rem; display: block; } /* ========================= Responsive ========================= */ @media (max-width: 900px) { .header-inner { flex-direction: row; align-items: center; justify-content: space-between; } /* keep logo on the left */ .logo { flex: 1; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; } /* FULL-SCREEN OVERLAY NAV ON MOBILE */ .nav { position: fixed; inset: 0; display: none; flex-direction: column; justify-content: center; align-items: center; padding: 2rem 1.5rem; /* Solid-ish dark base for clarity */ background: rgba(3, 6, 18, 0.92); /* Themed glow on top (base version, then overridden by theme-specific below) */ background-image: radial-gradient(circle at 0% 0%, rgba(30, 58, 138, 0.45), transparent 65%), radial-gradient(circle at 100% 100%, rgba(91, 33, 182, 0.45), transparent 65%); backdrop-filter: blur(12px); row-gap: 1.3rem; text-align: center; z-index: 999; /* above sticky header */ width: 100vw; height: 100vh; /* fade logic */ opacity: 0; pointer-events: none; transition: opacity 0.18s ease-out; transform: translateZ(0); } .nav.nav-open { display: flex; opacity: 1; pointer-events: auto; } /* Mobile Menu Links */ .nav a { font-weight: 700; /* bold text */ font-size: 1.1rem; letter-spacing: 0.12em; color: #ffffff; /* Strong shadow so words stay readable over any background */ text-shadow: 0 0 8px rgba(0, 0, 0, 0.9), 0 0 18px rgba(0, 0, 0, 0.85); padding: 0.4rem 0; } /* ================ THEME OVERRIDES ================ */ /* 🌌 DARK THEME MENU */ html.theme-dark .nav { background: rgba(2, 6, 23, 0.94); background-image: radial-gradient(circle at 0% 0%, rgba(30, 41, 59, 0.5), transparent 70%), radial-gradient(circle at 100% 100%, rgba(51, 65, 85, 0.45), transparent 70%); } html.theme-dark .nav a { color: #f1f5f9; text-shadow: 0 0 10px rgba(0, 0, 0, 0.9), 0 0 25px rgba(0, 0, 0, 0.85); } /* 🔮 NEON THEME MENU */ html.theme-neon .nav { background: rgba(3, 0, 20, 0.92); background-image: radial-gradient(circle at 0% 0%, rgba(53, 132, 255, 0.40), transparent 70%), radial-gradient(circle at 100% 100%, rgba(255, 0, 184, 0.35), transparent 70%); } html.theme-neon .nav a { color: #ffffff; text-shadow: 0 0 10px rgba(0, 0, 0, 1), 0 0 25px rgba(0, 0, 0, 0.9); } .section-inner.two-col, .two-col { grid-template-columns: minmax(0, 1fr); } .founder-photo { width: 220px; height: 220px; } } /* Extra layout tweaks */ .hero-text { max-width: 640px; margin: 0 auto; text-align: center; } #coaching { scroll-margin-top: 120px; } .hero-actions-center .btn { min-width: 200px; }