I’ll build this as a production-ready 404.css page stylesheet for RX Theme: responsive layout, accessible states, dark mode, reduced motion, print styles, animations, search block, suggestions, and WordPress/admin-safe fallbacks.
Dear friend, create this file:
assets/static/static-css/pages/404.css
Then paste this full advanced CSS code:
/*!
Theme Name: RX Theme
File: assets/static/static-css/pages/404.css
Purpose: Advanced 404 / Not Found page styling
Author: RxHarun
*/
/* =========================================================
RX THEME 404 PAGE CSS
- SEO friendly visual UX
- Accessible focus states
- Responsive layout
- Dark mode support
- Reduced motion support
- Search form styling
- Helpful link grid
- WordPress-safe selectors
========================================================= */
/* ================================
1. Page-level variables
================================ */
:root {
--rx-404-bg: var(--rx-color-background, #f8fafc);
--rx-404-surface: var(--rx-color-surface, #ffffff);
--rx-404-surface-soft: var(--rx-color-surface-soft, #f1f5f9);
--rx-404-text: var(--rx-color-text, #0f172a);
--rx-404-text-muted: var(--rx-color-muted, #64748b);
--rx-404-heading: var(--rx-color-heading, #020617);
--rx-404-primary: var(--rx-color-primary, #0f766e);
--rx-404-primary-dark: var(--rx-color-primary-dark, #115e59);
--rx-404-primary-soft: var(--rx-color-primary-soft, #ccfbf1);
--rx-404-danger: var(--rx-color-danger, #dc2626);
--rx-404-warning: var(--rx-color-warning, #f59e0b);
--rx-404-info: var(--rx-color-info, #2563eb);
--rx-404-border: var(--rx-color-border, #e2e8f0);
--rx-404-border-strong: var(--rx-color-border-strong, #cbd5e1);
--rx-404-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
--rx-404-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.10);
--rx-404-shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.14);
--rx-404-radius-sm: 8px;
--rx-404-radius-md: 14px;
--rx-404-radius-lg: 24px;
--rx-404-radius-pill: 999px;
--rx-404-container: 1180px;
--rx-404-content: 760px;
--rx-404-space-1: 0.25rem;
--rx-404-space-2: 0.5rem;
--rx-404-space-3: 0.75rem;
--rx-404-space-4: 1rem;
--rx-404-space-5: 1.25rem;
--rx-404-space-6: 1.5rem;
--rx-404-space-8: 2rem;
--rx-404-space-10: 2.5rem;
--rx-404-space-12: 3rem;
--rx-404-space-16: 4rem;
--rx-404-transition-fast: 160ms ease;
--rx-404-transition-normal: 260ms ease;
--rx-404-transition-slow: 420ms ease;
--rx-404-font-sans: var(--rx-font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
/* ================================
2. Base 404 wrapper
================================ */
.error404,
.rx-page-404,
.rx-404-page,
body.error404 {
background:
radial-gradient(circle at top left, rgba(15, 118, 110, 0.12), transparent 34rem),
radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.10), transparent 32rem),
var(--rx-404-bg);
color: var(--rx-404-text);
}
.rx-404 {
position: relative;
overflow: hidden;
min-height: clamp(560px, 72vh, 860px);
padding: clamp(3rem, 7vw, 7rem) 1rem;
font-family: var(--rx-404-font-sans);
isolation: isolate;
}
.rx-404::before,
.rx-404::after {
content: "";
position: absolute;
z-index: -1;
pointer-events: none;
border-radius: 50%;
opacity: 0.55;
}
.rx-404::before {
width: 22rem;
height: 22rem;
inset-block-start: 6%;
inset-inline-start: -8rem;
background: rgba(15, 118, 110, 0.11);
filter: blur(18px);
}
.rx-404::after {
width: 26rem;
height: 26rem;
inset-block-end: -10rem;
inset-inline-end: -8rem;
background: rgba(37, 99, 235, 0.10);
filter: blur(20px);
}
.rx-404__container {
width: min(100%, var(--rx-404-container));
margin-inline: auto;
}
.rx-404__inner {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
align-items: center;
gap: clamp(2rem, 5vw, 5rem);
}
/* ================================
3. Main content card
================================ */
.rx-404__content {
max-width: var(--rx-404-content);
}
.rx-404__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-block-end: 1rem;
padding: 0.45rem 0.85rem;
border: 1px solid rgba(15, 118, 110, 0.18);
border-radius: var(--rx-404-radius-pill);
background: rgba(204, 251, 241, 0.62);
color: var(--rx-404-primary-dark);
font-size: clamp(0.78rem, 1vw, 0.9rem);
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.rx-404__eyebrow::before {
content: "";
width: 0.55rem;
height: 0.55rem;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12);
}
.rx-404__title {
margin: 0;
color: var(--rx-404-heading);
font-size: clamp(2.5rem, 7vw, 6.5rem);
line-height: 0.95;
font-weight: 900;
letter-spacing: -0.06em;
}
.rx-404__title-code {
display: block;
margin-block-end: 0.35rem;
color: var(--rx-404-primary);
font-size: clamp(4.8rem, 13vw, 10rem);
line-height: 0.78;
letter-spacing: -0.08em;
text-shadow: 0 12px 34px rgba(15, 118, 110, 0.16);
}
.rx-404__subtitle {
margin: 1.15rem 0 0;
max-width: 58ch;
color: var(--rx-404-text-muted);
font-size: clamp(1rem, 1.6vw, 1.22rem);
line-height: 1.75;
}
.rx-404__message {
margin-block-start: 1rem;
max-width: 62ch;
color: var(--rx-404-text);
font-size: 1rem;
line-height: 1.8;
}
/* ================================
4. Action buttons
================================ */
.rx-404__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.85rem;
margin-block-start: clamp(1.5rem, 3vw, 2rem);
}
.rx-404__button,
.rx-404__btn,
.rx-404 a.rx-404__button,
.rx-404 a.rx-404__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
min-height: 46px;
padding: 0.78rem 1.15rem;
border: 1px solid transparent;
border-radius: var(--rx-404-radius-pill);
font-size: 0.96rem;
font-weight: 800;
line-height: 1;
text-decoration: none;
cursor: pointer;
transition:
transform var(--rx-404-transition-fast),
background-color var(--rx-404-transition-fast),
border-color var(--rx-404-transition-fast),
color var(--rx-404-transition-fast),
box-shadow var(--rx-404-transition-fast);
}
.rx-404__button--primary,
.rx-404__btn--primary {
background: var(--rx-404-primary);
color: #ffffff;
box-shadow: 0 10px 22px rgba(15, 118, 110, 0.22);
}
.rx-404__button--primary:hover,
.rx-404__btn--primary:hover {
background: var(--rx-404-primary-dark);
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(15, 118, 110, 0.28);
}
.rx-404__button--secondary,
.rx-404__btn--secondary {
background: var(--rx-404-surface);
color: var(--rx-404-primary-dark);
border-color: var(--rx-404-border);
box-shadow: var(--rx-404-shadow-sm);
}
.rx-404__button--secondary:hover,
.rx-404__btn--secondary:hover {
color: var(--rx-404-primary-dark);
border-color: rgba(15, 118, 110, 0.35);
background: var(--rx-404-primary-soft);
transform: translateY(-2px);
}
/* ================================
5. Search box
================================ */
.rx-404__search {
margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
padding: clamp(1rem, 2vw, 1.25rem);
border: 1px solid var(--rx-404-border);
border-radius: var(--rx-404-radius-lg);
background: rgba(255, 255, 255, 0.78);
box-shadow: var(--rx-404-shadow-md);
backdrop-filter: blur(16px);
}
.rx-404__search-title {
margin: 0 0 0.75rem;
color: var(--rx-404-heading);
font-size: 1rem;
font-weight: 850;
}
.rx-404__search .search-form,
.rx-404__search form,
.error404 .search-form {
display: flex;
align-items: stretch;
gap: 0.65rem;
width: 100%;
}
.rx-404__search label,
.error404 .search-form label {
flex: 1 1 auto;
min-width: 0;
}
.rx-404__search input[type="search"],
.rx-404__search input[type="text"],
.error404 .search-form input[type="search"] {
width: 100%;
min-height: 48px;
padding: 0.85rem 1rem;
border: 1px solid var(--rx-404-border-strong);
border-radius: var(--rx-404-radius-pill);
background: var(--rx-404-surface);
color: var(--rx-404-text);
font-size: 1rem;
outline: none;
transition:
border-color var(--rx-404-transition-fast),
box-shadow var(--rx-404-transition-fast),
background-color var(--rx-404-transition-fast);
}
.rx-404__search input[type="search"]::placeholder,
.rx-404__search input[type="text"]::placeholder {
color: color-mix(in srgb, var(--rx-404-text-muted), transparent 15%);
}
.rx-404__search input[type="search"]:focus,
.rx-404__search input[type="text"]:focus,
.error404 .search-form input[type="search"]:focus {
border-color: var(--rx-404-primary);
box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.14);
}
.rx-404__search button,
.rx-404__search input[type="submit"],
.error404 .search-form button,
.error404 .search-form input[type="submit"] {
flex: 0 0 auto;
min-height: 48px;
padding: 0.85rem 1.15rem;
border: 0;
border-radius: var(--rx-404-radius-pill);
background: var(--rx-404-primary);
color: #ffffff;
font-weight: 850;
cursor: pointer;
transition:
transform var(--rx-404-transition-fast),
background-color var(--rx-404-transition-fast),
box-shadow var(--rx-404-transition-fast);
}
.rx-404__search button:hover,
.rx-404__search input[type="submit"]:hover,
.error404 .search-form button:hover,
.error404 .search-form input[type="submit"]:hover {
background: var(--rx-404-primary-dark);
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(15, 118, 110, 0.24);
}
/* ================================
6. Quick links / suggestion cards
================================ */
.rx-404__suggestions {
margin-block-start: clamp(1.5rem, 3vw, 2rem);
}
.rx-404__suggestions-title {
margin: 0 0 0.85rem;
color: var(--rx-404-heading);
font-size: 1.05rem;
font-weight: 850;
}
.rx-404__links {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem;
margin: 0;
padding: 0;
list-style: none;
}
.rx-404__link-card {
min-width: 0;
}
.rx-404__link,
.rx-404__link-card a {
position: relative;
display: flex;
align-items: center;
gap: 0.75rem;
min-height: 62px;
padding: 0.95rem 1rem;
border: 1px solid var(--rx-404-border);
border-radius: var(--rx-404-radius-md);
background: var(--rx-404-surface);
color: var(--rx-404-text);
text-decoration: none;
box-shadow: var(--rx-404-shadow-sm);
transition:
transform var(--rx-404-transition-fast),
border-color var(--rx-404-transition-fast),
box-shadow var(--rx-404-transition-fast),
background-color var(--rx-404-transition-fast);
}
.rx-404__link::before,
.rx-404__link-card a::before {
content: "›";
display: inline-grid;
place-items: center;
flex: 0 0 1.65rem;
width: 1.65rem;
height: 1.65rem;
border-radius: 50%;
background: var(--rx-404-primary-soft);
color: var(--rx-404-primary-dark);
font-size: 1.25rem;
font-weight: 900;
line-height: 1;
}
.rx-404__link:hover,
.rx-404__link-card a:hover {
border-color: rgba(15, 118, 110, 0.35);
background: #ffffff;
transform: translateY(-2px);
box-shadow: var(--rx-404-shadow-md);
}
.rx-404__link-title {
display: block;
color: var(--rx-404-heading);
font-size: 0.96rem;
font-weight: 850;
}
.rx-404__link-desc {
display: block;
margin-block-start: 0.15rem;
color: var(--rx-404-text-muted);
font-size: 0.84rem;
line-height: 1.45;
}
/* ================================
7. Visual illustration panel
================================ */
.rx-404__visual {
position: relative;
min-height: 440px;
}
.rx-404__visual-card {
position: relative;
overflow: hidden;
padding: clamp(1.25rem, 3vw, 2rem);
border: 1px solid var(--rx-404-border);
border-radius: clamp(1.5rem, 4vw, 2.3rem);
background:
linear-gradient(145deg, rgba(255,255,255,0.92), rgba(241,245,249,0.82)),
var(--rx-404-surface);
box-shadow: var(--rx-404-shadow-lg);
min-height: 420px;
}
.rx-404__visual-card::before {
content: "";
position: absolute;
width: 16rem;
height: 16rem;
inset-block-start: -7rem;
inset-inline-end: -6rem;
border-radius: 50%;
background: rgba(15, 118, 110, 0.12);
}
.rx-404__visual-card::after {
content: "";
position: absolute;
width: 13rem;
height: 13rem;
inset-block-end: -6rem;
inset-inline-start: -5rem;
border-radius: 50%;
background: rgba(37, 99, 235, 0.10);
}
.rx-404__medical-icon {
position: relative;
z-index: 2;
display: grid;
place-items: center;
width: clamp(6rem, 16vw, 9rem);
height: clamp(6rem, 16vw, 9rem);
margin: 2rem auto 1.5rem;
border-radius: 2rem;
background:
linear-gradient(145deg, var(--rx-404-primary), var(--rx-404-primary-dark));
color: #ffffff;
box-shadow: 0 20px 40px rgba(15, 118, 110, 0.28);
transform: rotate(-4deg);
}
.rx-404__medical-icon::before,
.rx-404__medical-icon::after {
content: "";
position: absolute;
border-radius: 0.35rem;
background: currentColor;
}
.rx-404__medical-icon::before {
width: 52%;
height: 15%;
}
.rx-404__medical-icon::after {
width: 15%;
height: 52%;
}
.rx-404__pulse {
position: relative;
z-index: 2;
width: min(100%, 340px);
height: 94px;
margin: 1.5rem auto 0;
color: var(--rx-404-primary);
}
.rx-404__pulse svg {
display: block;
width: 100%;
height: 100%;
}
.rx-404__pulse-line {
fill: none;
stroke: currentColor;
stroke-width: 5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 520;
stroke-dashoffset: 520;
animation: rx-404-draw 2.8s ease-in-out infinite;
}
.rx-404__visual-title {
position: relative;
z-index: 2;
margin: 1.5rem auto 0;
max-width: 34ch;
color: var(--rx-404-heading);
font-size: clamp(1.15rem, 2vw, 1.5rem);
font-weight: 900;
text-align: center;
line-height: 1.3;
}
.rx-404__visual-text {
position: relative;
z-index: 2;
margin: 0.75rem auto 0;
max-width: 42ch;
color: var(--rx-404-text-muted);
font-size: 0.96rem;
line-height: 1.75;
text-align: center;
}
/* ================================
8. Floating badges
================================ */
.rx-404__badge {
position: absolute;
z-index: 4;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.7rem 0.9rem;
border: 1px solid var(--rx-404-border);
border-radius: var(--rx-404-radius-pill);
background: rgba(255, 255, 255, 0.9);
color: var(--rx-404-text);
font-size: 0.82rem;
font-weight: 800;
box-shadow: var(--rx-404-shadow-md);
backdrop-filter: blur(14px);
}
.rx-404__badge::before {
content: "";
width: 0.65rem;
height: 0.65rem;
border-radius: 50%;
background: var(--rx-404-primary);
}
.rx-404__badge--one {
inset-block-start: 2rem;
inset-inline-start: -0.65rem;
animation: rx-404-float 4.8s ease-in-out infinite;
}
.rx-404__badge--two {
inset-block-end: 3rem;
inset-inline-end: -0.85rem;
animation: rx-404-float 5.4s ease-in-out infinite reverse;
}
.rx-404__badge--three {
inset-block-start: 45%;
inset-inline-end: 1rem;
animation: rx-404-float 6s ease-in-out infinite;
}
/* ================================
9. Breadcrumb support
================================ */
.error404 .rx-breadcrumbs,
.rx-404 .rx-breadcrumbs,
.rx-404__breadcrumbs {
margin-block-end: 1.25rem;
color: var(--rx-404-text-muted);
font-size: 0.9rem;
}
.error404 .rx-breadcrumbs a,
.rx-404 .rx-breadcrumbs a,
.rx-404__breadcrumbs a {
color: var(--rx-404-primary-dark);
text-decoration: none;
font-weight: 700;
}
.error404 .rx-breadcrumbs a:hover,
.rx-404 .rx-breadcrumbs a:hover,
.rx-404__breadcrumbs a:hover {
text-decoration: underline;
}
/* ================================
10. Popular posts / categories
================================ */
.rx-404__popular {
margin-block-start: clamp(2rem, 4vw, 3rem);
padding: clamp(1.2rem, 2.6vw, 1.75rem);
border: 1px solid var(--rx-404-border);
border-radius: var(--rx-404-radius-lg);
background: var(--rx-404-surface);
box-shadow: var(--rx-404-shadow-sm);
}
.rx-404__popular-title {
margin: 0 0 1rem;
color: var(--rx-404-heading);
font-size: 1.15rem;
font-weight: 900;
}
.rx-404__popular-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.65rem 1rem;
margin: 0;
padding: 0;
list-style: none;
}
.rx-404__popular-list a {
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: var(--rx-404-text);
text-decoration: none;
font-weight: 700;
line-height: 1.5;
}
.rx-404__popular-list a::before {
content: "";
width: 0.42rem;
height: 0.42rem;
border-radius: 50%;
background: var(--rx-404-primary);
}
.rx-404__popular-list a:hover {
color: var(--rx-404-primary-dark);
text-decoration: underline;
}
/* ================================
11. WordPress default fallback
================================ */
.error404 .site-main,
.error404 main,
.error404 .content-area {
min-height: 55vh;
}
.error404 .page-header,
.error404 .page-content {
width: min(100% - 2rem, var(--rx-404-container));
margin-inline: auto;
}
.error404 .page-header {
margin-block-start: clamp(2rem, 6vw, 5rem);
}
.error404 .page-title {
color: var(--rx-404-heading);
font-size: clamp(2rem, 5vw, 4rem);
font-weight: 900;
letter-spacing: -0.04em;
}
.error404 .page-content {
color: var(--rx-404-text);
font-size: 1rem;
line-height: 1.75;
}
.error404 .page-content a {
color: var(--rx-404-primary-dark);
font-weight: 700;
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
}
/* ================================
12. Accessibility focus
================================ */
.rx-404 a:focus-visible,
.rx-404 button:focus-visible,
.rx-404 input:focus-visible,
.error404 a:focus-visible,
.error404 button:focus-visible,
.error404 input:focus-visible {
outline: 3px solid rgba(15, 118, 110, 0.45);
outline-offset: 3px;
}
.rx-404 [hidden] {
display: none !important;
}
.rx-404 .screen-reader-text,
.error404 .screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* ================================
13. Animations
================================ */
@keyframes rx-404-draw {
0% {
stroke-dashoffset: 520;
opacity: 0.35;
}
45% {
stroke-dashoffset: 0;
opacity: 1;
}
75% {
stroke-dashoffset: 0;
opacity: 1;
}
100% {
stroke-dashoffset: -520;
opacity: 0.35;
}
}
@keyframes rx-404-float {
0%,
100% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, -10px, 0);
}
}
@keyframes rx-404-fade-up {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.rx-404__content,
.rx-404__visual {
animation: rx-404-fade-up 620ms ease both;
}
.rx-404__visual {
animation-delay: 120ms;
}
/* ================================
14. Responsive design
================================ */
@media (max-width: 1024px) {
.rx-404__inner {
grid-template-columns: 1fr;
}
.rx-404__content {
max-width: 820px;
}
.rx-404__visual {
max-width: 620px;
width: 100%;
margin-inline: auto;
}
}
@media (max-width: 768px) {
.rx-404 {
padding-block: 2.5rem;
}
.rx-404__links,
.rx-404__popular-list {
grid-template-columns: 1fr;
}
.rx-404__search .search-form,
.rx-404__search form,
.error404 .search-form {
flex-direction: column;
}
.rx-404__search button,
.rx-404__search input[type="submit"],
.error404 .search-form button,
.error404 .search-form input[type="submit"] {
width: 100%;
}
.rx-404__visual-card {
min-height: 360px;
}
.rx-404__badge {
position: relative;
inset: auto;
margin: 0.5rem 0.35rem 0;
animation: none;
}
.rx-404__visual-badges {
position: relative;
z-index: 5;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-block-start: 1rem;
}
}
@media (max-width: 520px) {
.rx-404__actions {
align-items: stretch;
flex-direction: column;
}
.rx-404__button,
.rx-404__btn,
.rx-404 a.rx-404__button,
.rx-404 a.rx-404__btn {
width: 100%;
}
.rx-404__title {
letter-spacing: -0.045em;
}
.rx-404__title-code {
letter-spacing: -0.065em;
}
.rx-404__search {
border-radius: 1.1rem;
}
.rx-404__link,
.rx-404__link-card a {
align-items: flex-start;
}
}
/* ================================
15. Dark mode
================================ */
@media (prefers-color-scheme: dark) {
:root {
--rx-404-bg: var(--rx-color-background-dark, #020617);
--rx-404-surface: var(--rx-color-surface-dark, #0f172a);
--rx-404-surface-soft: var(--rx-color-surface-soft-dark, #111827);
--rx-404-text: var(--rx-color-text-dark, #e5e7eb);
--rx-404-text-muted: var(--rx-color-muted-dark, #94a3b8);
--rx-404-heading: var(--rx-color-heading-dark, #f8fafc);
--rx-404-border: var(--rx-color-border-dark, rgba(148, 163, 184, 0.22));
--rx-404-border-strong: var(--rx-color-border-strong-dark, rgba(148, 163, 184, 0.34));
--rx-404-primary-soft: rgba(20, 184, 166, 0.14);
}
.error404,
.rx-page-404,
.rx-404-page,
body.error404 {
background:
radial-gradient(circle at top left, rgba(20, 184, 166, 0.13), transparent 34rem),
radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.12), transparent 32rem),
var(--rx-404-bg);
}
.rx-404__eyebrow {
background: rgba(20, 184, 166, 0.12);
color: #99f6e4;
border-color: rgba(20, 184, 166, 0.24);
}
.rx-404__search,
.rx-404__visual-card,
.rx-404__popular,
.rx-404__link,
.rx-404__link-card a,
.rx-404__badge {
background: rgba(15, 23, 42, 0.82);
border-color: var(--rx-404-border);
}
.rx-404__visual-card {
background:
linear-gradient(145deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.85)),
var(--rx-404-surface);
}
.rx-404__button--secondary,
.rx-404__btn--secondary {
background: rgba(15, 23, 42, 0.9);
color: #99f6e4;
}
.rx-404__link:hover,
.rx-404__link-card a:hover {
background: rgba(15, 23, 42, 0.96);
}
.rx-404__search input[type="search"],
.rx-404__search input[type="text"],
.error404 .search-form input[type="search"] {
background: rgba(2, 6, 23, 0.76);
color: var(--rx-404-text);
}
}
/* ================================
16. Manual theme dark class support
================================ */
.rx-theme-dark .rx-404,
.dark .rx-404,
[data-theme="dark"] .rx-404 {
--rx-404-bg: #020617;
--rx-404-surface: #0f172a;
--rx-404-surface-soft: #111827;
--rx-404-text: #e5e7eb;
--rx-404-text-muted: #94a3b8;
--rx-404-heading: #f8fafc;
--rx-404-border: rgba(148, 163, 184, 0.22);
--rx-404-border-strong: rgba(148, 163, 184, 0.34);
--rx-404-primary-soft: rgba(20, 184, 166, 0.14);
}
/* ================================
17. Reduced motion
================================ */
@media (prefers-reduced-motion: reduce) {
.rx-404 *,
.rx-404 *::before,
.rx-404 *::after,
.error404 *,
.error404 *::before,
.error404 *::after {
scroll-behavior: auto !important;
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
.rx-404__pulse-line {
stroke-dasharray: none;
stroke-dashoffset: 0;
}
}
/* ================================
18. High contrast mode
================================ */
@media (forced-colors: active) {
.rx-404__button,
.rx-404__btn,
.rx-404__search button,
.rx-404__search input[type="submit"] {
border: 1px solid ButtonText;
}
.rx-404__link,
.rx-404__link-card a,
.rx-404__search,
.rx-404__visual-card,
.rx-404__popular {
border: 1px solid CanvasText;
}
}
/* ================================
19. Print style
================================ */
@media print {
.rx-404 {
min-height: auto;
padding: 1rem 0;
background: #ffffff !important;
color: #000000 !important;
}
.rx-404::before,
.rx-404::after,
.rx-404__visual,
.rx-404__actions,
.rx-404__search,
.rx-404__badge {
display: none !important;
}
.rx-404__inner {
display: block;
}
.rx-404__title,
.rx-404__title-code,
.rx-404__subtitle,
.rx-404__message {
color: #000000 !important;
text-shadow: none !important;
}
.rx-404 a::after {
content: " (" attr(href) ")";
font-size: 0.85em;
}
}
/* ================================
20. Optional RTL support
================================ */
[dir="rtl"] .rx-404__link::before,
[dir="rtl"] .rx-404__link-card a::before {
content: "‹";
}
[dir="rtl"] .rx-404__medical-icon {
transform: rotate(4deg);
}
/* ================================
21. Container query enhancement
================================ */
@container rx-404-container (max-width: 640px) {
.rx-404__links,
.rx-404__popular-list {
grid-template-columns: 1fr;
}
}
/* ================================
22. Safe fallback for older browsers
================================ */
@supports not (backdrop-filter: blur(16px)) {
.rx-404__search,
.rx-404__badge {
background: var(--rx-404-surface);
}
}
@supports not (color: color-mix(in srgb, red, blue)) {
.rx-404__search input[type="search"]::placeholder,
.rx-404__search input[type="text"]::placeholder {
color: var(--rx-404-text-muted);
}
}For best result, your 404.php HTML should use classes like:
<main class="rx-404" id="primary">
<div class="rx-404__container">
<div class="rx-404__inner">
<section class="rx-404__content">
<div class="rx-404__eyebrow">Page not found</div>
<h1 class="rx-404__title">
<span class="rx-404__title-code">404</span>
Lost page
</h1>
<p class="rx-404__subtitle">
Sorry, the page you are looking for may have been moved, renamed, or removed.
</p>
<div class="rx-404__actions">
<a class="rx-404__button rx-404__button--primary" href="<?php echo esc_url(home_url('/')); ?>">
Back to Home
</a>
<a class="rx-404__button rx-404__button--secondary" href="<?php echo esc_url(home_url('/blog/')); ?>">
Visit Blog
</a>
</div>
<div class="rx-404__search">
<h2 class="rx-404__search-title">Search RX Harun</h2>
<?php get_search_form(); ?>
</div>
</section>
<aside class="rx-404__visual" aria-hidden="true">
<div class="rx-404__visual-card">
<div class="rx-404__medical-icon"></div>
<h2 class="rx-404__visual-title">A global war against illness</h2>
<p class="rx-404__visual-text">
Let us guide you back to trusted medical knowledge.
</p>
</div>
</aside>
</div>
</div>
</main>This CSS is safe to keep inside your page-specific folder and load only on the 404 page.