/* NNN live search — typeahead dropdown. Neutral by design: it inherits the header's own type and sits on white, so it works against TheGem's header without needing to know anything about it. */ /* The panel is a direct child of and positioned from JavaScript, so it cannot be trapped inside the header's stacking context or clipped by an overflow:hidden ancestor. z-index only has to beat other body-level layers. */ .nnn-sf-panel { position: fixed; z-index: 2147483000; min-width: 340px; max-width: 760px; overflow-y: auto; overscroll-behavior: contain; background: #fff; border: 1px solid #E2DDCD; border-radius: 14px; box-shadow: 0 24px 60px -24px rgba(20, 24, 15, .38); padding: 6px; font-family: 'Lato', sans-serif; text-align: left; -webkit-overflow-scrolling: touch; } @media (max-width: 640px) { .nnn-sf-panel { min-width: 0; max-width: none; } } .nnn-sf-row { display: block; padding: 11px 13px; border-radius: 10px; text-decoration: none !important; color: #14180F; box-shadow: none !important; transition: background .14s ease; } .nnn-sf-row:hover, .nnn-sf-row.is-active { background: #F2F8E6; } .nnn-sf-row:focus-visible { outline: 2px solid #7EBB3E; outline-offset: -2px; } .nnn-sf-kind { display: inline-block; font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #4F8418; background: #EAF3DA; border-radius: 999px; padding: 3px 9px; margin-bottom: 6px; line-height: 1.4; } .nnn-sf-title { display: block; font-size: 15px; font-weight: 700; line-height: 1.35; color: #14180F; margin-bottom: 2px; } .nnn-sf-crumb { display: block; font-size: 11.5px; color: #8C9082; line-height: 1.4; margin-bottom: 3px; } .nnn-sf-ex { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; line-height: 1.5; color: #4A4F40; /* Three lines maximum: without this a single long page can fill the whole dropdown and hide every other result, as happens on builder pages. */ max-height: 5.7em; } .nnn-sf-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nnn-sf-panel mark { background: #DCEEC0; color: inherit; padding: 0 1px; border-radius: 2px; font-weight: 700; } .nnn-sf-empty, .nnn-sf-loading { padding: 16px 14px; font-size: 13.5px; color: #6E766E; line-height: 1.5; } .nnn-sf-all { display: block; margin-top: 4px; padding: 11px 13px; border-top: 1px solid #EDE8DA; font-size: 12.5px; font-weight: 900; letter-spacing: .02em; color: #4F8418 !important; text-decoration: none !important; border-radius: 0 0 10px 10px; } .nnn-sf-all:hover { background: #F2F8E6; } .nnn-sf-empty .nnn-sf-all { border-top: 0; padding-left: 0; margin-top: 8px; } /* Terms highlighted on the page a result leads to. Deliberately softer than the in-panel highlight so a page full of hits doesn't read as damaged. */ mark.nnn-sf-hit { background: #FBF3C9; color: inherit; padding: 0 2px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { .nnn-sf-row { transition: none; } }