{} *{} {} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } /* ======================================== PATRICK BURROWS HEALTH - GLOBAL STYLES Design: Ubuntu Warmth Colors: Deep Teal #0D5C63, Warm Amber #D4A574, Terracotta #C75B3F, Warm Cream #FAF7F2 ======================================== */ :root { --teal: #0D5C63; --teal-dark: #094950; --teal-light: #0F7A84; --amber: #D4A574; --amber-dark: #C08B5C; --amber-light: #E8C9A8; --terracotta: #C75B3F; --cream: #FAF7F2; --cream-dark: #F0EBE3; --charcoal: #2C2C2C; --white: #FFFFFF; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Source Sans 3', system-ui, sans-serif; background-color: var(--cream); color: var(--charcoal); line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; } .font-accent { font-family: 'Montserrat', system-ui, sans-serif; } .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1rem; } @media (min-width: 640px) { .container { padding: 0 1.5rem; } } @media (min-width: 1024px) { .container { padding: 0 2rem; } } a { text-decoration: none; color: inherit; } img { max-width: 100%; height: auto; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 1rem 2rem; border-radius: 9999px; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; border: none; } .btn-amber { background-color: var(--amber); color: var(--charcoal); box-shadow: 0 4px 15px rgba(212, 165, 116, 0.4); } .btn-amber:hover { background-color: var(--amber-dark); box-shadow: 0 6px 20px rgba(212, 165, 116, 0.5); transform: translateY(-2px); } .btn-teal { background-color: var(--teal); color: var(--white); } .btn-teal:hover { background-color: var(--teal-dark); } .btn-outline-white { background: transparent; border: 2px solid var(--white); color: var(--white); } .btn-outline-white:hover { background: var(--white); color: var(--teal-dark); } .btn-outline-teal { background: transparent; border: 2px solid var(--teal); color: var(--teal); } .btn-outline-teal:hover { background: var(--teal); color: var(--white); } .btn-outline-charcoal { background: transparent; border: 2px solid var(--charcoal); color: var(--charcoal); } .btn-outline-charcoal:hover { background: var(--charcoal); color: var(--white); } /* ======================================== HEADER ======================================== */ .header { position: sticky; top: 0; z-index: 100; background: rgba(250, 247, 242, 0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(212, 165, 116, 0.2); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 80px; } .logo { display: flex; align-items: center; gap: 0.75rem; } .logo-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--teal); display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; } .logo:hover .logo-icon { transform: scale(1.05); } .logo-icon svg { width: 24px; height: 24px; color: var(--white); } .logo-text { display: none; } @media (min-width: 640px) { .logo-text { display: block; } } .logo-title { font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 600; color: var(--teal-dark); line-height: 1.2; } .logo-subtitle { font-size: 0.75rem; color: #666; letter-spacing: 0.05em; } .nav { display: none; } @media (min-width: 1024px) { .nav { display: flex; align-items: center; gap: 2rem; } } .nav a { font-size: 0.875rem; font-weight: 500; color: var(--charcoal); padding: 0.5rem 0; position: relative; transition: color 0.3s ease; } .nav a:hover, .nav a.active { color: var(--teal); } .nav a.active::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--amber); } .header-cta { display: none; } @media (min-width: 768px) { .header-cta { display: block; } } .mobile-menu-btn { display: block; padding: 0.5rem; background: none; border: none; cursor: pointer; } @media (min-width: 1024px) { .mobile-menu-btn { display: none; } } /* ======================================== HERO SECTION ======================================== */ .hero { position: relative; min-height: 90vh; display: flex; align-items: center; } .hero-bg { position: absolute; inset: 0; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(9, 73, 80, 0.9), rgba(9, 73, 80, 0.7), rgba(9, 73, 80, 0.4)); } .hero-content { position: relative; z-index: 10; max-width: 768px; padding: 5rem 0; } .hero h1 { font-size: 2.5rem; font-weight: 700; color: var(--white); line-height: 1.2; margin-bottom: 1.5rem; } @media (min-width: 768px) { .hero h1 { font-size: 3rem; } } @media (min-width: 1024px) { .hero h1 { font-size: 3.75rem; } } .hero h1 span { color: var(--amber); } .hero p { font-size: 1.125rem; color: rgba(255, 255, 255, 0.9); line-height: 1.7; margin-bottom: 2rem; max-width: 640px; } @media (min-width: 768px) { .hero p { font-size: 1.25rem; } } .hero-buttons { display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 640px) { .hero-buttons { flex-direction: row; } } .hero-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 6rem; background: linear-gradient(to top, var(--cream), transparent); } /* ======================================== THE PROBLEM SECTION ======================================== */ .problem-section { padding: 5rem 0; background: var(--amber); position: relative; } .problem-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: linear-gradient(to right, var(--teal), var(--amber-dark), var(--terracotta)); } .problem-content { max-width: 896px; margin: 0 auto; text-align: center; } .problem-content h2 { font-size: 1.875rem; font-weight: 700; color: var(--charcoal); margin-bottom: 1.5rem; } @media (min-width: 768px) { .problem-content h2 { font-size: 2.25rem; } } @media (min-width: 1024px) { .problem-content h2 { font-size: 3rem; } } .problem-content h2 span { color: var(--teal-dark); } .problem-content p { font-size: 1.125rem; color: rgba(44, 44, 44, 0.8); line-height: 1.7; margin-bottom: 2rem; } @media (min-width: 768px) { .problem-content p { font-size: 1.25rem; } } /* ======================================== CHECKLIST SECTION ======================================== */ .checklist-section { padding: 5rem 0; background: var(--cream); } .checklist-grid { display: grid; gap: 3rem; align-items: center; } @media (min-width: 1024px) { .checklist-grid { grid-template-columns: 1fr 1fr; } } .checklist-content h2 { font-size: 1.875rem; font-weight: 700; color: var(--charcoal); margin-bottom: 2rem; } @media (min-width: 768px) { .checklist-content h2 { font-size: 2.25rem; } } .checklist-items { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; } .checklist-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--white); border: 1px solid #e5e5e5; border-radius: 0.5rem; cursor: pointer; transition: all 0.3s ease; } .checklist-item:hover { border-color: var(--amber); } .checklist-item.checked { border-color: var(--teal); background: rgba(13, 92, 99, 0.05); box-shadow: 0 4px 15px rgba(13, 92, 99, 0.1); } .checkbox { width: 24px; height: 24px; border: 2px solid #ccc; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.3s ease; } .checklist-item.checked .checkbox { background: var(--teal); border-color: var(--teal); } .checkbox svg { width: 16px; height: 16px; color: var(--white); opacity: 0; transition: opacity 0.3s ease; } .checklist-item.checked .checkbox svg { opacity: 1; } .checklist-item span { font-size: 1.125rem; color: var(--charcoal); } .checklist-alert { background: rgba(199, 91, 63, 0.1); border: 2px solid var(--terracotta); border-radius: 0.75rem; padding: 1.5rem; margin-bottom: 1.5rem; display: none; } .checklist-alert.show { display: block; } .checklist-alert p { font-size: 1.125rem; font-weight: 600; color: var(--terracotta); display: flex; align-items: center; gap: 0.5rem; } .checklist-image { position: relative; } .checklist-image img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 1rem; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15); } .checklist-image::after { content: ''; position: absolute; bottom: -1.5rem; right: -1.5rem; width: 12rem; height: 12rem; border: 4px solid rgba(212, 165, 116, 0.3); border-radius: 50%; z-index: -1; } /* ======================================== BIO SECTION ======================================== */ .bio-section { padding: 5rem 0; background: var(--white); } .bio-content { max-width: 768px; margin: 0 auto; text-align: center; } .bio-image { width: 8rem; height: 8rem; margin: 0 auto 2rem; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px var(--amber-light), 0 0 20px rgba(212, 165, 116, 0.3); } .bio-image img { width: 100%; height: 100%; object-fit: cover; } .bio-content h2 { font-size: 1.875rem; font-weight: 700; color: var(--charcoal); margin-bottom: 1.5rem; } @media (min-width: 768px) { .bio-content h2 { font-size: 2.25rem; } } .bio-content p { font-size: 1.125rem; color: #666; line-height: 1.7; margin-bottom: 2rem; } /* ======================================== TESTIMONIALS SECTION ======================================== */ .testimonials-section { padding: 5rem 0; background: var(--cream-dark); } .testimonials-header { text-align: center; margin-bottom: 3rem; } .testimonials-header h2 { font-size: 1.875rem; font-weight: 700; color: var(--charcoal); margin-bottom: 1rem; } @media (min-width: 768px) { .testimonials-header h2 { font-size: 2.25rem; } } .testimonials-header p { font-size: 1.125rem; color: #666; } .testimonials-grid { display: grid; gap: 2rem; } @media (min-width: 768px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr); } } .testimonial-card { background: var(--white); border-radius: 0.75rem; padding: 2rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); transition: box-shadow 0.3s ease; } .testimonial-card:hover { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); } .testimonial-quote-icon { width: 2.5rem; height: 2.5rem; color: var(--amber); margin-bottom: 1rem; } .testimonial-text { font-size: 1.125rem; font-style: italic; color: var(--charcoal); line-height: 1.7; margin-bottom: 1.5rem; } .testimonial-author { display: flex; align-items: center; gap: 1rem; } .testimonial-avatar { width: 3.5rem; height: 3.5rem; border-radius: 50%; overflow: hidden; border: 2px solid var(--amber); } .testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; } .testimonial-name { font-family: 'Montserrat', sans-serif; font-weight: 600; color: var(--charcoal); } .testimonial-location { font-size: 0.875rem; color: #666; } /* ======================================== EMAIL CAPTURE SECTION ======================================== */ .email-section { padding: 5rem 0; background: var(--teal); } .email-content { max-width: 640px; margin: 0 auto; text-align: center; } .email-content h2 { font-size: 1.875rem; font-weight: 700; color: var(--white); margin-bottom: 1rem; } @media (min-width: 768px) { .email-content h2 { font-size: 2.25rem; } } .email-content p { font-size: 1.125rem; color: rgba(255, 255, 255, 0.9); margin-bottom: 2rem; } .email-form { display: flex; flex-direction: column; gap: 1rem; max-width: 28rem; margin: 0 auto; } @media (min-width: 640px) { .email-form { flex-direction: row; } } .email-form input { flex: 1; height: 3.5rem; padding: 0 1.5rem; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.1); color: var(--white); font-size: 1rem; } .email-form input::placeholder { color: rgba(255, 255, 255, 0.6); } .email-form input:focus { outline: none; background: rgba(255, 255, 255, 0.2); } /* ======================================== STATS SECTION ======================================== */ .stats-section { padding: 5rem 0; background: var(--cream); } .stats-grid { display: grid; gap: 2rem; } @media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } } .stat-item { text-align: center; } .stat-icon { width: 4rem; height: 4rem; margin: 0 auto 1rem; border-radius: 50%; background: rgba(13, 92, 99, 0.1); display: flex; align-items: center; justify-content: center; } .stat-icon svg { width: 2rem; height: 2rem; color: var(--teal); } .stat-number { font-family: 'Montserrat', sans-serif; font-size: 3rem; font-weight: 700; color: var(--teal); margin-bottom: 0.5rem; } .stat-label { font-size: 1.125rem; color: #666; } /* ======================================== FINAL CTA SECTION ======================================== */ .cta-section { padding: 5rem 0; background: var(--amber); } .cta-content { text-align: center; } .cta-content h2 { font-size: 1.875rem; font-weight: 700; color: var(--charcoal); margin-bottom: 2rem; } @media (min-width: 768px) { .cta-content h2 { font-size: 2.25rem; } } @media (min-width: 1024px) { .cta-content h2 { font-size: 3rem; } } .cta-buttons { display: flex; flex-direction: column; gap: 1rem; justify-content: center; } @media (min-width: 640px) { .cta-buttons { flex-direction: row; } } /* ======================================== FOOTER ======================================== */ .footer { background: var(--teal-dark); color: var(--white); } .footer-pattern { height: 8px; background: linear-gradient(to right, var(--teal), var(--amber), var(--terracotta)); } .footer-content { padding: 4rem 0; } .footer-grid { display: grid; gap: 3rem; } @media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } } .footer-about { max-width: 28rem; } .footer-logo { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; } .footer-logo-icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; } .footer-logo-icon svg { width: 24px; height: 24px; color: var(--amber); } .footer-logo-title { font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 600; } .footer-logo-subtitle { font-size: 0.875rem; color: rgba(255, 255, 255, 0.7); } .footer-about p { color: rgba(255, 255, 255, 0.8); line-height: 1.7; margin-bottom: 1.5rem; } .footer-social { display: flex; gap: 1rem; } .footer-social a { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; transition: background 0.3s ease; } .footer-social a:hover { background: var(--amber); } .footer-social svg { width: 1.25rem; height: 1.25rem; } .footer-links h4, .footer-contact h4 { font-family: 'Playfair Display', serif; font-size: 1.125rem; font-weight: 600; color: var(--amber); margin-bottom: 1.5rem; } .footer-links ul { list-style: none; } .footer-links li { margin-bottom: 0.75rem; } .footer-links a { color: rgba(255, 255, 255, 0.8); transition: color 0.3s ease; } .footer-links a:hover { color: var(--amber); } .footer-contact-item { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; } .footer-contact-item svg { width: 1.25rem; height: 1.25rem; color: var(--amber); margin-top: 0.125rem; flex-shrink: 0; } .footer-contact-item span, .footer-contact-item a { color: rgba(255, 255, 255, 0.8); font-size: 0.875rem; } .footer-contact-item a:hover { color: var(--amber); } .footer-bottom { padding: 2rem 0; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; gap: 1rem; align-items: center; justify-content: space-between; } @media (min-width: 768px) { .footer-bottom { flex-direction: row; } } .footer-bottom p { color: rgba(255, 255, 255, 0.6); font-size: 0.875rem; }