/* public-search.css: the family-facing search dialog on the public pages. Loaded only by pages that carry . Text is black or a brand token; borders may be grey. */ .ohana-public-search { max-width: 640px; width: calc(100% - 2rem); padding: 1.5rem 1.5rem 1.25rem; position: relative; } .ohana-public-search .ps-close { position: absolute; top: 0.6rem; right: 0.6rem; width: 40px; height: 40px; border: none; border-radius: 50%; background: transparent; color: #000; font-size: 1.6rem; line-height: 1; cursor: pointer; } .ohana-public-search .ps-close:hover, .ohana-public-search .ps-close:focus-visible { background: #f1f5f9; } .ohana-public-search .ps-title { margin: 0 2.5rem 0.25rem 0; font-family: var(--font, 'Poppins', Arial, sans-serif); font-size: 1.5rem; font-weight: 700; color: var(--brand-teal-aa, #00767E); } .ohana-public-search .ps-sub { margin: 0 0 1rem; color: #000; font-size: 1rem; } .ohana-public-search .ps-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .ohana-public-search .ps-chip { border: 2px solid var(--brand-blue, #00BAC6); background: #fff; color: var(--brand-teal-aa, #00767E); border-radius: 999px; padding: 0.6rem 1rem; font-family: var(--font, 'Poppins', Arial, sans-serif); font-size: 0.95rem; font-weight: 600; cursor: pointer; text-align: left; } .ohana-public-search .ps-chip:hover, .ohana-public-search .ps-chip:focus-visible { background: var(--brand-teal-aa, #00767E); color: #fff; } .ohana-public-search .ps-input { width: 100%; box-sizing: border-box; padding: 0.8rem 1rem; font-size: 1.05rem; font-family: var(--font, 'Poppins', Arial, sans-serif); color: #000; border: 2px solid #cbd5e1; border-radius: 12px; outline: none; } .ohana-public-search .ps-input:focus { border-color: var(--brand-blue, #00BAC6); } .ohana-public-search .ps-results { margin-top: 0.75rem; max-height: 50vh; overflow-y: auto; } .ohana-public-search .ps-result { display: block; width: 100%; text-align: left; background: #fff; cursor: pointer; border: 1px solid #e2e8f0; border-radius: 10px; padding: 0.7rem 0.9rem; margin-top: 0.5rem; font-family: var(--font, 'Poppins', Arial, sans-serif); color: #000; } .ohana-public-search .ps-result:hover, .ohana-public-search .ps-result:focus-visible { background: #f0fbfc; border-color: var(--brand-blue, #00BAC6); } .ohana-public-search .ps-result-page { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-teal-aa, #00767E); } .ohana-public-search .ps-result-title { display: block; font-size: 1rem; font-weight: 600; color: #000; margin-top: 0.1rem; } .ohana-public-search .ps-result-summary { font-size: 0.9rem; color: #000; margin-top: 0.15rem; /* Spec section 5 promises one line: clamp a long FAQ answer to two. */ display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ohana-public-search .ps-empty { margin: 0.75rem 0 0.25rem; color: #000; } .ohana-public-search .ps-reach { color: var(--brand-teal-aa, #00767E); font-weight: 600; } /* Anchors land below the sticky nav (60px bar) instead of under it. */ [data-public-search] section[id], [data-public-search] .partner-card[id] { scroll-margin-top: 84px; } @media (max-width: 600px) { .ohana-public-search { width: 100%; max-width: none; border-radius: 0; min-height: 100%; } .ohana-public-search .ps-chip { width: 100%; } }