/* ========================================================================== MyChurch.Africa: Custom Styles Brand: Primary #0D9F6E · Dark #222222 · Background #FFFFFF · Border #EAEAEA Dark mode: class-based (.dark on ), driven by CSS custom properties. ========================================================================== */ :root { /* RGB triplets (space-separated) so Tailwind's opacity modifiers, e.g. text-ink/60, work correctly against these tokens. */ --color-primary: 13 159 110; /* #0D9F6E */ --color-primary-dark: 11 139 96; /* #0B8B60 */ --color-ink: 34 34 34; /* #222222, foreground text */ --color-bg: 255 255 255; /* #FFFFFF, page background */ --color-surface: 255 255 255; /* #FFFFFF, card background */ --color-surface-alt: 250 250 250; /* #FAFAFA, alternating sections */ --color-border: 234 234 234; /* #EAEAEA */ --color-tint: 232 247 241; /* #E8F7F1, soft brand tint */ --color-tint-strong: 209 239 227; /* #D1EFE3 */ } .dark { --color-primary: 27 191 141; /* brightened for contrast on dark */ --color-primary-dark: 21 168 122; --color-ink: 229 231 233; /* near-white foreground text */ --color-bg: 14 16 17; /* near-black page background */ --color-surface: 23 26 28; /* card background */ --color-surface-alt: 18 20 22; /* alternating sections */ --color-border: 47 51 54; --color-tint: 21 43 38; /* dark, subtle brand tint */ --color-tint-strong: 24 56 48; } html { scroll-behavior: smooth; } body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; transition: background-color 0.25s ease, color 0.25s ease; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---------- Navbar blur on scroll ---------- */ #navbar { background: transparent; } #navbar.scrolled { background: rgb(var(--color-bg) / 0.75); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgb(var(--color-border)); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04); } .mobile-link { display: block; } /* ---------- Theme toggle ---------- */ #themeToggle, #themeToggleMobile { color: rgb(var(--color-ink)); } /* ---------- Hero grid background ---------- */ .hero-grid { background-image: linear-gradient(to right, rgb(var(--color-border) / 0.6) 1px, transparent 1px), linear-gradient(to bottom, rgb(var(--color-border) / 0.6) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 40%, transparent 100%); mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 40%, transparent 100%); } /* ---------- Rounded corners standard ---------- */ .rounded-xl2 { border-radius: 12px; } /* ---------- Dashboard mockup ---------- */ .dash-mock { border-radius: 20px; } .dash-card { animation: dashPulse 4s ease-in-out infinite; } @keyframes dashPulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } /* ---------- Eyebrow label ---------- */ .eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--color-primary)); } /* ---------- Feature icon badge ---------- */ .feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 12px; background: rgb(var(--color-tint)); } /* ---------- Logo marks (social proof placeholders) ---------- */ .logo-mark { text-align: center; font-weight: 700; font-size: 0.85rem; color: rgb(var(--color-ink) / 0.4); letter-spacing: 0.01em; white-space: nowrap; } /* ---------- Badges ---------- */ .badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; font-weight: 600; color: rgb(var(--color-ink)); background: rgb(var(--color-surface)); border: 1px solid rgb(var(--color-border)); padding: 0.5rem 0.9rem; border-radius: 999px; } /* ---------- Grid feature cards ---------- */ .grid-card { background: rgb(var(--color-surface)); border: 1px solid rgb(var(--color-border)); border-radius: 16px; padding: 2rem 1.5rem; text-align: center; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease; } .grid-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgb(var(--color-primary) / 0.14); border-color: rgb(var(--color-primary) / 0.3); } /* ---------- Why cards ---------- */ .why-card { background: rgb(var(--color-surface)); border: 1px solid rgb(var(--color-border)); border-radius: 16px; padding: 2.25rem; transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease; } .why-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgb(var(--color-primary) / 0.14); } /* ---------- Testimonial cards (retained for future use) ---------- */ .testimonial-card { background: rgb(var(--color-surface)); border: 1px solid rgb(var(--color-border)); border-radius: 16px; padding: 2rem; transition: transform 0.25s ease, box-shadow 0.25s ease; } .testimonial-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgb(0 0 0 / 0.12); } .avatar-lg { width: 2.75rem; height: 2.75rem; border-radius: 999px; background: rgb(var(--color-tint)); color: rgb(var(--color-primary)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; flex-shrink: 0; } /* ---------- Dashboard showcase tabs ---------- */ .tab-btn { padding: 1rem 1.25rem; font-size: 0.875rem; font-weight: 600; color: rgb(var(--color-ink) / 0.45); white-space: nowrap; border-bottom: 2px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } .tab-btn:hover { color: rgb(var(--color-ink)); } .tab-btn.active { color: rgb(var(--color-primary)); border-bottom-color: rgb(var(--color-primary)); } .tab-panel { display: none; animation: fadeInPanel 0.35s ease; } .tab-panel.active { display: block; } @keyframes fadeInPanel { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .showcase-card { background: rgb(var(--color-surface)); border: 1px solid rgb(var(--color-border)); border-radius: 12px; padding: 1.5rem; } .member-row { display: flex; align-items: center; gap: 0.75rem; background: rgb(var(--color-bg)); border: 1px solid rgb(var(--color-border)); border-radius: 10px; padding: 0.65rem 0.9rem; } .avatar { width: 2.25rem; height: 2.25rem; border-radius: 999px; background: rgb(var(--color-tint)); color: rgb(var(--color-primary)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.7rem; flex-shrink: 0; } .tag { font-size: 0.7rem; font-weight: 700; color: rgb(var(--color-primary)); background: rgb(var(--color-tint)); padding: 0.25rem 0.6rem; border-radius: 999px; } .tag-muted { color: rgb(var(--color-ink) / 0.45); background: rgb(var(--color-border)); } .bar-row { display: grid; grid-template-columns: 110px 1fr 70px; align-items: center; gap: 0.75rem; font-size: 0.8rem; color: rgb(var(--color-ink)); } .bar { height: 8px; background: rgb(var(--color-border)); border-radius: 999px; overflow: hidden; } .bar-fill { height: 100%; background: rgb(var(--color-primary)); border-radius: 999px; transition: width 1s ease; } /* ---------- Social icons (footer) ---------- */ .social-icon { width: 2.25rem; height: 2.25rem; border-radius: 10px; border: 1px solid rgb(var(--color-border)); display: flex; align-items: center; justify-content: center; color: rgb(var(--color-ink)); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .social-icon:hover { background: rgb(var(--color-primary)); border-color: rgb(var(--color-primary)); color: #fff; } /* ---------- FAQ accordion ---------- */ .faq-item { background: rgb(var(--color-surface)); border: 1px solid rgb(var(--color-border)); border-radius: 12px; overflow: hidden; } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; font-weight: 600; font-size: 0.95rem; text-align: left; color: rgb(var(--color-ink)); } .faq-icon { color: rgb(var(--color-primary)); transition: transform 0.25s ease; } .faq-question[aria-expanded="true"] .faq-icon { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; color: rgb(var(--color-ink) / 0.6); font-size: 0.9rem; line-height: 1.6; } .faq-answer p { padding: 0 1.5rem 1.25rem; } .faq-item.open .faq-answer { max-height: 300px; } /* ---------- Form ---------- */ .form-label { display: block; font-size: 0.8rem; font-weight: 600; color: rgb(var(--color-ink)); margin-bottom: 0.4rem; } .form-input { width: 100%; border: 1px solid rgb(var(--color-border)); border-radius: 10px; padding: 0.75rem 1rem; font-size: 0.9rem; color: rgb(var(--color-ink)); background: rgb(var(--color-bg)); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .form-input:focus { outline: none; border-color: rgb(var(--color-primary)); box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.15); } .form-input.invalid { border-color: #E24C4C; } .form-error { min-height: 1rem; font-size: 0.75rem; color: #E24C4C; margin-top: 0.35rem; display: none; } .dark .form-error { color: #FF7A7A; } .form-error.visible { display: block; } /* ---------- Button ripple effect ---------- */ .btn-ripple { isolation: isolate; } .ripple { position: absolute; border-radius: 999px; transform: scale(0); animation: rippleAnim 0.6s ease-out; background: rgba(255, 255, 255, 0.5); pointer-events: none; } @keyframes rippleAnim { to { transform: scale(3); opacity: 0; } } /* ---------- Success modal ---------- */ #successModal.flex { display: flex; } /* ---------- Scrollbar (subtle, premium) ---------- */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #D8D8D8; border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: #C4C4C4; } .dark ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); } .dark ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25); } /* ---------- Focus visibility (a11y) ---------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid rgb(var(--color-primary)); outline-offset: 2px; }