/* =================================================================== NEFDHA Modern Page Styles For all content pages (not homepage) Requires: design-system.css, components.css =================================================================== */ /* =================================================================== BACKGROUND PATTERNS =================================================================== */ /* Background classes are now generated dynamically via insert_background_css() in config.php. This allows for any number of backgrounds (not limited to 13). The function scans the backgrounds/pages directory and generates CSS for all bg1.webp, bg2.webp, bg3.webp, etc. files found. Usage: Call insert_background_css() in the section of your page. */ /* =================================================================== PAGE WRAPPER =================================================================== */ body { background: var(--color-gray-50); font-family: var(--font-body); color: var(--color-gray-900); line-height: var(--line-height-relaxed); min-height: 100vh; margin: 0; padding: 0; } .main_content { max-width: 1200px; margin: 0 auto; padding: var(--space-6); min-height: 100vh; } /* =================================================================== BACK LINK NAVIGATION =================================================================== */ .back_link { margin-bottom: var(--space-8); } .back_link a { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); background: var(--color-surface-default); color: var(--color-text-body); text-decoration: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); font-weight: var(--font-weight-medium); transition: all var(--transition-base) var(--ease-out); } .back_link a:hover { background: var(--color-action-primary); color: var(--color-text-on-primary); box-shadow: var(--shadow-md); transform: translateX(-4px); } .back_link a i { font-size: var(--font-size-lg); } /* =================================================================== PAGE HEADER - Base class with modifiers =================================================================== */ /* Base page header styles (shared by all variants) */ .page-header-base { border-radius: var(--radius-2xl); padding: var(--space-10); margin-bottom: var(--space-8); box-shadow: var(--shadow-lg); } /* Color modifiers */ .page-header-primary { background: rgba(var(--color-primary-green-rgb), 0.08); } .page-header-teal { background: rgba(var(--color-teal-rgb), 0.08); } .page-header-magenta { background: rgba(var(--color-magenta-rgb), 0.08); } .page-header-gray { background: var(--color-gray-100); } .page-header-success { background: rgba(16, 185, 129, 0.08); } .page-header-info { background: rgba(59, 130, 246, 0.08); } /* Shared heading styles using base class only */ .page-header-base h1 { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3rem); font-weight: var(--font-weight-bold); color: var(--color-text-heading); text-align: center; margin-bottom: var(--space-6); } .page-header-base h1.stroke { background: var(--color-action-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Icon inside heading */ .page-header-base h1 .icon { max-width: 80px; height: auto; display: block; margin: 0 auto var(--space-4); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1)); } /* =================================================================== CONTENT SECTIONS =================================================================== */ .page-content { background: var(--color-surface-default); border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--shadow-md); } .responsive_paragraph { font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); color: var(--color-text-body); margin-bottom: var(--space-6); } .responsive_paragraph.centered, .text-center { text-align: center; } /* =================================================================== BENEFIT CARDS / FEATURE CARDS =================================================================== */ .col_hover { background: var(--color-surface-subtle); border-radius: var(--radius-lg); border: 1px solid var(--color-border-default); transition: all var(--transition-base) var(--ease-out); display: flex; flex-direction: column; } .col_hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-border-brand); background: var(--color-surface-default); } .benefits { margin-bottom: var(--space-4); } h2.benefits { font-size: 3rem; color: var(--color-text-accent); text-align: center; margin-bottom: var(--space-3); } h3.benefits { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-text-heading); text-align: center; margin-bottom: var(--space-3); } p.benefits { font-size: var(--font-size-base); color: var(--color-text-body); line-height: var(--line-height-relaxed); text-align: center; } /* =================================================================== TESTIMONIALS =================================================================== */ .testimonial-card { background: var(--color-surface-default); border-left: 4px solid var(--color-border-brand); border-radius: var(--radius-lg); padding: var(--space-6); margin-bottom: var(--space-6); box-shadow: var(--shadow-sm); transition: all var(--transition-base) var(--ease-out); } .testimonial-card:hover { box-shadow: var(--shadow-lg); transform: translateX(4px); } .testimonial-text { font-size: var(--font-size-lg); font-style: italic; color: var(--color-text-body); line-height: var(--line-height-loose); margin-bottom: var(--space-4); } .testimonial-author { font-weight: var(--font-weight-semibold); color: var(--color-text-accent); font-size: var(--font-size-base); } .testimonial-title { color: var(--color-text-muted); font-size: var(--font-size-sm); } /* =================================================================== FAQ ACCORDION =================================================================== */ .faq-item { background: var(--color-white); border-radius: var(--radius-lg); margin-bottom: var(--space-4); box-shadow: var(--shadow-sm); overflow: hidden; transition: all var(--transition-base) var(--ease-out); } .faq-item:hover { box-shadow: var(--shadow-md); } .faq-question { width: 100%; background: var(--color-gray-50); border: none; padding: var(--space-5) var(--space-6); text-align: left; font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-gray-900); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: all var(--transition-base) var(--ease-out); } .faq-question:hover { background: var(--color-primary-green); color: var(--color-white); } .faq-question.active { background: var(--color-primary-green); color: var(--color-white); } .faq-question i { transition: transform var(--transition-base) var(--ease-out); } .faq-question.active i { transform: rotate(180deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--transition-slow) var(--ease-out); } .faq-answer.active { max-height: 1000px; } .faq-answer-content { padding: var(--space-6); color: var(--color-gray-700); line-height: var(--line-height-relaxed); } /* =================================================================== RESOURCE LISTS =================================================================== */ .resource-list { list-style: none; padding: 0; margin: var(--space-6) 0; } .resource-item { background: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-4); box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: var(--space-4); transition: all var(--transition-base) var(--ease-out); } .resource-item:hover { box-shadow: var(--shadow-md); transform: translateX(4px); } .resource-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: var(--color-primary-green); color: var(--color-white); border-radius: var(--radius-lg); font-size: var(--font-size-2xl); flex-shrink: 0; } .resource-content { flex: 1; } .resource-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-gray-900); margin-bottom: var(--space-2); } .resource-description { color: var(--color-gray-600); font-size: var(--font-size-base); } .resource-link { color: var(--color-primary-green); text-decoration: none; font-weight: var(--font-weight-medium); display: inline-flex; align-items: center; gap: var(--space-2); transition: gap var(--transition-fast) var(--ease-out); } .resource-link:hover { gap: var(--space-3); } /* =================================================================== FEATURED EDUCATORS / EVENTS =================================================================== */ .featured-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-6); margin-top: var(--space-8); } .featured-card { background: var(--color-white); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); transition: all var(--transition-base) var(--ease-out); } .featured-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); } .featured-image { width: 100%; height: 250px; object-fit: cover; } .featured-content { padding: var(--space-6); } .featured-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-gray-900); margin-bottom: var(--space-3); } .featured-description { color: var(--color-gray-600); line-height: var(--line-height-relaxed); margin-bottom: var(--space-4); } .featured-badge { display: inline-block; padding: var(--space-1) var(--space-3); background: rgba(var(--color-primary-green-rgb), 0.1); color: var(--color-primary-green); border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); } /* =================================================================== RESPONSIVE UTILITIES =================================================================== */ @media (max-width: 768px) { .main_content { padding: var(--space-4); } .page-header-primary { padding: var(--space-6); } .page-content { padding: var(--space-6); } .page-header-primary h1 { font-size: var(--font-size-3xl); } .featured-grid { grid-template-columns: 1fr; } } /* Extra small mobile (480px) */ @media (max-width: 480px) { .main_content { padding: var(--space-3); } .page-header-primary { padding: var(--space-4); } .page-content { padding: var(--space-4); } .page-header-primary h1 { font-size: var(--font-size-2xl); } /* Improve card touch spacing */ .card { margin-bottom: var(--space-4); } /* Better button layout on tiny screens */ .button-group { flex-direction: column; width: 100%; } .button-group .btn { width: 100%; justify-content: center; } /* CTA section stacking */ .cta-section { padding: var(--space-6); } .cta-section h2 { font-size: var(--font-size-xl); } } /* =================================================================== NEW PAGE HEADER WITH SOLID COLOR =================================================================== */ .page-header { background: var(--color-action-primary); border-radius: var(--radius-2xl); padding: var(--space-8); margin-bottom: var(--space-8); box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center; gap: var(--space-4); } .page-header-icon { font-size: 3.5rem; color: var(--color-white); filter: var(--drop-shadow-md); } .page-header-icon i { --fa-primary-color: #ffffff; --fa-secondary-color: rgba(255, 255, 255, 0.7); --fa-secondary-opacity: 1; } .page-header-title { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3rem); font-weight: var(--font-weight-bold); color: var(--color-white); margin: 0; } /* Educator Page Header - Cyan color for educator pages */ .educator-page-header { background: var(--color-action-secondary); } /* Agency Page Header - Purple/magenta color for agency pages */ .agency-page-header { background: var(--color-action-accent); } /* Educator Benefits - Cyan color scheme */ .educator-benefits-content .category-header { border-bottom-color: var(--color-action-secondary); } .educator-benefits-content .category-header i { color: var(--color-action-secondary); --fa-primary-color: var(--color-action-secondary); --fa-secondary-color: var(--color-action-primary); --fa-secondary-opacity: 0.6; } .educator-benefits-content .benefit-icon i { --fa-primary-color: #1B9D9B; --fa-secondary-color: #99CC33; --fa-secondary-opacity: 0.6; } /* Educator FAQ - Cyan color scheme */ .educator-faq-content .faq-question:hover { background: var(--color-action-secondary); color: var(--color-white); } .educator-faq-content .faq-question.active { background: var(--color-action-secondary); color: var(--color-white); } /* Educator Testimonials - Cyan color scheme */ .educator-testimonials-content .testimonial-variant-0 { border-left-color: var(--color-action-secondary); background: linear-gradient(135deg, rgba(var(--color-teal-rgb), 0.02) 0%, rgba(var(--color-primary-green-rgb), 0.02) 100% ); } .educator-testimonials-content .testimonial-variant-0:hover { border-left-color: var(--color-action-secondary); } .educator-testimonials-content .testimonial-variant-0 .testimonial-quote-icon { color: var(--color-action-secondary); } .educator-testimonials-content .testimonial-variant-0 .testimonial-quote-icon i { --fa-primary-color: var(--color-teal); --fa-secondary-color: var(--color-primary-green); } .educator-testimonials-content .testimonial-variant-0 .testimonial-meta i { color: var(--color-action-secondary); } .educator-testimonials-content .testimonial-variant-1 { border-right-color: var(--color-action-secondary); background: linear-gradient(135deg, rgba(var(--color-teal-rgb), 0.02) 0%, rgba(var(--color-primary-green-rgb), 0.02) 100% ); } .educator-testimonials-content .testimonial-variant-1:hover { border-right-color: var(--color-teal); } .educator-testimonials-content .testimonial-variant-1 .testimonial-quote-icon { color: var(--color-action-secondary); } .educator-testimonials-content .testimonial-variant-1 .testimonial-quote-icon i { --fa-primary-color: var(--color-teal); --fa-secondary-color: var(--color-primary-green); } .educator-testimonials-content .testimonial-variant-1 .testimonial-meta i { color: var(--color-action-secondary); } .educator-testimonials-content .testimonial-variant-2 { border-top-color: var(--color-action-secondary); background: linear-gradient(135deg, rgba(var(--color-teal-rgb), 0.03) 0%, rgba(var(--color-primary-green-rgb), 0.02) 100% ); } .educator-testimonials-content .testimonial-variant-2:hover { border-top-color: var(--color-teal); } .educator-testimonials-content .testimonial-variant-2 .testimonial-quote-icon { color: var(--color-action-secondary); } .educator-testimonials-content .testimonial-variant-2 .testimonial-quote-icon i { --fa-primary-color: var(--color-teal); --fa-secondary-color: var(--color-primary-green); } .educator-testimonials-content .testimonial-variant-2 .testimonial-meta i { color: var(--color-action-secondary); } /* =================================================================== NEW PAGE CONTENT WRAPPER =================================================================== */ .page-content { background: var(--color-white); border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--shadow-md); } .page-intro { font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); color: var(--color-gray-700); margin-bottom: var(--space-8); text-align: center; } /* =================================================================== BENEFITS GRID (MULTI-COLUMN LAYOUT) =================================================================== */ .benefit-category-section { margin-bottom: var(--space-12); } .benefit-category-section:last-of-type { margin-bottom: 0; } .category-header { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-8); padding-bottom: var(--space-4); border-bottom: 3px solid var(--color-action-primary); } .category-header i { font-size: var(--font-size-3xl); color: var(--color-action-primary); --fa-primary-color: var(--color-action-primary); --fa-secondary-color: var(--color-action-secondary); --fa-secondary-opacity: 0.6; } .category-header h2 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-text-heading); margin: 0; } .benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } @media (max-width: 992px) { .benefits-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .benefits-grid { grid-template-columns: 1fr; } } .benefit-card { background: var(--color-surface-subtle); border-radius: var(--radius-lg); border: 1px solid var(--color-border-default); padding: var(--space-6); transition: all var(--transition-base) var(--ease-out); display: flex; flex-direction: column; align-items: center; text-align: center; } .benefit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-border-brand); background: var(--color-surface-default); } .benefit-icon { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; font-size: 3rem; margin-bottom: var(--space-4); filter: var(--drop-shadow-md); } .benefit-icon i { --fa-primary-color: #99CC33; --fa-secondary-color: #1B9D9B; --fa-secondary-opacity: 0.6; } .benefit-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-text-heading); margin-bottom: var(--space-3); } .benefit-text { font-size: var(--font-size-base); color: var(--color-text-body); line-height: var(--line-height-relaxed); } /* =================================================================== ELEGANT TESTIMONIALS =================================================================== */ .testimonials-container { display: flex; flex-direction: column; gap: var(--space-8); } .testimonial-card-elegant { position: relative; background: var(--color-surface-default); border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--shadow-md); transition: all var(--transition-base) var(--ease-out); } .testimonial-card-elegant:hover { box-shadow: var(--shadow-xl); } /* Variant 0: Left border with primary color */ .testimonial-variant-0 { border-left: 5px solid var(--color-action-primary); background: linear-gradient(135deg, rgba(var(--color-primary-green-rgb), 0.02) 0%, rgba(var(--color-teal-rgb), 0.02) 100% ); } .testimonial-variant-0:hover { transform: translateX(8px); border-left-color: var(--color-action-secondary); } .testimonial-variant-0 .testimonial-quote-icon { color: var(--color-action-primary); } .testimonial-variant-0 .testimonial-quote-icon i { --fa-primary-color: var(--color-primary-green); --fa-secondary-color: var(--color-teal); } .testimonial-variant-0 .testimonial-meta { justify-content: flex-start; } .testimonial-variant-0 .testimonial-meta i { color: var(--color-action-secondary); } /* Variant 1: Right border with secondary color, meta on right */ .testimonial-variant-1 { border-right: 5px solid var(--color-action-secondary); background: linear-gradient(135deg, rgba(var(--color-teal-rgb), 0.02) 0%, rgba(var(--color-magenta-rgb), 0.02) 100% ); } .testimonial-variant-1:hover { transform: translateX(-8px); border-right-color: var(--color-action-accent); } .testimonial-variant-1 .testimonial-quote-icon { color: var(--color-action-secondary); } .testimonial-variant-1 .testimonial-quote-icon i { --fa-primary-color: var(--color-teal); --fa-secondary-color: var(--color-primary-green); } .testimonial-variant-1 .testimonial-meta { justify-content: flex-end; } .testimonial-variant-1 .testimonial-meta i { color: var(--color-action-primary); } /* Variant 2: Top border with accent color */ .testimonial-variant-2 { border-top: 5px solid var(--color-action-accent); background: linear-gradient(135deg, rgba(var(--color-magenta-rgb), 0.03) 0%, rgba(var(--color-primary-green-rgb), 0.02) 100% ); } .testimonial-variant-2:hover { transform: translateY(-4px); border-top-color: var(--color-action-secondary); } .testimonial-variant-2 .testimonial-quote-icon { color: var(--color-action-accent); } .testimonial-variant-2 .testimonial-quote-icon i { --fa-primary-color: var(--color-magenta); --fa-secondary-color: var(--color-teal); } .testimonial-variant-2 .testimonial-meta { justify-content: flex-start; } .testimonial-variant-2 .testimonial-meta i { color: var(--color-action-accent); } .testimonial-quote-icon { position: absolute; top: var(--space-6); left: var(--space-6); font-size: 3rem; opacity: 0.15; pointer-events: none; } .testimonial-quote-icon i { --fa-secondary-opacity: 0.5; } .testimonial-text-elegant { position: relative; font-size: var(--font-size-lg); font-style: italic; color: var(--color-text-body); line-height: var(--line-height-loose); margin: 0 0 var(--space-6) 0; padding-left: var(--space-10); text-align: left; quotes: """ """ "'" "'"; } .testimonial-text-elegant::before { content: open-quote; } .testimonial-text-elegant::after { content: close-quote; } .testimonial-meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-body-subtle); font-weight: var(--font-weight-semibold); padding-left: var(--space-10); } .testimonial-meta i { font-size: var(--font-size-base); } @media (max-width: 768px) { .testimonial-card-elegant { padding: var(--space-6); } .testimonial-text-elegant { padding-left: var(--space-6); font-size: var(--font-size-base); } .testimonial-meta { padding-left: var(--space-6); } .testimonial-quote-icon { font-size: 2rem; top: var(--space-4); left: var(--space-4); } } /* =================================================================== RESOURCES GRID (FOR PARENT RESOURCES PAGE) =================================================================== */ .resources-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-6); } .resource-card { background: var(--color-surface-default); border-radius: var(--radius-xl); border: 2px solid var(--color-border-subtle); padding: var(--space-8); transition: all var(--transition-base) var(--ease-out); box-shadow: var(--shadow-md); } .resource-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: var(--color-border-brand); } .resource-card .resource-link { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; } .resource-card .resource-icon { display: flex; align-items: center; justify-content: center; font-size: 5rem; margin-bottom: var(--space-5); } .resource-card .resource-icon i { --fa-primary-color: #99CC33; --fa-secondary-color: #1B9D9B; --fa-secondary-opacity: 0.6; transition: transform var(--transition-base) var(--ease-out); filter: var(--drop-shadow-md); } .resource-card:hover .resource-icon i { /* transform: scale(1.15); */ } .resource-card .resource-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--color-text-heading); margin-bottom: var(--space-3); text-align: center; } .resource-card .resource-description { font-size: var(--font-size-base); color: var(--color-text-body); line-height: var(--line-height-relaxed); text-align: center; margin-bottom: var(--space-5); } .resource-card .resource-cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); background: var(--color-action-primary); color: var(--color-text-on-primary); font-weight: var(--font-weight-semibold); font-size: var(--font-size-base); border-radius: var(--radius-lg); transition: all var(--transition-base) var(--ease-out); box-shadow: var(--shadow-sm); } .resource-card:hover .resource-cta { gap: var(--space-3); box-shadow: var(--shadow-md); background: var(--color-teal); } .resource-card .resource-cta i { --fa-primary-color: #ffffff; --fa-secondary-color: #ffffff; --fa-secondary-opacity: 0.7; } /* =================================================================== PARENT NEWSLETTERS PAGE =================================================================== */ .newsletters-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: start; } /* Current Newsletter - Left Side */ .current-newsletter-section { display: flex; flex-direction: column; } .current-newsletter-link { display: block; text-decoration: none; transition: all var(--transition-base) var(--ease-out); } .current-newsletter-wrapper { position: relative; overflow: hidden; border-radius: var(--radius-xl); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); transition: all var(--transition-base) var(--ease-out); } .current-newsletter-image { width: 100%; height: auto; display: block; transition: all var(--transition-base) var(--ease-out); } .current-newsletter-caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0)); color: var(--color-white); padding: var(--space-6) var(--space-4); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); text-align: center; opacity: 0; transition: all var(--transition-base) var(--ease-out); } .current-newsletter-link:hover .current-newsletter-wrapper { box-shadow: var(--shadow-xl); transform: translateY(-4px); } .current-newsletter-link:hover .current-newsletter-image { transform: scale(1.05); } .current-newsletter-link:hover .current-newsletter-caption { opacity: 1; } /* Newsletter Archive - Right Side */ .newsletter-archive-section { display: flex; flex-direction: column; } .newsletter-archive-list { position: relative; display: flex; flex-direction: column; gap: 0; /* No gap for tree design */ padding-left: var(--space-8); } /* Tree vertical line */ .newsletter-archive-list::before { content: ''; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: var(--color-border-subtle); } .newsletter-archive-link { position: relative; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); text-decoration: none; color: var(--color-text-body); transition: all var(--transition-base) var(--ease-out); } /* Tree horizontal branch */ .newsletter-archive-link::before { content: ''; position: absolute; left: -22px; top: 50%; width: 14px; height: 2px; background: var(--color-border-subtle); transition: background var(--transition-base) var(--ease-out); } .newsletter-archive-link:hover { color: var(--color-action-primary); transform: translateX(4px); } .newsletter-archive-link:hover::before { background: var(--color-action-primary); } .newsletter-archive-link i { font-size: var(--font-size-base); color: var(--color-text-muted); transition: all var(--transition-base) var(--ease-out); --fa-primary-color: var(--color-text-muted); --fa-secondary-color: var(--color-text-muted); --fa-secondary-opacity: 0.4; } .newsletter-archive-link:hover i { color: var(--color-action-primary); --fa-primary-color: var(--color-action-primary); --fa-secondary-color: var(--color-action-secondary); --fa-secondary-opacity: 0.6; transform: scale(1.1); } .newsletter-archive-link span { font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); transition: font-weight var(--transition-base) var(--ease-out); } .newsletter-archive-link:hover span { font-weight: var(--font-weight-semibold); } /* Responsive */ @media (max-width: 768px) { .newsletters-layout { grid-template-columns: 1fr; gap: var(--space-8); } } /* =================================================================== EDUCATOR REQUIREMENTS & TRAINING PAGE =================================================================== */ .educator-section { margin-top: var(--space-12); } .section-header { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); padding-bottom: var(--space-4); border-bottom: 3px solid var(--color-action-primary); } .section-icon { font-size: var(--font-size-3xl); color: var(--color-action-secondary); --fa-primary-color: var(--color-action-secondary); --fa-secondary-color: var(--color-action-primary); --fa-secondary-opacity: 0.6; } .section-title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-text-heading); margin: 0; } .section-intro { font-size: var(--font-size-lg); color: var(--color-text-body); margin-bottom: var(--space-6); line-height: 1.8; } /* Requirements Grid */ .requirements-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); margin-top: var(--space-6); } .requirement-item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); background: var(--color-surface-default); border-radius: var(--radius-lg); border-left: 4px solid var(--color-action-secondary); transition: all var(--transition-base) var(--ease-out); } .requirement-item:hover { transform: translateX(4px); box-shadow: var(--shadow-md); } .requirement-item i { font-size: var(--font-size-xl); color: var(--color-action-secondary); flex-shrink: 0; margin-top: 2px; --fa-primary-color: var(--color-action-secondary); --fa-secondary-color: var(--color-action-primary); --fa-secondary-opacity: 0.5; } .requirement-item p { margin: 0; color: var(--color-text-body); line-height: 1.6; font-size: var(--font-size-sm); } /* Timeline */ .timeline { position: relative; padding: var(--space-8) 0; margin: var(--space-8) 0; } .timeline::before { content: ''; position: absolute; left: 30px; top: 0; bottom: 0; width: 3px; background: linear-gradient(to bottom, var(--color-action-secondary), var(--color-action-primary)); } .timeline-item { position: relative; padding-left: var(--space-16); margin-bottom: var(--space-8); } .timeline-item:last-child { margin-bottom: 0; } .timeline-marker { position: absolute; left: 0; top: 0; width: 60px; height: 60px; background: linear-gradient(135deg, var(--color-action-secondary), var(--color-action-primary)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-white); box-shadow: var(--shadow-primary); z-index: 1; } .timeline-content { background: var(--color-surface-default); padding: var(--space-6); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); transition: all var(--transition-base) var(--ease-out); } .timeline-content:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .timeline-content h3 { color: var(--color-text-heading); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-3); } .timeline-content p { color: var(--color-text-body); margin: 0; line-height: 1.6; } /* Startup Costs Card */ .startup-costs-card { background: linear-gradient(135deg, rgba(var(--color-teal-rgb), 0.05), rgba(var(--color-primary-green-rgb), 0.05)); border: 2px solid var(--color-action-secondary); border-radius: var(--radius-xl); padding: var(--space-8); margin-top: var(--space-8); } .startup-costs-card h3 { color: var(--color-text-heading); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-3); } .startup-costs-card h3 i { color: var(--color-action-primary); } .startup-costs-card > p { color: var(--color-text-body); margin-bottom: var(--space-4); } .costs-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0; } .cost-item { background: var(--color-white); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-body); border: 1px solid var(--color-border-subtle); } .financial-support-note { display: flex; align-items: center; gap: var(--space-3); background: var(--color-white); padding: var(--space-4); border-radius: var(--radius-lg); margin-top: var(--space-6); border-left: 4px solid var(--color-action-secondary); } .financial-support-note i { font-size: var(--font-size-2xl); color: var(--color-action-secondary); --fa-primary-color: var(--color-action-secondary); --fa-secondary-color: var(--color-action-primary); } .financial-support-note p { margin: 0; color: var(--color-text-body); font-weight: var(--font-weight-medium); } /* Training Cards */ .training-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); margin-top: var(--space-6); } .training-card { background: var(--color-surface-default); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-md); transition: all var(--transition-base) var(--ease-out); border-top: 4px solid var(--color-action-primary); } .training-card:hover { box-shadow: var(--shadow-xl); transform: translateY(-4px); } .training-icon { width: 70px; height: 70px; background: linear-gradient(135deg, var(--color-action-secondary), var(--color-action-primary)); border-radius: var(--radius-2xl); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); } .training-icon i { font-size: var(--font-size-2xl); color: var(--color-white); --fa-primary-color: #ffffff; --fa-secondary-color: #ffffff; --fa-secondary-opacity: 0.7; } .training-card h3 { color: var(--color-text-heading); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-3); } .training-card p { color: var(--color-text-body); line-height: 1.7; margin: 0; } /* Certification Cards */ .certification-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-6); margin-top: var(--space-6); } .cert-card { background: var(--color-surface-default); border-radius: var(--radius-2xl); padding: var(--space-8); box-shadow: var(--shadow-lg); transition: all var(--transition-base) var(--ease-out); position: relative; overflow: hidden; } .cert-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--color-action-secondary), var(--color-action-primary)); } .cert-card:hover { box-shadow: var(--shadow-xl); transform: translateY(-6px); } .cert-badge { width: 80px; height: 80px; background: linear-gradient(135deg, var(--color-action-secondary), var(--color-action-primary)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-4); box-shadow: var(--shadow-primary); } .cert-badge i { font-size: var(--font-size-3xl); color: var(--color-white); --fa-primary-color: #ffffff; --fa-secondary-color: #ffffff; --fa-secondary-opacity: 0.7; } .cert-card h3 { color: var(--color-text-heading); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); text-align: center; margin-bottom: var(--space-2); } .cert-subtitle { text-align: center; color: var(--color-text-muted); font-size: var(--font-size-sm); font-style: italic; margin-bottom: var(--space-6); } .cert-requirements { background: rgba(var(--color-teal-rgb), 0.05); border-radius: var(--radius-lg); padding: var(--space-4); margin: var(--space-6) 0; } .cert-requirements p { margin: 0 0 var(--space-2) 0; color: var(--color-text-body); line-height: 1.6; font-size: var(--font-size-sm); } .cert-requirements p:last-child { margin-bottom: 0; } .cert-wage { background: linear-gradient(135deg, var(--color-action-secondary), var(--color-action-primary)); border-radius: var(--radius-xl); padding: var(--space-6); text-align: center; margin-top: var(--space-6); } .wage-amount { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); color: var(--color-white); margin-bottom: var(--space-2); } .wage-max { font-size: var(--font-size-base); color: var(--color-white); opacity: 0.95; } /* Contact Info Card */ .contact-info-card { background: linear-gradient(135deg, rgba(var(--color-teal-rgb), 0.1), rgba(var(--color-primary-green-rgb), 0.1)); border: 2px solid var(--color-action-secondary); border-radius: var(--radius-xl); padding: var(--space-6); margin-top: var(--space-8); display: flex; align-items: center; gap: var(--space-4); } .contact-info-card i { font-size: var(--font-size-3xl); color: var(--color-action-secondary); --fa-primary-color: var(--color-action-secondary); --fa-secondary-color: var(--color-action-primary); } .contact-info-card p { margin: 0; color: var(--color-text-body); line-height: 1.6; } .contact-info-card strong { color: var(--color-action-primary); font-weight: var(--font-weight-semibold); } /* CTA Section */ .cta-section { text-align: center; padding: var(--space-12) var(--space-6); margin-top: var(--space-12); background: linear-gradient(135deg, rgba(var(--color-primary-green-rgb), 0.08), rgba(var(--color-teal-rgb), 0.08)); border-radius: var(--radius-2xl); } .cta-section h2 { color: var(--color-text-heading); font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); margin-bottom: var(--space-3); } .cta-section p { color: var(--color-text-body); font-size: var(--font-size-lg); margin-bottom: var(--space-8); } /* Responsive */ @media (max-width: 768px) { .timeline::before { left: 20px; } .timeline-marker { width: 40px; height: 40px; font-size: var(--font-size-lg); } .timeline-item { padding-left: var(--space-12); } .requirements-grid, .certification-grid, .training-cards { grid-template-columns: 1fr; } } /* =================================================================== PRINT STYLES =================================================================== */ /* ============================================================================ Mini Footer - Lightweight footer for secondary pages ============================================================================ */ .mini-footer { margin-top: auto; padding: var(--space-6) var(--space-4); text-align: center; } .mini-footer-content { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-6); max-width: 900px; margin: 0 auto; box-shadow: var(--shadow-sm); } .mini-footer-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .mini-footer-links a { color: var(--color-gray-700); text-decoration: none; font-size: var(--text-sm); font-weight: 500; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); transition: color var(--transition-fast), background-color var(--transition-fast); } .mini-footer-links a:hover { color: var(--color-primary-green); background-color: rgba(153, 204, 51, 0.1); } .mini-footer-links a:focus-visible { outline: 2px solid var(--color-primary-green); outline-offset: 2px; } .mini-footer-divider { color: var(--color-gray-300); font-size: var(--text-sm); } .mini-footer-copyright { color: var(--color-gray-500); font-size: var(--text-xs); margin: 0; } /* Mobile adjustments */ @media (max-width: 768px) { .mini-footer-content { padding: var(--space-3) var(--space-4); } .mini-footer-links { gap: var(--space-1); } .mini-footer-links a { font-size: var(--text-xs); padding: var(--space-1); } .mini-footer-divider { display: none; } .mini-footer-links a::after { content: none; } } @media (max-width: 480px) { .mini-footer { padding: var(--space-4) var(--space-2); } .mini-footer-content { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); } .mini-footer-links { flex-direction: column; gap: var(--space-1); } } @media print { .mini-footer { display: none; } .back_link { display: none; } .main_content { max-width: 100%; padding: 0; } .page-header-primary, .page-content, .col_hover, .page-header, .page-content, .benefit-card, .resource-card { box-shadow: none; page-break-inside: avoid; } }