/* ============================================================================= REUNIONDATE — SINGLE DESIGNER SYSTEM High-Clarity Minimalism for Elderly, Non-Technical Users Version: 2.0.0 (March 2026) Principle: One font. One radius. One shadow. One border. Zero drift. Load order: must be the LAST stylesheet in so tokens win. ============================================================================= */ /* ============================================================================= 1. AUTHORITATIVE TOKENS All spacing, color, typography, and shape values live HERE and ONLY HERE. ============================================================================= */ :root { /* ── FONT ─────────────────────────────────────────────────── */ --rd-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* ── TYPOGRAPHY SCALE (5 steps, strict) ──────────────────── */ --rd-h1: 2.125rem; /* 34px — page title */ --rd-h2: 1.625rem; /* 26px — section title */ --rd-h3: 1.25rem; /* 20px — card title */ --rd-body: 1.0625rem; /* 17px — readable without squinting */ --rd-small: 0.875rem; /* 14px — metadata, captions */ /* ── FONT WEIGHTS (3 only) ───────────────────────────────── */ --rd-w-regular: 400; --rd-w-medium: 500; --rd-w-semibold: 600; /* ── LINE HEIGHTS ────────────────────────────────────────── */ --rd-lh-heading: 1.3; --rd-lh-body: 1.7; /* ── COLOR — PRIMARY (Warm institutional navy) ───────────── */ --rd-primary: #2B5796; /* brand action — links, buttons */ --rd-primary-dark: #1C3D6B; /* hover / pressed */ --rd-primary-light: #EBF1FB; /* selected state, highlight bg */ --rd-primary-text: #FFFFFF; /* text on primary bg */ /* ── COLOR — SEMANTIC ────────────────────────────────────── */ --rd-success: #2A7B4F; --rd-success-bg: #F0F9F4; --rd-error: #B22B2B; --rd-error-bg: #FDF2F2; --rd-warning: #8A5C12; --rd-warning-bg: #FFFAEB; --rd-info: #1D5FA6; --rd-info-bg: #EEF5FD; /* ── A11y focus ring color (WCAG AA against most backgrounds) ── */ --rd-focus: #2563eb; /* ── COLOR — NEUTRALS (6 steps, true gray) ───────────────── */ --rd-n0: #FAFAFA; /* page background */ --rd-n1: #F5F7FA; /* section alt background, input fill */ --rd-n2: #E8EBF0; /* borders everywhere */ --rd-n3: #9AA3AF; /* placeholder, disabled text */ --rd-n4: #4B5563; /* secondary text */ --rd-n5: #111827; /* primary text */ /* ── TEXT (2 levels only) ───────────────────────────────── */ --rd-text: var(--rd-n5); --rd-text-sub: var(--rd-n4); /* ── BACKGROUNDS ─────────────────────────────────────────── */ --rd-bg: var(--rd-n0); --rd-bg-card: #FFFFFF; --rd-bg-section: var(--rd-n1); /* ── BORDERS (one tone, one weight) ─────────────────────── */ --rd-border: 1px solid var(--rd-n2); --rd-border-color: var(--rd-n2); /* ── SPACING — 8px base scale ────────────────────────────── */ --rd-sp1: 4px; --rd-sp2: 8px; --rd-sp3: 16px; --rd-sp4: 24px; --rd-sp5: 32px; --rd-sp6: 48px; --rd-sp7: 64px; --rd-sp8: 80px; /* ── SHAPE — ONE radius for all components ───────────────── */ --rd-radius: 8px; --rd-radius-sm: 4px; --rd-radius-lg: 12px; /* ── SHADOW — calm depth, not dramatic ───────────────────── */ --rd-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03); --rd-shadow-raise: 0 4px 12px rgba(0,0,0,0.07); /* ── LAYOUT ──────────────────────────────────────────────── */ --rd-max-width: 980px; --rd-nav-h: 60px; --rd-gutter: var(--rd-sp4); /* horizontal page padding */ /* ── TRANSITIONS ─────────────────────────────────────────── */ --rd-ease: 140ms ease-in-out; } .rd-btn-success { background-color: #16a34a !important; color: #fff !important; border-color: #16a34a !important; } .rd-bg-success-light { background-color: #f0fdf4 !important; } /* ============================================================================= 2. BASE — Global element resets that enforce the system ============================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--rd-font) !important; font-size: var(--rd-body) !important; font-weight: var(--rd-w-regular) !important; line-height: var(--rd-lh-body) !important; color: var(--rd-text) !important; background-color: var(--rd-bg) !important; -webkit-font-smoothing: antialiased; margin: 0; } /* Headings — one weight, predictable scale */ h1, .rd-h1 { font-family: var(--rd-font) !important; font-size: var(--rd-h1) !important; font-weight: var(--rd-w-semibold) !important; line-height: var(--rd-lh-heading) !important; color: var(--rd-text) !important; margin: 0 0 var(--rd-sp4) 0 !important; letter-spacing: -0.01em; } h2, .rd-h2 { font-family: var(--rd-font) !important; font-size: var(--rd-h2) !important; font-weight: var(--rd-w-semibold) !important; line-height: var(--rd-lh-heading) !important; color: var(--rd-text) !important; margin: 0 0 var(--rd-sp3) 0 !important; letter-spacing: -0.01em; } h3, .rd-h3 { font-family: var(--rd-font) !important; font-size: var(--rd-h3) !important; font-weight: var(--rd-w-semibold) !important; line-height: var(--rd-lh-heading) !important; color: var(--rd-text) !important; margin: 0 0 var(--rd-sp2) 0 !important; } h4, h5, h6 { font-family: var(--rd-font) !important; font-weight: var(--rd-w-medium) !important; line-height: var(--rd-lh-heading) !important; color: var(--rd-text) !important; margin: 0 0 var(--rd-sp2) 0 !important; } p { font-size: var(--rd-body); color: var(--rd-text); line-height: var(--rd-lh-body); margin: 0 0 var(--rd-sp3) 0; } p:last-child { margin-bottom: 0; } a { color: var(--rd-primary); text-decoration: none; transition: color var(--rd-ease); } a:hover { color: var(--rd-primary-dark); text-decoration: underline; } a:focus-visible { outline: 3px solid var(--rd-focus); outline-offset: 2px; border-radius: var(--rd-radius-sm); background-color: rgba(37, 99, 235, 0.06); text-decoration: underline; } /* ────────────────────────────────────────────────────────────── A11y — global :focus-visible ring on EVERY interactive element. Keyboard users need a visible focus ring; mouse users get none because we scope to :focus-visible only. ────────────────────────────────────────────────────────────── */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible, [role="button"]:focus-visible, [role="link"]:focus-visible, [role="tab"]:focus-visible, [role="menuitem"]:focus-visible, [role="checkbox"]:focus-visible, [role="radio"]:focus-visible, [role="switch"]:focus-visible, [role="combobox"]:focus-visible, [role="option"]:focus-visible, [contenteditable="true"]:focus-visible { outline: 3px solid var(--rd-focus) !important; outline-offset: 2px !important; } /* Suppress the ring only for non-keyboard focus (e.g. mouse click). Preserves :focus-visible ring per the rule above. */ a:focus:not(:focus-visible), button:focus:not(:focus-visible), input:focus:not(:focus-visible), select:focus:not(:focus-visible), textarea:focus:not(:focus-visible), summary:focus:not(:focus-visible), [tabindex]:not([tabindex="-1"]):focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible) { outline: none; } /* Small text */ small, .rd-small { font-size: var(--rd-small); color: var(--rd-text-sub); line-height: 1.6; } /* ============================================================================= 3. LAYOUT SYSTEM — .rd-shell, .rd-page-header, .rd-content, .rd-section ============================================================================= */ /* Page shell — constrains width, centers content */ .rd-shell { width: 100%; max-width: var(--rd-max-width); margin-left: auto; margin-right: auto; padding-left: var(--rd-gutter); padding-right: var(--rd-gutter); } /* Main content area below nav */ .rd-main { min-height: calc(100vh - var(--rd-nav-h) - 120px); padding-top: var(--rd-sp7); padding-bottom: var(--rd-sp8); } /* Page header — title + optional subtitle block */ .rd-page-header { margin-bottom: var(--rd-sp5); padding-bottom: var(--rd-sp4); border-bottom: var(--rd-border); } .rd-page-header h1 { margin-bottom: var(--rd-sp2) !important; } .rd-page-header p { font-size: var(--rd-body); color: var(--rd-text-sub); margin: 0; } /* Section — vertical rhythm unit */ .rd-section { margin-bottom: var(--rd-sp6); } .rd-section:last-child { margin-bottom: 0; } /* Section title */ .rd-section-title { font-size: var(--rd-h2); font-weight: var(--rd-w-semibold); color: var(--rd-text); margin-bottom: var(--rd-sp4) !important; } /* Alternating section backgrounds */ .rd-section-alt { background: var(--rd-bg-section); margin-left: calc(-1 * var(--rd-gutter)); margin-right: calc(-1 * var(--rd-gutter)); padding: var(--rd-sp6) var(--rd-gutter); margin-bottom: var(--rd-sp6); } /* ============================================================================= 4. NAVIGATION — .rd-nav Clean, single-row, always visible on desktop, simple mobile menu ============================================================================= */ .rd-nav { position: sticky; top: 0; z-index: 100; height: var(--rd-nav-h); background: var(--rd-bg-card); border-bottom: var(--rd-border); box-shadow: 0 1px 0 var(--rd-n2); } .rd-nav-inner { display: flex; align-items: center; height: 100%; max-width: var(--rd-max-width); margin: 0 auto; padding: 0 var(--rd-gutter); gap: var(--rd-sp3); } /* Brand / Logo */ .rd-nav-brand { font-size: var(--rd-h3); font-weight: var(--rd-w-semibold); color: var(--rd-text) !important; text-decoration: none !important; flex-shrink: 0; line-height: 1; display: inline-flex; align-items: center; gap: var(--rd-sp2); } .rd-nav-brand-logo { width: 40px; height: 40px; object-fit: contain; display: block; } .rd-nav-brand:hover { color: var(--rd-primary) !important; text-decoration: none !important; } /* Nav links container */ .rd-nav-links { display: flex; align-items: center; gap: var(--rd-sp1); margin-left: auto; list-style: none; margin-bottom: 0; padding: 0; } /* Individual nav link */ .rd-nav-link { display: inline-flex; align-items: center; height: 40px; padding: 0 var(--rd-sp2); font-size: var(--rd-small); font-weight: var(--rd-w-medium); color: var(--rd-text-sub) !important; text-decoration: none !important; border-radius: var(--rd-radius); transition: color var(--rd-ease), background var(--rd-ease); white-space: nowrap; } .rd-nav-link:hover { color: var(--rd-text) !important; background: var(--rd-n1); text-decoration: none !important; } .rd-nav-link.active, .rd-nav-link[aria-current="page"] { color: var(--rd-primary) !important; font-weight: var(--rd-w-semibold); background: var(--rd-primary-light); } /* ── NAV DROPDOWN ── */ .rd-nav-dropdown { position: relative; display: inline-flex; align-items: center; } .rd-nav-dropdown-content { display: none; position: absolute; top: 100%; left: 0; min-width: 180px; background: var(--rd-bg-card); border: var(--rd-border); border-radius: var(--rd-radius); box-shadow: var(--rd-shadow-raise); padding: var(--rd-sp1) 0; z-index: 1000; margin-top: var(--rd-sp1); } .rd-nav-dropdown:hover .rd-nav-dropdown-content, .rd-nav-dropdown.active .rd-nav-dropdown-content { display: block; } .rd-nav-dropdown-item { display: block; padding: var(--rd-sp2) var(--rd-sp3); font-size: var(--rd-small); font-weight: var(--rd-w-medium); color: var(--rd-text-sub) !important; text-decoration: none !important; transition: background var(--rd-ease), color var(--rd-ease); } .rd-nav-dropdown-item:hover { background: var(--rd-n1); color: var(--rd-text) !important; } .rd-nav-dropdown-item.active { color: var(--rd-primary) !important; background: var(--rd-primary-light); } @media (max-width: 768px) { .rd-nav-dropdown { flex-direction: column; align-items: stretch; } .rd-nav-dropdown-content { position: static; display: none; box-shadow: none; border: none; padding-left: var(--rd-sp4); margin-top: 0; } .rd-nav-dropdown.active .rd-nav-dropdown-content { display: block; } .rd-nav-dropdown-item { height: 48px; display: flex; align-items: center; } } /* Sign In button in nav */ .rd-nav-cta { display: inline-flex; align-items: center; height: 40px; padding: 0 var(--rd-sp3); font-size: var(--rd-small); font-weight: var(--rd-w-semibold); color: var(--rd-primary-text) !important; background: var(--rd-primary); border-radius: var(--rd-radius); text-decoration: none !important; transition: background var(--rd-ease); white-space: nowrap; margin-left: var(--rd-sp2); } .rd-nav-cta:hover { background: var(--rd-primary-dark); text-decoration: none !important; } /* Mobile hamburger — visible only below 768px */ .rd-nav-toggle { display: none; margin-left: auto; background: none; border: var(--rd-border); border-radius: var(--rd-radius); padding: var(--rd-sp2) var(--rd-sp2); cursor: pointer; color: var(--rd-text); height: 40px; width: 44px; align-items: center; justify-content: center; } @media (max-width: 768px) { .rd-nav-toggle { display: flex; } .rd-nav-links { display: none; position: absolute; top: var(--rd-nav-h); left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--rd-bg-card); border-bottom: var(--rd-border); padding: var(--rd-sp3); gap: var(--rd-sp1); box-shadow: var(--rd-shadow-raise); } .rd-nav-links.open { display: flex; } .rd-nav-link { height: 52px; padding: 0 var(--rd-sp3); font-size: var(--rd-body); } .rd-nav-cta { height: 52px; padding: 0 var(--rd-sp3); font-size: var(--rd-body); margin-left: 0; justify-content: center; } } /* ============================================================================= 5. BUTTON SYSTEM — 3 types only All buttons: 8px radius, 48px+ height, clear verbs ============================================================================= */ /* Base button */ .rd-btn, .rd-btn-primary, .rd-btn-secondary, .rd-btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: var(--rd-sp2); min-height: 48px; padding: 0 var(--rd-sp4); font-family: var(--rd-font); font-size: var(--rd-body); font-weight: var(--rd-w-semibold); line-height: 1; border-radius: var(--rd-radius); border: 2px solid transparent; cursor: pointer; text-decoration: none !important; transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1); white-space: nowrap; -webkit-appearance: none; appearance: none; user-select: none; position: relative; transform: translateY(0); } .rd-btn:hover:not(:disabled), .rd-btn-primary:hover:not(:disabled), .rd-btn-secondary:hover:not(:disabled), .rd-btn-ghost:hover:not(:disabled) { transform: translateY(-1px); } .rd-btn:active:not(:disabled), .rd-btn-primary:active:not(:disabled), .rd-btn-secondary:active:not(:disabled), .rd-btn-ghost:active:not(:disabled) { transform: translateY(0); transition-duration: 80ms; } .rd-btn:focus-visible, .rd-btn-primary:focus-visible, .rd-btn-secondary:focus-visible, .rd-btn-ghost:focus-visible { outline: 3px solid rgba(43, 87, 150, 0.25); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(43, 87, 150, 0.15); } .rd-btn:disabled, .rd-btn-primary:disabled, .rd-btn-secondary:disabled, .rd-btn-ghost:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; } /* PRIMARY — used for the single most important action on a page */ .rd-btn-primary { background: var(--rd-primary); color: var(--rd-primary-text) !important; border-color: var(--rd-primary); } .rd-btn-primary:hover:not(:disabled) { background: var(--rd-primary-dark); border-color: var(--rd-primary-dark); box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.1); } /* SECONDARY — supporting actions, alternate paths */ .rd-btn-secondary { background: var(--rd-bg-card); color: var(--rd-text) !important; border-color: var(--rd-n2); } .rd-btn-secondary:hover:not(:disabled) { background: var(--rd-n1); border-color: var(--rd-n3); box-shadow: 0 2px 8px rgba(0,0,0,0.08); } /* GHOST — de-emphasized, e.g. "Cancel", "Back" */ .rd-btn-ghost { background: transparent; color: var(--rd-text-sub) !important; border-color: transparent; } .rd-btn-ghost:hover:not(:disabled) { background: var(--rd-n1); color: var(--rd-text) !important; box-shadow: 0 1px 4px rgba(0,0,0,0.05); } /* SUCCESS — positive actions, confirmations, "next" in flows */ .rd-btn-success { background-color: #16a34a; color: white !important; border-color: #16a34a; } .rd-btn-success:hover:not(:disabled) { background-color: #15803d; border-color: #15803d; box-shadow: 0 4px 12px rgba(22, 163, 74, 0.2), 0 2px 4px rgba(0,0,0,0.1); } .rd-bg-success-light { background-color: #f0fdf4 !important; } .rd-bg-success-bg { background-color: var(--rd-success-bg) !important; } .rd-bg-error-bg { background-color: var(--rd-error-bg) !important; } .rd-bg-warning-bg { background-color: var(--rd-warning-bg) !important; } .rd-bg-info-bg { background-color: var(--rd-info-bg) !important; } /* Small variant — use sparingly inside tables/cards */ .rd-btn-sm { min-height: 36px; padding: 0 var(--rd-sp3); font-size: var(--rd-small); } /* Large variant — hero CTAs */ .rd-btn-lg { min-height: 56px; padding: 0 var(--rd-sp5); font-size: 1.0625rem; } /* Full-width variant for mobile or single-column forms */ .rd-btn-full { width: 100%; } /* ============================================================================= 6. CARD SYSTEM — 2 types only Same radius (8px), same padding (24px), same border ============================================================================= */ .rd-card { background: var(--rd-bg-card); border: var(--rd-border); border-radius: var(--rd-radius); padding: var(--rd-sp4); transition: all 160ms cubic-bezier(0.2, 0.8, 0.2, 1); transform: translateY(0); } .rd-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08); border-color: var(--rd-primary); } /* RAISED — when the card needs hierarchy over the page */ .rd-card-raised { background: var(--rd-bg-card); border: var(--rd-border); border-radius: var(--rd-radius); padding: var(--rd-sp4); box-shadow: var(--rd-shadow); transition: all 160ms cubic-bezier(0.2, 0.8, 0.2, 1); transform: translateY(0); } .rd-card-raised:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,0.15), 0 4px 8px rgba(0,0,0,0.1); border-color: var(--rd-primary); } /* Card header strip */ .rd-card-header { margin: calc(-1 * var(--rd-sp4)) calc(-1 * var(--rd-sp4)) var(--rd-sp4); padding: var(--rd-sp3) var(--rd-sp4); border-bottom: var(--rd-border); font-weight: var(--rd-w-semibold); font-size: var(--rd-h3); color: var(--rd-text); } /* Card action footer */ .rd-card-actions { display: flex; align-items: center; gap: var(--rd-sp3); margin-top: var(--rd-sp4); padding-top: var(--rd-sp4); border-top: var(--rd-border); flex-wrap: wrap; } /* Grid of cards — 2 or 3 across */ .rd-card-grid { display: grid; gap: var(--rd-sp4); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .rd-card-grid-2 { display: grid; gap: var(--rd-sp4); grid-template-columns: repeat(2, 1fr); } @media (max-width: 640px) { .rd-card-grid-2 { grid-template-columns: 1fr; } } /* Feature card — clickable card for navigation */ .rd-card-feature { display: flex; flex-direction: column; gap: var(--rd-sp3); background: var(--rd-bg-card); border: var(--rd-border); border-radius: var(--rd-radius); padding: var(--rd-sp4); text-decoration: none !important; color: var(--rd-text) !important; transition: all 160ms cubic-bezier(0.2, 0.8, 0.2, 1); cursor: pointer; transform: translateY(0); } .rd-card-feature:hover { border-color: var(--rd-primary); box-shadow: 0 12px 32px rgba(0,0,0,0.15), 0 4px 8px rgba(0,0,0,0.1); text-decoration: none !important; transform: translateY(-3px); } .rd-card-feature h3 { color: var(--rd-primary) !important; margin-bottom: var(--rd-sp1) !important; } .rd-card-feature p { color: var(--rd-text-sub); margin: 0; } .rd-card-feature .rd-card-arrow { margin-top: auto; font-weight: var(--rd-w-semibold); color: var(--rd-primary); font-size: var(--rd-small); } /* Metric card — for key stats */ .rd-metric { background: var(--rd-bg-card); border: var(--rd-border); border-radius: var(--rd-radius); padding: var(--rd-sp4); text-align: center; } .rd-metric-value { display: block; font-size: 2.25rem; font-weight: var(--rd-w-semibold); color: var(--rd-primary); line-height: 1.1; margin-bottom: var(--rd-sp1); } .rd-metric-label { display: block; font-size: var(--rd-small); color: var(--rd-text-sub); font-weight: var(--rd-w-medium); } /* ============================================================================= 7. FORM SYSTEM — single column, labels above, generous spacing ============================================================================= */ .rd-form { display: flex; flex-direction: column; gap: var(--rd-sp4); } /* Field group — label + input stacked */ .rd-field { display: flex; flex-direction: column; gap: var(--rd-sp1); } .rd-label { font-size: var(--rd-small); font-weight: var(--rd-w-semibold); color: var(--rd-text); line-height: 1.4; } .rd-label-required::after { content: ' *'; color: var(--rd-error); } .rd-input, .rd-select, .rd-textarea { width: 100%; min-height: 48px; padding: var(--rd-sp2) var(--rd-sp3); font-family: var(--rd-font); font-size: var(--rd-body); font-weight: var(--rd-w-regular); color: var(--rd-text); background: var(--rd-bg-card); border: var(--rd-border); border-radius: var(--rd-radius); transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1); -webkit-appearance: none; appearance: none; transform: translateY(0); } .rd-input::placeholder, .rd-textarea::placeholder { color: var(--rd-n3); } .rd-input:focus, .rd-select:focus, .rd-textarea:focus { border-color: var(--rd-primary); box-shadow: 0 0 0 3px rgba(43,87,150,0.2), 0 2px 4px rgba(0,0,0,0.05); transform: translateY(-1px); transition: all 140ms cubic-bezier(0.2, 0.8, 0.2, 1); } /* Mouse-focus only: suppress the UA ring. Keyboard focus keeps the global :focus-visible outline defined near the top of this file. */ .rd-input:focus:not(:focus-visible), .rd-select:focus:not(:focus-visible), .rd-textarea:focus:not(:focus-visible) { outline: none; } .rd-textarea { min-height: 120px; resize: vertical; line-height: var(--rd-lh-body); padding-top: var(--rd-sp2); } .rd-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--rd-sp3) center; padding-right: var(--rd-sp6); cursor: pointer; } /* Hint text below input */ .rd-hint { font-size: var(--rd-small); color: var(--rd-text-sub); line-height: 1.5; } /* Error state */ .rd-field-error .rd-input, .rd-field-error .rd-select, .rd-field-error .rd-textarea { border-color: var(--rd-error); background-color: rgba(178, 43, 43, 0.03); box-shadow: 0 0 0 1px rgba(178, 43, 43, 0.2); } .rd-field-error .rd-input:focus, .rd-field-error .rd-select:focus, .rd-field-error .rd-textarea:focus { border-color: var(--rd-error); box-shadow: 0 0 0 3px rgba(178, 43, 43, 0.15), 0 2px 4px rgba(0,0,0,0.05); } .rd-field-error .rd-hint { color: var(--rd-error); font-weight: var(--rd-w-medium); padding: var(--rd-sp1) var(--rd-sp2); background: rgba(178, 43, 43, 0.05); border-radius: var(--rd-radius-sm); margin-top: var(--rd-sp1); } /* Success state */ .rd-field-success .rd-input, .rd-field-success .rd-select, .rd-field-success .rd-textarea { border-color: var(--rd-success); background-color: rgba(42, 123, 79, 0.03); } .rd-field-success .rd-input:focus, .rd-field-success .rd-select:focus, .rd-field-success .rd-textarea:focus { border-color: var(--rd-success); box-shadow: 0 0 0 3px rgba(42, 123, 79, 0.15), 0 2px 4px rgba(0,0,0,0.05); } .rd-field-success .rd-hint { color: var(--rd-success); font-weight: var(--rd-w-medium); padding: var(--rd-sp1) var(--rd-sp2); background: rgba(42, 123, 79, 0.05); border-radius: var(--rd-radius-sm); margin-top: var(--rd-sp1); } /* Checkbox/radio field */ .rd-check { display: flex; align-items: flex-start; gap: var(--rd-sp2); cursor: pointer; } .rd-check input[type="checkbox"], .rd-check input[type="radio"] { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; accent-color: var(--rd-primary); cursor: pointer; } .rd-check-label { font-size: var(--rd-body); color: var(--rd-text); line-height: 1.5; } /* Form actions row */ .rd-form-actions { display: flex; align-items: center; gap: var(--rd-sp3); flex-wrap: wrap; margin-top: var(--rd-sp2); } /* ============================================================================= 8. ALERT / STATUS SYSTEM — 4 types ============================================================================= */ .rd-alert { display: flex; gap: var(--rd-sp3); align-items: flex-start; padding: var(--rd-sp3) var(--rd-sp4); border-radius: var(--rd-radius); border-width: 1px; border-style: solid; font-size: var(--rd-body); line-height: var(--rd-lh-body); } .rd-alert-success { background: var(--rd-success-bg); border-color: var(--rd-success); color: var(--rd-success); } .rd-alert-error { background: var(--rd-error-bg); border-color: var(--rd-error); color: var(--rd-error); } .rd-alert-warning { background: var(--rd-warning-bg); border-color: var(--rd-warning); color: var(--rd-warning); } .rd-alert-info { background: var(--rd-info-bg); border-color: var(--rd-info); color: var(--rd-info); } .rd-alert-title { font-weight: var(--rd-w-semibold); margin-bottom: var(--rd-sp1); } /* ============================================================================= 9. BADGE / STATUS INDICATOR ============================================================================= */ .rd-badge { display: inline-flex; align-items: center; padding: var(--rd-sp1) var(--rd-sp2); font-size: 0.75rem; font-weight: var(--rd-w-semibold); line-height: 1; border-radius: var(--rd-radius-sm); white-space: nowrap; } .rd-badge-success { background: var(--rd-success-bg); color: var(--rd-success); } .rd-badge-error { background: var(--rd-error-bg); color: var(--rd-error); } .rd-badge-warning { background: var(--rd-warning-bg); color: var(--rd-warning); } .rd-badge-info { background: var(--rd-info-bg); color: var(--rd-info); } .rd-badge-neutral { background: var(--rd-n1); color: var(--rd-n4); } .rd-badge-primary { background: var(--rd-primary-light); color: var(--rd-primary); } /* ============================================================================= 10. DATA TABLE — clean, no zebra stripes (noise), just borders ============================================================================= */ .rd-table { width: 100%; border-collapse: collapse; font-size: var(--rd-body); border: var(--rd-border); border-radius: var(--rd-radius); overflow: hidden; } .rd-table th { background: var(--rd-n1); font-weight: var(--rd-w-semibold); font-size: var(--rd-small); color: var(--rd-text-sub); text-align: left; padding: var(--rd-sp2) var(--rd-sp3); border-bottom: var(--rd-border); white-space: nowrap; } .rd-table td { padding: var(--rd-sp3); border-bottom: var(--rd-border); color: var(--rd-text); vertical-align: top; } .rd-table tr:last-child td { border-bottom: none; } .rd-table tbody tr:hover { background: var(--rd-n1); } /* Responsive table wrapper */ .rd-table-wrap { overflow-x: auto; border-radius: var(--rd-radius); border: var(--rd-border); } .rd-table-wrap .rd-table { border: none; border-radius: 0; } /* ============================================================================= 11. NAVIGATION — ADMIN SIDEBAR ============================================================================= */ .rd-admin-shell { display: grid; grid-template-columns: 220px 1fr; height: 100vh; overflow: hidden; } .rd-sidebar { background: var(--rd-n5); display: flex; flex-direction: column; height: 100vh; overflow-y: auto; overscroll-behavior: contain; transition: transform 0.3s ease; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.35) transparent; } .rd-sidebar::-webkit-scrollbar { width: 8px; } .rd-sidebar::-webkit-scrollbar-track { background: transparent; } .rd-sidebar::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,0.25); border-radius: 4px; } .rd-sidebar::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,0.45); } /* ─── Mobile sidebar drawer (C3) ────────────────────────────────────────── */ /* Hamburger toggle lives in the topbar; hidden on desktop */ .rd-sidebar-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: var(--rd-sp3); padding: 0; background: transparent; color: var(--rd-text); border: var(--rd-border); border-radius: var(--rd-radius); cursor: pointer; flex-shrink: 0; } .rd-sidebar-toggle:hover { background: var(--rd-n1); } .rd-sidebar-toggle:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: 2px; } /* Dim overlay that closes the drawer on click — hidden on desktop */ .rd-sidebar-backdrop { display: none; } @media (max-width: 767px) { .rd-sidebar { position: fixed; top: 0; left: 0; width: 280px; max-width: 85vw; z-index: 1000; transform: translateX(-100%); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); } .rd-sidebar.rd-sidebar--open { transform: translateX(0); } .rd-sidebar-toggle { display: inline-flex; } .rd-sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 999; opacity: 0; transition: opacity 0.2s ease; } .rd-sidebar-backdrop.rd-sidebar-backdrop--open { opacity: 1; } body.rd-sidebar-locked { overflow: hidden; } } .rd-sidebar-brand { display: block; padding: var(--rd-sp4) var(--rd-sp4); font-size: var(--rd-h3); font-weight: var(--rd-w-semibold); color: #FFFFFF !important; text-decoration: none !important; border-bottom: 1px solid rgba(255,255,255,0.1); line-height: 1.2; } .rd-sidebar-brand small { display: block; font-size: var(--rd-small); font-weight: var(--rd-w-regular); color: rgba(255,255,255,0.55) !important; margin-top: var(--rd-sp1); } .rd-sidebar-section { padding: var(--rd-sp3) 0 var(--rd-sp2) 0; } .rd-sidebar-section-label { padding: 0 var(--rd-sp4); margin-bottom: var(--rd-sp1); font-size: 0.6875rem; font-weight: var(--rd-w-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.4); } .rd-sidebar-link { display: flex; align-items: center; gap: var(--rd-sp2); padding: var(--rd-sp2) var(--rd-sp4); font-size: var(--rd-small); font-weight: var(--rd-w-medium); color: rgba(255,255,255,0.75) !important; text-decoration: none !important; transition: color var(--rd-ease), background var(--rd-ease); border-radius: 0; min-height: 40px; } .rd-sidebar-link:hover { color: #FFFFFF !important; background: rgba(255,255,255,0.08); text-decoration: none !important; } .rd-sidebar-link.active { color: #FFFFFF !important; background: var(--rd-primary); font-weight: var(--rd-w-semibold); } .rd-sidebar-footer { margin-top: auto; border-top: 1px solid rgba(255,255,255,0.1); padding: var(--rd-sp3) var(--rd-sp4); } /* Admin content area */ .rd-admin-content { background: var(--rd-bg); min-height: 100vh; display: flex; flex-direction: column; overflow-y: auto; } .rd-admin-topbar { background: var(--rd-bg-card); border-bottom: var(--rd-border); padding: 0 var(--rd-sp5); height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--rd-sp4); } .rd-admin-topbar-breadcrumb { font-size: var(--rd-small); color: var(--rd-text-sub); } .rd-admin-topbar-breadcrumb a { color: var(--rd-text-sub); } .rd-admin-topbar-breadcrumb span { margin: 0 var(--rd-sp1); } .rd-admin-body { padding: var(--rd-sp5); flex: 1; } /* Admin page header */ .rd-admin-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--rd-sp4); margin-bottom: var(--rd-sp5); flex-wrap: wrap; } .rd-admin-header h1 { font-size: var(--rd-h2) !important; margin-bottom: var(--rd-sp1) !important; } .rd-admin-header p { font-size: var(--rd-small); color: var(--rd-text-sub); margin: 0; } /* Mobile admin layout — sidebar becomes off-canvas drawer under 768px */ @media (max-width: 767px) { .rd-admin-shell { grid-template-columns: 1fr; } } /* ============================================================================= 12. FOOTER ============================================================================= */ .rd-footer { background: var(--rd-bg-card); border-top: var(--rd-border); padding: var(--rd-sp5) var(--rd-gutter); } .rd-footer-inner { max-width: var(--rd-max-width); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rd-sp4); } .rd-footer-links { display: flex; flex-wrap: wrap; gap: var(--rd-sp3); list-style: none; margin: 0; padding: 0; } .rd-footer-links li a { font-size: var(--rd-small); color: var(--rd-text-sub); } .rd-footer-links li a:hover { color: var(--rd-text); } .rd-footer-copy { font-size: var(--rd-small); color: var(--rd-n3); margin: 0; } /* ============================================================================= 13. UTILITIES — composable helpers ============================================================================= */ /* Text */ .rd-text-primary { color: var(--rd-primary) !important; } .rd-text-success { color: var(--rd-success) !important; } .rd-text-error { color: var(--rd-error) !important; } .rd-text-sub { color: var(--rd-text-sub) !important; } .rd-text-muted { color: var(--rd-n3) !important; } /* Font weight */ .rd-fw-regular { font-weight: var(--rd-w-regular) !important; } .rd-fw-medium { font-weight: var(--rd-w-medium) !important; } .rd-fw-semibold { font-weight: var(--rd-w-semibold) !important; } /* Display */ .rd-flex { display: flex; } .rd-grid { display: grid; } .rd-block { display: block; } .rd-hidden { display: none !important; } /* Flex helpers */ .rd-items-center { align-items: center; } .rd-items-start { align-items: flex-start; } .rd-justify-between { justify-content: space-between; } .rd-justify-center { justify-content: center; } .rd-justify-end { justify-content: flex-end; } .rd-flex-wrap { flex-wrap: wrap; } .rd-flex-col { flex-direction: column; } .rd-gap-1 { gap: var(--rd-sp1); } .rd-gap-2 { gap: var(--rd-sp2); } .rd-gap-3 { gap: var(--rd-sp3); } .rd-gap-4 { gap: var(--rd-sp4); } .rd-gap-5 { gap: var(--rd-sp5); } /* Spacing */ .rd-mt-1 { margin-top: var(--rd-sp1); } .rd-mt-2 { margin-top: var(--rd-sp2); } .rd-mt-3 { margin-top: var(--rd-sp3); } .rd-mt-4 { margin-top: var(--rd-sp4); } .rd-mt-5 { margin-top: var(--rd-sp5); } .rd-mt-6 { margin-top: var(--rd-sp6); } .rd-mb-1 { margin-bottom: var(--rd-sp1); } .rd-mb-2 { margin-bottom: var(--rd-sp2); } .rd-mb-3 { margin-bottom: var(--rd-sp3); } .rd-mb-4 { margin-bottom: var(--rd-sp4); } .rd-mb-5 { margin-bottom: var(--rd-sp5); } .rd-mb-6 { margin-bottom: var(--rd-sp6); } .rd-p-3 { padding: var(--rd-sp3); } .rd-p-4 { padding: var(--rd-sp4); } .rd-p-5 { padding: var(--rd-sp5); } /* Width */ .rd-w-full { width: 100%; } .rd-max-w { max-width: var(--rd-max-width); margin-left: auto; margin-right: auto; } /* Visual dividers */ .rd-divider { border: none; border-top: var(--rd-border); margin: var(--rd-sp5) 0; } /* A11y skip link — visually hidden until focused, then pinned top-left */ .rd-skip-link { position: absolute; top: -40px; left: 8px; z-index: 10000; background: var(--rd-primary); color: #FFFFFF; padding: var(--rd-sp2) var(--rd-sp3); border-radius: var(--rd-radius); font-weight: var(--rd-w-semibold); text-decoration: none; transition: top 0.2s ease; } .rd-skip-link:focus, .rd-skip-link:focus-visible { top: 8px; outline: 3px solid var(--rd-focus, #2563eb); outline-offset: 2px; } /* Toast / notification container */ .rd-toast-zone { position: fixed; top: calc(var(--rd-nav-h) + var(--rd-sp3)); right: var(--rd-sp4); z-index: 9000; display: flex; flex-direction: column; gap: var(--rd-sp2); max-width: 360px; width: 100%; } /* ============================================================================= 14. HERO BLOCK — homepage only ============================================================================= */ .rd-hero { background: var(--rd-primary); color: var(--rd-primary-text); padding: var(--rd-sp7) var(--rd-gutter); text-align: center; } .rd-hero-inner { max-width: var(--rd-max-width); margin: 0 auto; } .rd-hero h1 { font-size: clamp(1.875rem, 5vw, 2.75rem) !important; color: #FFFFFF !important; margin-bottom: var(--rd-sp3) !important; line-height: 1.2 !important; } .rd-hero p { font-size: 1.125rem; color: rgba(255,255,255,0.85); margin-bottom: var(--rd-sp5); max-width: 560px; margin-left: auto; margin-right: auto; } .rd-hero-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--rd-sp4); margin-bottom: var(--rd-sp6); } .rd-hero-meta-item { display: flex; flex-direction: column; align-items: center; gap: var(--rd-sp1); } .rd-hero-meta-label { font-size: var(--rd-small); color: rgba(255,255,255,0.6); font-weight: var(--rd-w-medium); text-transform: uppercase; letter-spacing: 0.06em; } .rd-hero-meta-value { font-size: 1.0625rem; font-weight: var(--rd-w-semibold); color: #FFFFFF; } .rd-hero-actions { display: flex; flex-wrap: wrap; gap: var(--rd-sp3); justify-content: center; } /* Hero button overrides — white on navy */ .rd-hero .rd-btn-primary { background: #FFFFFF; border-color: #FFFFFF; color: var(--rd-primary) !important; } .rd-hero .rd-btn-primary:hover { background: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.9); box-shadow: 0 4px 16px rgba(0,0,0,0.2); } .rd-hero .rd-btn-secondary { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); color: #FFFFFF !important; } .rd-hero .rd-btn-secondary:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.5); } /* ============================================================================= 15. COUNTDOWN COMPONENT ============================================================================= */ .rd-countdown { display: flex; flex-wrap: wrap; gap: var(--rd-sp3); justify-content: center; margin: var(--rd-sp4) 0; } .rd-countdown-unit { display: flex; flex-direction: column; align-items: center; background: rgba(255,255,255,0.12); border-radius: var(--rd-radius); padding: var(--rd-sp3) var(--rd-sp4); min-width: 72px; } .rd-countdown-num { font-size: 2rem; font-weight: var(--rd-w-semibold); color: #FFFFFF; line-height: 1; font-variant-numeric: tabular-nums; } .rd-countdown-label { font-size: 0.6875rem; color: rgba(255,255,255,0.6); font-weight: var(--rd-w-medium); letter-spacing: 0.06em; text-transform: uppercase; margin-top: var(--rd-sp1); } /* ============================================================================= 16. PAGE-TRANSITION SYSTEM Consistent entry for every page — no abrupt layout changes ============================================================================= */ @media (prefers-reduced-motion: no-preference) { body { animation: rd-page-fade-in 160ms ease-out both; } .rd-main { animation: rd-fade-in 200ms ease-out both; } .rd-section { animation: rd-section-fade-in 240ms ease-out both; animation-delay: 40ms; } .rd-section-alt { animation: rd-section-fade-in 240ms ease-out both; animation-delay: 60ms; } @keyframes rd-page-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes rd-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes rd-section-fade-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ============================================================================= 17. MOBILE TAB NAV — bottom nav on mobile ============================================================================= */ .rd-tab-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: var(--rd-bg-card); border-top: var(--rd-border); box-shadow: 0 -1px 8px rgba(0,0,0,0.08); } .rd-tab-nav-inner { display: flex; height: 56px; } .rd-tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none !important; color: var(--rd-n3) !important; font-size: 0.625rem; font-weight: var(--rd-w-medium); letter-spacing: 0.02em; transition: color var(--rd-ease); } .rd-tab-item.active, .rd-tab-item[aria-current="page"] { color: var(--rd-primary) !important; } .rd-tab-item svg { width: 22px; height: 22px; stroke-width: 1.75; } @media (max-width: 768px) { .rd-tab-nav { display: block; } .rd-main { padding-bottom: calc(56px + var(--rd-sp5)); /* clear tab nav */ } } /* ============================================================================= 18. OVERRIDE LAYER — corrects legacy inconsistencies site-wide These rules fix the most visible cross-file conflicts. ============================================================================= */ /* Enforce body font everywhere, no exceptions */ body, input, button, select, textarea { font-family: var(--rd-font) !important; } /* Navigation overrides — match rd-nav values */ .site-header { background: var(--rd-bg-card) !important; border-bottom: var(--rd-border) !important; box-shadow: 0 1px 0 var(--rd-n2) !important; } .navbar-main { min-height: var(--rd-nav-h) !important; background: var(--rd-bg-card) !important; } .nav-link, .navbar-item-link { font-family: var(--rd-font) !important; font-size: var(--rd-small) !important; font-weight: var(--rd-w-medium) !important; color: var(--rd-text-sub) !important; } .nav-link.active, .navbar-item-link.active { color: var(--rd-primary) !important; font-weight: var(--rd-w-semibold) !important; } /* Fix btn sizing everywhere */ .btn { min-height: 44px !important; border-radius: var(--rd-radius) !important; font-family: var(--rd-font) !important; font-size: var(--rd-body) !important; font-weight: var(--rd-w-semibold) !important; } .btn-primary { background: var(--rd-primary) !important; border-color: var(--rd-primary) !important; color: var(--rd-primary-text) !important; } .btn-primary:hover { background: var(--rd-primary-dark) !important; border-color: var(--rd-primary-dark) !important; } /* Card visual normalization */ .card, .card-default, .card-elevated { background: var(--rd-bg-card) !important; border: var(--rd-border) !important; border-radius: var(--rd-radius) !important; padding: var(--rd-sp4) !important; } /* Input normalization */ input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="date"], select, textarea { min-height: 48px !important; border-radius: var(--rd-radius) !important; border: var(--rd-border) !important; font-family: var(--rd-font) !important; font-size: var(--rd-body) !important; padding: var(--rd-sp2) var(--rd-sp3) !important; } input:focus, select:focus, textarea:focus { border-color: var(--rd-primary) !important; box-shadow: 0 0 0 3px rgba(43,87,150,0.15) !important; } /* Only kill the UA outline for non-keyboard focus so the :focus-visible ring defined earlier still shows for tab users. */ input:focus:not(:focus-visible), select:focus:not(:focus-visible), textarea:focus:not(:focus-visible) { outline: none !important; } /* Container max-width enforcement */ .container, .navbar-inner-container { max-width: var(--rd-max-width) !important; } /* Remove Bootstrap influence on admin where it persists */ .dropdown-item { font-family: var(--rd-font) !important; } /* ========================================================= EXTENDED UTILITIES — full-site migration additions ========================================================= */ /* ---------------------------------------------------------- PAGE HERO (internal pages — not full-width homepage hero) ---------------------------------------------------------- */ .rd-page-hero { background: var(--rd-primary); color: var(--rd-primary-text); padding: var(--rd-sp5) 0; } .rd-page-hero .rd-shell { display: flex; flex-direction: column; gap: var(--rd-sp2); } .rd-page-hero h1 { font-size: var(--rd-h1); font-weight: var(--rd-w-semibold); color: var(--rd-primary-text); margin: 0; line-height: 1.2; } .rd-page-hero p { font-size: var(--rd-body); color: rgba(255,255,255,.80); margin: 0; max-width: 52ch; } /* ---------------------------------------------------------- BADGE / PILL (status indicators) ---------------------------------------------------------- */ .rd-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: var(--rd-w-semibold); line-height: 1; padding: 3px 10px; border-radius: 99px; white-space: nowrap; font-family: var(--rd-font); } .rd-badge-success { background: #dcfce7; color: #166534; } .rd-badge-error { background: #fee2e2; color: #991b1b; } .rd-badge-warning { background: #fef9c3; color: #854d0e; } .rd-badge-info { background: #dbeafe; color: #1e40af; } .rd-badge-neutral { background: var(--rd-neutral-100); color: var(--rd-neutral-700); } .rd-badge-primary { background: var(--rd-primary); color: var(--rd-primary-text); } /* ---------------------------------------------------------- TABLE ---------------------------------------------------------- */ .rd-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--rd-border-color); border-radius: var(--rd-radius); } .rd-table { width: 100%; border-collapse: collapse; font-size: var(--rd-body); font-family: var(--rd-font); color: var(--rd-text); } .rd-table thead tr { background: var(--rd-neutral-50); border-bottom: 1px solid var(--rd-border-color); } .rd-table th { padding: var(--rd-sp2) var(--rd-sp3); font-size: 0.8125rem; font-weight: var(--rd-w-semibold); text-transform: uppercase; letter-spacing: .04em; color: var(--rd-text-sub); text-align: left; white-space: nowrap; } .rd-table td { padding: var(--rd-sp2) var(--rd-sp3); border-bottom: 1px solid var(--rd-border-color); vertical-align: middle; } .rd-table tbody tr:last-child td { border-bottom: none; } .rd-table tbody tr:hover { background: var(--rd-neutral-50); } .rd-table .rd-table-actions { display: flex; gap: var(--rd-sp2); align-items: center; } /* ---------------------------------------------------------- STAT / METRIC CARD (admin dashboard counts) ---------------------------------------------------------- */ .rd-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--rd-sp3); } .rd-stat { background: var(--rd-bg-card); border: 1px solid var(--rd-border-color); border-radius: var(--rd-radius); padding: var(--rd-sp4); text-align: center; } .rd-stat-value { display: block; font-size: 2rem; font-weight: var(--rd-w-semibold); color: var(--rd-primary); line-height: 1; margin-bottom: var(--rd-sp1); font-family: var(--rd-font); } .rd-stat-label { font-size: 0.8125rem; font-weight: var(--rd-w-medium); text-transform: uppercase; letter-spacing: .05em; color: var(--rd-text-sub); font-family: var(--rd-font); } .rd-stat-sub { font-size: 0.8125rem; color: var(--rd-text-sub); margin-top: var(--rd-sp1); } /* ---------------------------------------------------------- EMPTY STATE ---------------------------------------------------------- */ .rd-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--rd-sp3); padding: var(--rd-sp6) var(--rd-sp4); text-align: center; } .rd-empty-icon { width: 48px; height: 48px; color: var(--rd-neutral-400); } .rd-empty-title { font-size: var(--rd-h3); font-weight: var(--rd-w-semibold); color: var(--rd-text); margin: 0; } .rd-empty-body { font-size: var(--rd-body); color: var(--rd-text-sub); margin: 0; max-width: 36ch; } /* ---------------------------------------------------------- SPINNER / LOADING ---------------------------------------------------------- */ .rd-spinner { display: inline-block; width: 24px; height: 24px; border: 3px solid var(--rd-border-color); border-top-color: var(--rd-primary); border-radius: 50%; animation: rd-spin .7s linear infinite; } .rd-spinner-lg { width: 40px; height: 40px; border-width: 4px; } .rd-loading { display: flex; flex-direction: column; align-items: center; gap: var(--rd-sp3); padding: var(--rd-sp6); color: var(--rd-text-sub); } /* Button loading states */ .rd-btn-loading { position: relative; color: transparent !important; pointer-events: none; } .rd-btn-loading::after { content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: white; border-radius: 50%; animation: rd-spin .7s linear infinite; } .rd-btn-secondary.rd-btn-loading::after { border: 2px solid rgba(0, 0, 0, 0.1); border-top-color: var(--rd-primary); } .rd-btn-ghost.rd-btn-loading::after { border: 2px solid rgba(0, 0, 0, 0.1); border-top-color: var(--rd-text-sub); } /* Processing feedback */ .rd-processing { opacity: 0.7; pointer-events: none; cursor: wait; } .rd-processing::after { content: 'Processing…'; display: inline-block; margin-left: var(--rd-sp2); font-size: var(--rd-small); font-weight: var(--rd-w-regular); color: var(--rd-text-sub); } @keyframes rd-spin { to { transform: rotate(360deg); } } /* ---------------------------------------------------------- EMPTY STATE SYSTEM — friendly messages with clear next steps ---------------------------------------------------------- */ .rd-empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--rd-sp6) var(--rd-sp4); color: var(--rd-text-sub); animation: rd-fade-in 240ms ease-out both; } .rd-empty-state-icon { width: 64px; height: 64px; margin-bottom: var(--rd-sp4); color: var(--rd-n3); opacity: 0.6; } .rd-empty-state-title { font-size: var(--rd-h3); font-weight: var(--rd-w-semibold); color: var(--rd-text); margin-bottom: var(--rd-sp2); } .rd-empty-state-message { font-size: var(--rd-body); line-height: var(--rd-lh-body); max-width: 400px; margin-bottom: var(--rd-sp4); } .rd-empty-state-actions { display: flex; gap: var(--rd-sp2); flex-wrap: wrap; justify-content: center; } /* Empty state variations */ .rd-empty-state-success .rd-empty-state-icon { color: var(--rd-success); } .rd-empty-state-error .rd-empty-state-icon { color: var(--rd-error); } .rd-empty-state-warning .rd-empty-state-icon { color: var(--rd-warning); } .rd-empty-state-info .rd-empty-state-icon { color: var(--rd-info); } /* ---------------------------------------------------------- INFO ROW (label: value pairs) ---------------------------------------------------------- */ .rd-info-list { display: flex; flex-direction: column; gap: var(--rd-sp2); } .rd-info-row { display: grid; grid-template-columns: minmax(120px, 30%) 1fr; gap: var(--rd-sp3); align-items: baseline; font-family: var(--rd-font); } .rd-info-row dt { font-size: 0.8125rem; font-weight: var(--rd-w-semibold); text-transform: uppercase; letter-spacing: .04em; color: var(--rd-text-sub); } .rd-info-row dd { font-size: var(--rd-body); color: var(--rd-text); margin: 0; } /* ---------------------------------------------------------- TIMELINE (schedule / event log) ---------------------------------------------------------- */ .rd-timeline { display: flex; flex-direction: column; gap: 0; position: relative; } .rd-timeline-item { display: grid; grid-template-columns: 80px 24px 1fr; gap: var(--rd-sp3); align-items: flex-start; padding-bottom: var(--rd-sp4); } .rd-timeline-item:last-child { padding-bottom: 0; } .rd-timeline-time { font-size: 0.8125rem; font-weight: var(--rd-w-semibold); color: var(--rd-text-sub); text-align: right; padding-top: 2px; } .rd-timeline-dot { display: flex; flex-direction: column; align-items: center; gap: 0; } .rd-timeline-dot::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--rd-primary); flex-shrink: 0; margin-top: 4px; } .rd-timeline-dot::after { content: ''; flex: 1; width: 2px; background: var(--rd-border-color); min-height: 24px; } .rd-timeline-item:last-child .rd-timeline-dot::after { display: none; } .rd-timeline-content { padding-bottom: var(--rd-sp3); } .rd-timeline-title { font-size: var(--rd-body); font-weight: var(--rd-w-semibold); color: var(--rd-text); margin: 0 0 var(--rd-sp1); } .rd-timeline-body { font-size: var(--rd-small); color: var(--rd-text-sub); margin: 0; } .rd-timeline-item--highlight .rd-timeline-dot::before { background: var(--rd-accent); width: 14px; height: 14px; margin-top: 2px; } .rd-timeline-item--highlight .rd-timeline-title { color: var(--rd-accent); } /* ---------------------------------------------------------- TABS (horizontal tab bar inside a page) ---------------------------------------------------------- */ .rd-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--rd-border-color); margin-bottom: var(--rd-sp4); overflow-x: auto; } .rd-tab { display: inline-flex; align-items: center; gap: var(--rd-sp2); padding: var(--rd-sp2) var(--rd-sp3); font-size: var(--rd-body); font-weight: var(--rd-w-medium); color: var(--rd-text-sub); border-bottom: 2px solid transparent; margin-bottom: -2px; text-decoration: none; white-space: nowrap; transition: color .15s, border-color .15s; font-family: var(--rd-font); cursor: pointer; background: none; border-top: none; border-left: none; border-right: none; } .rd-tab:hover { color: var(--rd-text); } .rd-tab.active, .rd-tab[aria-selected="true"] { color: var(--rd-primary); border-bottom-color: var(--rd-primary); font-weight: var(--rd-w-semibold); } /* ---------------------------------------------------------- SEARCH BAR ---------------------------------------------------------- */ .rd-search { display: flex; gap: var(--rd-sp2); align-items: center; } .rd-search-input { flex: 1; min-height: 44px; padding: 0 var(--rd-sp3); border: 1px solid var(--rd-border-color); border-radius: var(--rd-radius); font-size: var(--rd-body); font-family: var(--rd-font); color: var(--rd-text); background: var(--rd-bg-card); transition: border-color .15s, box-shadow .15s; } .rd-search-input:focus { border-color: var(--rd-primary); box-shadow: 0 0 0 3px rgba(43,87,150,.12); } .rd-search-input:focus:not(:focus-visible) { outline: none; } .rd-search-input::placeholder { color: var(--rd-neutral-400); } /* ---------------------------------------------------------- FILTER ROW (search + filter + action controls) ---------------------------------------------------------- */ .rd-filter-row { display: flex; gap: var(--rd-sp3); align-items: center; flex-wrap: wrap; margin-bottom: var(--rd-sp4); } .rd-filter-row > * { flex-shrink: 0; } .rd-filter-row .rd-search-input { flex: 1; min-width: 200px; } /* ---------------------------------------------------------- DIVIDER ---------------------------------------------------------- */ .rd-divider { border: none; border-top: 1px solid var(--rd-border-color); margin: var(--rd-sp4) 0; } /* ---------------------------------------------------------- CODE (monospace output) ---------------------------------------------------------- */ .rd-code { font-family: 'Courier New', Courier, monospace; font-size: 0.875rem; background: var(--rd-neutral-50); border: 1px solid var(--rd-border-color); border-radius: var(--rd-radius); padding: var(--rd-sp3) var(--rd-sp4); overflow-x: auto; white-space: pre-wrap; word-break: break-all; color: var(--rd-text); } /* ---------------------------------------------------------- PROSE (rich text / CMS content) ---------------------------------------------------------- */ .rd-prose { max-width: 65ch; } .rd-prose h2 { font-size: var(--rd-h2); color: var(--rd-text); margin: var(--rd-sp5) 0 var(--rd-sp2); } .rd-prose h3 { font-size: var(--rd-h3); color: var(--rd-text); margin: var(--rd-sp4) 0 var(--rd-sp2); } .rd-prose p { margin: 0 0 var(--rd-sp3); line-height: 1.7; } .rd-prose ul, .rd-prose ol { padding-left: var(--rd-sp4); margin: 0 0 var(--rd-sp3); } .rd-prose li { margin-bottom: var(--rd-sp1); line-height: 1.6; } .rd-prose a { color: var(--rd-primary); text-decoration: underline; } .rd-prose strong { font-weight: var(--rd-w-semibold); } .rd-prose blockquote { border-left: 3px solid var(--rd-accent); padding-left: var(--rd-sp3); margin: var(--rd-sp4) 0; color: var(--rd-text-sub); font-style: italic; } /* ---------------------------------------------------------- NOTICE BOX (important callout inside prose) ---------------------------------------------------------- */ .rd-notice { display: flex; gap: var(--rd-sp3); padding: var(--rd-sp3) var(--rd-sp4); border-radius: var(--rd-radius); border-left: 4px solid; font-size: var(--rd-body); font-family: var(--rd-font); } .rd-notice-success { background: #f0fdf4; border-color: #16a34a; color: #14532d; } .rd-notice-error { background: #fef2f2; border-color: #dc2626; color: #7f1d1d; } .rd-notice-warning { background: #fffbeb; border-color: #d97706; color: #78350f; } .rd-notice-info { background: #eff6ff; border-color: #2563eb; color: #1e3a8a; } .rd-notice p { margin: 0; } /* ---------------------------------------------------------- STEP INDICATOR (checkout / wizard steps) ---------------------------------------------------------- */ .rd-steps { display: flex; gap: 0; align-items: center; margin-bottom: var(--rd-sp5); overflow-x: auto; } .rd-step { display: flex; align-items: center; gap: var(--rd-sp2); flex-shrink: 0; font-size: var(--rd-small); font-weight: var(--rd-w-medium); color: var(--rd-text-sub); font-family: var(--rd-font); } .rd-step::after { content: ''; display: block; width: 32px; height: 2px; background: var(--rd-border-color); margin: 0 var(--rd-sp2); flex-shrink: 0; } .rd-step:last-child::after { display: none; } .rd-step-num { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: var(--rd-w-semibold); background: var(--rd-neutral-100); color: var(--rd-text-sub); flex-shrink: 0; } .rd-step.active .rd-step-num { background: var(--rd-primary); color: #fff; } .rd-step.active { color: var(--rd-primary); font-weight: var(--rd-w-semibold); } .rd-step.done .rd-step-num { background: var(--rd-success); color: #fff; } .rd-step.done::after { background: var(--rd-success); } /* ---------------------------------------------------------- GALLERY GRID ---------------------------------------------------------- */ .rd-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--rd-sp3); } .rd-gallery-item { border-radius: var(--rd-radius); overflow: hidden; background: var(--rd-neutral-100); aspect-ratio: 4/3; position: relative; } .rd-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; } .rd-gallery-item:hover img { transform: scale(1.04); } /* ---------------------------------------------------------- PROGRESS BAR ---------------------------------------------------------- */ .rd-progress { height: 8px; background: var(--rd-neutral-100); border-radius: 99px; overflow: hidden; } .rd-progress-bar { height: 100%; background: var(--rd-primary); border-radius: 99px; transition: width .3s ease; } .rd-progress-bar--success { background: var(--rd-success); } .rd-progress-bar--warning { background: #d97706; } .rd-progress-bar--error { background: var(--rd-error); } /* ---------------------------------------------------------- RESPONSIVE UTILITIES ---------------------------------------------------------- */ .rd-hide-mobile { display: block; } @media (max-width: 639px) { .rd-hide-mobile { display: none !important; } .rd-show-mobile { display: block !important; } .rd-stat-grid { grid-template-columns: repeat(2, 1fr); } .rd-timeline-item { grid-template-columns: 56px 20px 1fr; } .rd-info-row { grid-template-columns: 1fr; gap: var(--rd-sp1); } .rd-info-row dt { text-transform: none; letter-spacing: 0; font-size: var(--rd-small); } .rd-filter-row { flex-direction: column; align-items: stretch; } .rd-filter-row .rd-search-input { flex: none; } } .rd-show-mobile { display: none; } /* ---------------------------------------------------------- TEXT UTILITIES (keep in system, avoid ad-hoc inline styles) ---------------------------------------------------------- */ .rd-text-center { text-align: center; } .rd-text-right { text-align: right; } .rd-text-small { font-size: var(--rd-small); } .rd-text-sub { color: var(--rd-text-sub); } .rd-text-success { color: var(--rd-success); } .rd-text-error { color: var(--rd-error); } .rd-text-accent { color: var(--rd-accent); } .rd-fw-medium { font-weight: var(--rd-w-medium); } .rd-fw-semibold { font-weight: var(--rd-w-semibold); } .rd-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------------------------------------------------------- LAYOUT UTILITIES ---------------------------------------------------------- */ .rd-flex { display: flex; } .rd-flex-center { display: flex; align-items: center; } .rd-flex-between { display: flex; align-items: center; justify-content: space-between; } .rd-flex-gap2 { gap: var(--rd-sp2); } .rd-flex-gap3 { gap: var(--rd-sp3); } .rd-flex-wrap { flex-wrap: wrap; } .rd-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--rd-sp3); } .rd-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rd-sp3); } @media (max-width: 767px) { .rd-grid-2 { grid-template-columns: 1fr; } .rd-grid-3 { grid-template-columns: 1fr; } } .rd-full { width: 100%; } .rd-max-form { max-width: 540px; margin: 0 auto; } .rd-mt0 { margin-top: 0 !important; } .rd-mb0 { margin-bottom: 0 !important; } /* ---------------------------------------------------------- ADMIN PAGE HEADER helpers (used in child templates) ---------------------------------------------------------- */ .rd-admin-page-intro { font-size: var(--rd-body); color: var(--rd-text-sub); margin: 0; } .rd-admin-actions { display: flex; gap: var(--rd-sp2); align-items: center; flex-wrap: wrap; } .rd-admin-section { margin-bottom: var(--rd-sp5); } .rd-admin-section:last-child { margin-bottom: 0; } .rd-admin-section-title { font-size: var(--rd-h3); font-weight: var(--rd-w-semibold); color: var(--rd-text); margin: 0 0 var(--rd-sp3); padding-bottom: var(--rd-sp2); border-bottom: 1px solid var(--rd-border-color); } /* ---------------------------------------------------------- PAGINATION ---------------------------------------------------------- */ .rd-pagination { display: flex; gap: var(--rd-sp1); align-items: center; justify-content: center; margin-top: var(--rd-sp4); flex-wrap: wrap; } .rd-page-btn { min-width: 36px; height: 36px; padding: 0 var(--rd-sp2); border: 1px solid var(--rd-border-color); border-radius: var(--rd-radius); background: var(--rd-bg-card); color: var(--rd-text); font-size: var(--rd-small); font-family: var(--rd-font); font-weight: var(--rd-w-medium); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: background .15s, color .15s; } .rd-page-btn:hover:not(:disabled) { background: var(--rd-neutral-100); color: var(--rd-primary); } .rd-page-btn.active { background: var(--rd-primary); color: #fff; border-color: var(--rd-primary); } .rd-page-btn:disabled { opacity: .4; cursor: not-allowed; } /* ---------------------------------------------------------- ACCESSIBILITY HARDENING — Enhanced focus states & contrast ---------------------------------------------------------- */ /* Enhanced focus states for all interactive elements */ .rd-btn:focus-visible, .rd-card:focus-visible, .rd-input:focus-visible, .rd-select:focus-visible, .rd-textarea:focus-visible, .rd-check-input:focus-visible, .rd-radio-input:focus-visible, .rd-page-btn:focus-visible, .rd-tab-item:focus-visible, .rd-sidebar-link:focus-visible { outline: 3px solid var(--rd-primary); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(43, 87, 150, 0.15); } /* High contrast mode support */ @media (prefers-contrast: high) { .rd-btn, .rd-card, .rd-input, .rd-select, .rd-textarea { border-width: 2px; } .rd-btn-primary { background-color: var(--rd-primary); color: white; border: 2px solid var(--rd-primary); } .rd-btn-secondary { background-color: transparent; color: var(--rd-primary); border: 2px solid var(--rd-primary); } .rd-btn-danger { background-color: var(--rd-error); color: white; border: 2px solid var(--rd-error); } } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .rd-btn, .rd-card, .rd-input, .rd-select, .rd-textarea { transition: none !important; } } /* Screen reader only content */ .rd-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* (.rd-skip-link is defined once near the top of this file) */ /* Focus indicator for keyboard navigation */ .rd-keyboard-nav :focus { outline: 3px solid var(--rd-primary); outline-offset: 2px; } /* Ensure sufficient color contrast for all text */ .rd-text, .rd-text-sub, .rd-h1, .rd-h2, .rd-h3, .rd-h4, .rd-body, .rd-small { color-contrast: ensure; } /* ============================================================================= 16. COGNITIVE UX ENGINEERING — PERCEIVED PERFORMANCE + PSYCHOLOGICAL UX ============================================================================= */ /* ----------------------------------------------------------------------------- 16.1 SKELETON LOADING STATES — Replace blank loading areas ----------------------------------------------------------------------------- */ .rd-skeleton { background: linear-gradient( 90deg, var(--rd-n1) 0%, var(--rd-n2) 50%, var(--rd-n1) 100% ); background-size: 200% 100%; animation: rd-skeleton-pulse 1.5s ease-in-out infinite; border-radius: var(--rd-radius); opacity: 0.7; } .rd-skeleton-text { height: 1em; margin-bottom: 0.5em; border-radius: var(--rd-radius-sm); } .rd-skeleton-text:last-child { margin-bottom: 0; } .rd-skeleton-text.short { width: 60%; } .rd-skeleton-text.medium { width: 80%; } .rd-skeleton-card { height: 120px; } .rd-skeleton-button { height: 44px; width: 120px; } .rd-skeleton-image { height: 200px; aspect-ratio: 16/9; } @keyframes rd-skeleton-pulse { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* ----------------------------------------------------------------------------- 16.2 IMMEDIATE FEEDBACK — Button states within 50ms ----------------------------------------------------------------------------- */ .rd-btn { transition: all 50ms cubic-bezier(0.2, 0.8, 0.2, 1) !important; position: relative; overflow: hidden; } .rd-btn:active { transform: scale(0.98) !important; } .rd-btn:focus-visible { outline: 3px solid var(--rd-primary) !important; outline-offset: 2px !important; box-shadow: 0 0 0 4px rgba(43, 87, 150, 0.15) !important; } .rd-btn-loading { position: relative; color: transparent !important; } .rd-btn-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: white; border-radius: 50%; animation: rd-spin 0.8s linear infinite; } @keyframes rd-spin { to { transform: rotate(360deg); } } /* ----------------------------------------------------------------------------- 16.3 ACTION CONFIDENCE — Success/error feedback ----------------------------------------------------------------------------- */ .rd-feedback { padding: var(--rd-sp3); border-radius: var(--rd-radius); margin-bottom: var(--rd-sp3); animation: rd-feedback-slide 0.3s ease-out; } .rd-feedback-success { background: var(--rd-success-bg); border-left: 4px solid var(--rd-success); color: var(--rd-success); } .rd-feedback-error { background: var(--rd-error-bg); border-left: 4px solid var(--rd-error); color: var(--rd-error); } .rd-feedback-warning { background: var(--rd-warning-bg); border-left: 4px solid var(--rd-warning); color: var(--rd-warning); } .rd-feedback-info { background: var(--rd-info-bg); border-left: 4px solid var(--rd-info); color: var(--rd-info); } @keyframes rd-feedback-slide { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Inline success/error indicators */ .rd-input-success { border-color: var(--rd-success) !important; background-color: var(--rd-success-bg) !important; } .rd-input-error { border-color: var(--rd-error) !important; background-color: var(--rd-error-bg) !important; } .rd-input-validating { border-color: var(--rd-info) !important; background-color: var(--rd-info-bg) !important; } /* ----------------------------------------------------------------------------- 16.4 NAVIGATION CONTINUITY — Subtle transitions ----------------------------------------------------------------------------- */ .rd-page-transition { animation: rd-page-fade 0.2s ease-out; } @keyframes rd-page-fade { from { opacity: 0.8; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Active state persistence */ .rd-nav-link.active, .rd-tab-item.active { position: relative; font-weight: var(--rd-w-semibold) !important; } .rd-nav-link.active::after, .rd-tab-item.active::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 3px; background: var(--rd-primary); border-radius: 2px; } /* ----------------------------------------------------------------------------- 16.5 COGNITIVE LOAD REDUCTION — One primary action per screen ----------------------------------------------------------------------------- */ .rd-primary-action { font-weight: var(--rd-w-semibold) !important; box-shadow: 0 4px 12px rgba(43, 87, 150, 0.25) !important; } .rd-secondary-action { opacity: 0.9; font-weight: var(--rd-w-regular) !important; } /* Inline guidance */ .rd-input-help { font-size: var(--rd-small); color: var(--rd-text-sub); margin-top: var(--rd-sp1); display: block; } .rd-input-help.success { color: var(--rd-success); } .rd-input-help.error { color: var(--rd-error); } /* ----------------------------------------------------------------------------- 16.6 ERROR PREVENTION — Live validation ----------------------------------------------------------------------------- */ .rd-validation-message { font-size: var(--rd-small); padding: var(--rd-sp1) var(--rd-sp2); border-radius: var(--rd-radius-sm); margin-top: var(--rd-sp1); display: none; } .rd-validation-message.show { display: block; animation: rd-feedback-slide 0.2s ease-out; } .rd-validation-message.error { background: var(--rd-error-bg); color: var(--rd-error); border-left: 3px solid var(--rd-error); } .rd-validation-message.warning { background: var(--rd-warning-bg); color: var(--rd-warning); border-left: 3px solid var(--rd-warning); } .rd-validation-message.success { background: var(--rd-success-bg); color: var(--rd-success); border-left: 3px solid var(--rd-success); } /* ----------------------------------------------------------------------------- 16.7 TRUST SIGNALS — Stable UI behavior ----------------------------------------------------------------------------- */ .rd-no-layout-shift { contain: layout style paint; } .rd-stable-height { min-height: 44px; /* Minimum touch target size */ } /* Consistent response timing indicators */ .rd-loading-indicator { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--rd-primary) 0%, var(--rd-success) 100%); transform: translateX(-100%); z-index: 9999; } .rd-loading-indicator.active { animation: rd-loading-progress 2s ease-in-out; } @keyframes rd-loading-progress { 0% { transform: translateX(-100%); } 50% { transform: translateX(0%); } 100% { transform: translateX(100%); } } /* ----------------------------------------------------------------------------- 16.8 PROGRESSIVE REVEAL — Staggered content loading ----------------------------------------------------------------------------- */ .rd-content-stagger > * { opacity: 0; transform: translateY(10px); animation: rd-stagger-reveal 0.4s ease-out forwards; } .rd-content-stagger > *:nth-child(1) { animation-delay: 0.1s; } .rd-content-stagger > *:nth-child(2) { animation-delay: 0.2s; } .rd-content-stagger > *:nth-child(3) { animation-delay: 0.3s; } .rd-content-stagger > *:nth-child(4) { animation-delay: 0.4s; } .rd-content-stagger > *:nth-child(5) { animation-delay: 0.5s; } .rd-content-stagger > *:nth-child(6) { animation-delay: 0.6s; } .rd-content-stagger > *:nth-child(7) { animation-delay: 0.7s; } .rd-content-stagger > *:nth-child(8) { animation-delay: 0.8s; } .rd-content-stagger > *:nth-child(9) { animation-delay: 0.9s; } .rd-content-stagger > *:nth-child(10) { animation-delay: 1.0s; } @keyframes rd-stagger-reveal { to { opacity: 1; transform: translateY(0); } } /* ----------------------------------------------------------------------------- 16.9 MICROCOPY ENHANCEMENTS — Human tone and clarity ----------------------------------------------------------------------------- */ .rd-microcopy { font-size: var(--rd-body); line-height: var(--rd-lh-body); color: var(--rd-text-sub); } .rd-microcopy.emphasis { color: var(--rd-text); font-weight: var(--rd-w-medium); } .rd-microcopy.reassuring { color: var(--rd-success); font-style: italic; } .rd-microcopy.actionable { color: var(--rd-primary); font-weight: var(--rd-w-medium); } /* ----------------------------------------------------------------------------- 16.10 LONG ACTION INDICATORS — For actions >400ms ----------------------------------------------------------------------------- */ .rd-long-action { position: relative; } .rd-long-action-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--rd-primary); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease-out; } .rd-long-action.active .rd-long-action-progress { transform: scaleX(1); } .rd-long-action-message { font-size: var(--rd-small); color: var(--rd-text-sub); margin-top: var(--rd-sp2); text-align: center; font-style: italic; } /* ----------------------------------------------------------------------------- 16.11 INLINE GUIDANCE & VALIDATION — Error prevention ----------------------------------------------------------------------------- */ .rd-input-help { display: block; font-size: var(--rd-small); color: var(--rd-text-sub); margin-top: var(--rd-sp1); line-height: var(--rd-lh-small); } .rd-input-help.success { color: var(--rd-success); } .rd-input-help.error { color: var(--rd-error); } .rd-input-help.warning { color: var(--rd-warning); } .rd-validation-message { font-size: var(--rd-small); margin-top: var(--rd-sp1); padding: var(--rd-sp1) var(--rd-sp2); border-radius: calc(var(--rd-radius) / 2); display: none; } .rd-validation-message.show { display: block; } .rd-validation-message.success { background: var(--rd-success-bg); color: var(--rd-success); border-left: 3px solid var(--rd-success); } .rd-validation-message.error { background: var(--rd-error-bg); color: var(--rd-error); border-left: 3px solid var(--rd-error); } .rd-validation-message.warning { background: var(--rd-warning-bg); color: var(--rd-warning); border-left: 3px solid var(--rd-warning); } .rd-input-success { border-color: var(--rd-success) !important; background: var(--rd-success-bg) !important; } .rd-input-error { border-color: var(--rd-error) !important; background: var(--rd-error-bg) !important; } .rd-input-validating { border-color: var(--rd-accent) !important; background: var(--rd-accent-bg) !important; } /* ----------------------------------------------------------------------------- 16.12 TRUST SIGNALS — Stable UI behavior ----------------------------------------------------------------------------- */ .rd-no-layout-shift { contain: layout style paint; will-change: transform; } .rd-stable-transition { transition: all 0.2s ease-out; } .rd-predictable-timing { animation-duration: 0.2s !important; transition-duration: 0.2s !important; } /* ----------------------------------------------------------------------------- 16.13 COGNITIVE LOAD REDUCTION — One primary action ----------------------------------------------------------------------------- */ .rd-primary-action { box-shadow: 0 4px 12px rgba(30, 45, 84, 0.25); transform: translateY(-1px); } .rd-secondary-action { opacity: 0.85; } .rd-secondary-action:hover { opacity: 1; } /* ----------------------------------------------------------------------------- 16.14 NAVIGATION CONTINUITY — Subtle transitions ----------------------------------------------------------------------------- */ .rd-page-transition { animation: rdPageFadeIn 0.3s ease-out; } @keyframes rdPageFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .rd-nav-active-indicator { position: relative; } .rd-nav-active-indicator::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 3px; background: var(--rd-accent); border-radius: 3px; } /* ----------------------------------------------------------------------------- 16.15 IMMEDIATE FEEDBACK — 50ms response ----------------------------------------------------------------------------- */ .rd-btn-active { transform: scale(0.98); transition: transform 0.05s ease-out; } .rd-btn-loading { position: relative; color: transparent !important; } .rd-btn-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: white; border-radius: 50%; animation: rdSpin 0.6s linear infinite; } @keyframes rdSpin { to { transform: rotate(360deg); } } /* ----------------------------------------------------------------------------- 16.16 ACTION CONFIDENCE — Success/error feedback ----------------------------------------------------------------------------- */ .rd-feedback { padding: var(--rd-sp2) var(--rd-sp3); border-radius: var(--rd-radius); font-size: var(--rd-body); margin: var(--rd-sp2) 0; animation: rdFeedbackSlideIn 0.3s ease-out; } @keyframes rdFeedbackSlideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .rd-feedback-success { background: var(--rd-success-bg); color: var(--rd-success); border: 1px solid var(--rd-success); } .rd-feedback-error { background: var(--rd-error-bg); color: var(--rd-error); border: 1px solid var(--rd-error); } .rd-feedback-warning { background: var(--rd-warning-bg); color: var(--rd-warning); border: 1px solid var(--rd-warning); } .rd-feedback-info { background: var(--rd-info-bg); color: var(--rd-info); border: 1px solid var(--rd-info); } /* ----------------------------------------------------------------------------- 16.17 PROGRESSIVE REVEAL — Staggered loading ----------------------------------------------------------------------------- */ .rd-content-stagger > * { opacity: 0; transform: translateY(10px); animation: rdStaggerReveal 0.4s ease-out forwards; } .rd-content-stagger > *:nth-child(1) { animation-delay: 0.1s; } .rd-content-stagger > *:nth-child(2) { animation-delay: 0.2s; } .rd-content-stagger > *:nth-child(3) { animation-delay: 0.3s; } .rd-content-stagger > *:nth-child(4) { animation-delay: 0.4s; } .rd-content-stagger > *:nth-child(5) { animation-delay: 0.5s; } @keyframes rdStaggerReveal { to { opacity: 1; transform: translateY(0); } } /* ----------------------------------------------------------------------------- 16.18 LOADING INDICATORS — For longer actions ----------------------------------------------------------------------------- */ .rd-loading-indicator { width: 40px; height: 40px; margin: var(--rd-sp3) auto; border: 3px solid var(--rd-border); border-top-color: var(--rd-primary); border-radius: 50%; animation: rdLoadingSpin 1s linear infinite; opacity: 0; transition: opacity 0.3s ease-out; } .rd-loading-indicator.active { opacity: 1; } @keyframes rdLoadingSpin { to { transform: rotate(360deg); } } /* ----------------------------------------------------------------------------- 16.19 SUBTLE DELIGHT MOMENTS — Quiet satisfaction animations ----------------------------------------------------------------------------- */ .rd-delight-checkmark { display: inline-block; width: 20px; height: 20px; margin-left: var(--rd-sp2); opacity: 0; transform: scale(0.8); transition: all 0.3s ease-out; } .rd-delight-checkmark.show { opacity: 1; transform: scale(1); } .rd-delight-checkmark svg { width: 100%; height: 100%; stroke: var(--rd-success); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; fill: none; } .rd-delight-gentle-highlight { animation: rdGentleHighlight 1.2s ease-out; background: linear-gradient(90deg, rgba(43, 87, 150, 0.05) 0%, rgba(43, 87, 150, 0.1) 50%, rgba(43, 87, 150, 0.05) 100%); border-radius: var(--rd-radius-sm); } @keyframes rdGentleHighlight { 0% { background: linear-gradient(90deg, rgba(43, 87, 150, 0) 0%, rgba(43, 87, 150, 0) 50%, rgba(43, 87, 150, 0) 100%); } 20% { background: linear-gradient(90deg, rgba(43, 87, 150, 0.1) 0%, rgba(43, 87, 150, 0.2) 50%, rgba(43, 87, 150, 0.1) 100%); } 100% { background: linear-gradient(90deg, rgba(43, 87, 150, 0.05) 0%, rgba(43, 87, 150, 0.1) 50%, rgba(43, 87, 150, 0.05) 100%); } } .rd-delight-soft-fade { animation: rdSoftFade 2s ease-out; } @keyframes rdSoftFade { 0% { opacity: 0; transform: translateY(4px); } 10% { opacity: 1; transform: translateY(0); } 90% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-4px); } } .rd-delight-success-pulse { animation: rdSuccessPulse 1.5s ease-out; } @keyframes rdSuccessPulse { 0% { box-shadow: 0 0 0 0 rgba(42, 123, 79, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(42, 123, 79, 0); } 100% { box-shadow: 0 0 0 0 rgba(42, 123, 79, 0); } } /* ============================================================================= PROGRESS INDICATOR — Momentum & Flow Control ============================================================================= */ .rd-progress { position: relative; margin-bottom: var(--rd-sp4); } .rd-progress-bar { height: 4px; background: var(--rd-primary); border-radius: 2px; transition: width 0.3s ease; } .rd-progress-steps { display: flex; justify-content: space-between; margin-top: var(--rd-sp2); position: relative; } .rd-progress-step { font-size: 0.875rem; color: var(--rd-text-sub); position: relative; padding-top: 1.5rem; text-align: center; flex: 1; } .rd-progress-step::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--rd-n2); border: 2px solid white; } .rd-progress-step-active { color: var(--rd-primary); font-weight: var(--rd-w-medium); } .rd-progress-step-active::before { background: var(--rd-primary); box-shadow: 0 0 0 2px var(--rd-primary-light); } /* ============================================================================= TOGGLE SWITCHES For boolean settings in admin panel ============================================================================= */ .rd-toggle { position: relative; display: inline-block; width: 50px; height: 24px; } .rd-toggle input.rd-input { opacity: 0 !important; width: 0 !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; transform: none !important; position: absolute !important; pointer-events: none !important; } .rd-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--rd-n2); border-radius: 24px; transition: .2s; } .rd-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: .2s; } input:checked + .rd-slider { background-color: var(--rd-primary); } input:checked + .rd-slider:before { transform: translateX(26px); } /* ============================================================================= 15. MODAL SYSTEM Standard overlay modal (hidden by default) ============================================================================= */ .rd-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; align-items: center; justify-content: center; backdrop-filter: blur(2px); } .rd-modal-open { display: flex !important; } .rd-modal .rd-form { background: var(--rd-bg-card); border-radius: var(--rd-radius-lg); width: 100%; max-width: 500px; box-shadow: 0 20px 50px rgba(0,0,0,0.2); display: flex; flex-direction: column; max-height: 90vh; } .rd-modal-header { padding: var(--rd-sp4); border-bottom: var(--rd-border); } .rd-modal-title { margin: 0; font-size: var(--rd-h3); font-weight: var(--rd-w-semibold); color: var(--rd-text); } .rd-modal-body { padding: var(--rd-sp4); overflow-y: auto; flex: 1; } .rd-modal-footer { padding: var(--rd-sp4); border-top: var(--rd-border); display: flex; justify-content: flex-end; gap: var(--rd-sp3); } /* Wider variant for the preview modal so long campaign bodies breathe. */ .rd-modal .rd-preview-modal-form { max-width: 720px; } /* Quick Create grid cards on /admin/email/campaigns — each card is an so the entire surface is clickable; hover animates like the primary CTA so admins know it's a shortcut rather than inert stats. */ .rd-quick-create-card { display: block; text-decoration: none; color: inherit; transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease; border: 1px solid var(--rd-border-color, #e5e7eb); } .rd-quick-create-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08); border-color: var(--rd-primary); text-decoration: none; } .rd-quick-create-card:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: 2px; } .rd-quick-create-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--rd-radius-md, 8px); flex-shrink: 0; color: #fff; } .rd-quick-create-icon--invite { background: #3B82F6; } .rd-quick-create-icon--payment { background: #10B981; } .rd-quick-create-icon--reminder { background: #F59E0B; } .rd-quick-create-icon--news { background: #8B5CF6; } /* Animate the submit-button color change when the form becomes valid. */ #submit-btn { transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; } /* ============================================================================= 17. LIGHTWEIGHT EMAIL EDITOR (WYSIWYG) — /admin/email/campaigns/new ============================================================================= */ .rd-editor-shell { border: 1px solid var(--rd-border-color, #e5e7eb); border-radius: var(--rd-radius-md, 8px); overflow: hidden; background: #fff; } .rd-editor-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; background: #f9fafb; border-bottom: 1px solid var(--rd-border-color, #e5e7eb); } .rd-editor-btn { appearance: none; border: 1px solid transparent; background: transparent; color: #111827; padding: 6px 10px; border-radius: 6px; font-size: 14px; line-height: 1; cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease; } .rd-editor-btn:hover { background: #eef2ff; border-color: #c7d2fe; } .rd-editor-btn:active { background: #e0e7ff; } .rd-editor-btn:focus-visible { outline: 2px solid var(--rd-primary); outline-offset: 2px; } .rd-editor-surface { min-height: 260px; max-height: 520px; overflow-y: auto; padding: 16px 18px; font-size: 15px; line-height: 1.7; color: #111827; } .rd-editor-surface:focus { outline: none; } .rd-editor-surface h1, .rd-editor-surface h2, .rd-editor-surface h3 { margin: 16px 0 8px; color: #111827; } .rd-editor-surface h2 { font-size: 20px; font-weight: 700; } .rd-editor-surface h3 { font-size: 17px; font-weight: 600; } .rd-editor-surface p { margin: 0 0 12px; } .rd-editor-surface ul, .rd-editor-surface ol { margin: 0 0 12px; padding-left: 24px; } .rd-editor-surface a { color: #3B82F6; text-decoration: underline; } .rd-editor-surface:empty::before { content: "Start typing your message… use the toolbar above to format."; color: #9ca3af; pointer-events: none; } /* ============================================================================= 16. UTILITY CLASSES ============================================================================= */ .rd-relative { position: relative !important; } .rd-absolute-full { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; } .rd-opacity-0 { opacity: 0 !important; } .rd-cursor-pointer { cursor: pointer !important; } /* Utility classes */ .ml-1 { margin-left: var(--rd-sp1); } /* Drag and Drop Zone */ .drop-zone { border: 2px dashed #ccc; padding: 20px; text-align: center; cursor: pointer; transition: border-color 0.3s, background-color 0.3s; } .drop-zone.dragover { border-color: #007bff; background: #eef6ff; } /* ---------------------------------------------------------- DATA TABLE — reusable admin master/detail pattern used via the data_table Jinja macro + admin-data-table.js ---------------------------------------------------------- */ .rd-data-table { width: 100%; border-collapse: collapse; } .rd-data-table thead th { position: sticky; top: 0; background: var(--rd-bg-card); z-index: 2; border-bottom: 1px solid var(--rd-border-color); } .rd-data-table tfoot td { position: sticky; bottom: 0; background: var(--rd-bg-card); border-top: 1px solid var(--rd-border-color); font-weight: var(--rd-w-semibold); } .rd-data-table tr[data-expand-url] { cursor: pointer; } .rd-data-table tr[data-expand-url]:hover { background: var(--rd-neutral-50); } .rd-data-table tr.rd-row-expanded { background: var(--rd-neutral-50); } .rd-data-table .rd-detail-row > td { background: var(--rd-bg-section, #fafafa); padding: var(--rd-sp4); border-top: 2px solid var(--rd-primary); } .rd-col-draggable { cursor: grab; user-select: none; } .rd-col-draggable:active { cursor: grabbing; } .rd-col-dragging { opacity: 0.4; } .rd-col-drop-target { outline: 2px dashed var(--rd-primary); outline-offset: -2px; } .rd-data-table-wrap { overflow-x: auto; max-height: 70vh; position: relative; } /* ---------------------------------------------------------- DATA TABLE — empty state (macro-owned, CSS-driven visibility) Visible only when the tbody has zero children, OR when the only row is marked with data-empty-row (server-rendered empty sentinel). As soon as the caller injects a skeleton/loading row or real rows, this is hidden. Keeps the empty state visually distinct from the spinner used by callers (e.g. .spinner.rd-text-primary on payment ledger). ---------------------------------------------------------- */ .rd-table-empty { display: none; flex-direction: column; align-items: center; justify-content: center; gap: var(--rd-sp2); padding: var(--rd-sp6) var(--rd-sp4); text-align: center; color: var(--rd-text-sub); } .rd-data-table-wrap:has(tbody:empty) .rd-table-empty, .rd-data-table-wrap:has(tbody > tr:only-child[data-empty-row]) .rd-table-empty { display: flex; } .rd-data-table-wrap:has(tbody > tr:only-child[data-empty-row]) > table > tbody { display: none; } .rd-table-empty-icon { color: var(--rd-text-sub); opacity: 0.5; } .rd-table-empty-message { margin: 0; font-size: 0.9375rem; color: var(--rd-text-sub); } .rd-table-empty-cta { margin-top: var(--rd-sp2); } /* ---------------------------------------------------------- TYPEAHEAD — search-by-name input resolving to hidden ID ---------------------------------------------------------- */ .rd-typeahead { position: relative; } .rd-typeahead-input-wrap { position: relative; } .rd-typeahead-results { position: absolute; top: 100%; left: 0; right: 0; background: var(--rd-bg-card); border: 1px solid var(--rd-border-color); border-radius: var(--rd-radius); box-shadow: 0 4px 12px rgba(0,0,0,0.08); max-height: 260px; overflow-y: auto; z-index: 20; } .rd-typeahead-results:empty { display: none; } .rd-typeahead-list { list-style: none; margin: 0; padding: 0; } .rd-typeahead-item { display: block; width: 100%; padding: var(--rd-sp2) var(--rd-sp3); text-align: left; background: transparent; border: 0; cursor: pointer; font: inherit; } .rd-typeahead-item:hover, .rd-typeahead-item:focus { background: var(--rd-neutral-50); } .rd-typeahead-item:focus:not(:focus-visible) { outline: none; } .rd-typeahead-item-label { display: block; font-weight: var(--rd-w-medium); } .rd-typeahead-item-sub { display: block; font-size: 0.8125rem; } .rd-typeahead-chip { display: inline-flex; align-items: center; gap: var(--rd-sp2); padding: var(--rd-sp2) var(--rd-sp3); background: var(--rd-neutral-50); border: 1px solid var(--rd-border-color); border-radius: var(--rd-radius); } .rd-typeahead-clear { background: transparent; border: 0; font-size: 1.25rem; line-height: 1; cursor: pointer; color: var(--rd-text-sub); padding: 0 0.25rem; } .rd-typeahead-clear:hover { color: var(--rd-error); } /* ---------------------------------------------------------- FORM BUTTON BUSY/LOADING STATE — form-loading.js ---------------------------------------------------------- form-loading.js sets aria-busy="true" + disabled on any submit button while its form is in flight. Apply to ALL such buttons, not just .rd-btn, so legacy/Tailwind-styled submits also indicate work-in-progress instead of looking dead. */ button[type="submit"][aria-busy="true"], input[type="submit"][aria-busy="true"], .rd-btn[aria-busy="true"] { cursor: progress; opacity: 0.75; pointer-events: none; } .rd-btn-spinner { display: inline-block; width: 0.9em; height: 0.9em; margin-right: 0.4em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -0.15em; animation: rd-btn-spin 0.7s linear infinite; } @keyframes rd-btn-spin { to { transform: rotate(360deg); } } .rd-btn-label { vertical-align: middle; } /* ============================================================================= Global Toast System (rd-toast.js) Bottom-right stack, pointer-events isolated so it never blocks the page. ============================================================================= */ .rd-toast-root { position: fixed; bottom: var(--rd-sp4, 1rem); right: var(--rd-sp4, 1rem); z-index: 10000; display: flex; flex-direction: column; gap: var(--rd-sp2, 0.5rem); max-width: min(380px, calc(100vw - 2rem)); width: 100%; pointer-events: none; } .rd-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--rd-sp2, 0.5rem); padding: 0.75rem 0.9rem; border-radius: var(--rd-radius, 6px); border-left: 4px solid var(--rd-info); background: #fff; color: #1a1a1a; box-shadow: 0 6px 20px rgba(0,0,0,0.14), 0 1px 3px rgba(0,0,0,0.08); font-size: 0.9375rem; line-height: 1.4; animation: rd-toast-in 0.18s ease-out; } .rd-toast--success { border-left-color: var(--rd-success); background: var(--rd-success-bg); color: #0d3a1f; } .rd-toast--error { border-left-color: var(--rd-error); background: var(--rd-error-bg); color: #5a1212; } .rd-toast--info { border-left-color: var(--rd-info); background: var(--rd-info-bg); color: #0c2e52; } .rd-toast__msg { flex: 1 1 auto; word-wrap: break-word; overflow-wrap: anywhere; } .rd-toast__close { flex: 0 0 auto; background: transparent; border: 0; font-size: 1.25rem; line-height: 1; padding: 0 0.25rem; cursor: pointer; color: inherit; opacity: 0.6; } .rd-toast__close:hover { opacity: 1; } .rd-toast--leaving { animation: rd-toast-out 0.18s ease-in forwards; } @keyframes rd-toast-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes rd-toast-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(20px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .rd-toast, .rd-toast--leaving { animation: none; } } /* ---------------------------------------------------------- REQUIRED-FIELD MARKER — canonical .rd-required + legend ---------------------------------------------------------- Use: The input itself carries `required` / `aria-required="true"`, so screen readers don't need this asterisk announced. At the top of any form with >=1 required field, include:

Required field

*/ .rd-required { color: var(--rd-error); margin-left: 2px; font-weight: 600; } .rd-form-legend { font-size: 0.875rem; color: var(--rd-text-sub, #5c6470); margin-bottom: 0.75rem; } .rd-form-legend .rd-required { margin-left: 0; margin-right: 4px; } /* Back-compat: legacy .required spans inherit the same color so un-migrated templates still look consistent until they're swept. */ .required { color: var(--rd-error); margin-left: 2px; } /* ----------------------------------------------------------------------------- Inline field-level validation errors (Phase B2) Use `