{} *{} {} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } :root{--navy:#0a1628;--blue:#1a3a6e;--mid-blue:#1e4d8c;--sky:#2d7dd2;--light-blue:#e8f0fb;--white:#ffffff;--off-white:#f7f9fc;--gray:#6b7280;--light-gray:#e5e7eb;--success:#10b981;--shadow:0 4px 20px rgba(10,22,40,0.12);--radius:12px;} *{margin:0;padding:0;box-sizing:border-box;} body{font-family:'Georgia',serif;background:var(--off-white);color:var(--navy);} a{text-decoration:none;color:inherit;} .site-nav{background:var(--navy);padding:0 2rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:1000;box-shadow:0 2px 10px rgba(0,0,0,0.3);} .nav-brand{display:flex;align-items:center;gap:.75rem;padding:1rem 0;} .nav-brand .brand-icon{width:42px;height:42px;background:linear-gradient(135deg,var(--sky),var(--mid-blue));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;} .nav-brand .brand-text{font-size:1.3rem;font-weight:700;color:var(--white);} .nav-links{display:flex;gap:.25rem;} .nav-links a{color:rgba(255,255,255,.75);padding:.6rem 1rem;border-radius:6px;font-size:.9rem;transition:all .2s;font-family:'Arial',sans-serif;} .nav-links a:hover,.nav-links a.active{background:rgba(255,255,255,.15);color:var(--white);} .page-hero{background:linear-gradient(135deg,var(--navy),var(--blue));color:var(--white);padding:4rem 2rem;text-align:center;} .page-hero h1{font-size:2.5rem;margin-bottom:.75rem;} .page-hero p{font-size:1.1rem;opacity:.85;max-width:600px;margin:0 auto;font-family:'Arial',sans-serif;line-height:1.7;} .content{max-width:960px;margin:3rem auto;padding:0 2rem;} .section-title{font-size:1.8rem;color:var(--navy);margin-bottom:2rem;text-align:center;} /* STEPS */ .steps{display:flex;flex-direction:column;gap:2rem;margin-bottom:4rem;} .step{display:grid;grid-template-columns:80px 1fr;gap:1.5rem;background:var(--white);border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow);} .step-num{width:64px;height:64px;background:linear-gradient(135deg,var(--sky),var(--mid-blue));color:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:700;flex-shrink:0;} .step-body h3{font-size:1.2rem;color:var(--navy);margin-bottom:.5rem;} .step-body p{font-size:.95rem;color:var(--gray);line-height:1.7;font-family:'Arial',sans-serif;margin-bottom:1rem;} .checklist{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.4rem;} .checklist li{font-size:.88rem;color:var(--navy);font-family:'Arial',sans-serif;display:flex;align-items:flex-start;gap:.5rem;} .checklist li::before{content:'✓';color:var(--success);font-weight:700;flex-shrink:0;} /* METRICS */ .metrics-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-bottom:4rem;} .metric-card{background:var(--white);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow);text-align:center;border-top:4px solid var(--sky);} .metric-card .val{font-size:1.8rem;font-weight:700;color:var(--sky);margin-bottom:.3rem;} .metric-card .key{font-size:.85rem;color:var(--gray);font-family:'Arial',sans-serif;} /* PHILOSOPHY */ .philosophy{background:var(--white);border-radius:var(--radius);padding:2.5rem;box-shadow:var(--shadow);margin-bottom:3rem;} .philosophy h2{font-size:1.5rem;color:var(--navy);margin-bottom:1.25rem;} .philosophy p{color:var(--gray);font-family:'Arial',sans-serif;line-height:1.8;margin-bottom:1rem;} .philosophy p:last-child{margin-bottom:0;} /* FOOTER */ .site-footer{background:var(--navy);color:rgba(255,255,255,.7);padding:3rem 2rem 1.5rem;} .footer-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;margin-bottom:2rem;} .footer-brand .brand-name{font-size:1.4rem;font-weight:700;color:var(--white);margin-bottom:.5rem;} .footer-brand p{font-size:.9rem;line-height:1.6;} .footer-col h4{color:var(--white);margin-bottom:1rem;font-size:.9rem;letter-spacing:1px;text-transform:uppercase;} .footer-col a,.footer-col p{display:block;color:rgba(255,255,255,.7);font-size:.9rem;margin-bottom:.5rem;transition:color .2s;font-family:'Arial',sans-serif;} .footer-col a:hover{color:var(--white);} .footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:1.5rem;text-align:center;font-size:.85rem;font-family:'Arial',sans-serif;} @media(max-width:768px){.footer-grid{grid-template-columns:1fr;}.nav-links{display:none;}.step{grid-template-columns:1fr;}.checklist{grid-template-columns:1fr;}.metrics-bar{grid-template-columns:1fr 1fr;}} @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Source+Sans+3:wght@300;400;600;700&display=swap'); :root { --hh-navy:#1a2332; --hh-gold:#c8a44e; --hh-cream:#faf8f4; --hh-slate:#4a5568; --hh-light:#f0ece4; --hh-white:#ffffff; } .hh-page * { box-sizing:border-box; margin:0; padding:0; } .hh-page { font-family:'Source Sans 3',sans-serif; color:var(--hh-navy); background:var(--hh-cream); min-height:100vh; } .hh-nav { background:var(--hh-navy); padding:0.8rem 2rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; } .hh-nav-brand { font-family:'Playfair Display',serif; color:var(--hh-gold); font-size:1.5rem; font-weight:700; text-decoration:none; } .hh-nav-links { display:flex; gap:1.5rem; flex-wrap:wrap; } .hh-nav-links a { color:var(--hh-cream); text-decoration:none; font-size:0.9rem; transition:color 0.2s; } .hh-nav-links a:hover,.hh-nav-links a.active { color:var(--hh-gold); } .hh-hero { background:linear-gradient(135deg,var(--hh-navy),#2a3a4e); padding:3rem 2rem 2rem; text-align:center; } .hh-hero h1 { font-family:'Playfair Display',serif; color:var(--hh-gold); font-size:2.2rem; margin-bottom:0.5rem; } .hh-hero p { color:var(--hh-cream); font-size:1rem; opacity:0.85; } .hh-content { max-width:800px; margin:2.5rem auto; padding:0 2rem; } .hh-content h2 { font-family:'Playfair Display',serif; font-size:1.4rem; margin:2rem 0 0.75rem; } .hh-content p { line-height:1.8; color:var(--hh-slate); margin-bottom:1rem; } .hh-steps { counter-reset:step; margin-top:2rem; } .hh-step { display:flex; gap:1.25rem; margin-bottom:1.5rem; align-items:flex-start; } .hh-step-num { flex-shrink:0; width:44px; height:44px; background:var(--hh-gold); color:var(--hh-navy); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.1rem; } .hh-step-body h3 { font-size:1.05rem; margin-bottom:0.3rem; } .hh-step-body p { font-size:0.9rem; line-height:1.6; margin:0; } .hh-footer { background:var(--hh-navy); color:var(--hh-cream); text-align:center; padding:2rem; margin-top:3rem; font-size:0.85rem; opacity:0.7; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --blue-50: #EEF4FF; --blue-100: #DBEAFE; --blue-200: #BFDBFE; --blue-400: #60A5FA; --blue-500: #3B82F6; --blue-600: #2563EB; --blue-700: #1D4ED8; --navy: #1E3A8A; --navy-dark: #0F2361; --white: #FFFFFF; --gray-50: #F8FAFC; --gray-100: #F1F5F9; --gray-300: #CBD5E1; --gray-500: #64748B; --gray-700: #334155; --green-50: #F0FDF4; --green-500: #22C55E; --green-700: #15803D; --amber-50: #FFFBEB; --amber-500: #F59E0B; --amber-700: #B45309; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; } html { scroll-behavior: smooth; } body { font-family: 'DM Sans', sans-serif; color: var(--gray-700); background: var(--white); line-height: 1.6; } /* NAV */ nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-100); padding: 0 2rem; } .nav-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 68px; } .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } .nav-logo-icon { width: 40px; height: 40px; background: var(--blue-600); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; } .nav-logo-text { font-family: 'DM Sans', sans-serif; font-size: 17px; font-weight: 600; color: var(--navy); } .nav-links { display: flex; align-items: center; gap: 8px; list-style: none; } .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: var(--gray-700); padding: 8px 14px; border-radius: var(--radius-sm); transition: background 0.18s, color 0.18s; } .nav-links a:hover, .nav-links a.active { background: var(--blue-50); color: var(--blue-600); } .btn-nav { background: var(--blue-600) !important; color: white !important; font-weight: 600 !important; } .btn-nav:hover { background: var(--blue-700) !important; } /* PAGE HERO */ .page-hero { background: linear-gradient(145deg, var(--blue-50) 0%, #E8F0FE 55%, var(--blue-100) 100%); padding: 72px 2rem 80px; text-align: center; position: relative; overflow: hidden; } .page-hero::before { content: ''; position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 600px; height: 400px; background: radial-gradient(ellipse, rgba(59,130,246,0.1) 0%, transparent 70%); } .page-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-600); margin-bottom: 16px; } .page-hero-eyebrow::before { content: ''; display: block; width: 20px; height: 2px; background: var(--blue-500); border-radius: 2px; } .page-hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(38px, 5vw, 64px); font-weight: 900; color: var(--navy); line-height: 1.1; margin-bottom: 20px; position: relative; } .page-hero h1 span { color: var(--blue-600); } .page-hero-desc { font-size: 17px; color: var(--gray-500); max-width: 620px; margin: 0 auto 32px; line-height: 1.75; position: relative; } .hero-pills { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .hero-pill { background: white; border: 1px solid var(--blue-200); border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 500; color: var(--blue-700); } /* LAYOUT */ .section { padding: 80px 2rem; } .section-inner { max-width: 1100px; margin: 0 auto; } .section-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-600); margin-bottom: 14px; } .section-eyebrow::before { content: ''; display: block; width: 24px; height: 2px; background: var(--blue-500); border-radius: 2px; } .section-title { font-family: 'Playfair Display', serif; font-size: clamp(28px, 3.5vw, 44px); font-weight: 700; color: var(--navy); line-height: 1.15; margin-bottom: 14px; } .section-sub { font-size: 16px; color: var(--gray-500); line-height: 1.75; margin-bottom: 40px; max-width: 600px; } /* TRACK CARDS */ .tracks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .track-card { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--blue-100); transition: transform 0.2s, box-shadow 0.2s; } .track-card:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(30,58,138,0.12); } .track-card-header { padding: 28px 28px 20px; } .track-card-header.investor { background: linear-gradient(135deg, var(--navy) 0%, #2D4F9E 100%); } .track-card-header.renter { background: linear-gradient(135deg, var(--blue-600) 0%, #3B82F6 100%); } .track-card-header.credit { background: linear-gradient(135deg, #0D9488 0%, #14B8A6 100%); } .track-icon { font-size: 36px; margin-bottom: 14px; } .track-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.65); margin-bottom: 6px; } .track-title { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: white; line-height: 1.2; } .track-card-body { padding: 24px 28px 28px; background: white; } .track-desc { font-size: 14px; color: var(--gray-500); line-height: 1.7; margin-bottom: 20px; } .track-modules { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; } .track-modules li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--gray-700); } .track-check { width: 18px; height: 18px; border-radius: 50%; background: var(--blue-50); border: 1.5px solid var(--blue-200); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .track-check svg { color: var(--blue-600); } .track-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--blue-600); text-decoration: none; transition: gap 0.15s; } .track-cta:hover { gap: 10px; } /* PHOTO COMMUNITY GRID */ .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; } .photo-card { border-radius: var(--radius-lg); overflow: hidden; position: relative; aspect-ratio: 4/3; } .photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; } .photo-card:hover img { transform: scale(1.04); } .photo-caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(15,35,97,0.85)); padding: 24px 16px 16px; } .photo-caption-text { font-size: 13px; font-weight: 500; color: white; line-height: 1.4; } .photo-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; } .photo-placeholder.p1 { background: linear-gradient(135deg, #DBEAFE, #BFDBFE); } .photo-placeholder.p2 { background: linear-gradient(135deg, #D1FAE5, #A7F3D0); } .photo-placeholder.p3 { background: linear-gradient(135deg, #FEF3C7, #FDE68A); } .photo-placeholder.p4 { background: linear-gradient(135deg, #E0E7FF, #C7D2FE); } .photo-placeholder.p5 { background: linear-gradient(135deg, #FCE7F3, #FBCFE8); } .photo-placeholder.p6 { background: linear-gradient(135deg, #CCFBF1, #99F6E4); } .photo-emoji { font-size: 48px; } .photo-label { font-size: 12px; font-weight: 600; color: var(--navy); text-align: center; padding: 0 12px; } /* CURRICULUM TIMELINE */ .curriculum { display: flex; flex-direction: column; gap: 0; } .curr-item { display: grid; grid-template-columns: 80px 1fr; gap: 24px; position: relative; } .curr-item:not(:last-child)::before { content: ''; position: absolute; left: 39px; top: 48px; bottom: -16px; width: 2px; background: var(--blue-100); } .curr-num-wrap { display: flex; flex-direction: column; align-items: center; padding-top: 4px; } .curr-num { width: 40px; height: 40px; border-radius: 50%; background: var(--blue-600); color: white; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .curr-body { padding-bottom: 32px; } .curr-tag { display: inline-block; background: var(--blue-50); border: 1px solid var(--blue-200); border-radius: 999px; padding: 3px 12px; font-size: 11px; font-weight: 600; color: var(--blue-700); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 8px; } .curr-title { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 8px; } .curr-desc { font-size: 14px; color: var(--gray-500); line-height: 1.7; } .curr-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .curr-topic { background: var(--gray-50); border: 1px solid var(--gray-300); border-radius: 999px; padding: 4px 12px; font-size: 12px; color: var(--gray-700); } /* STATS ROW */ .impact-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; } .impact-stat { background: white; border: 1px solid var(--blue-100); border-radius: var(--radius-md); padding: 24px; text-align: center; } .impact-stat-value { font-family: 'Playfair Display', serif; font-size: 40px; font-weight: 900; color: var(--blue-600); line-height: 1; } .impact-stat-label { font-size: 13px; color: var(--gray-500); margin-top: 6px; } /* CTA */ .cta-banner { background: linear-gradient(135deg, var(--blue-600) 0%, var(--navy) 100%); border-radius: var(--radius-xl); padding: 64px 48px; text-align: center; position: relative; overflow: hidden; } .cta-banner::before { content: ''; position: absolute; top: -80px; right: -80px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%); } .cta-banner h2 { font-family: 'Playfair Display', serif; font-size: clamp(28px, 4vw, 44px); font-weight: 900; color: white; margin-bottom: 14px; position: relative; } .cta-banner p { font-size: 16px; color: rgba(255,255,255,0.75); max-width: 480px; margin: 0 auto 32px; line-height: 1.7; position: relative; } .cta-btns { display: flex; gap: 14px; justify-content: center; position: relative; flex-wrap: wrap; } .btn-white { display: inline-flex; align-items: center; gap: 8px; background: white; color: var(--blue-700); text-decoration: none; font-size: 15px; font-weight: 700; padding: 14px 28px; border-radius: var(--radius-sm); transition: transform 0.15s, box-shadow 0.15s; } .btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); } .btn-outline-white { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: white; text-decoration: none; font-size: 15px; font-weight: 600; padding: 14px 28px; border-radius: var(--radius-sm); border: 1.5px solid rgba(255,255,255,0.4); transition: border-color 0.2s, background 0.2s; } .btn-outline-white:hover { border-color: white; background: rgba(255,255,255,0.1); } /* FOOTER */ footer { background: var(--navy-dark); color: rgba(255,255,255,0.7); padding: 48px 2rem 32px; } .footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 40px; } .footer-brand-name { font-family: 'Playfair Display', serif; font-size: 20px; color: white; margin-bottom: 10px; } .footer-brand-desc { font-size: 13px; line-height: 1.7; } .footer-col-title { font-size: 13px; font-weight: 600; color: white; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 16px; } .footer-col-links { list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer-col-links a { text-decoration: none; color: rgba(255,255,255,0.6); font-size: 14px; transition: color 0.15s; } .footer-col-links a:hover { color: white; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px; display: flex; justify-content: space-between; font-size: 13px; } /* RESPONSIVE */ @media (max-width: 900px) { .tracks-grid { grid-template-columns: 1fr; } .photo-grid { grid-template-columns: repeat(2, 1fr); } .impact-stats { grid-template-columns: repeat(2, 1fr); } .footer-inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .nav-links { display: none; } .photo-grid { grid-template-columns: 1fr; } .impact-stats { grid-template-columns: 1fr 1fr; } .footer-inner { grid-template-columns: 1fr; } .cta-btns { flex-direction: column; align-items: center; } }