:root { --green-900: #0f3d1f; --green-700: #195b28; --green-600: #1d6c2f; --green-500: #237f38; --gold: #c9982f; --gold-light: #e7c473; --navy-900: #080c22; --navy-800: #0b1130; --navy-700: #141a3d; --ink: #171a26; --muted: #5c6274; --muted-light: #8b90a1; --bg-alt: #f5f6fa; --line: #e7e9f0; --white: #ffffff; --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --shadow-sm: 0 4px 14px rgba(11, 17, 48, 0.06); --shadow: 0 16px 40px rgba(11, 17, 48, 0.12); --shadow-lg: 0 24px 60px rgba(11, 17, 48, 0.22); --max: 1180px; /* Theme-aware surface tokens. These are what the dark/light toggle actually swaps. The palette colors above (green/gold/navy) stay fixed in both themes — they're used for permanently-dark accent sections (hero, apply, contact-info, footer) and brand accents, not for the page chrome this toggle controls. */ --surface: var(--white); --surface-alt: var(--bg-alt); --border-color: var(--line); --heading: var(--navy-800); --text: var(--ink); --text-muted: var(--muted); font-size: 16px; } /* Dark mode: swap only the light-page surface tokens. Respects an explicit toggle choice (data-theme attribute, set as early as possible in to avoid a flash) over the OS preference. */ :root[data-theme="dark"] { --surface: #12172c; --surface-alt: #1a2038; --border-color: rgba(255,255,255,0.12); --heading: #f4f5f9; --text: rgba(255,255,255,0.82); --text-muted: rgba(255,255,255,0.6); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } } body { margin: 0; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--text); background: var(--surface); line-height: 1.65; -webkit-font-smoothing: antialiased; transition: background-color .25s ease, color .25s ease; } h1, h2, h3 { font-family: "Sora", "Inter", sans-serif; font-weight: 700; line-height: 1.15; margin: 0 0 0.6em; letter-spacing: -0.01em; } p { margin: 0 0 1em; } a { color: inherit; } img { max-width: 100%; display: block; } ul { margin: 0; padding: 0; list-style: none; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--green-700); color: #fff; padding: 12px 18px; z-index: 1000; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } .eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.75rem; font-weight: 700; color: var(--gold); margin: 0 0 12px; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; padding: 16px 0; transition: box-shadow .25s ease, background .25s ease; } .header-inner { /* Solid, not translucent: a blurred/translucent pill picks up whatever color is behind it (dark hero vs. light sections), which shifted tone while scrolling and made the transparent logo look mismatched against it. Solid white stays visually identical at every scroll position. */ background: #ffffff; border-radius: 100px; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 10px 26px; box-shadow: var(--shadow-sm); border: 1px solid rgba(255,255,255,0.6); } .site-header.scrolled .header-inner { box-shadow: var(--shadow); } .brand-logo { height: 68px; width: auto; } .site-nav { display: flex; align-items: center; gap: 8px; } .site-nav a { text-decoration: none; font-weight: 600; color: var(--ink); font-size: 0.95rem; padding: 10px 16px; border-radius: 100px; transition: color .15s ease, background .15s ease; } .site-nav a:not(.btn):hover { color: var(--green-700); background: rgba(25,91,40,0.07); } .site-nav a.btn-primary { color: #fff; margin-left: 8px; } .site-nav a.btn-primary:hover { color: #fff; } .nav-toggle { display: none; flex-direction: column; justify-content: space-between; width: 24px; height: 18px; background: none; border: none; cursor: pointer; padding: 0; margin-right: 8px; } .nav-toggle span { display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px; } .mobile-nav { display: none; flex-direction: column; background: var(--surface); margin: 10px 16px 0; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .mobile-nav a { padding: 16px 22px; text-decoration: none; color: var(--text); font-weight: 600; border-top: 1px solid var(--border-color); } .mobile-nav.open { display: flex; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: 100px; font-weight: 700; text-decoration: none; font-size: 0.92rem; border: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; white-space: nowrap; } .btn-sm { padding: 9px 18px; font-size: 0.85rem; } .btn-lg { padding: 16px 30px; font-size: 0.98rem; } .btn-block { width: 100%; } .btn-primary { background: linear-gradient(135deg, var(--green-600), var(--green-900)); color: #fff; box-shadow: 0 10px 24px rgba(25,91,40,0.28); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(25,91,40,0.36); } .btn-ghost { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.35); } .btn-ghost:hover { background: rgba(255,255,255,0.16); transform: translateY(-2px); } .btn-download { background: var(--white); color: var(--green-700); border: 1.5px solid var(--green-600); } .btn-download:hover { background: var(--green-700); color: #fff; transform: translateY(-2px); } /* ---------- Theme toggle ---------- */ /* A floating action button, fixed to the bottom-left corner so it's always reachable regardless of scroll position. It's self-themed (background/ color swap with the rest of the page) rather than pinned to a fixed light color like the header, since it floats over every section — light and dark alike — rather than sitting on one fixed-white surface. */ .theme-toggle-float { position: fixed; left: 20px; bottom: 20px; z-index: 90; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--border-color); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); cursor: pointer; padding: 0; transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .15s ease, box-shadow .15s ease; } .theme-toggle-float:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 20px 40px rgba(11,17,48,0.28); } .theme-toggle-float svg { width: 21px; height: 21px; } .theme-toggle-float .icon-sun { display: none; } [data-theme="dark"] .theme-toggle-float .icon-moon { display: none; } [data-theme="dark"] .theme-toggle-float .icon-sun { display: block; color: var(--gold-light); } @media (max-width: 480px) { .theme-toggle-float { left: 14px; bottom: 14px; width: 44px; height: 44px; } .theme-toggle-float svg { width: 19px; height: 19px; } } /* ---------- Scroll reveal ---------- */ /* Content is visible by default. Only the .js class (set immediately by an inline script in ) enables the hidden-until-revealed state, so a page with JS disabled or slow never leaves content invisible. Direction variants give each section its own entrance instead of one generic fade everywhere; script.js sets a per-element transition-delay for staggered groups (cards, FAQ items, download cards, eligibility list) so they cascade in rather than popping together. */ .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } .js .reveal-left { opacity: 0; transform: translateX(-44px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); } .js .reveal-right { opacity: 0; transform: translateX(44px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); } .js .reveal-scale { opacity: 0; transform: translateY(18px) scale(.93); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); } .js .reveal.visible, .js .reveal-left.visible, .js .reveal-right.visible, .js .reveal-scale.visible { opacity: 1; transform: none; } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; background: radial-gradient(120% 140% at 15% 0%, var(--green-900) 0%, var(--navy-800) 48%, var(--navy-900) 100%); padding: 84px 0 110px; } .hero-bg { position: absolute; inset: 0; overflow: hidden; } .blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55; transform: translateY(var(--parallax-y, 0px)); will-change: transform; } .blob-a { width: 480px; height: 480px; background: var(--green-500); top: -180px; right: -120px; } .blob-b { width: 380px; height: 380px; background: var(--gold); opacity: 0.18; bottom: -160px; left: -80px; } .grid-overlay { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(circle at 30% 20%, black, transparent 75%); } .hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; } .hero-copy h1 { font-size: clamp(2.1rem, 4vw, 3.1rem); color: #fff; } .hero-lede { color: rgba(255,255,255,0.78); font-size: 1.08rem; max-width: 50ch; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 30px 0 34px; } .trust-row { display: flex; flex-wrap: wrap; gap: 20px; } .trust-row li { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.72); font-size: 0.88rem; font-weight: 500; } .trust-row svg { color: var(--gold-light); flex-shrink: 0; } .hero-media { position: relative; display: flex; justify-content: center; } .hero-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-lg); max-width: 340px; backdrop-filter: blur(6px); overflow: hidden; /* safety net: content can never bleed past the rounded corners */ } .hero-card img { display: block; width: 100%; height: auto; border-radius: var(--radius); } .hero-chip { position: absolute; background: #fff; border-radius: var(--radius-sm); padding: 12px 16px; box-shadow: var(--shadow); line-height: 1.3; } .hero-chip strong { display: block; font-size: 0.95rem; color: var(--navy-800); } .hero-chip span { font-size: 0.76rem; color: var(--muted); } .hero-chip-top { top: 6%; left: -6%; } .hero-chip-bottom { bottom: 4%; right: -8%; } /* ---------- Section shared ---------- */ .section { padding: 96px 0; } .section-head { max-width: 640px; margin: 0 auto 48px; text-align: center; } .section-head h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--heading); } .section-head.light h2 { color: #fff; } .section-head.light .eyebrow { color: var(--gold-light); } .section-sub { color: rgba(255,255,255,0.75); font-size: 1.02rem; } /* ---------- About ---------- */ .about { background: var(--surface); } .about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; } .about-media { position: relative; } .about-media-frame { position: relative; z-index: 1; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 5; } .about-media-frame img { width: 100%; height: 100%; object-fit: cover; /* Scaled up so the parallax translateY (written to --parallax-y by script.js) never exposes an edge inside the overflow:hidden frame. */ transform: scale(1.14) translateY(var(--parallax-y, 0px)); will-change: transform; } .about-media-accent { position: absolute; inset: 20px -20px -20px 20px; background: linear-gradient(135deg, var(--gold-light), var(--green-500)); border-radius: var(--radius-lg); z-index: 0; opacity: 0.85; } .about-copy h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); color: var(--heading); } .about-copy p { color: var(--text-muted); font-size: 1.03rem; } .about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; } .about-stats > div { border-left: 3px solid var(--gold); padding-left: 16px; } .about-stats strong { display: block; font-family: "Sora", sans-serif; font-size: 1.8rem; color: var(--green-700); } .about-stats span { color: var(--text-muted); font-size: 0.86rem; } /* ---------- Programs ---------- */ .programs { background: var(--surface-alt); } .card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .card { background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, background-color .25s ease, border-color .25s ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .card-icon { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, var(--green-600), var(--green-900)); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .card h3 { color: var(--heading); font-size: 1.2rem; } .card p { color: var(--text-muted); margin: 0; } /* ---------- Apply ---------- */ .apply { position: relative; overflow: hidden; padding: 100px 0; } .apply-bg { position: absolute; /* Extends past the section's own (overflow:hidden) bounds so the parallax translateY has room to move without exposing an edge. */ inset: -70px 0; background-size: cover; background-position: center; transform: translateY(var(--parallax-y, 0px)); will-change: transform; } .apply-overlay { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(8,12,34,0.96), rgba(15,61,31,0.92)); } .apply-inner { position: relative; z-index: 1; } .eligibility-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 32px; max-width: 620px; margin: 0 auto 48px; } .eligibility-list li { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.9); font-weight: 500; font-size: 0.96rem; } .eligibility-list svg { color: var(--gold-light); flex-shrink: 0; } .download-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 700px; margin: 0 auto; } .download-card { display: flex; align-items: center; gap: 16px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius); padding: 22px; backdrop-filter: blur(4px); flex-wrap: wrap; } .download-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px; background: rgba(255,255,255,0.12); color: var(--gold-light); display: flex; align-items: center; justify-content: center; } .download-text { flex: 1; min-width: 140px; } .download-text h3 { color: #fff; font-size: 1rem; margin: 0 0 4px; } .download-text span { color: rgba(255,255,255,0.6); font-size: 0.8rem; } .download-card .btn { flex-shrink: 0; } .apply-note { margin: 32px auto 0; max-width: 560px; text-align: center; font-style: italic; color: rgba(255,255,255,0.6); font-size: 0.9rem; } /* ---------- FAQ ---------- */ .faq { background: var(--surface-alt); } .faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } .faq-item { background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 6px 24px; transition: background-color .25s ease, border-color .25s ease; } .faq-item summary { padding: 18px 0; font-family: "Sora", sans-serif; font-weight: 700; font-size: 1.02rem; color: var(--heading); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-alt); color: var(--green-700); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: transform .2s ease, background .2s ease; } [data-theme="dark"] .faq-item summary::after { color: var(--gold-light); } .faq-item[open] summary::after { transform: rotate(45deg); background: var(--green-700); color: #fff; } .faq-item p { color: var(--text-muted); margin: 0 0 20px; font-size: 0.96rem; } /* ---------- Contact ---------- */ .contact { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--surface) 0%, var(--surface-alt) 100%); } .contact-blob { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; } .contact-blob-a { width: 420px; height: 420px; background: var(--green-500); opacity: 0.10; top: -140px; left: -120px; } .contact-blob-b { width: 380px; height: 380px; background: var(--gold); opacity: 0.14; bottom: -160px; right: -110px; } .contact .wrap { position: relative; z-index: 1; } .contact-inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 32px; align-items: stretch; } .contact-info { position: relative; overflow: hidden; background: radial-gradient(130% 150% at 12% 0%, var(--green-900) 0%, var(--navy-800) 55%, var(--navy-900) 100%); border-radius: var(--radius-lg); padding: 44px 40px; box-shadow: var(--shadow-lg); } .contact-info::before { content: ""; position: absolute; top: -70px; right: -60px; width: 220px; height: 220px; border-radius: 50%; background: var(--gold); opacity: 0.18; filter: blur(64px); } .info-row { position: relative; z-index: 1; display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,0.14); transition: transform .2s ease; } .info-row:hover { transform: translateX(5px); } .info-row:first-child { padding-top: 0; } .info-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.14); color: var(--gold-light); display: flex; align-items: center; justify-content: center; } .info-row h3 { font-size: 0.9rem; color: #fff; margin: 0 0 4px; } .info-row p { color: rgba(255,255,255,0.68); margin: 0; } .info-row a { color: var(--gold-light); text-decoration: none; font-weight: 600; } .info-row a:hover { text-decoration: underline; } .equal-housing { position: relative; z-index: 1; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); border-left: 4px solid var(--gold); padding: 16px 18px; border-radius: 8px; font-size: 0.86rem; color: rgba(255,255,255,0.72); margin-top: 24px; } .equal-housing strong { color: #fff; } .contact-form { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 42px 40px 36px; transition: background-color .25s ease, border-color .25s ease; } .contact-form::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--green-600), var(--gold)); } .contact-form h3 { color: var(--heading); margin-bottom: 6px; font-size: 1.3rem; } .form-sub { color: var(--text-muted); font-size: 0.92rem; margin-bottom: 24px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .contact-form label { display: block; font-weight: 600; font-size: 0.87rem; margin-bottom: 6px; margin-top: 18px; color: var(--heading); } .contact-form label:first-of-type { margin-top: 0; } .contact-form input, .contact-form textarea { width: 100%; padding: 13px 16px; border: 1.5px solid var(--border-color); background: var(--surface-alt); color: var(--text); border-radius: var(--radius-sm); font-family: inherit; font-size: 0.95rem; resize: vertical; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--green-600); background: var(--surface); box-shadow: 0 0 0 4px rgba(25,91,40,0.12); } .contact-form button { margin-top: 26px; } .hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .form-status { margin-top: 14px; font-size: 0.88rem; min-height: 1.2em; text-align: center; } .form-status.success { color: var(--green-700); font-weight: 600; } .form-status.error { color: #b3261e; font-weight: 600; } /* ---------- Footer ---------- */ .site-footer { background: var(--navy-900); color: rgba(255,255,255,0.65); padding: 34px 0; } .footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 0.88rem; } .footer-brand img { height: 52px; width: auto; border-radius: 10px; background: #fff; padding: 6px 12px; } .social-link { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.08); text-decoration: none; color: rgba(255,255,255,0.85); transition: background .15s ease, transform .15s ease; } .social-link:hover { background: var(--green-600); transform: translateY(-2px); } .footer-credit { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); text-align: center; } .footer-credit p { margin: 0; font-size: 0.8rem; color: rgba(255,255,255,0.45); } .footer-credit a { color: rgba(255,255,255,0.7); text-decoration: none; font-weight: 600; } .footer-credit a:hover { color: #fff; text-decoration: underline; } /* ---------- Responsive ---------- */ @media (max-width: 980px) { .hero-inner { grid-template-columns: 1fr; } .hero-media { margin-top: 32px; } .hero-chip { display: none; } .about-grid { grid-template-columns: 1fr; } .about-media-accent { display: none; } .contact-inner { grid-template-columns: 1fr; } } @media (max-width: 860px) { .card-grid { grid-template-columns: 1fr; } .download-grid { grid-template-columns: 1fr; } .eligibility-list { grid-template-columns: 1fr; max-width: 320px; } .site-nav { display: none; } .nav-toggle { display: flex; } .form-row { grid-template-columns: 1fr; } .section { padding: 68px 0; } .contact-info, .contact-form { padding: 32px 26px; } } @media (max-width: 480px) { .hero { padding: 64px 0 80px; } .hero-actions { flex-direction: column; align-items: stretch; } .hero-actions .btn { width: 100%; } }