/* ======================================== 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; --red: #DC2626; --orange: #FF6B35; --amber: #F59E0B; --indigo: #1A237E; /* GRAY SCALE */ --gray-light: #F0F0F0; --gray-medium: #6B7280; /* 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; } /* Generic container utility */ .container { max-width: var(--max-width-wide); margin: 0 auto; padding: 0 var(--space-md); } /* Utility: centered section subtitle */ .jhl-section__subtitle { text-align: center; margin-bottom: var(--space-lg); font-size: 18px; color: var(--gray-medium); } /* Utility: centered section description (no color override) */ .jhl-section__description { text-align: center; margin-bottom: var(--space-lg); } /* Utility: emoji icon sizing */ .jhl-icon--lg { font-size: 32px; } .jhl-icon--md { font-size: 28px; } /* Utility: small meta text */ .jhl-meta-text { font-size: 14px; } /* ======================================== 2. BASE RESET & DEFAULTS ======================================== */ /* Skip Link - Accessibility (hidden until focused via keyboard) */ .skip-link { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; background: var(--navy); color: white; font-size: 0.875rem; text-decoration: none; z-index: 9999; border-radius: var(--radius-sm); } .skip-link:focus { position: absolute; width: auto; height: auto; padding: 0.75rem 1.5rem; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; top: 1rem; left: 50%; transform: translateX(-50%); } *, *::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; margin-top: 0; margin-bottom: var(--space-md); } h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -1px; margin-top: var(--space-lg); margin-bottom: var(--space-md); } h2:first-child { margin-top: 0; } h3 { font-size: clamp(22px, 3vw, 28px); font-weight: 700; margin-top: var(--space-lg); margin-bottom: var(--space-md); } h3:first-child { margin-top: 0; } h4 { font-size: clamp(18px, 2vw, 22px); font-weight: 700; margin-top: var(--space-md); margin-bottom: var(--space-sm); } h4:first-child { margin-top: 0; } p { margin-bottom: var(--space-md); color: var(--slate); line-height: 1.8; } p:last-child { margin-bottom: 0; } ul, ol { margin-bottom: var(--space-md); padding-left: var(--space-md); } li { margin-bottom: var(--space-sm); line-height: 1.7; } li:last-child { margin-bottom: 0; } .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; } /* ── Navigation Dropdown System ── */ .jhl-nav__item { position: relative; } .jhl-nav__item > .jhl-nav__link { gap: 6px; } .jhl-nav__chevron { width: 12px; height: 12px; transition: transform var(--transition-normal); flex-shrink: 0; } .jhl-nav__item:hover .jhl-nav__chevron, .jhl-nav__item:focus-within .jhl-nav__chevron { transform: rotate(180deg); } .jhl-nav__dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); min-width: 220px; background: white; border-radius: var(--radius-md); box-shadow: 0 20px 60px rgba(13, 34, 64, 0.15), 0 4px 20px rgba(13, 34, 64, 0.08); padding: var(--space-sm); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s 0.2s, transform 0.2s ease; z-index: 100; } .jhl-nav__item:hover > .jhl-nav__dropdown, .jhl-nav__item:focus-within > .jhl-nav__dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition: opacity 0.2s ease, visibility 0s, transform 0.2s ease; } /* Invisible bridge prevents dropdown from closing between trigger and panel */ .jhl-nav__item::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 12px; } /* Mega menu variant (2-column) */ .jhl-nav__dropdown--mega { min-width: 520px; padding: var(--space-md); } .jhl-nav__dropdown-featured { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--blue-light); border-radius: var(--radius-sm); color: var(--navy); text-decoration: none; font-weight: 600; font-size: 14px; margin-bottom: 12px; transition: background 0.2s; } .jhl-nav__dropdown-featured:hover { background: #d4ecfa; } .jhl-nav__dropdown-featured svg { width: 16px; height: 16px; color: var(--blue); } .jhl-nav__dropdown-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px var(--space-md); } .jhl-nav__dropdown-heading { font-family: var(--font-display); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--slate); padding: 10px 12px 4px; } .jhl-nav__dropdown-heading:first-child { padding-top: 0; } .jhl-nav__dropdown-link { display: block; padding: 7px 12px; font-size: 14px; font-weight: 500; color: var(--charcoal); text-decoration: none; border-radius: var(--radius-xs); transition: all 0.15s ease; line-height: 1.3; } .jhl-nav__dropdown-link:hover { background: var(--blue-light); color: var(--blue); } /* Mobile nav accordion groups */ .jhl-mobile-nav__group { border-bottom: 1px solid var(--mist); } .jhl-mobile-nav__group-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.75rem 0; font-size: 1.1rem; font-weight: 500; color: var(--navy); background: none; border: none; cursor: pointer; text-align: left; font-family: inherit; } .jhl-mobile-nav__group-chevron { width: 20px; height: 20px; transition: transform 0.3s ease; flex-shrink: 0; } .jhl-mobile-nav__group-toggle[aria-expanded="true"] .jhl-mobile-nav__group-chevron { transform: rotate(180deg); } .jhl-mobile-nav__group-body { display: none; padding: 0 0 0.75rem 1rem; } .jhl-mobile-nav__group-body.active { display: block; } .jhl-mobile-nav__group-body a { display: block; padding: 0.5rem 0; font-size: 0.95rem; color: var(--charcoal); text-decoration: none; border-bottom: none; } .jhl-mobile-nav__group-body a:hover { color: var(--green); } /* 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: 12px 24px; 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); } } /* Enhanced hero patterns for specific pages */ .jhl-hero--pattern-credit { background: linear-gradient(135deg, #0D2240 0%, #1565A0 50%, #00C853 100%); } .jhl-hero--pattern-approval { background: linear-gradient(135deg, #6B46C1 0%, #1565A0 50%, #0D2240 100%); } .jhl-hero--pattern-inspection { background: linear-gradient(135deg, #1565A0 0%, #00C853 50%, #F5A623 100%); } .jhl-hero--pattern-closing { background: linear-gradient(135deg, #0D2240 0%, #00C853 50%, #1565A0 100%); } .jhl-hero--pattern-action { background: linear-gradient(135deg, #6B46C1 0%, #00C853 50%, #1565A0 100%); } /* Texture overlay for enhanced hero sections */ .jhl-hero__texture { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.05) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.03) 0%, transparent 50%); z-index: 1; pointer-events: none; } .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; transition: transform 0.3s ease; } .jhl-info-box:hover .jhl-info-box__icon { transform: scale(1.1); } .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; position: relative; overflow: hidden; transition: transform 0.3s ease; } .jhl-testimonial__avatar::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%); opacity: 0; transition: opacity 0.3s ease; } .jhl-testimonial:hover .jhl-testimonial__avatar::before { opacity: 1; } .jhl-testimonial:hover .jhl-testimonial__avatar { transform: scale(1.05); } /* Unique gradient patterns for different testimonials */ .jhl-testimonial__avatar--pattern-1 { background: linear-gradient(135deg, #1565A0 0%, #0D2240 100%); } .jhl-testimonial__avatar--pattern-2 { background: linear-gradient(135deg, #00C853 0%, #00A843 100%); } .jhl-testimonial__avatar--pattern-3 { background: linear-gradient(135deg, #6B46C1 0%, #1565A0 100%); } .jhl-testimonial__avatar--pattern-4 { background: linear-gradient(135deg, #F5A623 0%, #FF6B35 100%); } .jhl-testimonial__avatar--pattern-5 { background: linear-gradient(135deg, #1565A0 0%, #6B46C1 100%); } .jhl-testimonial__avatar--pattern-6 { background: linear-gradient(135deg, #00C853 0%, #1565A0 100%); } .jhl-testimonial__avatar--pattern-7 { background: linear-gradient(135deg, #FF6B35 0%, #6B46C1 100%); } .jhl-testimonial__avatar--pattern-8 { background: linear-gradient(135deg, #0D2240 0%, #00C853 100%); } .jhl-testimonial__avatar--pattern-9 { background: linear-gradient(135deg, #6B46C1 0%, #00C853 100%); } .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; } /* ======================================== SOCIAL PROOF COMPONENTS Updated: February 2026 ======================================== */ /* Updated Badge - Shows freshness of content */ .jhl-updated-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: rgba(107, 70, 193, 0.08); border: 1px solid rgba(107, 70, 193, 0.15); border-radius: 20px; font-size: 12px; font-weight: 600; color: var(--purple); margin-bottom: var(--space-sm); } .jhl-updated-badge svg { width: 14px !important; height: 14px !important; max-width: 14px !important; max-height: 14px !important; min-width: 14px !important; min-height: 14px !important; opacity: 0.7; flex-shrink: 0; } /* Page-Specific Stats - Horizontal bar for content pages */ .jhl-page-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-md); padding: var(--space-lg); background: linear-gradient(135deg, rgba(21, 101, 160, 0.03) 0%, rgba(0, 200, 83, 0.03) 100%); border-radius: var(--radius-lg); margin: var(--space-xl) 0; border: 1px solid rgba(21, 101, 160, 0.1); } .jhl-page-stat { text-align: center; padding: var(--space-sm); } .jhl-page-stat__value { font-family: var(--font-display); font-size: 32px; font-weight: 800; color: var(--blue); line-height: 1; margin-bottom: var(--space-xs); } .jhl-page-stat__value--green { color: var(--green); } .jhl-page-stat__label { font-size: 13px; font-weight: 600; color: var(--slate); line-height: 1.4; } /* Activity Badge - Shows recent activity */ .jhl-activity-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: rgba(0, 200, 83, 0.08); border-radius: 100px; font-size: 13px; font-weight: 600; color: var(--charcoal); margin-bottom: var(--space-md); } .jhl-activity-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.2); } } .jhl-activity-badge__text { color: var(--charcoal); } /* Responsive adjustments for social proof components */ @media (max-width: 768px) { .jhl-page-stats { grid-template-columns: 1fr; gap: var(--space-sm); padding: var(--space-md); } .jhl-page-stat__value { font-size: 28px; } } /* ======================================== 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; } } /* ======================================== FULL-SCREEN EXPLORE MENU ======================================== */ .jhl-explore-menu { position: fixed; inset: 0; z-index: 2000; visibility: hidden; opacity: 0; transition: visibility 0s 0.4s, opacity 0.4s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; } .jhl-explore-menu.active { visibility: visible; opacity: 1; transition: visibility 0s, opacity 0.4s ease; } .jhl-explore-menu__bg { position: fixed; inset: 0; background: rgba(13, 34, 64, 0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .jhl-explore-menu__inner { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 100px var(--space-md) var(--space-2xl); } .jhl-explore-menu__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-xl); } .jhl-explore-menu__title { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: white; } .jhl-explore-menu__title span { color: var(--green); } .jhl-explore-menu__close { width: 48px; height: 48px; background: rgba(255, 255, 255, 0.1); border: none; border-radius: 50%; color: white; font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; flex-shrink: 0; } .jhl-explore-menu__close:hover { background: rgba(255, 255, 255, 0.2); } /* Quick links bar */ .jhl-explore-menu__quick { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: var(--space-xl); } .jhl-explore-menu__quick a { padding: 10px 20px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 100px; color: rgba(255, 255, 255, 0.85); text-decoration: none; font-size: 14px; font-weight: 500; transition: all 0.2s; } .jhl-explore-menu__quick a:hover { background: var(--green); border-color: var(--green); color: white; } /* Phase grid */ .jhl-explore-menu__phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-bottom: var(--space-xl); } .jhl-explore-menu__phase { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); padding: var(--space-md); transition: border-color 0.2s; } .jhl-explore-menu__phase:hover { border-color: rgba(0, 200, 83, 0.3); } .jhl-explore-menu__phase-num { font-family: var(--font-display); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--green); margin-bottom: 6px; } .jhl-explore-menu__phase-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: white; margin-bottom: var(--space-sm); line-height: 1.3; } .jhl-explore-menu__phase a { display: block; padding: 6px 0; color: rgba(255, 255, 255, 0.7); text-decoration: none; font-size: 14px; font-weight: 400; transition: color 0.15s; line-height: 1.4; } .jhl-explore-menu__phase a:hover { color: var(--green); } /* Resources row at bottom */ .jhl-explore-menu__resources { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: var(--space-lg); } .jhl-explore-menu__resources-title { font-family: var(--font-display); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--green); margin-bottom: var(--space-sm); } .jhl-explore-menu__resources-grid { display: flex; flex-wrap: wrap; gap: 8px; } .jhl-explore-menu__resources-grid a { padding: 10px 20px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm); color: rgba(255, 255, 255, 0.8); text-decoration: none; font-size: 14px; font-weight: 500; transition: all 0.2s; } .jhl-explore-menu__resources-grid a:hover { background: rgba(0, 200, 83, 0.15); border-color: var(--green); color: white; } /* Explore button in header */ .jhl-explore-btn { display: flex; align-items: center; gap: 8px; padding: 10px 18px; background: none; border: 1.5px solid var(--mist); border-radius: var(--radius-sm); color: var(--charcoal); font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all var(--transition-normal); min-height: 44px; } .jhl-explore-btn:hover { border-color: var(--blue); color: var(--blue); } .jhl-explore-btn svg { width: 18px; height: 18px; } /* Responsive: Explore menu */ @media (max-width: 900px) { .jhl-explore-menu__phases { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .jhl-explore-btn { display: none; } .jhl-explore-menu__inner { padding: 80px var(--space-sm) var(--space-xl); } .jhl-explore-menu__title { font-size: 24px; } .jhl-explore-menu__phases { grid-template-columns: 1fr; gap: var(--space-sm); } .jhl-explore-menu__phase { padding: var(--space-sm); } .jhl-explore-menu__quick { gap: 8px; } .jhl-explore-menu__quick a { font-size: 13px; padding: 8px 14px; } } /* ======================================== MOBILE NAVIGATION OVERLAY ======================================== */ .jhl-mobile-nav { position: fixed; inset: 0; z-index: 1000; visibility: hidden; opacity: 0; transition: visibility 0s 0.3s, opacity 0.3s ease; } .jhl-mobile-nav.active { visibility: visible; opacity: 1; transition: visibility 0s, opacity 0.3s ease; } .jhl-mobile-nav__overlay { position: absolute; inset: 0; background: rgba(13, 34, 64, 0.5); backdrop-filter: blur(4px); } .jhl-mobile-nav__panel { position: absolute; top: 0; right: 0; width: 80%; max-width: 320px; height: 100%; background: white; padding: 2rem 1.5rem; transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; } .jhl-mobile-nav.active .jhl-mobile-nav__panel { transform: translateX(0); } .jhl-mobile-nav__close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; font-size: 2rem; color: var(--charcoal); cursor: pointer; line-height: 1; } .jhl-mobile-nav__links { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 3rem; } .jhl-mobile-nav__links a { padding: 0.75rem 0; font-size: 1.1rem; font-weight: 500; color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--mist); transition: color 0.2s; } .jhl-mobile-nav__links a:hover { color: var(--green); } .jhl-mobile-nav__links .btn { margin-top: 1rem; text-align: center; } /* ======================================== 23. CALCULATOR COMPONENT Input panel for interactive calculators ======================================== */ .jhl-calculator { background: var(--warm-white); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-soft); border: 1px solid var(--mist); } .jhl-calculator__title { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--navy); margin-bottom: var(--space-xs); } .jhl-calculator__desc { font-size: 15px; color: var(--slate); margin-bottom: var(--space-md); } .jhl-calculator__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-md); } .jhl-calculator__field { display: flex; flex-direction: column; gap: 6px; } .jhl-calculator__label { font-size: 13px; font-weight: 600; color: var(--navy); letter-spacing: 0.5px; } .jhl-calculator__input { width: 100%; padding: 12px 16px; font-family: var(--font-body); font-size: 16px; color: var(--charcoal); background: var(--cream); border: 2px solid var(--mist); border-radius: var(--radius-sm); transition: all var(--transition-fast); min-height: 44px; } .jhl-calculator__input:focus { outline: none; border-color: var(--blue); background: var(--warm-white); box-shadow: 0 0 0 4px rgba(21, 101, 160, 0.1); } .jhl-calculator__input::placeholder { color: var(--slate); opacity: 0.6; } /* Range/slider input */ .jhl-calculator__range { width: 100%; height: 6px; -webkit-appearance: none; appearance: none; background: var(--mist); border-radius: 3px; outline: none; margin-top: 8px; } .jhl-calculator__range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; background: var(--blue); border-radius: 50%; cursor: pointer; box-shadow: 0 2px 8px rgba(21, 101, 160, 0.3); transition: all var(--transition-fast); } .jhl-calculator__range::-webkit-slider-thumb:hover { background: var(--blue-hover); transform: scale(1.1); } .jhl-calculator__range::-moz-range-thumb { width: 24px; height: 24px; background: var(--blue); border-radius: 50%; cursor: pointer; border: none; box-shadow: 0 2px 8px rgba(21, 101, 160, 0.3); } .jhl-calculator__range-value { font-size: 14px; font-weight: 600; color: var(--blue); text-align: right; margin-top: 4px; } /* Select dropdown */ .jhl-calculator__select { width: 100%; padding: 12px 16px; font-family: var(--font-body); font-size: 16px; color: var(--charcoal); background: var(--cream); border: 2px solid var(--mist); border-radius: var(--radius-sm); cursor: pointer; min-height: 44px; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%235F6C7B' viewBox='0 0 16 16'%3E%3Cpath d='M8 12L2 6h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; } .jhl-calculator__select:focus { outline: none; border-color: var(--blue); background-color: var(--warm-white); } /* Calculate button */ .jhl-calculator__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 32px; font-family: var(--font-body); font-size: 16px; font-weight: 700; color: var(--navy); background: var(--green); border: none; border-radius: var(--radius-xl); cursor: pointer; transition: all var(--transition-slow); box-shadow: var(--shadow-glow); min-height: 44px; } .jhl-calculator__btn:hover { background: var(--green-dark); transform: translateY(-2px); box-shadow: 0 8px 40px rgba(0, 200, 83, 0.4); } .jhl-calculator__actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-md); } /* Helper text below inputs */ .jhl-calculator__hint { font-size: 12px; color: var(--slate); margin-top: 2px; } /* ======================================== 24. CALCULATOR RESULTS DISPLAY Results panel that appears after calculation ======================================== */ .jhl-calculator-results { background: linear-gradient(135deg, var(--blue-light) 0%, rgba(0, 200, 83, 0.05) 100%); border: 2px solid var(--blue); border-radius: var(--radius-lg); padding: var(--space-lg); margin-top: var(--space-md); animation: resultsFadeIn 0.4s ease; } @keyframes resultsFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .jhl-calculator-results__title { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: var(--space-md); display: flex; align-items: center; gap: 8px; } .jhl-calculator-results__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-md); } .jhl-calculator-results__item { text-align: center; padding: var(--space-sm); background: var(--warm-white); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); } .jhl-calculator-results__value { font-family: var(--font-display); font-size: clamp(24px, 3vw, 36px); font-weight: 800; color: var(--navy); line-height: 1.2; } .jhl-calculator-results__value--green { color: var(--green-dark); } .jhl-calculator-results__value--coral { color: var(--coral); } .jhl-calculator-results__label { font-size: 13px; font-weight: 500; color: var(--slate); margin-top: 4px; } .jhl-calculator-results__note { font-size: 14px; color: var(--slate); padding: var(--space-sm); background: var(--warm-white); border-radius: var(--radius-sm); border-left: 3px solid var(--blue); } .jhl-calculator-results__cta { margin-top: var(--space-md); text-align: center; } /* ======================================== 25. TAB NAVIGATION COMPONENT Horizontal tabs with content panels ======================================== */ .jhl-tabs { margin: var(--space-md) 0; } .jhl-tabs__nav { display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; border-bottom: 2px solid var(--mist); margin-bottom: var(--space-md); } .jhl-tabs__nav::-webkit-scrollbar { display: none; } .jhl-tabs__btn { flex-shrink: 0; padding: 12px 24px; font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--slate); background: none; border: none; border-bottom: 3px solid transparent; cursor: pointer; transition: all var(--transition-normal); white-space: nowrap; min-height: 44px; margin-bottom: -2px; } .jhl-tabs__btn:hover { color: var(--blue); background: var(--blue-light); border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .jhl-tabs__btn.active { color: var(--blue); border-bottom-color: var(--blue); background: var(--blue-light); border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .jhl-tabs__panel { display: none; animation: tabFadeIn 0.3s ease; } .jhl-tabs__panel.active { display: block; } @keyframes tabFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Pill-style tab variant (for compact groupings) */ .jhl-tabs__nav--pills { border-bottom: none; gap: 8px; flex-wrap: wrap; } .jhl-tabs__nav--pills .jhl-tabs__btn { border-bottom: none; border-radius: var(--radius-xl); background: var(--cream); border: 2px solid var(--mist); margin-bottom: 0; padding: 10px 20px; } .jhl-tabs__nav--pills .jhl-tabs__btn:hover { border-color: var(--blue); background: var(--blue-light); } .jhl-tabs__nav--pills .jhl-tabs__btn.active { background: var(--navy); color: white; border-color: var(--navy); } /* Legacy class support — many pages use .plan-tab / .plan-content */ .plan-tab { flex-shrink: 0; padding: 12px 24px; font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--slate); background: var(--cream); border: 2px solid var(--mist); border-radius: var(--radius-xl); cursor: pointer; transition: all var(--transition-normal); white-space: nowrap; min-height: 44px; } .plan-tab:hover { border-color: var(--blue); background: var(--blue-light); color: var(--blue); } .plan-tab.active { background: var(--navy); color: white; border-color: var(--navy); } .plan-content { display: none; animation: tabFadeIn 0.3s ease; } .plan-content.active { display: block; } /* ======================================== 26. SEARCH / FILTER INPUT COMPONENT Search bar with optional category filters ======================================== */ .jhl-search { margin: var(--space-md) 0; } .jhl-search__bar { position: relative; margin-bottom: var(--space-sm); } .jhl-search__icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--slate); pointer-events: none; } .jhl-search__input { width: 100%; padding: 14px 16px 14px 48px; font-family: var(--font-body); font-size: 16px; color: var(--charcoal); background: var(--warm-white); border: 2px solid var(--mist); border-radius: var(--radius-lg); transition: all var(--transition-fast); min-height: 48px; box-shadow: var(--shadow-soft); } .jhl-search__input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(21, 101, 160, 0.1), var(--shadow-soft); } .jhl-search__input::placeholder { color: var(--slate); opacity: 0.6; } .jhl-search__count { font-size: 14px; color: var(--slate); margin-bottom: var(--space-sm); } .jhl-search__filters { display: flex; gap: 8px; flex-wrap: wrap; } /* Filter buttons */ .filter-btn { padding: 8px 18px; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--slate); background: var(--warm-white); border: 2px solid var(--mist); border-radius: var(--radius-xl); cursor: pointer; transition: all var(--transition-normal); min-height: 36px; } .filter-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); } .filter-btn.active { background: var(--navy); color: white; border-color: var(--navy); } /* No results message */ .jhl-search__no-results { text-align: center; padding: var(--space-xl); color: var(--slate); } .jhl-search__no-results h3 { color: var(--navy); margin-bottom: var(--space-xs); } /* ======================================== 27. QUIZ / ASSESSMENT UI COMPONENT Question cards with options and results ======================================== */ .jhl-quiz { background: var(--warm-white); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-soft); } .jhl-quiz__title { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--navy); margin-bottom: var(--space-xs); } .jhl-quiz__desc { font-size: 15px; color: var(--slate); margin-bottom: var(--space-lg); } .jhl-quiz__progress { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); font-size: 14px; font-weight: 600; color: var(--slate); } .jhl-quiz__progress-bar { flex: 1; height: 6px; background: var(--mist); border-radius: 3px; overflow: hidden; } .jhl-quiz__progress-fill { height: 100%; background: linear-gradient(90deg, var(--blue) 0%, var(--green) 100%); border-radius: 3px; transition: width var(--transition-slow); } /* Question card */ .question { padding: var(--space-md) 0; border-bottom: 1px solid var(--mist); } .question:last-of-type { border-bottom: none; } .question h4, .question__text { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--navy); margin-bottom: var(--space-sm); } .question__number { font-size: 13px; font-weight: 700; color: var(--blue); margin-bottom: 4px; } /* Option buttons (radio/checkbox style) */ .option { display: flex; align-items: center; gap: var(--space-sm); padding: 12px 16px; margin-bottom: 8px; background: var(--cream); border: 2px solid var(--mist); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-normal); font-size: 15px; color: var(--charcoal); min-height: 44px; } .option:hover { border-color: var(--blue); background: var(--blue-light); } .option.selected { border-color: var(--blue); background: var(--blue-light); color: var(--navy); font-weight: 600; } .option.selected::before { content: '✓'; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: var(--blue); color: white; border-radius: 50%; font-size: 12px; font-weight: 700; flex-shrink: 0; } .option input[type="radio"], .option input[type="checkbox"] { margin-right: 8px; accent-color: var(--blue); width: 18px; height: 18px; } /* Quiz submit button */ .jhl-quiz__submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 32px; font-family: var(--font-body); font-size: 16px; font-weight: 700; color: var(--navy); background: var(--green); border: none; border-radius: var(--radius-xl); cursor: pointer; transition: all var(--transition-slow); box-shadow: var(--shadow-glow); min-height: 44px; margin-top: var(--space-md); } .jhl-quiz__submit:hover { background: var(--green-dark); transform: translateY(-2px); } /* Quiz results display */ .jhl-quiz__results { margin-top: var(--space-lg); padding: var(--space-lg); background: linear-gradient(135deg, var(--blue-light) 0%, rgba(0, 200, 83, 0.08) 100%); border: 2px solid var(--blue); border-radius: var(--radius-lg); animation: resultsFadeIn 0.4s ease; } .jhl-quiz__score { text-align: center; margin-bottom: var(--space-md); } .jhl-quiz__score-value { font-family: var(--font-display); font-size: clamp(48px, 6vw, 72px); font-weight: 800; color: var(--navy); line-height: 1; } .jhl-quiz__score-label { font-size: 16px; font-weight: 600; color: var(--slate); margin-top: 8px; } /* Score badge used by honest-truth.html */ #scoreBadge { display: inline-flex; align-items: center; justify-content: center; width: 120px; height: 120px; border-radius: 50%; background: linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%); font-family: var(--font-display); font-size: 36px; font-weight: 800; color: white; box-shadow: var(--shadow-medium); margin: 0 auto var(--space-md); } #results { display: none; } #results.active, #results[style*="display: block"] { display: block; } /* ======================================== 28. PROGRESS BAR / TRACKER COMPONENT Visual progress with percentage and milestones ======================================== */ .jhl-progress { margin: var(--space-md) 0; } .jhl-progress__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-xs); } .jhl-progress__label { font-size: 14px; font-weight: 600; color: var(--navy); } .jhl-progress__percentage { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--blue); } .jhl-progress__bar { width: 100%; height: 12px; background: var(--mist); border-radius: 6px; overflow: hidden; position: relative; } .jhl-progress__fill { height: 100%; background: linear-gradient(90deg, var(--blue) 0%, var(--green) 100%); border-radius: 6px; transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } .jhl-progress__fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); animation: shimmer 2s infinite; } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Milestone markers */ .jhl-progress__milestones { display: flex; justify-content: space-between; margin-top: var(--space-xs); position: relative; } .jhl-progress__milestone { display: flex; flex-direction: column; align-items: center; font-size: 11px; color: var(--slate); } .jhl-progress__milestone-dot { width: 12px; height: 12px; background: var(--mist); border: 2px solid var(--warm-white); border-radius: 50%; margin-bottom: 4px; transition: all var(--transition-normal); } .jhl-progress__milestone.reached .jhl-progress__milestone-dot { background: var(--green); box-shadow: 0 0 8px rgba(0, 200, 83, 0.4); } /* Compact progress variant (used by action-plan.html) */ #progressBar { width: 100%; height: 12px; background: var(--mist); border-radius: 6px; overflow: hidden; } #progressBar .fill, #progressBar > div { height: 100%; background: linear-gradient(90deg, var(--blue) 0%, var(--green) 100%); border-radius: 6px; transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); } /* Month navigation buttons for action-plan */ .month-button { padding: 10px 18px; font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--slate); background: var(--warm-white); border: 2px solid var(--mist); border-radius: var(--radius-xl); cursor: pointer; transition: all var(--transition-normal); min-height: 44px; } .month-button:hover { border-color: var(--blue); color: var(--blue); } .month-button.active { background: var(--navy); color: white; border-color: var(--navy); } .month-button.completed { background: var(--green); color: var(--navy); border-color: var(--green); } /* Month card container */ .month-card { display: none; background: var(--warm-white); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-soft); animation: tabFadeIn 0.3s ease; } .month-card.active { display: block; } /* Task items for checklists */ .task-item { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--mist); cursor: pointer; transition: all var(--transition-normal); } .task-item:last-child { border-bottom: none; } .task-item:hover { background: var(--cream); padding-left: 8px; padding-right: 8px; border-radius: var(--radius-sm); } .task-item.completed { opacity: 0.6; } .task-item.completed .task-item__text { text-decoration: line-through; color: var(--slate); } .task-item__checkbox { width: 22px; height: 22px; border: 2px solid var(--mist); border-radius: 6px; flex-shrink: 0; margin-top: 2px; transition: all var(--transition-fast); display: flex; align-items: center; justify-content: center; } .task-item.completed .task-item__checkbox { background: var(--green); border-color: var(--green); } .task-item.completed .task-item__checkbox::after { content: '✓'; color: white; font-size: 14px; font-weight: 700; } .task-item__text { font-size: 15px; color: var(--charcoal); line-height: 1.5; } /* ======================================== 29. SCORE SPECTRUM VISUALIZATION Gradient bar (red→yellow→green) with marker ======================================== */ .jhl-spectrum { margin: var(--space-md) 0; padding: var(--space-sm) 0; } .jhl-spectrum__label { font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: var(--space-xs); } .jhl-spectrum__bar { position: relative; height: 16px; background: linear-gradient(90deg, #DC2626 0%, #F59E0B 25%, #EAB308 50%, #84CC16 75%, #16A34A 100% ); border-radius: 8px; overflow: visible; } .jhl-spectrum__marker { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 28px; height: 28px; background: var(--navy); border: 3px solid white; border-radius: 50%; box-shadow: 0 2px 10px rgba(0,0,0,0.3); transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; } .jhl-spectrum__marker::after { content: attr(data-score); position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--navy); white-space: nowrap; } .jhl-spectrum__labels { display: flex; justify-content: space-between; margin-top: var(--space-lg); font-size: 12px; font-weight: 600; } .jhl-spectrum__labels span { color: var(--slate); } /* Range-based color zones */ .jhl-spectrum__zones { display: flex; justify-content: space-between; margin-top: var(--space-md); gap: 4px; } .jhl-spectrum__zone { flex: 1; text-align: center; padding: 8px 4px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; } .jhl-spectrum__zone--poor { background: rgba(220, 38, 38, 0.1); color: #DC2626; } .jhl-spectrum__zone--fair { background: rgba(245, 158, 11, 0.1); color: #D97706; } .jhl-spectrum__zone--good { background: rgba(234, 179, 8, 0.1); color: #CA8A04; } .jhl-spectrum__zone--great { background: rgba(132, 204, 22, 0.1); color: #65A30D; } .jhl-spectrum__zone--excellent { background: rgba(22, 163, 74, 0.1); color: #16A34A; } /* ======================================== 30. STAGE SELECTOR COMPONENT Button row for journey.html phase selection ======================================== */ .jhl-stage-selector { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: var(--space-md) 0; padding: var(--space-sm); background: var(--warm-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); } .stage-btn { display: flex; align-items: center; gap: 8px; padding: 12px 20px; font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--slate); background: var(--cream); border: 2px solid var(--mist); border-radius: var(--radius-xl); cursor: pointer; transition: all var(--transition-normal); white-space: nowrap; min-height: 44px; } .stage-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); } .stage-btn.active { background: var(--navy); color: white; border-color: var(--navy); box-shadow: 0 4px 12px rgba(13, 34, 64, 0.25); } .stage-btn.completed { background: var(--green-glow); color: var(--green-dark); border-color: var(--green); } .stage-btn__number { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.1); border-radius: 50%; font-size: 12px; font-weight: 700; } .stage-btn.active .stage-btn__number { background: rgba(255, 255, 255, 0.2); } /* Stage items in timeline */ .stage-item { position: relative; padding: var(--space-md); margin-bottom: var(--space-md); background: var(--warm-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); border-left: 4px solid var(--mist); transition: all var(--transition-normal); } .stage-item.current { border-left-color: var(--blue); box-shadow: var(--shadow-medium); } .stage-item.completed { border-left-color: var(--green); } /* YOU ARE HERE badge */ .you-are-here { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: var(--blue); color: white; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; border-radius: var(--radius-xl); margin-bottom: var(--space-xs); animation: pulse 2s infinite; } /* Expandable content within stages */ .expandable-content { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .expandable-content.expanded { max-height: 2000px; } /* ============================================= 33. JOURNEY PAGE — TIMELINE LAYOUT ============================================= */ /* Timeline Stats (intro section) */ .timeline-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-md); margin-top: var(--space-lg); } .stat-card { background: white; border-radius: var(--radius-lg); padding: var(--space-md); text-align: center; box-shadow: var(--shadow-soft); border: 1px solid var(--mist); } .stat-number { font-family: var(--font-display); font-size: 42px; font-weight: 800; color: var(--blue); display: block; line-height: 1.1; margin-bottom: 4px; } .stat-label { font-size: 13px; color: var(--slate); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } /* Timeline Selector */ .timeline-selector { background: white; border: 2px solid var(--green); border-radius: var(--radius-lg); padding: var(--space-lg); margin-bottom: var(--space-xl); text-align: center; box-shadow: var(--shadow-soft); } .timeline-selector h3 { font-family: var(--font-display); font-size: 24px; font-weight: 700; margin-bottom: var(--space-sm); color: var(--navy); } .selector-buttons { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; margin-bottom: var(--space-md); } /* Journey Timeline Container */ .journey-timeline { position: relative; padding: var(--space-xl) 0; } .journey-timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--blue) 0%, var(--green) 50%, var(--navy) 100%); transform: translateX(-50%); border-radius: 2px; } /* Phase Section */ .phase-section { margin-bottom: var(--space-xl); position: relative; } /* Phase Header */ .phase-header { background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%); color: white; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-lg); margin-bottom: var(--space-lg); position: relative; z-index: 2; box-shadow: var(--shadow-medium); } .phase-header h2 { font-family: var(--font-display); font-size: 26px; font-weight: 700; margin-bottom: var(--space-xs); color: white; } .phase-meta { display: flex; gap: var(--space-lg); flex-wrap: wrap; font-size: 14px; opacity: 0.9; } .phase-meta span { display: flex; align-items: center; gap: 6px; } /* Stage Item — Grid layout for left/right alternation */ .stage-item { display: grid; grid-template-columns: 1fr 80px 1fr; gap: var(--space-sm); align-items: start; position: relative; padding: 0; margin-bottom: var(--space-lg); background: none; border-radius: 0; box-shadow: none; border-left: none; } .stage-item.right .stage-content { grid-column: 1; grid-row: 1; } .stage-item.right .stage-marker { grid-column: 2; grid-row: 1; } .stage-item.right .stage-details { grid-column: 3; grid-row: 1; } .stage-item.left .stage-content { grid-column: 3; grid-row: 1; } .stage-item.left .stage-marker { grid-column: 2; grid-row: 1; } .stage-item.left .stage-details { grid-column: 1; grid-row: 1; text-align: right; } /* Stage Content Card */ .stage-content { background: white; border: 2px solid var(--mist); padding: var(--space-md); border-radius: var(--radius-lg); transition: all var(--transition-normal); cursor: pointer; } .stage-content:hover { border-color: var(--green); transform: scale(1.02); box-shadow: var(--shadow-medium); } .stage-content h3 { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin-bottom: 6px; color: var(--navy); } .stage-content p { font-size: 14px; color: var(--slate); line-height: 1.6; margin-bottom: 0; } .stage-item.current .stage-content { border-color: var(--green); border-width: 3px; background: rgba(0, 200, 83, 0.04); box-shadow: var(--shadow-soft); } .stage-item.completed .stage-content { opacity: 0.65; border-color: var(--mist); } /* Stage Marker (center circle) */ .stage-marker { position: relative; z-index: 2; display: flex; justify-content: center; align-items: flex-start; padding-top: var(--space-sm); } .stage-dot { width: 56px; height: 56px; border-radius: 50%; background: white; border: 4px solid var(--mist); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--slate); transition: all var(--transition-normal); box-shadow: var(--shadow-soft); } .stage-item.current .stage-dot { background: var(--green); border-color: var(--green); color: white; width: 72px; height: 72px; font-size: 28px; animation: pulse 2s infinite; box-shadow: 0 0 0 0 rgba(0, 200, 83, 0.4); } .stage-item.completed .stage-dot { background: var(--slate); border-color: var(--slate); color: white; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 200, 83, 0.5); } 50% { box-shadow: 0 0 0 16px rgba(0, 200, 83, 0); } } /* Stage Details (timeline side label) */ .stage-details { font-size: 14px; color: var(--slate); padding-top: var(--space-md); } .stage-details strong { display: block; font-size: 15px; font-weight: 600; margin-bottom: 2px; color: var(--charcoal); } /* Detail Section (expanded content) */ .detail-section { background: var(--cream); padding: var(--space-md); border-radius: var(--radius-md); margin-top: var(--space-md); text-align: left; } .detail-section h4 { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin-bottom: var(--space-sm); color: var(--navy); } .detail-section p { font-size: 14px; line-height: 1.7; color: var(--charcoal); } .detail-section ul { margin-left: var(--space-md); margin-bottom: var(--space-sm); } .detail-section li { margin-bottom: 6px; font-size: 14px; color: var(--charcoal); } /* Key Questions callout */ .key-questions { background: rgba(255, 107, 91, 0.08); border-left: 4px solid var(--coral); padding: var(--space-sm); margin: var(--space-sm) 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .key-questions strong { color: var(--coral); display: block; margin-bottom: 6px; font-size: 14px; } .key-questions ul { margin-left: var(--space-md); } .key-questions li { font-size: 14px; color: var(--charcoal); margin-bottom: 4px; font-style: italic; } /* Resources Needed callout */ .resources-needed { background: rgba(0, 200, 83, 0.06); border-left: 4px solid var(--green); padding: var(--space-sm); margin: var(--space-sm) 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .resources-needed strong { color: var(--green); display: block; margin-bottom: 6px; font-size: 14px; } .resources-needed ul { margin-left: var(--space-md); } .resources-needed li { font-size: 14px; color: var(--charcoal); margin-bottom: 4px; } /* ============================================= 34. RESPONSIVE: JOURNEY TIMELINE ============================================= */ @media (max-width: 1024px) { .phase-meta { gap: var(--space-sm); font-size: 13px; } } @media (max-width: 768px) { .journey-timeline::before { left: 28px; } .stage-item, .stage-item.left, .stage-item.right { grid-template-columns: 56px 1fr; grid-template-rows: auto auto; gap: 0 var(--space-sm); } .stage-item .stage-marker, .stage-item.left .stage-marker, .stage-item.right .stage-marker { grid-column: 1; grid-row: 1 / 3; justify-content: center; padding-top: 0; } .stage-item .stage-content, .stage-item.left .stage-content, .stage-item.right .stage-content { grid-column: 2; grid-row: 1; } .stage-item .stage-details, .stage-item.left .stage-details, .stage-item.right .stage-details { grid-column: 2; grid-row: 2; text-align: left; padding-top: 6px; padding-bottom: var(--space-sm); } .stage-dot { width: 44px; height: 44px; font-size: 18px; } .stage-item.current .stage-dot { width: 52px; height: 52px; font-size: 22px; } .phase-header { padding: var(--space-sm) var(--space-md); } .phase-header h2 { font-size: 22px; } .phase-meta { flex-direction: column; gap: 6px; } .timeline-stats { grid-template-columns: repeat(2, 1fr); } .stat-number { font-size: 32px; } .timeline-selector { padding: var(--space-md); } .selector-buttons { gap: 8px; } } @media (max-width: 480px) { .timeline-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); } .stat-number { font-size: 28px; } .stat-label { font-size: 11px; } .stage-content h3 { font-size: 17px; } .stage-content p { font-size: 13px; } } /* ======================================== 31. ADDITIONAL INTERACTIVE UTILITIES Debt method cards, FAQ items, etc. ======================================== */ /* Debt method cards (financial-toolkit.html) */ .debt-method-card { padding: var(--space-md); background: var(--warm-white); border: 2px solid var(--mist); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-normal); } .debt-method-card:hover { border-color: var(--blue); } .debt-method-card.selected { border-color: var(--blue); background: var(--blue-light); box-shadow: 0 0 0 4px rgba(21, 101, 160, 0.1); } /* Budget optimizer inputs */ .budget-input { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) 0; border-bottom: 1px solid var(--mist); } .budget-input:last-child { border-bottom: none; } .budget-input label { flex: 1; font-size: 14px; color: var(--charcoal); } .budget-input input { width: 100px; padding: 8px 12px; font-family: var(--font-body); font-size: 14px; border: 2px solid var(--mist); border-radius: var(--radius-sm); text-align: right; background: var(--cream); } .budget-input input:focus { outline: none; border-color: var(--blue); background: var(--warm-white); } /* FAQ items (faqs.html) */ .faq-item { background: var(--warm-white); border-radius: var(--radius-md); margin-bottom: 8px; border: 1px solid var(--mist); overflow: hidden; transition: all var(--transition-normal); } .faq-item.hidden { display: none; } .faq-item .jhl-accordion__trigger { padding: var(--space-sm) var(--space-md); } /* Timeline navigation for action-plan */ #timelineNav { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: var(--space-md); } /* ======================================== 32. RESPONSIVE: NEW COMPONENTS ======================================== */ @media (max-width: 768px) { .jhl-calculator__grid { grid-template-columns: 1fr; } .jhl-calculator-results__grid { grid-template-columns: repeat(2, 1fr); } .jhl-tabs__btn { padding: 10px 16px; font-size: 13px; } .jhl-stage-selector { gap: 6px; } .stage-btn { padding: 10px 14px; font-size: 13px; } .jhl-spectrum__zones { flex-direction: column; } #timelineNav { gap: 6px; } .month-button { padding: 8px 14px; font-size: 13px; } } @media (max-width: 480px) { .jhl-calculator { padding: var(--space-md); } .jhl-calculator-results { padding: var(--space-md); } .jhl-calculator-results__grid { grid-template-columns: 1fr; } .jhl-tabs__nav { gap: 2px; } .jhl-tabs__btn { padding: 8px 12px; font-size: 12px; } .plan-tab { padding: 8px 14px; font-size: 12px; } .stage-btn { padding: 8px 12px; font-size: 12px; } .jhl-quiz { padding: var(--space-md); } .option { padding: 10px 12px; font-size: 14px; } } /* ============================================= 35. HONEST TRUTH — QUIZ & RESULTS ============================================= */ /* Quiz intro header */ .quiz-intro { text-align: center; margin-bottom: var(--space-lg); } .quiz-intro h2 { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: var(--navy); margin-bottom: var(--space-sm); } .quiz-intro p { font-size: 17px; color: var(--slate); } /* Quiz container */ .quiz-container { max-width: 800px; margin: 0 auto; } /* Question number badge */ .question-number { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--blue); color: white; border-radius: 50%; font-family: var(--font-display); font-size: 16px; font-weight: 700; margin-right: 8px; flex-shrink: 0; } /* Results section */ .results { display: none; max-width: 800px; margin: var(--space-xl) auto 0; padding: var(--space-xl); background: white; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); border-top: 4px solid var(--green); } .results.show { display: block; animation: fadeIn 0.5s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .results h2 { font-family: var(--font-display); text-align: center; color: var(--navy); } /* Score badge */ .score-badge { font-family: var(--font-display); font-size: 48px; font-weight: 800; text-align: center; color: var(--blue); margin: var(--space-md) 0; padding: var(--space-md); background: var(--cream); border-radius: var(--radius-lg); } /* Result content sections */ .result-content h3 { font-family: var(--font-display); font-size: 22px; color: var(--navy); margin: var(--space-md) 0 var(--space-sm); } .result-content ul { margin-left: var(--space-md); margin-bottom: var(--space-md); } .result-content li { margin-bottom: 8px; font-size: 15px; line-height: 1.6; color: var(--charcoal); } /* Next steps in results */ .next-steps { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--mist); } .next-steps h3 { font-family: var(--font-display); font-size: 24px; color: var(--navy); margin-bottom: var(--space-md); } /* CTA group in results */ .cta-group { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; margin-top: var(--space-lg); } .btn-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: white; color: var(--blue); font-weight: 600; font-size: 15px; border: 2px solid var(--blue); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-normal); } .btn-secondary:hover { background: var(--blue); color: white; transform: translateY(-2px); box-shadow: var(--shadow-medium); } /* Myth cards */ .myth-card { background: white; border-radius: var(--radius-lg); padding: var(--space-lg); margin-bottom: var(--space-md); border: 1px solid var(--mist); box-shadow: var(--shadow-soft); transition: all var(--transition-normal); } .myth-card:hover { box-shadow: var(--shadow-medium); transform: translateY(-2px); } .myth-card h3 { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--coral); margin-bottom: var(--space-sm); } .myth-card .truth { font-size: 17px; font-weight: 600; color: var(--green); margin-bottom: var(--space-sm); } .myth-card p { font-size: 15px; line-height: 1.7; color: var(--charcoal); } /* Calculator preview box */ .calculator-preview { text-align: center; padding: var(--space-xl); background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%); border-radius: var(--radius-lg); color: white; } .calculator-preview h2 { font-family: var(--font-display); color: white; margin-bottom: var(--space-sm); } .calculator-preview p { color: rgba(255, 255, 255, 0.9); margin-bottom: var(--space-md); font-size: 17px; } /* ============================================= 36. FINANCIAL TOOLKIT — CALCULATORS ============================================= */ /* Snapshot grid */ .snapshot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-md); } /* Snapshot card */ .snapshot-card { background: white; border: 1px solid var(--mist); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-soft); } .snapshot-card h3 { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--navy); margin-bottom: var(--space-md); display: flex; align-items: center; gap: 8px; } .snapshot-card h3 span { font-size: 24px; } /* Input group */ .input-group { margin-bottom: var(--space-md); } .input-group label { display: block; font-size: 13px; font-weight: 600; color: var(--slate); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; } .input-group input[type="number"], .input-group select { width: 100%; padding: 12px 14px; border: 2px solid var(--mist); border-radius: var(--radius-md); font-size: 16px; font-family: var(--font-body); color: var(--charcoal); background: white; transition: border-color var(--transition-normal); } .input-group input[type="number"]:focus, .input-group select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(21, 101, 160, 0.1); } /* Snapshot result */ .snapshot-result { background: var(--cream); border-radius: var(--radius-md); padding: var(--space-sm); text-align: center; margin-top: var(--space-sm); } .snapshot-result .label { font-size: 12px; font-weight: 600; color: var(--slate); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .snapshot-result .value { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--navy); } .snapshot-result.positive .value { color: var(--green); } .snapshot-result.negative .value { color: var(--coral); } /* Calc grid (Down Payment Calculator) */ .calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-lg); } /* Calc results grid */ .calc-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-md); } /* Calc result card */ .calc-result-card { background: var(--cream); border-radius: var(--radius-md); padding: var(--space-md); text-align: center; border: 1px solid var(--mist); } .calc-result-card .label { font-size: 12px; font-weight: 600; color: var(--slate); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } .calc-result-card .value { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--navy); } .calc-result-card .subtext { font-size: 12px; color: var(--slate); margin-top: 4px; } .calc-result-card.highlight { background: linear-gradient(135deg, rgba(0, 200, 83, 0.08) 0%, rgba(0, 200, 83, 0.02) 100%); border-color: var(--green); } .calc-result-card.highlight .value { color: var(--green); } /* Plan overview (Savings plan header) */ .plan-overview { margin-bottom: var(--space-lg); } .plan-overview h4 { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--navy); margin-bottom: var(--space-sm); } .plan-overview p { font-size: 15px; color: var(--slate); margin-bottom: var(--space-md); } /* Plan stats row */ .plan-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-md); } .plan-stat { text-align: center; padding: var(--space-sm); background: white; border-radius: var(--radius-md); border: 1px solid var(--mist); } .plan-stat .value { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--blue); display: block; } .plan-stat .label { font-size: 12px; color: var(--slate); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } /* Monthly breakdown */ .monthly-breakdown { display: grid; gap: var(--space-md); } /* Month cards inside plan breakdowns should always be visible */ .monthly-breakdown .month-card { display: block; } .month-target { float: right; color: var(--green); font-weight: 700; font-size: 14px; } /* Pros/cons in debt method cards */ .pros-cons { margin-top: var(--space-sm); } .pro, .con { padding: 6px 0; font-size: 14px; padding-left: 24px; position: relative; line-height: 1.5; } .pro::before { content: "+"; position: absolute; left: 0; color: var(--green); font-weight: 700; font-size: 16px; } .con::before { content: "−"; position: absolute; left: 0; color: var(--coral); font-weight: 700; font-size: 16px; } /* Method badge */ .method-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-xl); background: var(--cream); color: var(--blue); margin-bottom: var(--space-sm); } /* Budget expense categories */ .expense-categories { display: grid; gap: var(--space-lg); } .expense-category { background: var(--white); border: 2px solid var(--mist); border-radius: 12px; padding: var(--space-md) var(--space-lg); } .expense-category h4 { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--navy); margin-bottom: var(--space-sm); } .expense-items { display: grid; gap: var(--space-sm); } .expense-item { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-sm); align-items: center; } .expense-item label { font-size: 14px; color: var(--charcoal); } .savings-potential { font-size: 12px; font-weight: 600; color: var(--green); white-space: nowrap; } .current-amount { font-family: var(--font-display); font-weight: 600; color: var(--navy); } /* Program cards (DPA programs) */ .program-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-md); } .program-card { background: white; border: 1px solid var(--mist); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); transition: all var(--transition-normal); } .program-card:hover { box-shadow: var(--shadow-medium); transform: translateY(-2px); } .program-header { background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%); color: white; padding: var(--space-md); } .program-header h4 { font-family: var(--font-display); font-size: 18px; font-weight: 600; } .program-badge { display: inline-block; background: var(--green); color: white; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-xl); margin-top: 8px; } .program-details { padding: var(--space-md); } .program-detail { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--mist); font-size: 14px; } .program-detail:last-child { border-bottom: none; } .program-detail .label { color: var(--slate); } .program-detail .value { font-weight: 600; color: var(--charcoal); } .requirements { padding: 0 var(--space-md) var(--space-md); } .requirements h5 { font-size: 13px; font-weight: 600; color: var(--navy); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } .requirements ul { margin-left: var(--space-md); } .requirements li { font-size: 13px; color: var(--slate); margin-bottom: 4px; } /* Gift rules grid */ .gift-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-md); } .gift-rule-card { background: white; border: 1px solid var(--mist); border-radius: var(--radius-lg); padding: var(--space-md); box-shadow: var(--shadow-soft); } .rule-number { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--blue); color: white; border-radius: 50%; font-family: var(--font-display); font-weight: 700; font-size: 16px; margin-bottom: var(--space-sm); } /* ============================================= 37. RESPONSIVE: HONEST TRUTH + TOOLKIT ============================================= */ @media (max-width: 768px) { .quiz-intro h2 { font-size: 26px; } .score-badge { font-size: 36px; } .results { padding: var(--space-md); } .cta-group { flex-direction: column; align-items: stretch; } .snapshot-grid { grid-template-columns: 1fr; } .calc-grid { grid-template-columns: 1fr; } .calc-results { grid-template-columns: repeat(2, 1fr); } .plan-stats { grid-template-columns: 1fr; gap: var(--space-sm); } .expense-item { grid-template-columns: 1fr; gap: 4px; } .program-cards { grid-template-columns: 1fr; } } @media (max-width: 480px) { .calc-results { grid-template-columns: 1fr; } .snapshot-card { padding: var(--space-md); } .gift-rules { grid-template-columns: 1fr; } } /* ============================================= 38. INCOME GRID & OPTIMIZER (Financial Toolkit) ============================================= */ /* Income side hustle grid */ .income-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-md); } .income-card { background: white; border: 1px solid var(--mist); border-radius: var(--radius-lg); padding: var(--space-md); box-shadow: var(--shadow-soft); transition: all var(--transition-normal); } .income-card:hover { box-shadow: var(--shadow-medium); transform: translateY(-2px); } .income-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .income-header h4 { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--navy); } .potential { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--green); white-space: nowrap; } .difficulty { font-size: 12px; font-weight: 600; color: var(--blue); background: rgba(21, 101, 160, 0.08); display: inline-block; padding: 3px 10px; border-radius: var(--radius-xl); margin-bottom: 8px; } .income-card p { font-size: 14px; color: var(--slate); line-height: 1.6; margin-bottom: 8px; } .time-frame { font-size: 12px; color: var(--slate); font-weight: 500; padding-top: 8px; border-top: 1px solid var(--mist); } /* Program description */ .description { padding: var(--space-sm) var(--space-md); font-size: 14px; color: var(--slate); line-height: 1.6; } /* Budget Optimizer Summary */ .optimizer-summary { background: white; border-radius: var(--radius-lg); padding: var(--space-lg); margin-top: var(--space-lg); box-shadow: var(--shadow-soft); border: 1px solid var(--mist); } .optimizer-summary h4 { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--navy); text-align: center; margin-bottom: var(--space-md); } .optimizer-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } .optimizer-result { text-align: center; padding: var(--space-md); background: var(--cream); border-radius: var(--radius-md); } .optimizer-result .label { font-size: 12px; font-weight: 600; color: var(--slate); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } .optimizer-result .value { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--navy); } .optimizer-result.highlight { background: linear-gradient(135deg, rgba(0, 200, 83, 0.08) 0%, rgba(0, 200, 83, 0.02) 100%); border: 1px solid var(--green); } .optimizer-result.highlight .value { color: var(--green); } @media (max-width: 768px) { .income-grid { grid-template-columns: 1fr; } .optimizer-results { grid-template-columns: 1fr; } } /* ============================================= 39. HOMEPAGE UTILITY CLASSES Hero CTA group, card icons, section CTAs ============================================= */ /* Hero dual-CTA button row */ .jhl-hero__cta-group { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; margin-top: var(--space-md); } /* Hero small subtext below CTAs */ .jhl-hero__subtext { font-size: 14px; color: var(--slate); margin-top: var(--space-sm); text-align: center; } /* Hero acknowledgment info-box override */ .jhl-hero__acknowledgment { max-width: 560px; margin: 0 auto var(--space-lg); text-align: left; } /* Wider intro inner for trust stats row */ .jhl-intro__inner--wide { max-width: 900px; } /* Card icon (emoji) above title */ .jhl-card__icon { font-size: 36px; line-height: 1; margin-bottom: var(--space-sm); } /* Centered CTA below a section */ .jhl-section__cta { text-align: center; margin-top: var(--space-lg); } /* Takeaways wrapper (replaces inline style) */ .jhl-takeaways__wrapper { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } @media (max-width: 480px) { .jhl-hero__cta-group { flex-direction: column; align-items: center; } .jhl-card__icon { font-size: 28px; } } /* ============================================= */ /* 40. JOURNEY PAGE UTILITY CLASSES */ /* ============================================= */ /* Selector description text */ .jhl-journey__selector-desc { margin-bottom: var(--space-md); color: var(--slate); } /* Selector helper/hint text */ .jhl-journey__selector-hint { font-size: 13px; color: var(--slate); } /* Spacing utilities (reusable) */ .jhl-mt-xl { margin-top: var(--space-xl); } .jhl-mt-lg { margin-top: var(--space-lg); } .jhl-mt-md { margin-top: var(--space-md); } .jhl-mt-sm { margin-top: var(--space-sm); } /* ============================================= */ /* 41. SHARED PAGE UTILITY CLASSES */ /* ============================================= */ /* Centered section heading (used across pages) */ .jhl-section__heading--centered { text-align: center; margin-bottom: var(--space-lg); } /* Quiz results steps list (honest-truth.html) */ .jhl-results__steps { margin-left: 24px; font-size: 16px; line-height: 1.8; } /* ============================================= */ /* 42. FINANCIAL TOOLKIT UTILITY CLASSES */ /* ============================================= */ /* Section description text (centered gray) */ .jhl-toolkit__desc { text-align: center; color: var(--slate); margin-bottom: var(--space-lg); } .jhl-toolkit__desc--tight { margin-bottom: var(--space-sm); } .jhl-toolkit__desc--md { margin-bottom: var(--space-md); } /* Input helper text */ .jhl-toolkit__helper { font-size: 12px; color: var(--slate); margin-top: 4px; } /* Results metric grid */ .jhl-toolkit__result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-md); margin-top: var(--space-md); } /* Calculator panel card */ .jhl-toolkit__calc-panel { background: white; padding: var(--space-xl); border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); } /* Italic note/footnote */ .jhl-toolkit__note { font-size: 12px; color: var(--slate); margin-top: var(--space-sm); font-style: italic; } /* Plain list (no bullets) */ .jhl-list--plain { list-style: none; padding: 0; margin-top: var(--space-sm); } .jhl-list--plain li { padding: 4px 0; } /* Indented list (card lists) */ .jhl-list--indented { padding-left: 20px; } /* ============================================= */ /* 43. PRE-APPROVAL & COMPARISON UTILITIES */ /* ============================================= */ /* Comparison card plus/minus markers */ .jhl-comparison__plus { color: var(--green); font-weight: bold; } .jhl-comparison__minus { color: var(--coral); font-weight: bold; } /* ============================================= */ /* 44. LENDER SHOPPING PAGE CLASSES */ /* ============================================= */ /* Section lead text (larger intro paragraph) */ .jhl-lender__lead { font-size: 18px; margin-bottom: var(--space-lg); } /* Results panel note */ .jhl-lender__result-note { margin-bottom: var(--space-lg); opacity: 0.9; } /* Results total row (highlighted) */ .jhl-lender__result-total { border-top: 2px solid var(--green); margin-top: var(--space-md); padding-top: var(--space-lg); } /* Larger result label */ .jhl-lender__result-label-lg { font-size: 20px; } /* Savings highlight box */ .jhl-lender__savings-box { margin-top: var(--space-lg); padding: var(--space-md); background: rgba(0, 200, 83, 0.1); border-radius: 8px; } /* Savings message text */ .jhl-lender__savings-msg { font-size: 18px; margin: 0; } /* "Best for" description text */ .jhl-lender__best-for { margin-top: var(--space-md); font-size: 16px; color: var(--slate); } /* CTA subtext */ .jhl-lender__subtext { margin-top: var(--space-md); font-size: 14px; color: var(--slate); } /* Hidden utility (JS-toggled) */ .jhl-hidden { display: none; } /* ============================================= */ /* 45. MORTGAGE TYPES PAGE CLASSES */ /* ============================================= */ /* Centered text block with max-width */ .jhl-section__centered-text { text-align: center; max-width: 800px; margin: 0 auto var(--space-lg) auto; } /* ============================================= */ /* 46. BATCH D: HOUSE HUNTING PAGE CLASSES */ /* ============================================= */ /* Priority worksheet labels */ .jhl-priority--must { color: var(--green); } .jhl-priority--nice { color: var(--purple); } .jhl-priority--skip { color: var(--slate); } /* Extra-small margin-top (8px) */ .jhl-mt-xs { margin-top: 8px; } /* Margin-bottom utilities */ .jhl-mb-md { margin-bottom: var(--space-md); } /* Muted list (gray text in cards) */ .jhl-list--muted { margin-top: var(--space-xs, 4px); color: var(--slate); } /* Blue subheading */ .jhl-section__subheading--blue { color: var(--blue); margin-bottom: var(--space-sm); } /* School district card description */ .jhl-district__desc { color: var(--slate); font-size: 14px; } /* Formula display (property tax, etc.) */ .jhl-formula { text-align: center; font-size: 20px; font-weight: 700; color: var(--blue); } /* Text alignment utility */ .jhl-text-right { text-align: right; } /* Quiz intro text */ .jhl-quiz__intro { margin-bottom: var(--space-md); opacity: 0.9; } /* Card price tag variants */ .jhl-card__price { font-weight: 600; margin-bottom: var(--space-xs, 4px); } .jhl-card__price--green { color: var(--green); } .jhl-card__price--purple { color: var(--purple); } .jhl-card__price--blue { color: var(--blue); } /* ============================================= */ /* 47. BATCH E: OFFERS & NEGOTIATION CLASSES */ /* ============================================= */ /* Spaced list (wider line-height) */ .jhl-list--spaced { margin-top: 12px; padding-left: 20px; line-height: 1.8; } /* Offer result label */ .jhl-offer__result-label { font-weight: 600; margin-bottom: 12px; } /* Offer comparison grid */ .jhl-offer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 24px; } /* White panel card */ .jhl-offer__panel { background: var(--warm-white, #fff); border-radius: 12px; padding: 20px; } /* Gray panel card */ .jhl-offer__panel--gray { background: var(--cream); border-radius: 12px; padding: 24px; } /* Strength meter header row */ .jhl-offer__strength-header { display: flex; justify-content: space-between; align-items: center; } /* Strength meter tips text */ .jhl-offer__strength-tips { font-size: 0.9rem; opacity: 0.9; margin-top: 12px; } /* Escalation clause highlights */ .jhl-escalation__highlight { background: rgba(0, 200, 83, 0.2); } .jhl-escalation__highlight--strong { background: rgba(0, 200, 83, 0.3); } /* Escalation calculator description */ .jhl-escalation__desc { font-size: 14px; opacity: 0.8; margin-bottom: var(--space-md); } /* Escalation percentage text */ .jhl-escalation__percent { font-size: 14px; opacity: 0.8; margin-top: var(--space-xs, 4px); } /* Escalation pro-tip box */ .jhl-escalation__tip-box { margin-top: var(--space-md); padding: var(--space-sm); background: rgba(255, 255, 255, 0.1); border-radius: 8px; } .jhl-escalation__tip-text { font-size: 14px; margin: 0; } /* ============================================= 48. LEAD CAPTURE MODAL Global modal triggered by #verified-network CTAs ============================================= */ /* --- Overlay --- */ .jhl-modal-overlay { position: fixed; inset: 0; z-index: 1100; background: rgba(13, 34, 64, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .jhl-modal-overlay.active { opacity: 1; visibility: visible; } /* --- Modal Container --- */ .jhl-lead-modal { background: var(--warm-white); border-radius: var(--radius-lg); width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-strong), 0 0 0 1px rgba(13, 34, 64, 0.05); transform: scale(0.92) translateY(10px); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); position: relative; } .jhl-modal-overlay.active .jhl-lead-modal { transform: scale(1) translateY(0); } /* --- Modal Header --- */ .jhl-lead-modal__header { padding: 32px 32px 0; position: relative; } .jhl-lead-modal__close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; border-radius: 50%; transition: background 0.2s; color: var(--slate); } .jhl-lead-modal__close:hover { background: var(--mist); color: var(--charcoal); } .jhl-lead-modal__close svg { width: 20px; height: 20px; } .jhl-lead-modal__badge { display: inline-flex; align-items: center; gap: 6px; background: var(--green-glow); color: var(--green-dark); font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 50px; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 16px; } .jhl-lead-modal__badge svg { width: 14px; height: 14px; } .jhl-lead-modal__title { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--navy); line-height: 1.25; margin-bottom: 6px; padding-right: 32px; } .jhl-lead-modal__subtitle { font-size: 15px; color: var(--slate); line-height: 1.5; } /* --- Modal Body / Form --- */ .jhl-lead-modal__body { padding: 24px 32px 32px; } .jhl-lead-form { display: flex; flex-direction: column; gap: 16px; } .jhl-lead-form__field { display: flex; flex-direction: column; gap: 5px; } .jhl-lead-form__label { font-size: 14px; font-weight: 600; color: var(--charcoal); } .jhl-lead-form__label .optional { font-weight: 400; color: var(--slate); font-size: 12px; } .jhl-lead-form__input { width: 100%; padding: 14px 16px; font-family: var(--font-body); font-size: 16px; color: var(--charcoal); background: var(--cream); border: 1.5px solid var(--mist); border-radius: var(--radius-sm); transition: border-color 0.2s, box-shadow 0.2s; outline: none; } .jhl-lead-form__input::placeholder { color: #A0ADB8; } .jhl-lead-form__input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(21, 101, 160, 0.1); background: white; } .jhl-lead-form__input.error { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255, 107, 91, 0.1); } .jhl-lead-form__helper { font-size: 12px; color: var(--slate); display: flex; align-items: center; gap: 4px; } .jhl-lead-form__helper svg { width: 12px; height: 12px; color: var(--green); flex-shrink: 0; } .jhl-lead-form__error { font-size: 13px; color: var(--coral); min-height: 0; overflow: hidden; transition: all 0.2s; } .jhl-lead-form__submit { width: 100%; padding: 16px 24px; background: var(--green); color: var(--navy); font-family: var(--font-body); font-weight: 700; font-size: 16px; border: none; border-radius: 50px; cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 16px rgba(0, 200, 83, 0.25); margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 8px; } .jhl-lead-form__submit:hover { background: var(--green-dark); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(0, 200, 83, 0.35); } .jhl-lead-form__submit:active { transform: translateY(0); } .jhl-lead-form__submit:disabled { opacity: 0.7; cursor: not-allowed; transform: none; } .jhl-lead-form__submit .jhl-spinner { width: 18px; height: 18px; border: 2.5px solid rgba(13, 34, 64, 0.2); border-top-color: var(--navy); border-radius: 50%; animation: jhlSpin 0.6s linear infinite; display: none; } .jhl-lead-form__submit.loading .jhl-spinner { display: block; } .jhl-lead-form__submit.loading .jhl-btn-text { display: none; } @keyframes jhlSpin { to { transform: rotate(360deg); } } .jhl-lead-form__trust { text-align: center; font-size: 12px; color: var(--slate); display: flex; align-items: center; justify-content: center; gap: 5px; } .jhl-lead-form__trust svg { width: 13px; height: 13px; color: var(--green); flex-shrink: 0; } .jhl-lead-form__social { text-align: center; font-size: 13px; color: var(--slate); border-top: 1px solid var(--mist); padding-top: 16px; margin-top: 4px; } .jhl-lead-form__social strong { color: var(--charcoal); } /* --- Success State --- */ .jhl-lead-modal__success { padding: 40px 32px 32px; text-align: center; display: none; } .jhl-lead-modal__success.active { display: block; } .jhl-lead-modal__form.hidden { display: none; } .jhl-success-check { width: 72px; height: 72px; margin: 0 auto 20px; background: var(--green-glow); border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: jhlSuccessPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .jhl-success-check svg { width: 36px; height: 36px; color: var(--green); stroke-dasharray: 50; stroke-dashoffset: 50; animation: jhlCheckDraw 0.4s 0.3s ease-out forwards; } @keyframes jhlSuccessPop { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes jhlCheckDraw { to { stroke-dashoffset: 0; } } .jhl-success-title { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--navy); margin-bottom: 8px; } .jhl-success-subtitle { font-size: 15px; color: var(--slate); margin-bottom: 28px; line-height: 1.5; } /* --- Enrichment (post-submit optional questions) --- */ .jhl-enrichment { text-align: left; background: var(--cream); border-radius: var(--radius-md); padding: 20px; margin-bottom: 20px; } .jhl-enrichment__label { font-size: 13px; font-weight: 700; color: var(--charcoal); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .jhl-enrichment__options { display: flex; flex-wrap: wrap; gap: 6px; } .jhl-enrichment__option { display: block; } .jhl-enrichment__option input { position: absolute; opacity: 0; pointer-events: none; } .jhl-enrichment__option span { display: inline-block; padding: 7px 14px; font-size: 13px; font-family: var(--font-body); color: var(--slate); background: white; border: 1.5px solid var(--mist); border-radius: 50px; cursor: pointer; transition: all 0.2s; user-select: none; } .jhl-enrichment__option span:hover { border-color: var(--blue); color: var(--blue); } .jhl-enrichment__option input:checked + span { background: var(--blue); color: white; border-color: var(--blue); } .jhl-enrichment + .jhl-enrichment { margin-top: 0; } .jhl-success-done { width: 100%; padding: 14px 24px; background: var(--navy); color: white; font-family: var(--font-body); font-weight: 600; font-size: 15px; border: none; border-radius: 50px; cursor: pointer; transition: all 0.2s; } .jhl-success-done:hover { background: var(--blue); } /* --- Already Connected State --- */ .jhl-lead-modal__already { padding: 48px 32px 36px; text-align: center; display: none; } .jhl-lead-modal__already.active { display: block; } .jhl-already-icon { width: 56px; height: 56px; margin: 0 auto 16px; color: var(--green); } .jhl-already-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--navy); margin-bottom: 8px; } .jhl-already-text { font-size: 15px; color: var(--slate); margin-bottom: 24px; line-height: 1.5; } .jhl-already-close { padding: 12px 32px; background: var(--mist); color: var(--charcoal); font-family: var(--font-body); font-weight: 600; font-size: 14px; border: none; border-radius: 50px; cursor: pointer; transition: all 0.2s; } .jhl-already-close:hover { background: var(--cream-dark); } /* --- Modal Mobile (Bottom Sheet) --- */ @media (max-width: 640px) { .jhl-modal-overlay { align-items: flex-end; padding: 0; } .jhl-lead-modal { max-width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 92vh; transform: translateY(100%); } .jhl-modal-overlay.active .jhl-lead-modal { transform: translateY(0); } .jhl-lead-modal::before { content: ''; display: block; width: 36px; height: 4px; background: var(--mist); border-radius: 2px; margin: 10px auto 4px; } .jhl-lead-modal__header { padding: 20px 20px 0; } .jhl-lead-modal__body { padding: 20px 20px 28px; } .jhl-lead-modal__success { padding: 32px 20px 28px; } .jhl-lead-modal__already { padding: 40px 20px 28px; } .jhl-lead-modal__title { font-size: 22px; } } /* --- Modal Scrollbar --- */ .jhl-lead-modal::-webkit-scrollbar { width: 6px; } .jhl-lead-modal::-webkit-scrollbar-track { background: transparent; } .jhl-lead-modal::-webkit-scrollbar-thumb { background: var(--mist); border-radius: 3px; } /* --- Shake Animation (validation) --- */ @keyframes jhlShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } .jhl-shake { animation: jhlShake 0.4s ease-in-out; } /* ============================================= 40. SEARCH & FILTER (FAQs, Jargon Buster) ============================================= */ .search-section { margin-bottom: var(--space-lg); } .search-box { position: relative; max-width: 600px; margin: 0 auto var(--space-md); } .search-input { width: 100%; padding: 16px 20px 16px 48px; font-family: var(--font-body); font-size: 16px; border: 2px solid var(--mist); border-radius: 12px; background: var(--white); color: var(--charcoal); transition: border-color 0.2s, box-shadow 0.2s; outline: none; box-sizing: border-box; } .search-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(21, 101, 160, 0.12); } .search-input::placeholder { color: var(--gray-medium); } .search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; pointer-events: none; } .search-results-count { text-align: center; color: var(--gray-medium); font-size: 14px; margin-bottom: var(--space-md); } .category-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: var(--space-lg); } /* ============================================= 41. TABBED RESOURCES (Homeowner Resources) ============================================= */ .resource-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-lg); justify-content: center; } .resource-tab { padding: 10px 20px; border: 2px solid var(--mist); border-radius: 50px; background: var(--white); color: var(--charcoal); font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .resource-tab:hover { border-color: var(--blue); color: var(--blue); } .resource-tab.active { background: var(--blue); border-color: var(--blue); color: var(--white); } .tab-content { display: none; } .tab-content.active { display: block; } .resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-md); } .resource-link { display: inline-block; margin-top: var(--space-sm); color: var(--blue); font-weight: 600; font-size: 14px; text-decoration: none; transition: color 0.2s; } .resource-link:hover { color: var(--navy); } /* ============================================= 42. PRIORITIES WORKSHEET ============================================= */ .worksheet-section { margin-bottom: var(--space-xl); } .worksheet-section .section-header { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); padding-bottom: var(--space-sm); border-bottom: 2px solid var(--mist); } .worksheet-section .section-number { width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: var(--white); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 18px; flex-shrink: 0; } .worksheet-section .section-title h3 { margin: 0 0 2px; font-size: 20px; } .worksheet-section .section-title p { margin: 0; color: var(--gray-medium); font-size: 14px; } .worksheet-section .section-status { margin-left: auto; font-size: 20px; flex-shrink: 0; } .priority-grid { display: flex; flex-direction: column; gap: var(--space-sm); } .priority-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: 16px 20px; background: var(--white); border: 2px solid var(--mist); border-radius: 12px; transition: border-color 0.2s; } .priority-item:hover { border-color: var(--blue-light); } .priority-label { font-weight: 600; font-size: 15px; color: var(--charcoal); } .priority-desc { font-size: 13px; color: var(--gray-medium); margin-top: 2px; } .priority-options { display: flex; gap: 6px; flex-shrink: 0; } .priority-btn { padding: 8px 14px; border: 2px solid var(--mist); border-radius: 8px; background: var(--white); color: var(--gray-medium); font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .priority-btn:hover { border-color: var(--blue); color: var(--blue); } .priority-btn[data-value="must-have"].selected { background: var(--green); border-color: var(--green); color: var(--white); } .priority-btn[data-value="nice-have"].selected { background: var(--blue); border-color: var(--blue); color: var(--white); } .priority-btn[data-value="not-important"].selected { background: var(--gray-medium); border-color: var(--gray-medium); color: var(--white); } .jhl-priority--must { color: var(--green); } .jhl-priority--nice { color: var(--blue); } .jhl-priority--skip { color: var(--gray-medium); } /* Worksheet progress bar */ .worksheet-progress { margin-top: var(--space-lg); background: var(--white); border: 2px solid var(--mist); border-radius: 12px; padding: 16px 20px; } .progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .progress-title { font-weight: 700; color: var(--charcoal); } .progress-count { font-size: 14px; color: var(--gray-medium); } .progress-bar { height: 8px; background: var(--mist); border-radius: 4px; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--blue), var(--green)); border-radius: 4px; transition: width 0.4s ease; } /* Worksheet summary */ .summary-section { margin-top: var(--space-xl); padding: var(--space-lg); background: var(--cream); border-radius: 16px; border: 2px solid var(--mist); display: none; } .summary-section h2 { text-align: center; margin-bottom: var(--space-lg); } .summary-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-bottom: var(--space-lg); } .summary-column h4 { margin: 0 0 var(--space-sm); font-size: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--mist); } .summary-list { list-style: none; padding: 0; margin: 0; } .summary-list li { padding: 6px 0; font-size: 14px; color: var(--charcoal); border-bottom: 1px solid var(--mist); } .summary-list li:last-child { border-bottom: none; } .summary-empty { color: var(--gray-medium); font-style: italic; } .action-buttons { display: flex; gap: var(--space-sm); justify-content: center; } .action-buttons .btn-outline { padding: 12px 24px; border: 2px solid var(--mist); border-radius: 8px; background: var(--white); color: var(--charcoal); font-family: var(--font-body); font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.2s; } .action-buttons .btn-outline:hover { border-color: var(--coral); color: var(--coral); } .action-buttons .btn-primary { padding: 12px 24px; border: none; border-radius: 8px; background: var(--green); color: var(--white); font-family: var(--font-body); font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.2s; } .action-buttons .btn-primary:hover { opacity: 0.9; } /* Worksheet text inputs */ .text-input-group { margin-bottom: var(--space-md); } .text-label { display: block; font-weight: 600; font-size: 14px; color: var(--charcoal); margin-bottom: 6px; } .text-input { width: 100%; min-height: 80px; padding: 12px 16px; font-family: var(--font-body); font-size: 14px; border: 2px solid var(--mist); border-radius: 12px; background: var(--white); color: var(--charcoal); resize: vertical; outline: none; transition: border-color 0.2s; box-sizing: border-box; } .text-input:focus { border-color: var(--blue); } /* Confetti */ .confetti-piece { position: absolute; width: 10px; height: 10px; border-radius: 2px; } /* ============================================= 43. RESPONSIVE: CUSTOM COMPONENTS ============================================= */ @media (max-width: 768px) { .priority-item { flex-direction: column; align-items: flex-start; gap: var(--space-sm); } .priority-options { width: 100%; justify-content: stretch; } .priority-btn { flex: 1; text-align: center; padding: 10px 8px; font-size: 12px; } .summary-columns { grid-template-columns: 1fr; } .resource-tabs { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } .resource-tab { flex-shrink: 0; } .resource-grid { grid-template-columns: 1fr; } .category-filters { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } .action-buttons { flex-direction: column; } } @media (max-width: 480px) { .search-input { font-size: 14px; padding: 14px 16px 14px 44px; } .worksheet-section .section-header { flex-wrap: wrap; } .priority-btn { font-size: 11px; padding: 8px 6px; } } /* ============================================= */ /* FINANCIAL TOOLKIT CALCULATORS */ /* ============================================= */ /* Calculator header with number badge */ .jhl-toolkit__calc-header { text-align: center; margin-bottom: var(--space-xl); } .jhl-toolkit__calc-number { display: inline-block; font-size: 14px; font-weight: 600; color: var(--blue); background: var(--blue-light); padding: 6px 16px; border-radius: 20px; margin-bottom: var(--space-md); } /* Tooltip for input labels */ .jhl-toolkit__tooltip { display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center; background: var(--slate); color: white; border-radius: 50%; font-size: 12px; font-weight: bold; cursor: help; margin-left: 6px; font-style: normal; } .jhl-toolkit__tooltip:hover { background: var(--charcoal); } /* DTI Result Wrapper */ .dti-result-wrapper { background: linear-gradient(135deg, var(--blue-light) 0%, var(--cream) 100%); padding: var(--space-xl); border-radius: 12px; margin-bottom: var(--space-lg); } .dti-result-main { text-align: center; margin-bottom: var(--space-xl); } .dti-result-label { font-size: 16px; font-weight: 600; color: var(--slate); margin-bottom: var(--space-sm); } .dti-result-value { font-family: var(--font-display); font-size: 56px; font-weight: 700; color: var(--navy); line-height: 1; margin-bottom: var(--space-sm); } .dti-result-status { font-size: 18px; font-weight: 600; color: var(--slate); } .dti-result-status.good { color: var(--green); } .dti-result-status.okay { color: var(--electric-green); } .dti-result-status.warning { color: #FFA726; } .dti-result-status.danger { color: var(--coral); } /* DTI Gauge */ .dti-gauge { max-width: 600px; margin: 0 auto; } .dti-gauge__bar { height: 24px; background: #E0E0E0; border-radius: 12px; overflow: hidden; position: relative; } .dti-gauge__fill { height: 100%; background: var(--green); transition: width 0.4s ease, background-color 0.4s ease; border-radius: 12px; } .dti-gauge__labels { display: flex; justify-content: space-between; margin-top: var(--space-sm); font-size: 13px; color: var(--slate); font-weight: 500; } .dti-gauge__label-good { color: var(--green); font-weight: 600; } .dti-gauge__label-max { color: var(--electric-green); font-weight: 600; } .dti-gauge__labels small { display: block; font-size: 11px; margin-top: 2px; } /* Mobile responsiveness */ @media (max-width: 768px) { .dti-result-value { font-size: 42px; } .calc-grid { grid-template-columns: 1fr; } .jhl-toolkit__calc-panel { padding: var(--space-lg); } }