|
|
|
|
@@ -1,113 +1,354 @@
|
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
|
|
|
|
|
|
|
|
|
/* Apply Inter font family to the entire application */
|
|
|
|
|
* {
|
|
|
|
|
font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
|
|
|
/* CRITICAL: Apply Inter font to EVERY element */
|
|
|
|
|
html, body, * {
|
|
|
|
|
font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Ensure consistent font application */
|
|
|
|
|
/* Global styling */
|
|
|
|
|
html, body {
|
|
|
|
|
font-family: inherit;
|
|
|
|
|
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
background-color: #f9fafb;
|
|
|
|
|
color: #111827;
|
|
|
|
|
background-color: #f9fafb !important;
|
|
|
|
|
color: #111827 !important;
|
|
|
|
|
line-height: 1.6;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Basic reset and utility styles */
|
|
|
|
|
* {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
/* Logo sizing - CRITICAL FIX */
|
|
|
|
|
img[alt*="New Life Christian Church"] {
|
|
|
|
|
height: 2rem !important;
|
|
|
|
|
width: auto !important;
|
|
|
|
|
max-height: 2rem !important;
|
|
|
|
|
object-fit: contain;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Override Nuxt UI components */
|
|
|
|
|
.nui-card, .nui-button, .nui-input, .nui-select, .nui-textarea {
|
|
|
|
|
font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Header styling */
|
|
|
|
|
header {
|
|
|
|
|
background-color: white !important;
|
|
|
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
|
|
|
|
|
border-bottom: 1px solid #e5e7eb !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
header .container, header [class*="max-w"] {
|
|
|
|
|
padding: 1rem 1.5rem !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Main content styling */
|
|
|
|
|
main {
|
|
|
|
|
background-color: #f9fafb !important;
|
|
|
|
|
min-height: calc(100vh - 80px);
|
|
|
|
|
padding: 2rem 0 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
main .container, main [class*="max-w"] {
|
|
|
|
|
padding: 0 1rem !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Typography */
|
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
line-height: 1.25;
|
|
|
|
|
margin: 0;
|
|
|
|
|
font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
|
|
|
|
|
font-weight: 600 !important;
|
|
|
|
|
line-height: 1.25 !important;
|
|
|
|
|
margin: 0 !important;
|
|
|
|
|
color: #111827 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
button {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
border: none;
|
|
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input, textarea {
|
|
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Custom styling for better appearance */
|
|
|
|
|
.container {
|
|
|
|
|
max-width: 1200px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
padding: 0 1rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Card styling */
|
|
|
|
|
.card {
|
|
|
|
|
background: white;
|
|
|
|
|
border-radius: 0.5rem;
|
|
|
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
|
|
|
padding: 1.5rem;
|
|
|
|
|
p {
|
|
|
|
|
font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
|
|
|
|
|
margin: 0 !important;
|
|
|
|
|
color: #6b7280 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Button styling */
|
|
|
|
|
.btn {
|
|
|
|
|
display: inline-flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 0.5rem 1rem;
|
|
|
|
|
border-radius: 0.375rem;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
transition: all 0.2s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-primary {
|
|
|
|
|
background-color: #dc2626;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-primary:hover {
|
|
|
|
|
background-color: #b91c1c;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-outline {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
border: 1px solid #d1d5db;
|
|
|
|
|
color: #374151;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.btn-outline:hover {
|
|
|
|
|
background-color: #f3f4f6;
|
|
|
|
|
button, .nui-button {
|
|
|
|
|
font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
|
|
|
|
|
border-radius: 0.375rem !important;
|
|
|
|
|
font-weight: 500 !important;
|
|
|
|
|
cursor: pointer !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Form styling */
|
|
|
|
|
.form-group {
|
|
|
|
|
margin-bottom: 1rem;
|
|
|
|
|
input, textarea, select, .nui-input, .nui-textarea, .nui-select {
|
|
|
|
|
font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
|
|
|
|
|
border-radius: 0.375rem !important;
|
|
|
|
|
border: 1px solid #d1d5db !important;
|
|
|
|
|
padding: 0.5rem 0.75rem !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-label {
|
|
|
|
|
display: block;
|
|
|
|
|
margin-bottom: 0.5rem;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
color: #374151;
|
|
|
|
|
input:focus, textarea:focus, .nui-input:focus, .nui-textarea:focus {
|
|
|
|
|
border-color: #dc2626 !important;
|
|
|
|
|
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
|
|
|
|
|
outline: none !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-input {
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 0.5rem 0.75rem;
|
|
|
|
|
border: 1px solid #d1d5db;
|
|
|
|
|
border-radius: 0.375rem;
|
|
|
|
|
font-size: 0.875rem;
|
|
|
|
|
/* Loading and empty states */
|
|
|
|
|
.text-center {
|
|
|
|
|
text-align: center !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-input:focus {
|
|
|
|
|
border-color: #dc2626;
|
|
|
|
|
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
|
|
|
|
|
.py-12 {
|
|
|
|
|
padding: 3rem 0 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Custom font classes if needed */
|
|
|
|
|
.font-inter {
|
|
|
|
|
font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
|
|
|
|
|
/* Grid layout */
|
|
|
|
|
.grid {
|
|
|
|
|
display: grid !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.gap-6 {
|
|
|
|
|
gap: 1.5rem !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.md\:grid-cols-2 {
|
|
|
|
|
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lg\:grid-cols-3 {
|
|
|
|
|
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Responsive container */
|
|
|
|
|
.max-w-7xl {
|
|
|
|
|
max-width: 1280px !important;
|
|
|
|
|
margin: 0 auto !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.px-4 {
|
|
|
|
|
padding-left: 1rem !important;
|
|
|
|
|
padding-right: 1rem !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sm\:px-6 {
|
|
|
|
|
padding-left: 1.5rem !important;
|
|
|
|
|
padding-right: 1.5rem !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.lg\:px-8 {
|
|
|
|
|
padding-left: 2rem !important;
|
|
|
|
|
padding-right: 2rem !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Flexbox utilities */
|
|
|
|
|
.flex {
|
|
|
|
|
display: flex !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.justify-between {
|
|
|
|
|
justify-content: space-between !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.justify-center {
|
|
|
|
|
justify-content: center !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.items-center {
|
|
|
|
|
align-items: center !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.space-x-4 > * + * {
|
|
|
|
|
margin-left: 1rem !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Text sizing */
|
|
|
|
|
.text-2xl {
|
|
|
|
|
font-size: 1.5rem !important;
|
|
|
|
|
line-height: 2rem !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.text-lg {
|
|
|
|
|
font-size: 1.125rem !important;
|
|
|
|
|
line-height: 1.75rem !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.text-sm {
|
|
|
|
|
font-size: 0.875rem !important;
|
|
|
|
|
line-height: 1.25rem !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.text-gray-600 {
|
|
|
|
|
color: #4b5563 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.text-gray-900 {
|
|
|
|
|
color: #111827 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.text-gray-400 {
|
|
|
|
|
color: #9ca3af !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.text-gray-500 {
|
|
|
|
|
color: #6b7280 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.font-bold {
|
|
|
|
|
font-weight: 700 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.font-medium {
|
|
|
|
|
font-weight: 500 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.font-semibold {
|
|
|
|
|
font-weight: 600 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Margin and padding */
|
|
|
|
|
.mt-1 {
|
|
|
|
|
margin-top: 0.25rem !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mt-2 {
|
|
|
|
|
margin-top: 0.5rem !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mb-8 {
|
|
|
|
|
margin-bottom: 2rem !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.py-4 {
|
|
|
|
|
padding: 1rem 0 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.py-8 {
|
|
|
|
|
padding: 2rem 0 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Border radius */
|
|
|
|
|
.rounded-lg {
|
|
|
|
|
border-radius: 0.5rem !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Background colors */
|
|
|
|
|
.bg-white {
|
|
|
|
|
background-color: white !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bg-gray-50 {
|
|
|
|
|
background-color: #f9fafb !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bg-blue-50 {
|
|
|
|
|
background-color: #eff6ff !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bg-green-50 {
|
|
|
|
|
background-color: #f0fdf4 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bg-red-50 {
|
|
|
|
|
background-color: #fef2f2 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Border colors */
|
|
|
|
|
.border-blue-200 {
|
|
|
|
|
border-color: #bfdbfe !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.border-green-200 {
|
|
|
|
|
border-color: #bbf7d0 !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.border-red-200 {
|
|
|
|
|
border-color: #fecaca !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Text colors */
|
|
|
|
|
.text-blue-900 {
|
|
|
|
|
color: #1e3a8a !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.text-green-900 {
|
|
|
|
|
color: #14532d !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.text-red-800 {
|
|
|
|
|
color: #991b1b !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Display utilities */
|
|
|
|
|
.block {
|
|
|
|
|
display: block !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.inline-block {
|
|
|
|
|
display: inline-block !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Position utilities */
|
|
|
|
|
.relative {
|
|
|
|
|
position: relative !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.absolute {
|
|
|
|
|
position: absolute !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Width utilities */
|
|
|
|
|
.w-48 {
|
|
|
|
|
width: 12rem !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.w-full {
|
|
|
|
|
width: 100% !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Height utilities */
|
|
|
|
|
.h-8 {
|
|
|
|
|
height: 2rem !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.h-12 {
|
|
|
|
|
height: 3rem !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.w-8 {
|
|
|
|
|
width: 2rem !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.h-6 {
|
|
|
|
|
height: 1.5rem !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.w-6 {
|
|
|
|
|
width: 1.5rem !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Animation */
|
|
|
|
|
.animate-spin {
|
|
|
|
|
animation: spin 1s linear infinite !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes spin {
|
|
|
|
|
from {
|
|
|
|
|
transform: rotate(0deg);
|
|
|
|
|
}
|
|
|
|
|
to {
|
|
|
|
|
transform: rotate(360deg);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Icon styling */
|
|
|
|
|
.nui-icon {
|
|
|
|
|
display: inline-block !important;
|
|
|
|
|
vertical-align: middle !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Modal styling */
|
|
|
|
|
.nui-modal {
|
|
|
|
|
font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Force logo to be small */
|
|
|
|
|
img[src*="logo"], .logo-image {
|
|
|
|
|
height: 2rem !important;
|
|
|
|
|
width: auto !important;
|
|
|
|
|
max-height: 2rem !important;
|
|
|
|
|
object-fit: contain !important;
|
|
|
|
|
}
|
|
|
|
|
|
Ryderjj89