I’ll give you a complete advanced assets/css/rx-footer.css file for RX Theme, including responsive layout, widgets, menus, medical-site styling, dark mode support, accessibility, print CSS, and animation-safe enhancements.
My dear friend, create this file:
rx-theme/assets/css/rx-footer.css
Then paste this full code inside it.
/*!
Theme Name: RX Theme
File: assets/css/rx-footer.css
Description: Advanced footer styling for RX Theme
Author: RxHarun
Version: 1.0.0
*/
/* =========================================================
RX FOOTER ROOT VARIABLES
========================================================= */
:root {
--rx-footer-bg: #071922;
--rx-footer-bg-soft: #0b2530;
--rx-footer-bg-light: #10313f;
--rx-footer-text: #dbeaf0;
--rx-footer-text-soft: #a9c2cc;
--rx-footer-heading: #ffffff;
--rx-footer-link: #dbeaf0;
--rx-footer-link-hover: #6ee7b7;
--rx-footer-border: rgba(255, 255, 255, 0.12);
--rx-footer-border-soft: rgba(255, 255, 255, 0.08);
--rx-footer-shadow: 0 -16px 45px rgba(0, 0, 0, 0.18);
--rx-footer-accent: #14b8a6;
--rx-footer-accent-2: #38bdf8;
--rx-footer-danger: #ef4444;
--rx-footer-warning: #f59e0b;
--rx-footer-success: #22c55e;
--rx-footer-radius-sm: 6px;
--rx-footer-radius-md: 12px;
--rx-footer-radius-lg: 20px;
--rx-footer-space-xs: 0.35rem;
--rx-footer-space-sm: 0.65rem;
--rx-footer-space-md: 1rem;
--rx-footer-space-lg: 1.5rem;
--rx-footer-space-xl: 2rem;
--rx-footer-space-2xl: 3rem;
--rx-footer-space-3xl: 4rem;
--rx-footer-container: 1200px;
--rx-footer-font-size: 0.95rem;
--rx-footer-line-height: 1.75;
--rx-footer-transition: 180ms ease;
--rx-footer-z-index: 10;
}
/* =========================================================
MAIN FOOTER WRAPPER
========================================================= */
.rx-site-footer,
.site-footer,
.footer,
#colophon {
position: relative;
z-index: var(--rx-footer-z-index);
overflow: hidden;
background:
radial-gradient(circle at top left, rgba(20, 184, 166, 0.18), transparent 34%),
radial-gradient(circle at top right, rgba(56, 189, 248, 0.12), transparent 32%),
linear-gradient(180deg, var(--rx-footer-bg-soft), var(--rx-footer-bg));
color: var(--rx-footer-text);
font-size: var(--rx-footer-font-size);
line-height: var(--rx-footer-line-height);
box-shadow: var(--rx-footer-shadow);
}
.rx-site-footer *,
.site-footer *,
.footer *,
#colophon * {
box-sizing: border-box;
}
.rx-site-footer::before,
.site-footer::before,
.footer::before,
#colophon::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
background-size: 38px 38px;
opacity: 0.45;
}
.rx-site-footer::after,
.site-footer::after,
.footer::after,
#colophon::after {
content: "";
position: absolute;
left: 50%;
top: -120px;
width: 560px;
height: 560px;
transform: translateX(-50%);
pointer-events: none;
background: radial-gradient(circle, rgba(20, 184, 166, 0.12), transparent 70%);
}
/* =========================================================
FOOTER CONTAINER
========================================================= */
.rx-footer-container,
.rx-site-footer .container,
.site-footer .container,
.footer .container {
position: relative;
z-index: 1;
width: min(100% - 2rem, var(--rx-footer-container));
margin-inline: auto;
}
.rx-footer-inner {
position: relative;
z-index: 1;
padding-block: var(--rx-footer-space-3xl) var(--rx-footer-space-xl);
}
/* =========================================================
FOOTER TOP SECTION
========================================================= */
.rx-footer-top {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: var(--rx-footer-space-2xl);
align-items: center;
padding-bottom: var(--rx-footer-space-2xl);
border-bottom: 1px solid var(--rx-footer-border);
}
.rx-footer-brand {
max-width: 720px;
}
.rx-footer-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
margin-bottom: var(--rx-footer-space-md);
color: var(--rx-footer-heading);
text-decoration: none;
font-size: clamp(1.35rem, 2vw, 2rem);
font-weight: 800;
letter-spacing: -0.03em;
}
.rx-footer-logo img {
display: block;
width: auto;
max-height: 56px;
border-radius: var(--rx-footer-radius-sm);
}
.rx-footer-logo:hover,
.rx-footer-logo:focus-visible {
color: var(--rx-footer-link-hover);
}
.rx-footer-tagline {
margin: 0;
max-width: 680px;
color: var(--rx-footer-text-soft);
font-size: clamp(1rem, 1.35vw, 1.1rem);
}
.rx-footer-tagline strong {
color: var(--rx-footer-heading);
font-weight: 700;
}
/* =========================================================
FOOTER CALL TO ACTION
========================================================= */
.rx-footer-cta {
display: flex;
flex-wrap: wrap;
gap: var(--rx-footer-space-sm);
justify-content: flex-end;
align-items: center;
}
.rx-footer-btn,
.rx-footer-button,
.rx-site-footer .button,
.site-footer .button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
min-height: 44px;
padding: 0.75rem 1.05rem;
border: 1px solid transparent;
border-radius: 999px;
background: linear-gradient(135deg, var(--rx-footer-accent), var(--rx-footer-accent-2));
color: #06151c;
text-decoration: none;
font-weight: 800;
line-height: 1.2;
box-shadow: 0 10px 24px rgba(20, 184, 166, 0.22);
transition:
transform var(--rx-footer-transition),
box-shadow var(--rx-footer-transition),
border-color var(--rx-footer-transition),
background var(--rx-footer-transition);
}
.rx-footer-btn:hover,
.rx-footer-btn:focus-visible,
.rx-footer-button:hover,
.rx-footer-button:focus-visible,
.rx-site-footer .button:hover,
.site-footer .button:hover {
transform: translateY(-2px);
box-shadow: 0 15px 30px rgba(56, 189, 248, 0.24);
}
.rx-footer-btn.is-outline,
.rx-footer-button.is-outline {
border-color: var(--rx-footer-border);
background: rgba(255, 255, 255, 0.06);
color: var(--rx-footer-heading);
box-shadow: none;
}
.rx-footer-btn.is-outline:hover,
.rx-footer-btn.is-outline:focus-visible,
.rx-footer-button.is-outline:hover,
.rx-footer-button.is-outline:focus-visible {
border-color: rgba(110, 231, 183, 0.65);
background: rgba(20, 184, 166, 0.13);
color: var(--rx-footer-link-hover);
}
/* =========================================================
FOOTER WIDGET AREA
========================================================= */
.rx-footer-widgets,
.footer-widgets,
.site-footer-widgets {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--rx-footer-space-xl);
padding-block: var(--rx-footer-space-2xl);
}
.rx-footer-widget,
.footer-widget,
.site-footer .widget {
min-width: 0;
}
.rx-footer-widget-title,
.footer-widget-title,
.site-footer .widget-title,
.site-footer h2,
.site-footer h3,
.site-footer h4 {
position: relative;
margin: 0 0 1rem;
padding-bottom: 0.75rem;
color: var(--rx-footer-heading);
font-size: 1rem;
font-weight: 800;
line-height: 1.35;
letter-spacing: 0.01em;
}
.rx-footer-widget-title::after,
.footer-widget-title::after,
.site-footer .widget-title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 44px;
height: 3px;
border-radius: 999px;
background: linear-gradient(90deg, var(--rx-footer-accent), var(--rx-footer-accent-2));
}
.rx-footer-widget p,
.footer-widget p,
.site-footer .widget p {
margin: 0 0 1rem;
color: var(--rx-footer-text-soft);
}
.rx-footer-widget p:last-child,
.footer-widget p:last-child,
.site-footer .widget p:last-child {
margin-bottom: 0;
}
/* =========================================================
FOOTER LINKS
========================================================= */
.rx-site-footer a,
.site-footer a,
.footer a,
#colophon a {
color: var(--rx-footer-link);
text-decoration: none;
text-underline-offset: 0.18em;
transition:
color var(--rx-footer-transition),
background-color var(--rx-footer-transition),
border-color var(--rx-footer-transition),
transform var(--rx-footer-transition);
}
.rx-site-footer a:hover,
.rx-site-footer a:focus-visible,
.site-footer a:hover,
.site-footer a:focus-visible,
.footer a:hover,
.footer a:focus-visible,
#colophon a:hover,
#colophon a:focus-visible {
color: var(--rx-footer-link-hover);
text-decoration: underline;
}
.rx-site-footer a:focus-visible,
.site-footer a:focus-visible,
.footer a:focus-visible,
#colophon a:focus-visible {
outline: 3px solid rgba(110, 231, 183, 0.75);
outline-offset: 3px;
border-radius: 4px;
}
/* =========================================================
FOOTER MENU LIST
========================================================= */
.rx-footer-menu,
.rx-footer-links,
.site-footer ul,
.footer-widget ul,
.site-footer .menu {
list-style: none;
margin: 0;
padding: 0;
}
.rx-footer-menu li,
.rx-footer-links li,
.footer-widget li,
.site-footer .menu li {
position: relative;
margin: 0;
padding: 0.35rem 0;
color: var(--rx-footer-text-soft);
}
.rx-footer-menu a,
.rx-footer-links a,
.footer-widget li a,
.site-footer .menu li a {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: var(--rx-footer-text-soft);
}
.rx-footer-menu a::before,
.rx-footer-links a::before,
.footer-widget li a::before,
.site-footer .menu li a::before {
content: "";
width: 7px;
height: 7px;
flex: 0 0 7px;
border-radius: 50%;
background: rgba(110, 231, 183, 0.55);
transform: scale(0.75);
transition:
transform var(--rx-footer-transition),
background-color var(--rx-footer-transition);
}
.rx-footer-menu a:hover::before,
.rx-footer-menu a:focus-visible::before,
.rx-footer-links a:hover::before,
.rx-footer-links a:focus-visible::before,
.footer-widget li a:hover::before,
.footer-widget li a:focus-visible::before,
.site-footer .menu li a:hover::before,
.site-footer .menu li a:focus-visible::before {
transform: scale(1.1);
background: var(--rx-footer-link-hover);
}
/* =========================================================
MEDICAL DISCLAIMER BOX
========================================================= */
.rx-footer-disclaimer {
position: relative;
margin-block: var(--rx-footer-space-xl);
padding: var(--rx-footer-space-lg);
border: 1px solid var(--rx-footer-border);
border-radius: var(--rx-footer-radius-lg);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
color: var(--rx-footer-text-soft);
overflow: hidden;
}
.rx-footer-disclaimer::before {
content: "!";
position: absolute;
top: 1rem;
right: 1rem;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(245, 158, 11, 0.16);
color: #fbbf24;
font-weight: 900;
}
.rx-footer-disclaimer-title {
margin: 0 2.75rem 0.45rem 0;
color: var(--rx-footer-heading);
font-size: 1rem;
font-weight: 800;
}
.rx-footer-disclaimer p {
margin: 0;
max-width: 960px;
}
/* =========================================================
CONTACT INFORMATION
========================================================= */
.rx-footer-contact {
display: grid;
gap: 0.75rem;
}
.rx-footer-contact-item {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: 0.75rem;
align-items: start;
color: var(--rx-footer-text-soft);
}
.rx-footer-contact-icon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(20, 184, 166, 0.12);
color: var(--rx-footer-link-hover);
}
.rx-footer-contact-label {
display: block;
color: var(--rx-footer-heading);
font-weight: 700;
}
.rx-footer-contact-value {
display: block;
overflow-wrap: anywhere;
}
/* =========================================================
SOCIAL LINKS
========================================================= */
.rx-footer-social,
.footer-social,
.social-links {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
align-items: center;
margin-top: var(--rx-footer-space-md);
}
.rx-footer-social a,
.footer-social a,
.social-links a {
display: inline-grid;
place-items: center;
width: 42px;
height: 42px;
border: 1px solid var(--rx-footer-border);
border-radius: 50%;
background: rgba(255, 255, 255, 0.055);
color: var(--rx-footer-heading);
text-decoration: none;
overflow: hidden;
}
.rx-footer-social a:hover,
.rx-footer-social a:focus-visible,
.footer-social a:hover,
.footer-social a:focus-visible,
.social-links a:hover,
.social-links a:focus-visible {
transform: translateY(-3px);
border-color: rgba(110, 231, 183, 0.65);
background: rgba(20, 184, 166, 0.14);
color: var(--rx-footer-link-hover);
text-decoration: none;
}
.rx-footer-social svg,
.footer-social svg,
.social-links svg {
width: 20px;
height: 20px;
fill: currentColor;
}
/* =========================================================
NEWSLETTER / SUBSCRIBE FORM
========================================================= */
.rx-footer-newsletter {
padding: var(--rx-footer-space-lg);
border: 1px solid var(--rx-footer-border);
border-radius: var(--rx-footer-radius-lg);
background: rgba(255, 255, 255, 0.045);
}
.rx-footer-newsletter-title {
margin: 0 0 0.4rem;
color: var(--rx-footer-heading);
font-weight: 800;
}
.rx-footer-newsletter-text {
margin: 0 0 1rem;
color: var(--rx-footer-text-soft);
}
.rx-footer-form {
display: flex;
gap: 0.65rem;
}
.rx-footer-form input[type="email"],
.rx-footer-form input[type="text"],
.rx-footer-form input[type="search"],
.rx-footer-form input[type="url"],
.rx-footer-form input[type="tel"],
.rx-footer-form textarea,
.site-footer input[type="email"],
.site-footer input[type="text"],
.site-footer input[type="search"],
.site-footer textarea {
width: 100%;
min-height: 44px;
padding: 0.75rem 0.9rem;
border: 1px solid var(--rx-footer-border);
border-radius: 999px;
background: rgba(255, 255, 255, 0.075);
color: var(--rx-footer-heading);
outline: none;
}
.rx-footer-form textarea,
.site-footer textarea {
min-height: 110px;
border-radius: var(--rx-footer-radius-md);
resize: vertical;
}
.rx-footer-form input::placeholder,
.rx-footer-form textarea::placeholder,
.site-footer input::placeholder,
.site-footer textarea::placeholder {
color: rgba(219, 234, 240, 0.65);
}
.rx-footer-form input:focus,
.rx-footer-form textarea:focus,
.site-footer input:focus,
.site-footer textarea:focus {
border-color: rgba(110, 231, 183, 0.75);
box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.16);
}
.rx-footer-form button,
.site-footer button,
.site-footer input[type="submit"] {
min-height: 44px;
padding: 0.75rem 1rem;
border: 0;
border-radius: 999px;
background: linear-gradient(135deg, var(--rx-footer-accent), var(--rx-footer-accent-2));
color: #06151c;
cursor: pointer;
font-weight: 900;
white-space: nowrap;
transition:
transform var(--rx-footer-transition),
box-shadow var(--rx-footer-transition);
}
.rx-footer-form button:hover,
.rx-footer-form button:focus-visible,
.site-footer button:hover,
.site-footer button:focus-visible,
.site-footer input[type="submit"]:hover,
.site-footer input[type="submit"]:focus-visible {
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(20, 184, 166, 0.22);
}
/* =========================================================
FOOTER SEARCH FORM
========================================================= */
.rx-footer-search,
.site-footer .search-form {
position: relative;
display: flex;
gap: 0.5rem;
max-width: 100%;
}
.site-footer .search-field {
padding-right: 1rem;
}
.site-footer .search-submit {
flex: 0 0 auto;
}
/* =========================================================
FOOTER BOTTOM
========================================================= */
.rx-footer-bottom,
.site-info,
.footer-bottom {
position: relative;
z-index: 1;
display: flex;
gap: var(--rx-footer-space-md);
justify-content: space-between;
align-items: center;
padding-block: var(--rx-footer-space-lg);
border-top: 1px solid var(--rx-footer-border);
color: var(--rx-footer-text-soft);
font-size: 0.9rem;
}
.rx-footer-copyright,
.rx-footer-credit {
margin: 0;
}
.rx-footer-credit a {
font-weight: 700;
}
/* =========================================================
LEGAL MENU
========================================================= */
.rx-footer-legal,
.footer-legal {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1rem;
align-items: center;
justify-content: flex-end;
list-style: none;
margin: 0;
padding: 0;
}
.rx-footer-legal a,
.footer-legal a {
color: var(--rx-footer-text-soft);
font-size: 0.9rem;
}
.rx-footer-legal a:hover,
.rx-footer-legal a:focus-visible,
.footer-legal a:hover,
.footer-legal a:focus-visible {
color: var(--rx-footer-link-hover);
}
/* =========================================================
BACK TO TOP BUTTON
========================================================= */
.rx-back-to-top,
.back-to-top,
#back-to-top {
position: fixed;
right: clamp(1rem, 2vw, 1.5rem);
bottom: clamp(1rem, 2vw, 1.5rem);
z-index: 999;
display: inline-grid;
place-items: center;
width: 46px;
height: 46px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 50%;
background: linear-gradient(135deg, var(--rx-footer-accent), var(--rx-footer-accent-2));
color: #06151c;
text-decoration: none;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(16px);
transition:
opacity var(--rx-footer-transition),
visibility var(--rx-footer-transition),
transform var(--rx-footer-transition),
box-shadow var(--rx-footer-transition);
}
.rx-back-to-top.is-visible,
.back-to-top.is-visible,
#back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.rx-back-to-top:hover,
.rx-back-to-top:focus-visible,
.back-to-top:hover,
.back-to-top:focus-visible,
#back-to-top:hover,
#back-to-top:focus-visible {
transform: translateY(-3px);
box-shadow: 0 16px 38px rgba(20, 184, 166, 0.28);
}
/* =========================================================
FOOTER BADGES / TRUST ITEMS
========================================================= */
.rx-footer-trust {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: var(--rx-footer-space-md);
}
.rx-footer-trust-item {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.45rem 0.7rem;
border: 1px solid var(--rx-footer-border);
border-radius: 999px;
background: rgba(255, 255, 255, 0.045);
color: var(--rx-footer-text-soft);
font-size: 0.85rem;
font-weight: 650;
}
.rx-footer-trust-item::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--rx-footer-success);
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14);
}
/* =========================================================
FOOTER CARD GRID
========================================================= */
.rx-footer-card-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--rx-footer-space-md);
margin-top: var(--rx-footer-space-xl);
}
.rx-footer-card {
padding: var(--rx-footer-space-lg);
border: 1px solid var(--rx-footer-border);
border-radius: var(--rx-footer-radius-lg);
background: rgba(255, 255, 255, 0.045);
}
.rx-footer-card-title {
margin: 0 0 0.45rem;
color: var(--rx-footer-heading);
font-weight: 800;
}
.rx-footer-card-text {
margin: 0;
color: var(--rx-footer-text-soft);
}
/* =========================================================
FOOTER RECENT POSTS
========================================================= */
.rx-footer-recent-posts {
display: grid;
gap: 0.9rem;
}
.rx-footer-recent-post {
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
gap: 0.8rem;
align-items: center;
}
.rx-footer-recent-post img {
display: block;
width: 72px;
height: 72px;
object-fit: cover;
border-radius: var(--rx-footer-radius-md);
background: rgba(255, 255, 255, 0.08);
}
.rx-footer-recent-post-title {
display: block;
color: var(--rx-footer-heading);
font-weight: 750;
line-height: 1.35;
}
.rx-footer-recent-post-date {
display: block;
margin-top: 0.2rem;
color: var(--rx-footer-text-soft);
font-size: 0.82rem;
}
/* =========================================================
FOOTER TAG CLOUD
========================================================= */
.rx-site-footer .tagcloud,
.site-footer .tagcloud {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.rx-site-footer .tagcloud a,
.site-footer .tagcloud a {
display: inline-flex;
padding: 0.35rem 0.65rem;
border: 1px solid var(--rx-footer-border);
border-radius: 999px;
background: rgba(255, 255, 255, 0.045);
color: var(--rx-footer-text-soft);
font-size: 0.82rem !important;
line-height: 1.25;
}
.rx-site-footer .tagcloud a:hover,
.rx-site-footer .tagcloud a:focus-visible,
.site-footer .tagcloud a:hover,
.site-footer .tagcloud a:focus-visible {
border-color: rgba(110, 231, 183, 0.65);
background: rgba(20, 184, 166, 0.12);
color: var(--rx-footer-link-hover);
text-decoration: none;
}
/* =========================================================
FOOTER CALENDAR WIDGET
========================================================= */
.site-footer .calendar_wrap {
overflow-x: auto;
}
.site-footer table {
width: 100%;
border-collapse: collapse;
color: var(--rx-footer-text-soft);
}
.site-footer th,
.site-footer td {
padding: 0.45rem;
border: 1px solid var(--rx-footer-border-soft);
text-align: center;
}
.site-footer th {
color: var(--rx-footer-heading);
background: rgba(255, 255, 255, 0.06);
}
/* =========================================================
FOOTER IMAGE / GALLERY
========================================================= */
.site-footer img {
max-width: 100%;
height: auto;
}
.rx-footer-gallery,
.site-footer .gallery {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem;
}
.rx-footer-gallery img,
.site-footer .gallery img {
display: block;
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: var(--rx-footer-radius-sm);
}
/* =========================================================
FOOTER BREADCRUMB STYLE OPTION
========================================================= */
.rx-footer-breadcrumbs {
margin-bottom: var(--rx-footer-space-lg);
color: var(--rx-footer-text-soft);
font-size: 0.88rem;
}
.rx-footer-breadcrumbs a {
color: var(--rx-footer-text-soft);
}
.rx-footer-breadcrumbs .separator {
margin-inline: 0.4rem;
color: rgba(219, 234, 240, 0.5);
}
/* =========================================================
STICKY MOBILE FOOTER NAV
========================================================= */
.rx-mobile-footer-nav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 998;
display: none;
padding: 0.45rem 0.65rem calc(0.45rem + env(safe-area-inset-bottom));
border-top: 1px solid var(--rx-footer-border);
background: rgba(7, 25, 34, 0.92);
backdrop-filter: blur(16px);
}
.rx-mobile-footer-nav ul {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.4rem;
margin: 0;
padding: 0;
list-style: none;
}
.rx-mobile-footer-nav a {
display: grid;
place-items: center;
gap: 0.15rem;
min-height: 48px;
color: var(--rx-footer-text-soft);
text-decoration: none;
font-size: 0.75rem;
font-weight: 700;
}
.rx-mobile-footer-nav a:hover,
.rx-mobile-footer-nav a:focus-visible,
.rx-mobile-footer-nav .current-menu-item > a {
color: var(--rx-footer-link-hover);
}
.rx-mobile-footer-nav svg {
width: 20px;
height: 20px;
}
/* =========================================================
FOOTER STATES
========================================================= */
.rx-footer-is-compact .rx-footer-inner {
padding-block: var(--rx-footer-space-xl);
}
.rx-footer-is-compact .rx-footer-top {
padding-bottom: var(--rx-footer-space-lg);
}
.rx-footer-is-compact .rx-footer-widgets {
padding-block: var(--rx-footer-space-lg);
}
.rx-footer-no-widgets .rx-footer-top {
border-bottom: 0;
}
.rx-footer-centered {
text-align: center;
}
.rx-footer-centered .rx-footer-top,
.rx-footer-centered .rx-footer-bottom {
justify-content: center;
}
.rx-footer-centered .rx-footer-widget-title::after,
.rx-footer-centered .footer-widget-title::after,
.rx-footer-centered .site-footer .widget-title::after {
left: 50%;
transform: translateX(-50%);
}
.rx-footer-centered .rx-footer-social,
.rx-footer-centered .footer-social,
.rx-footer-centered .social-links,
.rx-footer-centered .rx-footer-trust,
.rx-footer-centered .rx-footer-legal {
justify-content: center;
}
/* =========================================================
LIGHT FOOTER VARIANT
========================================================= */
.rx-footer-light {
--rx-footer-bg: #f8fafc;
--rx-footer-bg-soft: #eef7f7;
--rx-footer-bg-light: #e6f7f5;
--rx-footer-text: #334155;
--rx-footer-text-soft: #64748b;
--rx-footer-heading: #0f172a;
--rx-footer-link: #334155;
--rx-footer-link-hover: #0f766e;
--rx-footer-border: rgba(15, 23, 42, 0.12);
--rx-footer-border-soft: rgba(15, 23, 42, 0.08);
--rx-footer-shadow: 0 -16px 45px rgba(15, 23, 42, 0.08);
}
/* =========================================================
DARK MODE SUPPORT
========================================================= */
@media (prefers-color-scheme: dark) {
.rx-footer-auto-dark {
--rx-footer-bg: #06141c;
--rx-footer-bg-soft: #081f29;
--rx-footer-bg-light: #0c2b38;
--rx-footer-text: #dbeaf0;
--rx-footer-text-soft: #a9c2cc;
--rx-footer-heading: #ffffff;
--rx-footer-link: #dbeaf0;
--rx-footer-link-hover: #6ee7b7;
--rx-footer-border: rgba(255, 255, 255, 0.12);
}
}
/* =========================================================
HIGH CONTRAST SUPPORT
========================================================= */
@media (prefers-contrast: more) {
.rx-site-footer,
.site-footer,
.footer,
#colophon {
--rx-footer-border: rgba(255, 255, 255, 0.4);
--rx-footer-text-soft: #ffffff;
}
.rx-site-footer a,
.site-footer a,
.footer a,
#colophon a {
text-decoration: underline;
}
}
/* =========================================================
REDUCED MOTION SUPPORT
========================================================= */
@media (prefers-reduced-motion: reduce) {
.rx-site-footer *,
.site-footer *,
.footer *,
#colophon *,
.rx-back-to-top,
.back-to-top,
#back-to-top {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
/* =========================================================
RESPONSIVE DESIGN
========================================================= */
@media (max-width: 1100px) {
.rx-footer-widgets,
.footer-widgets,
.site-footer-widgets {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rx-footer-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 860px) {
.rx-footer-top {
grid-template-columns: 1fr;
gap: var(--rx-footer-space-lg);
}
.rx-footer-cta {
justify-content: flex-start;
}
.rx-footer-bottom,
.site-info,
.footer-bottom {
flex-direction: column;
align-items: flex-start;
}
.rx-footer-legal,
.footer-legal {
justify-content: flex-start;
}
}
@media (max-width: 700px) {
.rx-footer-inner {
padding-block: var(--rx-footer-space-2xl) var(--rx-footer-space-lg);
}
.rx-footer-widgets,
.footer-widgets,
.site-footer-widgets {
grid-template-columns: 1fr;
gap: var(--rx-footer-space-lg);
}
.rx-footer-card-grid {
grid-template-columns: 1fr;
}
.rx-footer-form {
flex-direction: column;
}
.rx-footer-form button,
.site-footer button,
.site-footer input[type="submit"] {
width: 100%;
}
.rx-footer-recent-post {
grid-template-columns: 60px minmax(0, 1fr);
}
.rx-footer-recent-post img {
width: 60px;
height: 60px;
}
.rx-mobile-footer-nav {
display: block;
}
body.rx-has-mobile-footer-nav {
padding-bottom: 72px;
}
}
@media (max-width: 480px) {
.rx-footer-container,
.rx-site-footer .container,
.site-footer .container,
.footer .container {
width: min(100% - 1.25rem, var(--rx-footer-container));
}
.rx-footer-cta {
flex-direction: column;
align-items: stretch;
}
.rx-footer-btn,
.rx-footer-button {
width: 100%;
}
.rx-footer-bottom,
.site-info,
.footer-bottom {
font-size: 0.84rem;
}
.rx-back-to-top,
.back-to-top,
#back-to-top {
width: 42px;
height: 42px;
}
}
/* =========================================================
PRINT MODE
========================================================= */
@media print {
.rx-site-footer,
.site-footer,
.footer,
#colophon {
background: #ffffff !important;
color: #000000 !important;
box-shadow: none !important;
}
.rx-site-footer::before,
.rx-site-footer::after,
.site-footer::before,
.site-footer::after,
.footer::before,
.footer::after,
#colophon::before,
#colophon::after,
.rx-footer-social,
.footer-social,
.social-links,
.rx-footer-cta,
.rx-back-to-top,
.back-to-top,
#back-to-top,
.rx-mobile-footer-nav {
display: none !important;
}
.rx-site-footer a,
.site-footer a,
.footer a,
#colophon a {
color: #000000 !important;
text-decoration: underline !important;
}
.rx-footer-widgets,
.footer-widgets,
.site-footer-widgets {
grid-template-columns: 1fr 1fr;
}
}To load this file in RX Theme, add this in your enqueue file, for example:
inc/core/enqueue.php
<?php
/**
* RX Theme footer CSS enqueue.
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
function rx_theme_enqueue_footer_assets() {
wp_enqueue_style(
'rx-footer',
get_template_directory_uri() . '/assets/css/rx-footer.css',
array(),
wp_get_theme()->get( 'Version' )
);
}
add_action( 'wp_enqueue_scripts', 'rx_theme_enqueue_footer_assets' );Best footer HTML class names for your theme:
<footer id="colophon" class="rx-site-footer site-footer">
<div class="rx-footer-container">
<div class="rx-footer-inner">
<div class="rx-footer-top">
<div class="rx-footer-brand">
<a href="/" class="rx-footer-logo">RX Theme</a>
<p class="rx-footer-tagline">
A global war against illness — trusted medical knowledge for everyone.
</p>
</div>
<div class="rx-footer-cta">
<a href="/contact" class="rx-footer-btn">Contact</a>
<a href="/about" class="rx-footer-btn is-outline">About RX</a>
</div>
</div>
<div class="rx-footer-widgets">
<div class="rx-footer-widget">
<h3 class="rx-footer-widget-title">About</h3>
<p>RX Theme is built for medical content, health education, and trusted article publishing.</p>
</div>
<div class="rx-footer-widget">
<h3 class="rx-footer-widget-title">Quick Links</h3>
<ul class="rx-footer-menu">
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
<div class="rx-footer-widget">
<h3 class="rx-footer-widget-title">Medical Topics</h3>
<ul class="rx-footer-menu">
<li><a href="#">Orthopedics</a></li>
<li><a href="#">Blood Tests</a></li>
<li><a href="#">Eye Diseases</a></li>
</ul>
</div>
<div class="rx-footer-widget">
<h3 class="rx-footer-widget-title">Newsletter</h3>
<form class="rx-footer-form">
<input type="email" placeholder="Your email">
<button type="submit">Subscribe</button>
</form>
</div>
</div>
<div class="rx-footer-disclaimer">
<h3 class="rx-footer-disclaimer-title">Medical Disclaimer</h3>
<p>This website provides educational health information only. It does not replace professional diagnosis, treatment, or emergency medical care.</p>
</div>
<div class="rx-footer-bottom">
<p class="rx-footer-copyright">© 2026 RX Theme. All rights reserved.</p>
<ul class="rx-footer-legal">
<li><a href="/privacy-policy">Privacy Policy</a></li>
<li><a href="/terms">Terms</a></li>
<li><a href="/disclaimer">Disclaimer</a></li>
</ul>
</div>
</div>
</div>
</footer>This CSS is safe as a starting advanced footer file. Later, when your RX Theme becomes more modular, you can split it into smaller files like:
assets/css/footer/
├── rx-footer-base.css
├── rx-footer-widgets.css
├── rx-footer-newsletter.css
├── rx-footer-responsive.css
└── rx-footer-dark.css