@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap'); /* ===== BASE STYLES ===== */ html, body { height: 100%; font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif; color: #333; background-color: #F5F5F5; margin: 0; padding: 0; } .content-wrapper { /* Add min-height to ensure it spans the content */ min-height: calc(100vh - 70px - 150px); /* Adjust 150px to match your footer height */ } /* ===== NAVIGATION ===== */ .navbar { background-color: #08755B; border-bottom: none; padding: 0.5rem 1rem; margin: 0; box-shadow: 0 2px 10px rgba(0,0,0,0.1); width: 100%; position: sticky; top: 0; z-index: 1000; } .nav-container { display: flex; justify-content: flex-start; align-items: center; width: 100%; max-width: 1200px; margin: 0 auto; gap: 1rem; } .nav-logo-title { display: flex; align-items: center; gap: 1rem; } .nav-logo img { height: 60px; width: auto; transition: transform 0.3s ease; } .nav-logo img:hover { transform: scale(1.05); } .nav-title { color: white; font-size: 1.5rem; font-weight: 600; margin: 0; white-space: nowrap; } .nav-menu { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; } .nav-menu a { color: white; text-decoration: none; font-size: 1.1rem; font-weight: 500; padding: 0.5rem 1rem; border-radius: 4px; transition: all 0.3s ease; position: relative; } .nav-menu a:hover { background-color: rgba(255, 255, 255, 0.2); transform: translateY(-2px); } .nav-menu a.active { background-color: rgba(255, 255, 255, 0.3); } .hamburger { display: none; flex-direction: column; cursor: pointer; padding: 0.5rem; } .bar { width: 25px; height: 3px; background-color: #FFF; margin: 3px 0; transition: 0.3s; border-radius: 2px; } /* Menu container */ .dropdown { position: relative; display: inline-block; } .dropbtn { background-color: #08755B; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #f1f1f1 } /* ===== HERO SECTION ===== */ .hero-banner { position: relative; width: 100%; background-size: cover; background-position: center; margin-bottom: 2rem; } .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(15, 45, 82, 0.8), rgba(8, 117, 91, 0.7)); } .hero-content { position: relative; z-index: 2; text-align: center; flex-direction: column; justify-content: center; min-height: 260px; } .hero-title { text-align: center; color: #f8da78; font-size: 2.1rem; padding-top: 2rem; max-width: 70%; margin: 0 auto; font-weight: 700; line-height: 1.2; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } .hero-subtitle { text-align: center; color: #f8da78; font-size: 1.4rem; padding-top: 1.5rem; max-width: 70%; margin: 0 auto; font-weight: 400; line-height: 1.6; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } .hero-cta { background: linear-gradient(135deg, #0F2D52 0%, #08755B 100%); margin: 3rem auto; max-width: 60%; border-radius: 12px; padding: 2.5rem 0; text-align: center; } /* ===== CONTENT SECTIONS ===== */ .content-section { margin-bottom: 3rem; padding: 4rem 1rem; max-width: 800px; margin: auto; color: #2d3748; } .section-title { text-align: center; color: #0a775b; font-size: 2rem; margin-bottom: 2rem; font-weight: 600; } .section-subtitle { text-align: center; color: #7f948f; font-size: 2.2rem; margin-bottom: 2rem; font-weight: 600; } /* SECTION CONTENT STYLES */ .section-content { text-align: left; max-width: 800px; margin: 0 auto; font-size: 1.1rem; line-height: 1.6; } .section-content p { text-align: left; margin-bottom: 1.5rem; color: #333; font-size: inherit; } .section-content ul { text-align: left; margin: 1.5rem 0; padding-left: 1.5rem; list-style: disc; } .section-content li { margin-bottom: 1rem; line-height: 1.5; text-align: left; background: none; padding: 0; border-left: none; box-shadow: none; } .section-content strong { color: #0F2D52; font-weight: 600; } /* ===== CONTACT PAGE SPECIFIC STYLES ===== */ .contact-section { padding: 4rem 1rem; max-width: 800px; margin: auto; color: #2d3748; } .contact-title { font-size: 2.5rem; font-weight: 700; color: #2c5282; text-align: center; margin-bottom: 2rem; } .form-container { background-color: white; padding: 2.5rem; border-radius: 12px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } /* Form input styles */ input, textarea { width: 100%; padding: 0.75rem 1rem; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 1.5rem; transition: all 0.2s ease-in-out; font-family: 'Inter', sans-serif; font-size: 1rem; } input:focus, textarea:focus { outline: none; border-color: #4299e1; box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); } .btn-submit { display: block; width: 100%; padding: 1rem; border-radius: 8px; background-color: #2b6cb0; color: white; font-weight: 600; text-align: center; transition: background-color 0.2s; border: none; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 1rem; } .btn-submit:hover { background-color: #2c5282; } .qr-code { text-align: center; margin-bottom: 2rem; } .qr-code h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; color: #2d3748; } .qr-code p { color: #718096; margin-bottom: 1.5rem; line-height: 1.6; } .qr-code img { margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } /* Form labels */ .form-label { display: block; color: #4a5568; font-weight: 500; margin-bottom: 0.5rem; font-family: 'Inter', sans-serif; } /* ===== CTA BUTTONS ===== */ .cta-button { display: inline-block; padding: 1rem 2rem; margin: 0 1rem; background-color: #08755B; color: white; text-decoration: none; border-radius: 5px; font-weight: 600; transition: all 0.3s ease; border: 2px solid #08755B; font-size: 1.1rem; } .cta-button.secondary { background-color: transparent; color: #08755B; border: 2px solid #08755B; } .cta-button:hover { background-color: #065a46; transform: translateY(-2px); } .cta-button.secondary:hover { background-color: #08755B; color: white; } /* CTA Section Styling */ .cta-content { max-width: 600px; margin: 0 auto; } .cta-title { color: white; font-size: 1.8rem; margin-bottom: 1rem; font-weight: 600; } .cta-subtitle { color: #f8da78; font-size: 1.2rem; margin-bottom: 2rem; line-height: 1.5; } .google-calendar-container { margin-top: 1.5rem; } /* Force Google button styling */ .gc-button { display: inline-block !important; padding: 1rem 2rem !important; background-color: #f8da78 !important; color: #0F2D52 !important; text-decoration: none !important; border-radius: 5px !important; font-weight: 600 !important; transition: all 0.3s ease !important; border: 2px solid #f8da78 !important; font-size: 1.1rem !important; font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif !important; min-width: 200px !important; } .gc-button:hover { background-color: #e6c966 !important; transform: translateY(-2px) !important; border-color: #e6c966 !important; } /* ===== FOOTER STYLES ===== */ .footer { background-color: #08755B; color: white; text-align: center; padding: 2rem 1rem; margin-top: auto; width: 100%; } .footer-content { max-width: 1200px; margin: 0 auto; } .footer p { margin: 0.5rem 0; font-size: 1rem; } .footer-links { margin-top: 1rem; } .footer-links a { color: #f8da78; text-decoration: none; margin: 0 1rem; transition: color 0.3s ease; } .footer-links a:hover { color: white; text-decoration: underline; } .footer-legal { margin-top: 0.5rem; font-size: 0.8rem; opacity: 0.7; line-height: 1.6; } .footer-legal p { margin: 0; } .footer-copyright { margin-top: 1.5rem; font-size: 0.9rem; opacity: 0.8; } /* ===== HERO BUTTONS ===== */ .hero-actions { padding-bottom: 2rem; display: flex; justify-content: center; gap: 1.25rem; flex-wrap: wrap; } .hero-banner .cta-button.secondary { color: white; border-color: white; } .hero-banner .cta-button.secondary:hover { background: rgba(255,255,255,0.15); } /* ===== WIDE CONTENT SECTIONS (for grids) ===== */ .content-wide { max-width: 1100px; margin: 0 auto; padding: 4rem 1rem; } /* ===== GRID ===== */ .grid { display: grid; gap: 2rem; } .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: 1fr 1fr 1fr; } /* ===== SECTION LEAD ===== */ .section-lead { text-align: center; max-width: 720px; margin: 0 auto 2.5rem; font-size: 1.1rem; line-height: 1.7; color: #4a5568; } /* ===== CARDS ===== */ .card { background: white; border-radius: 10px; padding: 2rem 1.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.06); border-top: 4px solid #08755B; transition: transform 0.25s ease, box-shadow 0.25s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); } .card-title { color: #0F2D52; font-size: 1.2rem; font-weight: 700; margin-bottom: 0.75rem; } .card-text { color: #4a5568; font-size: 0.95rem; line-height: 1.6; margin: 0; } /* ===== FEATURE BLOCKS ===== */ .feature-block { background: white; border-radius: 10px; padding: 2rem 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .feature-title { color: #08755B; font-size: 1.15rem; font-weight: 700; margin-bottom: 0.75rem; } .feature-text { color: #4a5568; font-size: 0.95rem; line-height: 1.6; margin: 0; } /* ===== TIER CARDS ===== */ .tier-card { background: white; border-radius: 10px; padding: 2rem 1.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.06); transition: transform 0.25s ease; } .tier-card:hover { transform: translateY(-4px); } .tier-card.highlight { border: 2px solid #08755B; box-shadow: 0 6px 20px rgba(8,117,91,0.15); } .tier-badge { display: inline-block; background: #e8f5f0; color: #08755B; font-size: 0.8rem; font-weight: 700; padding: 0.3rem 0.8rem; border-radius: 20px; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.5px; } .tier-card.highlight .tier-badge { background: #08755B; color: white; } .tier-title { color: #0F2D52; font-size: 1.1rem; font-weight: 700; margin-bottom: 0.75rem; } .tier-text { color: #4a5568; font-size: 0.95rem; line-height: 1.6; margin: 0; } /* ===== ALT SECTION BACKGROUND ===== */ .section-alt { background: #f0f4f8; } /* ===== MOBILE GRID OVERRIDES ===== */ @media screen and (max-width: 768px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } .hero-actions { flex-direction: column; align-items: center; } .hero-actions .cta-button { width: 100%; max-width: 320px; text-align: center; } .content-wide { padding: 2.5rem 1rem; } } /* ===== MODEL CARDS (Services page) ===== */ .model-card { background: white; border-radius: 10px; padding: 2rem 1.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.06); transition: transform 0.25s ease; } .model-card:hover { transform: translateY(-4px); } .model-card.highlight { border: 2px solid #08755B; box-shadow: 0 6px 20px rgba(8,117,91,0.15); } .model-icon { color: #08755B; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1rem; } .model-title { color: #0F2D52; font-size: 1.15rem; font-weight: 700; margin-bottom: 0.25rem; } .model-subtitle { color: #7f948f; font-size: 0.95rem; font-weight: 400; display: block; margin-top: 0.25rem; } .model-text { color: #4a5568; font-size: 0.95rem; line-height: 1.6; margin: 1rem 0; } .model-list { padding-left: 1.25rem; margin: 0; } .model-list li { color: #4a5568; font-size: 0.9rem; line-height: 1.6; margin-bottom: 0.5rem; } /* ===== PAGE HERO (no background image) ===== */ .page-hero { background: linear-gradient(135deg, #0F2D52 0%, #08755B 100%); padding: 4rem 2rem 3rem; text-align: center; } .page-hero .hero-title { padding-top: 0; font-size: 2.2rem; } .page-hero .hero-subtitle { padding-top: 1rem; font-size: 1.2rem; } /* ===== INSIGHTS FILTER BAR ===== */ .insights-filter { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; padding: 1.5rem 1rem 2rem; border-bottom: 1px solid #e2e8f0; } .filter-item { padding: 0.45rem 1rem; border-radius: 20px; font-size: 0.85rem; color: #4a5568; cursor: default; transition: background 0.2s; } .filter-item.active { background: #08755B; color: white; font-weight: 600; } /* ===== INSIGHT CARDS ===== */ .insight-card { background: white; border-radius: 10px; padding: 2rem 1.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.06); transition: transform 0.25s ease; } .insight-card:hover { transform: translateY(-4px); } .insight-card.featured { border: 2px solid #08755B; } .card-meta { color: #08755B; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.75rem; } .card-title { color: #0F2D52; font-size: 1.2rem; font-weight: 700; margin-bottom: 0.75rem; line-height: 1.35; } .card-title a { color: inherit; text-decoration: none; } .card-title a:hover { color: #08755B; } .card-excerpt { color: #4a5568; font-size: 0.95rem; line-height: 1.65; margin-bottom: 1rem; } .read-more { color: #08755B; font-weight: 600; font-size: 0.9rem; text-decoration: none; } .read-more:hover { text-decoration: underline; } /* ===== SUBSCRIBE SECTION ===== */ .insights-subscribe { background: #f0f4f8; text-align: center; padding: 4rem 2rem; margin-top: 3rem; } .insights-subscribe h3 { color: #0F2D52; font-size: 1.5rem; margin-bottom: 0.75rem; } .insights-subscribe p { color: #4a5568; font-size: 1rem; max-width: 500px; margin: 0 auto 1.5rem; } .subscribe-form { display: flex; justify-content: center; gap: 0.75rem; max-width: 440px; margin: 0 auto; } .subscribe-form input { flex: 1; margin-bottom: 0; padding: 0.65rem 1rem; border: 1px solid #cbd5e0; border-radius: 6px; font-family: 'Inter', sans-serif; font-size: 0.95rem; } .subscribe-form button { padding: 0.65rem 1.5rem; background: #08755B; color: white; border: none; border-radius: 6px; font-weight: 600; font-size: 0.95rem; cursor: pointer; white-space: nowrap; font-family: 'Inter', sans-serif; } .subscribe-form button:hover { background: #065a46; } @media screen and (max-width: 768px) { .subscribe-form { flex-direction: column; } } /* ===== ARTICLE PAGE ===== */ .article-header { max-width: 800px; margin: 3rem auto 1.5rem; padding: 0 1rem; } .back-link { color: #08755B; font-weight: 600; font-size: 0.9rem; text-decoration: none; } .back-link:hover { text-decoration: underline; } .article-header h1 { color: #0F2D52; font-size: 2rem; line-height: 1.3; margin: 1rem 0 0.5rem; font-weight: 700; } .article-meta { color: #7f948f; font-size: 0.85rem; } .article-body { max-width: 800px; margin: 0 auto 3rem; padding: 0 1rem; } .article-body .lead { font-size: 1.15rem; color: #0F2D52; font-weight: 500; line-height: 1.7; } .article-body h2 { color: #08755B; font-size: 1.4rem; margin: 2.5rem 0 0.75rem; } .article-body h3 { color: #0F2D52; font-size: 1.15rem; margin: 1.5rem 0 0.5rem; } .article-body p { color: #4a5568; font-size: 1.05rem; line-height: 1.75; margin-bottom: 1.25rem; } .article-body ul { padding-left: 1.5rem; margin-bottom: 1.25rem; } .article-body li { color: #4a5568; font-size: 1rem; line-height: 1.7; margin-bottom: 0.5rem; } .article-body code { background: #f0f4f8; padding: 0.15rem 0.4rem; border-radius: 4px; font-size: 0.9em; color: #08755B; } .article-footer-cta { background: linear-gradient(135deg, #0F2D52 0%, #08755B 100%); border-radius: 12px; padding: 2.5rem 2rem; text-align: center; margin-top: 3rem; } .article-footer-cta h3 { color: white; font-size: 1.4rem; margin-bottom: 0.75rem; } .article-footer-cta p { color: #f8da78; font-size: 1rem; margin-bottom: 1.5rem !important; } .article-footer-cta .cta-button { margin: 0 auto; } /* ===== ENTERPRISE LANDING PAGE ===== */ .enterprise-hero { background: linear-gradient(135deg, #1a0a2e 0%, #0F2D52 40%, #08755B 100%); padding: 4rem 2rem 3rem; text-align: center; } .enterprise-hero h1 { color: white; font-size: 2.2rem; max-width: 800px; margin: 0 auto 1rem; line-height: 1.3; } .hero-desc { color: #cbd5e0; font-size: 1.15rem; max-width: 700px; margin: 0 auto 2rem; line-height: 1.6; } .badge.red { background: #c53030; color: white; } /* ===== CRISIS SECTION ===== */ .crisis-section { max-width: 800px; margin: 3rem auto 2rem; padding: 0 1rem; } /* ===== PILLAR CARDS ===== */ .pillar-card { background: white; border-radius: 10px; padding: 2rem 1.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.06); text-align: center; transition: transform 0.25s ease; } .pillar-card:hover { transform: translateY(-4px); } .pillar-icon { font-size: 2rem; color: #08755B; margin-bottom: 0.75rem; font-weight: 700; } .pillar-card h3 { color: #0F2D52; font-size: 1.1rem; margin-bottom: 0.75rem; } .pillar-card p { color: #4a5568; font-size: 0.95rem; line-height: 1.6; margin: 0; } /* ===== TIMELINE ===== */ .timeline { max-width: 700px; margin: 2rem auto 0; } .step { border-left: 3px solid #08755B; padding: 0 0 2rem 1.5rem; margin-left: 0.5rem; position: relative; } .step:last-child { padding-bottom: 0; } .step::before { content: ''; position: absolute; left: -8px; top: 4px; width: 13px; height: 13px; background: #08755B; border-radius: 50%; } .step h4 { color: #0F2D52; font-size: 1.05rem; margin: 0 0 0.4rem; } .step p { color: #4a5568; font-size: 0.95rem; line-height: 1.6; margin: 0; } /* ===== ABOUT PAGE ===== */ .about-grid { align-items: start; gap: 3rem; } .bio-text { color: #2d3748; } .badge { display: inline-block; background: #e8f5f0; color: #08755B; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 0.3rem 0.8rem; border-radius: 20px; margin-bottom: 1rem; } .bio-body { font-size: 1.05rem; line-height: 1.7; margin-bottom: 1.25rem; color: #4a5568; } .profile-frame { text-align: center; } .profile-photo { width: 100%; max-width: 320px; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.12); } .frame-caption { color: #7f948f; font-size: 0.85rem; margin-top: 0.75rem; } /* ===== EVOLUTION PILLARS ===== */ .evolution-pillars { max-width: 1100px; margin: 3rem auto 2rem; padding: 2rem 1rem; } .evolution-card { background: white; border-radius: 10px; padding: 2rem 1.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.06); transition: transform 0.25s ease; } .evolution-card:hover { transform: translateY(-4px); } .evolution-card.highlight { border: 2px solid #08755B; box-shadow: 0 6px 20px rgba(8,117,91,0.15); } .evolution-card h3 { color: #0F2D52; font-size: 1.1rem; margin: 0.5rem 0 0.75rem; } .evolution-card p { color: #4a5568; font-size: 0.95rem; line-height: 1.6; margin: 0; } .era-date { display: inline-block; background: #f0f4f8; color: #4a5568; font-size: 0.8rem; font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 4px; } .evolution-card.highlight .era-date { background: #08755B; color: white; } /* ===== RESUME CTA ===== */ .resume-cta { background: linear-gradient(135deg, #0F2D52 0%, #08755B 100%); margin: 3rem auto; max-width: 60%; border-radius: 12px; padding: 2.5rem 2rem; text-align: center; } .resume-cta h2 { color: white; font-size: 1.8rem; margin-bottom: 1rem; } .resume-cta p { color: #f8da78; font-size: 1rem; max-width: 600px; margin: 0 auto 2rem; line-height: 1.6; } .cta-buttons { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; } @media screen and (max-width: 768px) { .about-grid { grid-template-columns: 1fr; gap: 1.5rem; } .profile-photo { max-width: 240px; } .resume-cta { max-width: 90%; padding: 2rem 1.25rem; } .cta-buttons { flex-direction: column; align-items: center; } }