Search Architecture Diagram
https://cdn.tailwindcss.com
html, body {
font-family: ‘Montserrat’, sans-serif;
background-color: #ADD8E6;
margin: 0;
padding: 1rem;
box-sizing: border-box;
}
body {
display: flex;
align-items: flex-start;
justify-content: center;
width: 100%;
}
.page-wrap {
width: 100%;
max-width: 900px;
margin: 0 auto;
}
/* Custom Blue Colors for ADA Compliance */
.bg-blue-dark { background-color: #001F3F; } /* Navy – Contrast ratio 16:1 against white */
.bg-blue-light { background-color: #003366; } /* Dark Blue – Contrast ratio 11.2:1 against white */
.text-blue-highlight { color: #81D4FA; } /* Light Blue – Contrast ratio 8.7:1 against Navy */
.icon-bg { background-color: #001122; }
/* The decorative broken ring around the chevrons */
.icon-ring {
position: absolute;
width: 100%;
height: 100%;
border: 2px solid white;
border-radius: 50%;
border-top-color: transparent;
border-left-color: transparent;
transform: rotate(45deg);
}
/* Clickable panel affordance */
.panel-trigger {
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.panel-trigger:hover {
transform: translateY(-2px);
filter: brightness(1.15);
}
.panel-trigger:focus-visible {
outline: 3px solid #81D4FA;
outline-offset: -3px;
}
.click-hint {
display: block;
text-align: center;
font-size: 0.7rem;
letter-spacing: 0.05em;
color: #001F3F;
opacity: 0.65;
margin-top: 0.4rem;
}
/* Modal */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 8, 20, 0.72);
display: none;
align-items: center;
justify-content: center;
padding: 1.5rem;
z-index: 50;
}
.modal-overlay.open {
display: flex;
}
.modal-box {
background: #ffffff;
max-width: 32rem;
width: 100%;
border-radius: 0.75rem;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0,0,0,0.35);
animation: modalIn 0.18s ease-out;
}
@keyframes modalIn {
from { opacity: 0; transform: scale(0.96) translateY(6px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-header {
background-color: #001F3F;
color: #81D4FA;
padding: 1.25rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-close {
background: none;
border: none;
color: #81D4FA;
font-size: 1.25rem;
cursor: pointer;
line-height: 1;
padding: 0.25rem;
}
.modal-close:hover { color: #ffffff; }
.modal-body {
padding: 1.5rem;
color: #1f2937;
font-size: 0.95rem;
line-height: 1.6;
}
.modal-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 1rem;
color: #003366;
font-weight: 700;
text-decoration: none;
}
.modal-link:hover { text-decoration: underline; }
Lexical
Search
Field Search, Thesaurus
Browsing, Syntax and
Operators, Filters, Pre-indexed
Databases
Click for more
Natural Language
Understanding (NLU). Query
meaning, context, and
content.
Semantic
…
search
Click for more
Neural
Search
Power of LLM generating the
response, a summary with
sources.
Click for more
Hybrid
Click for more
(function () {
const overlay = document.getElementById(‘modalOverlay’);
const titleEl = document.getElementById(‘modalTitle’);
const bodyEl = document.getElementById(‘modalBody’);
const linkEl = document.getElementById(‘modalLink’);
const closeBtn = document.getElementById(‘modalClose’);
let lastFocused = null;
function openModal(trigger) {
titleEl.textContent = trigger.dataset.title || ”;
bodyEl.textContent = trigger.dataset.body || ”;
const link = trigger.dataset.link || ‘#’;
linkEl.href = link;
linkEl.style.display = link && link !== ‘#’ ? ‘inline-flex’ : ‘none’;
lastFocused = document.activeElement;
overlay.classList.add(‘open’);
closeBtn.focus();
}
function closeModal() {
overlay.classList.remove(‘open’);
if (lastFocused) lastFocused.focus();
}
document.querySelectorAll(‘.panel-trigger’).forEach(function (el) {
el.addEventListener(‘click’, function () { openModal(el); });
el.addEventListener(‘keydown’, function (e) {
if (e.key === ‘Enter’ || e.key === ‘ ‘) {
e.preventDefault();
openModal(el);
}
});
});
closeBtn.addEventListener(‘click’, closeModal);
overlay.addEventListener(‘click’, function (e) {
if (e.target === overlay) closeModal();
});
document.addEventListener(‘keydown’, function (e) {
if (e.key === ‘Escape’ && overlay.classList.contains(‘open’)) closeModal();
});
})();
Review 4 Research 