/* ======================================== JHL REDESIGN - Master Design System Version 2.0 - February 2026 Apply this CSS to any page for the new look. Include the Google Fonts link in your : ======================================== */ /* ======================================== 1. CSS VARIABLES (Design Tokens) ======================================== */ :root { /* PRIMARY COLORS - Based on logo */ --navy: #0D2240; --blue: #1565A0; --blue-light: #E8F4FC; --blue-hover: #1E88C7; --green: #00C853; --green-dark: #00A843; --green-glow: rgba(0, 200, 83, 0.15); /* NEUTRAL COLORS */ --cream: #FBF9F6; --cream-dark: #F5F2ED; --warm-white: #FEFEFE; --charcoal: #2D3436; --slate: #5F6C7B; --mist: #E8EAED; /* ACCENT COLORS */ --coral: #FF6B5B; --gold: #F5A623; --purple: #6B46C1; /* TYPOGRAPHY */ --font-display: 'Fraunces', Georgia, serif; --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; /* SPACING SCALE */ --space-xs: 0.5rem; /* 8px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-lg: 3rem; /* 48px */ --space-xl: 5rem; /* 80px */ --space-2xl: 8rem; /* 128px */ /* BORDER RADIUS */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 40px; --radius-full: 9999px; /* SHADOWS */ --shadow-soft: 0 4px 20px rgba(13, 34, 64, 0.06); --shadow-medium: 0 8px 40px rgba(13, 34, 64, 0.1); --shadow-strong: 0 20px 60px rgba(13, 34, 64, 0.15); --shadow-glow: 0 0 40px rgba(0, 200, 83, 0.3); /* TRANSITIONS */ --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* LAYOUT */ --max-width-content: 800px; --max-width-wide: 1000px; --max-width-full: 1400px; } /* ======================================== 2. BASE RESET & DEFAULTS ======================================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--charcoal); background: var(--cream); overflow-x: hidden; } /* Subtle grain texture overlay */ body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); z-index: 9999; } img { max-width: 100%; height: auto; display: block; } a { color: var(--blue); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--blue-hover); } /* ======================================== 3. TYPOGRAPHY SYSTEM ======================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; color: var(--navy); } h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 800; letter-spacing: -1.5px; } h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -1px; } h3 { font-size: clamp(22px, 3vw, 28px); font-weight: 700; } h4 { font-size: clamp(18px, 2vw, 22px); font-weight: 700; } p { margin-bottom: var(--space-sm); color: var(--slate); } .lead { font-size: 20px; line-height: 1.7; color: var(--slate); } strong, b { font-weight: 700; color: var(--charcoal); } /* ======================================== 4. HEADER COMPONENT ======================================== */ .jhl-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: var(--space-sm) var(--space-md); transition: all var(--transition-slow); } .jhl-header.scrolled { background: rgba(251, 249, 246, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--shadow-soft); } .jhl-header__inner { max-width: var(--max-width-full); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: var(--space-xs) 0; } /* Logo */ .jhl-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; transition: transform var(--transition-normal); } .jhl-logo:hover { transform: scale(1.02); } .jhl-logo__icon { width: 44px; height: 44px; background: linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-soft); } .jhl-logo__icon svg { width: 26px; height: 26px; fill: white; } .jhl-logo__icon img { width: 100%; height: 100%; object-fit: contain; } .jhl-logo__text { display: flex; flex-direction: column; } .jhl-logo__wordmark { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--navy); letter-spacing: -0.5px; line-height: 1.1; } .jhl-logo__wordmark span, .jhl-logo__wordmark .highlight { color: var(--green); } /* MOBILE FIX: Increased from 11px to 12px minimum for readability */ .jhl-logo__tagline { font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--slate); } /* Navigation */ .jhl-nav { display: flex; align-items: center; gap: var(--space-xs); } /* MOBILE FIX: Added min-height 44px for touch targets */ .jhl-nav__link { position: relative; padding: 10px 18px; font-size: 15px; font-weight: 600; color: var(--charcoal); text-decoration: none; border-radius: var(--radius-sm); transition: all var(--transition-normal); min-height: 44px; display: flex; align-items: center; } .jhl-nav__link::after { content: ''; position: absolute; bottom: 6px; left: 50%; width: 0; height: 2px; background: var(--green); border-radius: 2px; transition: all var(--transition-normal); transform: translateX(-50%); } .jhl-nav__link:hover { color: var(--blue); } .jhl-nav__link:hover::after { width: 24px; } /* Menu Toggle (Mobile) */ .jhl-menu-toggle { display: none; width: 44px; height: 44px; background: transparent; border: none; cursor: pointer; border-radius: var(--radius-sm); transition: background var(--transition-normal); } .jhl-menu-toggle:hover { background: var(--mist); } .jhl-menu-toggle span { display: block; width: 22px; height: 2px; background: var(--navy); margin: 5px auto; border-radius: 2px; transition: all var(--transition-normal); } /* MOBILE FIX: Mobile menu toggle animation states */ .jhl-menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .jhl-menu-toggle.active span:nth-child(2) { opacity: 0; } .jhl-menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* MOBILE FIX: Mobile navigation menu styles */ .jhl-mobile-nav { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--cream); z-index: 999; padding: 100px var(--space-md) var(--space-lg); flex-direction: column; align-items: center; gap: var(--space-sm); opacity: 0; visibility: hidden; transition: opacity var(--transition-normal), visibility var(--transition-normal); } .jhl-mobile-nav.active { display: flex; opacity: 1; visibility: visible; } .jhl-mobile-nav__link { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--navy); text-decoration: none; padding: var(--space-sm) var(--space-md); min-height: 44px; display: flex; align-items: center; border-radius: var(--radius-md); transition: all var(--transition-normal); width: 100%; max-width: 300px; justify-content: center; } .jhl-mobile-nav__link:hover, .jhl-mobile-nav__link:active { background: var(--blue-light); color: var(--blue); } .jhl-mobile-nav__cta { margin-top: var(--space-md); width: 100%; max-width: 300px; justify-content: center; } /* ======================================== 5. BUTTON COMPONENTS ======================================== */ /* MOBILE FIX: Added min-height 44px for touch targets */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; font-family: var(--font-body); font-size: 15px; font-weight: 700; text-decoration: none; border-radius: var(--radius-xl); border: none; cursor: pointer; transition: all var(--transition-slow); min-height: 44px; } .btn--primary { background: var(--navy); color: white; box-shadow: 0 4px 20px rgba(13, 34, 64, 0.25); } .btn--primary:hover { background: var(--blue); color: white; transform: translateY(-3px); box-shadow: 0 8px 30px rgba(21, 101, 160, 0.35); } .btn--green { background: var(--green); color: var(--navy); box-shadow: var(--shadow-glow); } .btn--green:hover { background: var(--green-dark); color: var(--navy); transform: translateY(-3px); box-shadow: 0 8px 40px rgba(0, 200, 83, 0.4); } .btn--outline { background: transparent; color: var(--navy); border: 2px solid var(--navy); } .btn--outline:hover { background: var(--navy); color: white; } .btn--white { background: white; color: var(--navy); box-shadow: var(--shadow-soft); } .btn--white:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); } .btn__arrow { width: 18px; height: 18px; transition: transform var(--transition-normal); } .btn:hover .btn__arrow { transform: translateX(4px); } /* Small button variant */ .btn--sm { padding: 10px 20px; font-size: 13px; } /* ======================================== 6. PAGE HERO SECTION ======================================== */ .jhl-hero { min-height: 60vh; display: flex; align-items: center; padding: calc(100px + var(--space-lg)) var(--space-md) var(--space-xl); position: relative; overflow: hidden; } .jhl-hero--full { min-height: 100vh; } /* Organic background shapes */ .jhl-hero__bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; overflow: hidden; } .jhl-hero__shape { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.6; animation: float 20s infinite ease-in-out; } .jhl-hero__shape--1 { width: 600px; height: 600px; background: var(--blue-light); top: -200px; right: -100px; animation-delay: 0s; } .jhl-hero__shape--2 { width: 400px; height: 400px; background: var(--green-glow); bottom: -100px; left: -100px; animation-delay: -7s; } .jhl-hero__shape--3 { width: 300px; height: 300px; background: rgba(245, 166, 35, 0.1); top: 50%; left: 30%; animation-delay: -14s; } @keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(20px, -30px) scale(1.05); } 50% { transform: translate(-20px, 20px) scale(0.95); } 75% { transform: translate(30px, 10px) scale(1.02); } } .jhl-hero__inner { max-width: var(--max-width-full); margin: 0 auto; position: relative; z-index: 1; width: 100%; } .jhl-hero__content { max-width: 700px; } .jhl-hero--centered .jhl-hero__content { max-width: 800px; margin: 0 auto; text-align: center; } /* Badge/Label */ .jhl-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--warm-white); border: 1px solid var(--mist); border-radius: var(--radius-xl); font-size: 13px; font-weight: 600; color: var(--slate); margin-bottom: var(--space-md); box-shadow: var(--shadow-soft); } .jhl-badge__dot { width: 8px; height: 8px; background: var(--green); border-radius: 50%; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.2); } } /* Journey Badge - Phase indicator */ .jhl-journey-badge { display: inline-flex; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-md); } .jhl-journey-badge span { padding: 8px 16px; background: var(--blue-light); border-radius: var(--radius-xl); font-size: 13px; font-weight: 600; color: var(--blue); } .jhl-hero__title { font-family: var(--font-display); font-size: clamp(36px, 5vw, 56px); font-weight: 800; line-height: 1.1; letter-spacing: -1.5px; color: var(--navy); margin-bottom: var(--space-md); } .jhl-hero__title .highlight { background: linear-gradient(135deg, var(--blue) 0%, var(--green) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .jhl-hero__subtitle { font-size: 20px; line-height: 1.7; color: var(--slate); margin-bottom: var(--space-lg); max-width: 560px; } .jhl-hero--centered .jhl-hero__subtitle { margin-left: auto; margin-right: auto; } /* ======================================== 7. SECTION COMPONENTS ======================================== */ .jhl-section { padding: var(--space-xl) var(--space-md); } .jhl-section--white { background: var(--warm-white); } .jhl-section--cream { background: var(--cream); } .jhl-section--cream-dark { background: var(--cream-dark); } .jhl-section--navy { background: var(--navy); color: white; } .jhl-section--navy h2, .jhl-section--navy h3, .jhl-section--navy h4 { color: white; } .jhl-section--navy p { color: rgba(255, 255, 255, 0.8); } .jhl-section__inner { max-width: var(--max-width-wide); margin: 0 auto; } .jhl-section__inner--wide { max-width: var(--max-width-full); } /* Section Header */ .jhl-section-header { text-align: center; max-width: 700px; margin: 0 auto var(--space-xl); } .jhl-section-header__label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--blue); margin-bottom: var(--space-sm); } .jhl-section-header__label::before, .jhl-section-header__label::after { content: ''; width: 24px; height: 2px; background: var(--green); border-radius: 2px; } .jhl-section--navy .jhl-section-header__label { color: var(--green); } .jhl-section-header__title { margin-bottom: var(--space-sm); } .jhl-section-header__subtitle { font-size: 18px; color: var(--slate); line-height: 1.7; } .jhl-section--navy .jhl-section-header__subtitle { color: rgba(255, 255, 255, 0.7); } /* ======================================== 8. INTRO SECTION (What You'll Learn) ======================================== */ .jhl-intro { padding: var(--space-lg) var(--space-md); background: var(--warm-white); border-top: 1px solid var(--mist); border-bottom: 1px solid var(--mist); } .jhl-intro__inner { max-width: var(--max-width-content); margin: 0 auto; text-align: center; } .jhl-intro h2 { font-size: 24px; margin-bottom: var(--space-sm); } .jhl-intro__objectives { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-sm); text-align: left; margin-top: var(--space-md); } .jhl-intro__objective { display: flex; align-items: flex-start; gap: var(--space-xs); font-size: 15px; color: var(--charcoal); } .jhl-intro__objective::before { content: "✓"; color: var(--green); font-weight: 700; flex-shrink: 0; } /* ======================================== 9. CARD COMPONENTS ======================================== */ .jhl-card { background: var(--warm-white); border-radius: var(--radius-lg); padding: var(--space-md); box-shadow: var(--shadow-soft); border: 1px solid transparent; transition: all var(--transition-slow); } .jhl-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-medium); border-color: var(--mist); } .jhl-card--link { text-decoration: none; color: inherit; display: block; } .jhl-card--bordered { border-left: 4px solid var(--green); border-radius: 0 var(--radius-md) var(--radius-md) 0; } .jhl-card--bordered.jhl-card--purple { border-left-color: var(--purple); } .jhl-card--bordered.jhl-card--coral { border-left-color: var(--coral); } .jhl-card--bordered.jhl-card--blue { border-left-color: var(--blue); } .jhl-card__title { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: var(--space-xs); } .jhl-card__desc { font-size: 15px; color: var(--slate); line-height: 1.7; margin-bottom: var(--space-sm); } .jhl-card__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--blue); transition: all var(--transition-normal); } .jhl-card__cta svg { width: 16px; height: 16px; transition: transform var(--transition-normal); } .jhl-card:hover .jhl-card__cta { color: var(--green); } .jhl-card:hover .jhl-card__cta svg { transform: translateX(4px); } /* Numbered Card */ .jhl-card__number { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%); border-radius: 50%; font-family: var(--font-display); font-size: 18px; font-weight: 800; color: white; margin-bottom: var(--space-md); box-shadow: 0 4px 15px rgba(13, 34, 64, 0.2); } /* Card Grid */ .jhl-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-md); } .jhl-card-grid--2 { grid-template-columns: repeat(2, 1fr); } .jhl-card-grid--3 { grid-template-columns: repeat(3, 1fr); } .jhl-card-grid--4 { grid-template-columns: repeat(4, 1fr); } /* ======================================== 10. INFO BOX COMPONENTS ======================================== */ .jhl-info-box { display: flex; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--radius-md); margin: var(--space-md) 0; border-left: 4px solid; } .jhl-info-box--tip { background: linear-gradient(135deg, rgba(0, 200, 83, 0.08) 0%, rgba(0, 200, 83, 0.03) 100%); border-left-color: var(--green); } .jhl-info-box--warning { background: linear-gradient(135deg, rgba(255, 107, 91, 0.08) 0%, rgba(255, 107, 91, 0.03) 100%); border-left-color: var(--coral); } .jhl-info-box--important { background: linear-gradient(135deg, rgba(107, 70, 193, 0.08) 0%, rgba(107, 70, 193, 0.03) 100%); border-left-color: var(--purple); } .jhl-info-box--note { background: linear-gradient(135deg, rgba(21, 101, 160, 0.08) 0%, rgba(21, 101, 160, 0.03) 100%); border-left-color: var(--blue); } .jhl-info-box__icon { font-size: 24px; flex-shrink: 0; width: 32px; text-align: center; } .jhl-info-box__content { flex: 1; } .jhl-info-box__content strong { display: block; margin-bottom: 4px; color: var(--navy); } .jhl-info-box__content p { margin: 0; font-size: 15px; } /* ======================================== 11. STEPS COMPONENT ======================================== */ .jhl-steps { position: relative; padding-left: 48px; } .jhl-steps::before { content: ''; position: absolute; left: 20px; top: 24px; bottom: 24px; width: 3px; background: linear-gradient(180deg, var(--green) 0%, var(--blue) 100%); border-radius: 3px; } .jhl-step { position: relative; margin-bottom: var(--space-lg); } .jhl-step:last-child { margin-bottom: 0; } .jhl-step__number { position: absolute; left: -36px; top: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: var(--navy); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 16px; font-weight: 800; box-shadow: 0 4px 12px rgba(0, 200, 83, 0.3); } .jhl-step__content { background: var(--warm-white); border-radius: var(--radius-md); padding: var(--space-md); box-shadow: var(--shadow-soft); } .jhl-step__title { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: var(--space-xs); } .jhl-step__desc { font-size: 15px; color: var(--slate); margin: 0; } /* ======================================== 12. STATS COMPONENT ======================================== */ .jhl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-md); } .jhl-stat { text-align: center; padding: var(--space-md); border-radius: var(--radius-md); transition: all var(--transition-normal); } .jhl-stat:hover { background: var(--cream); } .jhl-stat__value { font-family: var(--font-display); font-size: clamp(32px, 4vw, 48px); font-weight: 800; color: var(--navy); line-height: 1.1; margin-bottom: 8px; } .jhl-stat__value span { color: var(--green); } .jhl-stat__value--green { color: var(--green); } .jhl-stat__label { font-size: 14px; font-weight: 500; color: var(--slate); } /* ======================================== 13. CHECKLIST COMPONENT ======================================== */ .jhl-checklist { background: var(--warm-white); border-radius: var(--radius-lg); padding: var(--space-md); box-shadow: var(--shadow-soft); } .jhl-checklist__title { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: var(--space-sm); } .jhl-checklist__items { list-style: none; } .jhl-checklist__item { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-xs) 0; border-bottom: 1px solid var(--mist); } .jhl-checklist__item:last-child { border-bottom: none; } .jhl-checklist__checkbox { width: 22px; height: 22px; border: 2px solid var(--mist); border-radius: 6px; flex-shrink: 0; margin-top: 2px; transition: all var(--transition-fast); cursor: pointer; } .jhl-checklist__item.checked .jhl-checklist__checkbox { background: var(--green); border-color: var(--green); } .jhl-checklist__item.checked .jhl-checklist__checkbox::after { content: '✓'; color: white; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; height: 100%; } .jhl-checklist__text { font-size: 15px; color: var(--charcoal); } /* ======================================== 14. QUOTE/TESTIMONIAL COMPONENT ======================================== */ .jhl-quote { padding: var(--space-lg); position: relative; } .jhl-quote::before { content: '"'; position: absolute; top: 0; left: var(--space-md); font-family: var(--font-display); font-size: 120px; font-weight: 800; color: var(--green); opacity: 0.15; line-height: 1; } .jhl-quote__text { font-family: var(--font-display); font-size: 22px; font-weight: 500; line-height: 1.6; color: var(--charcoal); font-style: italic; margin-bottom: var(--space-md); position: relative; } .jhl-quote__author { font-size: 15px; font-weight: 600; color: var(--navy); } .jhl-quote__context { font-size: 14px; color: var(--slate); } /* Testimonial Card */ .jhl-testimonial { background: var(--warm-white); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-soft); transition: all var(--transition-normal); } .jhl-testimonial:hover { transform: translateY(-4px); box-shadow: var(--shadow-medium); } .jhl-testimonial__quote { font-family: var(--font-display); font-size: 18px; font-weight: 500; line-height: 1.6; color: var(--charcoal); margin-bottom: var(--space-md); font-style: italic; } .jhl-testimonial__quote::before { content: '"'; font-size: 48px; font-weight: 800; color: var(--green); line-height: 0; display: block; margin-bottom: var(--space-sm); } .jhl-testimonial__author { display: flex; align-items: center; gap: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--mist); } .jhl-testimonial__avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 16px; font-weight: 700; color: white; } .jhl-testimonial__name { font-weight: 700; color: var(--navy); font-size: 15px; } .jhl-testimonial__location { font-size: 13px; color: var(--slate); } .jhl-testimonial__metric { margin-top: var(--space-sm); padding: var(--space-xs) var(--space-sm); background: var(--green-glow); border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; color: var(--green-dark); display: inline-block; } /* ======================================== 15. COMPARISON COMPONENT ======================================== */ .jhl-comparison { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } .jhl-comparison__column { border-radius: var(--radius-lg); padding: var(--space-md); } .jhl-comparison__column--do { background: linear-gradient(135deg, rgba(0, 200, 83, 0.08) 0%, rgba(0, 200, 83, 0.03) 100%); border: 2px solid var(--green); } .jhl-comparison__column--dont { background: linear-gradient(135deg, rgba(255, 107, 91, 0.08) 0%, rgba(255, 107, 91, 0.03) 100%); border: 2px solid var(--coral); } .jhl-comparison__header { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin-bottom: var(--space-sm); } .jhl-comparison__column--do .jhl-comparison__header { color: var(--green-dark); } .jhl-comparison__column--dont .jhl-comparison__header { color: var(--coral); } .jhl-comparison__list { list-style: none; } .jhl-comparison__list li { padding: var(--space-xs) 0; padding-left: var(--space-md); position: relative; font-size: 15px; color: var(--charcoal); } .jhl-comparison__column--do .jhl-comparison__list li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 700; } .jhl-comparison__column--dont .jhl-comparison__list li::before { content: '✗'; position: absolute; left: 0; color: var(--coral); font-weight: 700; } /* ======================================== 16. TIMELINE COMPONENT ======================================== */ .jhl-timeline { position: relative; padding-left: 32px; } .jhl-timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--green) 0%, var(--blue) 100%); border-radius: 3px; } .jhl-timeline__item { position: relative; margin-bottom: var(--space-lg); } .jhl-timeline__marker { position: absolute; left: -28px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--green); border: 3px solid var(--cream); box-shadow: var(--shadow-soft); } .jhl-timeline__date { font-size: 13px; font-weight: 700; color: var(--blue); margin-bottom: 4px; } .jhl-timeline__content h4 { font-size: 18px; margin-bottom: var(--space-xs); } .jhl-timeline__content p { font-size: 15px; margin: 0; } /* ======================================== 17. ACCORDION COMPONENT ======================================== */ .jhl-accordion { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); } .jhl-accordion__item { background: var(--warm-white); border-bottom: 1px solid var(--mist); } .jhl-accordion__item:last-child { border-bottom: none; } .jhl-accordion__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: var(--space-md); background: none; border: none; cursor: pointer; text-align: left; font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--navy); transition: all var(--transition-normal); } .jhl-accordion__trigger:hover { background: var(--cream); } .jhl-accordion__icon { font-size: 24px; font-weight: 300; color: var(--blue); transition: transform var(--transition-normal); } .jhl-accordion__item.active .jhl-accordion__icon { transform: rotate(45deg); } .jhl-accordion__content { max-height: 0; overflow: hidden; transition: max-height var(--transition-slow); } .jhl-accordion__item.active .jhl-accordion__content { max-height: 500px; } .jhl-accordion__content-inner { padding: 0 var(--space-md) var(--space-md); } .jhl-accordion__content p { font-size: 15px; margin: 0; } /* ======================================== 18. KEY TAKEAWAYS BOX ======================================== */ .jhl-takeaways { background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%); border-radius: var(--radius-xl); padding: var(--space-xl); margin: var(--space-lg) 0; position: relative; overflow: hidden; } .jhl-takeaways::before { content: ''; position: absolute; top: -100px; right: -100px; width: 300px; height: 300px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; } .jhl-takeaways__inner { max-width: var(--max-width-content); margin: 0 auto; position: relative; z-index: 1; } .jhl-takeaways h2 { font-family: var(--font-display); font-size: 28px; font-weight: 800; color: var(--navy); margin-bottom: var(--space-md); } .jhl-takeaways ul { list-style: none; } .jhl-takeaways li { padding: var(--space-xs) 0; padding-left: var(--space-md); position: relative; font-size: 16px; font-weight: 500; color: var(--navy); } .jhl-takeaways li::before { content: '✓'; position: absolute; left: 0; font-weight: 700; } /* ======================================== 19. NEXT STEPS / CTA SECTION ======================================== */ .jhl-next-steps { padding: var(--space-2xl) var(--space-md); background: linear-gradient(180deg, var(--cream) 0%, var(--blue-light) 100%); text-align: center; } .jhl-next-steps__inner { max-width: 700px; margin: 0 auto; } .jhl-next-steps__title { font-family: var(--font-display); font-size: clamp(32px, 5vw, 48px); font-weight: 800; color: var(--navy); margin-bottom: var(--space-sm); line-height: 1.2; } .jhl-next-steps__subtitle { font-size: 18px; color: var(--slate); margin-bottom: var(--space-lg); } .jhl-next-steps__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin-bottom: var(--space-lg); } .jhl-next-steps__link { padding: var(--space-sm) var(--space-md); background: var(--warm-white); border: 1px solid var(--mist); border-radius: var(--radius-md); font-size: 14px; font-weight: 600; color: var(--charcoal); text-decoration: none; transition: all var(--transition-normal); } .jhl-next-steps__link:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); } .jhl-next-steps__promise { font-size: 14px; color: var(--slate); margin-top: var(--space-sm); } /* ======================================== 20. FOOTER ======================================== */ .jhl-footer { background: var(--navy); color: white; padding: var(--space-xl) var(--space-md) var(--space-lg); } .jhl-footer__inner { max-width: var(--max-width-full); margin: 0 auto; } .jhl-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-xl); padding-bottom: var(--space-lg); border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: var(--space-lg); } .jhl-footer__brand p { font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, 0.7); margin-top: var(--space-sm); max-width: 280px; } .jhl-footer__logo { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: white; } .jhl-footer__logo span { color: var(--green); } .jhl-footer__section h4 { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--green); margin-bottom: var(--space-md); } .jhl-footer__section ul { list-style: none; } .jhl-footer__section li { margin-bottom: 10px; } /* MOBILE FIX: Added min-height 44px and padding for touch targets */ .jhl-footer__section a { font-size: 14px; color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color var(--transition-fast); display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; } .jhl-footer__section a:hover { color: white; } .jhl-footer__bottom { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: rgba(255, 255, 255, 0.5); } .jhl-footer__legal { display: flex; gap: var(--space-md); } /* MOBILE FIX: Added min-height 44px and padding for touch targets */ .jhl-footer__legal a { color: rgba(255, 255, 255, 0.5); text-decoration: none; transition: color var(--transition-fast); display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; } .jhl-footer__legal a:hover { color: white; } /* ======================================== 21. UTILITY CLASSES ======================================== */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .mt-0 { margin-top: 0; } .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mt-xl { margin-top: var(--space-xl); } .mb-0 { margin-bottom: 0; } .mb-sm { margin-bottom: var(--space-sm); } .mb-md { margin-bottom: var(--space-md); } .mb-lg { margin-bottom: var(--space-lg); } .mb-xl { margin-bottom: var(--space-xl); } .hidden { display: none; } .visible { display: block; } /* ======================================== 22. RESPONSIVE BREAKPOINTS ======================================== */ @media (max-width: 1024px) { .jhl-card-grid--3, .jhl-card-grid--4 { grid-template-columns: repeat(2, 1fr); } .jhl-footer__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .jhl-nav { display: none; } .jhl-menu-toggle { display: block; } .jhl-card-grid, .jhl-card-grid--2, .jhl-card-grid--3, .jhl-card-grid--4 { grid-template-columns: 1fr; } .jhl-stats { grid-template-columns: repeat(2, 1fr); } .jhl-comparison { grid-template-columns: 1fr; } .jhl-footer__grid { grid-template-columns: 1fr; gap: var(--space-lg); } .jhl-footer__bottom { flex-direction: column; gap: var(--space-sm); text-align: center; } } @media (max-width: 480px) { .jhl-stats { grid-template-columns: 1fr; } .btn { width: 100%; justify-content: center; } } /* MOBILE FIX: Added 430px breakpoint for smallest iPhones */ @media (max-width: 430px) { body { font-size: 16px; } .jhl-hero { padding: calc(70px + var(--space-lg)) var(--space-sm) var(--space-lg); } .jhl-hero__title { font-size: 32px; letter-spacing: -1px; } .jhl-hero__subtitle { font-size: 17px; } .jhl-section { padding: var(--space-lg) var(--space-sm); } .jhl-section-header__title { font-size: 28px; } .jhl-section-header__subtitle { font-size: 16px; } .jhl-card { padding: var(--space-sm); } .jhl-card__title { font-size: 18px; } .jhl-info-box { flex-direction: column; gap: var(--space-xs); } .jhl-takeaways { padding: var(--space-lg); } .jhl-takeaways h2 { font-size: 24px; } .jhl-takeaways li { font-size: 14px; } .jhl-next-steps { padding: var(--space-xl) var(--space-sm); } .jhl-next-steps__title { font-size: 28px; } .jhl-next-steps__subtitle { font-size: 16px; } .jhl-footer { padding: var(--space-lg) var(--space-sm) var(--space-md); } .jhl-footer__logo { font-size: 20px; } }