/* ============================================================ The Men's Well - Complete Stylesheet React-to-HTML Conversion Theme toggling: add data-theme="dark" to for dark mode ============================================================ */ /* ========================================================== 1. CSS Custom Properties (Theme Variables) ========================================================== */ :root { /* Brand colors */ --color-primary: #ff6b4a; --color-secondary: #f5b84c; /* Backgrounds & surfaces */ --color-background: #FFFFFF; --color-surface: #F5F7FB; /* Text */ --color-text: #1F2937; --color-text-secondary: #4B5563; /* Accent & highlights */ --color-accent: #00c7a8; --color-highlight: #38bdf8; /* Gradients */ --color-gradient-start: #1F2937; --color-gradient-end: #0F172A; /* Neutrals */ --color-white: #FFFFFF; --color-black: #000000; --color-muted: rgba(31, 41, 55, 0.7); --color-lavender: #E0E7FF; --color-stone: #E2E8F0; /* Hero */ --color-hero-panel: #1e8bff; --color-hero-panel-text: #F1F5F9; --color-hero-overlay: linear-gradient(180deg, rgba(17, 25, 40, 0.08) 0%, rgba(17, 25, 40, 0.18) 90%); --color-hero-text: #0F172A; --color-hero-subtle: rgba(15, 23, 42, 0.7); --color-hero-outline: rgba(15, 23, 42, 0.2); /* Navigation */ --color-nav-background: #000000; --color-nav-border: #00c7a8; --color-nav-text: #F9FAFB; /* Cards */ --color-card-background: linear-gradient(145deg, rgba(14, 116, 144, 0.12), rgba(45, 212, 191, 0.08)); --color-card-border: #E0F2FE; --color-card-shadow: 0 18px 32px rgba(15, 23, 42, 0.08); /* Panels */ --color-panel-background: #F8FAFC; --color-panel-border: #E2E8F0; --color-panel-shadow: 0 12px 24px rgba(15, 23, 42, 0.06); /* Contact */ --color-contact-card-bg: #FFFFFF; --color-contact-card-border: #E2E8F0; /* Inputs */ --color-input-background: #FFFFFF; --color-input-text: #1F2937; /* Typography */ --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-heading: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; /* Breakpoints (for reference; used in media queries) */ --breakpoint-mobile: 768px; --breakpoint-tablet: 1024px; } /* ---------------------------------------------------------- Dark Theme Overrides ---------------------------------------------------------- */ [data-theme="dark"] { --color-background: #040205; --color-surface: rgba(17, 7, 13, 0.85); --color-text: #f5f5f7; --color-text-secondary: #d9d5e1; --color-accent: #00c7a8; --color-gradient-start: #0F172A; --color-gradient-end: #020617; --color-hero-panel-text: #ffe9a9; --color-muted: rgba(245, 245, 247, 0.65); --color-lavender: #bac2ff; --color-stone: #1F2937; --color-nav-background: rgba(10, 4, 8, 0.94); --color-hero-overlay: linear-gradient(180deg, rgba(4, 2, 5, 0.9) 0%, rgba(4, 2, 5, 0.98) 85%); --color-hero-text: #FFFFFF; --color-hero-subtle: rgba(255, 255, 255, 0.82); --color-hero-outline: rgba(255, 255, 255, 0.35); --color-card-background: linear-gradient(145deg, rgba(30, 139, 255, 0.25), rgba(0, 199, 168, 0.2)); --color-card-border: rgba(255, 255, 255, 0.12); --color-card-shadow: 0 22px 36px rgba(4, 2, 5, 0.28); --color-panel-background: rgba(255, 255, 255, 0.05); --color-panel-border: rgba(255, 255, 255, 0.08); --color-panel-shadow: 0 18px 30px rgba(4, 2, 5, 0.22); --color-contact-card-bg: rgba(255, 255, 255, 0.08); --color-contact-card-border: rgba(255, 255, 255, 0.12); --color-input-background: rgba(255, 255, 255, 0.1); --color-input-text: #F9FAFB; } /* ========================================================== 2. Global Reset & Base Styles ========================================================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-primary); background: var(--color-background); color: var(--color-text); line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .app { min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; display: flex; flex-direction: column; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; } a { text-decoration: none; color: inherit; } button { font-family: inherit; border: none; cursor: pointer; } img { max-width: 100%; height: auto; } /* ========================================================== 3. Navigation ========================================================== */ .sticky-wrapper { position: sticky; top: 0; z-index: 120; } .nav-header { background: var(--color-nav-background); color: var(--color-nav-text); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 0.75rem 2.5rem; border-bottom: 2px solid var(--color-nav-border); } .nav-container { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .brand-link { display: flex; align-items: center; gap: 1rem; color: var(--color-nav-text); text-decoration: none; flex-shrink: 0; } .logo-image { height: 98px; width: auto; object-fit: contain; } .wordmark { display: flex; flex-direction: column; line-height: 1.1; } .wordmark-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.6rem; letter-spacing: 0.08em; text-transform: uppercase; } .wordmark-subtitle { font-size: 0.85rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--color-highlight); } /* Nav links */ .nav-links { list-style: none; display: flex; gap: 1.75rem; align-items: center; } .nav-link { color: var(--color-nav-text); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.85rem; position: relative; padding-bottom: 0.25rem; transition: color 0.3s; background: none; border: none; padding-left: 0; padding-right: 0; cursor: pointer; text-decoration: none; display: inline-block; } .nav-link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--color-accent); transition: width 0.3s; } .nav-link:hover { color: var(--color-accent); } .nav-link:hover::after { width: 100%; } .nav-link.active::after { width: 100%; } /* Mobile menu button */ .mobile-menu-btn { display: none; background: none; color: var(--color-nav-text); font-size: 1.8rem; padding: 0.25rem; border: none; cursor: pointer; } /* ========================================================== 4. Sub-Navigation Bar ========================================================== */ .sub-nav-bar { background: var(--color-nav-background); display: flex; justify-content: center; gap: 1rem; padding: 0.5rem 1.5rem; border-bottom: 1px solid var(--color-nav-border); } .sub-nav-btn { background: var(--color-accent); color: #fff; font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 8px 24px; border-radius: 4px; text-decoration: none; transition: background 0.3s; display: inline-block; border: none; cursor: pointer; } .sub-nav-btn:hover { background: var(--color-highlight); } .sub-nav-btn--flash { animation: flash 1.5s ease-in-out infinite; } @keyframes flash { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* ========================================================== 5. Hero / Welcome Section ========================================================== */ #welcome { min-height: 90vh; display: flex; align-items: center; justify-content: center; position: relative; text-align: center; padding: 2rem; } .hero-bg-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center calc(50% - 20px); } /* Temporarily disabled for testing #welcome::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.3); z-index: 1; } */ .charity-badge { position: absolute; top: 20px; left: 20px; width: 156px; height: auto; z-index: 3; opacity: 0.95; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)); } @media (max-width: 768px) { .charity-badge { width: 104px; top: 15px; left: 15px; } } .donate-badge-link { position: absolute; top: 10px; right: 20px; z-index: 3; } .donate-badge { width: 156px; height: auto; opacity: 0.95; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)); transition: transform 0.2s ease, opacity 0.2s ease; } .donate-badge:hover { transform: scale(1.05); opacity: 1; } @media (max-width: 768px) { .donate-badge-link { top: 15px; right: 15px; } .donate-badge { width: 104px; } } .hero-content { position: relative; z-index: 2; max-width: 840px; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } .hero-tagline { text-transform: uppercase; letter-spacing: 0.2em; font-size: 1rem; color: var(--color-highlight); background: rgba(0, 0, 0, 0.7); display: inline-block; padding: 0.5rem 1.5rem; border-radius: 999px; } .hero-title { font-size: clamp(1.8rem, 4.9vw, 2.9rem); font-weight: 600; color: var(--color-hero-text); line-height: 1.25; letter-spacing: 0.01em; } .hero-subtitle { font-size: 1.3rem; font-weight: 700; color: #38bdf8; background: rgba(0, 0, 0, 0.7); display: inline-block; padding: 12px 18px; border-radius: 6px; line-height: 1.8; letter-spacing: 0.01em; } .hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; } .btn-primary { background: var(--color-accent); color: var(--color-white); padding: 1rem 2.5rem; border-radius: 999px; font-weight: 700; font-size: 1.1rem; transition: all 0.3s; border: none; cursor: pointer; display: inline-block; text-decoration: none; } .btn-primary:hover { background: var(--color-primary); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 199, 168, 0.4); } .btn-outline { background: var(--color-white); color: var(--color-text); border: 2px solid var(--color-white); padding: 1rem 2.5rem; border-radius: 999px; font-weight: 700; font-size: 1.1rem; transition: all 0.3s; cursor: pointer; text-decoration: none; display: inline-block; } .btn-outline:hover { background: var(--color-accent); color: #fff; border-color: transparent; } /* ========================================================== 6. About Section ========================================================== */ #about { min-height: 68vh; display: flex; align-items: center; justify-content: center; position: relative; background: url('/men-talking.jpg') center top/cover no-repeat; text-align: center; padding: 10rem 1.5rem 4rem; } #about::before { content: ''; position: absolute; inset: 0; background: rgba(4, 2, 5, 0.4); z-index: 0; } .about-content { position: relative; z-index: 1; max-width: 800px; color: #fff; } /* ========================================================== 7. Support Pathways / Offerings Section ========================================================== */ #offerings { padding: 5rem 2rem; background: var(--color-background); } .offerings-inner { max-width: 1100px; margin: 0 auto; } .offerings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .gradient-card { background: var(--color-card-background); border-radius: 24px; padding: 2.25rem; border: 1px solid var(--color-card-border); box-shadow: var(--color-card-shadow); transition: all 0.3s; } .gradient-card:hover { transform: translateY(-6px); } .pill { background: rgba(0, 199, 168, 0.15); color: var(--color-accent); padding: 0.35rem 1rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; display: inline-block; margin-bottom: 1rem; } /* ========================================================== 8. Meetings Section ========================================================== */ #meetings { padding: 5rem 2rem; background: linear-gradient(180deg, var(--color-gradient-start), var(--color-gradient-end)); } .meetings-inner { max-width: 1100px; margin: 0 auto; } .meetings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } .meeting-image { width: 100%; height: auto; display: block; } .meeting-details-panel { background: var(--color-lavender); border-radius: 16px; padding: 2rem; margin-top: 1.5rem; } .video-container { border-radius: 16px; overflow: hidden; margin-top: 1.5rem; } .video-container video { width: 100%; display: block; } .calendar-section { margin-top: 2rem; } .calendar-iframe { width: 100%; height: 600px; border: none; border-radius: 16px; } /* ========================================================== 9. Resources Section ========================================================== */ #resources { padding: 5rem 2rem; background: var(--color-background); } .resources-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; } .resource-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.25rem; } .resource-card { background: var(--color-card-background); border-radius: 16px; padding: 1.5rem; border: 1px solid var(--color-card-border); transition: all 0.3s; text-decoration: none; color: var(--color-text); } .resource-card:hover { transform: translateY(-4px); } .resource-card a { text-decoration: none; color: inherit; display: block; } /* ========================================================== 10. Videos Section (Home Page) ========================================================== */ #videos { padding: 5rem 2rem; background: var(--color-surface); } .videos-inner { max-width: 1100px; margin: 0 auto; } .video-panel { background: var(--color-panel-background); border-radius: 24px; padding: 2rem; border: 1px solid var(--color-panel-border); box-shadow: var(--color-panel-shadow); } .video-iframe-wrapper { position: relative; padding-bottom: 56.25%; border-radius: 16px; overflow: hidden; } .video-iframe-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .video-thumbnails { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-top: 2rem; } .video-thumb-card { background: var(--color-card-background); border-radius: 12px; overflow: hidden; border: 1px solid var(--color-card-border); transition: all 0.3s; } .video-thumb-card:hover { transform: translateY(-3px); } /* ========================================================== 11. Feeds Section ========================================================== */ #feeds { padding: 5rem 2rem; background: var(--color-background); } .feeds-inner { max-width: 1100px; margin: 0 auto; } .feeds-tabs { display: flex; background: var(--color-panel-background); border-radius: 12px; padding: 0.5rem; gap: 0.5rem; margin-bottom: 2rem; border: 1px solid var(--color-panel-border); } .feeds-tab { flex: 1; max-width: 200px; padding: 0.75rem 1.5rem; border-radius: 8px; font-weight: 600; font-size: 0.9rem; background: transparent; color: var(--color-text-secondary); border: none; cursor: pointer; transition: all 0.3s; } .feeds-tab.active { background: var(--color-accent); color: #fff; } .feeds-content { background: var(--color-panel-background); border-radius: 16px; padding: 2rem; min-height: 400px; border: 1px solid var(--color-panel-border); } .feeds-content-panel { display: none; } .feeds-content-panel.active { display: block; } .cta-card { text-align: center; padding: 3rem 2rem; background: var(--color-card-background); border-radius: 16px; } /* ========================================================== 12. Contact Section ========================================================== */ #contact { padding: 5rem 2rem; background: var(--color-surface); } .contact-inner { max-width: 1100px; margin: 0 auto; } .contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 3rem; } .contact-card { background: var(--color-contact-card-bg); border-radius: 16px; padding: 2rem; border: 1px solid var(--color-contact-card-border); text-align: center; transition: all 0.3s; } .contact-card:hover { transform: translateY(-3px); } .contact-form-panel { background: var(--color-panel-background); border-radius: 24px; padding: 2.5rem; border: 1px solid var(--color-panel-border); box-shadow: var(--color-panel-shadow); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--color-text); } .form-input, .form-textarea { width: 100%; padding: 0.9rem 1.2rem; border: 1px solid var(--color-card-border); border-radius: 12px; font-size: 1rem; background: var(--color-input-background); color: var(--color-input-text); font-family: var(--font-primary); transition: border-color 0.3s, box-shadow 0.3s; } .form-input:focus, .form-textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(0, 199, 168, 0.15); } .form-textarea { min-height: 150px; resize: vertical; } .thank-you-message { text-align: center; padding: 2rem; color: #10B981; font-weight: 700; } .maps-container { margin-top: 2rem; border-radius: 22px; overflow: hidden; } .maps-container iframe { width: 100%; height: 280px; border: none; } /* ========================================================== 13. Footer ========================================================== */ .footer { background: var(--color-panel-background); padding: 4rem 0 2rem; margin-top: auto; color: var(--color-text); } .footer-content { max-width: 1200px; margin: 0 auto; padding: 0 2rem; display: grid; grid-template-columns: 1fr 0.6fr 0.4fr; gap: 3rem; } /* Newsletter column */ .footer-newsletter { background: var(--color-contact-card-bg); border-radius: 24px; padding: 2.5rem 2rem; box-shadow: var(--color-panel-shadow); text-align: center; border: 1px solid var(--color-contact-card-border); } .footer-newsletter h3 { font-size: 2rem; margin-bottom: 1.25rem; font-family: var(--font-heading); } .footer-newsletter p { margin-bottom: 1.5rem; color: var(--color-text-secondary); } .footer-newsletter-form { display: flex; flex-direction: column; gap: 0.75rem; align-items: center; } .footer-newsletter-input { width: 100%; max-width: 400px; padding: 0.9rem 1.2rem; border: 1px solid var(--color-card-border); border-radius: 999px; font-size: 1rem; background: var(--color-input-background); color: var(--color-input-text); } .footer-newsletter-btn { background: var(--color-accent); color: #fff; padding: 0.9rem 1.8rem; border-radius: 999px; font-weight: 600; letter-spacing: 0.05em; border: none; cursor: pointer; transition: all 0.3s; } .footer-newsletter-btn:hover { background: var(--color-primary); transform: translateY(-2px); } /* Quick links column */ .footer-quick-links { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; } .footer-quick-links h3 { font-size: 1.4rem; text-transform: uppercase; letter-spacing: 0.12em; } .footer-links-list { display: flex; flex-direction: column; gap: 0.75rem; } .footer-link { background: none; border: none; padding: 0; text-align: left; color: var(--color-text); font-size: 1rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: color 0.3s; text-decoration: none; display: block; } .footer-link:hover { color: var(--color-accent); } /* Social icons */ .footer-social { display: flex; gap: 1.25rem; margin-top: -0.5rem; } .social-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--color-card-border); border-radius: 8px; color: #fff; font-weight: 600; transition: all 0.3s; text-decoration: none; font-size: 1.2rem; } .social-icon:hover { transform: translateY(-3px); } .social-icon--facebook { background: #1877F2; font-size: 1.4rem; font-weight: 900; } .social-icon--facebook:hover { box-shadow: 0 6px 16px rgba(24, 119, 242, 0.4); } .social-icon--instagram { background: #E4405F; } .social-icon--instagram:hover { box-shadow: 0 6px 16px rgba(228, 64, 95, 0.4); } .social-icon--youtube { background: #FF0000; } .social-icon--youtube:hover { box-shadow: 0 6px 16px rgba(255, 0, 0, 0.4); } /* Logo column */ .footer-logo { display: flex; align-items: center; justify-content: center; } .footer-logo img { max-width: 420px; height: auto; transition: all 0.3s; } .footer-logo img:hover { transform: scale(1.05); } [data-theme="dark"] .footer-logo img { filter: brightness(0.9); } /* Copyright */ .copyright { text-align: center; margin-top: 3rem; font-size: 0.9rem; color: var(--color-text-secondary); } /* ========================================================== 14. Sub-Page Shared Styles ========================================================== */ .page-wrapper { display: flex; flex-direction: column; background: var(--color-background); color: var(--color-text); min-height: 100vh; padding-top: 6rem; } .section-sub { padding: 4rem 1.5rem; background: var(--color-background); } .section-inner { max-width: 1100px; margin: 0 auto; display: grid; gap: 3rem; } .back-button { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--color-accent); color: #fff; padding: 0.75rem 1.5rem; border-radius: 8px; text-decoration: none; font-weight: 600; transition: all 0.3s; margin-bottom: 2rem; align-self: flex-start; } .back-button:hover { background: var(--color-primary); transform: translateY(-2px); } .section-header { max-width: 820px; display: flex; flex-direction: column; gap: 0.75rem; text-align: center; margin: 0 auto; } .eyebrow { text-transform: uppercase; letter-spacing: 0.3em; font-size: 1rem; font-weight: 700; color: var(--color-highlight); } .section-title { font-size: clamp(1.8rem, 3vw, 2.5rem); color: var(--color-text); margin-bottom: 1rem; } .section-copy { font-size: 1.1rem; line-height: 1.7; color: var(--color-text-secondary); } /* ========================================================== 15. Newsletter Page ========================================================== */ .newsletter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 2rem; } .newsletter-card { background: var(--color-card-background); border-radius: 16px; padding: 2rem; border: 1px solid var(--color-card-border); box-shadow: var(--color-card-shadow); transition: all 0.3s; display: flex; flex-direction: column; gap: 1rem; } .newsletter-card:hover { transform: translateY(-4px); } .newsletter-header { display: flex; align-items: flex-start; gap: 1rem; } .newsletter-icon { width: 60px; height: 60px; background: linear-gradient(135deg, #10B981, #047857); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; flex-shrink: 0; } .newsletter-info { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; } .newsletter-title { font-size: 1.3rem; margin: 0; line-height: 1.3; } .newsletter-meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.9rem; color: var(--color-text-secondary); } .newsletter-description { color: var(--color-text-secondary); line-height: 1.6; margin: 0; } .newsletter-actions { display: flex; gap: 0.75rem; margin-top: auto; padding-top: 1rem; } /* Status badges */ .status-badge { display: inline-block; padding: 0.3rem 0.8rem; border-radius: 12px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .status-badge--published { background: #D1FAE5; color: #065F46; } .status-badge--draft { background: #FEF3C7; color: #92400E; } /* Action buttons */ .action-btn { padding: 0.6rem 1.2rem; border-radius: 8px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.3s; flex: 1; border: none; text-align: center; } .action-btn--primary { background: var(--color-accent); color: #fff; } .action-btn--primary:hover { background: var(--color-primary); transform: translateY(-1px); } .action-btn--secondary { background: transparent; color: var(--color-accent); border: 1px solid var(--color-accent); } .action-btn--secondary:hover { background: var(--color-accent); color: #fff; } .action-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .empty-state { text-align: center; padding: 4rem 2rem; color: var(--color-text-secondary); } /* ========================================================== 16. Educational Materials / Wisdom Files Page ========================================================== */ .bulk-actions { display: flex; gap: 1rem; align-items: center; background: var(--color-panel-background); padding: 1rem 1.5rem; border-radius: 12px; border: 1px solid var(--color-panel-border); flex-wrap: wrap; } .bulk-btn { background: var(--color-accent); color: #fff; padding: 0.6rem 1.2rem; border-radius: 8px; font-weight: 600; font-size: 0.9rem; border: none; cursor: pointer; transition: all 0.3s; } .bulk-btn:hover { background: var(--color-primary); } .bulk-btn--outline { background: transparent; color: var(--color-accent); border: 1px solid var(--color-accent); } .bulk-btn--outline:hover { background: var(--color-accent); color: #fff; } .materials-list { display: flex; flex-direction: column; gap: 0.75rem; } .material-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 1rem; align-items: center; background: var(--color-card-background); border-radius: 12px; padding: 1rem 1.5rem; border: 1px solid var(--color-card-border); transition: all 0.3s; } .material-row:hover { transform: translateX(4px); } .material-checkbox { width: 18px; height: 18px; accent-color: var(--color-accent); cursor: pointer; } .material-title { font-weight: 600; color: var(--color-text); } .material-date { font-size: 0.9rem; color: var(--color-text-secondary); } .selected-count { font-size: 0.9rem; color: var(--color-text-secondary); margin-left: auto; } /* ========================================================== 17. Video Library Page ========================================================== */ .filter-section { display: flex; gap: 1rem; background: var(--color-panel-background); padding: 1rem 1.5rem; border-radius: 12px; border: 1px solid var(--color-panel-border); flex-wrap: wrap; margin-bottom: 2rem; } .filter-select { padding: 0.6rem 1rem; border: 1px solid var(--color-card-border); border-radius: 8px; background: var(--color-input-background); color: var(--color-input-text); font-size: 0.9rem; } .video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 2rem; } .video-card { background: var(--color-card-background); border-radius: 16px; overflow: hidden; border: 1px solid var(--color-card-border); box-shadow: var(--color-card-shadow); transition: all 0.3s; } .video-card:hover { transform: translateY(-4px); } .video-card-thumbnail { position: relative; padding-bottom: 56.25%; background: #000; } .video-card-thumbnail iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .video-card-body { padding: 1.5rem; } .video-card-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; } .video-card-desc { font-size: 0.9rem; color: var(--color-text-secondary); line-height: 1.5; } .category-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; } .load-more-btn { display: block; margin: 2rem auto 0; background: var(--color-accent); color: #fff; padding: 0.75rem 2rem; border-radius: 999px; font-weight: 600; border: none; cursor: pointer; transition: all 0.3s; } .load-more-btn:hover { background: var(--color-primary); } /* ========================================================== 18. News & Events Page ========================================================== */ .filter-tabs { display: flex; justify-content: center; gap: 0.5rem; background: var(--color-panel-background); padding: 0.5rem; border-radius: 12px; border: 1px solid var(--color-panel-border); margin-bottom: 2rem; } .filter-tab { flex: 0 1 auto; padding: 0.75rem 1.5rem; border-radius: 8px; font-weight: 600; font-size: 0.9rem; background: transparent; color: var(--color-text-secondary); border: none; cursor: pointer; transition: all 0.3s; } .filter-tab.active { background: var(--color-accent); color: #fff; } .news-events-grid { display: grid; gap: 2rem; } .news-event-card { background: var(--color-card-background); border-radius: 16px; padding: 2rem; border: 1px solid var(--color-card-border); box-shadow: var(--color-card-shadow); transition: all 0.3s; } .news-event-card:hover { transform: translateY(-3px); } .news-event-card--featured { border-left: 4px solid var(--color-accent); } .event-details { background: rgba(147, 51, 234, 0.08); border-radius: 8px; padding: 1rem; margin-top: 1rem; } .type-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; } .type-badge--event { background: rgba(147, 51, 234, 0.15); color: #9333EA; } .type-badge--news { background: rgba(0, 199, 168, 0.15); color: var(--color-accent); } .featured-label { font-size: 0.8rem; color: var(--color-accent); font-weight: 600; } /* ========================================================== 19. Settings Page ========================================================== */ .settings-section { padding: 4rem 2rem; min-height: 70vh; } .settings-inner { max-width: 800px; margin: 0 auto; } .settings-card { background: var(--color-panel-background); border-radius: 24px; padding: 2.5rem; border: 1px solid var(--color-panel-border); box-shadow: var(--color-panel-shadow); } .settings-row { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 0; border-bottom: 1px solid var(--color-panel-border); } .toggle-switch { position: relative; width: 60px; height: 30px; background: var(--color-stone); border-radius: 999px; cursor: pointer; transition: background 0.3s; } .toggle-switch::before { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; background: #fff; border-radius: 50%; transition: transform 0.3s; } .toggle-switch.active { background: var(--color-accent); } .toggle-switch.active::before { transform: translateX(30px); } .theme-previews { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem; } .preview-card { border-radius: 16px; padding: 2rem; text-align: center; border: 2px solid transparent; transition: all 0.3s; cursor: pointer; } .preview-card--light { background: linear-gradient(135deg, #f0f9ff, #e0f2fe); color: #1F2937; } .preview-card--dark { background: linear-gradient(135deg, #1e293b, #0f172a); color: #f5f5f7; } .preview-card.active { border-color: var(--color-accent); } .coming-soon-section { margin-top: 3rem; } .feature-list { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; } .feature-item { background: var(--color-panel-background); padding: 1rem 1.5rem; border-radius: 12px; border: 1px solid var(--color-panel-border); color: var(--color-text-secondary); } /* ========================================================== 20. Loading & Error States ========================================================== */ .loading-state { text-align: center; padding: 3rem; color: var(--color-text-secondary); } .error-state { background: #fee2e2; color: #991b1b; padding: 1.5rem; border-radius: 12px; margin-bottom: 2rem; text-align: center; } .retry-btn { background: #10B981; color: #fff; border: none; padding: 0.75rem 1.5rem; border-radius: 8px; margin-top: 1rem; cursor: pointer; } /* ========================================================== 21. Responsive Breakpoints ========================================================== */ /* Tablet: max-width 1024px */ @media (max-width: 1024px) { .offerings-grid { grid-template-columns: 1fr; } .footer-content { grid-template-columns: 1fr; gap: 2.5rem; } .footer-quick-links { align-items: center; text-align: center; } .footer-logo { order: -1; } .theme-previews { grid-template-columns: 1fr; } } /* Mobile: max-width 768px */ @media (max-width: 768px) { /* Navigation */ .nav-header { padding: 0.75rem 1.5rem; } .logo-image { height: 60px; } .wordmark-title { font-size: 1.2rem; } .wordmark-subtitle { display: none; } .mobile-menu-btn { display: block; } .nav-links { position: absolute; top: 100%; left: 0; right: 0; padding: 1.25rem 1.5rem 2rem; background: var(--color-nav-background); border-bottom: 2px solid var(--color-nav-border); flex-direction: column; align-items: flex-start; gap: 1.25rem; display: none; } .nav-links.open { display: flex; } /* Meetings grid */ .meetings-grid { grid-template-columns: 1fr; } /* Resources grid */ .resources-inner { grid-template-columns: 1fr; } .resource-grid { grid-template-columns: 1fr 1fr; } /* Contact form */ .form-grid { grid-template-columns: 1fr; } /* Newsletter grid */ .newsletter-grid { grid-template-columns: 1fr; gap: 1.5rem; } /* Video grid */ .video-grid { grid-template-columns: 1fr; } }