/* hostfamilymatch.com — design system. Warm, trustworthy, family-oriented. Neutral matchmaker aesthetic: welcoming and human, NOT transactional/salesy. The audience is a family deciding whether to open their home; reassurance beats hype. */ /* Self-hosted Inter (woff2) — no external Google Fonts round-trip, so no FOUT text shift. Regular+Bold are preloaded in ; swap keeps text visible during the tiny local load. */ @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:optional;src:url('/assets/fonts/Inter-Regular.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:optional;src:url('/assets/fonts/Inter-SemiBold.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:optional;src:url('/assets/fonts/Inter-Bold.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:optional;src:url('/assets/fonts/Inter-ExtraBold.woff2') format('woff2')} /* Metric-matched fallback — makes the pre-load system font occupy Inter's exact space so even the brief swap causes zero reflow. Tuned for both Arial and SF (Mac). */ @font-face{ font-family:'Inter Fallback'; src:local('Arial'),local('Helvetica Neue'),local('Helvetica'); size-adjust:107%; ascent-override:90.5%; descent-override:22.5%; line-gap-override:0%; } :root{ --bg:#ffffff; --ink:#1f2733; --muted:#5c6675; --line:#e7eaf0; --brand:#2563a8; /* warm trustworthy blue */ --brand-dark:#1c4c85; --brand-light:#eaf2fb; --accent:#e8783b; /* warm orange — friendly CTA, "welcome home" */ --accent-dark:#cf6329; --good:#2f9e6f; /* warm green */ --warn:#b45309; --card:#ffffff; --soft:#f6f8fb; --radius:14px; --shadow:0 2px 10px rgba(20,30,50,.06),0 1px 3px rgba(20,30,50,.08); --shadow-lg:0 8px 30px rgba(20,30,50,.10); --maxw:1080px; --font:'Inter','Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px} a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3{line-height:1.25;letter-spacing:-.02em} h1{font-size:2.3rem;margin:.2em 0 .4em} h2{font-size:1.55rem;margin:1.8em 0 .6em} h3{font-size:1.2rem;margin:1.4em 0 .4em} p{margin:.7em 0} .small{font-size:.9rem} .muted{color:var(--muted)} /* header */ header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)} header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:64px} .logo{font-weight:800;font-size:1.15rem;color:var(--ink);letter-spacing:-.03em} .logo b{color:var(--brand)} nav.top a{color:var(--muted);font-weight:600;font-size:.95rem;margin-left:22px} nav.top a:hover{color:var(--brand);text-decoration:none} /* nav CTA button: force white text (override the gray link color) + never hide on mobile */ nav.top a.navcta,nav.top a.navcta:hover{color:#fff} @media(max-width:760px){nav.top a{margin-left:14px;font-size:.85rem}} @media(max-width:520px){ /* hide the plain text links on phones, but KEEP the Get Matched button visible */ nav.top a:not(.navcta){display:none} nav.top a.navcta{margin-left:0;font-size:.9rem;padding:8px 15px} } /* hero */ .hero{background:linear-gradient(180deg,var(--brand-light),#fff);padding:54px 0 34px;border-bottom:1px solid var(--line)} .hero .eyebrow{color:var(--brand);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem} .hero h1 span{color:var(--accent)} .hero .lede{font-size:1.2rem;color:var(--muted);max-width:660px} .verified{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:var(--muted);background:#fff;border:1px solid var(--line);padding:5px 12px;border-radius:99px;margin-top:10px} .verified b{color:var(--brand)} /* buttons */ .btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;font-weight:700;padding:13px 22px;border-radius:99px;box-shadow:var(--shadow);transition:.15s;border:none;cursor:pointer;font-size:1rem;font-family:var(--font)} .btn:hover{background:var(--accent-dark);text-decoration:none;transform:translateY(-1px);box-shadow:var(--shadow-lg)} .btn.big{padding:16px 32px;font-size:1.12rem} /* Primary attention CTA — warmer, larger, gentle glow so it reads as THE action */ .btn.cta{background:linear-gradient(135deg,var(--accent),var(--accent-dark));box-shadow:0 4px 14px rgba(232,120,59,.38),0 2px 6px rgba(20,30,50,.10);font-weight:800;letter-spacing:.2px} .btn.cta:hover{background:linear-gradient(135deg,var(--accent-dark),var(--accent-dark));box-shadow:0 8px 26px rgba(232,120,59,.5),0 4px 10px rgba(20,30,50,.14);transform:translateY(-2px)} .btn.cta .arw{transition:transform .18s} .btn.cta:hover .arw{transform:translateX(4px)} @media(prefers-reduced-motion:no-preference){ .btn.cta.pulse{animation:ctapulse 2.6s ease-in-out infinite} @keyframes ctapulse{0%,100%{box-shadow:0 4px 14px rgba(232,120,59,.38),0 2px 6px rgba(20,30,50,.10)}50%{box-shadow:0 4px 22px rgba(232,120,59,.62),0 2px 6px rgba(20,30,50,.10)}} } .btn.navcta{padding:9px 18px;font-size:.95rem;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-dark));box-shadow:0 2px 8px rgba(232,120,59,.34);font-weight:800} .btn.navcta:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(232,120,59,.46)} .btn.navcta .arw{transition:transform .18s;display:inline-block} .btn.navcta:hover .arw{transform:translateX(3px)} .btn.ghost{background:#fff;color:var(--brand);border:2px solid var(--brand)} .btn.ghost:hover{background:var(--brand-light)} .btn:disabled{opacity:.6;cursor:not-allowed;transform:none} /* cards / tables */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin:18px 0} .quick{background:var(--soft);border-left:4px solid var(--brand);padding:16px 20px;border-radius:0 var(--radius) var(--radius) 0;margin:20px 0} .quick b{color:var(--brand)} table.cmp{width:100%;border-collapse:collapse;margin:18px 0;font-size:.96rem;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)} table.cmp th,table.cmp td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--line)} table.cmp th{background:var(--brand);color:#fff;font-weight:700;font-size:.9rem} table.cmp tr:last-child td{border-bottom:none} table.cmp tr:nth-child(even) td{background:var(--soft)} .stipend{color:var(--good);font-weight:800;white-space:nowrap} .badge{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--brand-light);color:var(--brand-dark);vertical-align:middle} .badge.best{background:#fef3c7;color:#92400e} .badge.new{background:#dcfce7;color:#166534} /* program row */ .agency{display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:space-between;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin:14px 0;background:#fff;box-shadow:var(--shadow)} .agency .meta h3{margin:.1em 0} .agency .meta .stipend{font-size:1.05rem} /* steps */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0} .steps .step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);position:relative} .steps .step .n{width:34px;height:34px;border-radius:99px;background:var(--brand);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:10px} .steps .step h3{margin:.2em 0} @media(max-width:720px){.steps{grid-template-columns:1fr}} /* trust bar */ .trustbar{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;color:var(--muted);font-size:.9rem;font-weight:600;margin:14px 0} .trustbar span{display:inline-flex;align-items:center;gap:6px} /* MATCH FORM */ .matchform{background:linear-gradient(180deg,#fff,var(--soft));border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);padding:26px;margin:26px 0} .matchform h2{margin-top:0} .matchform .row{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:600px){.matchform .row{grid-template-columns:1fr}} .matchform label{display:block;font-weight:600;font-size:.9rem;margin:12px 0 4px;color:var(--ink)} .matchform input,.matchform select,.matchform textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-size:1rem;font-family:var(--font);background:#fff;color:var(--ink)} .matchform input:focus,.matchform select:focus,.matchform textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-light)} .matchform .req{color:var(--accent)} .matchform .opt{color:#8a94a6;font-weight:400;font-size:.82em} .matchform .consent{font-size:.82rem;color:var(--muted);margin:14px 0} .matchform .consent input{width:auto;margin-right:8px} .formnote{font-size:.82rem;color:var(--muted);margin-top:10px} .formstatus{padding:12px 16px;border-radius:10px;margin-top:14px;display:none;font-weight:600} .formstatus.ok{display:block;background:#dcfce7;color:#166534;border:1px solid #86efac} .formstatus.err{display:block;background:#fee2e2;color:#991b1b;border:1px solid #fca5a5} /* disclosure / FTC */ .disclosure{font-size:.8rem;color:var(--muted);background:var(--soft);border:1px dashed var(--line);border-radius:10px;padding:10px 14px;margin:18px 0} /* FAQ */ details.faq{border:1px solid var(--line);border-radius:10px;margin:10px 0;background:#fff;overflow:hidden} details.faq summary{cursor:pointer;font-weight:700;padding:14px 18px;list-style:none;background:var(--soft)} details.faq summary::-webkit-details-marker{display:none} details.faq summary::after{content:"+";float:right;color:var(--brand);font-weight:800} details.faq[open] summary::after{content:"–"} details.faq .body{padding:4px 18px 16px} /* sticky mobile CTA */ .sticky-cta{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);padding:10px 16px;display:none;z-index:60;box-shadow:0 -4px 20px rgba(0,0,0,.08)} .sticky-cta .btn{width:100%;justify-content:center} @media(max-width:720px){.sticky-cta{display:block}body{padding-bottom:72px}} /* footer */ footer.site{border-top:1px solid var(--line);margin-top:50px;padding:34px 0;background:var(--soft);color:var(--muted);font-size:.9rem} footer.site a{color:var(--muted)} footer.site .cols{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between} footer.site h4{color:var(--ink);font-size:.95rem;margin:0 0 8px} footer.site ul{list-style:none;padding:0;margin:0} footer.site li{margin:4px 0} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:720px){.grid2{grid-template-columns:1fr}h1{font-size:1.8rem}}