/* ============================================================
MOTLEY RICE STYLESHEET — Complete Bundle
Single-file bundle with all CSS inlined
Generated: 2026-02-25 21:00:19
============================================================ */
/* ────────────────────────────────────────────────────── */
/* File: src/tokens/colors.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Design Tokens: Colors
Extracted from motleyrice.com brand identity
============================================================ */
:root {
/* ── Brand Primary ─────────────────────────────────────── */
--mr-color-primary: #0079ae;
--mr-color-primary-hover: #015580;
--mr-color-primary-active: #004065;
--mr-color-primary-light: #9ccbe9;
--mr-color-primary-lighter: #d4e8f5;
--mr-color-primary-bright: #009ce1;
/* ── Brand Navy ────────────────────────────────────────── */
--mr-color-navy: #234060;
--mr-color-navy-dark: #15273b;
--mr-color-navy-deeper: #004065;
--mr-color-navy-midnight: #00374e;
--mr-color-navy-surface: #004968;
/* ── Brand Accent (Gold) ───────────────────────────────── */
--mr-color-accent: #a49571;
--mr-color-accent-hover: #8e7f5e;
--mr-color-accent-light: #c4b894;
/* ── Neutrals ──────────────────────────────────────────── */
--mr-color-white: #ffffff;
--mr-color-black: #000000;
--mr-color-gray-50: #f7f8fa;
--mr-color-gray-100: #eef2f5;
--mr-color-gray-150: #eaeff4;
--mr-color-gray-200: #dde1e1;
--mr-color-gray-300: #ccc;
--mr-color-gray-400: #a6bcca;
--mr-color-gray-500: #868f9a;
--mr-color-gray-600: #666;
--mr-color-gray-700: #4e5758;
--mr-color-gray-800: #3c3c3c;
--mr-color-gray-850: #2f2f2f;
--mr-color-gray-900: #222626;
--mr-color-gray-950: #1f1f1f;
/* ── Semantic ──────────────────────────────────────────── */
--mr-color-success: #16a34a;
--mr-color-success-light: #dcfce7;
--mr-color-success-dark: #15803d;
--mr-color-warning: #d97706;
--mr-color-warning-light: #fef3c7;
--mr-color-warning-dark: #b45309;
--mr-color-danger: #dc2626;
--mr-color-danger-light: #fee2e2;
--mr-color-danger-dark: #b91c1c;
--mr-color-info: #009ce1;
--mr-color-info-light: #dbeafe;
--mr-color-info-dark: #0079ae;
/* ── Gradients ─────────────────────────────────────────── */
--mr-gradient-hero: linear-gradient(180deg, #005180 0%, #004065 52%);
--mr-gradient-dark: linear-gradient(180deg, #004065 0%, #15273b 100%);
--mr-gradient-surface: linear-gradient(180deg, #eaeff4 0%, #fff 100%);
--mr-gradient-deep: linear-gradient(180deg, #004968 0%, #00374e 100%);
--mr-gradient-header: linear-gradient(180deg, #e8eff4 0%, #f5f8f9 100%);
/* ── Focus Ring ────────────────────────────────────────── */
--mr-focus-ring: 0 0 0 3px rgba(0, 121, 174, 0.4);
--mr-focus-ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.4);
--mr-focus-ring-accent: 0 0 0 3px rgba(164, 149, 113, 0.4);
}
/* ────────────────────────────────────────────────────── */
/* File: src/tokens/typography.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Design Tokens: Typography
Primary: Proxima Nova | Serif: Georgia
============================================================ */
:root {
/* ── Font Families ─────────────────────────────────────── */
--mr-font-primary: "proxima-nova", sans-serif;
--mr-font-serif: Georgia, "Times New Roman", Times, serif;
--mr-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
/* ── Font Sizes ────────────────────────────────────────── */
--mr-text-2xs: 0.625rem; /* 10px */
--mr-text-xs: 0.75rem; /* 12px */
--mr-text-sm: 0.875rem; /* 14px */
--mr-text-base: 1rem; /* 16px */
--mr-text-md: 1.0625rem; /* 17px */
--mr-text-lg: 1.125rem; /* 18px */
--mr-text-xl: 1.25rem; /* 20px */
--mr-text-2xl: 1.375rem; /* 22px */
--mr-text-3xl: 1.5rem; /* 24px */
--mr-text-4xl: 1.875rem; /* 30px */
--mr-text-5xl: 2.5rem; /* 40px */
--mr-text-6xl: 3rem; /* 48px */
--mr-text-7xl: 3.375rem; /* 54px */
/* ── Font Weights ──────────────────────────────────────── */
--mr-font-thin: 100;
--mr-font-regular: 400;
--mr-font-medium: 500;
--mr-font-semibold: 600;
--mr-font-bold: 700;
--mr-font-extrabold: 800;
--mr-font-black: 900;
/* ── Line Heights ──────────────────────────────────────── */
--mr-leading-none: 1;
--mr-leading-tight: 1.15;
--mr-leading-snug: 1.25;
--mr-leading-normal: 1.5;
--mr-leading-relaxed: 1.625;
--mr-leading-loose: 2;
/* ── Letter Spacing ────────────────────────────────────── */
--mr-tracking-tight: -0.025em;
--mr-tracking-normal: 0;
--mr-tracking-wide: 0.5px;
--mr-tracking-wider: 0.75px;
--mr-tracking-widest: 1px;
}
/* ────────────────────────────────────────────────────── */
/* File: src/tokens/spacing.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Design Tokens: Spacing
4px base unit system
============================================================ */
:root {
--mr-space-px: 1px;
--mr-space-0: 0;
--mr-space-0-5: 0.125rem; /* 2px */
--mr-space-1: 0.25rem; /* 4px */
--mr-space-1-5: 0.375rem; /* 6px */
--mr-space-2: 0.5rem; /* 8px */
--mr-space-2-5: 0.625rem; /* 10px */
--mr-space-3: 0.75rem; /* 12px */
--mr-space-3-5: 0.875rem; /* 14px */
--mr-space-4: 1rem; /* 16px */
--mr-space-5: 1.25rem; /* 20px */
--mr-space-6: 1.5rem; /* 24px */
--mr-space-7: 1.75rem; /* 28px */
--mr-space-8: 2rem; /* 32px */
--mr-space-9: 2.25rem; /* 36px */
--mr-space-10: 2.5rem; /* 40px */
--mr-space-12: 3rem; /* 48px */
--mr-space-14: 3.5rem; /* 56px */
--mr-space-16: 4rem; /* 64px */
--mr-space-20: 5rem; /* 80px */
--mr-space-24: 6rem; /* 96px */
--mr-space-32: 8rem; /* 128px */
/* ── Border Radius ─────────────────────────────────────── */
--mr-radius-none: 0;
--mr-radius-sm: 2px;
--mr-radius-md: 4px;
--mr-radius-lg: 10px;
--mr-radius-xl: 15px;
--mr-radius-2xl: 20px;
--mr-radius-pill: 9999px;
--mr-radius-full: 50%;
/* ── Breakpoints (for reference — use in @media) ───────── */
/* --mr-bp-sm: 30em; 480px */
/* --mr-bp-md: 48em; 768px */
/* --mr-bp-lg: 64em; 1024px */
/* --mr-bp-xl: 80em; 1280px */
/* --mr-bp-2xl: 85.375em; 1366px */
/* ── Z-Index Scale ─────────────────────────────────────── */
--mr-z-dropdown: 1000;
--mr-z-sticky: 1020;
--mr-z-fixed: 1030;
--mr-z-drawer: 1040;
--mr-z-modal-overlay: 1050;
--mr-z-modal: 1060; --mr-z-popover: 1065; --mr-z-notification: 1070;
--mr-z-tooltip: 1080;
}
/* ────────────────────────────────────────────────────── */
/* File: src/tokens/shadows.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Design Tokens: Shadows
Derived from motleyrice.com box-shadow declarations
============================================================ */
:root {
--mr-shadow-none: none;
--mr-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--mr-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
--mr-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
--mr-shadow-lg: 0 9px 6px -6px rgba(0, 0, 0, 0.5);
--mr-shadow-xl: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
--mr-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--mr-shadow-inner: inset 0 0 6px rgba(0, 0, 0, 0.3);
--mr-shadow-accent: -4px 4px var(--mr-color-accent);
--mr-shadow-accent-bottom: 0 4px var(--mr-color-accent);
--mr-shadow-focus: var(--mr-focus-ring);
}
/* ────────────────────────────────────────────────────── */
/* File: src/tokens/transitions.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Design Tokens: Transitions & Animation
Primary transition: all 300ms ease-in-out
============================================================ */
:root {
/* ── Durations ─────────────────────────────────────────── */
--mr-duration-fast: 150ms;
--mr-duration-default: 300ms;
--mr-duration-slow: 500ms;
/* ── Easings ───────────────────────────────────────────── */
--mr-ease-default: ease-in-out;
--mr-ease-in: ease-in;
--mr-ease-out: ease-out;
--mr-ease-linear: linear;
/* ── Composed Transitions ──────────────────────────────── */
--mr-transition-all: all var(--mr-duration-default) var(--mr-ease-default);
--mr-transition-fast: all var(--mr-duration-fast) var(--mr-ease-default);
--mr-transition-color: color var(--mr-duration-default) var(--mr-ease-default),
background-color var(--mr-duration-default) var(--mr-ease-default);
--mr-transition-opacity: opacity var(--mr-duration-default) var(--mr-ease-default);
--mr-transition-transform: transform 200ms ease-in;
--mr-transition-shadow: box-shadow var(--mr-duration-default) var(--mr-ease-default);
}
/* ────────────────────────────────────────────────────── */
/* File: src/themes/light.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Theme: Light Mode (Default)
Applied via :root or [data-theme="light"]
============================================================ */
:root,
[data-theme="light"] {
/* ── Surfaces ──────────────────────────────────────────── */
--mr-surface-page: var(--mr-color-gray-50);
--mr-surface-card: var(--mr-color-white);
--mr-surface-raised: var(--mr-color-white);
--mr-surface-sunken: var(--mr-color-gray-100);
--mr-surface-overlay: rgba(0, 0, 0, 0.5);
--mr-surface-sidebar: var(--mr-color-navy-dark);
--mr-surface-header: var(--mr-color-white);
/* ── Text ──────────────────────────────────────────────── */
--mr-text-primary: var(--mr-color-gray-950);
--mr-text-secondary: var(--mr-color-gray-700);
--mr-text-muted: var(--mr-color-gray-500);
--mr-text-inverse: var(--mr-color-white);
--mr-text-link: var(--mr-color-primary);
--mr-text-link-hover: var(--mr-color-primary-hover);
--mr-text-on-primary: var(--mr-color-white);
--mr-text-on-accent: var(--mr-color-white);
--mr-text-on-dark: var(--mr-color-white);
/* ── Borders ───────────────────────────────────────────── */
--mr-border-default: var(--mr-color-gray-200);
--mr-border-strong: var(--mr-color-gray-300);
--mr-border-subtle: var(--mr-color-gray-100);
--mr-border-focus: var(--mr-color-primary);
/* ── Form Inputs ───────────────────────────────────────── */
--mr-input-bg: var(--mr-color-white);
--mr-input-border: var(--mr-color-gray-300);
--mr-input-text: var(--mr-color-gray-950);
--mr-input-placeholder: var(--mr-color-gray-500);
--mr-input-disabled-bg: var(--mr-color-gray-100);
--mr-input-disabled-text: var(--mr-color-gray-500);
/* ── Component-Specific ────────────────────────────────── */
--mr-table-stripe: var(--mr-color-gray-50);
--mr-table-hover: var(--mr-color-gray-100);
--mr-badge-bg: var(--mr-color-gray-100);
--mr-badge-text: var(--mr-color-gray-700);
--mr-code-bg: var(--mr-color-gray-100);
--mr-code-text: var(--mr-color-danger-dark);
/* ── Scrollbar ─────────────────────────────────────────── */
--mr-scrollbar-track: var(--mr-color-gray-100);
--mr-scrollbar-thumb: var(--mr-color-gray-300);
--mr-scrollbar-thumb-hover: var(--mr-color-gray-500);
color-scheme: light;
}
/* ────────────────────────────────────────────────────── */
/* File: src/themes/dark.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Theme: Dark Mode
Applied via [data-theme="dark"] OR prefers-color-scheme
============================================================ */
[data-theme="dark"] {
/* ── Surfaces ──────────────────────────────────────────── */
--mr-surface-page: #0f1720;
--mr-surface-card: var(--mr-color-navy-dark);
--mr-surface-raised: var(--mr-color-navy);
--mr-surface-sunken: #0a1018;
--mr-surface-overlay: rgba(0, 0, 0, 0.7);
--mr-surface-sidebar: #0a1018;
--mr-surface-header: var(--mr-color-navy-dark);
/* ── Text ──────────────────────────────────────────────── */
--mr-text-primary: #e8edf2;
--mr-text-secondary: #a6bcca;
--mr-text-muted: var(--mr-color-gray-500);
--mr-text-inverse: var(--mr-color-gray-950);
--mr-text-link: var(--mr-color-primary-bright);
--mr-text-link-hover: var(--mr-color-primary-light);
--mr-text-on-primary: var(--mr-color-white);
--mr-text-on-accent: var(--mr-color-white);
--mr-text-on-dark: #e8edf2;
/* ── Borders ───────────────────────────────────────────── */
--mr-border-default: #2a3a4e;
--mr-border-strong: #3d5068;
--mr-border-subtle: #1e2d3e;
--mr-border-focus: var(--mr-color-primary-bright);
/* ── Form Inputs ───────────────────────────────────────── */
--mr-input-bg: #1a2838;
--mr-input-border: #2a3a4e;
--mr-input-text: #e8edf2;
--mr-input-placeholder: var(--mr-color-gray-500);
--mr-input-disabled-bg: #121e2a;
--mr-input-disabled-text: var(--mr-color-gray-600);
/* ── Component-Specific ────────────────────────────────── */
--mr-table-stripe: #1a2838;
--mr-table-hover: #1e2d3e;
--mr-badge-bg: #1e2d3e;
--mr-badge-text: #a6bcca;
--mr-code-bg: #1a2838;
--mr-code-text: #f87171;
/* ── Scrollbar ─────────────────────────────────────────── */
--mr-scrollbar-track: #1a2838;
--mr-scrollbar-thumb: #2a3a4e;
--mr-scrollbar-thumb-hover: #3d5068;
/* ── Adjusted Brand Colors for Dark Contrast ───────────── */
--mr-color-success: #22c55e;
--mr-color-success-light: #052e16;
--mr-color-warning: #f59e0b;
--mr-color-warning-light: #451a03;
--mr-color-danger: #f87171;
--mr-color-danger-light: #450a0a;
--mr-color-info: #38bdf8;
--mr-color-info-light: #0c2d48;
--mr-focus-ring: 0 0 0 3px rgba(0, 156, 225, 0.45);
color-scheme: dark;
}
/* ── Dark Mode Card Outlines ───────────────────────────────── */
[data-theme="dark"] .mr-card {
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .mr-card-elevated {
box-shadow: var(--mr-shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .mr-card-outlined {
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}
/* ── OS-Level Dark Mode Fallback ─────────────────────────── */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--mr-surface-page: #0f1720;
--mr-surface-card: var(--mr-color-navy-dark);
--mr-surface-raised: var(--mr-color-navy);
--mr-surface-sunken: #0a1018;
--mr-surface-overlay: rgba(0, 0, 0, 0.7);
--mr-surface-sidebar: #0a1018;
--mr-surface-header: var(--mr-color-navy-dark);
--mr-text-primary: #e8edf2;
--mr-text-secondary: #a6bcca;
--mr-text-muted: var(--mr-color-gray-500);
--mr-text-inverse: var(--mr-color-gray-950);
--mr-text-link: var(--mr-color-primary-bright);
--mr-text-link-hover: var(--mr-color-primary-light);
--mr-text-on-primary: var(--mr-color-white);
--mr-text-on-accent: var(--mr-color-white);
--mr-text-on-dark: #e8edf2;
--mr-border-default: #2a3a4e;
--mr-border-strong: #3d5068;
--mr-border-subtle: #1e2d3e;
--mr-border-focus: var(--mr-color-primary-bright);
--mr-input-bg: #1a2838;
--mr-input-border: #2a3a4e;
--mr-input-text: #e8edf2;
--mr-input-placeholder: var(--mr-color-gray-500);
--mr-input-disabled-bg: #121e2a;
--mr-input-disabled-text: var(--mr-color-gray-600);
--mr-table-stripe: #1a2838;
--mr-table-hover: #1e2d3e;
--mr-badge-bg: #1e2d3e;
--mr-badge-text: #a6bcca;
--mr-code-bg: #1a2838;
--mr-code-text: #f87171;
--mr-scrollbar-track: #1a2838;
--mr-scrollbar-thumb: #2a3a4e;
--mr-scrollbar-thumb-hover: #3d5068;
--mr-color-success: #22c55e;
--mr-color-success-light: #052e16;
--mr-color-warning: #f59e0b;
--mr-color-warning-light: #451a03;
--mr-color-danger: #f87171;
--mr-color-danger-light: #450a0a;
--mr-color-info: #38bdf8;
--mr-color-info-light: #0c2d48;
--mr-focus-ring: 0 0 0 3px rgba(0, 156, 225, 0.45);
color-scheme: dark;
}
/* Pagination dark mode enhancements */
[data-theme="dark"] .mr-pagination-item,
[data-theme="dark"] .mr-page-link {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .mr-pagination-item:hover,
[data-theme="dark"] .mr-page-link:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .mr-pagination-item.mr-pagination-active,
[data-theme="dark"] .mr-page-item.mr-page-active .mr-page-link,
[data-theme="dark"] .mr-page-link.mr-active {
box-shadow: 0 4px 16px rgba(0, 156, 225, 0.4);
}
/* Card outlines for system dark mode */
:root:not([data-theme="light"]) .mr-card {
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}
:root:not([data-theme="light"]) .mr-card-elevated {
box-shadow: var(--mr-shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
:root:not([data-theme="light"]) .mr-card-outlined {
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}
/* Pagination for system dark mode */
:root:not([data-theme="light"]) .mr-pagination-item,
:root:not([data-theme="light"]) .mr-page-link {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
:root:not([data-theme="light"]) .mr-pagination-item:hover,
:root:not([data-theme="light"]) .mr-page-link:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
:root:not([data-theme="light"]) .mr-pagination-item.mr-pagination-active,
:root:not([data-theme="light"]) .mr-page-item.mr-page-active .mr-page-link,
:root:not([data-theme="light"]) .mr-page-link.mr-active {
box-shadow: 0 4px 16px rgba(0, 156, 225, 0.4);
}
}
/* ────────────────────────────────────────────────────── */
/* File: src/base/reset.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Base: CSS Reset
Modern, minimal reset for webapp foundations
============================================================ */
/* ── Box Model ───────────────────────────────────────────── */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* ── Remove default margins ──────────────────────────────── */
* {
margin: 0;
padding: 0;
}
/* ── Document ────────────────────────────────────────────── */
html {
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
scroll-behavior: smooth;
tab-size: 4;
}
/* ── Body ────────────────────────────────────────────────── */
body {
min-height: 100vh;
min-height: 100dvh;
line-height: var(--mr-leading-normal);
font-family: var(--mr-font-primary);
font-size: var(--mr-text-base);
font-weight: var(--mr-font-regular);
color: var(--mr-text-primary);
background-color: var(--mr-surface-page);
}
/* ── Typography ──────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
text-wrap: balance;
}
p {
overflow-wrap: break-word;
text-wrap: pretty;
}
/* ── Media ───────────────────────────────────────────────── */
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
img {
height: auto;
}
/* ── Form Elements ───────────────────────────────────────── */
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
background: none;
border: none;
}
/* ── Interactive ─────────────────────────────────────────── */
a {
color: inherit;
text-decoration: inherit;
}
/* ── Lists ───────────────────────────────────────────────── */
ul, ol {
list-style: none;
}
/* ── Tables ──────────────────────────────────────────────── */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ── Misc ────────────────────────────────────────────────── */
[hidden] {
display: none !important;
}
:focus-visible {
outline: 2px solid var(--mr-border-focus);
outline-offset: 2px;
}
::selection {
background-color: var(--mr-color-primary);
color: var(--mr-color-white);
}
/* ── Scrollbar Styling ───────────────────────────────────── */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--mr-scrollbar-track);
}
::-webkit-scrollbar-thumb {
background: var(--mr-scrollbar-thumb);
border-radius: var(--mr-radius-pill);
}
::-webkit-scrollbar-thumb:hover {
background: var(--mr-scrollbar-thumb-hover);
}
/* Firefox */
@supports (scrollbar-color: auto) {
* {
scrollbar-width: thin;
scrollbar-color: var(--mr-scrollbar-thumb) var(--mr-scrollbar-track);
}
}
/* ────────────────────────────────────────────────────── */
/* File: src/base/typography.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Base: Typography
Element-level type styles using design tokens
============================================================ */
/* ── Headings ────────────────────────────────────────────── */
h1, .mr-h1 {
font-size: var(--mr-text-5xl);
font-weight: var(--mr-font-bold);
line-height: var(--mr-leading-tight);
letter-spacing: var(--mr-tracking-tight);
color: var(--mr-text-primary);
margin-bottom: var(--mr-space-6);
}
h2, .mr-h2 {
font-size: var(--mr-text-4xl);
font-weight: var(--mr-font-bold);
line-height: var(--mr-leading-tight);
letter-spacing: var(--mr-tracking-tight);
color: var(--mr-text-primary);
margin-bottom: var(--mr-space-5);
}
h3, .mr-h3 {
font-size: var(--mr-text-3xl);
font-weight: var(--mr-font-semibold);
line-height: var(--mr-leading-snug);
color: var(--mr-text-primary);
margin-bottom: var(--mr-space-4);
}
h4, .mr-h4 {
font-size: var(--mr-text-xl);
font-weight: var(--mr-font-semibold);
line-height: var(--mr-leading-snug);
color: var(--mr-text-primary);
margin-bottom: var(--mr-space-3);
}
h5, .mr-h5 {
font-size: var(--mr-text-lg);
font-weight: var(--mr-font-semibold);
line-height: var(--mr-leading-normal);
color: var(--mr-text-primary);
margin-bottom: var(--mr-space-2);
}
h6, .mr-h6 {
font-size: var(--mr-text-base);
font-weight: var(--mr-font-semibold);
line-height: var(--mr-leading-normal);
color: var(--mr-text-secondary);
margin-bottom: var(--mr-space-2);
text-transform: uppercase;
letter-spacing: var(--mr-tracking-wide);
}
/* ── Body Text ───────────────────────────────────────────── */
p, .mr-body {
font-size: var(--mr-text-base);
line-height: var(--mr-leading-normal);
color: var(--mr-text-secondary);
margin-bottom: var(--mr-space-4);
}
.mr-body-lg {
font-size: var(--mr-text-lg);
line-height: var(--mr-leading-relaxed);
}
.mr-body-sm {
font-size: var(--mr-text-sm);
line-height: var(--mr-leading-normal);
}
/* ── Links ───────────────────────────────────────────────── */
a, .mr-link {
color: var(--mr-text-link);
text-decoration: none;
transition: all 150ms ease;
text-underline-offset: 3px;
}
a:hover, .mr-link:hover {
color: var(--mr-text-link-hover);
text-decoration: underline;
transform: translateX(1px);
}
a:focus-visible, .mr-link:focus-visible {
outline: 2px solid var(--mr-border-focus);
outline-offset: 2px;
border-radius: var(--mr-radius-sm);
}
/* ── Inline Elements ─────────────────────────────────────── */
strong, b, .mr-text-bold {
font-weight: var(--mr-font-bold);
}
em, i, .mr-text-italic {
font-style: italic;
}
small, .mr-text-sm {
font-size: var(--mr-text-sm);
}
.mr-text-xs {
font-size: var(--mr-text-xs);
}
.mr-text-lg {
font-size: var(--mr-text-lg);
}
.mr-text-xl {
font-size: var(--mr-text-xl);
}
.mr-text-2xl {
font-size: var(--mr-text-2xl);
}
.mr-text-3xl {
font-size: var(--mr-text-3xl);
}
.mr-text-4xl {
font-size: var(--mr-text-4xl);
}
.mr-text-5xl {
font-size: var(--mr-text-5xl);
}
/* ── Text Utilities ──────────────────────────────────────── */
.mr-text-primary { color: var(--mr-text-primary); }
.mr-text-secondary { color: var(--mr-text-secondary); }
.mr-text-muted { color: var(--mr-text-muted); }
.mr-text-inverse { color: var(--mr-text-inverse); }
.mr-text-accent { color: var(--mr-color-accent); }
.mr-text-brand { color: var(--mr-color-primary); }
.mr-text-success { color: var(--mr-color-success); }
.mr-text-warning { color: var(--mr-color-warning); }
.mr-text-danger { color: var(--mr-color-danger); }
.mr-text-info { color: var(--mr-color-info); }
/* Color utility classes for forcing specific colors */
.mr-text-white { color: var(--mr-color-white); }
.mr-text-black { color: #000000; }
.mr-text-navy { color: var(--mr-color-navy); }
.mr-text-gold { color: var(--mr-color-accent); }
/* Override text color on button hover when background becomes light */
.mr-btn.mr-text-white:hover {
color: var(--mr-color-primary);
}
.mr-text-center { text-align: center; }
.mr-text-left { text-align: left; }
.mr-text-right { text-align: right; }
.mr-text-justify { text-align: justify; }
.mr-text-uppercase {
text-transform: uppercase;
letter-spacing: var(--mr-tracking-wide);
}
.mr-text-lowercase { text-transform: lowercase; }
.mr-text-capitalize { text-transform: capitalize; }
.mr-text-normal-case { text-transform: none; }
.mr-text-nowrap { white-space: nowrap; }
.mr-text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mr-text-break { overflow-wrap: break-word; }
.mr-text-line-through { text-decoration: line-through; }
.mr-text-underline { text-decoration: underline; }
.mr-text-no-underline { text-decoration: none; }
/* ── Font Weight Utilities ───────────────────────────────── */
.mr-font-thin { font-weight: var(--mr-font-thin); }
.mr-font-regular { font-weight: var(--mr-font-regular); }
.mr-font-medium { font-weight: var(--mr-font-medium); }
.mr-font-semibold { font-weight: var(--mr-font-semibold); }
.mr-font-bold { font-weight: var(--mr-font-bold); }
.mr-font-extrabold { font-weight: var(--mr-font-extrabold); }
.mr-font-black { font-weight: var(--mr-font-black); }
/* ── Font Family Utilities ───────────────────────────────── */
.mr-font-sans { font-family: var(--mr-font-primary); }
.mr-font-serif { font-family: var(--mr-font-serif); }
.mr-font-mono { font-family: var(--mr-font-mono); }
/* ── Code ────────────────────────────────────────────────── */
code, kbd, samp, .mr-code-inline {
font-family: var(--mr-font-mono);
font-size: 0.875em;
background-color: var(--mr-code-bg);
color: var(--mr-code-text);
padding: 0.125em 0.375em;
border-radius: var(--mr-radius-sm);
}
pre, .mr-code-block {
font-family: var(--mr-font-mono);
font-size: var(--mr-text-sm);
background-color: var(--mr-code-bg);
color: var(--mr-text-primary);
padding: var(--mr-space-4);
border-radius: var(--mr-radius-md);
overflow-x: auto;
margin-bottom: var(--mr-space-4);
line-height: var(--mr-leading-relaxed);
}
pre code {
background: none;
padding: 0;
border-radius: 0;
color: inherit;
}
/* ── Blockquotes ─────────────────────────────────────────── */
blockquote, .mr-blockquote {
border-left: 4px solid var(--mr-color-accent);
padding: var(--mr-space-4) var(--mr-space-6);
margin-bottom: var(--mr-space-4);
font-family: var(--mr-font-serif);
font-size: var(--mr-text-lg);
font-style: italic;
color: var(--mr-text-secondary);
background-color: var(--mr-surface-sunken);
border-radius: 0 var(--mr-radius-md) var(--mr-radius-md) 0;
}
/* ── Horizontal Rule ─────────────────────────────────────── */
hr {
border: none;
border-top: 1px solid var(--mr-border-default);
margin: var(--mr-space-8) 0;
}
/* ── Mark / Highlight ────────────────────────────────────── */
mark, .mr-highlight {
background-color: var(--mr-color-warning-light);
color: var(--mr-text-primary);
padding: 0.125em 0.25em;
border-radius: var(--mr-radius-sm);
}
/* ── Lead Paragraph ──────────────────────────────────────── */
.mr-lead {
font-size: var(--mr-text-xl);
line-height: var(--mr-leading-relaxed);
color: var(--mr-text-secondary);
font-weight: var(--mr-font-regular);
margin-bottom: var(--mr-space-6);
}
/* ── Display Headings ────────────────────────────────────── */
.mr-display-1 {
font-size: var(--mr-text-7xl);
font-weight: var(--mr-font-black);
line-height: var(--mr-leading-none);
letter-spacing: var(--mr-tracking-tight);
}
.mr-display-2 {
font-size: var(--mr-text-6xl);
font-weight: var(--mr-font-extrabold);
line-height: var(--mr-leading-none);
letter-spacing: var(--mr-tracking-tight);
}
.mr-display-3 {
font-size: var(--mr-text-5xl);
font-weight: var(--mr-font-bold);
line-height: var(--mr-leading-tight);
letter-spacing: var(--mr-tracking-tight);
}
/* ────────────────────────────────────────────────────── */
/* File: src/layouts/containers.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Layouts: Containers
Max-width centered containers with responsive breakpoints
============================================================ */
.mr-container {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: var(--mr-space-4);
padding-right: var(--mr-space-4);
}
@media (max-width: 47.999em) {
.mr-container {
padding-left: var(--mr-space-3);
padding-right: var(--mr-space-3);
}
}
@media (min-width: 30em) {
.mr-container { max-width: 540px; }
}
@media (min-width: 48em) {
.mr-container { max-width: 720px; }
}
@media (min-width: 64em) {
.mr-container { max-width: 960px; }
}
@media (min-width: 80em) {
.mr-container { max-width: 1200px; }
}
@media (min-width: 85.375em) {
.mr-container { max-width: 1340px; }
}
.mr-container-sm {
width: 100%;
max-width: 720px;
margin-left: auto;
margin-right: auto;
padding-left: var(--mr-space-4);
padding-right: var(--mr-space-4);
}
.mr-container-md {
width: 100%;
max-width: 960px;
margin-left: auto;
margin-right: auto;
padding-left: var(--mr-space-4);
padding-right: var(--mr-space-4);
}
.mr-container-lg {
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: var(--mr-space-4);
padding-right: var(--mr-space-4);
}
.mr-container-xl {
width: 100%;
max-width: 1340px;
margin-left: auto;
margin-right: auto;
padding-left: var(--mr-space-4);
padding-right: var(--mr-space-4);
}
.mr-container-fluid {
width: 100%;
padding-left: var(--mr-space-4);
padding-right: var(--mr-space-4);
}
/* Mobile padding adjustments */
@media (max-width: 47.999em) {
.mr-container-sm,
.mr-container-md,
.mr-container-lg,
.mr-container-xl,
.mr-container-fluid {
padding-left: var(--mr-space-3);
padding-right: var(--mr-space-3);
}
}
/* ────────────────────────────────────────────────────── */
/* File: src/layouts/grid.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Layouts: Grid System
CSS Grid-based 12-column responsive grid
============================================================ */
.mr-grid {
display: grid;
gap: var(--mr-space-4);
}
.mr-grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.mr-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.mr-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.mr-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.mr-grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.mr-grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.mr-grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
/* ── Column Spans ────────────────────────────────────────── */
.mr-col-1 { grid-column: span 1; }
.mr-col-2 { grid-column: span 2; }
.mr-col-3 { grid-column: span 3; }
.mr-col-4 { grid-column: span 4; }
.mr-col-5 { grid-column: span 5; }
.mr-col-6 { grid-column: span 6; }
.mr-col-7 { grid-column: span 7; }
.mr-col-8 { grid-column: span 8; }
.mr-col-9 { grid-column: span 9; }
.mr-col-10 { grid-column: span 10; }
.mr-col-11 { grid-column: span 11; }
.mr-col-12 { grid-column: span 12; }
.mr-col-full { grid-column: 1 / -1; }
/* ── Row Spans ───────────────────────────────────────────── */
.mr-row-span-2 { grid-row: span 2; }
.mr-row-span-3 { grid-row: span 3; }
.mr-row-span-4 { grid-row: span 4; }
/* ── Gap Variants ────────────────────────────────────────── */
.mr-gap-0 { gap: 0; }
.mr-gap-1 { gap: var(--mr-space-1); }
.mr-gap-2 { gap: var(--mr-space-2); }
.mr-gap-3 { gap: var(--mr-space-3); }
.mr-gap-4 { gap: var(--mr-space-4); }
.mr-gap-5 { gap: var(--mr-space-5); }
.mr-gap-6 { gap: var(--mr-space-6); }
.mr-gap-8 { gap: var(--mr-space-8); }
.mr-gap-10 { gap: var(--mr-space-10); }
.mr-gap-12 { gap: var(--mr-space-12); }
.mr-gap-x-4 { column-gap: var(--mr-space-4); }
.mr-gap-x-6 { column-gap: var(--mr-space-6); }
.mr-gap-x-8 { column-gap: var(--mr-space-8); }
.mr-gap-y-4 { row-gap: var(--mr-space-4); }
.mr-gap-y-6 { row-gap: var(--mr-space-6); }
.mr-gap-y-8 { row-gap: var(--mr-space-8); }
/* ── Responsive: Medium (48em / 768px) ───────────────────── */
@media (min-width: 48em) {
.mr-md-grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.mr-md-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.mr-md-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.mr-md-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.mr-md-grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.mr-md-grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
.mr-md-col-1 { grid-column: span 1; }
.mr-md-col-2 { grid-column: span 2; }
.mr-md-col-3 { grid-column: span 3; }
.mr-md-col-4 { grid-column: span 4; }
.mr-md-col-5 { grid-column: span 5; }
.mr-md-col-6 { grid-column: span 6; }
.mr-md-col-7 { grid-column: span 7; }
.mr-md-col-8 { grid-column: span 8; }
.mr-md-col-9 { grid-column: span 9; }
.mr-md-col-10 { grid-column: span 10; }
.mr-md-col-11 { grid-column: span 11; }
.mr-md-col-12 { grid-column: span 12; }
}
/* ── Responsive: Large (64em / 1024px) ───────────────────── */
@media (min-width: 64em) {
.mr-lg-grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.mr-lg-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.mr-lg-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.mr-lg-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.mr-lg-grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.mr-lg-grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.mr-lg-grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
.mr-lg-col-1 { grid-column: span 1; }
.mr-lg-col-2 { grid-column: span 2; }
.mr-lg-col-3 { grid-column: span 3; }
.mr-lg-col-4 { grid-column: span 4; }
.mr-lg-col-5 { grid-column: span 5; }
.mr-lg-col-6 { grid-column: span 6; }
.mr-lg-col-7 { grid-column: span 7; }
.mr-lg-col-8 { grid-column: span 8; }
.mr-lg-col-9 { grid-column: span 9; }
.mr-lg-col-10 { grid-column: span 10; }
.mr-lg-col-11 { grid-column: span 11; }
.mr-lg-col-12 { grid-column: span 12; }
}
/* ── Responsive: XL (80em / 1280px) ──────────────────────── */
@media (min-width: 80em) {
.mr-xl-grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.mr-xl-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.mr-xl-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.mr-xl-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.mr-xl-grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.mr-xl-grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.mr-xl-grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
}
/* ── Alignment ───────────────────────────────────────────── */
.mr-items-start { align-items: flex-start; }
.mr-items-center { align-items: center; }
.mr-items-end { align-items: flex-end; }
.mr-items-stretch { align-items: stretch; }
.mr-justify-start { justify-content: flex-start; }
.mr-justify-center { justify-content: center; }
.mr-justify-end { justify-content: flex-end; }
.mr-justify-between { justify-content: space-between; }
.mr-justify-around { justify-content: space-around; }
.mr-justify-evenly { justify-content: space-evenly; }
.mr-place-center {
place-items: center;
}
/* ── Auto-fit / Auto-fill ────────────────────────────────── */
.mr-grid-auto-fit {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.mr-grid-auto-fill {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
/* ────────────────────────────────────────────────────── */
/* File: src/layouts/app-shell.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Layouts: App Shell
Full-viewport application wrapper with header/sidebar/main
============================================================ */
.mr-app-shell {
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100dvh;
}
/* ── App Header ──────────────────────────────────────────── */
.mr-app-header {
position: sticky;
top: 0;
z-index: var(--mr-z-sticky);
display: flex;
align-items: center;
height: 64px;
padding: 0 var(--mr-space-6);
background-color: var(--mr-surface-header);
border-bottom: 1px solid var(--mr-border-default);
flex-shrink: 0;
}
.mr-app-header-brand {
display: flex;
align-items: center;
gap: var(--mr-space-3);
font-size: var(--mr-text-lg);
font-weight: var(--mr-font-bold);
color: var(--mr-text-primary);
text-decoration: none;
white-space: nowrap;
}
.mr-app-header-brand img,
.mr-app-header-brand svg {
height: 32px;
width: auto;
}
.mr-app-header-nav {
display: flex;
align-items: center;
gap: var(--mr-space-2);
margin-left: auto;
}
.mr-app-header-spacer {
flex: 1;
}
/* ── App Body (sidebar + main) ───────────────────────────── */
.mr-app-body {
display: flex;
flex: 1;
overflow: hidden;
}
/* ── App Sidebar ─────────────────────────────────────────── */
.mr-app-sidebar {
display: flex;
flex-direction: column;
width: 260px;
flex-shrink: 0;
background-color: var(--mr-surface-sidebar);
border-right: 1px solid var(--mr-border-default);
overflow-y: auto;
transition: width var(--mr-duration-default) var(--mr-ease-default),
transform var(--mr-duration-default) var(--mr-ease-default);
}
.mr-app-sidebar-header {
padding: var(--mr-space-4) var(--mr-space-5);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mr-app-sidebar-content {
flex: 1;
padding: var(--mr-space-3) 0;
overflow-y: auto;
}
.mr-app-sidebar-footer {
padding: var(--mr-space-4) var(--mr-space-5);
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: auto;
}
/* ── Collapsed Sidebar ───────────────────────────────────── */
.mr-app-sidebar-collapsed .mr-app-sidebar {
width: 64px;
}
.mr-app-sidebar-collapsed .mr-app-sidebar .mr-sidenav-label,
.mr-app-sidebar-collapsed .mr-app-sidebar .mr-app-sidebar-header,
.mr-app-sidebar-collapsed .mr-app-sidebar .mr-app-sidebar-footer {
display: none;
}
/* ── App Main Content ────────────────────────────────────── */
.mr-app-main {
flex: 1;
overflow-y: auto;
padding: var(--mr-space-6);
background-color: var(--mr-surface-page);
}
.mr-app-main-flush {
padding: 0;
}
/* ── App Footer ──────────────────────────────────────────── */
.mr-app-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--mr-space-4) var(--mr-space-6);
background-color: var(--mr-surface-card);
border-top: 1px solid var(--mr-border-default);
font-size: var(--mr-text-sm);
color: var(--mr-text-muted);
flex-shrink: 0;
}
/* ── Mobile: Hide sidebar by default ─────────────────────── */
@media (max-width: 63.999em) {
.mr-app-sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: var(--mr-z-drawer);
transform: translateX(-100%);
}
.mr-app-sidebar-open .mr-app-sidebar {
transform: translateX(0);
}
.mr-app-sidebar-overlay {
display: none;
position: fixed;
inset: 0;
background-color: var(--mr-surface-overlay);
z-index: calc(var(--mr-z-drawer) - 1);
}
.mr-app-sidebar-open .mr-app-sidebar-overlay {
display: block;
}
}
/* ────────────────────────────────────────────────────── */
/* File: src/layouts/sidebar-layout.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Layouts: Sidebar Layout
Fixed sidebar + scrollable main content
============================================================ */
.mr-layout-sidebar {
display: flex;
min-height: 100vh;
min-height: 100dvh;
}
.mr-layout-sidebar-panel {
width: 280px;
flex-shrink: 0;
background-color: var(--mr-surface-card);
border-right: 1px solid var(--mr-border-default);
overflow-y: auto;
position: sticky;
top: 0;
height: 100vh;
height: 100dvh;
}
.mr-layout-sidebar-main {
flex: 1;
min-width: 0;
overflow-y: auto;
}
/* ── Right sidebar variant ───────────────────────────────── */
.mr-layout-sidebar-right {
flex-direction: row-reverse;
}
.mr-layout-sidebar-right .mr-layout-sidebar-panel {
border-right: none;
border-left: 1px solid var(--mr-border-default);
}
/* ── Narrow sidebar ──────────────────────────────────────── */
.mr-layout-sidebar-narrow .mr-layout-sidebar-panel {
width: 220px;
}
/* ── Wide sidebar ────────────────────────────────────────── */
.mr-layout-sidebar-wide .mr-layout-sidebar-panel {
width: 360px;
}
/* ── Mobile: Stack vertically ────────────────────────────── */
@media (max-width: 63.999em) {
.mr-layout-sidebar {
flex-direction: column;
}
.mr-layout-sidebar-panel {
width: 100%;
height: auto;
position: static;
border-right: none;
border-bottom: 1px solid var(--mr-border-default);
}
.mr-layout-sidebar-right .mr-layout-sidebar-panel {
border-left: none;
border-bottom: 1px solid var(--mr-border-default);
}
}
/* ────────────────────────────────────────────────────── */
/* File: src/layouts/stacked-layout.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Layouts: Stacked Layout
Header → Main → Footer vertical stack
============================================================ */
.mr-layout-stacked {
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100dvh;
}
.mr-layout-stacked > main,
.mr-layout-stacked > .mr-layout-stacked-main {
flex: 1;
}
/* ── Contained variant — constrains inner width ──────────── */
.mr-layout-stacked-contained > main,
.mr-layout-stacked-contained > .mr-layout-stacked-main {
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: var(--mr-space-4);
padding-right: var(--mr-space-4);
}
/* ── Full-bleed variant — content stretches full width ───── */
.mr-layout-stacked-full > main,
.mr-layout-stacked-full > .mr-layout-stacked-main {
width: 100%;
}
/* ────────────────────────────────────────────────────── */
/* File: src/layouts/multi-column-layout.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Layouts: Multi-Column Layout
Equal-width columns with responsive breakpoints
============================================================ */
.mr-layout-multi-col {
display: grid;
gap: var(--mr-space-6);
}
.mr-layout-col-2 {
grid-template-columns: repeat(2, 1fr);
}
.mr-layout-col-3 {
grid-template-columns: repeat(3, 1fr);
}
.mr-layout-col-4 {
grid-template-columns: repeat(4, 1fr);
}
/* ── Asymmetric: 2/3 + 1/3 ──────────────────────────────── */
.mr-layout-col-2-1 {
grid-template-columns: 2fr 1fr;
}
/* ── Asymmetric: 1/3 + 2/3 ──────────────────────────────── */
.mr-layout-col-1-2 {
grid-template-columns: 1fr 2fr;
}
/* ── Asymmetric: 3/4 + 1/4 ──────────────────────────────── */
.mr-layout-col-3-1 {
grid-template-columns: 3fr 1fr;
}
/* ── Mobile: Stack to single column ──────────────────────── */
@media (max-width: 47.999em) {
.mr-layout-col-2,
.mr-layout-col-3,
.mr-layout-col-4,
.mr-layout-col-2-1,
.mr-layout-col-1-2,
.mr-layout-col-3-1 {
grid-template-columns: 1fr;
}
}
/* ── Tablet: 2-column max ────────────────────────────────── */
@media (min-width: 48em) and (max-width: 63.999em) {
.mr-layout-col-3,
.mr-layout-col-4 {
grid-template-columns: repeat(2, 1fr);
}
}
/* ────────────────────────────────────────────────────── */
/* File: src/layouts/media-objects.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Layouts: Media Objects
Classic media object: image + text body side by side
============================================================ */
.mr-media {
display: flex;
align-items: flex-start;
gap: var(--mr-space-4);
}
.mr-media-center {
align-items: center;
}
.mr-media-img {
flex-shrink: 0;
}
.mr-media-img img {
display: block;
border-radius: var(--mr-radius-md);
}
.mr-media-img-sm img {
width: 40px;
height: 40px;
}
.mr-media-img-md img {
width: 64px;
height: 64px;
}
.mr-media-img-lg img {
width: 96px;
height: 96px;
}
.mr-media-img-rounded img {
border-radius: var(--mr-radius-full);
}
.mr-media-body {
flex: 1;
min-width: 0;
}
.mr-media-body-title {
font-weight: var(--mr-font-semibold);
color: var(--mr-text-primary);
margin-bottom: var(--mr-space-1);
}
.mr-media-body-text {
font-size: var(--mr-text-sm);
color: var(--mr-text-secondary);
}
/* ── Reversed (image on right) ───────────────────────────── */
.mr-media-reverse {
flex-direction: row-reverse;
}
/* ── Stacked on mobile ───────────────────────────────────── */
@media (max-width: 47.999em) {
.mr-media-responsive {
flex-direction: column;
}
}
/* ────────────────────────────────────────────────────── */
/* File: src/layouts/list-containers.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Layouts: List Containers
Structured list wrappers for stacked content
============================================================ */
.mr-list-container {
background-color: var(--mr-surface-card);
border-radius: var(--mr-radius-lg);
border: 1px solid var(--mr-border-default);
overflow: hidden;
}
.mr-list-container-flush {
border-radius: 0;
border-left: none;
border-right: none;
}
.mr-list-container-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--mr-space-4) var(--mr-space-5);
border-bottom: 1px solid var(--mr-border-default);
font-weight: var(--mr-font-semibold);
color: var(--mr-text-primary);
}
.mr-list-container-item {
display: flex;
align-items: center;
gap: var(--mr-space-3);
padding: var(--mr-space-3) var(--mr-space-5);
transition: var(--mr-transition-color);
}
.mr-list-container-item:hover {
background-color: var(--mr-table-hover);
}
.mr-list-container-divided .mr-list-container-item + .mr-list-container-item {
border-top: 1px solid var(--mr-border-subtle);
}
.mr-list-container-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--mr-space-3) var(--mr-space-5);
border-top: 1px solid var(--mr-border-default);
font-size: var(--mr-text-sm);
color: var(--mr-text-muted);
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/buttons.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Buttons
Full button system with variants, sizes, states
============================================================ */
/* ── Base Button ─────────────────────────────────────────── */
.mr-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--mr-space-2);
padding: var(--mr-space-2-5) var(--mr-space-5);
font-family: var(--mr-font-primary);
font-size: var(--mr-text-sm);
font-weight: var(--mr-font-semibold);
line-height: 1.5;
letter-spacing: var(--mr-tracking-wide);
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
border: 2px solid transparent;
border-radius: var(--mr-radius-md);
cursor: pointer;
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 100ms ease-out;
user-select: none;
position: relative;
overflow: hidden;
}
/* Button click animation */
.mr-btn:active {
transform: scale(0.97);
transition: transform 50ms ease-in;
}
/* Ripple effect on click */
.mr-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
opacity: 0;
pointer-events: none;
}
.mr-btn:active::after {
width: 200px;
height: 200px;
opacity: 1;
transition: 0s;
}
.mr-btn:focus-visible {
outline: none;
box-shadow: var(--mr-focus-ring);
}
.mr-btn:disabled,
.mr-btn.mr-btn-disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* ── Primary ─────────────────────────────────────────────── */
.mr-btn-primary {
background-color: var(--mr-color-primary);
color: var(--mr-text-on-primary);
border-color: var(--mr-color-primary);
}
.mr-btn-primary:hover {
background-color: var(--mr-color-primary-hover);
border-color: var(--mr-color-primary-hover);
color: var(--mr-text-on-primary);
}
.mr-btn-primary:active {
background-color: var(--mr-color-primary-active);
border-color: var(--mr-color-primary-active);
color: var(--mr-text-on-primary);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* ── Secondary (Outlined) ────────────────────────────────── */
.mr-btn-secondary {
background-color: transparent;
color: var(--mr-color-primary);
border-color: var(--mr-color-primary);
}
.mr-btn-secondary:hover {
background-color: var(--mr-color-primary);
color: var(--mr-text-on-primary);
}
.mr-btn-secondary:active {
background-color: var(--mr-color-primary-hover);
border-color: var(--mr-color-primary-hover);
color: var(--mr-text-on-primary);
}
/* ── Accent (Gold) ───────────────────────────────────────── */
.mr-btn-accent {
background-color: var(--mr-color-accent);
color: var(--mr-text-on-accent);
border-color: var(--mr-color-accent);
}
.mr-btn-accent:hover {
background-color: var(--mr-color-accent-hover);
border-color: var(--mr-color-accent-hover);
}
/* ── Dark (Navy) ─────────────────────────────────────────── */
.mr-btn-dark {
background-color: var(--mr-color-navy-dark);
color: var(--mr-text-on-dark);
border-color: var(--mr-color-navy-dark);
}
.mr-btn-dark:hover {
background-color: var(--mr-color-navy);
border-color: var(--mr-color-navy);
}
/* ── Ghost / Subtle ──────────────────────────────────────── */
.mr-btn-ghost {
background-color: transparent;
color: var(--mr-text-primary);
border-color: transparent;
}
.mr-btn-ghost:hover {
background-color: var(--mr-surface-sunken);
}
/* Ghost button with white text (for dark backgrounds) */
.mr-btn-ghost.mr-btn-ghost-light,
.mr-btn-ghost-light {
color: var(--mr-color-white);
border-color: rgba(255, 255, 255, 0.3);
}
.mr-btn-ghost-light:hover {
background-color: var(--mr-color-white);
border-color: var(--mr-color-white);
color: var(--mr-color-primary);
}
/* ── Danger ──────────────────────────────────────────────── */
.mr-btn-danger {
background-color: var(--mr-color-danger);
color: var(--mr-color-white);
border-color: var(--mr-color-danger);
}
.mr-btn-danger:hover {
background-color: var(--mr-color-danger-dark);
border-color: var(--mr-color-danger-dark);
}
.mr-btn-danger:focus-visible {
box-shadow: var(--mr-focus-ring-danger);
}
/* ── Danger Outlined ─────────────────────────────────────── */
.mr-btn-danger-outline {
background-color: transparent;
color: var(--mr-color-danger);
border-color: var(--mr-color-danger);
}
.mr-btn-danger-outline:hover {
background-color: var(--mr-color-danger);
color: var(--mr-color-white);
}
/* ── Success ─────────────────────────────────────────────── */
.mr-btn-success {
background-color: var(--mr-color-success);
color: var(--mr-color-white);
border-color: var(--mr-color-success);
}
.mr-btn-success:hover {
background-color: var(--mr-color-success-dark);
border-color: var(--mr-color-success-dark);
}
/* ── Warning ─────────────────────────────────────────────── */
.mr-btn-warning {
background-color: var(--mr-color-warning);
color: var(--mr-color-white);
border-color: var(--mr-color-warning);
}
.mr-btn-warning:hover {
background-color: var(--mr-color-warning-dark);
border-color: var(--mr-color-warning-dark);
}
/* ── Link-Style Button ───────────────────────────────────── */
.mr-btn-link {
background: none;
border: none;
color: var(--mr-text-link);
text-transform: none;
letter-spacing: normal;
padding: var(--mr-space-1) var(--mr-space-2);
font-weight: var(--mr-font-medium);
}
.mr-btn-link:hover {
color: var(--mr-text-link-hover);
text-decoration: underline;
}
/* ── Sizes ───────────────────────────────────────────────── */
.mr-btn-xs {
padding: var(--mr-space-1) var(--mr-space-2-5);
font-size: var(--mr-text-xs);
border-radius: var(--mr-radius-sm);
}
.mr-btn-sm {
padding: var(--mr-space-1-5) var(--mr-space-3);
font-size: var(--mr-text-xs);
}
.mr-btn-lg {
padding: var(--mr-space-3) var(--mr-space-6);
font-size: var(--mr-text-base);
}
.mr-btn-xl {
padding: var(--mr-space-3-5) var(--mr-space-8);
font-size: var(--mr-text-lg);
border-radius: var(--mr-radius-lg);
}
/* ── Block (full width) ──────────────────────────────────── */
.mr-btn-block {
display: flex;
width: 100%;
}
/* ── Icon Button ─────────────────────────────────────────── */
.mr-btn-icon {
padding: var(--mr-space-2-5);
line-height: 1;
}
.mr-btn-icon.mr-btn-sm {
padding: var(--mr-space-1-5);
}
.mr-btn-icon.mr-btn-lg {
padding: var(--mr-space-3);
}
/* ── Pill Shape ──────────────────────────────────────────── */
.mr-btn-pill {
border-radius: var(--mr-radius-pill);
}
/* ── Loading State ───────────────────────────────────────── */
.mr-btn-loading {
color: transparent !important;
pointer-events: none;
}
.mr-btn-loading::before {
content: "";
position: absolute;
width: 16px;
height: 16px;
top: 50%;
left: 50%;
margin-left: -8px;
margin-top: -8px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: var(--mr-radius-full);
animation: mr-spin 0.6s linear infinite;
color: var(--mr-color-white);
z-index: 10;
}
.mr-btn-loading.mr-btn-secondary::before,
.mr-btn-loading.mr-btn-ghost::before,
.mr-btn-loading.mr-btn-link::before {
color: var(--mr-color-primary);
}
@keyframes mr-spin {
to { transform: rotate(360deg); }
}
/* ── Mobile Responsive ───────────────────────────────────── */
@media (max-width: 47.999em) {
/* Touch-friendly tap targets (min 44x44 iOS, 48x48 Android) */
.mr-btn {
min-height: 44px;
padding: var(--mr-space-3) var(--mr-space-4);
}
.mr-btn-sm {
min-height: 40px;
}
.mr-btn-lg,
.mr-btn-xl {
padding: var(--mr-space-4) var(--mr-space-6);
}
/* Stack button groups vertically */
.mr-btn-group {
flex-direction: column;
width: 100%;
}
.mr-btn-group .mr-btn {
width: 100%;
border-radius: var(--mr-radius-md) !important;
}
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/button-groups.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Button Groups
Grouped button containers (horizontal & vertical)
============================================================ */
.mr-btn-group {
display: inline-flex;
border-radius: var(--mr-radius-md);
overflow: hidden;
}
.mr-btn-group > .mr-btn {
border-radius: 0;
border-right-width: 0;
}
.mr-btn-group > .mr-btn:first-child {
border-top-left-radius: var(--mr-radius-md);
border-bottom-left-radius: var(--mr-radius-md);
}
.mr-btn-group > .mr-btn:last-child {
border-top-right-radius: var(--mr-radius-md);
border-bottom-right-radius: var(--mr-radius-md);
border-right-width: 2px;
}
/* ── Vertical ────────────────────────────────────────────── */
.mr-btn-group-vertical {
display: inline-flex;
flex-direction: column;
border-radius: var(--mr-radius-md);
overflow: hidden;
}
.mr-btn-group-vertical > .mr-btn {
border-radius: 0;
border-bottom-width: 0;
}
.mr-btn-group-vertical > .mr-btn:first-child {
border-top-left-radius: var(--mr-radius-md);
border-top-right-radius: var(--mr-radius-md);
}
.mr-btn-group-vertical > .mr-btn:last-child {
border-bottom-left-radius: var(--mr-radius-md);
border-bottom-right-radius: var(--mr-radius-md);
border-bottom-width: 2px;
}
/* ── Full Width Group ────────────────────────────────────── */
.mr-btn-group-full {
display: flex;
width: 100%;
}
.mr-btn-group-full > .mr-btn {
flex: 1;
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/cards.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Cards
Container components for grouped content
============================================================ */
.mr-card {
background-color: var(--mr-surface-card);
border: 1px solid var(--mr-border-default);
border-radius: var(--mr-radius-lg);
overflow: hidden;
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}
/* ── Card Header ─────────────────────────────────────────── */
.mr-card-header {
padding: var(--mr-space-4) var(--mr-space-5);
border-bottom: 1px solid var(--mr-border-subtle);
}
.mr-card-header-title {
font-size: var(--mr-text-lg);
font-weight: var(--mr-font-semibold);
color: var(--mr-text-primary);
margin: 0;
}
.mr-card-header-subtitle {
font-size: var(--mr-text-sm);
color: var(--mr-text-muted);
margin-top: var(--mr-space-1);
}
.mr-card-header-actions {
margin-left: auto;
}
/* ── Card Body ───────────────────────────────────────────── */
.mr-card-body {
padding: var(--mr-space-5);
}
.mr-card-body-compact {
padding: var(--mr-space-3);
}
.mr-card-body-spacious {
padding: var(--mr-space-6);
}
/* ── Card Footer ─────────────────────────────────────────── */
.mr-card-footer {
padding: var(--mr-space-4) var(--mr-space-5);
border-top: 1px solid var(--mr-border-subtle);
background-color: var(--mr-surface-sunken);
}
.mr-card-footer-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--mr-space-2);
}
/* ── Card Variants ───────────────────────────────────────── */
.mr-card-elevated {
box-shadow: var(--mr-shadow-lg), 0 0 0 1px rgba(0, 0, 0, 0.05);
border: none;
}
.mr-card-outlined {
border: 1px solid var(--mr-border-strong);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.mr-card-flush {
border-left: none;
border-right: none;
border-radius: 0;
}
/* ── Hover Effect ────────────────────────────────────────── */
.mr-card-hover {
transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mr-card-hover:hover {
box-shadow: var(--mr-shadow-xl);
transform: translateY(-4px);
border-color: var(--mr-color-primary-light);
}
/* ── Clickable Card ──────────────────────────────────────── */
.mr-card-clickable {
cursor: pointer;
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mr-card-clickable:hover {
border-color: var(--mr-color-primary);
box-shadow: var(--mr-shadow-xl);
transform: translateY(-2px);
}
.mr-card-clickable:active {
transform: translateY(0px) scale(0.99);
box-shadow: var(--mr-shadow-md);
transition: all 100ms ease-in;
}
/* ── Card Accent Border ──────────────────────────────────── */
.mr-card-accent-top {
border-top: 4px solid var(--mr-color-accent);
}
.mr-card-accent-left {
border-left: 4px solid var(--mr-color-accent);
}
.mr-card-primary-top {
border-top: 4px solid var(--mr-color-primary);
}
.mr-card-primary-left {
border-left: 4px solid var(--mr-color-primary);
}
/* ── Card Image ──────────────────────────────────────────── */
.mr-card-img {
width: 100%;
display: block;
}
.mr-card-img-top {
border-top-left-radius: var(--mr-radius-lg);
border-top-right-radius: var(--mr-radius-lg);
}
/* ── Card Meta (small info text) ─────────────────────────── */
.mr-card-meta {
font-size: var(--mr-text-xs);
color: var(--mr-text-muted);
margin-bottom: var(--mr-space-2);
}
/* ── Card Grid Layout ────────────────────────────────────── */
.mr-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--mr-space-5);
}
/* ── Mobile Responsive ───────────────────────────────────── */
@media (max-width: 47.999em) {
.mr-card-grid {
grid-template-columns: 1fr;
gap: var(--mr-space-4);
}
.mr-card-body {
padding: var(--mr-space-4);
}
.mr-card-header,
.mr-card-footer {
padding: var(--mr-space-4) var(--mr-space-4);
}
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/badges.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Badges
Small count and status indicators
============================================================ */
.mr-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--mr-space-0-5) var(--mr-space-2);
font-size: var(--mr-text-xs);
font-weight: var(--mr-font-semibold);
line-height: 1;
border-radius: var(--mr-radius-pill);
white-space: nowrap;
vertical-align: middle;
transition: transform 150ms ease, box-shadow 150ms ease;
}
/* ── Badge Variants ──────────────────────────────────────── */
.mr-badge-default {
background-color: var(--mr-badge-bg);
color: var(--mr-badge-text);
}
.mr-badge-primary {
background-color: var(--mr-color-primary);
color: var(--mr-color-white);
}
.mr-badge-accent {
background-color: var(--mr-color-accent);
color: var(--mr-text-on-accent);
}
.mr-badge-success {
background-color: var(--mr-color-success);
color: var(--mr-color-white);
}
.mr-badge-warning {
background-color: var(--mr-color-warning);
color: var(--mr-color-white);
}
.mr-badge-danger {
background-color: var(--mr-color-danger);
color: var(--mr-color-white);
}
.mr-badge-info {
background-color: var(--mr-color-info);
color: var(--mr-color-white);
}
.mr-badge-dark {
background-color: var(--mr-color-navy-dark);
color: var(--mr-text-on-dark);
}
/* ── Outlined Badges ─────────────────────────────────────── */
.mr-badge-outline {
background-color: transparent;
border: 1px solid var(--mr-border-strong);
color: var(--mr-text-secondary);
}
.mr-badge-primary-outline {
background-color: transparent;
border: 1px solid var(--mr-color-primary);
color: var(--mr-color-primary);
}
.mr-badge-accent-outline {
background-color: transparent;
border: 1px solid var(--mr-color-accent);
color: var(--mr-color-accent);
}
/* ── Badge Sizes ─────────────────────────────────────────── */
.mr-badge-xs {
padding: 0 var(--mr-space-1-5);
font-size: 0.625rem;
}
.mr-badge-sm {
padding: var(--mr-space-0-5) var(--mr-space-1-5);
font-size: var(--mr-text-2xs);
}
.mr-badge-lg {
padding: var(--mr-space-1) var(--mr-space-3);
font-size: var(--mr-text-sm);
}
/* ── Badge Dot (no text) ─────────────────────────────────── */
.mr-badge-dot {
padding: 0;
width: 8px;
height: 8px;
border-radius: var(--mr-radius-full);
}
.mr-badge-dot-lg {
width: 12px;
height: 12px;
}
/* ── Badge with Icon ─────────────────────────────────────── */
.mr-badge-icon {
display: inline-flex;
align-items: center;
gap: var(--mr-space-1);
}
/* ── Positioned Badge (overlay) ──────────────────────────── */
.mr-badge-container {
position: relative;
display: inline-block;
}
.mr-badge-positioned {
position: absolute;
top: -6px;
right: -6px;
min-width: 20px;
height: 20px;
padding: 2px 6px;
border: 2px solid var(--mr-surface-card);
}
.mr-badge-positioned-top-left {
top: -6px;
right: auto;
left: -6px;
}
.mr-badge-positioned-bottom-right {
top: auto;
bottom: -6px;
right: -6px;
}
.mr-badge-positioned-bottom-left {
top: auto;
bottom: -6px;
right: auto;
left: -6px;
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/avatars.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Avatars
User profile images and placeholder avatars
============================================================ */
.mr-avatar {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--mr-radius-full);
background-color: var(--mr-color-gray-300);
color: var(--mr-text-inverse);
font-weight: var(--mr-font-semibold);
font-size: var(--mr-text-sm);
overflow: hidden;
flex-shrink: 0;
user-select: none;
transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms ease;
cursor: pointer;
}
.mr-avatar:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.mr-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ── Avatar Sizes ────────────────────────────────────────── */
.mr-avatar-xs {
width: 24px;
height: 24px;
font-size: var(--mr-text-2xs);
}
.mr-avatar-sm {
width: 32px;
height: 32px;
font-size: var(--mr-text-xs);
}
.mr-avatar-md {
width: 40px;
height: 40px;
font-size: var(--mr-text-sm);
}
.mr-avatar-lg {
width: 56px;
height: 56px;
font-size: var(--mr-text-lg);
}
.mr-avatar-xl {
width: 80px;
height: 80px;
font-size: var(--mr-text-2xl);
}
.mr-avatar-2xl {
width: 112px;
height: 112px;
font-size: var(--mr-text-4xl);
}
/* ── Color Variants ──────────────────────────────────────── */
.mr-avatar-primary {
background-color: var(--mr-color-primary);
}
.mr-avatar-accent {
background-color: var(--mr-color-accent);
}
.mr-avatar-success {
background-color: var(--mr-color-success);
}
.mr-avatar-danger {
background-color: var(--mr-color-danger);
}
.mr-avatar-navy {
background-color: var(--mr-color-navy-dark);
}
/* ── Square / Rounded Variants ───────────────────────────── */
.mr-avatar-square {
border-radius: var(--mr-radius-md);
}
.mr-avatar-rounded {
border-radius: var(--mr-radius-lg);
}
/* ── Avatar with Border ──────────────────────────────────── */
.mr-avatar-bordered {
border: 2px solid var(--mr-surface-card);
box-shadow: var(--mr-shadow-sm);
}
/* ── Avatar Status Indicator ─────────────────────────────── */
.mr-avatar-status {
position: absolute;
bottom: 0;
right: 0;
width: 12px;
height: 12px;
border: 2px solid var(--mr-surface-card);
border-radius: var(--mr-radius-full);
background-color: var(--mr-color-gray-400);
}
.mr-avatar-status-online {
background-color: var(--mr-color-success);
}
.mr-avatar-status-away {
background-color: var(--mr-color-warning);
}
.mr-avatar-status-busy {
background-color: var(--mr-color-danger);
}
.mr-avatar-status-offline {
background-color: var(--mr-color-gray-500);
}
/* ── Avatar Group ────────────────────────────────────────── */
.mr-avatar-group {
display: inline-flex;
align-items: center;
flex-direction: row-reverse;
}
.mr-avatar-group .mr-avatar {
margin-right: -12px;
border: 2px solid var(--mr-surface-card);
transition: var(--mr-transition-transform);
}
.mr-avatar-group .mr-avatar:hover {
transform: translateY(-2px);
z-index: 10;
}
.mr-avatar-group .mr-avatar:first-child {
margin-right: 0;
}
/* ── Avatar Group Counter ("+3") ─────────────────────────── */
.mr-avatar-group-counter {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin-right: -12px;
border-radius: var(--mr-radius-full);
border: 2px solid var(--mr-surface-card);
background-color: var(--mr-color-gray-200);
color: var(--mr-text-secondary);
font-size: var(--mr-text-sm);
font-weight: var(--mr-font-semibold);
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/logos.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Logos & Branding
Logo and icon components with responsive sizing
============================================================ */
/* ── Full Logos ──────────────────────────────────────────── */
.mr-logo {
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 200px;
height: 60px;
transition: all 0.2s ease;
}
.mr-logo-full {
background-image: url('../../img/mr-full-logo.png');
}
.mr-logo-full-white {
background-image: url('../../img/mr-full-logo-white.png');
}
/* ── Logo Icons ──────────────────────────────────────────── */
.mr-logo-icon {
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 40px;
height: 40px;
transition: all 0.2s ease;
}
.mr-logo-icon-color {
background-image: url('../../img/mr-icon.png');
}
.mr-logo-icon-white {
background-image: url('../../img/mr-icon-white.png');
}
/* ── Size Variants ───────────────────────────────────────── */
.mr-logo-sm {
width: 150px;
height: 45px;
}
.mr-logo-md {
width: 200px;
height: 60px;
}
.mr-logo-lg {
width: 300px;
height: 90px;
}
.mr-logo-xl {
width: 400px;
height: 120px;
}
/* ── Icon Size Variants ──────────────────────────────────── */
.mr-logo-icon-sm {
width: 24px;
height: 24px;
}
.mr-logo-icon-md {
width: 40px;
height: 40px;
}
.mr-logo-icon-lg {
width: 56px;
height: 56px;
}
.mr-logo-icon-xl {
width: 72px;
height: 72px;
}
/* ── Theme-Aware Logo (Auto-switches) ────────────────────── */
.mr-logo-auto {
background-image: url('../../img/mr-full-logo.png');
}
[data-theme="dark"] .mr-logo-auto {
background-image: url('../../img/mr-full-logo-white.png');
}
.mr-logo-icon-auto {
background-image: url('../../img/mr-icon.png');
}
[data-theme="dark"] .mr-logo-icon-auto {
background-image: url('../../img/mr-icon-white.png');
}
/* ── Responsive Logos ────────────────────────────────────── */
.mr-logo-responsive {
width: 100%;
max-width: 300px;
height: auto;
aspect-ratio: 10 / 3;
}
.mr-logo-icon-responsive {
width: 100%;
max-width: 56px;
height: auto;
aspect-ratio: 1;
}
/* ── IMG Tag Support ─────────────────────────────────────── */
img.mr-logo,
img.mr-logo-icon {
background: none;
object-fit: contain;
}
img.mr-logo-full,
img.mr-logo-full-white {
background: none;
}
img.mr-logo-icon-color,
img.mr-logo-icon-white {
background: none;
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/tables.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Tables
Structured data tables with variants
============================================================ */
.mr-table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
font-size: var(--mr-text-sm);
color: var(--mr-text-primary);
}
.mr-table thead {
background-color: var(--mr-surface-sunken);
}
.mr-table th {
padding: var(--mr-space-3) var(--mr-space-4);
font-weight: var(--mr-font-semibold);
text-align: left;
color: var(--mr-text-secondary);
border-bottom: 2px solid var(--mr-border-default);
white-space: nowrap;
}
.mr-table td {
padding: var(--mr-space-3) var(--mr-space-4);
border-bottom: 1px solid var(--mr-border-subtle);
}
.mr-table tbody tr:last-child td {
border-bottom: none;
}
/* ── Striped Rows ────────────────────────────────────────── */
.mr-table-striped tbody tr:nth-child(even) {
background-color: var(--mr-table-stripe);
}
.mr-table tbody tr {
transition: background-color 150ms ease, box-shadow 150ms ease;
}
/* ── Hover Effect ────────────────────────────────────────── */
.mr-table-hover tbody tr:hover {
background-color: var(--mr-table-hover);
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
/* ── Bordered Table ──────────────────────────────────────── */
.mr-table-bordered {
border: 1px solid var(--mr-border-default);
}
.mr-table-bordered th,
.mr-table-bordered td {
border: 1px solid var(--mr-border-subtle);
}
/* ── Compact / Dense ─────────────────────────────────────── */
.mr-table-compact th,
.mr-table-compact td {
padding: var(--mr-space-2) var(--mr-space-3);
}
/* ── Spacious ────────────────────────────────────────────── */
.mr-table-spacious th,
.mr-table-spacious td {
padding: var(--mr-space-4) var(--mr-space-5);
}
/* ── Responsive Table Wrapper ────────────────────────────── */
.mr-table-responsive {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.mr-table-responsive .mr-table {
min-width: 600px;
}
/* ── Table Cell Alignment ────────────────────────────────── */
.mr-table th.mr-text-center,
.mr-table td.mr-text-center {
text-align: center;
}
.mr-table th.mr-text-right,
.mr-table td.mr-text-right {
text-align: right;
}
/* ── Sortable Table Headers ──────────────────────────────── */
.mr-table-sortable th {
cursor: pointer;
user-select: none;
position: relative;
padding-right: var(--mr-space-8);
}
.mr-table-sortable th:hover {
background-color: var(--mr-table-hover);
}
.mr-table-sortable th::after {
content: "↕";
position: absolute;
right: var(--mr-space-3);
color: var(--mr-text-muted);
font-size: var(--mr-text-xs);
}
.mr-table-sortable th.mr-sort-asc::after {
content: "↑";
color: var(--mr-color-primary);
}
.mr-table-sortable th.mr-sort-desc::after {
content: "↓";
color: var(--mr-color-primary);
}
/* ── Table Caption ───────────────────────────────────────── */
.mr-table caption {
padding: var(--mr-space-3);
caption-side: top;
font-weight: var(--mr-font-semibold);
color: var(--mr-text-primary);
text-align: left;
}
/* ── Table with Card Container ───────────────────────────── */
.mr-table-container {
background-color: var(--mr-surface-card);
border: 1px solid var(--mr-border-default);
border-radius: var(--mr-radius-lg);
overflow: hidden;
}
.mr-table-container .mr-table {
margin-bottom: 0;
}
.mr-table-container .mr-table th,
.mr-table-container .mr-table td {
border-left: none;
border-right: none;
}
.mr-table-container .mr-table thead th {
border-top: none;
}
/* ── Mobile Responsive ───────────────────────────────────── */
@media (max-width: 47.999em) {
.mr-table {
font-size: var(--mr-text-xs);
}
.mr-table th,
.mr-table td {
padding: var(--mr-space-2) var(--mr-space-3);
}
.mr-table th {
font-size: var(--mr-text-xs);
}
/* Stack table on very small screens */
.mr-table-stack thead {
display: none;
}
.mr-table-stack tbody,
.mr-table-stack tr,
.mr-table-stack td {
display: block;
width: 100%;
}
.mr-table-stack tr {
margin-bottom: var(--mr-space-4);
border: 1px solid var(--mr-border-default);
border-radius: var(--mr-radius-md);
overflow: hidden;
}
.mr-table-stack td {
position: relative;
padding-left: 40%;
text-align: right;
border-bottom: 1px solid var(--mr-border-subtle);
}
.mr-table-stack td:last-child {
border-bottom: none;
}
.mr-table-stack td::before {
content: attr(data-label);
position: absolute;
left: var(--mr-space-3);
font-weight: var(--mr-font-semibold);
color: var(--mr-text-secondary);
text-align: left;
}
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/modals.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Modals
Dialog overlays for focused tasks
============================================================ */
.mr-modal {
position: fixed;
inset: 0;
z-index: var(--mr-z-modal);
display: none;
align-items: center;
justify-content: center;
overflow-y: auto;
padding: var(--mr-space-4);
}
.mr-modal-open {
display: flex;
}
/* ── Modal Overlay ───────────────────────────────────────── */
.mr-modal-overlay {
position: fixed;
inset: 0;
background-color: var(--mr-surface-overlay);
z-index: var(--mr-z-modal-overlay);
animation: mr-fade-in 200ms ease-out;
}
/* ── Modal Content ───────────────────────────────────────── */
.mr-modal-content {
position: relative;
z-index: calc(var(--mr-z-modal) + 1);
width: 100%;
max-width: 600px;
background-color: var(--mr-surface-card);
border-radius: var(--mr-radius-lg);
box-shadow: var(--mr-shadow-2xl);
overflow: hidden;
animation: mr-slide-up 250ms ease-out;
}
/* ── Modal Header ────────────────────────────────────────── */
.mr-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--mr-space-5) var(--mr-space-6);
border-bottom: 1px solid var(--mr-border-subtle);
}
.mr-modal-title {
font-size: var(--mr-text-xl);
font-weight: var(--mr-font-semibold);
color: var(--mr-text-primary);
margin: 0;
}
.mr-modal-close {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
color: var(--mr-text-muted);
background: none;
border: none;
border-radius: var(--mr-radius-md);
cursor: pointer;
transition: var(--mr-transition-color);
position: relative;
}
.mr-modal-close::before {
content: '';
width: 20px;
height: 20px;
background-color: currentColor;
mask-image: url('data:image/svg+xml;utf8,');
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
.mr-modal-close:hover {
background-color: var(--mr-surface-sunken);
color: var(--mr-text-primary);
}
/* ──Modal Body ───────────────────────────────────────────── */
.mr-modal-body {
padding: var(--mr-space-6);
max-height: 60vh;
overflow-y: auto;
}
/* ── Modal Footer ────────────────────────────────────────── */
.mr-modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--mr-space-3);
padding: var(--mr-space-5) var(--mr-space-6);
border-top: 1px solid var(--mr-border-subtle);
background-color: var(--mr-surface-raised);
}
/* ── Modal Sizes ─────────────────────────────────────────── */
.mr-modal-sm .mr-modal-content {
max-width: 400px;
}
.mr-modal-md .mr-modal-content {
max-width: 600px;
}
.mr-modal-lg .mr-modal-content {
max-width: 800px;
}
.mr-modal-xl .mr-modal-content {
max-width: 1000px;
}
.mr-modal-full .mr-modal-content {
max-width: 90vw;
max-height: 90vh;
}
.mr-modal-full .mr-modal-body {
max-height: calc(90vh - 200px);
}
/* ── Animations ──────────────────────────────────────────── */
@keyframes mr-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes mr-slide-up {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ── Body Scroll Lock (add to when modal open) ────── */
body.mr-modal-open {
overflow: hidden;
}
/* ── Mobile Responsive ───────────────────────────────────── */
@media (max-width: 47.999em) {
.mr-modal {
padding: var(--mr-space-2);
}
.mr-modal-content {
max-width: 100% !important;
margin: 0;
}
.mr-modal-header,
.mr-modal-footer {
padding: var(--mr-space-4);
}
.mr-modal-body {
padding: var(--mr-space-4);
max-height: 70vh;
}
/* Full screen modals on mobile */
.mr-modal-full .mr-modal-content {
max-width: 100vw;
max-height: 100vh;
border-radius: 0;
}
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/dropdowns.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Dropdowns
Click-triggered dropdown menus
============================================================ */
.mr-dropdown {
position: relative;
display: inline-block;
}
.mr-dropdown-trigger {
cursor: pointer;
}
/* ── Dropdown Menu ───────────────────────────────────────── */
.mr-dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: var(--mr-z-dropdown);
display: none;
min-width: 200px;
margin-top: var(--mr-space-1);
padding: var(--mr-space-2) 0;
background-color: var(--mr-surface-card);
border: 1px solid var(--mr-border-default);
border-radius: var(--mr-radius-md);
box-shadow: var(--mr-shadow-xl);
overflow: hidden;
}
.mr-dropdown-open .mr-dropdown-menu,
.mr-dropdown:focus-within .mr-dropdown-menu {
display: block;
}
/* ── Dropdown Menu Positioning ───────────────────────────── */
.mr-dropdown-menu-right {
left: auto;
right: 0;
}
.mr-dropdown-menu-center {
left: 50%;
transform: translateX(-50%);
}
.mr-dropdown-menu-top {
top: auto;
bottom: 100%;
margin-top: 0;
margin-bottom: var(--mr-space-1);
}
/* ── Dropdown Items ──────────────────────────────────────── */
.mr-dropdown-item {
display: flex;
align-items: center;
gap: var(--mr-space-2-5);
width: 100%;
padding: var(--mr-space-2) var(--mr-space-4);
font-size: var(--mr-text-sm);
color: var(--mr-text-primary);
text-decoration: none;
background: none;
border: none;
cursor: pointer;
transition: var(--mr-transition-color);
text-align: left;
}
.mr-dropdown-item:hover {
background-color: var(--mr-table-hover);
color: var(--mr-text-link);
}
.mr-dropdown-item:focus {
outline: none;
background-color: var(--mr-table-hover);
}
.mr-dropdown-item:active {
background-color: var(--mr-color-primary-light);
color: var(--mr-color-white);
}
.mr-dropdown-item-disabled,
.mr-dropdown-item:disabled {
color: var(--mr-text-muted);
cursor: not-allowed;
pointer-events: none;
opacity: 0.5;
}
/* ── Dropdown Item Variants ──────────────────────────────── */
.mr-dropdown-item-danger {
color: var(--mr-color-danger);
}
.mr-dropdown-item-danger:hover {
background-color: var(--mr-color-danger-light);
color: var(--mr-color-danger);
}
/* ── Dropdown Divider ────────────────────────────────────── */
.mr-dropdown-divider {
height: 1px;
margin: var(--mr-space-2) 0;
background-color: var(--mr-border-subtle);
border: none;
}
/* ── Dropdown Header ─────────────────────────────────────── */
.mr-dropdown-header {
padding: var(--mr-space-2) var(--mr-space-4);
font-size: var(--mr-text-xs);
font-weight: var(--mr-font-semibold);
color: var(--mr-text-muted);
text-transform: uppercase;
letter-spacing: var(--mr-tracking-wide);
}
/* ── Icon in Dropdown Item ───────────────────────────────── */
.mr-dropdown-item-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--mr-text-muted);
}
.mr-dropdown-item:hover .mr-dropdown-item-icon {
color: inherit;
}
/* ── Dropdown with Search ────────────────────────────────── */
.mr-dropdown-search {
padding: var(--mr-space-2) var(--mr-space-3);
border-bottom: 1px solid var(--mr-border-subtle);
}
.mr-dropdown-search .mr-input {
font-size: var(--mr-text-sm);
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/forms.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Forms
Form layouts, groups, labels, hints, errors
============================================================ */
/* ── Form Container ──────────────────────────────────────── */
.mr-form {
width: 100%;
}
/* ── Form Group ──────────────────────────────────────────── */
.mr-form-group {
margin-bottom: var(--mr-space-5);
}
/* ── Label ───────────────────────────────────────────────── */
.mr-form-label {
display: block;
font-size: var(--mr-text-sm);
font-weight: var(--mr-font-semibold);
color: var(--mr-text-primary);
margin-bottom: var(--mr-space-1-5);
}
.mr-form-label-required::after {
content: " *";
color: var(--mr-color-danger);
}
/* ── Hint Text ───────────────────────────────────────────── */
.mr-form-hint {
display: block;
font-size: var(--mr-text-xs);
color: var(--mr-text-muted);
margin-top: var(--mr-space-1);
}
/* ── Error Message ───────────────────────────────────────── */
.mr-form-error {
display: block;
font-size: var(--mr-text-xs);
color: var(--mr-color-danger);
margin-top: var(--mr-space-1);
}
/* ── Success Message ─────────────────────────────────────── */
.mr-form-success {
display: block;
font-size: var(--mr-text-xs);
color: var(--mr-color-success);
margin-top: var(--mr-space-1);
}
/* ── Text Input ──────────────────────────────────────────── */
.mr-input {
display: block;
width: 100%;
padding: var(--mr-space-2-5) var(--mr-space-3);
font-family: var(--mr-font-primary);
font-size: var(--mr-text-base);
font-weight: var(--mr-font-regular);
line-height: 1.5;
color: var(--mr-input-text);
background-color: var(--mr-input-bg);
border: 1px solid var(--mr-input-border);
border-radius: var(--mr-radius-md);
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms ease;
appearance: none;
}
.mr-input::placeholder {
color: var(--mr-input-placeholder);
transition: opacity 200ms ease;
}
.mr-input:hover {
border-color: var(--mr-color-primary);
}
.mr-input:focus {
outline: none;
border-color: var(--mr-border-focus);
box-shadow: var(--mr-focus-ring);
transform: translateY(-1px);
}
.mr-input:focus::placeholder {
opacity: 0.6;
}
.mr-input:disabled,
.mr-input[readonly] {
background-color: var(--mr-input-disabled-bg);
color: var(--mr-input-disabled-text);
cursor: not-allowed;
}
/* ── Input States ────────────────────────────────────────── */
.mr-input-error,
.mr-form-group.mr-has-error .mr-input {
border-color: var(--mr-color-danger);
}
.mr-input-error:focus,
.mr-form-group.mr-has-error .mr-input:focus {
box-shadow: var(--mr-focus-ring-danger);
}
.mr-input-success,
.mr-form-group.mr-has-success .mr-input {
border-color: var(--mr-color-success);
}
/* ── Input Sizes ─────────────────────────────────────────── */
.mr-input-sm {
padding: var(--mr-space-1-5) var(--mr-space-2-5);
font-size: var(--mr-text-sm);
}
.mr-input-lg {
padding: var(--mr-space-3) var(--mr-space-4);
font-size: var(--mr-text-lg);
}
/* ── Horizontal Form ─────────────────────────────────────── */
.mr-form-horizontal .mr-form-group {
display: flex;
align-items: flex-start;
gap: var(--mr-space-4);
}
.mr-form-horizontal .mr-form-label {
flex: 0 0 200px;
padding-top: var(--mr-space-2-5);
text-align: right;
margin-bottom: 0;
}
.mr-form-horizontal .mr-form-control-wrapper {
flex: 1;
}
@media (max-width: 47.999em) {
.mr-form-horizontal .mr-form-group {
flex-direction: column;
}
.mr-form-horizontal .mr-form-label {
text-align: left;
flex: none;
padding-top: 0;
}
/* Touch-friendly form inputs */
.mr-input,
.mr-select,
.mr-textarea {
min-height: 44px;
font-size: 16px; /* Prevents zoom on iOS */
}
/* Larger padding for easier tapping */
.mr-input,
.mr-select {
padding: var(--mr-space-3) var(--mr-space-4);
}
}
/* ── Inline Form ─────────────────────────────────────────── */
.mr-form-inline {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--mr-space-3);
}
.mr-form-inline .mr-form-group {
margin-bottom: 0;
}
/* ── Auth Form (Sign In / Register) ──────────────────────── */
.mr-form-auth {
width: 100%;
max-width: 420px;
margin: 0 auto;
padding: var(--mr-space-8);
background-color: var(--mr-surface-card);
border-radius: var(--mr-radius-lg);
box-shadow: var(--mr-shadow-xl);
border: 1px solid var(--mr-border-default);
}
.mr-form-auth-header {
text-align: center;
margin-bottom: var(--mr-space-8);
}
.mr-form-auth-header h2 {
font-size: var(--mr-text-3xl);
font-weight: var(--mr-font-bold);
color: var(--mr-text-primary);
margin-bottom: var(--mr-space-2);
}
.mr-form-auth-header p {
font-size: var(--mr-text-sm);
color: var(--mr-text-muted);
}
.mr-form-auth-divider {
display: flex;
align-items: center;
gap: var(--mr-space-3);
margin: var(--mr-space-6) 0;
color: var(--mr-text-muted);
font-size: var(--mr-text-sm);
}
.mr-form-auth-divider::before,
.mr-form-auth-divider::after {
content: "";
flex: 1;
height: 1px;
background-color: var(--mr-border-default);
}
.mr-form-auth-footer {
text-align: center;
margin-top: var(--mr-space-6);
font-size: var(--mr-text-sm);
color: var(--mr-text-muted);
}
.mr-form-auth-footer a {
color: var(--mr-text-link);
font-weight: var(--mr-font-semibold);
}
/* ── Form Row (multi-column inputs) ──────────────────────── */
.mr-form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--mr-space-4);
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/textareas.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Textareas
Multi-line text input fields
============================================================ */
.mr-textarea {
display: block;
width: 100%;
padding: var(--mr-space-2-5) var(--mr-space-3);
font-family: var(--mr-font-primary);
font-size: var(--mr-text-base);
font-weight: var(--mr-font-regular);
line-height: var(--mr-leading-normal);
color: var(--mr-input-text);
background-color: var(--mr-input-bg);
border: 1px solid var(--mr-input-border);
border-radius: var(--mr-radius-md);
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms ease;
resize: vertical;
min-height: 100px;
}
.mr-textarea::placeholder {
color: var(--mr-input-placeholder);
transition: opacity 200ms ease;
}
.mr-textarea:hover {
border-color: var(--mr-color-primary);
}
.mr-textarea:focus {
outline: none;
border-color: var(--mr-border-focus);
box-shadow: var(--mr-focus-ring);
transform: translateY(-1px);
}
.mr-textarea:focus::placeholder {
opacity: 0.6;
}
.mr-textarea:disabled,
.mr-textarea[readonly] {
background-color: var(--mr-input-disabled-bg);
color: var(--mr-input-disabled-text);
cursor: not-allowed;
resize: none;
}
/* ── Textarea Sizes ──────────────────────────────────────── */
.mr-textarea-sm {
padding: var(--mr-space-1-5) var(--mr-space-2-5);
font-size: var(--mr-text-sm);
min-height: 80px;
}
.mr-textarea-lg {
padding: var(--mr-space-3) var(--mr-space-4);
font-size: var(--mr-text-lg);
min-height: 140px;
}
/* ── Resize Options ──────────────────────────────────────── */
.mr-textarea-no-resize {
resize: none;
}
.mr-textarea-auto {
resize: none;
overflow: hidden;
}
/* ── Error State ─────────────────────────────────────────── */
.mr-textarea-error,
.mr-form-group.mr-has-error .mr-textarea {
border-color: var(--mr-color-danger);
}
.mr-textarea-error:focus,
.mr-form-group.mr-has-error .mr-textarea:focus {
box-shadow: var(--mr-focus-ring-danger);
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/select-menus.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Select Menus
Styled native select elements
============================================================ */
.mr-select {
display: block;
width: 100%;
padding: var(--mr-space-2-5) var(--mr-space-8) var(--mr-space-2-5) var(--mr-space-3);
font-family: var(--mr-font-primary);
font-size: var(--mr-text-base);
font-weight: var(--mr-font-medium);
line-height: 1.5;
color: var(--mr-input-text);
background-color: var(--mr-input-bg);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%230079ae' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
background-position: right var(--mr-space-2-5) center;
background-repeat: no-repeat;
background-size: 1.25em;
border: 1px solid var(--mr-input-border);
border-radius: var(--mr-radius-md);
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms ease;
appearance: none;
cursor: pointer;
}
/* Style the dropdown options (browser support is limited for native selects) */
.mr-select option {
font-weight: var(--mr-font-regular);
padding: var(--mr-space-2) var(--mr-space-3);
}
.mr-select option:checked {
font-weight: var(--mr-font-medium);
}
.mr-select:hover {
border-color: var(--mr-color-primary);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23015580' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
}
.mr-select:focus {
outline: none;
border-color: var(--mr-border-focus);
box-shadow: var(--mr-focus-ring);
transform: translateY(-1px);
}
.mr-select:disabled {
background-color: var(--mr-input-disabled-bg);
color: var(--mr-input-disabled-text);
cursor: not-allowed;
opacity: 0.6;
}
/* ── Select Sizes ────────────────────────────────────────── */
.mr-select-sm {
padding: var(--mr-space-1-5) var(--mr-space-8) var(--mr-space-1-5) var(--mr-space-2-5);
font-size: var(--mr-text-sm);
}
.mr-select-lg {
padding: var(--mr-space-3) var(--mr-space-10) var(--mr-space-3) var(--mr-space-4);
font-size: var(--mr-text-lg);
}
/* ── Select Error State ──────────────────────────────────── */
.mr-select-error,
.mr-form-group.mr-has-error .mr-select {
border-color: var(--mr-color-danger);
}
.mr-select-error:focus,
.mr-form-group.mr-has-error .mr-select:focus {
box-shadow: var(--mr-focus-ring-danger);
}
/* ── Multiple Select ─────────────────────────────────────── */
.mr-select[multiple] {
padding-top: var(--mr-space-2);
padding-bottom: var(--mr-space-2);
background-image: none;
}
.mr-select[multiple] option {
padding: var(--mr-space-1-5) var(--mr-space-2);
border-radius: var(--mr-radius-sm);
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/input-groups.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Input Groups
Prepend/append wrappers for inputs
============================================================ */
.mr-input-group {
display: flex;
align-items: stretch;
width: 100%;
}
.mr-input-group > .mr-input {
flex: 1;
min-width: 0;
border-radius: 0;
}
.mr-input-group > .mr-input:first-child {
border-top-left-radius: var(--mr-radius-md);
border-bottom-left-radius: var(--mr-radius-md);
}
.mr-input-group > .mr-input:last-child {
border-top-right-radius: var(--mr-radius-md);
border-bottom-right-radius: var(--mr-radius-md);
}
/* ── Prepend / Append ────────────────────────────────────── */
.mr-input-group-prepend,
.mr-input-group-append {
display: flex;
align-items: center;
padding: 0 var(--mr-space-3);
font-size: var(--mr-text-sm);
font-weight: var(--mr-font-medium);
color: var(--mr-text-secondary);
background-color: var(--mr-surface-sunken);
border: 1px solid var(--mr-input-border);
white-space: nowrap;
}
.mr-input-group-prepend {
border-right: none;
border-top-left-radius: var(--mr-radius-md);
border-bottom-left-radius: var(--mr-radius-md);
}
.mr-input-group-prepend + .mr-input {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.mr-input-group-append {
border-left: none;
border-top-right-radius: var(--mr-radius-md);
border-bottom-right-radius: var(--mr-radius-md);
}
.mr-input + .mr-input-group-append {
border-top-right-radius: var(--mr-radius-md);
border-bottom-right-radius: var(--mr-radius-md);
}
.mr-input-group > .mr-input:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
/* ── Input Group with Button ─────────────────────────────── */
.mr-input-group > .mr-btn {
border-radius: 0;
border: 1px solid var(--mr-input-border);
}
.mr-input-group > .mr-btn:last-child {
border-top-right-radius: var(--mr-radius-md);
border-bottom-right-radius: var(--mr-radius-md);
border-left: none;
}
.mr-input-group > .mr-btn:first-child {
border-top-left-radius: var(--mr-radius-md);
border-bottom-left-radius: var(--mr-radius-md);
border-right: none;
}
/* ── Input Group Icons ───────────────────────────────────── */
.mr-input-group-icon {
position: relative;
}
.mr-input-group-icon .mr-input {
padding-left: var(--mr-space-10);
}
.mr-input-group-icon .mr-input-icon {
position: absolute;
left: var(--mr-space-3);
top: 50%;
transform: translateY(-50%);
color: var(--mr-text-muted);
pointer-events: none;
display: flex;
align-items: center;
}
.mr-input-group-icon-right .mr-input {
padding-left: var(--mr-space-3);
padding-right: var(--mr-space-10);
}
.mr-input-group-icon-right .mr-input-icon {
left: auto;
right: var(--mr-space-3);
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/toggles.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Toggles
Toggle switch components (pill-shaped)
============================================================ */
.mr-toggle {
position: relative;
display: inline-flex;
align-items: center;
cursor: pointer;
user-select: none;
}
.mr-toggle input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.mr-toggle-switch {
position: relative;
width: 42px;
height: 24px;
background-color: var(--mr-color-gray-300);
border-radius: var(--mr-radius-pill);
transition: var(--mr-transition-all);
flex-shrink: 0;
}
.mr-toggle-switch::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
background-color: var(--mr-color-white);
border-radius: var(--mr-radius-full);
transition: var(--mr-transition-transform);
box-shadow: var(--mr-shadow-sm);
}
.mr-toggle input:checked ~ .mr-toggle-switch {
background-color: var(--mr-color-primary);
}
.mr-toggle input:checked ~ .mr-toggle-switch::after {
transform: translateX(18px);
}
.mr-toggle input:focus ~ .mr-toggle-switch {
box-shadow: var(--mr-focus-ring);
}
.mr-toggle input:disabled ~ .mr-toggle-switch {
background-color: var(--mr-input-disabled-bg);
cursor: not-allowed;
opacity: 0.5;
}
.mr-toggle input:disabled ~ .mr-toggle-switch::after {
background-color: var(--mr-color-gray-400);
}
.mr-toggle-label {
margin-left: var(--mr-space-2-5);
font-size: var(--mr-text-sm);
color: var(--mr-text-primary);
}
/* ── Toggle Label on Left ────────────────────────────────── */
.mr-toggle-label-left {
order: -1;
margin-left: 0;
margin-right: var(--mr-space-2-5);
}
/* ── Small Toggle ────────────────────────────────────────── */
.mr-toggle-sm .mr-toggle-switch {
width: 34px;
height: 20px;
}
.mr-toggle-sm .mr-toggle-switch::after {
width: 14px;
height: 14px;
}
.mr-toggle-sm input:checked ~ .mr-toggle-switch::after {
transform: translateX(14px);
}
/* ── Large Toggle ────────────────────────────────────────── */
.mr-toggle-lg .mr-toggle-switch {
width: 52px;
height: 30px;
}
.mr-toggle-lg .mr-toggle-switch::after {
width: 24px;
height: 24px;
}
.mr-toggle-lg input:checked ~ .mr-toggle-switch::after {
transform: translateX(22px);
}
/* ── Accent Color Variant ────────────────────────────────── */
.mr-toggle-accent input:checked ~ .mr-toggle-switch {
background-color: var(--mr-color-accent);
}
/* ── Success Color Variant ───────────────────────────────── */
.mr-toggle-success input:checked ~ .mr-toggle-switch {
background-color: var(--mr-color-success);
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/radio-groups.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Radio Groups & Checkboxes
Custom styled radio buttons and checkboxes
============================================================ */
/* ── Radio Button ────────────────────────────────────────── */
.mr-radio {
position: relative;
display: inline-flex;
align-items: center;
cursor: pointer;
user-select: none;
}
.mr-radio input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.mr-radio-indicator {
position: relative;
width: 18px;
height: 18px;
margin-right: var(--mr-space-2);
flex-shrink: 0;
border: 2px solid var(--mr-input-border);
border-radius: var(--mr-radius-full);
background-color: var(--mr-input-bg);
transition: var(--mr-transition-all);
}
.mr-radio input:checked ~ .mr-radio-indicator {
background-color: var(--mr-color-primary);
border-color: var(--mr-color-primary);
}
.mr-radio input:checked ~ .mr-radio-indicator::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
border-radius: var(--mr-radius-full);
background-color: var(--mr-color-white);
transform: translate(-50%, -50%);
}
.mr-radio input:focus ~ .mr-radio-indicator {
box-shadow: var(--mr-focus-ring);
}
.mr-radio input:disabled ~ .mr-radio-indicator {
background-color: var(--mr-input-disabled-bg);
border-color: var(--mr-input-border);
cursor: not-allowed;
opacity: 0.5;
}
.mr-radio-label {
font-size: var(--mr-text-sm);
color: var(--mr-text-primary);
}
/* ── Radio Group ─────────────────────────────────────────── */
.mr-radio-group {
display: flex;
flex-direction: column;
gap: var(--mr-space-3);
}
.mr-radio-group-horizontal {
flex-direction: row;
flex-wrap: wrap;
gap: var(--mr-space-5);
}
/* ── Checkbox ────────────────────────────────────────────── */
.mr-checkbox {
position: relative;
display: inline-flex;
align-items: center;
cursor: pointer;
user-select: none;
}
.mr-checkbox input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.mr-checkbox-indicator {
position: relative;
width: 18px;
height: 18px;
margin-right: var(--mr-space-2);
flex-shrink: 0;
border: 2px solid var(--mr-input-border);
border-radius: var(--mr-radius-sm);
background-color: var(--mr-input-bg);
transition: var(--mr-transition-all);
}
.mr-checkbox input:checked ~ .mr-checkbox-indicator {
background-color: var(--mr-color-primary);
border-color: var(--mr-color-primary);
}
.mr-checkbox input:checked ~ .mr-checkbox-indicator::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 4px;
height: 8px;
border: solid var(--mr-color-white);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.mr-checkbox input:indeterminate ~ .mr-checkbox-indicator {
background-color: var(--mr-color-primary);
border-color: var(--mr-color-primary);
}
.mr-checkbox input:indeterminate ~ .mr-checkbox-indicator::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 8px;
height: 2px;
background-color: var(--mr-color-white);
transform: translate(-50%, -50%);
}
.mr-checkbox input:focus ~ .mr-checkbox-indicator {
box-shadow: var(--mr-focus-ring);
}
.mr-checkbox input:disabled ~ .mr-checkbox-indicator {
background-color: var(--mr-input-disabled-bg);
border-color: var(--mr-input-border);
cursor: not-allowed;
opacity: 0.5;
}
.mr-checkbox-label {
font-size: var(--mr-text-sm);
color: var(--mr-text-primary);
}
/* ── Checkbox Group ──────────────────────────────────────── */
.mr-checkbox-group {
display: flex;
flex-direction: column;
gap: var(--mr-space-3);
}
.mr-checkbox-group-horizontal {
flex-direction: row;
flex-wrap: wrap;
gap: var(--mr-space-5);
}
/* ── Larger Size Variant ─────────────────────────────────── */
.mr-radio-lg .mr-radio-indicator,
.mr-checkbox-lg .mr-checkbox-indicator {
width: 22px;
height: 22px;
}
.mr-radio-lg .mr-radio-indicator::after {
width: 10px;
height: 10px;
}
.mr-checkbox-lg input:checked ~ .mr-checkbox-indicator::after {
top: 3px;
left: 6px;
width: 5px;
height: 10px;
}
.mr-radio-lg .mr-radio-label,
.mr-checkbox-lg .mr-checkbox-label {
font-size: var(--mr-text-base);
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/checkboxes.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Checkboxes
Styled checkbox inputs with labels
============================================================ */
.mr-checkbox {
position: relative;
display: inline-flex;
align-items: center;
cursor: pointer;
user-select: none;
}
.mr-checkbox input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* ── Checkbox Box ────────────────────────────────────────── */
.mr-checkbox-box {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
background-color: var(--mr-input-bg);
border: 2px solid var(--mr-input-border);
border-radius: var(--mr-radius-sm);
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
}
/* Checkmark icon (hidden by default) */
.mr-checkbox-box::after {
content: '';
position: absolute;
display: none;
left: 6px;
top: 2px;
width: 5px;
height: 10px;
border: solid var(--mr-color-white);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* ── Hover State ─────────────────────────────────────────── */
.mr-checkbox:hover .mr-checkbox-box {
border-color: var(--mr-color-primary);
}
/* ── Focus State ─────────────────────────────────────────── */
.mr-checkbox input:focus ~ .mr-checkbox-box {
box-shadow: var(--mr-focus-ring);
}
/* ── Checked State ───────────────────────────────────────── */
.mr-checkbox input:checked ~ .mr-checkbox-box {
background-color: var(--mr-color-primary);
border-color: var(--mr-color-primary);
}
.mr-checkbox input:checked ~ .mr-checkbox-box::after {
display: block;
}
/* ── Indeterminate State ─────────────────────────────────── */
.mr-checkbox input:indeterminate ~ .mr-checkbox-box {
background-color: var(--mr-color-primary);
border-color: var(--mr-color-primary);
}
.mr-checkbox input:indeterminate ~ .mr-checkbox-box::after {
display: block;
left: 3px;
top: 7px;
width: 10px;
height: 0;
border-width: 0 0 2px 0;
transform: rotate(0deg);
}
/* ── Disabled State ──────────────────────────────────────── */
.mr-checkbox input:disabled ~ .mr-checkbox-box {
background-color: var(--mr-input-disabled-bg);
border-color: var(--mr-input-border);
cursor: not-allowed;
opacity: 0.5;
}
.mr-checkbox input:disabled ~ .mr-checkbox-label {
color: var(--mr-input-disabled-text);
cursor: not-allowed;
}
/* ── Checkbox Label ──────────────────────────────────────── */
.mr-checkbox-label {
margin-left: var(--mr-space-2);
font-size: var(--mr-text-sm);
color: var(--mr-text-primary);
line-height: 1.5;
}
/* ── Checkbox Description ────────────────────────────────── */
.mr-checkbox-description {
display: block;
margin-left: calc(20px + var(--mr-space-2));
margin-top: var(--mr-space-1);
font-size: var(--mr-text-xs);
color: var(--mr-text-muted);
}
/* ── Checkbox Group ──────────────────────────────────────── */
.mr-checkbox-group {
display: flex;
flex-direction: column;
gap: var(--mr-space-3);
}
.mr-checkbox-group-label {
font-size: var(--mr-text-sm);
font-weight: var(--mr-font-semibold);
color: var(--mr-text-primary);
margin-bottom: var(--mr-space-2);
}
/* Horizontal layout */
.mr-checkbox-group-horizontal {
flex-direction: row;
flex-wrap: wrap;
gap: var(--mr-space-4);
}
/* ── Sizes ───────────────────────────────────────────────── */
.mr-checkbox-sm .mr-checkbox-box {
width: 16px;
height: 16px;
}
.mr-checkbox-sm .mr-checkbox-box::after {
left: 5px;
top: 1px;
width: 4px;
height: 8px;
}
.mr-checkbox-sm .mr-checkbox-label {
font-size: var(--mr-text-xs);
}
.mr-checkbox-lg .mr-checkbox-box {
width: 24px;
height: 24px;
}
.mr-checkbox-lg .mr-checkbox-box::after {
left: 8px;
top: 3px;
width: 6px;
height: 12px;
}
.mr-checkbox-lg .mr-checkbox-label {
font-size: var(--mr-text-base);
}
/* ── Error State ─────────────────────────────────────────── */
.mr-checkbox-error .mr-checkbox-box,
.mr-form-group.mr-has-error .mr-checkbox-box {
border-color: var(--mr-color-danger);
}
.mr-checkbox-error input:checked ~ .mr-checkbox-box,
.mr-form-group.mr-has-error .mr-checkbox input:checked ~ .mr-checkbox-box {
background-color: var(--mr-color-danger);
border-color: var(--mr-color-danger);
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/alerts.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Alerts
Dismissible alert messages with variants
============================================================ */
.mr-alert {
display: flex;
align-items: flex-start;
gap: var(--mr-space-3);
padding: var(--mr-space-4);
border-radius: var(--mr-radius-md);
border: 1px solid transparent;
font-size: var(--mr-text-sm);
line-height: 1.5;
position: relative;
margin-bottom: var(--mr-space-4);
transition: all 200ms ease;
}
/* ── Alert Icon ──────────────────────────────────────────── */
.mr-alert-icon {
flex-shrink: 0;
font-size: var(--mr-text-lg);
line-height: 1;
}
/* ── Alert Content ───────────────────────────────────────── */
.mr-alert-content {
flex: 1;
min-width: 0;
}
.mr-alert-title {
font-weight: var(--mr-font-semibold);
margin-bottom: var(--mr-space-1);
color: inherit;
}
.mr-alert-message {
color: inherit;
opacity: 0.95;
}
/* ── Alert Actions ───────────────────────────────────────── */
.mr-alert-actions {
display: flex;
gap: var(--mr-space-2);
margin-top: var(--mr-space-2);
}
/* ── Close Button ────────────────────────────────────────── */
.mr-alert-close {
position: absolute;
top: var(--mr-space-3);
right: var(--mr-space-3);
background: transparent;
border: none;
padding: var(--mr-space-1);
cursor: pointer;
color: inherit;
opacity: 0.7;
border-radius: var(--mr-radius-sm);
transition: all 150ms ease;
line-height: 1;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.mr-alert-close::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
background-color: currentColor;
mask-image: url('data:image/svg+xml;utf8,');
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
.mr-alert-close:hover {
opacity: 1;
background-color: rgba(0, 0, 0, 0.1);
}
/* ── Variants ────────────────────────────────────────────── */
.mr-alert-info {
background-color: rgba(0, 121, 174, 0.1);
border-color: rgba(0, 121, 174, 0.3);
color: #015580;
}
.mr-alert-success {
background-color: rgba(34, 197, 94, 0.1);
border-color: rgba(34, 197, 94, 0.3);
color: #15803d;
}
.mr-alert-warning {
background-color: rgba(251, 191, 36, 0.1);
border-color: rgba(251, 191, 36, 0.3);
color: #92400e;
}
.mr-alert-danger {
background-color: rgba(239, 68, 68, 0.1);
border-color: rgba(239, 68, 68, 0.3);
color: #991b1b;
}
/* Dark mode adjustments */
[data-theme="dark"] .mr-alert-info {
background-color: rgba(0, 121, 174, 0.2);
color: #60c5f0;
}
[data-theme="dark"] .mr-alert-success {
background-color: rgba(34, 197, 94, 0.2);
color: #86efac;
}
[data-theme="dark"] .mr-alert-warning {
background-color: rgba(251, 191, 36, 0.2);
color: #fcd34d;
}
[data-theme="dark"] .mr-alert-danger {
background-color: rgba(239, 68, 68, 0.2);
color: #fca5a5;
}
/* ── Outlined Variant ────────────────────────────────────── */
.mr-alert-outlined {
background-color: transparent;
border-width: 2px;
}
.mr-alert-outlined.mr-alert-info {
border-color: var(--mr-color-primary);
color: var(--mr-color-primary);
}
.mr-alert-outlined.mr-alert-success {
border-color: var(--mr-color-success);
color: var(--mr-color-success);
}
.mr-alert-outlined.mr-alert-warning {
border-color: var(--mr-color-warning);
color: var(--mr-color-warning-dark);
}
.mr-alert-outlined.mr-alert-danger {
border-color: var(--mr-color-danger);
color: var(--mr-color-danger);
}
/* ── Filled Variant ──────────────────────────────────────── */
.mr-alert-filled {
border: none;
}
.mr-alert-filled.mr-alert-info {
background-color: var(--mr-color-primary);
color: var(--mr-color-white);
}
.mr-alert-filled.mr-alert-success {
background-color: var(--mr-color-success);
color: var(--mr-color-white);
}
.mr-alert-filled.mr-alert-warning {
background-color: var(--mr-color-warning);
color: var(--mr-color-gray-950);
}
.mr-alert-filled.mr-alert-danger {
background-color: var(--mr-color-danger);
color: var(--mr-color-white);
}
/* ── Dismissible Animation ───────────────────────────────── */
.mr-alert-dismissing {
opacity: 0;
transform: translateY(-8px);
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
max-height: 0;
overflow: hidden;
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/notifications.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Notifications
Toast-style notification messages
============================================================ */
.mr-notification {
position: relative;
display: flex;
align-items: flex-start;
gap: var(--mr-space-3);
width: 100%;
max-width: 420px;
padding: var(--mr-space-4);
background-color: var(--mr-surface-card);
border: 1px solid var(--mr-border-default);
border-left: 4px solid var(--mr-color-primary);
border-radius: var(--mr-radius-md);
box-shadow: var(--mr-shadow-xl);
animation: mr-slide-in-right 300ms ease-out;
}
/* ── Notification Variants ───────────────────────────────── */
.mr-notification-success {
border-left-color: var(--mr-color-success);
}
.mr-notification-warning {
border-left-color: var(--mr-color-warning);
}
.mr-notification-danger {
border-left-color: var(--mr-color-danger);
}
.mr-notification-info {
border-left-color: var(--mr-color-info);
}
/* ── Notification Icon ───────────────────────────────────── */
.mr-notification-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
color: var(--mr-color-primary);
}
.mr-notification-success .mr-notification-icon {
color: var(--mr-color-success);
}
.mr-notification-warning .mr-notification-icon {
color: var(--mr-color-warning);
}
.mr-notification-danger .mr-notification-icon {
color: var(--mr-color-danger);
}
.mr-notification-info .mr-notification-icon {
color: var(--mr-color-info);
}
/* ── Notification Content ────────────────────────────────── */
.mr-notification-content {
flex: 1;
min-width: 0;
}
.mr-notification-title {
font-size: var(--mr-text-sm);
font-weight: var(--mr-font-semibold);
color: var(--mr-text-primary);
margin-bottom: var(--mr-space-1);
}
.mr-notification-message {
font-size: var(--mr-text-sm);
color: var(--mr-text-secondary);
line-height: 1.5;
}
/* ── Notification Close Button ───────────────────────────── */
.mr-notification-close {
flex-shrink: 0;
width: 20px;
height: 20px;
padding: 0;
color: var(--mr-text-muted);
background: none;
border: none;
cursor: pointer;
transition: var(--mr-transition-color);
}
.mr-notification-close:hover {
color: var(--mr-text-primary);
}
/* ── Notification Containers (positioning) ───────────────── */
.mr-notification-container {
position: fixed;
z-index: var(--mr-z-notification);
display: flex;
flex-direction: column;
gap: var(--mr-space-3);
max-height: 100vh;
padding: var(--mr-space-4);
pointer-events: none;
}
.mr-notification-container > * {
pointer-events: all;
}
.mr-notification-container-top-right {
top: 0;
right: 0;
}
.mr-notification-container-top-left {
top: 0;
left: 0;
}
.mr-notification-container-bottom-right {
bottom: 0;
right: 0;
flex-direction: column-reverse;
}
.mr-notification-container-bottom-left {
bottom: 0;
left: 0;
flex-direction: column-reverse;
}
.mr-notification-container-top-center {
top: 0;
left: 50%;
transform: translateX(-50%);
}
.mr-notification-container-bottom-center {
bottom: 0;
left: 50%;
transform: translateX(-50%);
flex-direction: column-reverse;
}
/* ── Animations ──────────────────────────────────────────── */
@keyframes mr-slide-in-right {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.mr-notification-exit {
animation: mr-slide-out-right 200ms ease-in forwards;
}
@keyframes mr-slide-out-right {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(100%);
}
}
/* ── Progress Bar (auto-dismiss indicator) ───────────────── */
.mr-notification-progress {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background-color: var(--mr-color-primary);
transform-origin: left;
animation: mr-progress-shrink 5s linear forwards;
}
@keyframes mr-progress-shrink {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/popovers.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Popovers
Click-triggered floating content panels
============================================================ */
.mr-popover-wrapper {
position: relative;
display: inline-block;
}
/* ── Popover Content ─────────────────────────────────────── */
.mr-popover {
position: absolute;
z-index: var(--mr-z-popover);
min-width: 200px;
max-width: 350px;
background-color: var(--mr-surface-card);
border: 1px solid var(--mr-border-default);
border-radius: var(--mr-radius-lg);
box-shadow: var(--mr-shadow-xl);
opacity: 0;
visibility: hidden;
transform: scale(0.95);
transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
}
/* Show popover */
.mr-popover.show {
opacity: 1;
visibility: visible;
transform: scale(1);
}
/* ── Popover Header ──────────────────────────────────────── */
.mr-popover-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--mr-space-4);
border-bottom: 1px solid var(--mr-border-subtle);
}
.mr-popover-title {
font-size: var(--mr-text-base);
font-weight: var(--mr-font-semibold);
color: var(--mr-text-primary);
margin: 0;
}
.mr-popover-close {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
background: transparent;
border: none;
border-radius: var(--mr-radius-sm);
cursor: pointer;
color: var(--mr-text-muted);
transition: all 150ms ease;
}
.mr-popover-close:hover {
background-color: var(--mr-surface-sunken);
color: var(--mr-text-primary);
}
/* ── Popover Body ────────────────────────────────────────── */
.mr-popover-body {
padding: var(--mr-space-4);
font-size: var(--mr-text-sm);
color: var(--mr-text-secondary);
line-height: 1.6;
}
/* ── Popover Footer ──────────────────────────────────────── */
.mr-popover-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--mr-space-2);
padding: var(--mr-space-3) var(--mr-space-4);
border-top: 1px solid var(--mr-border-subtle);
background-color: var(--mr-surface-sunken);
}
/* ── Popover Arrow ───────────────────────────────────────── */
.mr-popover::before {
content: '';
position: absolute;
width: 12px;
height: 12px;
background-color: var(--mr-surface-card);
border: 1px solid var(--mr-border-default);
transform: rotate(45deg);
}
/* ── Popover Positions ───────────────────────────────────── */
/* Top */
.mr-popover-top {
bottom: calc(100% + 12px);
left: 50%;
transform: translateX(-50%) scale(0.95);
}
.mr-popover-top.show {
transform: translateX(-50%) scale(1);
}
.mr-popover-top::before {
bottom: -6px;
left: calc(50% - 6px);
border-width: 0 1px 1px 0;
}
/* Bottom */
.mr-popover-bottom {
top: calc(100% + 12px);
left: 50%;
transform: translateX(-50%) scale(0.95);
}
.mr-popover-bottom.show {
transform: translateX(-50%) scale(1);
}
.mr-popover-bottom::before {
top: -6px;
left: calc(50% - 6px);
border-width: 1px 0 0 1px;
}
/* Left */
.mr-popover-left {
right: calc(100% + 12px);
top: 50%;
transform: translateY(-50%) scale(0.95);
}
.mr-popover-left.show {
transform: translateY(-50%) scale(1);
}
.mr-popover-left::before {
right: -6px;
top: calc(50% - 6px);
border-width: 0 1px 1px 0;
}
/* Right */
.mr-popover-right {
left: calc(100% + 12px);
top: 50%;
transform: translateY(-50%) scale(0.95);
}
.mr-popover-right.show {
transform: translateY(-50%) scale(1);
}
.mr-popover-right::before {
left: -6px;
top: calc(50% - 6px);
border-width: 1px 0 0 1px;
}
/* ── No Arrow Variant ────────────────────────────────────── */
.mr-popover-no-arrow::before {
display: none;
}
/* ── Popover Backdrop ────────────────────────────────────── */
.mr-popover-backdrop {
position: fixed;
inset: 0;
z-index: calc(var(--mr-z-popover) - 1);
background: transparent;
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/tooltips.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Tooltips
Hover-triggered contextual hints
============================================================ */
.mr-tooltip-wrapper {
position: relative;
display: inline-block;
}
/* ── Tooltip Content ─────────────────────────────────────── */
.mr-tooltip {
position: absolute;
z-index: var(--mr-z-tooltip);
padding: var(--mr-space-2) var(--mr-space-3);
background-color: var(--mr-color-gray-900);
color: var(--mr-color-white);
font-size: var(--mr-text-xs);
font-weight: var(--mr-font-medium);
line-height: 1.4;
border-radius: var(--mr-radius-md);
white-space: nowrap;
pointer-events: none;
opacity: 0;
transform: scale(0.9);
transition: opacity 150ms ease, transform 150ms ease;
box-shadow: var(--mr-shadow-lg);
}
/* Show tooltip on hover */
.mr-tooltip-wrapper:hover .mr-tooltip,
.mr-tooltip-wrapper:focus-within .mr-tooltip {
opacity: 1;
transform: scale(1);
}
/* ── Tooltip Arrow ───────────────────────────────────────── */
.mr-tooltip::after {
content: '';
position: absolute;
width: 0;
height: 0;
border-style: solid;
}
/* ── Tooltip Positions ───────────────────────────────────── */
/* Top (default) */
.mr-tooltip-top {
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) scale(0.9);
}
.mr-tooltip-top::after {
top: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 5px 5px 0 5px;
border-color: var(--mr-color-gray-900) transparent transparent transparent;
}
.mr-tooltip-wrapper:hover .mr-tooltip-top,
.mr-tooltip-wrapper:focus-within .mr-tooltip-top {
transform: translateX(-50%) scale(1);
}
/* Bottom */
.mr-tooltip-bottom {
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) scale(0.9);
}
.mr-tooltip-bottom::after {
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 0 5px 5px 5px;
border-color: transparent transparent var(--mr-color-gray-900) transparent;
}
.mr-tooltip-wrapper:hover .mr-tooltip-bottom,
.mr-tooltip-wrapper:focus-within .mr-tooltip-bottom {
transform: translateX(-50%) scale(1);
}
/* Left */
.mr-tooltip-left {
right: calc(100% + 8px);
top: 50%;
transform: translateY(-50%) scale(0.9);
}
.mr-tooltip-left::after {
left: 100%;
top: 50%;
transform: translateY(-50%);
border-width: 5px 0 5px 5px;
border-color: transparent transparent transparent var(--mr-color-gray-900);
}
.mr-tooltip-wrapper:hover .mr-tooltip-left,
.mr-tooltip-wrapper:focus-within .mr-tooltip-left {
transform: translateY(-50%) scale(1);
}
/* Right */
.mr-tooltip-right {
left: calc(100% + 8px);
top: 50%;
transform: translateY(-50%) scale(0.9);
}
.mr-tooltip-right::after {
right: 100%;
top: 50%;
transform: translateY(-50%);
border-width: 5px 5px 5px 0;
border-color: transparent var(--mr-color-gray-900) transparent transparent;
}
.mr-tooltip-wrapper:hover .mr-tooltip-right,
.mr-tooltip-wrapper:focus-within .mr-tooltip-right {
transform: translateY(-50%) scale(1);
}
/* ── Multiline Tooltips ──────────────────────────────────── */
.mr-tooltip-multiline {
white-space: normal;
max-width: 250px;
}
/* ── Tooltip Variants ────────────────────────────────────── */
.mr-tooltip-light {
background-color: var(--mr-color-white);
color: var(--mr-text-primary);
border: 1px solid var(--mr-border-default);
}
.mr-tooltip-light::after {
border-color: var(--mr-color-white) transparent transparent transparent;
}
.mr-tooltip-light.mr-tooltip-bottom::after {
border-color: transparent transparent var(--mr-color-white) transparent;
}
.mr-tooltip-light.mr-tooltip-left::after {
border-color: transparent transparent transparent var(--mr-color-white);
}
.mr-tooltip-light.mr-tooltip-right::after {
border-color: transparent var(--mr-color-white) transparent transparent;
}
.mr-tooltip-primary {
background-color: var(--mr-color-primary);
}
.mr-tooltip-primary::after {
border-color: var(--mr-color-primary) transparent transparent transparent;
}
.mr-tooltip-primary.mr-tooltip-bottom::after {
border-color: transparent transparent var(--mr-color-primary) transparent;
}
.mr-tooltip-primary.mr-tooltip-left::after {
border-color: transparent transparent transparent var(--mr-color-primary);
}
.mr-tooltip-primary.mr-tooltip-right::after {
border-color: transparent var(--mr-color-primary) transparent transparent;
}
/* ── Dark Theme Support ──────────────────────────────────── */
[data-theme="dark"] .mr-tooltip {
background-color: var(--mr-color-gray-700);
}
[data-theme="dark"] .mr-tooltip::after {
border-color: var(--mr-color-gray-700) transparent transparent transparent;
}
[data-theme="dark"] .mr-tooltip-bottom::after {
border-color: transparent transparent var(--mr-color-gray-700) transparent;
}
[data-theme="dark"] .mr-tooltip-left::after {
border-color: transparent transparent transparent var(--mr-color-gray-700);
}
[data-theme="dark"] .mr-tooltip-right::after {
border-color: transparent var(--mr-color-gray-700) transparent transparent;
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/chips.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Chips
Compact elements for tags, filters, and selections
============================================================ */
.mr-chip {
display: inline-flex;
align-items: center;
gap: var(--mr-space-1-5);
padding: var(--mr-space-1) var(--mr-space-2-5);
font-size: var(--mr-text-xs);
font-weight: var(--mr-font-medium);
line-height: 1.5;
border-radius: var(--mr-radius-pill);
background-color: var(--mr-color-gray-100);
color: var(--mr-color-gray-700);
border: 1px solid transparent;
transition: all 150ms ease;
white-space: nowrap;
}
/* ── Chip Avatar/Icon ────────────────────────────────────── */
.mr-chip-avatar {
width: 20px;
height: 20px;
border-radius: var(--mr-radius-full);
object-fit: cover;
margin-left: calc(var(--mr-space-1) * -1);
}
.mr-chip-icon {
font-size: var(--mr-text-sm);
line-height: 1;
}
/* ── Chip Delete Button ──────────────────────────────────── */
.mr-chip-delete {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
padding: 0;
margin-right: calc(var(--mr-space-1) * -1);
background: transparent;
border: none;
border-radius: var(--mr-radius-full);
cursor: pointer;
color: currentColor;
opacity: 0.7;
transition: all 150ms ease;
}
.mr-chip-delete:hover {
opacity: 1;
background-color: rgba(0, 0, 0, 0.1);
}
/* ── Clickable Chip ──────────────────────────────────────── */
.mr-chip-clickable {
cursor: pointer;
}
.mr-chip-clickable:hover {
background-color: var(--mr-color-gray-200);
}
.mr-chip-clickable:active {
transform: scale(0.95);
}
/* ── Chip Variants ───────────────────────────────────────── */
.mr-chip-primary {
background-color: rgba(0, 121, 174, 0.1);
color: var(--mr-color-primary);
border-color: rgba(0, 121, 174, 0.2);
}
.mr-chip-primary.mr-chip-clickable:hover {
background-color: rgba(0, 121, 174, 0.15);
}
.mr-chip-success {
background-color: rgba(34, 197, 94, 0.1);
color: var(--mr-color-success);
border-color: rgba(34, 197, 94, 0.2);
}
.mr-chip-success.mr-chip-clickable:hover {
background-color: rgba(34, 197, 94, 0.15);
}
.mr-chip-warning {
background-color: rgba(251, 191, 36, 0.1);
color: var(--mr-color-warning-dark);
border-color: rgba(251, 191, 36, 0.2);
}
.mr-chip-warning.mr-chip-clickable:hover {
background-color: rgba(251, 191, 36, 0.15);
}
.mr-chip-danger {
background-color: rgba(239, 68, 68, 0.1);
color: var(--mr-color-danger);
border-color: rgba(239, 68, 68, 0.2);
}
.mr-chip-danger.mr-chip-clickable:hover {
background-color: rgba(239, 68, 68, 0.15);
}
/* ── Outlined Variant ────────────────────────────────────── */
.mr-chip-outlined {
background-color: transparent;
border-color: var(--mr-border-default);
}
.mr-chip-outlined.mr-chip-primary {
border-color: var(--mr-color-primary);
}
.mr-chip-outlined.mr-chip-success {
border-color: var(--mr-color-success);
}
.mr-chip-outlined.mr-chip-warning {
border-color: var(--mr-color-warning);
}
.mr-chip-outlined.mr-chip-danger {
border-color: var(--mr-color-danger);
}
/* ── Filled Variant ──────────────────────────────────────── */
.mr-chip-filled {
border: none;
}
.mr-chip-filled.mr-chip-primary {
background-color: var(--mr-color-primary);
color: var(--mr-color-white);
}
.mr-chip-filled.mr-chip-success {
background-color: var(--mr-color-success);
color: var(--mr-color-white);
}
.mr-chip-filled.mr-chip-warning {
background-color: var(--mr-color-warning);
color: var(--mr-color-gray-950);
}
.mr-chip-filled.mr-chip-danger {
background-color: var(--mr-color-danger);
color: var(--mr-color-white);
}
/* ── Chip Sizes ──────────────────────────────────────────── */
.mr-chip-sm {
padding: var(--mr-space-0-5) var(--mr-space-2);
font-size: 10px;
}
.mr-chip-sm .mr-chip-avatar {
width: 16px;
height: 16px;
}
.mr-chip-lg {
padding: var(--mr-space-1-5) var(--mr-space-3);
font-size: var(--mr-text-sm);
}
.mr-chip-lg .mr-chip-avatar {
width: 24px;
height: 24px;
}
/* ── Chip Group ──────────────────────────────────────────── */
.mr-chip-group {
display: flex;
flex-wrap: wrap;
gap: var(--mr-space-2);
}
/* ── Dark Theme ──────────────────────────────────────────── */
[data-theme="dark"] .mr-chip {
background-color: var(--mr-color-gray-800);
color: var(--mr-color-gray-200);
}
[data-theme="dark"] .mr-chip-clickable:hover {
background-color: var(--mr-color-gray-700);
}
[data-theme="dark"] .mr-chip-outlined {
background-color: transparent;
border-color: var(--mr-color-gray-600);
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/dividers.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Dividers
Horizontal and vertical separators with optional labels
============================================================ */
.mr-divider {
height: 1px;
background-color: var(--mr-border-default);
border: none;
margin: var(--mr-space-6) 0;
}
/* ── Vertical Divider ────────────────────────────────────── */
.mr-divider-vertical {
width: 1px;
height: auto;
align-self: stretch;
background-color: var(--mr-border-default);
margin: 0 var(--mr-space-3);
}
/* ── Divider with Label ──────────────────────────────────── */
.mr-divider-label {
display: flex;
align-items: center;
gap: var(--mr-space-4);
margin: var(--mr-space-6) 0;
font-size: var(--mr-text-xs);
font-weight: var(--mr-font-semibold);
color: var(--mr-text-muted);
text-transform: uppercase;
letter-spacing: var(--mr-tracking-wide);
}
.mr-divider-label::before,
.mr-divider-label::after {
content: "";
flex: 1;
height: 1px;
background-color: var(--mr-border-default);
}
.mr-divider-label-left {
justify-content: flex-start;
}
.mr-divider-label-left::before {
flex: 0;
width: 0;
}
.mr-divider-label-right {
justify-content: flex-end;
}
.mr-divider-label-right::after {
flex: 0;
width: 0;
}
/* ── Spacing Variants ────────────────────────────────────── */
.mr-divider-sm {
margin: var(--mr-space-3) 0;
}
.mr-divider-md {
margin: var(--mr-space-6) 0;
}
.mr-divider-lg {
margin: var(--mr-space-10) 0;
}
.mr-divider-xl {
margin: var(--mr-space-16) 0;
}
/* ── Thickness Variants ──────────────────────────────────── */
.mr-divider-thick {
height: 2px;
}
.mr-divider-vertical.mr-divider-thick {
width: 2px;
height: auto;
}
/* ── Color Variants ──────────────────────────────────────── */
.mr-divider-primary {
background-color: var(--mr-color-primary);
}
.mr-divider-accent {
background-color: var(--mr-color-accent);
}
.mr-divider-subtle {
background-color: var(--mr-border-subtle);
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/skeletons.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Skeleton Loaders
Placeholder loading states
============================================================ */
.mr-skeleton {
display: block;
background: linear-gradient(
90deg,
var(--mr-color-gray-200) 0%,
var(--mr-color-gray-300) 50%,
var(--mr-color-gray-200) 100%
);
background-size: 200% 100%;
border-radius: var(--mr-radius-md);
animation: mr-skeleton-shimmer 1.5s ease-in-out infinite;
}
@keyframes mr-skeleton-shimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* ── Skeleton Shapes ─────────────────────────────────────── */
.mr-skeleton-text {
height: 16px;
margin-bottom: var(--mr-space-2);
border-radius: var(--mr-radius-sm);
}
.mr-skeleton-title {
height: 24px;
width: 60%;
margin-bottom: var(--mr-space-3);
border-radius: var(--mr-radius-sm);
}
.mr-skeleton-circle {
width: 40px;
height: 40px;
border-radius: var(--mr-radius-full);
}
.mr-skeleton-rectangle {
width: 100%;
height: 120px;
}
.mr-skeleton-rounded {
border-radius: var(--mr-radius-lg);
}
/* ── Skeleton Sizes ──────────────────────────────────────── */
.mr-skeleton-sm {
height: 12px;
}
.mr-skeleton-md {
height: 16px;
}
.mr-skeleton-lg {
height: 20px;
}
.mr-skeleton-xl {
height: 24px;
}
/* ── Skeleton Card Layout ────────────────────────────────── */
.mr-skeleton-card {
padding: var(--mr-space-5);
background-color: var(--mr-surface-card);
border: 1px solid var(--mr-border-subtle);
border-radius: var(--mr-radius-lg);
}
.mr-skeleton-card-header {
display: flex;
align-items: center;
gap: var(--mr-space-3);
margin-bottom: var(--mr-space-4);
}
.mr-skeleton-card-body > .mr-skeleton {
margin-bottom: var(--mr-space-2);
}
.mr-skeleton-card-body > .mr-skeleton:last-child {
width: 80%;
margin-bottom: 0;
}
/* ── Skeleton Table Row ──────────────────────────────────── */
.mr-skeleton-table-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--mr-space-3);
padding: var(--mr-space-3) 0;
}
/* ── Skeleton List ───────────────────────────────────────── */
.mr-skeleton-list-item {
display: flex;
align-items: center;
gap: var(--mr-space-3);
margin-bottom: var(--mr-space-3);
}
.mr-skeleton-list-item-content {
flex: 1;
}
/* ── Dark Theme ──────────────────────────────────────────── */
[data-theme="dark"] .mr-skeleton {
background: linear-gradient(
90deg,
var(--mr-color-gray-800) 0%,
var(--mr-color-gray-700) 50%,
var(--mr-color-gray-800) 100%
);
background-size: 200% 100%;
}
/* ── No Animation Variant ────────────────────────────────── */
.mr-skeleton-static {
animation: none;
background: var(--mr-color-gray-200);
}
[data-theme="dark"] .mr-skeleton-static {
background: var(--mr-color-gray-800);
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/spinners.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Spinners
Loading indicators and progress spinners
============================================================ */
.mr-spinner {
display: inline-block;
width: 40px;
height: 40px;
border: 3px solid var(--mr-color-gray-200);
border-top-color: var(--mr-color-primary);
border-radius: var(--mr-radius-full);
animation: mr-spinner-rotate 0.8s linear infinite;
}
/* ── Spinner Sizes ───────────────────────────────────────── */
.mr-spinner-xs {
width: 16px;
height: 16px;
border-width: 2px;
}
.mr-spinner-sm {
width: 24px;
height: 24px;
border-width: 2px;
}
.mr-spinner-md {
width: 40px;
height: 40px;
border-width: 3px;
}
.mr-spinner-lg {
width: 56px;
height: 56px;
border-width: 4px;
}
.mr-spinner-xl {
width: 72px;
height: 72px;
border-width: 5px;
}
/* ── Spinner Colors ──────────────────────────────────────── */
.mr-spinner-primary {
border-top-color: var(--mr-color-primary);
}
.mr-spinner-success {
border-top-color: var(--mr-color-success);
}
.mr-spinner-warning {
border-top-color: var(--mr-color-warning);
}
.mr-spinner-danger {
border-top-color: var(--mr-color-danger);
}
.mr-spinner-white {
border-color: rgba(255, 255, 255, 0.3);
border-top-color: var(--mr-color-white);
}
/* ── Spinner Animation ───────────────────────────────────── */
@keyframes mr-spinner-rotate {
to {
transform: rotate(360deg);
}
}
/* ── Dot Spinner ─────────────────────────────────────────── */
.mr-spinner-dots {
display: inline-flex;
align-items: center;
gap: var(--mr-space-2);
}
.mr-spinner-dot {
width: 8px;
height: 8px;
background-color: var(--mr-color-primary);
border-radius: var(--mr-radius-full);
animation: mr-spinner-dot-bounce 1.4s infinite ease-in-out both;
}
.mr-spinner-dot:nth-child(1) {
animation-delay: -0.32s;
}
.mr-spinner-dot:nth-child(2) {
animation-delay: -0.16s;
}
@keyframes mr-spinner-dot-bounce {
0%, 80%, 100% {
transform: scale(0.6);
opacity: 0.5;
}
40% {
transform: scale(1);
opacity: 1;
}
}
/* ── Pulse Spinner ───────────────────────────────────────── */
.mr-spinner-pulse {
width: 40px;
height: 40px;
background-color: var(--mr-color-primary);
border-radius: var(--mr-radius-full);
animation: mr-spinner-pulse 1.2s ease-in-out infinite;
}
@keyframes mr-spinner-pulse {
0%, 100% {
opacity: 0.3;
transform: scale(0.8);
}
50% {
opacity: 1;
transform: scale(1);
}
}
/* ── Spinner Overlay (Full Page Loading) ─────────────────── */
.mr-spinner-overlay {
position: fixed;
inset: 0;
z-index: var(--mr-z-modal);
display: flex;
align-items: center;
justify-content: center;
background-color: var(--mr-surface-overlay);
}
.mr-spinner-overlay .mr-spinner {
border-color: rgba(255, 255, 255, 0.3);
border-top-color: var(--mr-color-white);
}
/* ── Inline Spinner ──────────────────────────────────────── */
.mr-spinner-inline {
display: inline-flex;
align-items: center;
gap: var(--mr-space-2);
}
.mr-spinner-inline .mr-spinner {
width: 16px;
height: 16px;
border-width: 2px;
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/drawers.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Drawers
Slide-out panels from screen edges
============================================================ */
.mr-drawer {
position: fixed;
top: 0;
bottom: 0;
z-index: var(--mr-z-drawer);
width: 360px;
background-color: var(--mr-surface-card);
box-shadow: var(--mr-shadow-2xl);
transition: transform var(--mr-duration-default) var(--mr-ease-default);
overflow-y: auto;
display: flex;
flex-direction: column;
}
/* ── Drawer Positioning ──────────────────────────────────── */
.mr-drawer-left {
left: 0;
transform: translateX(-100%);
}
.mr-drawer-right {
right: 0;
transform: translateX(100%);
}
.mr-drawer-open.mr-drawer-left {
transform: translateX(0);
}
.mr-drawer-open.mr-drawer-right {
transform: translateX(0);
}
/* ── Drawer Overlay ──────────────────────────────────────── */
.mr-drawer-overlay {
position: fixed;
inset: 0;
background-color: var(--mr-surface-overlay);
z-index: calc(var(--mr-z-drawer) - 1);
opacity: 0;
visibility: hidden;
transition: opacity var(--mr-duration-default) var(--mr-ease-default),
visibility var(--mr-duration-default) var(--mr-ease-default);
}
.mr-drawer-overlay-visible {
opacity: 1;
visibility: visible;
}
/* ── Drawer Header ───────────────────────────────────────── */
.mr-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--mr-space-5);
border-bottom: 1px solid var(--mr-border-default);
flex-shrink: 0;
}
.mr-drawer-title {
font-size: var(--mr-text-xl);
font-weight: var(--mr-font-semibold);
color: var(--mr-text-primary);
margin: 0;
}
.mr-drawer-close {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
color: var(--mr-text-muted);
background: none;
border: none;
border-radius: var(--mr-radius-md);
cursor: pointer;
transition: var(--mr-transition-color);
}
.mr-drawer-close:hover {
background-color: var(--mr-surface-sunken);
color: var(--mr-text-primary);
}
/* ── Drawer Body ─────────────────────────────────────────── */
.mr-drawer-body {
flex: 1;
padding: var(--mr-space-5);
overflow-y: auto;
}
/* ── Drawer Footer ───────────────────────────────────────── */
.mr-drawer-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--mr-space-3);
padding: var(--mr-space-5);
border-top: 1px solid var(--mr-border-default);
background-color: var(--mr-surface-sunken);
flex-shrink: 0;
}
/* ── Drawer Sizes ────────────────────────────────────────── */
.mr-drawer-sm {
width: 280px;
}
.mr-drawer-md {
width: 360px;
}
.mr-drawer-lg {
width: 480px;
}
.mr-drawer-xl {
width: 640px;
}
/* ── Mobile: Full Width ──────────────────────────────────── */
@media (max-width: 47.999em) {
.mr-drawer {
width: 100%;
}
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/lists.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Lists
Stacked lists, grid lists, description lists
============================================================ */
/* ── Stacked List ────────────────────────────────────────── */
.mr-list {
list-style: none;
margin: 0;
padding: 0;
}
.mr-list-item {
display: flex;
align-items: center;
gap: var(--mr-space-3);
padding: var(--mr-space-3);
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
.mr-list-item:hover {
background-color: var(--mr-table-hover);
transform: translateX(4px);
padding-left: var(--mr-space-4);
}
.mr-list-item-active {
background-color: var(--mr-color-primary-light);
color: var(--mr-color-white);
font-weight: var(--mr-font-semibold);
}
.mr-list-item-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
color: var(--mr-text-muted);
}
.mr-list-item-content {
flex: 1;
min-width: 0;
}
.mr-list-item-title {
font-size: var(--mr-text-sm);
font-weight: var(--mr-font-medium);
color: var(--mr-text-primary);
margin-bottom: var(--mr-space-0-5);
}
.mr-list-item-subtitle {
font-size: var(--mr-text-xs);
color: var(--mr-text-muted);
}
.mr-list-item-meta {
flex-shrink: 0;
font-size: var(--mr-text-xs);
color: var(--mr-text-muted);
}
/* ── Divided List ────────────────────────────────────────── */
.mr-list-divided .mr-list-item {
border-bottom: 1px solid var(--mr-border-subtle);
}
.mr-list-divided .mr-list-item:last-child {
border-bottom: none;
}
/* ── Stacked List (tight spacing) ────────────────────────── */
.mr-list-stacked .mr-list-item {
padding: var(--mr-space-2) var(--mr-space-3);
}
/* ── Clickable List Items ────────────────────────────────── */
.mr-list-clickable .mr-list-item {
cursor: pointer;
}
.mr-list-clickable .mr-list-item:active {
background-color: var(--mr-color-primary-light);
}
/* ── Grid List ───────────────────────────────────────────── */
.mr-grid-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: var(--mr-space-4);
list-style: none;
margin: 0;
padding: 0;
}
.mr-grid-list-item {
display: flex;
flex-direction: column;
background-color: var(--mr-surface-card);
border: 1px solid var(--mr-border-default);
border-radius: var(--mr-radius-md);
padding: var(--mr-space-4);
transition: var(--mr-transition-all);
}
.mr-grid-list-item:hover {
box-shadow: var(--mr-shadow-md);
transform: translateY(-2px);
}
/* ── Description List ────────────────────────────────────── */
.mr-description-list {
margin: 0;
padding: 0;
}
.mr-description-list dt,
.mr-description-term {
font-size: var(--mr-text-sm);
font-weight: var(--mr-font-semibold);
color: var(--mr-text-primary);
margin-bottom: var(--mr-space-1);
}
.mr-description-list dd,
.mr-description-detail {
font-size: var(--mr-text-sm);
color: var(--mr-text-secondary);
margin-bottom: var(--mr-space-3);
margin-left: 0;
}
.mr-description-list dd:last-child,
.mr-description-detail:last-child {
margin-bottom: 0;
}
/* ── Horizontal Description List ─────────────────────────── */
.mr-description-list-horizontal {
display: grid;
grid-template-columns: 200px 1fr;
gap: var(--mr-space-3);
align-items: baseline;
}
.mr-description-list-horizontal dt,
.mr-description-list-horizontal .mr-description-term {
margin-bottom: 0;
}
.mr-description-list-horizontal dd,
.mr-description-list-horizontal .mr-description-detail {
margin-bottom: 0;
}
@media (max-width: 47.999em) {
.mr-description-list-horizontal {
grid-template-columns: 1fr;
}
.mr-description-list-horizontal dt,
.mr-description-list-horizontal .mr-description-term {
margin-bottom: var(--mr-space-1);
}
.mr-description-list-horizontal dd,
.mr-description-list-horizontal .mr-description-detail {
margin-bottom: var(--mr-space-3);
}
}
/* ── Ordered / Unordered Lists (content) ─────────────────── */
.mr-list-content {
padding-left: var(--mr-space-6);
margin-bottom: var(--mr-space-4);
}
.mr-list-content li {
margin-bottom: var(--mr-space-2);
color: var(--mr-text-secondary);
}
ul.mr-list-content {
list-style-type: disc;
}
ol.mr-list-content {
list-style-type: decimal;
}
.mr-list-content ul {
list-style-type: circle;
}
.mr-list-content ol {
list-style-type: lower-alpha;
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/accordion.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Accordion / Collapse
Expandable content sections
============================================================ */
.mr-accordion {
width: 100%;
border: 1px solid var(--mr-border-default);
border-radius: var(--mr-radius-md);
overflow: hidden;
}
/* ── Accordion Item ──────────────────────────────────────── */
.mr-accordion-item {
border-bottom: 1px solid var(--mr-border-subtle);
}
.mr-accordion-item:last-child {
border-bottom: none;
}
/* ── Accordion Header/Trigger ────────────────────────────── */
.mr-accordion-header {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--mr-space-4) var(--mr-space-5);
background-color: var(--mr-surface-card);
border: none;
cursor: pointer;
font-size: var(--mr-text-base);
font-weight: var(--mr-font-semibold);
color: var(--mr-text-primary);
text-align: left;
transition: background-color 150ms ease;
}
.mr-accordion-header:hover {
background-color: var(--mr-surface-sunken);
}
.mr-accordion-header:focus {
outline: none;
box-shadow: inset 0 0 0 2px var(--mr-color-primary);
}
/* ── Accordion Icon ──────────────────────────────────────── */
.mr-accordion-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
color: var(--mr-text-secondary);
}
.mr-accordion-item.active .mr-accordion-icon {
transform: rotate(180deg);
color: var(--mr-color-primary);
}
/* Default chevron icon */
.mr-accordion-icon::after {
content: '▼';
font-size: var(--mr-text-sm);
}
/* ── Accordion Content/Body ──────────────────────────────── */
.mr-accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mr-accordion-item.active .mr-accordion-content {
max-height: 2000px; /* Large enough for most content */
}
.mr-accordion-body {
padding: var(--mr-space-4) var(--mr-space-5);
background-color: var(--mr-surface-card);
color: var(--mr-text-secondary);
font-size: var(--mr-text-sm);
line-height: 1.6;
}
/* ── Accordion Variants ──────────────────────────────────── */
.mr-accordion-separated {
border: none;
}
.mr-accordion-separated .mr-accordion-item {
border: 1px solid var(--mr-border-default);
border-radius: var(--mr-radius-md);
margin-bottom: var(--mr-space-3);
overflow: hidden;
}
.mr-accordion-separated .mr-accordion-item:last-child {
margin-bottom: 0;
}
/* ── Bordered Variant ────────────────────────────────────── */
.mr-accordion-bordered .mr-accordion-item {
border-bottom: 2px solid var(--mr-border-default);
}
.mr-accordion-bordered .mr-accordion-item.active {
border-bottom-color: var(--mr-color-primary);
}
/* ── Flush Variant (no borders) ──────────────────────────── */
.mr-accordion-flush {
border: none;
}
.mr-accordion-flush .mr-accordion-header {
padding-left: 0;
padding-right: 0;
}
.mr-accordion-flush .mr-accordion-body {
padding-left: 0;
padding-right: 0;
}
/* ── Simple Collapse (Single collapsible element) ─────────── */
.mr-collapse {
overflow: hidden;
transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mr-collapse:not(.show) {
max-height: 0;
}
.mr-collapse.show {
max-height: 2000px;
}
/* ── Collapse Trigger ────────────────────────────────────── */
.mr-collapse-trigger {
cursor: pointer;
user-select: none;
}
/* ── Mobile Responsive ───────────────────────────────────── */
@media (max-width: 47.999em) {
.mr-accordion-header {
padding: var(--mr-space-3) var(--mr-space-4);
font-size: var(--mr-text-sm);
}
.mr-accordion-body {
padding: var(--mr-space-3) var(--mr-space-4);
}
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/steppers.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Stepper
Step-by-step progress indicators / wizards
============================================================ */
.mr-stepper {
display: flex;
align-items: flex-start;
width: 100%;
}
/* ── Stepper Item ────────────────────────────────────────── */
.mr-stepper-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.mr-stepper-item:not(:last-child)::after {
content: '';
position: absolute;
top: 20px;
left: calc(50% + 25px);
right: calc(-50% + 25px);
height: 2px;
background-color: var(--mr-border-default);
z-index: 0;
}
.mr-stepper-item.completed::after {
background-color: var(--mr-color-primary);
}
/* ── Stepper Circle/Icon ─────────────────────────────────── */
.mr-stepper-circle {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--mr-radius-full);
background-color: var(--mr-surface-card);
border: 2px solid var(--mr-border-default);
font-weight: var(--mr-font-semibold);
font-size: var(--mr-text-sm);
color: var(--mr-text-muted);
position: relative;
z-index: 1;
transition: all 200ms ease;
}
/* Active step */
.mr-stepper-item.active .mr-stepper-circle {
background-color: var(--mr-color-primary);
border-color: var(--mr-color-primary);
color: var(--mr-color-white);
box-shadow: var(--mr-focus-ring);
}
/* Completed step */
.mr-stepper-item.completed .mr-stepper-circle {
background-color: var(--mr-color-primary);
border-color: var(--mr-color-primary);
color: var(--mr-color-white);
}
.mr-stepper-item.completed .mr-stepper-circle::after {
content: '✓';
}
.mr-stepper-item.completed .mr-stepper-number {
display: none;
}
/* ── Stepper Label ───────────────────────────────────────── */
.mr-stepper-label {
margin-top: var(--mr-space-2);
font-size: var(--mr-text-sm);
font-weight: var(--mr-font-medium);
color: var(--mr-text-muted);
text-align: center;
}
.mr-stepper-item.active .mr-stepper-label {
color: var(--mr-color-primary);
font-weight: var(--mr-font-semibold);
}
.mr-stepper-item.completed .mr-stepper-label {
color: var(--mr-text-primary);
}
/* ── Stepper Description ─────────────────────────────────── */
.mr-stepper-description {
margin-top: var(--mr-space-1);
font-size: var(--mr-text-xs);
color: var(--mr-text-muted);
text-align: center;
max-width: 150px;
}
/* ── Vertical Stepper ────────────────────────────────────── */
.mr-stepper-vertical {
flex-direction: column;
align-items: flex-start;
}
.mr-stepper-vertical .mr-stepper-item {
flex-direction: row;
align-items: flex-start;
width: 100%;
padding-bottom: var(--mr-space-6);
}
.mr-stepper-vertical .mr-stepper-item:not(:last-child)::after {
top: 50px;
left: 20px;
right: auto;
bottom: 0;
width: 2px;
height: calc(100% - 40px);
}
.mr-stepper-vertical .mr-stepper-content {
flex: 1;
margin-left: var(--mr-space-4);
}
.mr-stepper-vertical .mr-stepper-label,
.mr-stepper-vertical .mr-stepper-description {
text-align: left;
max-width: none;
margin-top: 0;
}
.mr-stepper-vertical .mr-stepper-label {
margin-bottom: var(--mr-space-1);
}
.mr-stepper-vertical .mr-stepper-body {
margin-top: var(--mr-space-2);
font-size: var(--mr-text-sm);
color: var(--mr-text-secondary);
line-height: 1.6;
}
/* ── Error State ─────────────────────────────────────────── */
.mr-stepper-item.error .mr-stepper-circle {
background-color: var(--mr-color-danger);
border-color: var(--mr-color-danger);
color: var(--mr-color-white);
}
.mr-stepper-item.error .mr-stepper-circle::after {
content: '✕';
}
.mr-stepper-item.error .mr-stepper-label {
color: var(--mr-color-danger);
}
/* ── Mobile Responsive ───────────────────────────────────── */
@media (max-width: 47.999em) {
.mr-stepper {
flex-direction: column;
align-items: flex-start;
}
.mr-stepper-item {
flex-direction: row;
align-items: flex-start;
width: 100%;
padding-bottom: var(--mr-space-4);
}
.mr-stepper-item:not(:last-child)::after {
top: 50px;
left: 20px;
right: auto;
bottom: 0;
width: 2px;
height: calc(100% - 40px);
}
.mr-stepper-content {
flex: 1;
margin-left: var(--mr-space-3);
}
.mr-stepper-label,
.mr-stepper-description {
text-align: left;
max-width: none;
margin-top: 0;
}
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/sliders.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Sliders (Range Inputs)
Customized range input controls
============================================================ */
.mr-slider {
width: 100%;
-webkit-appearance: none;
appearance: none;
height: 6px;
background: var(--mr-color-gray-200);
border-radius: var(--mr-radius-full);
outline: none;
transition: background 150ms ease;
}
.mr-slider:hover {
background: var(--mr-color-gray-300);
}
.mr-slider:focus {
outline: none;
}
/* ── Webkit (Chrome, Safari, Edge) Thumb ─────────────────── */
.mr-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: var(--mr-color-primary);
border: 2px solid var(--mr-color-white);
border-radius: var(--mr-radius-full);
cursor: pointer;
box-shadow: var(--mr-shadow-sm);
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mr-slider::-webkit-slider-thumb:hover {
transform: scale(1.1);
box-shadow: var(--mr-shadow-md);
}
.mr-slider::-webkit-slider-thumb:active {
transform: scale(1.15);
box-shadow: var(--mr-focus-ring);
}
/* ── Firefox Thumb ───────────────────────────────────────── */
.mr-slider::-moz-range-thumb {
width: 20px;
height: 20px;
background: var(--mr-color-primary);
border: 2px solid var(--mr-color-white);
border-radius: var(--mr-radius-full);
cursor: pointer;
box-shadow: var(--mr-shadow-sm);
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mr-slider::-moz-range-thumb:hover {
transform: scale(1.1);
box-shadow: var(--mr-shadow-md);
}
.mr-slider::-moz-range-thumb:active {
transform: scale(1.15);
box-shadow: var(--mr-focus-ring);
}
/* Firefox track */
.mr-slider::-moz-range-track {
background: var(--mr-color-gray-200);
border-radius: var(--mr-radius-full);
}
/* ── Slider Wrapper ──────────────────────────────────────── */
.mr-slider-wrapper {
width: 100%;
}
.mr-slider-label {
display: flex;
justify-content: space-between;
margin-bottom: var(--mr-space-2);
font-size: var(--mr-text-sm);
font-weight: var(--mr-font-semibold);
color: var(--mr-text-primary);
}
.mr-slider-value {
color: var(--mr-color-primary);
}
.mr-slider-marks {
display: flex;
justify-content: space-between;
margin-top: var(--mr-space-1);
font-size: var(--mr-text-xs);
color: var(--mr-text-muted);
}
/* ── Slider Variants ─────────────────────────────────────── */
.mr-slider-success::-webkit-slider-thumb {
background: var(--mr-color-success);
}
.mr-slider-success::-moz-range-thumb {
background: var(--mr-color-success);
}
.mr-slider-warning::-webkit-slider-thumb {
background: var(--mr-color-warning);
}
.mr-slider-warning::-moz-range-thumb {
background: var(--mr-color-warning);
}
.mr-slider-danger::-webkit-slider-thumb {
background: var(--mr-color-danger);
}
.mr-slider-danger::-moz-range-thumb {
background: var(--mr-color-danger);
}
/* ── Slider Sizes ────────────────────────────────────────── */
.mr-slider-sm {
height: 4px;
}
.mr-slider-sm::-webkit-slider-thumb {
width: 16px;
height: 16px;
}
.mr-slider-sm::-moz-range-thumb {
width: 16px;
height: 16px;
}
.mr-slider-lg {
height: 8px;
}
.mr-slider-lg::-webkit-slider-thumb {
width: 24px;
height: 24px;
}
.mr-slider-lg::-moz-range-thumb {
width: 24px;
height: 24px;
}
/* ── Disabled State ──────────────────────────────────────── */
.mr-slider:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.mr-slider:disabled::-webkit-slider-thumb {
cursor: not-allowed;
background: var(--mr-color-gray-400);
}
.mr-slider:disabled::-moz-range-thumb {
cursor: not-allowed;
background: var(--mr-color-gray-400);
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/rating.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Rating
Star ratings and interactive rating inputs
============================================================ */
.mr-rating {
display: inline-flex;
align-items: center;
gap: var(--mr-space-1);
}
/* ── Rating Star ─────────────────────────────────────────── */
.mr-rating-star {
cursor: pointer;
color: var(--mr-color-gray-300);
font-size: var(--mr-text-2xl);
transition: all 150ms ease;
user-select: none;
}
.mr-rating-star:hover {
transform: scale(1.1);
}
/* Filled star */
.mr-rating-star.filled {
color: var(--mr-color-warning);
}
/* Half star */
.mr-rating-star.half {
position: relative;
color: var(--mr-color-gray-300);
}
.mr-rating-star.half::before {
content: '★';
position: absolute;
left: 0;
color: var(--mr-color-warning);
width: 50%;
overflow: hidden;
}
/* ── Rating Input (Interactive) ──────────────────────────── */
.mr-rating-input {
cursor: pointer;
}
.mr-rating-input input[type="radio"] {
display: none;
}
.mr-rating-input label {
cursor: pointer;
color: var(--mr-color-gray-300);
font-size: var(--mr-text-2xl);
transition: all 150ms ease;
}
.mr-rating-input:hover label,
.mr-rating-input label:hover,
.mr-rating-input label:hover ~ label {
color: var(--mr-color-warning);
transform: scale(1.1);
}
.mr-rating-input input:checked ~ label {
color: var(--mr-color-warning);
}
/* Reverse order for proper hover effect */
.mr-rating-input {
display: inline-flex;
flex-direction: row-reverse;
gap: var(--mr-space-1);
}
.mr-rating-input label:hover ~ label {
color: var(--mr-color-warning);
}
/* ── Rating with Label ───────────────────────────────────── */
.mr-rating-wrapper {
display: inline-flex;
align-items: center;
gap: var(--mr-space-2);
}
.mr-rating-value {
font-size: var(--mr-text-sm);
font-weight: var(--mr-font-semibold);
color: var(--mr-text-primary);
}
.mr-rating-count {
font-size: var(--mr-text-xs);
color: var(--mr-text-muted);
}
/* ── Rating Sizes ────────────────────────────────────────── */
.mr-rating-sm .mr-rating-star,
.mr-rating-sm label {
font-size: var(--mr-text-lg);
}
.mr-rating-md .mr-rating-star,
.mr-rating-md label {
font-size: var(--mr-text-2xl);
}
.mr-rating-lg .mr-rating-star,
.mr-rating-lg label {
font-size: var(--mr-text-4xl);
}
/* ── Read-Only Rating ────────────────────────────────────── */
.mr-rating-readonly .mr-rating-star {
cursor: default;
}
.mr-rating-readonly .mr-rating-star:hover {
transform: none;
}
/* ── Disabled Rating ─────────────────────────────────────── */
.mr-rating-disabled {
opacity: 0.5;
cursor: not-allowed;
}
.mr-rating-disabled .mr-rating-star {
cursor: not-allowed;
}
.mr-rating-disabled .mr-rating-star:hover {
transform: none;
}
/* ── Color Variants ──────────────────────────────────────── */
.mr-rating-primary .mr-rating-star.filled {
color: var(--mr-color-primary);
}
.mr-rating-success .mr-rating-star.filled {
color: var(--mr-color-success);
}
.mr-rating-danger .mr-rating-star.filled {
color: var(--mr-color-danger);
}
/* ── Icon Variants ───────────────────────────────────────── */
.mr-rating-star::before {
content: '★';
}
.mr-rating-heart .mr-rating-star::before {
content: '♥';
}
.mr-rating-circle .mr-rating-star::before {
content: '●';
}
/* ── Fractional Rating Display ───────────────────────────── */
.mr-rating-precise .mr-rating-star {
position: relative;
}
.mr-rating-precise .mr-rating-star-fill {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
color: var(--mr-color-warning);
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/timeline.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Timeline
Vertical timeline for events and history
============================================================ */
.mr-timeline {
position: relative;
padding-left: var(--mr-space-6);
}
/* Timeline vertical line */
.mr-timeline::before {
content: '';
position: absolute;
left: 8px;
top: 0;
bottom: 0;
width: 2px;
background-color: var(--mr-border-default);
}
/* ── Timeline Item ───────────────────────────────────────── */
.mr-timeline-item {
position: relative;
padding-bottom: var(--mr-space-6);
}
.mr-timeline-item:last-child {
padding-bottom: 0;
}
/* ── Timeline Marker ─────────────────────────────────────── */
.mr-timeline-marker {
position: absolute;
left: -22px;
top: 4px;
width: 16px;
height: 16px;
background-color: var(--mr-surface-card);
border: 3px solid var(--mr-color-primary);
border-radius: var(--mr-radius-full);
z-index: 1;
}
/* ── Timeline Content ────────────────────────────────────── */
.mr-timeline-content {
background-color: var(--mr-surface-card);
border: 1px solid var(--mr-border-subtle);
border-radius: var(--mr-radius-md);
padding: var(--mr-space-4);
box-shadow: var(--mr-shadow-sm);
}
.mr-timeline-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--mr-space-2);
}
.mr-timeline-title {
font-size: var(--mr-text-base);
font-weight: var(--mr-font-semibold);
color: var(--mr-text-primary);
margin: 0;
}
.mr-timeline-date {
font-size: var(--mr-text-xs);
color: var(--mr-text-muted);
white-space: nowrap;
}
.mr-timeline-body {
font-size: var(--mr-text-sm);
color: var(--mr-text-secondary);
line-height: 1.6;
}
/* ── Timeline Icon Marker ────────────────────────────────── */
.mr-timeline-marker-icon {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background-color: var(--mr-color-primary);
color: var(--mr-color-white);
border-radius: var(--mr-radius-full);
font-size: var(--mr-text-sm);
position: absolute;
left: -30px;
top: 0;
z-index: 1;
border: 3px solid var(--mr-surface-card);
box-shadow: var(--mr-shadow-sm);
}
/* ── Timeline Variants ───────────────────────────────────── */
.mr-timeline-item.success .mr-timeline-marker {
border-color: var(--mr-color-success);
}
.mr-timeline-item.success .mr-timeline-marker-icon {
background-color: var(--mr-color-success);
}
.mr-timeline-item.warning .mr-timeline-marker {
border-color: var(--mr-color-warning);
}
.mr-timeline-item.warning .mr-timeline-marker-icon {
background-color: var(--mr-color-warning);
color: var(--mr-color-gray-950);
}
.mr-timeline-item.danger .mr-timeline-marker {
border-color: var(--mr-color-danger);
}
.mr-timeline-item.danger .mr-timeline-marker-icon {
background-color: var(--mr-color-danger);
}
/* ── Simple Timeline (no cards) ──────────────────────────── */
.mr-timeline-simple .mr-timeline-content {
background-color: transparent;
border: none;
padding: 0;
box-shadow: none;
}
/* ── Alternate Timeline (left/right) ─────────────────────── */
.mr-timeline-alternate {
padding-left: 0;
max-width: 1000px;
margin: 0 auto;
}
.mr-timeline-alternate::before {
left: 50%;
transform: translateX(-50%);
}
.mr-timeline-alternate .mr-timeline-item {
width: 50%;
padding-right: var(--mr-space-8);
padding-left: 0;
}
.mr-timeline-alternate .mr-timeline-item:nth-child(even) {
margin-left: 50%;
padding-left: var(--mr-space-8);
padding-right: 0;
}
.mr-timeline-alternate .mr-timeline-marker {
left: auto;
right: -8px;
}
.mr-timeline-alternate .mr-timeline-item:nth-child(even) .mr-timeline-marker {
right: auto;
left: -8px;
}
/* ── Mobile Responsive ───────────────────────────────────── */
@media (max-width: 47.999em) {
.mr-timeline {
padding-left: var(--mr-space-5);
}
.mr-timeline::before {
left: 6px;
}
.mr-timeline-marker {
left: -20px;
width: 12px;
height: 12px;
}
.mr-timeline-marker-icon {
width: 24px;
height: 24px;
left: -24px;
font-size: var(--mr-text-xs);
}
/* Stack alternate timeline on mobile */
.mr-timeline-alternate {
padding-left: var(--mr-space-5);
}
.mr-timeline-alternate::before {
left: 6px;
transform: none;
}
.mr-timeline-alternate .mr-timeline-item,
.mr-timeline-alternate .mr-timeline-item:nth-child(even) {
width: 100%;
margin-left: 0;
padding-left: 0;
padding-right: 0;
}
.mr-timeline-alternate .mr-timeline-marker {
left: -20px;
right: auto;
}
.mr-timeline-alternate .mr-timeline-item:nth-child(even) .mr-timeline-marker {
left: -20px;
}
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/empty-state.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Empty State
Placeholder content when no data is available
============================================================ */
.mr-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--mr-space-12) var(--mr-space-6);
text-align: center;
}
/* ── Empty State Icon ────────────────────────────────────── */
.mr-empty-state-icon {
width: 120px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--mr-surface-sunken);
border-radius: var(--mr-radius-full);
color: var(--mr-text-muted);
font-size: 48px;
margin-bottom: var(--mr-space-5);
}
/* ── Empty State Image ───────────────────────────────────── */
.mr-empty-state-image {
max-width: 300px;
width: 100%;
height: auto;
margin-bottom: var(--mr-space-5);
opacity: 0.9;
}
/* ── Empty State Content ─────────────────────────────────── */
.mr-empty-state-title {
font-size: var(--mr-text-xl);
font-weight: var(--mr-font-semibold);
color: var(--mr-text-primary);
margin-bottom: var(--mr-space-2);
}
.mr-empty-state-description {
font-size: var(--mr-text-base);
color: var(--mr-text-secondary);
max-width: 500px;
line-height: 1.6;
margin-bottom: var(--mr-space-5);
}
/* ── Empty State Actions ─────────────────────────────────── */
.mr-empty-state-actions {
display: flex;
gap: var(--mr-space-3);
flex-wrap: wrap;
justify-content: center;
}
/* ── Empty State Variants ────────────────────────────────── */
.mr-empty-state-compact {
padding: var(--mr-space-8) var(--mr-space-4);
}
.mr-empty-state-compact .mr-empty-state-icon {
width: 80px;
height: 80px;
font-size: 32px;
margin-bottom: var(--mr-space-4);
}
.mr-empty-state-compact .mr-empty-state-title {
font-size: var(--mr-text-lg);
}
.mr-empty-state-compact .mr-empty-state-description {
font-size: var(--mr-text-sm);
margin-bottom: var(--mr-space-4);
}
/* ── Empty State in Cards ────────────────────────────────── */
.mr-card .mr-empty-state {
padding: var(--mr-space-8) var(--mr-space-4);
}
.mr-card .mr-empty-state-icon {
width: 64px;
height: 64px;
font-size: 28px;
margin-bottom: var(--mr-space-3);
}
.mr-card .mr-empty-state-title {
font-size: var(--mr-text-base);
}
.mr-card .mr-empty-state-description {
font-size: var(--mr-text-sm);
margin-bottom: var(--mr-space-3);
}
/* ── Contextual Empty States ─────────────────────────────── */
/* For "no search results" scenarios */
.mr-empty-state-search .mr-empty-state-icon::before {
content: '🔍';
}
/* For "no data available" scenarios */
.mr-empty-state-no-data .mr-empty-state-icon::before {
content: '📂';
}
/* For error states */
.mr-empty-state-error .mr-empty-state-icon {
background-color: rgba(239, 68, 68, 0.1);
color: var(--mr-color-danger);
}
.mr-empty-state-error .mr-empty-state-icon::before {
content: '⚠️';
}
/* For success/completion states */
.mr-empty-state-success .mr-empty-state-icon {
background-color: rgba(34, 197, 94, 0.1);
color: var(--mr-color-success);
}
.mr-empty-state-success .mr-empty-state-icon::before {
content: '✓';
}
/* ── Mobile Responsive ───────────────────────────────────── */
@media (max-width: 47.999em) {
.mr-empty-state {
padding: var(--mr-space-8) var(--mr-space-4);
}
.mr-empty-state-icon {
width: 80px;
height: 80px;
font-size: 36px;
}
.mr-empty-state-image {
max-width: 200px;
}
.mr-empty-state-title {
font-size: var(--mr-text-lg);
}
.mr-empty-state-description {
font-size: var(--mr-text-sm);
}
.mr-empty-state-actions {
flex-direction: column;
width: 100%;
}
.mr-empty-state-actions .mr-btn {
width: 100%;
}
}
/* ────────────────────────────────────────────────────── */
/* File: src/components/action-panels.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Components: Action Panels
Contextual panels for actions and confirmations
============================================================ */
.mr-action-panel {
background-color: var(--mr-surface-card);
border: 1px solid var(--mr-border-default);
border-left: 4px solid var(--mr-color-primary);
border-radius: var(--mr-radius-md);
padding: var(--mr-space-5);
margin-bottom: var(--mr-space-4);
}
/* ── Action Panel Header ─────────────────────────────────── */
.mr-action-panel-header {
margin-bottom: var(--mr-space-3);
}
.mr-action-panel-title {
font-size: var(--mr-text-lg);
font-weight: var(--mr-font-semibold);
color: var(--mr-text-primary);
margin-bottom: var(--mr-space-1);
}
.mr-action-panel-subtitle {
font-size: var(--mr-text-sm);
color: var(--mr-text-muted);
}
/* ── Action Panel Body ───────────────────────────────────── */
.mr-action-panel-body {
font-size: var(--mr-text-sm);
color: var(--mr-text-secondary);
line-height: var(--mr-leading-relaxed);
margin-bottom: var(--mr-space-4);
}
/* ── Action Panel Footer ─────────────────────────────────── */
.mr-action-panel-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--mr-space-3);
}
/* ── Color Variants ──────────────────────────────────────── */
.mr-action-panel-success {
border-left-color: var(--mr-color-success);
background-color: var(--mr-color-success-light);
}
.mr-action-panel-warning {
border-left-color: var(--mr-color-warning);
background-color: var(--mr-color-warning-light);
}
.mr-action-panel-danger {
border-left-color: var(--mr-color-danger);
background-color: var(--mr-color-danger-light);
}
.mr-action-panel-info {
border-left-color: var(--mr-color-info);
background-color: var(--mr-color-info-light);
}
.mr-action-panel-accent {
border-left-color: var(--mr-color-accent);
}
/* ── Centered Layout ─────────────────────────────────────── */
.mr-action-panel-centered {
text-align: center;
}
.mr-action-panel-centered .mr-action-panel-footer {
justify-content: center;
}
/* ── Compact Variant ─────────────────────────────────────── */
.mr-action-panel-compact {
padding: var(--mr-space-3);
}
.mr-action-panel-compact .mr-action-panel-body {
margin-bottom: var(--mr-space-2);
}
/* ────────────────────────────────────────────────────── */
/* File: src/navigation/navbar.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Navigation: Navbar
Top-level application navigation bar
============================================================ */
.mr-navbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mr-space-4);
width: 100%;
padding: 0 var(--mr-space-6);
min-height: 64px;
background-color: var(--mr-surface-card);
border-bottom: 1px solid var(--mr-border-default);
}
/* ── Navbar Brand ────────────────────────────────────────── */
.mr-navbar-brand {
display: flex;
align-items: center;
gap: var(--mr-space-3);
margin-right: var(--mr-space-6);
flex-shrink: 0;
font-size: var(--mr-text-lg);
font-weight: var(--mr-font-bold);
color: var(--mr-text-primary);
text-decoration: none;
white-space: nowrap;
}
.mr-navbar-brand img,
.mr-navbar-brand svg {
height: 32px;
width: auto;
}
/* ── Navbar Nav (horizontal menu) ───────────────────────── */
.mr-navbar-nav {
display: flex;
align-items: center;
gap: var(--mr-space-1);
flex: 1 1 auto;
list-style: none;
margin: 0;
padding: 0;
}
.mr-navbar-item {
position: relative;
}
.mr-navbar-link {
display: flex;
align-items: center;
gap: var(--mr-space-2);
padding: var(--mr-space-2) var(--mr-space-3);
font-size: var(--mr-text-sm);
font-weight: var(--mr-font-medium);
color: var(--mr-text-secondary);
text-decoration: none;
border-radius: var(--mr-radius-md);
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
position: relative;
}
.mr-navbar-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background-color: var(--mr-color-primary);
transition: width 200ms ease, left 200ms ease;
}
.mr-navbar-link:hover {
color: var(--mr-text-primary);
background-color: var(--mr-surface-sunken);
transform: translateY(-1px);
text-decoration: none;
}
.mr-navbar-link:hover::after {
width: 80%;
left: 10%;
}
.mr-navbar-link.mr-active {
color: var(--mr-color-primary);
background-color: var(--mr-color-primary-lighter);
font-weight: var(--mr-font-semibold);
}
/* ── Navbar Actions (right side) ─────────────────────────── */
.mr-navbar-actions {
display: flex;
align-items: center;
gap: var(--mr-space-2);
margin-left: auto;
flex-shrink: 0;
}
/* ── Mobile Toggle Button ────────────────────────────────── */
.mr-navbar-toggle {
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 8px;
color: var(--mr-text-primary);
background: none;
border: none;
border-radius: var(--mr-radius-md);
cursor: pointer;
transition: background-color 200ms ease;
}
.mr-navbar-toggle:hover {
background-color: var(--mr-surface-sunken);
}
.mr-navbar-dark .mr-navbar-toggle {
color: rgba(255, 255, 255, 0.9);
}
.mr-navbar-dark .mr-navbar-toggle:hover {
background-color: rgba(255, 255, 255, 0.1);
}
/* Hamburger icon */
.mr-hamburger {
display: flex;
flex-direction: column;
gap: 5px;
width: 24px;
height: 18px;
}
.mr-hamburger span {
display: block;
width: 100%;
height: 2px;
background-color: currentColor;
border-radius: 2px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center;
}
.mr-navbar-toggle[aria-expanded="true"] .mr-hamburger span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.mr-navbar-toggle[aria-expanded="true"] .mr-hamburger span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.mr-navbar-toggle[aria-expanded="true"] .mr-hamburger span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* ── Collapsible Nav (mobile) ────────────────────────────── */
.mr-navbar-collapse {
display: flex;
align-items: center;
gap: var(--mr-space-6);
}
/* ── Dark Navbar Variant ─────────────────────────────────── */
.mr-navbar-dark {
background-color: var(--mr-color-navy-dark);
border-bottom-color: rgba(255, 255, 255, 0.1);
}
.mr-navbar-dark .mr-navbar-brand,
.mr-navbar-dark .mr-navbar-link {
color: rgba(255, 255, 255, 0.8);
}
.mr-navbar-dark .mr-navbar-link:hover {
color: var(--mr-color-white);
background-color: rgba(255, 255, 255, 0.1);
}
.mr-navbar-dark .mr-navbar-link.mr-active {
color: var(--mr-color-white);
background-color: var(--mr-color-primary);
}
/* ── Sticky Navbar ───────────────────────────────────────── */
.mr-navbar-sticky {
position: sticky;
top: 0;
z-index: var(--mr-z-sticky);
}
/* ── Navbar Container ────────────────────────────────────── */
.mr-navbar-container {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 1400px;
margin: 0 auto;
position: relative;
}
/* ── Mobile Responsive ───────────────────────────────────── */
@media (max-width: 47.999em) {
.mr-navbar {
flex-wrap: wrap;
align-items: center;
row-gap: var(--mr-space-2);
padding: 0 var(--mr-space-4);
min-height: 56px;
}
.mr-navbar-toggle {
display: flex;
order: 2;
}
.mr-navbar-brand {
order: 1;
margin-right: var(--mr-space-3);
font-size: var(--mr-text-base);
}
.mr-navbar-actions {
order: 3;
}
.mr-navbar-collapse {
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: var(--mr-space-4);
background-color: var(--mr-surface-card);
border-bottom: 1px solid var(--mr-border-default);
box-shadow: var(--mr-shadow-lg);
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mr-navbar-dark .mr-navbar-collapse {
background-color: var(--mr-color-navy-dark);
border-bottom-color: rgba(255, 255, 255, 0.1);
}
.mr-navbar-collapse-open {
max-height: 400px;
opacity: 1;
overflow-y: auto;
}
.mr-navbar-nav {
order: 3;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
width: 100%;
margin-top: var(--mr-space-1);
gap: var(--mr-space-1);
}
.mr-navbar-link {
justify-content: center;
padding: var(--mr-space-2) var(--mr-space-3);
}
.mr-navbar-link::after {
display: none;
}
.mr-navbar > .mr-navbar-actions {
order: 2;
margin-left: 0;
margin-top: 0;
padding-top: 0;
border-top: 0;
width: auto;
justify-content: flex-end;
}
.mr-navbar-dark .mr-navbar-actions {
border-top-color: rgba(255, 255, 255, 0.1);
}
}
@media (min-width: 48em) and (max-width: 63.999em) {
.mr-navbar-toggle {
display: flex;
}
.mr-navbar-collapse {
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: var(--mr-space-4);
background-color: var(--mr-surface-card);
border-bottom: 1px solid var(--mr-border-default);
box-shadow: var(--mr-shadow-lg);
display: none;
}
.mr-navbar-dark .mr-navbar-collapse {
background-color: var(--mr-color-navy-dark);
}
.mr-navbar-collapse-open {
display: flex;
}
.mr-navbar-nav {
flex-direction: column;
align-items: stretch;
width: 100%;
gap: var(--mr-space-1);
}
.mr-navbar-link {
justify-content: flex-start;
padding: var(--mr-space-3) var(--mr-space-4);
}
.mr-navbar-actions {
margin-left: 0;
margin-top: var(--mr-space-3);
padding-top: var(--mr-space-3);
border-top: 1px solid var(--mr-border-subtle);
width: 100%;
justify-content: flex-start;
}
}
/* ────────────────────────────────────────────────────── */
/* File: src/navigation/tabs.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Navigation: Tabs
Tabbed navigation with panels
============================================================ */
.mr-tabs {
width: 100%;
}
/* ── Tab List ────────────────────────────────────────────── */
.mr-tab-list {
display: flex;
gap: var(--mr-space-1);
border-bottom: 2px solid var(--mr-border-default);
list-style: none;
margin: 0;
padding: 0;
overflow-x: auto;
}
.mr-tab {
position: relative;
padding: var(--mr-space-3) var(--mr-space-4);
font-size: var(--mr-text-sm);
font-weight: var(--mr-font-medium);
color: var(--mr-text-secondary);
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
margin-bottom: -2px;
}
.mr-tab:hover {
color: var(--mr-text-primary);
background-color: var(--mr-surface-sunken);
transform: translateY(-1px);
}
.mr-tab:active {
transform: translateY(0px);
}
.mr-tab-active,
.mr-tab[aria-selected="true"] {
color: var(--mr-color-primary);
border-bottom-color: var(--mr-color-primary);
font-weight: var(--mr-font-semibold);
}
/* ── Tab Panels ──────────────────────────────────────────── */
.mr-tab-panel {
padding: var(--mr-space-5) 0;
display: none;
}
.mr-tab-panel-active,
.mr-tab-panel[aria-hidden="false"] {
display: block;
}
/* ── Pills Variant ───────────────────────────────────────── */
.mr-tabs-pills .mr-tab-list {
border-bottom: none;
gap: var(--mr-space-2);
}
.mr-tabs-pills .mr-tab {
border-radius: var(--mr-radius-md);
border-bottom: none;
margin-bottom: 0;
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mr-tabs-pills .mr-tab:hover {
transform: translateY(-2px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.mr-tabs-pills .mr-tab-active {
background-color: var(--mr-color-primary);
color: var(--mr-text-on-primary);
border-bottom-color: transparent;
transform: scale(1.05);
box-shadow: 0 2px 8px rgba(0, 121, 174, 0.3);
}
/* ── Vertical Tabs ───────────────────────────────────────── */
.mr-tabs-vertical {
display: flex;
gap: var(--mr-space-6);
}
.mr-tabs-vertical .mr-tab-list {
flex-direction: column;
border-bottom: none;
border-right: 2px solid var(--mr-border-default);
min-width: 200px;
}
.mr-tabs-vertical .mr-tab {
text-align: left;
border-bottom: none;
border-right: 2px solid transparent;
margin-bottom: 0;
margin-right: -2px;
}
.mr-tabs-vertical .mr-tab-active {
border-right-color: var(--mr-color-primary);
border-bottom-color: transparent;
}
.mr-tabs-vertical .mr-tab-panel {
flex: 1;
padding: 0;
}
/* ── Centered Tabs ───────────────────────────────────────── */
.mr-tabs-centered .mr-tab-list {
justify-content: center;
}
/* ── Full Width Tabs ─────────────────────────────────────── */
.mr-tabs-full .mr-tab {
flex: 1;
text-align: center;
}
/* ── Mobile: Stack Vertically ────────────────────────────── */
@media (max-width: 47.999em) {
.mr-tabs-responsive.mr-tabs-vertical {
flex-direction: column;
}
.mr-tabs-responsive.mr-tabs-vertical .mr-tab-list {
border-right: none;
border-bottom: 2px solid var(--mr-border-default);
min-width: 0;
width: 100%;
}
.mr-tabs-responsive.mr-tabs-vertical .mr-tab {
border-right: none;
border-bottom: 2px solid transparent;
margin-right: 0;
margin-bottom: -2px;
}
.mr-tabs-responsive.mr-tabs-vertical .mr-tab-active {
border-right-color: transparent;
border-bottom-color: var(--mr-color-primary);
}
}
/* ── Segmented Control (iOS-style) ───────────────────────── */
.mr-tabs-segmented .mr-tab-list {
border-bottom: none;
gap: 0;
background: var(--mr-surface-sunken);
padding: var(--mr-space-1);
border-radius: var(--mr-radius-full);
display: inline-flex;
width: auto;
}
.mr-tabs-segmented .mr-tab {
border-radius: var(--mr-radius-full);
border: none;
margin: 0;
padding: var(--mr-space-2) var(--mr-space-5);
background: transparent;
position: relative;
z-index: 1;
transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mr-tabs-segmented .mr-tab:hover {
color: var(--mr-text-primary);
background-color: rgba(0, 0, 0, 0.05);
transform: none;
}
.mr-tabs-segmented .mr-tab-active {
background-color: var(--mr-surface-card);
color: var(--mr-color-primary);
border-bottom-color: transparent;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
font-weight: var(--mr-font-semibold);
}
/* Dark mode adjustments for segmented */
[data-theme="dark"] .mr-tabs-segmented .mr-tab:hover {
background-color: rgba(255, 255, 255, 0.1);
}
/* ── Tabs with Icons ─────────────────────────────────────── */
.mr-tab-icon {
display: inline-flex;
align-items: center;
gap: var(--mr-space-2);
}
.mr-tab-icon svg,
.mr-tab-icon img {
width: 18px;
height: 18px;
opacity: 0.7;
transition: opacity 200ms ease;
}
.mr-tab-active .mr-tab-icon svg,
.mr-tab-active .mr-tab-icon img {
opacity: 1;
}
/* ── Badge in Tabs ───────────────────────────────────────── */
.mr-tab-badge {
display: inline-flex;
align-items: center;
gap: var(--mr-space-2);
}
.mr-tab-badge .mr-badge {
font-size: var(--mr-text-2xs);
padding: 2px 6px;
min-width: 18px;
height: 18px;
}
/* ── Large Tabs (for prominent navigation) ───────────────── */
.mr-tabs-large .mr-tab {
padding: var(--mr-space-4) var(--mr-space-6);
font-size: var(--mr-text-base);
font-weight: var(--mr-font-semibold);
}
/* ── Compact Tabs (for space-constrained areas) ─────────── */
.mr-tabs-compact .mr-tab {
padding: var(--mr-space-2) var(--mr-space-3);
font-size: var(--mr-text-xs);
}
.mr-tabs-compact .mr-tab-list {
gap: var(--mr-space-0-5);
}
/* ────────────────────────────────────────────────────── */
/* File: src/navigation/sidebar-nav.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Navigation: Sidebar Navigation
Vertical navigation for app sidebars
============================================================ */
.mr-sidenav {
display: flex;
flex-direction: column;
gap: var(--mr-space-1);
list-style: none;
margin: 0;
padding: var(--mr-space-3) 0;
}
/* ── Sidebar Nav Item ────────────────────────────────────── */
.mr-sidenav-item {
position: relative;
}
.mr-sidenav-link {
display: flex;
align-items: center;
gap: var(--mr-space-3);
padding: var(--mr-space-2-5) var(--mr-space-5);
font-size: var(--mr-text-sm);
font-weight: var(--mr-font-medium);
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
border-radius: var(--mr-radius-md);
transition: var(--mr-transition-all);
cursor: pointer;
}
.mr-sidenav-link:hover {
color: var(--mr-color-white);
background-color: rgba(255, 255, 255, 0.1);
}
.mr-sidenav-link.mr-active,
.mr-sidenav-link.mr-sidenav-active {
color: var(--mr-color-white);
background-color: var(--mr-color-primary);
font-weight: var(--mr-font-semibold);
}
/* ── Sidebar Nav Icon ────────────────────────────────────── */
.mr-sidenav-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
color: currentColor;
}
/* ── Sidebar Nav Label ───────────────────────────────────── */
.mr-sidenav-label {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── Sidebar Nav Badge ───────────────────────────────────── */
.mr-sidenav-badge {
margin-left: auto;
}
/* ── Sidebar Nav Header ──────────────────────────────────── */
.mr-sidenav-header {
padding: var(--mr-space-2-5) var(--mr-space-5);
font-size: var(--mr-text-xs);
font-weight: var(--mr-font-semibold);
color: rgba(255, 255, 255, 0.4);
text-transform: uppercase;
letter-spacing: var(--mr-tracking-wide);
margin-top: var(--mr-space-4);
}
.mr-sidenav-header:first-child {
margin-top: 0;
}
/* ── Collapsible Sidebar Nav Group ───────────────────────── */
.mr-sidenav-collapsible {
position: relative;
}
.mr-sidenav-collapsible-toggle {
position: relative;
}
.mr-sidenav-collapsible-toggle::after {
content: "";
position: absolute;
right: var(--mr-space-5);
top: 50%;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
transform: translateY(-50%);
transition: var(--mr-transition-transform);
}
.mr-sidenav-collapsible-open .mr-sidenav-collapsible-toggle::after {
transform: translateY(-50%) rotate(180deg);
}
.mr-sidenav-collapsible-content {
display: none;
padding-left: var(--mr-space-8);
}
.mr-sidenav-collapsible-open .mr-sidenav-collapsible-content {
display: block;
}
.mr-sidenav-collapsible-content .mr-sidenav-link {
font-size: var(--mr-text-xs);
padding-top: var(--mr-space-2);
padding-bottom: var(--mr-space-2);
}
/* ── Light Sidebar Variant ───────────────────────────────── */
.mr-sidenav-light .mr-sidenav-link {
color: var(--mr-text-secondary);
}
.mr-sidenav-light .mr-sidenav-link:hover {
color: var(--mr-text-primary);
background-color: var(--mr-surface-sunken);
}
.mr-sidenav-light .mr-sidenav-link.mr-active,
.mr-sidenav-light .mr-sidenav-link.mr-sidenav-active {
color: var(--mr-color-white);
background-color: var(--mr-color-primary);
}
.mr-sidenav-light .mr-sidenav-header {
color: var(--mr-text-muted);
}
/* ────────────────────────────────────────────────────── */
/* File: src/navigation/vertical-nav.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Navigation: Vertical Navigation
Stacked vertical nav (similar to sidebar but can be used anywhere)
============================================================ */
.mr-vnav {
display: flex;
flex-direction: column;
list-style: none;
margin: 0;
padding: 0;
}
.mr-vnav-item {
position: relative;
}
.mr-vnav-link {
display: flex;
align-items: center;
gap: var(--mr-space-2-5);
padding: var(--mr-space-2-5) var(--mr-space-4);
font-size: var(--mr-text-sm);
color: var(--mr-text-secondary);
text-decoration: none;
border-left: 3px solid transparent;
transition: var(--mr-transition-color);
}
.mr-vnav-link:hover {
color: var(--mr-text-primary);
background-color: var(--mr-surface-sunken);
border-left-color: var(--mr-color-gray-300);
}
.mr-vnav-link.mr-active {
color: var(--mr-color-primary);
background-color: var(--mr-color-primary-lighter);
border-left-color: var(--mr-color-primary);
font-weight: var(--mr-font-semibold);
}
/* ── Vertical Nav Group ──────────────────────────────────── */
.mr-vnav-group {
margin-bottom: var(--mr-space-6);
}
.mr-vnav-group-title {
padding: var(--mr-space-2) var(--mr-space-4);
font-size: var(--mr-text-xs);
font-weight: var(--mr-font-semibold);
color: var(--mr-text-muted);
text-transform: uppercase;
letter-spacing: var(--mr-tracking-wide);
}
/* ── Divided Variant ─────────────────────────────────────── */
.mr-vnav-divided .mr-vnav-item {
border-bottom: 1px solid var(--mr-border-subtle);
}
.mr-vnav-divided .mr-vnav-item:last-child {
border-bottom: none;
}
/* ── Compact Variant ─────────────────────────────────────── */
.mr-vnav-compact .mr-vnav-link {
padding: var(--mr-space-2) var(--mr-space-3);
font-size: var(--mr-text-xs);
}
/* ────────────────────────────────────────────────────── */
/* File: src/navigation/pagination.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Navigation: Pagination
Page navigation controls
============================================================ */
.mr-pagination {
display: flex;
align-items: center;
gap: var(--mr-space-2);
list-style: none;
margin: 0;
padding: 0;
}
.mr-page-item,
.mr-pagination-item {
display: inline-block;
}
.mr-page-link,
.mr-pagination-item {
display: flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
padding: 0 var(--mr-space-3);
font-size: var(--mr-text-sm);
font-weight: var(--mr-font-medium);
color: var(--mr-text-secondary);
background-color: var(--mr-surface-card);
border: 1px solid var(--mr-border-default);
border-radius: var(--mr-radius-md);
text-decoration: none;
cursor: pointer;
transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.mr-page-link:hover,
.mr-pagination-item:hover {
color: var(--mr-color-primary);
background-color: var(--mr-surface-sunken);
border-color: var(--mr-color-primary);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.mr-page-link:active,
.mr-pagination-item:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.mr-page-link:focus-visible,
.mr-pagination-item:focus-visible {
outline: none;
box-shadow: var(--mr-focus-ring);
}
/* ── Active Page ─────────────────────────────────────────── */
.mr-page-item.mr-page-active .mr-page-link,
.mr-page-link.mr-active,
.mr-pagination-item.mr-pagination-active {
color: var(--mr-color-white);
background: linear-gradient(135deg, var(--mr-color-primary) 0%, var(--mr-color-primary-active) 100%);
border-color: var(--mr-color-primary);
font-weight: var(--mr-font-semibold);
cursor: default;
box-shadow: 0 4px 12px rgba(0, 121, 174, 0.3);
transform: none;
}
.mr-pagination-item.mr-pagination-active:hover {
transform: none;
}
/* ── Disabled Page ───────────────────────────────────────── */
.mr-page-item.mr-page-disabled .mr-page-link,
.mr-page-link.mr-disabled,
.mr-pagination-item.mr-pagination-disabled {
color: var(--mr-text-muted);
background-color: var(--mr-input-disabled-bg);
border-color: var(--mr-border-subtle);
cursor: not-allowed;
pointer-events: none;
opacity: 0.6;
box-shadow: none;
}
.mr-pagination-item.mr-pagination-disabled:hover {
transform: none;
}
/* ── Pagination Sizes ────────────────────────────────────── */
.mr-pagination-sm .mr-page-link,
.mr-pagination-sm .mr-pagination-item {
min-width: 36px;
height: 36px;
padding: 0 var(--mr-space-2);
font-size: var(--mr-text-xs);
}
.mr-pagination-lg .mr-page-link,
.mr-pagination-lg .mr-pagination-item {
min-width: 50px;
height: 50px;
padding: 0 var(--mr-space-4);
font-size: var(--mr-text-base);
}
/* ── Rounded Pill Variant ────────────────────────────────── */
.mr-pagination-pill .mr-page-link,
.mr-pagination-pill .mr-pagination-item {
border-radius: var(--mr-radius-pill);
}
/* ── Prev/Next Items ─────────────────────────────────────── */
.mr-pagination-prev,
.mr-pagination-next {
font-weight: var(--mr-font-semibold);
padding: 0 var(--mr-space-4);
}
.mr-pagination-prev:hover,
.mr-pagination-next:hover {
color: var(--mr-color-white);
background: linear-gradient(135deg, var(--mr-color-primary) 0%, var(--mr-color-primary-active) 100%);
border-color: var(--mr-color-primary);
}
/* ── Centered Pagination ─────────────────────────────────── */
.mr-pagination-center {
justify-content: center;
}
/* ── Right-Aligned Pagination ────────────────────────────── */
.mr-pagination-end {
justify-content: flex-end;
}
/* ── Space Between Variant ───────────────────────────────── */
.mr-pagination-spaced {
justify-content: space-between;
}
/* ────────────────────────────────────────────────────── */
/* File: src/navigation/breadcrumbs.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Navigation: Breadcrumbs
Location hierarchy navigation
============================================================ */
.mr-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--mr-space-2);
list-style: none;
margin: 0;
padding: 0;
font-size: var(--mr-text-sm);
}
.mr-breadcrumb-item {
display: inline-flex;
align-items: center;
gap: var(--mr-space-2);
}
.mr-breadcrumb-link {
color: var(--mr-text-secondary);
text-decoration: none;
transition: var(--mr-transition-colors);
}
.mr-breadcrumb-link:hover {
color: var(--mr-color-primary);
text-decoration: underline;
}
.mr-breadcrumb-link:focus-visible {
outline: none;
box-shadow: var(--mr-focus-ring);
border-radius: var(--mr-radius-sm);
}
/* ── Separators ──────────────────────────────────────────── */
.mr-breadcrumb-item:not(:last-child)::after {
content: '/';
margin-left: var(--mr-space-2);
color: var(--mr-text-muted);
}
.mr-breadcrumb-chevron .mr-breadcrumb-item:not(:last-child)::after {
content: '›';
font-size: var(--mr-text-lg);
}
.mr-breadcrumb-arrow .mr-breadcrumb-item:not(:last-child)::after {
content: '→';
}
.mr-breadcrumb-dot .mr-breadcrumb-item:not(:last-child)::after {
content: '•';
}
/* ── Active/Current Item ─────────────────────────────────── */
.mr-breadcrumb-item.mr-breadcrumb-active,
.mr-breadcrumb-item:last-child {
color: var(--mr-text-primary);
font-weight: var(--mr-font-semibold);
}
.mr-breadcrumb-item.mr-breadcrumb-active .mr-breadcrumb-link,
.mr-breadcrumb-item:last-child .mr-breadcrumb-link {
color: var(--mr-text-primary);
pointer-events: none;
}
/* ── Sizes ───────────────────────────────────────────────── */
.mr-breadcrumb-sm {
font-size: var(--mr-text-xs);
gap: var(--mr-space-1);
}
.mr-breadcrumb-sm .mr-breadcrumb-item {
gap: var(--mr-space-1);
}
.mr-breadcrumb-lg {
font-size: var(--mr-text-base);
gap: var(--mr-space-3);
}
.mr-breadcrumb-lg .mr-breadcrumb-item {
gap: var(--mr-space-3);
}
/* ── Background Container Variant ────────────────────────── */
.mr-breadcrumb-container {
background-color: var(--mr-surface-raised);
border: 1px solid var(--mr-border-subtle);
border-radius: var(--mr-radius-md);
padding: var(--mr-space-3) var(--mr-space-4);
}
/* ── Truncated Breadcrumbs (ellipsis in middle) ──────────── */
.mr-breadcrumb-collapsed .mr-breadcrumb-item:not(:first-child):not(:last-child) {
display: none;
}
.mr-breadcrumb-collapsed .mr-breadcrumb-item:nth-child(2)::after {
content: '…';
margin-left: var(--mr-space-2);
color: var(--mr-text-muted);
}
/* ────────────────────────────────────────────────────── */
/* File: src/navigation/progress-bars.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Navigation: Progress Bars
Step indicators and progress visualization
============================================================ */
/* ── Linear Progress Bar ─────────────────────────────────── */
.mr-progress {
position: relative;
width: 100%;
height: 8px;
background-color: var(--mr-surface-sunken);
border-radius: var(--mr-radius-pill);
overflow: hidden;
}
.mr-progress-fill {
height: 100%;
background-color: var(--mr-color-primary);
border-radius: var(--mr-radius-pill);
transition: width 0.3s var(--mr-easing-standard);
}
/* ── Progress Sizes ──────────────────────────────────────── */
.mr-progress-sm {
height: 4px;
}
.mr-progress-md {
height: 8px;
}
.mr-progress-lg {
height: 12px;
}
.mr-progress-xl {
height: 16px;
}
/* ── Color Variants ──────────────────────────────────────── */
.mr-progress-success .mr-progress-fill {
background-color: var(--mr-color-success);
}
.mr-progress-warning .mr-progress-fill {
background-color: var(--mr-color-warning);
}
.mr-progress-danger .mr-progress-fill {
background-color: var(--mr-color-danger);
}
.mr-progress-accent .mr-progress-fill {
background-color: var(--mr-color-accent);
}
/* ── Striped Progress (animated) ─────────────────────────── */
.mr-progress-striped .mr-progress-fill {
background-image: linear-gradient(
45deg,
rgba(255, 255, 255, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,
transparent 75%,
transparent
);
background-size: 1rem 1rem;
}
.mr-progress-animated .mr-progress-fill {
animation: mr-progress-stripes 1s linear infinite;
}
@keyframes mr-progress-stripes {
0% {
background-position: 1rem 0;
}
100% {
background-position: 0 0;
}
}
/* ── Indeterminate Progress ──────────────────────────────── */
.mr-progress-indeterminate .mr-progress-fill {
width: 40% !important;
animation: mr-progress-indeterminate 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
@keyframes mr-progress-indeterminate {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(350%);
}
}
/* ── Progress with Label ─────────────────────────────────── */
.mr-progress-labeled {
display: flex;
align-items: center;
gap: var(--mr-space-3);
}
.mr-progress-labeled .mr-progress {
flex: 1;
}
.mr-progress-label {
font-size: var(--mr-text-sm);
font-weight: var(--mr-font-semibold);
color: var(--mr-text-secondary);
white-space: nowrap;
min-width: 40px;
text-align: right;
}
/* ============================================================
STEP PROGRESS INDICATORS
============================================================ */
.mr-steps {
display: flex;
align-items: center;
justify-content: space-between;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.mr-step {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
text-align: center;
}
.mr-step:not(:last-child)::after {
content: '';
position: absolute;
top: 16px;
left: 50%;
width: 100%;
height: 2px;
background-color: var(--mr-border-default);
z-index: -1;
}
.mr-step-indicator {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background-color: var(--mr-surface-raised);
border: 2px solid var(--mr-border-default);
color: var(--mr-text-muted);
font-size: var(--mr-text-sm);
font-weight: var(--mr-font-semibold);
margin-bottom: var(--mr-space-2);
transition: var(--mr-transition-all);
}
.mr-step-label {
font-size: var(--mr-text-sm);
color: var(--mr-text-secondary);
margin-top: var(--mr-space-1);
}
/* ── Completed Step ──────────────────────────────────────── */
.mr-step.mr-step-completed .mr-step-indicator {
background-color: var(--mr-color-primary);
border-color: var(--mr-color-primary);
color: var(--mr-color-white);
}
.mr-step.mr-step-completed::after {
background-color: var(--mr-color-primary);
}
.mr-step.mr-step-completed .mr-step-label {
color: var(--mr-text-primary);
}
/* ── Active Step ─────────────────────────────────────────── */
.mr-step.mr-step-active .mr-step-indicator {
background-color: var(--mr-color-white);
border-color: var(--mr-color-primary);
color: var(--mr-color-primary);
border-width: 3px;
box-shadow: var(--mr-shadow-md);
}
.mr-step.mr-step-active .mr-step-label {
color: var(--mr-text-primary);
font-weight: var(--mr-font-semibold);
}
/* ── Vertical Steps ──────────────────────────────────────── */
.mr-steps-vertical {
flex-direction: column;
align-items: flex-start;
}
.mr-steps-vertical .mr-step {
flex-direction: row;
align-items: flex-start;
text-align: left;
width: 100%;
padding: var(--mr-space-4) 0;
}
.mr-steps-vertical .mr-step:not(:last-child)::after {
top: 48px;
left: 16px;
width: 2px;
height: 100%;
}
.mr-steps-vertical .mr-step-label {
margin-top: 0;
margin-left: var(--mr-space-4);
}
/* ────────────────────────────────────────────────────── */
/* File: src/sections/hero.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Page Sections: Hero
Large introductory sections with headline, CTA, and imagery
============================================================ */
.mr-hero {
position: relative;
display: flex;
align-items: center;
min-height: 500px;
padding: var(--mr-space-20) var(--mr-space-6);
background: var(--mr-gradient-hero);
color: var(--mr-color-white);
overflow: hidden;
}
.mr-hero-content {
position: relative;
z-index: 2;
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.mr-hero-headline {
font-size: var(--mr-text-5xl);
font-weight: var(--mr-font-bold);
line-height: var(--mr-leading-tight);
margin-bottom: var(--mr-space-6);
color: var(--mr-color-white);
}
.mr-hero-subheadline {
font-size: var(--mr-text-xl);
line-height: var(--mr-leading-relaxed);
margin-bottom: var(--mr-space-8);
color: rgba(255, 255, 255, 0.95);
}
.mr-hero-actions {
display: flex;
flex-wrap: wrap;
gap: var(--mr-space-4);
justify-content: center;
}
/* ── Hero with Background Image ──────────────────────────── */
.mr-hero-image {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.mr-hero-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(180deg, rgba(0, 65, 101, 0.85) 0%, rgba(21, 39, 59, 0.9) 100%);
z-index: 1;
}
/* ── Split Hero (Text + Image Side-by-Side) ──────────────── */
.mr-hero-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--mr-space-12);
align-items: center;
min-height: 600px;
padding: var(--mr-space-16) var(--mr-space-6);
}
.mr-hero-split .mr-hero-content {
text-align: left;
margin: 0;
}
.mr-hero-split .mr-hero-actions {
justify-content: flex-start;
}
.mr-hero-media {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.mr-hero-media img {
max-width: 100%;
height: auto;
border-radius: var(--mr-radius-lg);
box-shadow: var(--mr-shadow-2xl);
}
/* ── Centered Hero (Default) ─────────────────────────────── */
.mr-hero-center {
justify-content: center;
text-align: center;
}
.mr-hero-center .mr-hero-content {
text-align: center;
}
/* ── Left-Aligned Hero ───────────────────────────────────── */
.mr-hero-left {
justify-content: flex-start;
}
.mr-hero-left .mr-hero-content {
text-align: left;
margin: 0;
max-width: 700px;
}
.mr-hero-left .mr-hero-actions {
justify-content: flex-start;
}
/* ── Compact Hero ────────────────────────────────────────── */
.mr-hero-compact {
min-height: 350px;
padding: var(--mr-space-12) var(--mr-space-6);
}
.mr-hero-compact .mr-hero-headline {
font-size: var(--mr-text-4xl);
margin-bottom: var(--mr-space-4);
}
.mr-hero-compact .mr-hero-subheadline {
font-size: var(--mr-text-lg);
margin-bottom: var(--mr-space-6);
}
/* ── Full Viewport Hero ──────────────────────────────────── */
.mr-hero-fullscreen {
min-height: 100vh;
}
/* ── Light Hero Variant ──────────────────────────────────── */
.mr-hero-light {
background: var(--mr-surface-page);
color: var(--mr-text-primary);
}
.mr-hero-light .mr-hero-headline {
color: var(--mr-text-primary);
}
.mr-hero-light .mr-hero-subheadline {
color: var(--mr-text-secondary);
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 64em) {
.mr-hero {
padding: var(--mr-space-16) var(--mr-space-4);
min-height: 400px;
}
.mr-hero-headline {
font-size: var(--mr-text-4xl);
}
.mr-hero-subheadline {
font-size: var(--mr-text-lg);
}
.mr-hero-split {
grid-template-columns: 1fr;
gap: var(--mr-space-8);
padding: var(--mr-space-12) var(--mr-space-4);
}
.mr-hero-split .mr-hero-content {
text-align: center;
}
.mr-hero-split .mr-hero-actions {
justify-content: center;
}
}
@media (max-width: 48em) {
.mr-hero-headline {
font-size: var(--mr-text-3xl);
}
.mr-hero-subheadline {
font-size: var(--mr-text-base);
}
.mr-hero-compact .mr-hero-headline {
font-size: var(--mr-text-2xl);
}
}
/* ────────────────────────────────────────────────────── */
/* File: src/sections/features.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Page Sections: Features
Product/service feature showcases
============================================================ */
.mr-features {
padding: var(--mr-space-20) var(--mr-space-6);
background-color: var(--mr-surface-page);
}
.mr-features-header {
text-align: center;
max-width: 800px;
margin: 0 auto var(--mr-space-16);
}
.mr-features-title {
font-size: var(--mr-text-4xl);
font-weight: var(--mr-font-bold);
margin-bottom: var(--mr-space-4);
color: var(--mr-text-primary);
}
.mr-features-subtitle {
font-size: var(--mr-text-lg);
color: var(--mr-text-secondary);
line-height: var(--mr-leading-relaxed);
}
.mr-features-grid {
display: grid;
gap: var(--mr-space-8);
max-width: 1200px;
margin: 0 auto;
}
/* ── 3-Column Grid (Default) ─────────────────────────────── */
.mr-features-grid-3 {
grid-template-columns: repeat(3, 1fr);
}
/* ── 2-Column Grid ───────────────────────────────────────── */
.mr-features-grid-2 {
grid-template-columns: repeat(2, 1fr);
}
/* ── 4-Column Grid ───────────────────────────────────────── */
.mr-features-grid-4 {
grid-template-columns: repeat(4, 1fr);
}
/* ── Feature Card ────────────────────────────────────────── */
.mr-feature {
display: flex;
flex-direction: column;
padding: var(--mr-space-6);
background-color: var(--mr-surface-card);
border: 1px solid var(--mr-border-subtle);
border-radius: var(--mr-radius-lg);
transition: var(--mr-transition-all);
}
.mr-feature:hover {
transform: translateY(-4px);
box-shadow: var(--mr-shadow-lg);
border-color: var(--mr-border-default);
}
.mr-feature-icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
margin-bottom: var(--mr-space-4);
border-radius: var(--mr-radius-md);
background: linear-gradient(135deg, var(--mr-color-primary), var(--mr-color-navy));
color: var(--mr-color-white);
font-size: var(--mr-text-2xl);
}
.mr-feature-title {
font-size: var(--mr-text-xl);
font-weight: var(--mr-font-semibold);
margin-bottom: var(--mr-space-3);
color: var(--mr-text-primary);
}
.mr-feature-description {
font-size: var(--mr-text-base);
line-height: var(--mr-leading-relaxed);
color: var(--mr-text-secondary);
flex: 1;
}
.mr-feature-link {
margin-top: var(--mr-space-4);
font-size: var(--mr-text-sm);
font-weight: var(--mr-font-semibold);
color: var(--mr-color-primary);
text-decoration: none;
transition: var(--mr-transition-colors);
}
.mr-feature-link:hover {
color: var(--mr-color-navy);
}
/* ── Icon Variants ───────────────────────────────────────── */
.mr-feature-icon-accent {
background: linear-gradient(135deg, var(--mr-color-accent), var(--mr-color-gold-dark));
}
.mr-feature-icon-outline {
background: transparent;
border: 2px solid var(--mr-color-primary);
color: var(--mr-color-primary);
}
/* ── Horizontal Feature Layout ───────────────────────────── */
.mr-feature-horizontal {
flex-direction: row;
align-items: flex-start;
gap: var(--mr-space-6);
}
.mr-feature-horizontal .mr-feature-icon {
flex-shrink: 0;
margin-bottom: 0;
}
.mr-feature-horizontal .mr-feature-content {
flex: 1;
}
/* ── Centered Feature ────────────────────────────────────── */
.mr-feature-center {
text-align: center;
align-items: center;
}
.mr-feature-center .mr-feature-icon {
margin-left: auto;
margin-right: auto;
}
/* ── Minimal Feature (No Card) ───────────────────────────── */
.mr-feature-minimal {
background-color: transparent;
border: none;
padding: 0;
}
.mr-feature-minimal:hover {
transform: none;
box-shadow: none;
}
/* ── Alternate Background ────────────────────────────────── */
.mr-features-alt {
background-color: var(--mr-surface-raised);
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 64em) {
.mr-features {
padding: var(--mr-space-16) var(--mr-space-4);
}
.mr-features-grid-3,
.mr-features-grid-4 {
grid-template-columns: repeat(2, 1fr);
}
.mr-features-title {
font-size: var(--mr-text-3xl);
}
}
@media (max-width: 48em) {
.mr-features-grid-2,
.mr-features-grid-3,
.mr-features-grid-4 {
grid-template-columns: 1fr;
}
.mr-features-title {
font-size: var(--mr-text-2xl);
}
.mr-feature-horizontal {
flex-direction: column;
text-align: center;
}
.mr-feature-horizontal .mr-feature-icon {
margin: 0 auto var(--mr-space-4);
}
}
/* ────────────────────────────────────────────────────── */
/* File: src/sections/cta.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Page Sections: Call-to-Action (CTA)
Conversion-focused action sections
============================================================ */
.mr-cta {
position: relative;
padding: var(--mr-space-20) var(--mr-space-6);
background: var(--mr-gradient-hero);
color: var(--mr-color-white);
text-align: center;
overflow: hidden;
}
.mr-cta-content {
position: relative;
z-index: 2;
max-width: 800px;
margin: 0 auto;
}
.mr-cta-headline {
font-size: var(--mr-text-4xl);
font-weight: var(--mr-font-bold);
line-height: var(--mr-leading-tight);
margin-bottom: var(--mr-space-4);
color: var(--mr-color-white);
}
.mr-cta-text {
font-size: var(--mr-text-lg);
line-height: var(--mr-leading-relaxed);
margin-bottom: var(--mr-space-8);
color: rgba(255, 255, 255, 0.95);
}
.mr-cta-actions {
display: flex;
flex-wrap: wrap;
gap: var(--mr-space-4);
justify-content: center;
}
/* ── Light CTA Variant ───────────────────────────────────── */
.mr-cta-light {
background: var(--mr-surface-raised);
border: 1px solid var(--mr-border-default);
color: var(--mr-text-primary);
}
.mr-cta-light .mr-cta-headline {
color: var(--mr-text-primary);
}
.mr-cta-light .mr-cta-text {
color: var(--mr-text-secondary);
}
/* ── Accent CTA Variant ──────────────────────────────────── */
.mr-cta-accent {
background: linear-gradient(135deg, var(--mr-color-accent), var(--mr-color-gold-dark));
}
/* ── CTA with Background Image ───────────────────────────── */
.mr-cta-image {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.mr-cta-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(180deg, rgba(0, 65, 101, 0.9) 0%, rgba(21, 39, 59, 0.95) 100%);
z-index: 1;
}
/* ── Split CTA (Text + Form/Image) ───────────────────────── */
.mr-cta-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--mr-space-12);
align-items: center;
padding: var(--mr-space-16) var(--mr-space-6);
text-align: left;
}
.mr-cta-split .mr-cta-content {
margin: 0;
}
.mr-cta-split .mr-cta-actions {
justify-content: flex-start;
}
.mr-cta-media {
display: flex;
align-items: center;
justify-content: center;
}
.mr-cta-media img {
max-width: 100%;
height: auto;
border-radius: var(--mr-radius-lg);
}
/* ── Compact CTA ─────────────────────────────────────────── */
.mr-cta-compact {
padding: var(--mr-space-12) var(--mr-space-6);
}
.mr-cta-compact .mr-cta-headline {
font-size: var(--mr-text-3xl);
margin-bottom: var(--mr-space-3);
}
.mr-cta-compact .mr-cta-text {
font-size: var(--mr-text-base);
margin-bottom: var(--mr-space-6);
}
/* ── Inline CTA (Horizontal Layout) ──────────────────────── */
.mr-cta-inline {
padding: var(--mr-space-8) var(--mr-space-6);
}
.mr-cta-inline .mr-cta-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mr-space-6);
text-align: left;
}
.mr-cta-inline .mr-cta-headline {
margin-bottom: var(--mr-space-2);
font-size: var(--mr-text-2xl);
}
.mr-cta-inline .mr-cta-text {
margin-bottom: 0;
font-size: var(--mr-text-base);
}
.mr-cta-inline .mr-cta-actions {
flex-shrink: 0;
justify-content: flex-end;
}
/* ── CTA Card (Bordered Container) ───────────────────────── */
.mr-cta-card {
max-width: 900px;
margin: 0 auto;
background-color: var(--mr-surface-card);
border: 1px solid var(--mr-border-default);
border-radius: var(--mr-radius-xl);
box-shadow: var(--mr-shadow-xl);
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 64em) {
.mr-cta {
padding: var(--mr-space-16) var(--mr-space-4);
}
.mr-cta-headline {
font-size: var(--mr-text-3xl);
}
.mr-cta-split {
grid-template-columns: 1fr;
gap: var(--mr-space-8);
text-align: center;
}
.mr-cta-split .mr-cta-actions {
justify-content: center;
}
.mr-cta-inline .mr-cta-content {
flex-direction: column;
text-align: center;
}
.mr-cta-inline .mr-cta-actions {
justify-content: center;
}
}
@media (max-width: 48em) {
.mr-cta-headline {
font-size: var(--mr-text-2xl);
}
.mr-cta-text {
font-size: var(--mr-text-base);
}
}
/* ────────────────────────────────────────────────────── */
/* File: src/sections/bento-grid.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Page Sections: Bento Grid
Masonry-style tile layouts (Pinterest-style)
============================================================ */
.mr-bento {
padding: var(--mr-space-20) var(--mr-space-6);
background-color: var(--mr-surface-page);
}
.mr-bento-header {
text-align: center;
max-width: 800px;
margin: 0 auto var(--mr-space-16);
}
.mr-bento-title {
font-size: var(--mr-text-4xl);
font-weight: var(--mr-font-bold);
margin-bottom: var(--mr-space-4);
color: var(--mr-text-primary);
}
.mr-bento-subtitle {
font-size: var(--mr-text-lg);
color: var(--mr-text-secondary);
line-height: var(--mr-leading-relaxed);
}
.mr-bento-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--mr-space-6);
max-width: 1200px;
margin: 0 auto;
}
/* ── Bento Tile (Base) ───────────────────────────────────── */
.mr-bento-tile {
position: relative;
padding: var(--mr-space-6);
background-color: var(--mr-surface-card);
border: 1px solid var(--mr-border-subtle);
border-radius: var(--mr-radius-lg);
transition: var(--mr-transition-all);
display: flex;
flex-direction: column;
overflow: hidden;
}
.mr-bento-tile:hover {
transform: translateY(-2px);
box-shadow: var(--mr-shadow-lg);
border-color: var(--mr-border-default);
}
/* ── Tile Sizes (Grid Span) ──────────────────────────────── */
.mr-bento-sm {
grid-column: span 2;
grid-row: span 1;
}
.mr-bento-md {
grid-column: span 3;
grid-row: span 1;
}
.mr-bento-lg {
grid-column: span 4;
grid-row: span 2;
}
.mr-bento-xl {
grid-column: span 6;
grid-row: span 2;
}
.mr-bento-tall {
grid-row: span 2;
}
.mr-bento-wide {
grid-column: span 3;
}
/* ── Tile Content ────────────────────────────────────────── */
.mr-bento-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-bottom: var(--mr-space-4);
border-radius: var(--mr-radius-md);
background: linear-gradient(135deg, var(--mr-color-primary), var(--mr-color-navy));
color: var(--mr-color-white);
font-size: var(--mr-text-xl);
}
.mr-bento-tile-title {
font-size: var(--mr-text-xl);
font-weight: var(--mr-font-semibold);
margin-bottom: var(--mr-space-3);
color: var(--mr-text-primary);
}
.mr-bento-tile-description {
font-size: var(--mr-text-base);
line-height: var(--mr-leading-relaxed);
color: var(--mr-text-secondary);
flex: 1;
}
.mr-bento-tile-image {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: var(--mr-radius-md);
margin-bottom: var(--mr-space-4);
}
.mr-bento-lg .mr-bento-tile-image,
.mr-bento-xl .mr-bento-tile-image {
height: 300px;
}
/* ── Accent Tile Variants ────────────────────────────────── */
.mr-bento-tile-primary {
background: var(--mr-gradient-hero);
color: var(--mr-color-white);
border-color: transparent;
}
.mr-bento-tile-primary .mr-bento-tile-title,
.mr-bento-tile-primary .mr-bento-tile-description {
color: var(--mr-color-white);
}
.mr-bento-tile-accent {
background: linear-gradient(135deg, var(--mr-color-accent), var(--mr-color-gold-dark));
color: var(--mr-color-white);
border-color: transparent;
}
.mr-bento-tile-accent .mr-bento-tile-title,
.mr-bento-tile-accent .mr-bento-tile-description {
color: var(--mr-color-white);
}
/* ── Centered Tile ───────────────────────────────────────── */
.mr-bento-tile-center {
text-align: center;
align-items: center;
justify-content: center;
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 64em) {
.mr-bento {
padding: var(--mr-space-16) var(--mr-space-4);
}
.mr-bento-grid {
grid-template-columns: repeat(4, 1fr);
}
.mr-bento-sm {
grid-column: span 2;
}
.mr-bento-md {
grid-column: span 4;
}
.mr-bento-lg {
grid-column: span 4;
}
.mr-bento-xl {
grid-column: span 4;
}
}
@media (max-width: 48em) {
.mr-bento-grid {
grid-template-columns: 1fr;
}
.mr-bento-sm,
.mr-bento-md,
.mr-bento-lg,
.mr-bento-xl,
.mr-bento-wide {
grid-column: span 1;
}
.mr-bento-title {
font-size: var(--mr-text-2xl);
}
}
/* ────────────────────────────────────────────────────── */
/* File: src/sections/headers.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Page Sections: Headers
Page and section headers with breadcrumbs
============================================================ */
.mr-page-header {
padding: var(--mr-space-12) var(--mr-space-6);
background-color: var(--mr-surface-raised);
border-bottom: 1px solid var(--mr-border-default);
}
.mr-page-header-container {
max-width: 1200px;
margin: 0 auto;
}
.mr-page-header-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mr-space-6);
margin-bottom: var(--mr-space-6);
}
.mr-page-title {
font-size: var(--mr-text-4xl);
font-weight: var(--mr-font-bold);
color: var(--mr-text-primary);
margin: 0;
}
.mr-page-subtitle {
font-size: var(--mr-text-lg);
color: var(--mr-text-secondary);
line-height: var(--mr-leading-relaxed);
margin-top: var(--mr-space-3);
}
.mr-page-header-actions {
display: flex;
align-items: center;
gap: var(--mr-space-3);
flex-shrink: 0;
}
/* ── Section Header (Within Page) ────────────────────────── */
.mr-section-header {
margin-bottom: var(--mr-space-12);
}
.mr-section-header-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mr-space-6);
margin-bottom: var(--mr-space-4);
}
.mr-section-title {
font-size: var(--mr-text-3xl);
font-weight: var(--mr-font-bold);
color: var(--mr-text-primary);
margin: 0;
}
.mr-section-subtitle {
font-size: var(--mr-text-base);
color: var(--mr-text-secondary);
line-height: var(--mr-leading-relaxed);
max-width: 800px;
}
.mr-section-header-actions {
display: flex;
align-items: center;
gap: var(--mr-space-3);
}
/* ── Centered Header ─────────────────────────────────────── */
.mr-page-header-center,
.mr-section-header-center {
text-align: center;
}
.mr-page-header-center .mr-page-header-top,
.mr-section-header-center .mr-section-header-top {
flex-direction: column;
align-items: center;
}
.mr-section-header-center .mr-section-subtitle {
margin-left: auto;
margin-right: auto;
}
/* ── Compact Header ──────────────────────────────────────── */
.mr-page-header-compact {
padding: var(--mr-space-8) var(--mr-space-6);
}
.mr-page-header-compact .mr-page-title {
font-size: var(--mr-text-3xl);
}
/* ── Header with Divider ─────────────────────────────────── */
.mr-page-header-divided {
border-bottom: 2px solid var(--mr-border-strong);
}
.mr-section-header-divided {
padding-bottom: var(--mr-space-6);
border-bottom: 1px solid var(--mr-border-default);
margin-bottom: var(--mr-space-8);
}
/* ── Header with Background ──────────────────────────────── */
.mr-page-header-filled {
background: var(--mr-gradient-hero);
color: var(--mr-color-white);
padding: var(--mr-space-16) var(--mr-space-6);
}
.mr-page-header-filled .mr-page-title,
.mr-page-header-filled .mr-section-title {
color: var(--mr-color-white);
}
.mr-page-header-filled .mr-page-subtitle,
.mr-page-header-filled .mr-section-subtitle {
color: rgba(255, 255, 255, 0.95);
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 64em) {
.mr-page-header {
padding: var(--mr-space-8) var(--mr-space-4);
}
.mr-page-title {
font-size: var(--mr-text-3xl);
}
.mr-section-title {
font-size: var(--mr-text-2xl);
}
.mr-page-header-top,
.mr-section-header-top {
flex-direction: column;
align-items: flex-start;
}
.mr-page-header-actions,
.mr-section-header-actions {
width: 100%;
justify-content: flex-start;
}
}
@media (max-width: 48em) {
.mr-page-title {
font-size: var(--mr-text-2xl);
}
.mr-section-title {
font-size: var(--mr-text-xl);
}
.mr-page-subtitle,
.mr-section-subtitle {
font-size: var(--mr-text-base);
}
}
/* ────────────────────────────────────────────────────── */
/* File: src/sections/stats.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Page Sections: Stats
Statistical highlights and metrics
============================================================ */
.mr-stats {
padding: var(--mr-space-20) var(--mr-space-6);
background-color: var(--mr-surface-page);
}
.mr-stats-header {
text-align: center;
max-width: 800px;
margin: 0 auto var(--mr-space-16);
}
.mr-stats-title {
font-size: var(--mr-text-4xl);
font-weight: var(--mr-font-bold);
margin-bottom: var(--mr-space-4);
color: var(--mr-text-primary);
}
.mr-stats-subtitle {
font-size: var(--mr-text-lg);
color: var(--mr-text-secondary);
line-height: var(--mr-leading-relaxed);
}
.mr-stats-grid {
display: grid;
gap: var(--mr-space-8);
max-width: 1200px;
margin: 0 auto;
}
/* ── Grid Layouts ────────────────────────────────────────── */
.mr-stats-grid-2 {
grid-template-columns: repeat(2, 1fr);
}
.mr-stats-grid-3 {
grid-template-columns: repeat(3, 1fr);
}
.mr-stats-grid-4 {
grid-template-columns: repeat(4, 1fr);
}
/* ── Stat Card ───────────────────────────────────────────── */
.mr-stat {
display: flex;
flex-direction: column;
padding: var(--mr-space-8);
background-color: var(--mr-surface-card);
border: 1px solid var(--mr-border-subtle);
border-radius: var(--mr-radius-lg);
text-align: center;
transition: var(--mr-transition-all);
}
.mr-stat:hover {
border-color: var(--mr-border-default);
box-shadow: var(--mr-shadow-md);
transform: translateY(-2px);
}
.mr-stat-value {
font-size: var(--mr-text-5xl);
font-weight: var(--mr-font-bold);
color: var(--mr-color-primary);
line-height: 1;
margin-bottom: var(--mr-space-3);
}
.mr-stat-label {
font-size: var(--mr-text-lg);
font-weight: var(--mr-font-medium);
color: var(--mr-text-primary);
margin-bottom: var(--mr-space-2);
}
.mr-stat-description {
font-size: var(--mr-text-sm);
color: var(--mr-text-secondary);
line-height: var(--mr-leading-relaxed);
}
/* ── Icon Stat Variant ───────────────────────────────────── */
.mr-stat-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
margin: 0 auto var(--mr-space-4);
border-radius: var(--mr-radius-md);
background: linear-gradient(135deg, var(--mr-color-primary), var(--mr-color-navy));
color: var(--mr-color-white);
font-size: var(--mr-text-2xl);
}
/* ── Minimal Stat (No Card) ──────────────────────────────── */
.mr-stat-minimal {
background-color: transparent;
border: none;
padding: var(--mr-space-4);
}
.mr-stat-minimal:hover {
transform: none;
box-shadow: none;
}
/* ── Left-Aligned Stat ───────────────────────────────────── */
.mr-stat-left {
text-align: left;
}
/* ── Horizontal Stat Layout ──────────────────────────────── */
.mr-stat-horizontal {
flex-direction: row;
align-items: center;
gap: var(--mr-space-6);
text-align: left;
}
.mr-stat-horizontal .mr-stat-value {
flex-shrink: 0;
margin-bottom: 0;
}
.mr-stat-horizontal .mr-stat-icon {
margin: 0;
flex-shrink: 0;
}
/* ── Background Variants ─────────────────────────────────── */
.mr-stats-dark {
background: var(--mr-gradient-hero);
color: var(--mr-color-white);
}
.mr-stats-dark .mr-stats-title {
color: var(--mr-color-white);
}
.mr-stats-dark .mr-stats-subtitle {
color: rgba(255, 255, 255, 0.95);
}
.mr-stats-dark .mr-stat {
background-color: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
}
.mr-stats-dark .mr-stat:hover {
background-color: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
}
.mr-stats-dark .mr-stat-value {
color: var(--mr-color-white);
}
.mr-stats-dark .mr-stat-label {
color: var(--mr-color-white);
}
.mr-stats-dark .mr-stat-description {
color: rgba(255, 255, 255, 0.85);
}
/* ── Compact Stats ───────────────────────────────────────── */
.mr-stats-compact {
padding: var(--mr-space-12) var(--mr-space-6);
}
.mr-stats-compact .mr-stat {
padding: var(--mr-space-6);
}
.mr-stats-compact .mr-stat-value {
font-size: var(--mr-text-4xl);
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 64em) {
.mr-stats {
padding: var(--mr-space-16) var(--mr-space-4);
}
.mr-stats-grid-3,
.mr-stats-grid-4 {
grid-template-columns: repeat(2, 1fr);
}
.mr-stats-title {
font-size: var(--mr-text-3xl);
}
.mr-stat-value {
font-size: var(--mr-text-4xl);
}
}
@media (max-width: 48em) {
.mr-stats-grid-2,
.mr-stats-grid-3,
.mr-stats-grid-4 {
grid-template-columns: 1fr;
}
.mr-stats-title {
font-size: var(--mr-text-2xl);
}
.mr-stat-value {
font-size: var(--mr-text-3xl);
}
.mr-stat-horizontal {
flex-direction: column;
text-align: center;
}
.mr-stat-horizontal .mr-stat-icon {
margin: 0 auto var(--mr-space-4);
}
}
/* ────────────────────────────────────────────────────── */
/* File: src/sections/blog.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Page Sections: Blog
Article listings and blog grids
============================================================ */
.mr-blog {
padding: var(--mr-space-20) var(--mr-space-6);
background-color: var(--mr-surface-page);
}
.mr-blog-header {
text-align: center;
max-width: 800px;
margin: 0 auto var(--mr-space-16);
}
.mr-blog-title {
font-size: var(--mr-text-4xl);
font-weight: var(--mr-font-bold);
margin-bottom: var(--mr-space-4);
color: var(--mr-text-primary);
}
.mr-blog-subtitle {
font-size: var(--mr-text-lg);
color: var(--mr-text-secondary);
line-height: var(--mr-leading-relaxed);
}
.mr-blog-grid {
display: grid;
gap: var(--mr-space-8);
max-width: 1200px;
margin: 0 auto;
}
/* ── Grid Layouts ────────────────────────────────────────── */
.mr-blog-grid-2 {
grid-template-columns: repeat(2, 1fr);
}
.mr-blog-grid-3 {
grid-template-columns: repeat(3, 1fr);
}
/* ── Blog Post Card ──────────────────────────────────────── */
.mr-blog-post {
display: flex;
flex-direction: column;
background-color: var(--mr-surface-card);
border: 1px solid var(--mr-border-subtle);
border-radius: var(--mr-radius-lg);
overflow: hidden;
transition: var(--mr-transition-all);
}
.mr-blog-post:hover {
transform: translateY(-4px);
box-shadow: var(--mr-shadow-lg);
border-color: var(--mr-border-default);
}
.mr-blog-post-image {
width: 100%;
height: 240px;
object-fit: cover;
background-color: var(--mr-surface-sunken);
}
.mr-blog-post-content {
padding: var(--mr-space-6);
flex: 1;
display: flex;
flex-direction: column;
}
.mr-blog-post-meta {
display: flex;
align-items: center;
gap: var(--mr-space-3);
margin-bottom: var(--mr-space-3);
font-size: var(--mr-text-sm);
color: var(--mr-text-muted);
}
.mr-blog-post-category {
display: inline-block;
padding: var(--mr-space-1) var(--mr-space-3);
background-color: var(--mr-color-primary);
color: var(--mr-color-white);
border-radius: var(--mr-radius-pill);
font-size: var(--mr-text-xs);
font-weight: var(--mr-font-semibold);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.mr-blog-post-date {
display: flex;
align-items: center;
gap: var(--mr-space-1);
}
.mr-blog-post-title {
font-size: var(--mr-text-xl);
font-weight: var(--mr-font-semibold);
margin-bottom: var(--mr-space-3);
color: var(--mr-text-primary);
line-height: var(--mr-leading-snug);
}
.mr-blog-post-title a {
color: inherit;
text-decoration: none;
transition: var(--mr-transition-colors);
}
.mr-blog-post-title a:hover {
color: var(--mr-color-primary);
}
.mr-blog-post-excerpt {
font-size: var(--mr-text-base);
line-height: var(--mr-leading-relaxed);
color: var(--mr-text-secondary);
margin-bottom: var(--mr-space-4);
flex: 1;
}
.mr-blog-post-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: var(--mr-space-4);
border-top: 1px solid var(--mr-border-subtle);
}
.mr-blog-post-author {
display: flex;
align-items: center;
gap: var(--mr-space-3);
}
.mr-blog-post-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
}
.mr-blog-post-author-name {
font-size: var(--mr-text-sm);
font-weight: var(--mr-font-medium);
color: var(--mr-text-primary);
}
.mr-blog-post-read-more {
font-size: var(--mr-text-sm);
font-weight: var(--mr-font-semibold);
color: var(--mr-color-primary);
text-decoration: none;
transition: var(--mr-transition-colors);
}
.mr-blog-post-read-more:hover {
color: var(--mr-color-navy);
}
/* ── Horizontal Blog Post ────────────────────────────────── */
.mr-blog-post-horizontal {
flex-direction: row;
}
.mr-blog-post-horizontal .mr-blog-post-image {
width: 320px;
height: auto;
flex-shrink: 0;
}
/* ── Featured Post (Larger) ──────────────────────────────── */
.mr-blog-post-featured {
grid-column: span 2;
}
.mr-blog-post-featured .mr-blog-post-image {
height: 400px;
}
.mr-blog-post-featured .mr-blog-post-title {
font-size: var(--mr-text-3xl);
}
/* ── List View (Compact) ─────────────────────────────────── */
.mr-blog-list {
display: flex;
flex-direction: column;
gap: var(--mr-space-6);
}
.mr-blog-list .mr-blog-post {
flex-direction: row;
}
.mr-blog-list .mr-blog-post-image {
width: 200px;
height: 150px;
flex-shrink: 0;
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 64em) {
.mr-blog {
padding: var(--mr-space-16) var(--mr-space-4);
}
.mr-blog-grid-3 {
grid-template-columns: repeat(2, 1fr);
}
.mr-blog-title {
font-size: var(--mr-text-3xl);
}
.mr-blog-post-horizontal {
flex-direction: column;
}
.mr-blog-post-horizontal .mr-blog-post-image {
width: 100%;
height: 240px;
}
.mr-blog-post-featured {
grid-column: span 1;
}
.mr-blog-post-featured .mr-blog-post-image {
height: 240px;
}
}
@media (max-width: 48em) {
.mr-blog-grid-2,
.mr-blog-grid-3 {
grid-template-columns: 1fr;
}
.mr-blog-title {
font-size: var(--mr-text-2xl);
}
.mr-blog-list .mr-blog-post {
flex-direction: column;
}
.mr-blog-list .mr-blog-post-image {
width: 100%;
height: 200px;
}
}
/* ────────────────────────────────────────────────────── */
/* File: src/sections/contact.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Page Sections: Contact
Contact forms and information sections
============================================================ */
.mr-contact {
padding: var(--mr-space-20) var(--mr-space-6);
background-color: var(--mr-surface-page);
}
.mr-contact-header {
text-align: center;
max-width: 800px;
margin: 0 auto var(--mr-space-16);
}
.mr-contact-title {
font-size: var(--mr-text-4xl);
font-weight: var(--mr-font-bold);
margin-bottom: var(--mr-space-4);
color: var(--mr-text-primary);
}
.mr-contact-subtitle {
font-size: var(--mr-text-lg);
color: var(--mr-text-secondary);
line-height: var(--mr-leading-relaxed);
}
/* ── Split Layout: Form + Info ───────────────────────────── */
.mr-contact-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--mr-space-12);
max-width: 1200px;
margin: 0 auto;
}
.mr-contact-form-wrapper {
background-color: var(--mr-surface-card);
border: 1px solid var(--mr-border-subtle);
border-radius: var(--mr-radius-lg);
padding: var(--mr-space-8);
}
.mr-contact-form-title {
font-size: var(--mr-text-2xl);
font-weight: var(--mr-font-semibold);
margin-bottom: var(--mr-space-6);
color: var(--mr-text-primary);
}
.mr-contact-info {
display: flex;
flex-direction: column;
gap: var(--mr-space-6);
}
.mr-contact-info-item {
display: flex;
gap: var(--mr-space-4);
}
.mr-contact-info-icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: var(--mr-radius-md);
background: linear-gradient(135deg, var(--mr-color-primary), var(--mr-color-navy));
color: var(--mr-color-white);
font-size: var(--mr-text-xl);
}
.mr-contact-info-content {
flex: 1;
}
.mr-contact-info-label {
font-size: var(--mr-text-sm);
font-weight: var(--mr-font-semibold);
color: var(--mr-text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--mr-space-1);
}
.mr-contact-info-value {
font-size: var(--mr-text-lg);
color: var(--mr-text-primary);
line-height: var(--mr-leading-relaxed);
}
.mr-contact-info-value a {
color: var(--mr-color-primary);
text-decoration: none;
transition: var(--mr-transition-colors);
}
.mr-contact-info-value a:hover {
color: var(--mr-color-navy);
text-decoration: underline;
}
/* ── Card Layout (Centered Form) ─────────────────────────── */
.mr-contact-card {
max-width: 700px;
margin: 0 auto;
background-color: var(--mr-surface-card);
border: 1px solid var(--mr-border-subtle);
border-radius: var(--mr-radius-xl);
padding: var(--mr-space-10);
box-shadow: var(--mr-shadow-lg);
}
/* ── Contact Methods Grid ────────────────────────────────── */
.mr-contact-methods {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--mr-space-6);
max-width: 1000px;
margin: var(--mr-space-12) auto 0;
}
.mr-contact-method {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--mr-space-6);
background-color: var(--mr-surface-card);
border: 1px solid var(--mr-border-subtle);
border-radius: var(--mr-radius-lg);
transition: var(--mr-transition-all);
}
.mr-contact-method:hover {
transform: translateY(-2px);
box-shadow: var(--mr-shadow-md);
border-color: var(--mr-border-default);
}
.mr-contact-method-icon {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
margin-bottom: var(--mr-space-4);
border-radius: var(--mr-radius-md);
background: linear-gradient(135deg, var(--mr-color-primary), var(--mr-color-navy));
color: var(--mr-color-white);
font-size: var(--mr-text-3xl);
}
.mr-contact-method-title {
font-size: var(--mr-text-lg);
font-weight: var(--mr-font-semibold);
margin-bottom: var(--mr-space-2);
color: var(--mr-text-primary);
}
.mr-contact-method-value {
font-size: var(--mr-text-base);
color: var(--mr-text-secondary);
}
/* ── Map Integration ─────────────────────────────────────── */
.mr-contact-map {
margin-top: var(--mr-space-12);
border-radius: var(--mr-radius-lg);
overflow: hidden;
box-shadow: var(--mr-shadow-md);
}
.mr-contact-map iframe {
width: 100%;
height: 400px;
border: none;
display: block;
}
/* ── Dark Background Variant ─────────────────────────────── */
.mr-contact-dark {
background: var(--mr-gradient-hero);
color: var(--mr-color-white);
}
.mr-contact-dark .mr-contact-title {
color: var(--mr-color-white);
}
.mr-contact-dark .mr-contact-subtitle {
color: rgba(255, 255, 255, 0.95);
}
.mr-contact-dark .mr-contact-form-wrapper,
.mr-contact-dark .mr-contact-method {
background-color: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
}
.mr-contact-dark .mr-contact-info-value,
.mr-contact-dark .mr-contact-method-title {
color: var(--mr-color-white);
}
.mr-contact-dark .mr-contact-info-label,
.mr-contact-dark .mr-contact-method-value {
color: rgba(255, 255, 255, 0.8);
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 64em) {
.mr-contact {
padding: var(--mr-space-16) var(--mr-space-4);
}
.mr-contact-split {
grid-template-columns: 1fr;
gap: var(--mr-space-8);
}
.mr-contact-methods {
grid-template-columns: 1fr;
}
.mr-contact-title {
font-size: var(--mr-text-3xl);
}
}
@media (max-width: 48em) {
.mr-contact-title {
font-size: var(--mr-text-2xl);
}
.mr-contact-card {
padding: var(--mr-space-6);
}
.mr-contact-map iframe {
height: 300px;
}
}
/* ────────────────────────────────────────────────────── */
/* File: src/sections/team.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Page Sections: Team
Team member listings and profiles
============================================================ */
.mr-team {
padding: var(--mr-space-20) var(--mr-space-6);
background-color: var(--mr-surface-page);
}
.mr-team-header {
text-align: center;
max-width: 800px;
margin: 0 auto var(--mr-space-16);
}
.mr-team-title {
font-size: var(--mr-text-4xl);
font-weight: var(--mr-font-bold);
margin-bottom: var(--mr-space-4);
color: var(--mr-text-primary);
}
.mr-team-subtitle {
font-size: var(--mr-text-lg);
color: var(--mr-text-secondary);
line-height: var(--mr-leading-relaxed);
}
.mr-team-grid {
display: grid;
gap: var(--mr-space-8);
max-width: 1200px;
margin: 0 auto;
}
/* ── Grid Layouts ────────────────────────────────────────── */
.mr-team-grid-2 {
grid-template-columns: repeat(2, 1fr);
}
.mr-team-grid-3 {
grid-template-columns: repeat(3, 1fr);
}
.mr-team-grid-4 {
grid-template-columns: repeat(4, 1fr);
}
/* ── Team Member Card ────────────────────────────────────── */
.mr-team-member {
display: flex;
flex-direction: column;
background-color: var(--mr-surface-card);
border: 1px solid var(--mr-border-subtle);
border-radius: var(--mr-radius-lg);
overflow: hidden;
transition: var(--mr-transition-all);
text-align: center;
}
.mr-team-member:hover {
transform: translateY(-4px);
box-shadow: var(--mr-shadow-lg);
border-color: var(--mr-border-default);
}
.mr-team-member-image {
width: 100%;
height: 280px;
object-fit: cover;
background-color: var(--mr-surface-sunken);
}
.mr-team-member-content {
padding: var(--mr-space-6);
flex: 1;
display: flex;
flex-direction: column;
}
.mr-team-member-name {
font-size: var(--mr-text-xl);
font-weight: var(--mr-font-semibold);
margin-bottom: var(--mr-space-2);
color: var(--mr-text-primary);
}
.mr-team-member-role {
font-size: var(--mr-text-base);
color: var(--mr-color-primary);
font-weight: var(--mr-font-medium);
margin-bottom: var(--mr-space-3);
}
.mr-team-member-bio {
font-size: var(--mr-text-sm);
line-height: var(--mr-leading-relaxed);
color: var(--mr-text-secondary);
margin-bottom: var(--mr-space-4);
flex: 1;
}
.mr-team-member-social {
display: flex;
align-items: center;
justify-content: center;
gap: var(--mr-space-3);
padding-top: var(--mr-space-4);
border-top: 1px solid var(--mr-border-subtle);
}
.mr-team-member-social-link {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--mr-surface-sunken);
color: var(--mr-text-secondary);
text-decoration: none;
transition: var(--mr-transition-all);
}
.mr-team-member-social-link:hover {
background-color: var(--mr-color-primary);
color: var(--mr-color-white);
transform: translateY(-2px);
}
/* ── Horizontal Team Member ──────────────────────────────── */
.mr-team-member-horizontal {
flex-direction: row;
text-align: left;
}
.mr-team-member-horizontal .mr-team-member-image {
width: 240px;
height: auto;
flex-shrink: 0;
}
.mr-team-member-horizontal .mr-team-member-social {
justify-content: flex-start;
}
/* ── Circular Avatar Variant ─────────────────────────────── */
.mr-team-member-circle .mr-team-member-image {
width: 200px;
height: 200px;
border-radius: 50%;
margin: var(--mr-space-6) auto 0;
}
/* ── Minimal Team Member (No Card) ───────────────────────── */
.mr-team-member-minimal {
background-color: transparent;
border: none;
padding: 0;
}
.mr-team-member-minimal:hover {
transform: none;
box-shadow: none;
}
.mr-team-member-minimal .mr-team-member-content {
padding: var(--mr-space-4) 0;
}
.mr-team-member-minimal .mr-team-member-social {
border-top: none;
padding-top: 0;
}
/* ── Compact Grid (Small Avatars) ────────────────────────── */
.mr-team-member-compact {
flex-direction: row;
align-items: center;
text-align: left;
padding: var(--mr-space-4);
}
.mr-team-member-compact .mr-team-member-image {
width: 64px;
height: 64px;
border-radius: 50%;
margin-right: var(--mr-space-4);
flex-shrink: 0;
}
.mr-team-member-compact .mr-team-member-content {
padding: 0;
}
.mr-team-member-compact .mr-team-member-name {
font-size: var(--mr-text-base);
margin-bottom: var(--mr-space-1);
}
.mr-team-member-compact .mr-team-member-role {
font-size: var(--mr-text-sm);
margin-bottom: 0;
}
.mr-team-member-compact .mr-team-member-bio,
.mr-team-member-compact .mr-team-member-social {
display: none;
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 64em) {
.mr-team {
padding: var(--mr-space-16) var(--mr-space-4);
}
.mr-team-grid-3,
.mr-team-grid-4 {
grid-template-columns: repeat(2, 1fr);
}
.mr-team-title {
font-size: var(--mr-text-3xl);
}
.mr-team-member-horizontal {
flex-direction: column;
text-align: center;
}
.mr-team-member-horizontal .mr-team-member-image {
width: 100%;
height: 280px;
}
.mr-team-member-horizontal .mr-team-member-social {
justify-content: center;
}
}
@media (max-width: 48em) {
.mr-team-grid-2,
.mr-team-grid-3,
.mr-team-grid-4 {
grid-template-columns: 1fr;
}
.mr-team-title {
font-size: var(--mr-text-2xl);
}
.mr-team-member-circle .mr-team-member-image {
width: 150px;
height: 150px;
}
}
/* ────────────────────────────────────────────────────── */
/* File: src/sections/content.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Page Sections: Content
Article/documentation content sections with typography
============================================================ */
.mr-content {
padding: var(--mr-space-20) var(--mr-space-6);
background-color: var(--mr-surface-page);
}
.mr-content-container {
max-width: 800px;
margin: 0 auto;
}
.mr-content-header {
margin-bottom: var(--mr-space-12);
}
.mr-content-title {
font-size: var(--mr-text-5xl);
font-weight: var(--mr-font-bold);
margin-bottom: var(--mr-space-4);
color: var(--mr-text-primary);
line-height: var(--mr-leading-tight);
}
.mr-content-meta {
display: flex;
align-items: center;
gap: var(--mr-space-4);
flex-wrap: wrap;
font-size: var(--mr-text-sm);
color: var(--mr-text-secondary);
margin-bottom: var(--mr-space-6);
}
.mr-content-meta-item {
display: flex;
align-items: center;
gap: var(--mr-space-2);
}
.mr-content-lead {
font-size: var(--mr-text-xl);
line-height: var(--mr-leading-relaxed);
color: var(--mr-text-secondary);
margin-bottom: var(--mr-space-8);
}
.mr-content-featured-image {
width: 100%;
height: auto;
border-radius: var(--mr-radius-lg);
margin-bottom: var(--mr-space-10);
box-shadow: var(--mr-shadow-md);
}
/* ── Content Body ────────────────────────────────────────── */
.mr-content-body {
font-size: var(--mr-text-lg);
line-height: var(--mr-leading-relaxed);
color: var(--mr-text-primary);
}
.mr-content-body h2 {
font-size: var(--mr-text-3xl);
font-weight: var(--mr-font-bold);
margin-top: var(--mr-space-12);
margin-bottom: var(--mr-space-4);
color: var(--mr-text-primary);
}
.mr-content-body h3 {
font-size: var(--mr-text-2xl);
font-weight: var(--mr-font-semibold);
margin-top: var(--mr-space-10);
margin-bottom: var(--mr-space-3);
color: var(--mr-text-primary);
}
.mr-content-body h4 {
font-size: var(--mr-text-xl);
font-weight: var(--mr-font-semibold);
margin-top: var(--mr-space-8);
margin-bottom: var(--mr-space-3);
color: var(--mr-text-primary);
}
.mr-content-body p {
margin-bottom: var(--mr-space-6);
}
.mr-content-body ul,
.mr-content-body ol {
margin-bottom: var(--mr-space-6);
padding-left: var(--mr-space-8);
}
.mr-content-body li {
margin-bottom: var(--mr-space-2);
}
.mr-content-body blockquote {
margin: var(--mr-space-8) 0;
padding-left: var(--mr-space-6);
border-left: 4px solid var(--mr-color-primary);
font-size: var(--mr-text-xl);
font-style: italic;
color: var(--mr-text-secondary);
}
.mr-content-body img {
max-width: 100%;
height: auto;
border-radius: var(--mr-radius-md);
margin: var(--mr-space-8) 0;
}
.mr-content-body a {
color: var(--mr-color-primary);
text-decoration: underline;
transition: var(--mr-transition-colors);
}
.mr-content-body a:hover {
color: var(--mr-color-navy);
}
.mr-content-body hr {
margin: var(--mr-space-12) 0;
border: none;
border-top: 1px solid var(--mr-border-default);
}
.mr-content-body table {
width: 100%;
margin: var(--mr-space-8) 0;
border-collapse: collapse;
}
.mr-content-body th,
.mr-content-body td {
padding: var(--mr-space-3) var(--mr-space-4);
border: 1px solid var(--mr-border-default);
text-align: left;
}
.mr-content-body th {
background-color: var(--mr-surface-raised);
font-weight: var(--mr-font-semibold);
}
/* ── Content Footer ──────────────────────────────────────── */
.mr-content-footer {
margin-top: var(--mr-space-16);
padding-top: var(--mr-space-8);
border-top: 1px solid var(--mr-border-default);
}
.mr-content-tags {
display: flex;
align-items: center;
gap: var(--mr-space-3);
flex-wrap: wrap;
}
.mr-content-tag {
padding: var(--mr-space-2) var(--mr-space-4);
background-color: var(--mr-surface-sunken);
color: var(--mr-text-secondary);
border-radius: var(--mr-radius-pill);
font-size: var(--mr-text-sm);
font-weight: var(--mr-font-medium);
text-decoration: none;
transition: var(--mr-transition-all);
}
.mr-content-tag:hover {
background-color: var(--mr-color-primary);
color: var(--mr-color-white);
}
.mr-content-author {
display: flex;
align-items: center;
gap: var(--mr-space-4);
margin-top: var(--mr-space-8);
padding: var(--mr-space-6);
background-color: var(--mr-surface-raised);
border-radius: var(--mr-radius-lg);
}
.mr-content-author-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.mr-content-author-info {
flex: 1;
}
.mr-content-author-name {
font-size: var(--mr-text-lg);
font-weight: var(--mr-font-semibold);
margin-bottom: var(--mr-space-1);
color: var(--mr-text-primary);
}
.mr-content-author-bio {
font-size: var(--mr-text-sm);
color: var(--mr-text-secondary);
line-height: var(--mr-leading-relaxed);
}
/* ── Wide Content Container ──────────────────────────────── */
.mr-content-wide {
max-width: 1000px;
}
/* ── Narrow Content Container ────────────────────────────── */
.mr-content-narrow {
max-width: 650px;
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 64em) {
.mr-content {
padding: var(--mr-space-16) var(--mr-space-4);
}
.mr-content-title {
font-size: var(--mr-text-4xl);
}
.mr-content-body {
font-size: var(--mr-text-base);
}
.mr-content-body h2 {
font-size: var(--mr-text-2xl);
}
.mr-content-body h3 {
font-size: var(--mr-text-xl);
}
}
@media (max-width: 48em) {
.mr-content-title {
font-size: var(--mr-text-3xl);
}
.mr-content-lead {
font-size: var(--mr-text-lg);
}
.mr-content-author {
flex-direction: column;
text-align: center;
}
}
/* ────────────────────────────────────────────────────── */
/* File: src/sections/faq.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Page Sections: FAQ
Frequently asked questions with accordion pattern
============================================================ */
.mr-faq {
padding: var(--mr-space-20) var(--mr-space-6);
background-color: var(--mr-surface-page);
}
.mr-faq-header {
text-align: center;
max-width: 800px;
margin: 0 auto var(--mr-space-16);
}
.mr-faq-title {
font-size: var(--mr-text-4xl);
font-weight: var(--mr-font-bold);
margin-bottom: var(--mr-space-4);
color: var(--mr-text-primary);
}
.mr-faq-subtitle {
font-size: var(--mr-text-lg);
color: var(--mr-text-secondary);
line-height: var(--mr-leading-relaxed);
}
.mr-faq-container {
max-width: 900px;
margin: 0 auto;
}
/* ── FAQ List ────────────────────────────────────────────── */
.mr-faq-list {
display: flex;
flex-direction: column;
gap: var(--mr-space-4);
}
/* ── FAQ Item (Accordion) ────────────────────────────────── */
.mr-faq-item {
background-color: var(--mr-surface-card);
border: 1px solid var(--mr-border-subtle);
border-radius: var(--mr-radius-lg);
overflow: hidden;
transition: var(--mr-transition-all);
}
.mr-faq-item:hover {
border-color: var(--mr-border-default);
box-shadow: var(--mr-shadow-sm);
}
.mr-faq-question {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mr-space-4);
width: 100%;
padding: var(--mr-space-5);
background: transparent;
border: none;
font-size: var(--mr-text-lg);
font-weight: var(--mr-font-semibold);
color: var(--mr-text-primary);
text-align: left;
cursor: pointer;
transition: var(--mr-transition-colors);
}
.mr-faq-question:hover {
color: var(--mr-color-primary);
}
.mr-faq-question-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
flex-shrink: 0;
color: var(--mr-color-primary);
font-size: var(--mr-text-xl);
transition: transform 0.3s var(--mr-easing-standard);
}
.mr-faq-item.mr-faq-open .mr-faq-question-icon {
transform: rotate(180deg);
}
.mr-faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s var(--mr-easing-standard);
}
.mr-faq-item.mr-faq-open .mr-faq-answer {
max-height: 500px;
}
.mr-faq-answer-content {
padding: 0 var(--mr-space-5) var(--mr-space-5);
font-size: var(--mr-text-base);
line-height: var(--mr-leading-relaxed);
color: var(--mr-text-secondary);
}
.mr-faq-answer-content p {
margin-bottom: var(--mr-space-4);
}
.mr-faq-answer-content p:last-child {
margin-bottom: 0;
}
.mr-faq-answer-content ul,
.mr-faq-answer-content ol {
margin-bottom: var(--mr-space-4);
padding-left: var(--mr-space-6);
}
.mr-faq-answer-content li {
margin-bottom: var(--mr-space-2);
}
/* ── Divided FAQ List ────────────────────────────────────── */
.mr-faq-list-divided .mr-faq-item {
background-color: transparent;
border: none;
border-radius: 0;
border-bottom: 1px solid var(--mr-border-default);
}
.mr-faq-list-divided .mr-faq-item:hover {
box-shadow: none;
}
.mr-faq-list-divided .mr-faq-item:last-child {
border-bottom: none;
}
/* ── Two-Column Layout ───────────────────────────────────── */
.mr-faq-two-column {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--mr-space-8);
}
/* ── Category Groups ─────────────────────────────────────── */
.mr-faq-category {
margin-bottom: var(--mr-space-12);
}
.mr-faq-category:last-child {
margin-bottom: 0;
}
.mr-faq-category-title {
font-size: var(--mr-text-2xl);
font-weight: var(--mr-font-bold);
margin-bottom: var(--mr-space-6);
color: var(--mr-text-primary);
padding-bottom: var(--mr-space-3);
border-bottom: 2px solid var(--mr-border-default);
}
/* ── Compact FAQ Variant ─────────────────────────────────── */
.mr-faq-compact {
padding: var(--mr-space-12) var(--mr-space-6);
}
.mr-faq-compact .mr-faq-question {
font-size: var(--mr-text-base);
padding: var(--mr-space-4);
}
.mr-faq-compact .mr-faq-answer-content {
padding: 0 var(--mr-space-4) var(--mr-space-4);
font-size: var(--mr-text-sm);
}
/* ── Alternate Background ────────────────────────────────── */
.mr-faq-alt {
background-color: var(--mr-surface-raised);
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 64em) {
.mr-faq {
padding: var(--mr-space-16) var(--mr-space-4);
}
.mr-faq-title {
font-size: var(--mr-text-3xl);
}
.mr-faq-two-column {
grid-template-columns: 1fr;
}
}
@media (max-width: 48em) {
.mr-faq-title {
font-size: var(--mr-text-2xl);
}
.mr-faq-question {
font-size: var(--mr-text-base);
}
.mr-faq-category-title {
font-size: var(--mr-text-xl);
}
}
/* ────────────────────────────────────────────────────── */
/* File: src/sections/footer.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Page Sections: Footer
Site footer with navigation, contact info, and legal
============================================================ */
.mr-footer {
background-color: var(--mr-color-navy);
color: var(--mr-color-white);
padding: var(--mr-space-16) var(--mr-space-6);
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mr-footer-container {
max-width: 1200px;
margin: 0 auto;
}
/* ── Footer Grid Layout ──────────────────────────────────── */
.mr-footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--mr-space-12);
margin-bottom: var(--mr-space-12);
}
.mr-footer-column {
display: flex;
flex-direction: column;
}
.mr-footer-logo {
margin-bottom: var(--mr-space-4);
}
.mr-footer-logo img {
max-width: 180px;
height: auto;
}
.mr-footer-description {
font-size: var(--mr-text-base);
line-height: var(--mr-leading-relaxed);
color: rgba(255, 255, 255, 0.85);
margin-bottom: var(--mr-space-6);
}
.mr-footer-title {
font-size: var(--mr-text-lg);
font-weight: var(--mr-font-semibold);
margin-bottom: var(--mr-space-4);
color: var(--mr-color-white);
}
.mr-footer-nav {
display: flex;
flex-direction: column;
gap: var(--mr-space-3);
list-style: none;
margin: 0;
padding: 0;
}
.mr-footer-nav-link {
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
font-size: var(--mr-text-base);
transition: var(--mr-transition-colors);
}
.mr-footer-nav-link:hover {
color: var(--mr-color-white);
text-decoration: underline;
}
/* ── Social Links ────────────────────────────────────────── */
.mr-footer-social {
display: flex;
align-items: center;
gap: var(--mr-space-3);
margin-top: var(--mr-space-6);
}
.mr-footer-social-link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.1);
color: var(--mr-color-white);
text-decoration: none;
transition: var(--mr-transition-all);
}
.mr-footer-social-link:hover {
background-color: var(--mr-color-primary);
transform: translateY(-2px);
}
/* ── Footer Bottom ───────────────────────────────────────── */
.mr-footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--mr-space-6);
padding-top: var(--mr-space-8);
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-size: var(--mr-text-sm);
color: rgba(255, 255, 255, 0.7);
}
.mr-footer-copyright {
margin: 0;
}
.mr-footer-legal {
display: flex;
align-items: center;
gap: var(--mr-space-6);
list-style: none;
margin: 0;
padding: 0;
}
.mr-footer-legal-link {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: var(--mr-transition-colors);
}
.mr-footer-legal-link:hover {
color: var(--mr-color-white);
text-decoration: underline;
}
/* ── Light Footer Variant ────────────────────────────────── */
.mr-footer-light {
background-color: var(--mr-surface-raised);
color: var(--mr-text-primary);
border-top: 1px solid var(--mr-border-default);
}
.mr-footer-light .mr-footer-description,
.mr-footer-light .mr-footer-nav-link {
color: var(--mr-text-secondary);
}
.mr-footer-light .mr-footer-nav-link:hover {
color: var(--mr-text-primary);
}
.mr-footer-light .mr-footer-title {
color: var(--mr-text-primary);
}
.mr-footer-light .mr-footer-social-link {
background-color: var(--mr-surface-sunken);
color: var(--mr-text-secondary);
}
.mr-footer-light .mr-footer-social-link:hover {
background-color: var(--mr-color-primary);
color: var(--mr-color-white);
}
.mr-footer-light .mr-footer-bottom {
border-top: 1px solid var(--mr-border-default);
color: var(--mr-text-muted);
}
.mr-footer-light .mr-footer-legal-link {
color: var(--mr-text-muted);
}
.mr-footer-light .mr-footer-legal-link:hover {
color: var(--mr-text-primary);
}
/* ── Compact Footer ──────────────────────────────────────── */
.mr-footer-compact {
padding: var(--mr-space-10) var(--mr-space-6);
}
.mr-footer-compact .mr-footer-grid {
grid-template-columns: repeat(4, 1fr);
gap: var(--mr-space-8);
margin-bottom: var(--mr-space-8);
}
/* ── Centered Footer ─────────────────────────────────────── */
.mr-footer-center {
text-align: center;
}
.mr-footer-center .mr-footer-grid {
grid-template-columns: 1fr;
gap: var(--mr-space-8);
}
.mr-footer-center .mr-footer-logo {
margin-left: auto;
margin-right: auto;
}
.mr-footer-center .mr-footer-nav {
align-items: center;
}
.mr-footer-center .mr-footer-social {
justify-content: center;
}
.mr-footer-center .mr-footer-bottom {
flex-direction: column;
text-align: center;
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 64em) {
.mr-footer {
padding: var(--mr-space-12) var(--mr-space-4);
}
.mr-footer-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--mr-space-8);
}
.mr-footer-compact .mr-footer-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 48em) {
.mr-footer-grid,
.mr-footer-compact .mr-footer-grid {
grid-template-columns: 1fr;
gap: var(--mr-space-6);
}
.mr-footer-bottom {
flex-direction: column;
text-align: center;
gap: var(--mr-space-4);
}
.mr-footer-legal {
flex-direction: column;
gap: var(--mr-space-3);
}
}
/* ────────────────────────────────────────────────────── */
/* File: src/utilities/responsive.css */
/* ────────────────────────────────────────────────────── */
/* ============================================================
MOTLEY RICE — Utilities: Responsive
Mobile-friendly display and layout utilities
============================================================ */
/* ── Display Utilities ───────────────────────────────────── */
.mr-hide-mobile {
display: none !important;
}
@media (min-width: 48em) {
.mr-hide-mobile {
display: block !important;
}
.mr-hide-desktop {
display: none !important;
}
}
@media (min-width: 64em) {
.mr-hide-lg {
display: none !important;
}
}
/* ── Mobile Stack ────────────────────────────────────────── */
.mr-mobile-stack {
display: flex;
flex-direction: row;
gap: var(--mr-space-3);
}
@media (max-width: 47.999em) {
.mr-mobile-stack {
flex-direction: column !important;
gap: var(--mr-space-3);
}
.mr-mobile-stack > * {
width: 100% !important;
}
}
/* ── Touch-Friendly Spacing ──────────────────────────────── */
@media (max-width: 47.999em) {
.mr-touch-friendly {
min-height: 44px;
min-width: 44px;
}
}
/* ── Responsive Text Alignment ───────────────────────────── */
@media (max-width: 47.999em) {
.mr-mobile-center {
text-align: center !important;
}
.mr-mobile-left {
text-align: left !important;
}
}
/* ── Responsive Padding ──────────────────────────────────── */
@media (max-width: 47.999em) {
.mr-mobile-p-0 {
padding: 0 !important;
}
.mr-mobile-px-2 {
padding-left: var(--mr-space-2) !important;
padding-right: var(--mr-space-2) !important;
}
.mr-mobile-py-2 {
padding-top: var(--mr-space-2) !important;
padding-bottom: var(--mr-space-2) !important;
}
}
/* ── Responsive Margins ──────────────────────────────────── */
@media (max-width: 47.999em) {
.mr-mobile-m-0 {
margin: 0 !important;
}
.mr-mobile-mb-2 {
margin-bottom: var(--mr-space-2) !important;
}
.mr-mobile-mb-4 {
margin-bottom: var(--mr-space-4) !important;
}
}
/* ── Mobile Menu Toggle ──────────────────────────────────── */
.mr-mobile-menu-toggle {
display: none;
cursor: pointer;
padding: var(--mr-space-2);
background: transparent;
border: none;
color: var(--mr-text-primary);
}
@media (max-width: 63.999em) {
.mr-mobile-menu-toggle {
display: block;
}
}
/* ── Responsive Grid ─────────────────────────────────────── */
@media (max-width: 47.999em) {
.mr-mobile-grid-1 {
grid-template-columns: repeat(1, 1fr) !important;
}
}
@media (max-width: 63.999em) {
.mr-tablet-grid-2 {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* ── Responsive Flexbox ──────────────────────────────────── */
@media (max-width: 47.999em) {
.mr-mobile-flex-column {
flex-direction: column !important;
}
.mr-mobile-flex-wrap {
flex-wrap: wrap !important;
}
}
/* ── Overflow Scroll Indicators ──────────────────────────── */
.mr-scroll-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--mr-color-gray-400) transparent;
}
.mr-scroll-container::-webkit-scrollbar {
height: 6px;
}
.mr-scroll-container::-webkit-scrollbar-track {
background: transparent;
}
.mr-scroll-container::-webkit-scrollbar-thumb {
background-color: var(--mr-color-gray-400);
border-radius: var(--mr-radius-full);
}
.mr-scroll-container::-webkit-scrollbar-thumb:hover {
background-color: var(--mr-color-gray-500);
}
/* ── Safe Area Insets (for mobile cutouts) ───────────────── */
@supports (padding: max(0px)) {
.mr-safe-top {
padding-top: max(var(--mr-space-4), env(safe-area-inset-top));
}
.mr-safe-bottom {
padding-bottom: max(var(--mr-space-4), env(safe-area-inset-bottom));
}
.mr-safe-left {
padding-left: max(var(--mr-space-4), env(safe-area-inset-left));
}
.mr-safe-right {
padding-right: max(var(--mr-space-4), env(safe-area-inset-right));
}
}