/* styles.css | 2026-0111 v1.9 */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary-blue: #043D92; --primary-blue-dark: #032A66; --primary-blue-light: #0052CC; --white: #ffffff; --light-gray: #f8f9fa; --medium-gray: #e9ecef; --dark-gray: #495057; --text-dark: #212529; --text-light: #6c757d; --border-radius: 8px; --transition: all 0.3s ease; } html { scroll-behavior: smooth; scroll-padding-top: 80px; /* keep anchor targets (e.g. #contact) clear of the sticky header */ } @media (max-width: 768px) { html { scroll-padding-top: 64px; } /* navbar is shorter on mobile */ } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; color: var(--text-dark); background-color: var(--white); } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } a { color: var(--primary-blue); text-decoration: none; transition: var(--transition); } a:hover { color: var(--primary-blue-dark); } hr.section-divider { border: none; height: 1px; background: var(--medium-gray); margin: 60px 0; } /* The shared header/footer are injected into these wrappers (SSI, or include.js fallback). display:contents removes the wrapper's box so the sticky .navbar's containing block becomes ; without this the wrapper confines sticky and the header never actually sticks. */ #header-placeholder { display: contents; } .navbar { background-color: var(--white); border-bottom: 1px solid var(--medium-gray); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .navbar .container { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; } .nav-brand a { text-decoration: none; display: flex; align-items: center; } /* Navbar logo */ .nav-logo { width: 40px; height: 40px; object-fit: contain; margin-right: 8px; vertical-align: middle; } .brand-text { font-size: 26px; font-weight: 600; color: var(--primary-blue); letter-spacing: -0.5px; } /* Mobile navbar adjustments */ @media (max-width: 768px) { .nav-logo { width: 28px; height: 28px; } .brand-text { font-size: 18px; } } .nav-menu { display: flex; list-style: none; gap: 32px; align-items: center; } .nav-menu a { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dark); transition: var(--transition); border-bottom: 2px solid transparent; padding-bottom: 4px; } .nav-menu a:hover, .nav-menu a.active { color: var(--primary-blue); border-bottom-color: var(--primary-blue); } @media (max-width: 768px) { .nav-menu { gap: 16px; font-size: 12px; } } .hero { background: linear-gradient(135deg, rgba(4, 61, 146, 0.95) 0%, rgba(4, 61, 146, 0.85) 100%); color: var(--white); padding: 120px 20px; text-align: center; min-height: 600px; display: flex; align-items: center; justify-content: center; } .hero-content { max-width: 800px; } .hero h1 { font-size: 56px; font-weight: 700; margin-bottom: 16px; letter-spacing: -1px; line-height: 1.1; } .hero-subtitle { font-size: 28px; font-weight: 300; margin-bottom: 24px; letter-spacing: -0.5px; opacity: 0.95; } .hero-description { font-size: 18px; margin-bottom: 32px; line-height: 1.7; opacity: 0.9; max-width: 700px; margin-left: auto; margin-right: auto; } .hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .page-hero { background: linear-gradient(135deg, rgba(4, 61, 146, 0.95) 0%, rgba(4, 61, 146, 0.85) 100%); color: var(--white); padding: 80px 20px; text-align: center; } .page-hero h1 { font-size: 44px; font-weight: 700; margin-bottom: 16px; letter-spacing: -1px; } .page-hero p { font-size: 18px; opacity: 0.9; } @media (max-width: 768px) { .hero { padding: 80px 20px; min-height: auto; } .hero h1 { font-size: 36px; } .hero-subtitle { font-size: 20px; } .hero-description { font-size: 16px; } .page-hero h1 { font-size: 32px; } } .btn { display: inline-block; padding: 14px 32px; border-radius: var(--border-radius); font-weight: 600; font-size: 15px; text-decoration: none; transition: var(--transition); cursor: pointer; border: none; text-align: center; letter-spacing: 0.5px; } .btn-primary { background-color: var(--primary-blue); color: var(--white); } .btn-primary:hover { background-color: var(--primary-blue-dark); color: var(--white); transform: translateY(-2px); box-shadow: 0 8px 16px rgba(4, 61, 146, 0.25); } .btn-secondary { background-color: transparent; color: var(--white); border: 2px solid var(--white); } .btn-secondary:hover { background-color: var(--white); color: var(--primary-blue); transform: translateY(-2px); } .btn-large { padding: 16px 40px; font-size: 16px; } .section { padding: 80px 20px; } .section h2 { font-size: 36px; font-weight: 700; margin-bottom: 24px; color: var(--text-dark); text-align: center; } .section h3 { font-size: 24px; font-weight: 700; margin-bottom: 16px; color: var(--text-dark); } .section h4 { font-size: 18px; font-weight: 700; margin-bottom: 12px; color: var(--text-dark); } .section-intro { font-size: 18px; color: var(--text-light); text-align: center; max-width: 700px; margin: 0 auto 24px !important; /* or even 20px / 16px */ line-height: 1.7; } .section p { font-size: 15px; line-height: 1.7; color: var(--text-dark); margin-bottom: 16px; } @media (max-width: 768px) { .section { padding: 60px 20px; } .section h2 { font-size: 28px; } } .who-is-this { background-color: var(--light-gray); } .who-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; margin-bottom: 32px; } .who-card { background-color: var(--white); padding: 32px; border-radius: var(--border-radius); border-left: 4px solid var(--primary-blue); transition: var(--transition); } .who-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } .who-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 12px; color: var(--primary-blue); } .who-card p { font-size: 15px; line-height: 1.6; color: var(--text-light); } .who-closing { text-align: center; font-size: 16px; color: var(--text-dark); margin-top: 32px; } .problem-transformation { background-color: var(--white); } .two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; max-width: 1000px; margin: 0 auto; } .column h3 { color: var(--primary-blue); margin-bottom: 24px; } .problem-list, .solution-list { list-style: none; } .problem-list li, .solution-list li { font-size: 15px; line-height: 1.8; color: var(--text-dark); margin-bottom: 16px; padding-left: 24px; position: relative; } .problem-list li:before { content: "•"; position: absolute; left: 0; color: var(--primary-blue); font-weight: bold; font-size: 20px; } .solution-list li:before { content: "✓"; position: absolute; left: 0; color: var(--primary-blue); font-weight: bold; font-size: 16px; } @media (max-width: 768px) { .two-column { grid-template-columns: 1fr; gap: 40px; } } /* UPDATED spacing + 2×2 layout */ .program-section { background-color: var(--white); padding: 80px 20px; } .program-section h2 { margin-bottom: 12px; } .program-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; /* was 32px */ margin-bottom: 28px; /* was 40px */ } /* Orchestration cards text alignment */ .program-card { background-color: var(--light-gray); padding: 18px 22px; border-radius: var(--border-radius); text-align: left; transition: var(--transition); } .program-card:hover { background-color: var(--white); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); transform: translateY(-4px); } .card-number { font-size: 34px; font-weight: 700; color: var(--primary-blue); margin-bottom: 8px; } .program-card h4 { color: var(--text-dark); margin-bottom: 10px; } .program-card p { font-size: 14px; color: var(--text-light); max-width: 420px; margin: 0 auto; } .program-card ul { list-style: disc; padding-left: 22px; margin: 4px 0 0 0; } .program-card li { font-size: 14px; color: var(--text-light); margin-bottom: 4px; } .program-card .card-number, .program-card h4 { text-align: center; } .program-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; /* was 24px if you want it tighter */ margin: 20px 0 20px 0; /* was 28px 0 32px 0 */ } .program-details p { background-color: var(--light-gray); padding: 16px 14px; /* was 20px 16px */ border-radius: var(--border-radius); margin: 0; font-size: 14px; line-height: 1.6; } .program-details strong { display: block; color: var(--primary-blue); font-weight: 700; margin-bottom: 8px; } .program-cta { text-align: center; margin-top: 20px; /* was 32px */ } /* Mobile overrides for Orchestration Intensive */ @media (max-width: 768px) { .program-overview { grid-template-columns: 1fr; gap: 16px; } .program-card { padding: 16px 18px; } .program-details { grid-template-columns: 1fr; gap: 16px; } } .testimonials-section { background-color: var(--light-gray); padding: 56px 0; } .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; max-width: 960px; margin: 0 auto; } .testimonial { background-color: var(--white); padding: 24px; border-radius: var(--border-radius); border-left: 3px solid var(--primary-blue); transition: var(--transition); } .testimonial:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } .quote { font-size: 15px; font-style: italic; color: var(--text-dark); margin-bottom: 12px; line-height: 1.7; } .quote-author { font-size: 13px; color: var(--text-light); font-weight: 600; } .cta-section { background-color: var(--white); } .cta-box { background: linear-gradient(135deg, rgba(4, 61, 146, 0.05) 0%, rgba(4, 61, 146, 0.02) 100%); padding: 60px; border-radius: var(--border-radius); border: 1px solid var(--medium-gray); text-align: center; max-width: 700px; margin: 0 auto; } .cta-box h2 { margin-bottom: 16px; } .cta-box p { font-size: 16px; margin-bottom: 32px; color: var(--text-dark); } .cta-note { font-size: 13px; color: var(--text-light); margin-top: 16px; } .content-section { background-color: var(--white); } .content-list { list-style: none; max-width: 700px; margin: 0 auto; } .content-list li { font-size: 15px; line-height: 1.8; color: var(--text-dark); margin-bottom: 16px; padding-left: 24px; position: relative; } .content-list li:before { content: "•"; position: absolute; left: 0; color: var(--primary-blue); font-weight: bold; } .content-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 32px; max-width: 1000px; margin: 30px auto; } .step { background-color: var(--light-gray); padding: 28px; border-radius: var(--border-radius); } .step h4 { color: var(--primary-blue); margin-bottom: 12px; } .step p { font-size: 14px; color: var(--text-light); } .footer { background-color: var(--text-dark); color: var(--white); padding: 60px 20px 20px; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; max-width: 1000px; margin: 0 auto 40px; } .footer-section h4 { margin-bottom: 12px; } .footer-section ul { list-style: none; } .footer-section ul li { margin-bottom: 8px; } .footer-section a { color: var(--white); opacity: 0.8; } .footer-section a:hover { opacity: 1; } .footer-bottom { text-align: center; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 13px; opacity: 0.7; } /* ============================================ NAVIGATION - BURGER MENU ============================================ */ /* Base burger button (hidden on desktop) */ .burger { display: none; font-size: 24px; background: none; border: none; cursor: pointer; color: #212529; /* matches var(--text-dark) in your old CSS */ } /* Mobile layout */ @media (max-width: 768px) { .navbar .container { justify-content: space-between; } .nav-menu { display: none; flex-direction: column; position: absolute; top: 60px; right: 20px; background-color: #ffffff; padding: 16px; border-radius: 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.08); gap: 12px; z-index: 200; } .nav-menu.show { display: flex; } .burger { display: block; } } /* ============================================ PROFILE IMAGE – CLEAN VERSION ============================================ */ /* Shared avatar size + shape */ img.hero-photo, img.about-photo { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; } /* HERO: text + avatar layout – refined */ .hero-layout { display: flex; align-items: flex-start; /* aligns avatar with title */ justify-content: center; /* centers the pair as a group */ gap: 2.5rem; max-width: 900px; margin: 0 auto; text-align: left; } .hero-content { flex: 1; } .hero-photo-wrapper { flex-shrink: 0; display: flex; align-items: flex-start; /* top-align avatar with heading */ justify-content: center; } /* ABOUT: photo + text layout */ /* ABOUT / WHY VALENTIN – text structure only */ .about-section { background-color: var(--light-gray); } .about-content { max-width: 700px; margin: 0 auto; } .about-content p { font-size: 15px; line-height: 1.8; color: var(--text-dark); margin-bottom: 20px; } .about-layout { display: flex; align-items: flex-start; gap: 1.25rem; margin-top: 1.5rem; } .about-photo-wrapper { flex-shrink: 0; display: flex; align-items: flex-start; justify-content: center; } .about-section .about-intro { margin-top: 1.5rem; margin-bottom: 1.5rem; } .about-section .about-block { margin-bottom: 1.25rem; } .about-section .about-block:last-child { margin-bottom: 0; } .about-section .about-label { font-size: 14px; font-weight: 600; margin: 0 0 4px 0; color: var(--text-dark); } .about-section .about-block p { margin: 0; } /* Mobile stacking */ @media (max-width: 768px) { .hero-layout, .about-layout { flex-direction: column; align-items: center; text-align: center; } .hero-content { text-align: left; } .about-content { text-align: left; } /* Smaller avatars on phones */ img.hero-photo { width: 160px; height: 160px; } img.about-photo { width: 90px; height: 90px; } } /* Shared defaults for both avatars (desktop/base) */ img.hero-photo, img.about-photo { border-radius: 50%; object-fit: cover; max-width: none; } /* Desktop hero avatar size */ img.hero-photo { width: 270px; height: 270px; } /* Desktop about avatar size */ img.about-photo { width: 120px; height: 120px; } .hero-microcopy { font-size: 0.9rem; line-height: 1.4; color: #ffffff; margin-top: 0.75rem; text-align: center; /* or left */ opacity: 0.85; font-style: italic; /* makes the text cursive */ } .who-intro-box { max-width: 600px; margin: 1.25rem auto 3rem; /* ↑ added top margin (1.25rem) */ text-align: center; } .who-intro-box p { margin-top: 0; /* reset default p top margin */ margin-bottom: 0; /* reset default p bottom margin */ } .who-intro-question { font-style: italic; margin-top: 0.5rem; /* controls gap between the two lines */ } /* Hide ABOUT photo on tablet+desktop, keep hero photo */ @media (min-width: 769px) { .about-section .about-photo-wrapper { display: none; } .about-section .about-layout { justify-content: center; /* center text when photo is hidden */ } } .problem-transformation .problem-list { list-style: none; padding-left: 0; } .problem-transformation .problem-list li { position: relative; padding-left: 1.4rem; } .problem-transformation .problem-list li::before { content: "–"; position: absolute; left: 0; top: 0.15rem; color: #0056a4; font-size: 0.9rem; line-height: 1; } /* Social media icons in footer */ .social-links { display: flex; gap: 12px; margin-top: 12px; } .social-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 4px; color: #ffffff; opacity: 0.8; transition: opacity 0.2s ease; font-weight: 700; font-size: 20px; /* Changed from 12px to 14px */ text-decoration: none; } .social-icon:hover { opacity: 1; } .social-icon.linkedin { background-color: #0A66C2; } .social-icon.x { background-color: #000000; }