I’ll build this as a production-ready search-page.css for RX Theme: variables, search hero, form, filters, result cards, no-results state, pagination, sidebar widgets, accessibility, responsive layout, dark mode, print, and performance-safe animations.
Below is a strong advanced assets/static/static-css/pages/search-page.css file for your RX Theme search page. It is written to be flexible, SEO-friendly visually, responsive, accessible, and ready for WordPress search templates.
/*!
* RX Theme - Search Page CSS
* File: assets/static/static-css/pages/search-page.css
* Author: RxHarun
* Purpose: Advanced search results page styling for RX Theme
* Scope: Search archive, search form, result cards, filters, no-results, pagination, sidebar
*/
/* =========================================================
01. Search Page Design Tokens
========================================================= */
:root {
--rx-search-bg: var(--rx-color-bg, #f8fafc);
--rx-search-surface: var(--rx-color-surface, #ffffff);
--rx-search-surface-soft: var(--rx-color-surface-soft, #f1f5f9);
--rx-search-border: var(--rx-color-border, #e2e8f0);
--rx-search-border-strong: var(--rx-color-border-strong, #cbd5e1);
--rx-search-text: var(--rx-color-text, #0f172a);
--rx-search-text-soft: var(--rx-color-text-soft, #475569);
--rx-search-text-muted: var(--rx-color-text-muted, #64748b);
--rx-search-heading: var(--rx-color-heading, #020617);
--rx-search-primary: var(--rx-color-primary, #0563c1);
--rx-search-primary-dark: var(--rx-color-primary-dark, #034f9a);
--rx-search-primary-soft: var(--rx-color-primary-soft, #e0f2fe);
--rx-search-success: var(--rx-color-success, #15803d);
--rx-search-warning: var(--rx-color-warning, #b45309);
--rx-search-danger: var(--rx-color-danger, #b91c1c);
--rx-search-radius-xs: 6px;
--rx-search-radius-sm: 10px;
--rx-search-radius-md: 14px;
--rx-search-radius-lg: 20px;
--rx-search-radius-xl: 28px;
--rx-search-radius-pill: 999px;
--rx-search-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
--rx-search-shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.07);
--rx-search-shadow-md: 0 12px 30px rgba(15, 23, 42, 0.10);
--rx-search-shadow-lg: 0 22px 50px rgba(15, 23, 42, 0.14);
--rx-search-container: 1180px;
--rx-search-content: 780px;
--rx-search-sidebar: 340px;
--rx-search-gap-xs: 0.5rem;
--rx-search-gap-sm: 0.75rem;
--rx-search-gap-md: 1rem;
--rx-search-gap-lg: 1.5rem;
--rx-search-gap-xl: 2rem;
--rx-search-gap-2xl: 3rem;
--rx-search-font-size-xs: 0.75rem;
--rx-search-font-size-sm: 0.875rem;
--rx-search-font-size-md: 1rem;
--rx-search-font-size-lg: 1.125rem;
--rx-search-font-size-xl: 1.35rem;
--rx-search-font-size-2xl: clamp(1.8rem, 4vw, 3.25rem);
--rx-search-line-height: 1.7;
--rx-search-transition-fast: 160ms ease;
--rx-search-transition-normal: 240ms ease;
--rx-search-transition-slow: 360ms ease;
--rx-search-focus-ring: 0 0 0 4px rgba(5, 99, 193, 0.18);
}
/* =========================================================
02. Page Wrapper
========================================================= */
.search .site-main,
.search-page,
.rx-search-page {
background:
radial-gradient(circle at top left, rgba(5, 99, 193, 0.08), transparent 34rem),
linear-gradient(180deg, var(--rx-search-bg), #ffffff 42rem);
color: var(--rx-search-text);
min-height: 70vh;
}
.rx-search-wrap {
width: min(100% - 2rem, var(--rx-search-container));
margin-inline: auto;
padding-block: clamp(2rem, 5vw, 4.5rem);
}
.rx-search-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, var(--rx-search-sidebar));
gap: clamp(1.5rem, 4vw, 3rem);
align-items: start;
}
.rx-search-content {
min-width: 0;
}
.rx-search-sidebar {
min-width: 0;
position: sticky;
top: calc(var(--rx-header-height, 80px) + 1rem);
}
/* Full width page option */
.rx-search-page--full .rx-search-layout,
.search-no-sidebar .rx-search-layout {
grid-template-columns: 1fr;
}
.rx-search-page--full .rx-search-content,
.search-no-sidebar .rx-search-content {
max-width: var(--rx-search-content);
margin-inline: auto;
width: 100%;
}
/* =========================================================
03. Search Hero Area
========================================================= */
.rx-search-hero {
position: relative;
overflow: hidden;
border: 1px solid rgba(226, 232, 240, 0.8);
border-radius: var(--rx-search-radius-xl);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(224, 242, 254, 0.58)),
var(--rx-search-surface);
box-shadow: var(--rx-search-shadow-md);
padding: clamp(1.5rem, 4vw, 3rem);
margin-bottom: var(--rx-search-gap-xl);
isolation: isolate;
}
.rx-search-hero::before {
content: "";
position: absolute;
width: 18rem;
height: 18rem;
right: -6rem;
top: -8rem;
border-radius: 50%;
background: rgba(5, 99, 193, 0.10);
filter: blur(2px);
z-index: -1;
}
.rx-search-hero::after {
content: "";
position: absolute;
width: 12rem;
height: 12rem;
left: -5rem;
bottom: -6rem;
border-radius: 50%;
background: rgba(21, 128, 61, 0.08);
z-index: -1;
}
.rx-search-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.45rem;
width: fit-content;
margin-bottom: 0.85rem;
padding: 0.38rem 0.75rem;
border: 1px solid rgba(5, 99, 193, 0.18);
border-radius: var(--rx-search-radius-pill);
background: rgba(224, 242, 254, 0.72);
color: var(--rx-search-primary-dark);
font-size: var(--rx-search-font-size-sm);
font-weight: 700;
letter-spacing: 0.01em;
}
.rx-search-title {
margin: 0;
color: var(--rx-search-heading);
font-size: var(--rx-search-font-size-2xl);
line-height: 1.15;
letter-spacing: -0.04em;
}
.rx-search-title mark,
.rx-search-query-highlight {
padding: 0.05em 0.18em;
border-radius: 0.18em;
background: linear-gradient(180deg, transparent 48%, rgba(250, 204, 21, 0.45) 48%);
color: inherit;
}
.rx-search-description {
max-width: 68ch;
margin: 1rem 0 0;
color: var(--rx-search-text-soft);
font-size: var(--rx-search-font-size-lg);
line-height: var(--rx-search-line-height);
}
.rx-search-count {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
align-items: center;
margin-top: 1.2rem;
color: var(--rx-search-text-muted);
font-size: var(--rx-search-font-size-sm);
}
.rx-search-count strong {
color: var(--rx-search-heading);
font-weight: 800;
}
.rx-search-count-pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.42rem 0.75rem;
border-radius: var(--rx-search-radius-pill);
background: var(--rx-search-surface);
box-shadow: var(--rx-search-shadow-xs);
color: var(--rx-search-text-soft);
font-weight: 700;
}
/* =========================================================
04. Advanced Search Form
========================================================= */
.rx-search-form-panel {
margin-top: var(--rx-search-gap-lg);
padding: 0.45rem;
border: 1px solid rgba(203, 213, 225, 0.85);
border-radius: calc(var(--rx-search-radius-lg) + 0.45rem);
background: rgba(255, 255, 255, 0.78);
box-shadow: var(--rx-search-shadow-sm);
backdrop-filter: blur(12px);
}
.rx-search-form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.55rem;
align-items: center;
}
.rx-search-field-wrap {
position: relative;
display: flex;
align-items: center;
min-width: 0;
}
.rx-search-icon {
position: absolute;
left: 1rem;
width: 1.15rem;
height: 1.15rem;
color: var(--rx-search-text-muted);
pointer-events: none;
}
.rx-search-input,
.search-form .search-field {
width: 100%;
min-height: 3.35rem;
padding: 0.9rem 1rem 0.9rem 2.85rem;
border: 1px solid transparent;
border-radius: var(--rx-search-radius-lg);
background: var(--rx-search-surface);
color: var(--rx-search-text);
font: inherit;
font-size: 1rem;
outline: none;
transition:
border-color var(--rx-search-transition-fast),
box-shadow var(--rx-search-transition-fast),
background var(--rx-search-transition-fast);
}
.rx-search-input::placeholder,
.search-form .search-field::placeholder {
color: #94a3b8;
}
.rx-search-input:focus,
.search-form .search-field:focus {
border-color: rgba(5, 99, 193, 0.55);
box-shadow: var(--rx-search-focus-ring);
background: #ffffff;
}
.rx-search-submit,
.search-form .search-submit {
min-height: 3.35rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
padding: 0.85rem 1.25rem;
border: 0;
border-radius: var(--rx-search-radius-lg);
background: linear-gradient(135deg, var(--rx-search-primary), var(--rx-search-primary-dark));
color: #ffffff;
font: inherit;
font-weight: 800;
cursor: pointer;
box-shadow: 0 10px 24px rgba(5, 99, 193, 0.24);
transition:
transform var(--rx-search-transition-fast),
box-shadow var(--rx-search-transition-fast),
filter var(--rx-search-transition-fast);
}
.rx-search-submit:hover,
.search-form .search-submit:hover {
transform: translateY(-1px);
box-shadow: 0 14px 30px rgba(5, 99, 193, 0.30);
filter: brightness(1.03);
}
.rx-search-submit:active,
.search-form .search-submit:active {
transform: translateY(0);
box-shadow: 0 8px 18px rgba(5, 99, 193, 0.22);
}
.rx-search-submit:focus-visible,
.search-form .search-submit:focus-visible {
outline: none;
box-shadow:
var(--rx-search-focus-ring),
0 12px 28px rgba(5, 99, 193, 0.30);
}
/* WordPress default search form support */
.search-form {
display: flex;
gap: 0.65rem;
align-items: center;
}
.search-form label {
flex: 1 1 auto;
min-width: 0;
}
/* =========================================================
05. Search Tools, Filters, Sorting
========================================================= */
.rx-search-tools {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--rx-search-gap-md);
margin-bottom: var(--rx-search-gap-lg);
padding: 1rem;
border: 1px solid var(--rx-search-border);
border-radius: var(--rx-search-radius-lg);
background: rgba(255, 255, 255, 0.82);
box-shadow: var(--rx-search-shadow-xs);
}
.rx-search-filter-list {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
margin: 0;
padding: 0;
list-style: none;
}
.rx-search-filter,
.rx-search-sort,
.rx-search-chip {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: 2.35rem;
padding: 0.45rem 0.8rem;
border: 1px solid var(--rx-search-border);
border-radius: var(--rx-search-radius-pill);
background: var(--rx-search-surface);
color: var(--rx-search-text-soft);
font-size: var(--rx-search-font-size-sm);
font-weight: 700;
text-decoration: none;
transition:
background var(--rx-search-transition-fast),
color var(--rx-search-transition-fast),
border-color var(--rx-search-transition-fast),
transform var(--rx-search-transition-fast);
}
.rx-search-filter:hover,
.rx-search-chip:hover {
border-color: rgba(5, 99, 193, 0.38);
background: var(--rx-search-primary-soft);
color: var(--rx-search-primary-dark);
transform: translateY(-1px);
}
.rx-search-filter.is-active,
.rx-search-chip.is-active {
border-color: var(--rx-search-primary);
background: var(--rx-search-primary);
color: #ffffff;
}
.rx-search-sort select {
border: 0;
background: transparent;
color: inherit;
font: inherit;
font-weight: 700;
outline: none;
}
/* =========================================================
06. Search Result List
========================================================= */
.rx-search-results {
display: grid;
gap: var(--rx-search-gap-lg);
}
.rx-search-result {
position: relative;
display: grid;
grid-template-columns: 180px minmax(0, 1fr);
gap: var(--rx-search-gap-lg);
overflow: hidden;
padding: clamp(1rem, 2.5vw, 1.35rem);
border: 1px solid var(--rx-search-border);
border-radius: var(--rx-search-radius-xl);
background: var(--rx-search-surface);
box-shadow: var(--rx-search-shadow-sm);
transition:
transform var(--rx-search-transition-normal),
box-shadow var(--rx-search-transition-normal),
border-color var(--rx-search-transition-normal);
}
.rx-search-result::before {
content: "";
position: absolute;
inset-block: 0;
left: 0;
width: 4px;
background: linear-gradient(180deg, var(--rx-search-primary), rgba(5, 99, 193, 0.25));
opacity: 0;
transition: opacity var(--rx-search-transition-normal);
}
.rx-search-result:hover {
transform: translateY(-3px);
border-color: rgba(5, 99, 193, 0.24);
box-shadow: var(--rx-search-shadow-lg);
}
.rx-search-result:hover::before {
opacity: 1;
}
.rx-search-result:focus-within {
border-color: rgba(5, 99, 193, 0.55);
box-shadow: var(--rx-search-focus-ring), var(--rx-search-shadow-md);
}
/* Result without thumbnail */
.rx-search-result--no-thumb {
grid-template-columns: 1fr;
}
.rx-search-thumb {
position: relative;
overflow: hidden;
align-self: stretch;
min-height: 132px;
border-radius: var(--rx-search-radius-lg);
background:
linear-gradient(135deg, #e2e8f0, #f8fafc);
}
.rx-search-thumb a {
display: block;
width: 100%;
height: 100%;
}
.rx-search-thumb img {
width: 100%;
height: 100%;
min-height: 132px;
object-fit: cover;
display: block;
transform: scale(1.01);
transition:
transform var(--rx-search-transition-slow),
filter var(--rx-search-transition-slow);
}
.rx-search-result:hover .rx-search-thumb img {
transform: scale(1.055);
filter: saturate(1.05) contrast(1.02);
}
.rx-search-thumb-placeholder {
display: grid;
place-items: center;
width: 100%;
height: 100%;
min-height: 132px;
color: var(--rx-search-primary);
background:
radial-gradient(circle at 30% 20%, rgba(5, 99, 193, 0.14), transparent 42%),
linear-gradient(135deg, #eff6ff, #f8fafc);
}
.rx-search-body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.rx-search-meta {
display: flex;
flex-wrap: wrap;
gap: 0.45rem 0.75rem;
align-items: center;
color: var(--rx-search-text-muted);
font-size: var(--rx-search-font-size-sm);
line-height: 1.4;
}
.rx-search-meta-item {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.rx-search-meta-item svg {
width: 1rem;
height: 1rem;
flex: 0 0 auto;
}
.rx-search-post-type {
display: inline-flex;
align-items: center;
width: fit-content;
padding: 0.28rem 0.58rem;
border-radius: var(--rx-search-radius-pill);
background: var(--rx-search-primary-soft);
color: var(--rx-search-primary-dark);
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.045em;
}
.rx-search-result-title {
margin: 0;
color: var(--rx-search-heading);
font-size: clamp(1.18rem, 2.2vw, 1.55rem);
line-height: 1.3;
letter-spacing: -0.02em;
}
.rx-search-result-title a {
color: inherit;
text-decoration: none;
background:
linear-gradient(currentColor, currentColor)
0 100% / 0 2px no-repeat;
transition:
color var(--rx-search-transition-fast),
background-size var(--rx-search-transition-fast);
}
.rx-search-result-title a:hover {
color: var(--rx-search-primary);
background-size: 100% 2px;
}
.rx-search-result-title a:focus-visible {
outline: none;
color: var(--rx-search-primary);
box-shadow: var(--rx-search-focus-ring);
border-radius: var(--rx-search-radius-xs);
}
.rx-search-excerpt {
margin: 0;
color: var(--rx-search-text-soft);
font-size: var(--rx-search-font-size-md);
line-height: var(--rx-search-line-height);
}
.rx-search-excerpt mark,
.search-highlight {
padding: 0.04em 0.2em;
border-radius: 0.25em;
background: rgba(250, 204, 21, 0.38);
color: inherit;
}
.rx-search-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-top: auto;
}
.rx-search-cats,
.rx-search-tags {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.rx-search-cat,
.rx-search-tag {
display: inline-flex;
align-items: center;
padding: 0.3rem 0.58rem;
border-radius: var(--rx-search-radius-pill);
background: var(--rx-search-surface-soft);
color: var(--rx-search-text-soft);
font-size: var(--rx-search-font-size-xs);
font-weight: 700;
text-decoration: none;
}
.rx-search-cat:hover,
.rx-search-tag:hover {
background: var(--rx-search-primary-soft);
color: var(--rx-search-primary-dark);
}
.rx-search-read-more {
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: var(--rx-search-primary);
font-size: var(--rx-search-font-size-sm);
font-weight: 800;
text-decoration: none;
white-space: nowrap;
}
.rx-search-read-more::after {
content: "→";
transition: transform var(--rx-search-transition-fast);
}
.rx-search-read-more:hover::after {
transform: translateX(3px);
}
.rx-search-read-more:focus-visible {
outline: none;
box-shadow: var(--rx-search-focus-ring);
border-radius: var(--rx-search-radius-xs);
}
/* =========================================================
07. Medical Content Extra Styling
========================================================= */
.rx-search-result[data-rx-content="medical"] .rx-search-post-type,
.rx-search-result.is-medical .rx-search-post-type {
background: rgba(220, 252, 231, 0.9);
color: #166534;
}
.rx-search-result[data-rx-content="drug"] .rx-search-post-type,
.rx-search-result.is-drug .rx-search-post-type {
background: rgba(254, 243, 199, 0.9);
color: #92400e;
}
.rx-search-result[data-rx-content="disease"] .rx-search-post-type,
.rx-search-result.is-disease .rx-search-post-type {
background: rgba(219, 234, 254, 0.9);
color: #1e40af;
}
.rx-search-clinical-note {
margin-top: 0.25rem;
padding: 0.75rem 0.9rem;
border-left: 4px solid var(--rx-search-primary);
border-radius: var(--rx-search-radius-sm);
background: #f8fafc;
color: var(--rx-search-text-soft);
font-size: var(--rx-search-font-size-sm);
line-height: 1.6;
}
.rx-search-evidence-level {
display: inline-flex;
align-items: center;
gap: 0.35rem;
width: fit-content;
padding: 0.3rem 0.58rem;
border-radius: var(--rx-search-radius-pill);
background: rgba(21, 128, 61, 0.10);
color: var(--rx-search-success);
font-size: var(--rx-search-font-size-xs);
font-weight: 800;
}
/* =========================================================
08. No Results State
========================================================= */
.rx-search-no-results,
.no-results.not-found {
padding: clamp(1.5rem, 4vw, 3rem);
border: 1px solid var(--rx-search-border);
border-radius: var(--rx-search-radius-xl);
background:
radial-gradient(circle at top right, rgba(5, 99, 193, 0.08), transparent 22rem),
var(--rx-search-surface);
box-shadow: var(--rx-search-shadow-sm);
text-align: center;
}
.rx-search-no-results-icon {
display: grid;
place-items: center;
width: 4.5rem;
height: 4.5rem;
margin: 0 auto 1.2rem;
border-radius: 50%;
background: var(--rx-search-primary-soft);
color: var(--rx-search-primary);
}
.rx-search-no-results h2,
.no-results .page-title {
margin: 0 0 0.75rem;
color: var(--rx-search-heading);
font-size: clamp(1.45rem, 3vw, 2rem);
letter-spacing: -0.03em;
}
.rx-search-no-results p,
.no-results p {
max-width: 62ch;
margin-inline: auto;
color: var(--rx-search-text-soft);
line-height: var(--rx-search-line-height);
}
.rx-search-suggestions {
margin-top: var(--rx-search-gap-lg);
padding: 1rem;
border-radius: var(--rx-search-radius-lg);
background: var(--rx-search-surface-soft);
text-align: left;
}
.rx-search-suggestions h3 {
margin: 0 0 0.65rem;
font-size: 1rem;
color: var(--rx-search-heading);
}
.rx-search-suggestions ul {
margin: 0;
padding-left: 1.2rem;
color: var(--rx-search-text-soft);
line-height: 1.8;
}
/* =========================================================
09. Pagination
========================================================= */
.rx-search-pagination,
.search .navigation.pagination,
.search .nav-links {
margin-top: var(--rx-search-gap-2xl);
}
.search .nav-links,
.rx-search-pagination-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.55rem;
margin: 0;
padding: 0;
list-style: none;
}
.search .page-numbers,
.rx-search-pagination a,
.rx-search-pagination span {
min-width: 2.65rem;
min-height: 2.65rem;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.55rem 0.8rem;
border: 1px solid var(--rx-search-border);
border-radius: var(--rx-search-radius-md);
background: var(--rx-search-surface);
color: var(--rx-search-text-soft);
font-weight: 800;
text-decoration: none;
box-shadow: var(--rx-search-shadow-xs);
transition:
background var(--rx-search-transition-fast),
color var(--rx-search-transition-fast),
border-color var(--rx-search-transition-fast),
transform var(--rx-search-transition-fast);
}
.search .page-numbers:hover,
.rx-search-pagination a:hover {
transform: translateY(-1px);
border-color: rgba(5, 99, 193, 0.35);
background: var(--rx-search-primary-soft);
color: var(--rx-search-primary-dark);
}
.search .page-numbers.current,
.rx-search-pagination .current {
border-color: var(--rx-search-primary);
background: var(--rx-search-primary);
color: #ffffff;
}
.search .page-numbers.dots {
border-color: transparent;
background: transparent;
box-shadow: none;
}
/* =========================================================
10. Sidebar Widgets
========================================================= */
.rx-search-sidebar .widget,
.rx-search-widget {
margin-bottom: var(--rx-search-gap-lg);
padding: 1.15rem;
border: 1px solid var(--rx-search-border);
border-radius: var(--rx-search-radius-xl);
background: rgba(255, 255, 255, 0.9);
box-shadow: var(--rx-search-shadow-sm);
}
.rx-search-sidebar .widget-title,
.rx-search-widget-title {
position: relative;
margin: 0 0 1rem;
padding-bottom: 0.65rem;
color: var(--rx-search-heading);
font-size: 1.08rem;
line-height: 1.35;
letter-spacing: -0.02em;
}
.rx-search-sidebar .widget-title::after,
.rx-search-widget-title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 2.5rem;
height: 3px;
border-radius: var(--rx-search-radius-pill);
background: var(--rx-search-primary);
}
.rx-search-sidebar ul,
.rx-search-widget ul {
margin: 0;
padding: 0;
list-style: none;
}
.rx-search-sidebar li,
.rx-search-widget li {
border-bottom: 1px solid var(--rx-search-border);
}
.rx-search-sidebar li:last-child,
.rx-search-widget li:last-child {
border-bottom: 0;
}
.rx-search-sidebar li a,
.rx-search-widget li a {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 0.72rem 0;
color: var(--rx-search-text-soft);
font-weight: 700;
text-decoration: none;
}
.rx-search-sidebar li a:hover,
.rx-search-widget li a:hover {
color: var(--rx-search-primary);
}
.rx-search-sidebar .count,
.rx-search-widget .count {
color: var(--rx-search-text-muted);
font-size: var(--rx-search-font-size-sm);
}
/* =========================================================
11. Search Loading / Skeleton State
========================================================= */
.rx-search-loading .rx-search-result,
.rx-search-result.is-loading {
pointer-events: none;
}
.rx-search-skeleton {
position: relative;
overflow: hidden;
border-radius: var(--rx-search-radius-sm);
background: #e2e8f0;
}
.rx-search-skeleton::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.55),
transparent
);
animation: rx-search-shimmer 1.35s infinite;
}
.rx-search-skeleton-title {
width: 72%;
height: 1.45rem;
}
.rx-search-skeleton-line {
width: 100%;
height: 0.9rem;
}
.rx-search-skeleton-line:nth-child(2) {
width: 92%;
}
.rx-search-skeleton-line:nth-child(3) {
width: 78%;
}
@keyframes rx-search-shimmer {
100% {
transform: translateX(100%);
}
}
/* =========================================================
12. Breadcrumb Support
========================================================= */
.rx-search-breadcrumb,
.search .breadcrumb,
.search .rank-math-breadcrumb,
.search .yoast-breadcrumb {
margin-bottom: var(--rx-search-gap-lg);
color: var(--rx-search-text-muted);
font-size: var(--rx-search-font-size-sm);
}
.rx-search-breadcrumb a,
.search .breadcrumb a,
.search .rank-math-breadcrumb a,
.search .yoast-breadcrumb a {
color: var(--rx-search-text-soft);
font-weight: 700;
text-decoration: none;
}
.rx-search-breadcrumb a:hover,
.search .breadcrumb a:hover,
.search .rank-math-breadcrumb a:hover,
.search .yoast-breadcrumb a:hover {
color: var(--rx-search-primary);
}
/* =========================================================
13. Utility Classes
========================================================= */
.rx-search-visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
white-space: nowrap !important;
clip-path: inset(50%) !important;
}
.rx-search-text-center {
text-align: center;
}
.rx-search-mt-0 {
margin-top: 0 !important;
}
.rx-search-mb-0 {
margin-bottom: 0 !important;
}
.rx-search-hidden {
display: none !important;
}
/* =========================================================
14. Accessibility
========================================================= */
.rx-search-page a:focus-visible,
.rx-search-page button:focus-visible,
.rx-search-page input:focus-visible,
.rx-search-page select:focus-visible,
.search a:focus-visible,
.search button:focus-visible,
.search input:focus-visible,
.search select:focus-visible {
outline: none;
box-shadow: var(--rx-search-focus-ring);
}
.rx-search-page ::selection,
.search ::selection {
background: rgba(5, 99, 193, 0.22);
color: var(--rx-search-heading);
}
@media (prefers-reduced-motion: reduce) {
.rx-search-page *,
.rx-search-page *::before,
.rx-search-page *::after,
.search *,
.search *::before,
.search *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.001ms !important;
}
}
/* =========================================================
15. Responsive Design
========================================================= */
@media (max-width: 1080px) {
.rx-search-layout {
grid-template-columns: 1fr;
}
.rx-search-sidebar {
position: static;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--rx-search-gap-lg);
}
.rx-search-sidebar .widget,
.rx-search-widget {
margin-bottom: 0;
}
}
@media (max-width: 760px) {
.rx-search-wrap {
width: min(100% - 1rem, var(--rx-search-container));
padding-block: 1.5rem 2.5rem;
}
.rx-search-hero {
padding: 1.25rem;
border-radius: var(--rx-search-radius-lg);
}
.rx-search-form,
.search-form {
grid-template-columns: 1fr;
flex-direction: column;
align-items: stretch;
}
.rx-search-submit,
.search-form .search-submit {
width: 100%;
}
.rx-search-tools {
align-items: stretch;
}
.rx-search-filter-list {
width: 100%;
}
.rx-search-result {
grid-template-columns: 1fr;
border-radius: var(--rx-search-radius-lg);
}
.rx-search-thumb {
min-height: 210px;
}
.rx-search-thumb img {
min-height: 210px;
}
.rx-search-footer {
align-items: flex-start;
flex-direction: column;
}
.rx-search-sidebar {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.rx-search-title {
letter-spacing: -0.025em;
}
.rx-search-description {
font-size: 1rem;
}
.rx-search-count {
align-items: flex-start;
flex-direction: column;
}
.rx-search-filter,
.rx-search-chip {
width: 100%;
justify-content: center;
}
.search .page-numbers,
.rx-search-pagination a,
.rx-search-pagination span {
min-width: 2.35rem;
min-height: 2.35rem;
padding: 0.45rem 0.65rem;
}
}
/* =========================================================
16. Dark Mode Support
========================================================= */
@media (prefers-color-scheme: dark) {
:root {
--rx-search-bg: #020617;
--rx-search-surface: #0f172a;
--rx-search-surface-soft: #111c2f;
--rx-search-border: #1e293b;
--rx-search-border-strong: #334155;
--rx-search-text: #e5e7eb;
--rx-search-text-soft: #cbd5e1;
--rx-search-text-muted: #94a3b8;
--rx-search-heading: #f8fafc;
--rx-search-primary: #38bdf8;
--rx-search-primary-dark: #7dd3fc;
--rx-search-primary-soft: rgba(56, 189, 248, 0.14);
--rx-search-focus-ring: 0 0 0 4px rgba(56, 189, 248, 0.20);
}
.search .site-main,
.search-page,
.rx-search-page {
background:
radial-gradient(circle at top left, rgba(56, 189, 248, 0.10), transparent 34rem),
linear-gradient(180deg, #020617, #0f172a 48rem);
}
.rx-search-hero,
.rx-search-form-panel,
.rx-search-tools,
.rx-search-result,
.rx-search-no-results,
.no-results.not-found,
.rx-search-sidebar .widget,
.rx-search-widget {
background: rgba(15, 23, 42, 0.88);
border-color: rgba(51, 65, 85, 0.9);
}
.rx-search-input,
.search-form .search-field,
.rx-search-filter,
.rx-search-sort,
.rx-search-chip,
.search .page-numbers,
.rx-search-pagination a,
.rx-search-pagination span {
background: #111827;
border-color: #263244;
}
.rx-search-input:focus,
.search-form .search-field:focus {
background: #0f172a;
}
.rx-search-thumb-placeholder {
background:
radial-gradient(circle at 30% 20%, rgba(56, 189, 248, 0.18), transparent 42%),
linear-gradient(135deg, #111827, #0f172a);
}
.rx-search-clinical-note,
.rx-search-suggestions {
background: rgba(17, 24, 39, 0.85);
}
.rx-search-skeleton {
background: #1e293b;
}
.rx-search-title mark,
.rx-search-query-highlight,
.rx-search-excerpt mark,
.search-highlight {
background: rgba(250, 204, 21, 0.22);
}
}
/* Manual dark class support */
.rx-theme-dark .rx-search-page,
.dark-mode .rx-search-page {
--rx-search-bg: #020617;
--rx-search-surface: #0f172a;
--rx-search-surface-soft: #111c2f;
--rx-search-border: #1e293b;
--rx-search-text: #e5e7eb;
--rx-search-text-soft: #cbd5e1;
--rx-search-text-muted: #94a3b8;
--rx-search-heading: #f8fafc;
--rx-search-primary: #38bdf8;
--rx-search-primary-dark: #7dd3fc;
--rx-search-primary-soft: rgba(56, 189, 248, 0.14);
}
/* =========================================================
17. Print Optimization
========================================================= */
@media print {
.rx-search-hero,
.rx-search-result,
.rx-search-no-results,
.no-results.not-found {
box-shadow: none !important;
border-color: #d1d5db !important;
background: #ffffff !important;
}
.rx-search-form-panel,
.rx-search-tools,
.rx-search-sidebar,
.rx-search-pagination,
.search .navigation.pagination {
display: none !important;
}
.rx-search-layout {
display: block !important;
}
.rx-search-result {
break-inside: avoid;
page-break-inside: avoid;
}
.rx-search-result-title a {
color: #000000 !important;
text-decoration: underline;
}
.rx-search-read-more::after {
content: "";
}
}Use it like this in your theme enqueue file:
wp_enqueue_style(
'rx-search-page',
get_template_directory_uri() . '/assets/static/static-css/pages/search-page.css',
array(),
wp_get_theme()->get('Version')
);Best matching template class structure:
<main class="rx-search-page">
<div class="rx-search-wrap">
<section class="rx-search-hero">
<span class="rx-search-eyebrow">Search RX Medical Library</span>
<h1 class="rx-search-title">Search results for <mark>arthritis</mark></h1>
<p class="rx-search-description">Find evidence-based medical articles, health guides, disease explanations, and treatment information.</p>
<div class="rx-search-form-panel">
<!-- WordPress search form here -->
</div>
</section>
<div class="rx-search-layout">
<div class="rx-search-content">
<div class="rx-search-results">
<!-- result cards -->
</div>
</div>
<aside class="rx-search-sidebar">
<!-- widgets -->
</aside>
</div>
</div>
</main>