/* Theme Enhancement Utilities Project: Medmax RCM Insights Theme: XStore Builder: Elementor / XStore Pro Elements File: medmax-rcm-custom-style.css Version: 2.0.0 Last Updated: July 31, 2026 PURPOSE ------- This stylesheet provides approved, reusable enhancements for the Medmax RCM Insights website. It extends XStore and Elementor without replacing their global design controls or applying unnecessary global overrides. IMPLEMENTATION ORDER -------------------- 1. XStore Theme Options 2. Elementor Global Settings 3. Elementor Widget Controls 4. Opt-in Medmax utility classes only when required USAGE ----- Add approved medmax-* classes through: Elementor Widget or Container → Advanced → CSS Classes Do not include the period before the class name. Correct: medmax-hover-lift Incorrect: .medmax-hover-lift IMPORTANT --------- Do not modify this file for one individual page. New classes should only be added when they are: - Reusable - Required across multiple areas - Not available through Elementor or XStore - Documented in custom-css-classes.md */ /* ========================================================= 01. DESIGN TOKENS ========================================================= */ /* These tokens must remain synchronized with: - Medmax Insights Color System - Elementor Global Colors - XStore Theme Options Official Color System: 02-brand-system/03-color-system.md */ :root { /* ------------------------------------------------------- Official Brand Colors ------------------------------------------------------- */ --medmax-color-primary: #1f3d5a; --medmax-color-secondary: #2e4e6e; --medmax-color-accent: #607d8b; /* ------------------------------------------------------- Supporting Colors ------------------------------------------------------- */ --medmax-color-supporting: #9eacb5; --medmax-color-background-soft: #f5f7f9; --medmax-color-white: #ffffff; /* ------------------------------------------------------- Content Colors ------------------------------------------------------- */ --medmax-color-text: #1e293b; --medmax-color-muted: #64748b; --medmax-color-black: #111827; /* ------------------------------------------------------- Background Colors ------------------------------------------------------- */ --medmax-color-background: #ffffff; --medmax-color-background-dark: #1f3d5a; --medmax-color-background-secondary: #2e4e6e; /* ------------------------------------------------------- Border Colors ------------------------------------------------------- */ --medmax-color-border: #d7dee3; --medmax-color-border-light: #e7ecf0; --medmax-color-border-strong: #9eacb5; /* ------------------------------------------------------- Functional Colors ------------------------------------------------------- */ --medmax-color-success: #067647; --medmax-color-warning: #b54708; --medmax-color-error: #b42318; /* ------------------------------------------------------- WhatsApp Colors ------------------------------------------------------- */ --medmax-color-whatsapp: #25d366; --medmax-color-whatsapp-hover: #1ebe5d; /* ------------------------------------------------------- Border Radius ------------------------------------------------------- */ --medmax-radius-small: 6px; --medmax-radius-medium: 10px; --medmax-radius-large: 16px; --medmax-radius-round: 999px; /* ------------------------------------------------------- Transitions ------------------------------------------------------- */ --medmax-transition-fast: 180ms ease; --medmax-transition-default: 280ms ease; --medmax-transition-slow: 420ms ease; /* ------------------------------------------------------- Shadows ------------------------------------------------------- */ --medmax-shadow-small: 0 6px 18px rgba(31, 61, 90, 0.1); --medmax-shadow-medium: 0 12px 30px rgba(31, 61, 90, 0.14); --medmax-shadow-large: 0 18px 44px rgba(31, 61, 90, 0.18); /* ------------------------------------------------------- Focus Ring ------------------------------------------------------- */ --medmax-focus-color: #2e4e6e; --medmax-focus-ring: 0 0 0 3px rgba(46, 78, 110, 0.22); } /* ========================================================= TYPOGRAPHY TOKENS ========================================================= */ :root { --medmax-font-heading: "Montserrat", Arial, Helvetica, sans-serif; --medmax-font-body: "Inter", Arial, Helvetica, sans-serif; --medmax-font-weight-regular: 400; --medmax-font-weight-medium: 500; --medmax-font-weight-semibold: 600; --medmax-font-weight-bold: 700; --medmax-text-large-size: 18px; --medmax-text-body-size: 16px; --medmax-text-small-size: 14px; --medmax-text-caption-size: 13px; --medmax-text-label-size: 14px; --medmax-text-meta-size: 13px; --medmax-line-height-body: 1.8; --medmax-line-height-small: 1.7; --medmax-line-height-caption: 1.6; --medmax-line-height-label: 1.4; } /* ========================================================= TYPOGRAPHY UTILITIES ========================================================= */ .medmax-text-large { font-family: var(--medmax-font-body); font-size: var(--medmax-text-large-size); font-weight: var(--medmax-font-weight-regular); line-height: var(--medmax-line-height-body); } .medmax-text-small { font-family: var(--medmax-font-body); font-size: var(--medmax-text-small-size); font-weight: var(--medmax-font-weight-regular); line-height: var(--medmax-line-height-small); } .medmax-caption { font-family: var(--medmax-font-body); font-size: var(--medmax-text-caption-size); font-weight: var(--medmax-font-weight-regular); line-height: var(--medmax-line-height-caption); } .medmax-label { font-family: var(--medmax-font-body); font-size: var(--medmax-text-label-size); font-weight: var(--medmax-font-weight-medium); line-height: var(--medmax-line-height-label); } .medmax-meta { font-family: var(--medmax-font-body); font-size: var(--medmax-text-meta-size); font-weight: var(--medmax-font-weight-regular); line-height: var(--medmax-line-height-caption); } /* Point headings */ .medmax-point-heading { font-family: var(--medmax-font-heading); font-size: 24px; font-weight: var(--medmax-font-weight-semibold); line-height: 1.35; } /* FAQ headings */ .medmax-faq-heading { font-family: var(--medmax-font-heading); font-size: 16px; font-weight: var(--medmax-font-weight-semibold); line-height: 1.4; } /* Tablet */ @media (max-width: 1024px) { .medmax-text-large { font-size: 17px; } .medmax-point-heading { font-size: 24px; } .medmax-faq-heading { font-size: 14px; } } /* Mobile */ @media (max-width: 767px) { .medmax-text-large { font-size: 16px; } .medmax-text-small { font-size: 13px; } .medmax-caption { font-size: 12px; } .medmax-meta { font-size: 12px; } .medmax-point-heading { font-size: 16px; } .medmax-faq-heading { font-size: 13px; } } /* ========================================================= 02. GLOBAL TEXT SELECTION ========================================================= */ /* Text selection is one of the approved global behaviors. Selection Background: Secondary Brand Selection Text: White */ ::selection { color: var(--medmax-color-white); background-color: var(--medmax-color-secondary); } ::-moz-selection { color: var(--medmax-color-white); background-color: var(--medmax-color-secondary); } /* ========================================================= 03. ACCESSIBILITY FOUNDATIONS ========================================================= */ /* The utility system does not remove browser focus indicators. These rules improve focus visibility only for elements that use approved Medmax utility classes. */ .medmax-focus-visible:focus-visible, .medmax-links-primary a:focus-visible, .medmax-links-secondary a:focus-visible, .medmax-links-accent a:focus-visible, .medmax-links-light a:focus-visible { outline: 2px solid var(--medmax-focus-color); outline-offset: 4px; border-radius: 2px; } /* Visually hidden content remains available to screen readers. Recommended for: - Accessible labels - Supporting button text - Hidden form instructions - Mobile icon-only controls */ .medmax-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; } /* Skip-link utility. Add the class to an accessible link that targets the primary content area. */ .medmax-skip-link { position: fixed; z-index: 10000; top: 12px; left: 12px; padding: 10px 14px; color: var(--medmax-color-white); background-color: var(--medmax-color-primary); border-radius: var(--medmax-radius-small); text-decoration: none; transform: translateY(-160%); transition: transform var(--medmax-transition-fast); } .medmax-skip-link:focus { transform: translateY(0); } /* ========================================================= 04. INLINE TEXT COLOR UTILITIES ========================================================= */ /* Use these classes inside Elementor headings, text editors, HTML widgets, or approved custom markup. Example: Improve Your Revenue Cycle */ .medmax-text-primary { color: var(--medmax-color-primary) !important; } .medmax-text-secondary { color: var(--medmax-color-secondary) !important; } .medmax-text-accent { color: var(--medmax-color-accent) !important; } .medmax-text-supporting { color: var(--medmax-color-supporting) !important; } .medmax-text-body { color: var(--medmax-color-text) !important; } .medmax-text-muted { color: var(--medmax-color-muted) !important; } .medmax-text-white { color: var(--medmax-color-white) !important; } /* Status text should only be used for meaningful system feedback. */ .medmax-text-success { color: var(--medmax-color-success) !important; } .medmax-text-warning { color: var(--medmax-color-warning) !important; } .medmax-text-error { color: var(--medmax-color-error) !important; } /* ========================================================= 05. LINK UTILITIES ========================================================= */ /* Apply a link utility to an Elementor Text Editor widget, HTML widget, article-content wrapper, or container. Normal state: - Approved brand color - No permanent underline Hover and keyboard focus: - Color transition - Animated underline from left to right These classes affect links inside the assigned wrapper. */ /* --------------------------------------------------------- Shared link foundation --------------------------------------------------------- */ .medmax-links-primary a, .medmax-links-secondary a, .medmax-links-accent a, .medmax-links-light a { position: relative; display: inline; text-decoration: none; transition: color var(--medmax-transition-fast), opacity var(--medmax-transition-fast); } .medmax-links-primary a::after, .medmax-links-secondary a::after, .medmax-links-accent a::after, .medmax-links-light a::after { content: ""; position: absolute; right: 0; bottom: -2px; left: 0; width: 100%; height: 2px; background-color: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform var(--medmax-transition-default); } .medmax-links-primary a:hover::after, .medmax-links-primary a:focus-visible::after, .medmax-links-secondary a:hover::after, .medmax-links-secondary a:focus-visible::after, .medmax-links-accent a:hover::after, .medmax-links-accent a:focus-visible::after, .medmax-links-light a:hover::after, .medmax-links-light a:focus-visible::after { transform: scaleX(1); transform-origin: left center; } /* --------------------------------------------------------- Primary links --------------------------------------------------------- */ .medmax-links-primary a { color: var(--medmax-color-primary); } .medmax-links-primary a:hover, .medmax-links-primary a:focus-visible { color: var(--medmax-color-secondary); } /* --------------------------------------------------------- Secondary links --------------------------------------------------------- */ .medmax-links-secondary a { color: var(--medmax-color-secondary); } .medmax-links-secondary a:hover, .medmax-links-secondary a:focus-visible { color: var(--medmax-color-primary); } /* --------------------------------------------------------- Accent links --------------------------------------------------------- */ .medmax-links-accent a { color: var(--medmax-color-accent); } .medmax-links-accent a:hover, .medmax-links-accent a:focus-visible { color: var(--medmax-color-primary); } /* --------------------------------------------------------- Links on dark backgrounds --------------------------------------------------------- */ .medmax-links-light a { color: var(--medmax-color-white); } .medmax-links-light a:hover, .medmax-links-light a:focus-visible { color: var(--medmax-color-white); opacity: 0.82; } /* ========================================================= 06. ICON COLOR UTILITIES ========================================================= */ /* Apply these classes to an Elementor widget or parent container. The utility targets: - Font icons - Elementor SVG icons - Inline SVG icons It does not change icon size, spacing, or layout. */ .medmax-icons-primary i, .medmax-icons-primary svg { color: var(--medmax-color-primary); fill: currentColor; } .medmax-icons-secondary i, .medmax-icons-secondary svg { color: var(--medmax-color-secondary); fill: currentColor; } .medmax-icons-accent i, .medmax-icons-accent svg { color: var(--medmax-color-accent); fill: currentColor; } .medmax-icons-supporting i, .medmax-icons-supporting svg { color: var(--medmax-color-supporting); fill: currentColor; } .medmax-icons-light i, .medmax-icons-light svg { color: var(--medmax-color-white); fill: currentColor; } /* Functional icon colors should only represent real statuses. */ .medmax-icons-success i, .medmax-icons-success svg { color: var(--medmax-color-success); fill: currentColor; } .medmax-icons-warning i, .medmax-icons-warning svg { color: var(--medmax-color-warning); fill: currentColor; } .medmax-icons-error i, .medmax-icons-error svg { color: var(--medmax-color-error); fill: currentColor; } /* ========================================================= 07. HOVER AND ELEVATION UTILITIES ========================================================= */ /* Elementor or XStore should continue controlling: - Background color - Padding - Border - Border radius - Default box shadow - Layout These utilities add reusable interaction only. */ /* --------------------------------------------------------- Standard hover lift --------------------------------------------------------- */ .medmax-hover-lift { transition: transform var(--medmax-transition-default), box-shadow var(--medmax-transition-default), border-color var(--medmax-transition-default); will-change: transform; } .medmax-hover-lift:hover, .medmax-hover-lift:focus-within { transform: translateY(-6px); box-shadow: var(--medmax-shadow-medium); } /* --------------------------------------------------------- Small hover lift --------------------------------------------------------- */ .medmax-hover-lift-sm { transition: transform var(--medmax-transition-default), box-shadow var(--medmax-transition-default), border-color var(--medmax-transition-default); will-change: transform; } .medmax-hover-lift-sm:hover, .medmax-hover-lift-sm:focus-within { transform: translateY(-3px); box-shadow: var(--medmax-shadow-small); } /* --------------------------------------------------------- Border emphasis on hover --------------------------------------------------------- */ .medmax-hover-border { transition: border-color var(--medmax-transition-default), box-shadow var(--medmax-transition-default); } .medmax-hover-border:hover, .medmax-hover-border:focus-within { border-color: var(--medmax-color-secondary); } /* --------------------------------------------------------- Accent border emphasis --------------------------------------------------------- */ .medmax-hover-border-accent { transition: border-color var(--medmax-transition-default), box-shadow var(--medmax-transition-default); } .medmax-hover-border-accent:hover, .medmax-hover-border-accent:focus-within { border-color: var(--medmax-color-accent); } /* ========================================================= 08. BUTTON UTILITIES ========================================================= */ /* Elementor should control: - Button typography - Default colors - Padding - Border radius - Width - Alignment These classes provide reusable animations and interaction only. */ /* --------------------------------------------------------- Elementor button icon slide --------------------------------------------------------- */ /* Apply to an Elementor Button widget containing an icon. Class: medmax-button-icon-slide */ .medmax-button-icon-slide .elementor-button-icon { transition: transform var(--medmax-transition-default); } .medmax-button-icon-slide:hover .elementor-button-icon, .medmax-button-icon-slide:focus-within .elementor-button-icon { transform: translateX(5px); } /* When the icon appears before the text, move it in the opposite direction. */ .medmax-button-icon-slide .elementor-button-content-wrapper:has( .elementor-button-icon:first-child ) .elementor-button-icon { transform: translateX(0); } .medmax-button-icon-slide:hover .elementor-button-content-wrapper:has( .elementor-button-icon:first-child ) .elementor-button-icon, .medmax-button-icon-slide:focus-within .elementor-button-content-wrapper:has( .elementor-button-icon:first-child ) .elementor-button-icon { transform: translateX(-5px); } /* --------------------------------------------------------- Button sweep animation --------------------------------------------------------- */ /* Apply to an Elementor Button widget. Default animated hover background: Secondary Brand Default hover text: White Class: medmax-button-sweep */ .medmax-button-sweep .elementor-button { position: relative; z-index: 0; overflow: hidden; isolation: isolate; transition: color var(--medmax-transition-default), border-color var(--medmax-transition-default), box-shadow var(--medmax-transition-default), transform var(--medmax-transition-default); } .medmax-button-sweep .elementor-button::before { content: ""; position: absolute; z-index: -1; inset: 0; background-color: var( --medmax-button-hover-background, var(--medmax-color-secondary) ); transform: scaleX(0); transform-origin: right center; transition: transform 340ms ease; } .medmax-button-sweep .elementor-button:hover::before, .medmax-button-sweep .elementor-button:focus-visible::before { transform: scaleX(1); transform-origin: left center; } .medmax-button-sweep .elementor-button:hover, .medmax-button-sweep .elementor-button:focus-visible { color: var( --medmax-button-hover-color, var(--medmax-color-white) ); } /* --------------------------------------------------------- Reverse button sweep --------------------------------------------------------- */ /* Use both classes together: medmax-button-sweep medmax-button-sweep-reverse */ .medmax-button-sweep-reverse .elementor-button::before { transform-origin: left center; } .medmax-button-sweep-reverse .elementor-button:hover::before, .medmax-button-sweep-reverse .elementor-button:focus-visible::before { transform-origin: right center; } /* --------------------------------------------------------- Subtle button lift --------------------------------------------------------- */ .medmax-button-lift .elementor-button { transition: transform var(--medmax-transition-default), box-shadow var(--medmax-transition-default); } .medmax-button-lift .elementor-button:hover, .medmax-button-lift .elementor-button:focus-visible { transform: translateY(-2px); box-shadow: var(--medmax-shadow-small); } /* --------------------------------------------------------- Full-width mobile button utility --------------------------------------------------------- */ /* Use only when a CTA should span the available mobile width. */ @media (max-width: 767px) { .medmax-button-mobile-full .elementor-button { width: 100%; justify-content: center; } } /* ========================================================= 09. IMAGE UTILITIES ========================================================= */ /* Image size, aspect ratio, and border radius should normally be configured through Elementor. These classes provide reusable interaction only. */ /* --------------------------------------------------------- Image zoom --------------------------------------------------------- */ .medmax-image-zoom { overflow: hidden; } .medmax-image-zoom img { transition: transform var(--medmax-transition-slow); will-change: transform; } .medmax-image-zoom:hover img, .medmax-image-zoom:focus-within img { transform: scale(1.045); } /* --------------------------------------------------------- Stronger image zoom --------------------------------------------------------- */ .medmax-image-zoom-lg { overflow: hidden; } .medmax-image-zoom-lg img { transition: transform var(--medmax-transition-slow); will-change: transform; } .medmax-image-zoom-lg:hover img, .medmax-image-zoom-lg:focus-within img { transform: scale(1.08); } /* --------------------------------------------------------- Image overlay preparation --------------------------------------------------------- */ /* Apply to the parent container of an image. This utility creates a positioning context for custom overlay content without imposing layout or typography. */ .medmax-image-overlay { position: relative; overflow: hidden; } /* ========================================================= 10. BADGE AND LABEL UTILITIES ========================================================= */ /* Use badges for: - Article categories - Sponsored labels - Featured posts - Resource types - Status labels Do not use badges as ordinary decorative text. */ /* --------------------------------------------------------- Shared badge foundation --------------------------------------------------------- */ .medmax-badge, .medmax-badge-primary, .medmax-badge-secondary, .medmax-badge-accent, .medmax-badge-soft, .medmax-badge-success, .medmax-badge-warning, .medmax-badge-error { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: fit-content; max-width: 100%; padding: 5px 10px; border: 1px solid transparent; border-radius: var(--medmax-radius-round); font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; } /* --------------------------------------------------------- Primary badge --------------------------------------------------------- */ .medmax-badge, .medmax-badge-primary { color: var(--medmax-color-white); background-color: var(--medmax-color-primary); } /* --------------------------------------------------------- Secondary badge --------------------------------------------------------- */ .medmax-badge-secondary { color: var(--medmax-color-white); background-color: var(--medmax-color-secondary); } /* --------------------------------------------------------- Accent badge --------------------------------------------------------- */ .medmax-badge-accent { color: var(--medmax-color-white); background-color: var(--medmax-color-accent); } /* --------------------------------------------------------- Soft badge --------------------------------------------------------- */ .medmax-badge-soft { color: var(--medmax-color-primary); background-color: var(--medmax-color-background-soft); border-color: var(--medmax-color-border); } /* --------------------------------------------------------- Functional badges --------------------------------------------------------- */ .medmax-badge-success { color: var(--medmax-color-white); background-color: var(--medmax-color-success); } .medmax-badge-warning { color: var(--medmax-color-white); background-color: var(--medmax-color-warning); } .medmax-badge-error { color: var(--medmax-color-white); background-color: var(--medmax-color-error); } /* --------------------------------------------------------- Small badge variation --------------------------------------------------------- */ .medmax-badge-sm { padding: 4px 8px; font-size: 10px; } /* ========================================================= 11. BLOCKQUOTE UTILITY ========================================================= */ /* Recommended for: - Expert quotations - Important article statements - Research highlights - Editorial emphasis Apply to a blockquote element or its Elementor wrapper. */ .medmax-blockquote { position: relative; margin: 24px 0; padding: 22px 24px; color: var(--medmax-color-text); background-color: var(--medmax-color-background-soft); border: 1px solid var(--medmax-color-border); border-left: 4px solid var(--medmax-color-accent); border-radius: 0 var(--medmax-radius-medium) var(--medmax-radius-medium) 0; } .medmax-blockquote > :first-child { margin-top: 0; } .medmax-blockquote > :last-child { margin-bottom: 0; } .medmax-blockquote cite, .medmax-blockquote footer { display: block; margin-top: 14px; color: var(--medmax-color-muted); font-size: 0.92em; font-style: normal; font-weight: 500; } /* --------------------------------------------------------- Dark blockquote variation --------------------------------------------------------- */ .medmax-blockquote-dark { color: var(--medmax-color-white); background-color: var(--medmax-color-primary); border-color: var(--medmax-color-primary); border-left-color: var(--medmax-color-supporting); } .medmax-blockquote-dark cite, .medmax-blockquote-dark footer { color: var(--medmax-color-background-soft); } /* ========================================================= 12. CTA AND CALLOUT UTILITIES ========================================================= */ /* These utilities provide reusable color and structural treatment for calls to action, article prompts, and important notices. Elementor should continue controlling: - Container layout - Typography - Internal spacing - Responsive columns */ /* --------------------------------------------------------- Shared CTA foundation --------------------------------------------------------- */ .medmax-cta, .medmax-cta-primary, .medmax-cta-secondary, .medmax-cta-soft { position: relative; overflow: hidden; border-radius: var(--medmax-radius-large); } /* --------------------------------------------------------- Primary CTA --------------------------------------------------------- */ .medmax-cta, .medmax-cta-primary { color: var(--medmax-color-white); background-color: var(--medmax-color-primary); } .medmax-cta-primary h1, .medmax-cta-primary h2, .medmax-cta-primary h3, .medmax-cta-primary h4, .medmax-cta-primary h5, .medmax-cta-primary h6, .medmax-cta-primary p, .medmax-cta h1, .medmax-cta h2, .medmax-cta h3, .medmax-cta h4, .medmax-cta h5, .medmax-cta h6, .medmax-cta p { color: inherit; } /* --------------------------------------------------------- Secondary CTA --------------------------------------------------------- */ .medmax-cta-secondary { color: var(--medmax-color-white); background-color: var(--medmax-color-secondary); } .medmax-cta-secondary h1, .medmax-cta-secondary h2, .medmax-cta-secondary h3, .medmax-cta-secondary h4, .medmax-cta-secondary h5, .medmax-cta-secondary h6, .medmax-cta-secondary p { color: inherit; } /* --------------------------------------------------------- Soft CTA --------------------------------------------------------- */ .medmax-cta-soft { color: var(--medmax-color-text); background-color: var(--medmax-color-background-soft); border: 1px solid var(--medmax-color-border); } /* --------------------------------------------------------- Callout box --------------------------------------------------------- */ .medmax-callout { padding: 18px 20px; color: var(--medmax-color-text); background-color: var(--medmax-color-background-soft); border: 1px solid var(--medmax-color-border); border-left: 4px solid var(--medmax-color-secondary); border-radius: var(--medmax-radius-medium); } .medmax-callout > :first-child { margin-top: 0; } .medmax-callout > :last-child { margin-bottom: 0; } /* --------------------------------------------------------- Accent callout --------------------------------------------------------- */ .medmax-callout-accent { border-left-color: var(--medmax-color-accent); } /* --------------------------------------------------------- Status callouts --------------------------------------------------------- */ .medmax-callout-success { border-left-color: var(--medmax-color-success); } .medmax-callout-warning { border-left-color: var(--medmax-color-warning); } .medmax-callout-error { border-left-color: var(--medmax-color-error); } /* ========================================================= 13. RESPONSIVE TABLE SYSTEM ========================================================= */ /* The responsive table system supports: - Two-column tables - Three-column tables - Four-column tables - Wider comparison tables - Performance reports - Pricing comparisons - Service comparisons - Numerical data - Article tables The HTML determines the number of columns. Recommended Elementor setup: 1. Add an HTML widget or Text Editor widget. 2. Add the table markup. 3. Open Advanced → CSS Classes. 4. Add: medmax-table Do not add medmax-table both to the Elementor widget and inside the HTML markup. Recommended HTML:
Revenue cycle performance comparison
Metric Current Target Status
Clean Claim Rate 91% 96% Improving
*/ /* --------------------------------------------------------- Scrollable table wrapper --------------------------------------------------------- */ .medmax-table { position: relative; width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; border-radius: var(--medmax-radius-medium); -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--medmax-color-border-strong) var(--medmax-color-background-soft); } /* --------------------------------------------------------- WebKit scrollbar --------------------------------------------------------- */ .medmax-table::-webkit-scrollbar { height: 8px; } .medmax-table::-webkit-scrollbar-track { background-color: var(--medmax-color-background-soft); border-radius: var(--medmax-radius-round); } .medmax-table::-webkit-scrollbar-thumb { background-color: var(--medmax-color-border-strong); border-radius: var(--medmax-radius-round); } .medmax-table::-webkit-scrollbar-thumb:hover { background-color: var(--medmax-color-primary); } /* --------------------------------------------------------- Table foundation --------------------------------------------------------- */ .medmax-table table { width: 100%; min-width: 640px; margin: 0; color: var(--medmax-color-text); background-color: var(--medmax-color-white); border: 1px solid var(--medmax-color-border); border-collapse: separate; border-spacing: 0; border-radius: var(--medmax-radius-medium); overflow: hidden; } /* --------------------------------------------------------- Table caption --------------------------------------------------------- */ .medmax-table caption { padding: 0 0 12px; color: var(--medmax-color-muted); text-align: left; font-size: 0.92em; font-weight: 500; line-height: 1.45; } /* --------------------------------------------------------- Table cells --------------------------------------------------------- */ .medmax-table th, .medmax-table td { padding: 15px 18px; color: inherit; text-align: left; vertical-align: top; line-height: 1.55; border-right: 1px solid var(--medmax-color-border); border-bottom: 1px solid var(--medmax-color-border); overflow-wrap: anywhere; } /* --------------------------------------------------------- Remove duplicate outside borders --------------------------------------------------------- */ .medmax-table th:last-child, .medmax-table td:last-child { border-right: 0; } .medmax-table tbody tr:last-child th, .medmax-table tbody tr:last-child td { border-bottom: 0; } /* --------------------------------------------------------- Table header --------------------------------------------------------- */ .medmax-table thead th { color: var(--medmax-color-white); background-color: var(--medmax-color-primary); font-weight: 600; line-height: 1.35; } /* Header links inherit header text color */ .medmax-table thead th a { color: inherit; text-decoration: none; } /* --------------------------------------------------------- Table body --------------------------------------------------------- */ .medmax-table tbody tr { background-color: var(--medmax-color-white); transition: color var(--medmax-transition-fast), background-color var(--medmax-transition-fast); } /* Alternating row background */ .medmax-table tbody tr:nth-child(even) { background-color: var(--medmax-color-background-soft); } /* Row hover */ .medmax-table tbody tr:hover { background-color: #edf1f4; } /* --------------------------------------------------------- First-column row headings --------------------------------------------------------- */ .medmax-table tbody th[scope="row"] { color: var(--medmax-color-primary); font-weight: 600; } /* --------------------------------------------------------- Links inside tables --------------------------------------------------------- */ .medmax-table tbody a { position: relative; color: var(--medmax-color-secondary); text-decoration: none; transition: color var(--medmax-transition-fast); } .medmax-table tbody a::after { content: ""; position: absolute; right: 0; bottom: -2px; left: 0; height: 1px; background-color: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform var(--medmax-transition-default); } .medmax-table tbody a:hover, .medmax-table tbody a:focus-visible { color: var(--medmax-color-primary); } .medmax-table tbody a:hover::after, .medmax-table tbody a:focus-visible::after { transform: scaleX(1); transform-origin: left center; } .medmax-table tbody a:focus-visible { outline: 2px solid var(--medmax-focus-color); outline-offset: 4px; border-radius: 2px; } /* --------------------------------------------------------- Status text inside tables --------------------------------------------------------- */ .medmax-table .medmax-status-success { color: var(--medmax-color-success); font-weight: 600; } .medmax-table .medmax-status-warning { color: var(--medmax-color-warning); font-weight: 600; } .medmax-table .medmax-status-error { color: var(--medmax-color-error); font-weight: 600; } .medmax-table .medmax-status-muted { color: var(--medmax-color-muted); font-weight: 500; } /* --------------------------------------------------------- Status badges inside tables --------------------------------------------------------- */ .medmax-table .medmax-table-status { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: fit-content; padding: 4px 8px; border-radius: var(--medmax-radius-round); font-size: 11px; font-weight: 600; line-height: 1.2; white-space: nowrap; } .medmax-table .medmax-table-status--success { color: var(--medmax-color-success); background-color: rgba(6, 118, 71, 0.1); } .medmax-table .medmax-table-status--warning { color: var(--medmax-color-warning); background-color: rgba(181, 71, 8, 0.1); } .medmax-table .medmax-table-status--error { color: var(--medmax-color-error); background-color: rgba(180, 35, 24, 0.1); } .medmax-table .medmax-table-status--neutral { color: var(--medmax-color-primary); background-color: var(--medmax-color-background-soft); } /* ========================================================= 14. TABLE MODIFIER UTILITIES ========================================================= */ /* Modifier classes can be combined. Example: medmax-table medmax-table--compact medmax-table--numeric medmax-table--first-column */ /* --------------------------------------------------------- Compact table --------------------------------------------------------- */ .medmax-table--compact th, .medmax-table--compact td { padding: 10px 13px; } /* --------------------------------------------------------- Spacious table --------------------------------------------------------- */ .medmax-table--spacious th, .medmax-table--spacious td { padding: 20px 22px; } /* --------------------------------------------------------- Plain table --------------------------------------------------------- */ /* Removes alternating row backgrounds. */ .medmax-table--plain tbody tr:nth-child(even) { background-color: var(--medmax-color-white); } /* --------------------------------------------------------- Disable table hover --------------------------------------------------------- */ .medmax-table--no-hover tbody tr:hover { background-color: inherit; } /* --------------------------------------------------------- Emphasize first column --------------------------------------------------------- */ .medmax-table--first-column tbody td:first-child, .medmax-table--first-column tbody th:first-child { color: var(--medmax-color-primary); font-weight: 600; } /* --------------------------------------------------------- Numerical table --------------------------------------------------------- */ /* Keeps the first column left-aligned and centers the remaining columns. */ .medmax-table--numeric th:not(:first-child), .medmax-table--numeric td:not(:first-child) { text-align: center; } /* --------------------------------------------------------- Center complete table --------------------------------------------------------- */ .medmax-table--center th, .medmax-table--center td { text-align: center; } /* --------------------------------------------------------- Right-align numerical values --------------------------------------------------------- */ .medmax-table--numbers-right th:not(:first-child), .medmax-table--numbers-right td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; } /* --------------------------------------------------------- Prevent selected cells from wrapping --------------------------------------------------------- */ .medmax-table .medmax-table-nowrap { white-space: nowrap; } /* --------------------------------------------------------- Allow selected cells to wrap normally --------------------------------------------------------- */ .medmax-table .medmax-table-wrap { white-space: normal; overflow-wrap: anywhere; } /* --------------------------------------------------------- Minimum-width helpers --------------------------------------------------------- */ .medmax-table--narrow table { min-width: 520px; } .medmax-table--wide table { min-width: 820px; } .medmax-table--extra-wide table { min-width: 1040px; } /* --------------------------------------------------------- Accent table header --------------------------------------------------------- */ .medmax-table--accent thead th { background-color: var(--medmax-color-accent); } /* --------------------------------------------------------- Secondary table header --------------------------------------------------------- */ .medmax-table--secondary thead th { background-color: var(--medmax-color-secondary); } /* --------------------------------------------------------- Soft table style --------------------------------------------------------- */ .medmax-table--soft table { background-color: var(--medmax-color-background-soft); } .medmax-table--soft tbody tr { background-color: transparent; } .medmax-table--soft tbody tr:nth-child(even) { background-color: var(--medmax-color-white); } /* --------------------------------------------------------- Borderless table variation --------------------------------------------------------- */ .medmax-table--borderless table { border: 0; border-radius: 0; } .medmax-table--borderless th, .medmax-table--borderless td { border-right: 0; } .medmax-table--borderless tbody tr:last-child th, .medmax-table--borderless tbody tr:last-child td { border-bottom: 0; } /* --------------------------------------------------------- Sticky first column --------------------------------------------------------- */ /* Use carefully on wide comparison tables. The first column remains visible while users scroll horizontally. */ .medmax-table--sticky-first th:first-child, .medmax-table--sticky-first td:first-child { position: sticky; z-index: 2; left: 0; background-color: inherit; box-shadow: 1px 0 0 var(--medmax-color-border); } .medmax-table--sticky-first thead th:first-child { z-index: 3; color: var(--medmax-color-white); background-color: var(--medmax-color-primary); } /* ========================================================= 15. TABLE RESPONSIVE BEHAVIOR ========================================================= */ /* --------------------------------------------------------- Tablet --------------------------------------------------------- */ @media (max-width: 1024px) { .medmax-table table { min-width: 620px; } .medmax-table th, .medmax-table td { padding: 13px 15px; } .medmax-table--compact th, .medmax-table--compact td { padding: 9px 11px; } .medmax-table--spacious th, .medmax-table--spacious td { padding: 16px 18px; } .medmax-table--narrow table { min-width: 500px; } .medmax-table--wide table { min-width: 760px; } .medmax-table--extra-wide table { min-width: 960px; } } /* --------------------------------------------------------- Mobile --------------------------------------------------------- */ @media (max-width: 767px) { .medmax-table { border: 1px solid var(--medmax-color-border); border-radius: var(--medmax-radius-small); } .medmax-table table { min-width: 580px; border: 0; border-radius: 0; } .medmax-table caption { padding: 10px 12px; } .medmax-table th, .medmax-table td { padding: 11px 13px; font-size: 0.94em; line-height: 1.45; } .medmax-table thead th { white-space: nowrap; } .medmax-table--compact th, .medmax-table--compact td { padding: 8px 10px; } .medmax-table--spacious th, .medmax-table--spacious td { padding: 13px 15px; } .medmax-table--narrow table { min-width: 480px; } .medmax-table--wide table { min-width: 720px; } .medmax-table--extra-wide table { min-width: 900px; } .medmax-table .medmax-table-status { padding: 4px 7px; font-size: 10px; } } /* --------------------------------------------------------- Very small mobile devices --------------------------------------------------------- */ @media (max-width: 480px) { .medmax-table table { min-width: 540px; } .medmax-table th, .medmax-table td { padding: 10px 12px; } .medmax-table--narrow table { min-width: 460px; } .medmax-table--wide table { min-width: 680px; } .medmax-table--extra-wide table { min-width: 860px; } } /* --------------------------------------------------------- Horizontal-scroll hint --------------------------------------------------------- */ /* Optional helper text that can be placed before a wide table. Example:

Scroll horizontally to view the complete table.

*/ .medmax-table-scroll-hint { display: none; margin: 0 0 8px; color: var(--medmax-color-muted); font-size: 12px; line-height: 1.4; } @media (max-width: 767px) { .medmax-table-scroll-hint { display: block; } } /* ========================================================= 16. BLOG AND ARTICLE UTILITIES ========================================================= */ /* These utilities support reusable Medmax Insights publishing patterns. They should only be used when XStore or Elementor cannot provide the required reusable styling. Recommended for: - Blog cards - Article metadata - Category labels - Related posts - Article CTA sections - Reading time - Author information */ /* --------------------------------------------------------- Article metadata --------------------------------------------------------- */ /* Recommended markup:
May 15, 2026 6 min read RCM Strategy
*/ .medmax-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: var(--medmax-color-muted); font-size: 13px; line-height: 1.45; } .medmax-article-meta > * { display: inline-flex; align-items: center; gap: 6px; } .medmax-article-meta > *:not(:last-child)::after { content: ""; display: inline-block; width: 4px; height: 4px; margin-left: 8px; background-color: var(--medmax-color-supporting); border-radius: 50%; } /* Remove separators on wrapped mobile layouts */ @media (max-width: 767px) { .medmax-article-meta { gap: 6px 10px; font-size: 12px; } .medmax-article-meta > *:not(:last-child)::after { margin-left: 6px; } } /* --------------------------------------------------------- Article category label --------------------------------------------------------- */ .medmax-category-label { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; padding: 4px 9px; color: var(--medmax-color-primary); background-color: var(--medmax-color-background-soft); border: 1px solid var(--medmax-color-border); border-radius: var(--medmax-radius-round); font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; transition: color var(--medmax-transition-fast), background-color var(--medmax-transition-fast), border-color var(--medmax-transition-fast); } .medmax-category-label:hover, .medmax-category-label:focus-visible { color: var(--medmax-color-white); background-color: var(--medmax-color-secondary); border-color: var(--medmax-color-secondary); } .medmax-category-label:focus-visible { outline: 2px solid var(--medmax-focus-color); outline-offset: 3px; } /* --------------------------------------------------------- Featured article marker --------------------------------------------------------- */ .medmax-featured-post { position: relative; } .medmax-featured-post::before { content: "Featured"; position: absolute; z-index: 2; top: 14px; left: 14px; display: inline-flex; align-items: center; justify-content: center; padding: 5px 10px; color: var(--medmax-color-white); background-color: var(--medmax-color-primary); border-radius: var(--medmax-radius-round); box-shadow: var(--medmax-shadow-small); font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; } /* --------------------------------------------------------- Blog card foundation --------------------------------------------------------- */ /* Elementor should continue controlling: - Grid layout - Card width - Internal padding - Typography - Image size This utility provides shared visual treatment only. */ .medmax-blog-card { height: 100%; overflow: hidden; background-color: var(--medmax-color-white); border: 1px solid var(--medmax-color-border); border-radius: var(--medmax-radius-medium); transition: transform var(--medmax-transition-default), box-shadow var(--medmax-transition-default), border-color var(--medmax-transition-default); } .medmax-blog-card:hover, .medmax-blog-card:focus-within { border-color: var(--medmax-color-supporting); transform: translateY(-4px); box-shadow: var(--medmax-shadow-medium); } .medmax-blog-card img { display: block; width: 100%; transition: transform var(--medmax-transition-slow); } .medmax-blog-card:hover img, .medmax-blog-card:focus-within img { transform: scale(1.04); } /* --------------------------------------------------------- Article content wrapper --------------------------------------------------------- */ /* Apply to long-form article content when consistent link, blockquote, table, and media behavior is required. */ .medmax-article-content { color: var(--medmax-color-text); } .medmax-article-content h1, .medmax-article-content h2 { color: var(--medmax-color-primary); } .medmax-article-content h3, .medmax-article-content h4 { color: var(--medmax-color-secondary); } .medmax-article-content h5, .medmax-article-content h6 { color: var(--medmax-color-accent); } .medmax-article-content a { position: relative; color: var(--medmax-color-secondary); text-decoration: none; transition: color var(--medmax-transition-fast); } .medmax-article-content a::after { content: ""; position: absolute; right: 0; bottom: -2px; left: 0; height: 1px; background-color: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform var(--medmax-transition-default); } .medmax-article-content a:hover, .medmax-article-content a:focus-visible { color: var(--medmax-color-primary); } .medmax-article-content a:hover::after, .medmax-article-content a:focus-visible::after { transform: scaleX(1); transform-origin: left center; } .medmax-article-content a:focus-visible { outline: 2px solid var(--medmax-focus-color); outline-offset: 4px; border-radius: 2px; } .medmax-article-content img { max-width: 100%; height: auto; } .medmax-article-content figure { margin-right: 0; margin-left: 0; } .medmax-article-content figcaption { margin-top: 8px; color: var(--medmax-color-muted); font-size: 13px; line-height: 1.45; } /* --------------------------------------------------------- Related articles wrapper --------------------------------------------------------- */ .medmax-related-posts { padding: 24px; background-color: var(--medmax-color-background-soft); border: 1px solid var(--medmax-color-border); border-radius: var(--medmax-radius-large); } .medmax-related-posts > :first-child { margin-top: 0; } .medmax-related-posts > :last-child { margin-bottom: 0; } /* ========================================================= 17. SPONSORED CONTENT UTILITIES ========================================================= */ /* Sponsored and partner content must always be identified clearly. These utilities support disclosure styling only. They must not replace the actual sponsored-content disclosure text required by editorial policy. */ /* --------------------------------------------------------- Sponsored label --------------------------------------------------------- */ .medmax-sponsored-label { display: inline-flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; padding: 5px 10px; color: var(--medmax-color-primary); background-color: var(--medmax-color-background-soft); border: 1px solid var(--medmax-color-supporting); border-radius: var(--medmax-radius-round); font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.05em; text-transform: uppercase; } /* --------------------------------------------------------- Sponsored article disclosure --------------------------------------------------------- */ .medmax-partner-disclosure { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; color: var(--medmax-color-text); background-color: var(--medmax-color-background-soft); border: 1px solid var(--medmax-color-border); border-left: 4px solid var(--medmax-color-accent); border-radius: var(--medmax-radius-medium); font-size: 14px; line-height: 1.55; } .medmax-partner-disclosure i, .medmax-partner-disclosure svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; color: var(--medmax-color-accent); fill: currentColor; } .medmax-partner-disclosure > :first-child { margin-top: 0; } .medmax-partner-disclosure > :last-child { margin-bottom: 0; } /* --------------------------------------------------------- Sponsored article container --------------------------------------------------------- */ .medmax-sponsored-content { position: relative; } .medmax-sponsored-content::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background-color: var(--medmax-color-accent); border-radius: var(--medmax-radius-round); } /* --------------------------------------------------------- Sponsored banner --------------------------------------------------------- */ .medmax-sponsored-banner { position: relative; overflow: hidden; color: var(--medmax-color-white); background-color: var(--medmax-color-primary); border-radius: var(--medmax-radius-large); } .medmax-sponsored-banner h1, .medmax-sponsored-banner h2, .medmax-sponsored-banner h3, .medmax-sponsored-banner h4, .medmax-sponsored-banner p { color: inherit; } .medmax-sponsored-banner::after { content: "Sponsored"; position: absolute; top: 12px; right: 12px; padding: 4px 8px; color: var(--medmax-color-primary); background-color: var(--medmax-color-white); border-radius: var(--medmax-radius-round); font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; } /* ========================================================= 18. AUTHOR BOX UTILITIES ========================================================= */ /* Recommended for: - Article author biographies - Guest authors - Medical coding experts - Sponsored-content contributors */ .medmax-author-box { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; padding: 22px; color: var(--medmax-color-text); background-color: var(--medmax-color-background-soft); border: 1px solid var(--medmax-color-border); border-radius: var(--medmax-radius-large); } .medmax-author-box__image { width: 84px; height: 84px; overflow: hidden; border: 3px solid var(--medmax-color-white); border-radius: 50%; box-shadow: var(--medmax-shadow-small); } .medmax-author-box__image img { display: block; width: 100%; height: 100%; object-fit: cover; } .medmax-author-box__content { min-width: 0; } .medmax-author-box__name { margin: 0 0 4px; color: var(--medmax-color-primary); font-weight: 700; line-height: 1.3; } .medmax-author-box__role { margin: 0 0 10px; color: var(--medmax-color-secondary); font-size: 13px; font-weight: 600; line-height: 1.4; } .medmax-author-box__bio { margin: 0; color: var(--medmax-color-text); line-height: 1.65; } .medmax-author-box__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .medmax-author-box__links a { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; color: var(--medmax-color-primary); background-color: var(--medmax-color-white); border: 1px solid var(--medmax-color-border); border-radius: 50%; text-decoration: none; transition: color var(--medmax-transition-fast), background-color var(--medmax-transition-fast), border-color var(--medmax-transition-fast), transform var(--medmax-transition-fast); } .medmax-author-box__links a:hover, .medmax-author-box__links a:focus-visible { color: var(--medmax-color-white); background-color: var(--medmax-color-secondary); border-color: var(--medmax-color-secondary); transform: translateY(-2px); } .medmax-author-box__links a:focus-visible { outline: 2px solid var(--medmax-focus-color); outline-offset: 3px; } /* Mobile author box */ @media (max-width: 767px) { .medmax-author-box { grid-template-columns: 1fr; gap: 14px; padding: 18px; } .medmax-author-box__image { width: 72px; height: 72px; } } /* ========================================================= 19. RESOURCE CARD UTILITIES ========================================================= */ /* Recommended for: - PDF downloads - Whitepapers - Templates - Checklists - Reports - Case studies */ .medmax-resource-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; height: 100%; padding: 20px; color: var(--medmax-color-text); background-color: var(--medmax-color-white); border: 1px solid var(--medmax-color-border); border-radius: var(--medmax-radius-large); transition: transform var(--medmax-transition-default), box-shadow var(--medmax-transition-default), border-color var(--medmax-transition-default); } .medmax-resource-card:hover, .medmax-resource-card:focus-within { border-color: var(--medmax-color-supporting); transform: translateY(-4px); box-shadow: var(--medmax-shadow-medium); } .medmax-resource-card__icon { display: inline-grid; place-items: center; width: 58px; height: 58px; color: var(--medmax-color-white); background-color: var(--medmax-color-primary); border-radius: var(--medmax-radius-medium); } .medmax-resource-card__icon i, .medmax-resource-card__icon svg { width: 26px; height: 26px; color: inherit; fill: currentColor; } .medmax-resource-card__content { min-width: 0; } .medmax-resource-card__type { display: block; margin-bottom: 5px; color: var(--medmax-color-accent); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; line-height: 1.2; text-transform: uppercase; } .medmax-resource-card__title { margin: 0 0 8px; color: var(--medmax-color-primary); line-height: 1.35; } .medmax-resource-card__description { margin: 0; color: var(--medmax-color-text); line-height: 1.6; } /* Mobile resource card */ @media (max-width: 767px) { .medmax-resource-card { grid-template-columns: 1fr; align-items: start; } } /* ========================================================= 20. NEWSLETTER BOX UTILITIES ========================================================= */ /* Recommended for: - Blog subscription sections - Article newsletter prompts - Footer subscription blocks The actual form fields should still be built using Elementor, Mailchimp, or the approved form system. */ .medmax-newsletter-box { position: relative; overflow: hidden; padding: 28px; color: var(--medmax-color-text); background-color: var(--medmax-color-background-soft); border: 1px solid var(--medmax-color-border); border-radius: var(--medmax-radius-large); } .medmax-newsletter-box h1, .medmax-newsletter-box h2, .medmax-newsletter-box h3, .medmax-newsletter-box h4 { color: var(--medmax-color-primary); } .medmax-newsletter-box > :first-child { margin-top: 0; } .medmax-newsletter-box > :last-child { margin-bottom: 0; } /* Dark newsletter variation */ .medmax-newsletter-box--dark { color: var(--medmax-color-white); background-color: var(--medmax-color-primary); border-color: var(--medmax-color-primary); } .medmax-newsletter-box--dark h1, .medmax-newsletter-box--dark h2, .medmax-newsletter-box--dark h3, .medmax-newsletter-box--dark h4, .medmax-newsletter-box--dark p, .medmax-newsletter-box--dark label { color: inherit; } /* Newsletter form row */ .medmax-newsletter-form { display: flex; align-items: stretch; gap: 10px; width: 100%; margin-top: 18px; } .medmax-newsletter-form input[type="email"] { min-width: 0; flex: 1 1 auto; } .medmax-newsletter-form button, .medmax-newsletter-form input[type="submit"] { flex: 0 0 auto; } /* Mobile newsletter form */ @media (max-width: 767px) { .medmax-newsletter-box { padding: 22px; } .medmax-newsletter-form { flex-direction: column; } .medmax-newsletter-form button, .medmax-newsletter-form input[type="submit"] { width: 100%; } } /* ========================================================= 21. EMPTY, SEARCH, AND FEEDBACK STATES ========================================================= */ /* Recommended for: - No search results - Empty category archives - No downloadable resources - No comments - Filter states */ /* --------------------------------------------------------- Empty state --------------------------------------------------------- */ .medmax-empty-state { display: grid; place-items: center; min-height: 220px; padding: 32px 24px; color: var(--medmax-color-text); background-color: var(--medmax-color-background-soft); border: 1px solid var(--medmax-color-border); border-radius: var(--medmax-radius-large); text-align: center; } .medmax-empty-state__icon { display: inline-grid; place-items: center; width: 62px; height: 62px; margin-bottom: 16px; color: var(--medmax-color-primary); background-color: var(--medmax-color-white); border: 1px solid var(--medmax-color-border); border-radius: 50%; } .medmax-empty-state__icon i, .medmax-empty-state__icon svg { width: 28px; height: 28px; color: inherit; fill: currentColor; } .medmax-empty-state__title { margin: 0 0 8px; color: var(--medmax-color-primary); } .medmax-empty-state__description { max-width: 560px; margin: 0; color: var(--medmax-color-muted); line-height: 1.6; } /* --------------------------------------------------------- Search results count --------------------------------------------------------- */ .medmax-search-summary { padding: 12px 16px; color: var(--medmax-color-text); background-color: var(--medmax-color-background-soft); border-left: 4px solid var(--medmax-color-secondary); border-radius: var(--medmax-radius-small); font-size: 14px; line-height: 1.5; } /* --------------------------------------------------------- Loading skeleton --------------------------------------------------------- */ .medmax-skeleton { position: relative; overflow: hidden; background-color: var(--medmax-color-background-soft); border-radius: var(--medmax-radius-small); } .medmax-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.72), transparent ); transform: translateX(-100%); animation: medmax-skeleton-loading 1.5s ease-in-out infinite; } @keyframes medmax-skeleton-loading { 100% { transform: translateX(100%); } } /* Common skeleton dimensions */ .medmax-skeleton-text { width: 100%; height: 14px; } .medmax-skeleton-title { width: 70%; height: 24px; } .medmax-skeleton-image { width: 100%; min-height: 180px; } .medmax-skeleton-circle { width: 52px; height: 52px; border-radius: 50%; } /* --------------------------------------------------------- 404 utility --------------------------------------------------------- */ .medmax-404 { display: grid; place-items: center; min-height: 420px; padding: 40px 24px; text-align: center; } .medmax-404__code { margin: 0; color: var(--medmax-color-primary); font-size: clamp(72px, 12vw, 150px); font-weight: 700; line-height: 0.9; letter-spacing: -0.04em; } .medmax-404__title { margin: 18px 0 8px; color: var(--medmax-color-primary); } .medmax-404__description { max-width: 560px; margin: 0; color: var(--medmax-color-muted); line-height: 1.65; } /* ========================================================= 22. FLOATING WHATSAPP UTILITY ========================================================= */ /* The floating WhatsApp utility provides a lightweight contact option without requiring a separate WhatsApp plugin. Required files: - medmax-rcm-custom-style.css - medmax-whatsapp.js - floating-whatsapp-widget.html Recommended placement: - Elementor Global Footer - XStore Static Block - Approved global theme location Only one instance should exist on the website. */ /* --------------------------------------------------------- Main fixed wrapper --------------------------------------------------------- */ .medmax-whatsapp { position: fixed; z-index: 999; right: 24px; bottom: 24px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; max-width: calc(100vw - 48px); pointer-events: none; } /* Restore interaction for child elements */ .medmax-whatsapp__button, .medmax-whatsapp__tooltip { pointer-events: auto; } /* --------------------------------------------------------- WhatsApp action button --------------------------------------------------------- */ .medmax-whatsapp__button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 12px 18px; color: var(--medmax-color-white); background-color: var(--medmax-color-whatsapp); border: 1px solid transparent; border-radius: var(--medmax-radius-round); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); text-decoration: none; line-height: 1; transition: color var(--medmax-transition-default), background-color var(--medmax-transition-default), border-color var(--medmax-transition-default), transform var(--medmax-transition-default), box-shadow var(--medmax-transition-default); will-change: transform; } /* Button hover and keyboard focus */ .medmax-whatsapp__button:hover, .medmax-whatsapp__button:focus-visible { color: var(--medmax-color-white); background-color: var(--medmax-color-whatsapp-hover); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.23); } /* Keyboard focus */ .medmax-whatsapp__button:focus-visible { outline: 3px solid rgba(37, 211, 102, 0.32); outline-offset: 4px; } /* --------------------------------------------------------- WhatsApp icon --------------------------------------------------------- */ .medmax-whatsapp__icon, .medmax-whatsapp__button svg { display: block; width: 28px; height: 28px; flex: 0 0 28px; color: inherit; fill: currentColor; } /* --------------------------------------------------------- WhatsApp button label --------------------------------------------------------- */ .medmax-whatsapp__label { display: inline-block; font-size: 14px; font-weight: 600; line-height: 1.25; white-space: nowrap; } /* --------------------------------------------------------- WhatsApp tooltip --------------------------------------------------------- */ .medmax-whatsapp__tooltip { display: none; align-items: center; gap: 12px; width: max-content; max-width: 300px; padding: 12px 14px; color: var(--medmax-color-text); background-color: var(--medmax-color-white); border: 1px solid var(--medmax-color-border); border-radius: var(--medmax-radius-medium); box-shadow: var(--medmax-shadow-medium); font-size: 14px; line-height: 1.45; } /* The JavaScript utility adds the is-visible class. */ .medmax-whatsapp__tooltip.is-visible { display: flex; animation: medmax-whatsapp-tooltip-in 280ms ease both; } /* Tooltip entrance animation */ @keyframes medmax-whatsapp-tooltip-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* --------------------------------------------------------- Tooltip close button --------------------------------------------------------- */ .medmax-whatsapp__close { display: inline-grid; place-items: center; width: 28px; height: 28px; min-width: 28px; padding: 0; color: var(--medmax-color-primary); background-color: transparent; border: 0; border-radius: 50%; cursor: pointer; font: inherit; font-size: 20px; font-weight: 500; line-height: 1; transition: color var(--medmax-transition-fast), background-color var(--medmax-transition-fast); } .medmax-whatsapp__close:hover, .medmax-whatsapp__close:focus-visible { color: var(--medmax-color-secondary); background-color: var(--medmax-color-background-soft); } .medmax-whatsapp__close:focus-visible { outline: 2px solid var(--medmax-focus-color); outline-offset: 2px; } /* ========================================================= 23. RESPONSIVE REFINEMENTS ========================================================= */ /* --------------------------------------------------------- Tablet --------------------------------------------------------- */ @media (max-width: 1024px) { .medmax-whatsapp { right: 20px; bottom: 20px; max-width: calc(100vw - 40px); } .medmax-whatsapp__tooltip { max-width: 280px; } .medmax-related-posts { padding: 22px; } .medmax-newsletter-box { padding: 24px; } .medmax-404 { min-height: 360px; } } /* --------------------------------------------------------- Mobile --------------------------------------------------------- */ @media (max-width: 767px) { .medmax-whatsapp { right: 16px; bottom: 16px; max-width: calc(100vw - 32px); } .medmax-whatsapp__button { width: 56px; height: 56px; min-height: 56px; padding: 0; border-radius: 50%; } .medmax-whatsapp__button:hover, .medmax-whatsapp__button:focus-visible { transform: translateY(-2px); } /* Keep the label available to screen readers while showing only the icon visually on mobile. */ .medmax-whatsapp__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; } .medmax-whatsapp__tooltip { width: auto; max-width: min(280px, calc(100vw - 32px)); padding: 11px 12px; font-size: 13px; } .medmax-blockquote { margin: 20px 0; padding: 18px 18px; } .medmax-callout { padding: 16px; } .medmax-related-posts { padding: 18px; } .medmax-sponsored-banner::after { top: 10px; right: 10px; } .medmax-empty-state { min-height: 200px; padding: 26px 18px; } .medmax-404 { min-height: 320px; padding: 32px 18px; } } /* --------------------------------------------------------- Very small mobile devices --------------------------------------------------------- */ @media (max-width: 480px) { .medmax-whatsapp { right: 12px; bottom: 12px; max-width: calc(100vw - 24px); } .medmax-whatsapp__button { width: 52px; height: 52px; min-height: 52px; } .medmax-whatsapp__icon, .medmax-whatsapp__button svg { width: 25px; height: 25px; flex-basis: 25px; } .medmax-whatsapp__tooltip { max-width: min(260px, calc(100vw - 24px)); } .medmax-badge, .medmax-badge-primary, .medmax-badge-secondary, .medmax-badge-accent, .medmax-badge-soft, .medmax-badge-success, .medmax-badge-warning, .medmax-badge-error { white-space: normal; } .medmax-featured-post::before { top: 10px; left: 10px; } } /* ========================================================= 24. REDUCED-MOTION ACCESSIBILITY ========================================================= */ /* Users who prefer reduced motion should not receive unnecessary movement or repeated animation. */ @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } .medmax-skip-link, .medmax-links-primary a, .medmax-links-primary a::after, .medmax-links-secondary a, .medmax-links-secondary a::after, .medmax-links-accent a, .medmax-links-accent a::after, .medmax-links-light a, .medmax-links-light a::after, .medmax-hover-lift, .medmax-hover-lift-sm, .medmax-hover-border, .medmax-hover-border-accent, .medmax-button-icon-slide .elementor-button-icon, .medmax-button-sweep .elementor-button, .medmax-button-sweep .elementor-button::before, .medmax-button-lift .elementor-button, .medmax-image-zoom img, .medmax-image-zoom-lg img, .medmax-category-label, .medmax-blog-card, .medmax-blog-card img, .medmax-article-content a, .medmax-article-content a::after, .medmax-author-box__links a, .medmax-resource-card, .medmax-table tbody tr, .medmax-table tbody a, .medmax-table tbody a::after, .medmax-whatsapp__button, .medmax-whatsapp__close { transition: none; } .medmax-hover-lift:hover, .medmax-hover-lift:focus-within, .medmax-hover-lift-sm:hover, .medmax-hover-lift-sm:focus-within, .medmax-button-icon-slide:hover .elementor-button-icon, .medmax-button-icon-slide:focus-within .elementor-button-icon, .medmax-button-lift .elementor-button:hover, .medmax-button-lift .elementor-button:focus-visible, .medmax-image-zoom:hover img, .medmax-image-zoom:focus-within img, .medmax-image-zoom-lg:hover img, .medmax-image-zoom-lg:focus-within img, .medmax-blog-card:hover, .medmax-blog-card:focus-within, .medmax-blog-card:hover img, .medmax-blog-card:focus-within img, .medmax-author-box__links a:hover, .medmax-author-box__links a:focus-visible, .medmax-resource-card:hover, .medmax-resource-card:focus-within, .medmax-whatsapp__button:hover, .medmax-whatsapp__button:focus-visible { transform: none; } .medmax-whatsapp__tooltip.is-visible { animation: none; } .medmax-skeleton::after { animation: none; display: none; } } /* ========================================================= 25. PRINT BEHAVIOR ========================================================= */ /* Print styles support articles, reports, and downloadable reference content. */ @media print { /* Hide floating and interactive interface elements. */ .medmax-whatsapp, .medmax-skip-link, .medmax-newsletter-box, .medmax-sponsored-banner, .medmax-table-scroll-hint, .medmax-skeleton { display: none !important; } /* Remove decorative movement and shadows. */ .medmax-hover-lift, .medmax-hover-lift-sm, .medmax-blog-card, .medmax-resource-card, .medmax-author-box, .medmax-related-posts, .medmax-blockquote, .medmax-callout, .medmax-partner-disclosure { box-shadow: none !important; transform: none !important; } /* Prevent table scroll wrappers from clipping printed data. */ .medmax-table { overflow: visible; border: 0; } .medmax-table table { width: 100%; min-width: 0; color: #000000; background-color: #ffffff; border-collapse: collapse; } .medmax-table th, .medmax-table td { color: #000000; background-color: #ffffff; border: 1px solid #999999; } .medmax-table thead th { color: #000000; background-color: #eeeeee; } .medmax-table tbody tr, .medmax-table tbody tr:nth-child(even), .medmax-table tbody tr:hover { background-color: #ffffff; } /* Keep links readable in printed documents. */ .medmax-article-content a, .medmax-links-primary a, .medmax-links-secondary a, .medmax-links-accent a, .medmax-links-light a { color: #000000; text-decoration: underline; } .medmax-article-content a::after, .medmax-links-primary a::after, .medmax-links-secondary a::after, .medmax-links-accent a::after, .medmax-links-light a::after { display: none; } /* Avoid breaking important content boxes across pages. */ .medmax-author-box, .medmax-resource-card, .medmax-blockquote, .medmax-callout, .medmax-partner-disclosure, .medmax-table tr { break-inside: avoid; page-break-inside: avoid; } /* Print URLs for important article links. */ .medmax-article-content a[href^="http"]::after { content: " (" attr(href) ")"; position: static; display: inline; width: auto; height: auto; background: none; transform: none; font-size: 0.85em; overflow-wrap: anywhere; } } .mm-vertical-divider { --mm-divider-height: 20px; display: flex; align-items: center; width: 1px !important; min-width: 1px !important; height: var(--mm-divider-height); margin: 0 10px !important; } .mm-vertical-divider .elementor-divider { width: 1px !important; padding: 0 !important; } .mm-vertical-divider .elementor-divider-separator { display: block !important; width: 1px !important; height: var(--mm-divider-height) !important; border-top: 0 !important; border-left: 1px solid #d7dee3 !important; transform: none !important; } /* Fix XStore table-edge padding overrides */ body .medmax-table table > thead > tr > th, body .medmax-table table > tbody > tr > th, body .medmax-table table > tbody > tr > td { padding: 15px 18px !important; } body .medmax-table table > thead > tr > th:first-child, body .medmax-table table > tbody > tr > th:first-child, body .medmax-table table > tbody > tr > td:first-child { padding-left: 18px !important; } body .medmax-table table > thead > tr > th:last-child, body .medmax-table table > tbody > tr > th:last-child, body .medmax-table table > tbody > tr > td:last-child { padding-right: 18px !important; } .medmax-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0; } .medmax-reading-time { display: inline-flex; align-items: center; margin-left: 8px; color: var(--medmax-color-muted, #64748b); font-size: 14px; line-height: 1.4; } .medmax-reading-time::before { content: "•"; margin-right: 8px; color: var(--medmax-color-supporting, #9eacb5); } @media (max-width: 767px) { .medmax-post-meta { font-size: 13px; } } /* ========================================================= 26. MAINTENANCE NOTES ========================================================= */ /* Before adding a new class, confirm that: 1. XStore cannot provide the required behavior. 2. Elementor cannot provide the required behavior. 3. The class will be reused. 4. The class follows the medmax-* naming convention. 5. Accessibility has been considered. 6. Responsive behavior has been tested. 7. Reduced-motion behavior has been tested. 8. The class is documented in custom-css-classes.md. 9. The project changelog is updated when necessary. Avoid: - Page-specific fixes in this file - Generic selectors that globally override Elementor - Generic selectors that globally override XStore - Unapproved colors - Duplicate utility classes - Excessive !important declarations - Inline styling inside reusable HTML files */ /* ========================================================= END OF MEDMAX RCM INSIGHTS UTILITY STYLESHEET Version: 2.0.0 ========================================================= */