/* ==========================================================================
patterns.css — RunMyCampus aesthetic-v2 pattern primitives
==========================================================================
Extracted verbatim from `aesthetic_preview.html`. Every authenticated
dashboard in the platform should consume these classes so the live UI
matches the mockup pixel-for-pixel.
Scope
-----
All rules are gated under `[data-rmc-aesthetic="v2"]` (set on by
base.html / portal_base.html / admin/base_site.html). Removing that
attribute from any surface cleanly disables every pattern below, leaving
the legacy styling intact. This is the rollout-safety hatch.
Load order
----------
Must load AFTER `design-tokens.css` + `design-tokens-luxury.css` (so the
--school-primary / --school-accent / --apple-elev-* / --tracking-* /
--ease-apple / --color-base-* / --ds-* tokens resolve), and BEFORE any
page-specific or tenant-override CSS (so tenant brand cascade still wins).
Source of truth
---------------
When updating, mirror changes into `aesthetic_preview.html` so the mockup
stays in sync with what the live platform renders.
========================================================================== */
/* ==========================================================================
1. BODY BACKGROUND — subtle indigo radial wash behind every page
========================================================================== */
[data-rmc-aesthetic="v2"] body {
background:
radial-gradient(ellipse 80% 50% at 50% -10%,
color-mix(in oklab, var(--school-primary) 8%, transparent),
transparent 60%),
var(--bs-body-bg, var(--color-base-50));
background-attachment: fixed;
min-height: 100vh;
}
[data-rmc-aesthetic="v2"][data-bs-theme="dark"] body,
[data-rmc-aesthetic="v2"] body[data-bs-theme="dark"] {
background:
radial-gradient(ellipse 80% 50% at 50% -10%,
color-mix(in oklab, var(--school-primary) 14%, transparent),
transparent 60%),
var(--bs-body-bg, var(--color-base-950));
background-attachment: fixed;
}
/* ==========================================================================
2. TYPOGRAPHY POLISH — letter-spacing + tabular numerics
========================================================================== */
[data-rmc-aesthetic="v2"] {
font-feature-settings: "cv11", "ss03", "cv02";
letter-spacing: var(--tracking-body, -0.005em);
}
[data-rmc-aesthetic="v2"] h1,
[data-rmc-aesthetic="v2"] .h1 {
letter-spacing: var(--tracking-display, -0.025em);
font-weight: 700;
}
[data-rmc-aesthetic="v2"] h2,
[data-rmc-aesthetic="v2"] .h2 {
letter-spacing: var(--tracking-heading, -0.015em);
font-weight: 700;
}
[data-rmc-aesthetic="v2"] h3,
[data-rmc-aesthetic="v2"] .h3,
[data-rmc-aesthetic="v2"] h4,
[data-rmc-aesthetic="v2"] .h4 {
letter-spacing: var(--tracking-heading, -0.015em);
font-weight: 600;
}
[data-rmc-aesthetic="v2"] [data-numeric],
[data-rmc-aesthetic="v2"] .tabular,
[data-rmc-aesthetic="v2"] .kpi .value,
[data-rmc-aesthetic="v2"] .gradebook-table td,
[data-rmc-aesthetic="v2"] .gradebook-table th,
[data-rmc-aesthetic="v2"] .report-grades td,
[data-rmc-aesthetic="v2"] .report-grades th {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum", "cv11";
}
/* ==========================================================================
3. SECTION HEADERS — .eyebrow / .page-h1 / .page-sub
========================================================================== */
[data-rmc-aesthetic="v2"] .page-h1 {
font-size: clamp(1.5rem, 2.5vw, 2rem);
font-weight: 700;
margin: 0;
letter-spacing: var(--tracking-display, -0.025em);
}
[data-rmc-aesthetic="v2"] .page-sub {
color: var(--color-base-500, var(--color-base-500)); /* theme-locked-allow: manual-review */
margin-top: 2px;
font-size: var(--type-size-body);
}
[data-rmc-aesthetic="v2"][data-bs-theme="dark"] .page-sub {
color: var(--color-base-400, var(--color-base-400)); /* theme-locked-allow: manual-review */
}
[data-rmc-aesthetic="v2"] .eyebrow {
text-transform: uppercase;
letter-spacing: var(--tracking-eyebrow, 0.06em);
font-size: var(--type-size-micro);
font-weight: 600;
color: var(--color-base-500, var(--color-base-500)); /* theme-locked-allow: manual-review */
}
[data-rmc-aesthetic="v2"][data-bs-theme="dark"] .eyebrow {
color: var(--color-base-400, var(--color-base-400)); /* theme-locked-allow: manual-review */
}
/* ==========================================================================
4. SHELL — sidebar + main grid (240px + 1fr)
========================================================================== */
[data-rmc-aesthetic="v2"] .shell {
display: grid;
grid-template-columns: 240px 1fr;
min-height: 100vh;
}
[data-rmc-aesthetic="v2"] .shell.dark-shell {
background: var(--color-base-950); /* theme-locked-allow: manual-review */
color: var(--color-base-200); /* theme-locked-allow: manual-review */
}
@media (max-width: 900px) {
[data-rmc-aesthetic="v2"] .shell { grid-template-columns: 1fr; }
[data-rmc-aesthetic="v2"] .shell aside.sb { display: none; }
}
/* main content area */
[data-rmc-aesthetic="v2"] main.main {
padding: 24px;
max-width: 1400px;
}
/* ==========================================================================
5. SIDEBAR — aside.sb with brand row, nav links, user row
========================================================================== */
[data-rmc-aesthetic="v2"] aside.sb {
background: var(--color-base-900, var(--color-base-900)); /* theme-locked-allow: manual-review */
color: var(--color-base-100); /* theme-locked-allow: manual-review */
padding: 18px 10px;
position: relative;
overflow: hidden;
border-right: 1px solid rgba(255, 255, 255, 0.04);
}
[data-rmc-aesthetic="v2"] aside.sb::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 30% at 50% 0%,
color-mix(in oklab, var(--school-primary) 22%, transparent),
transparent 70%);
pointer-events: none;
}
[data-rmc-aesthetic="v2"] aside.sb .brand-row {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 12px 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
margin-bottom: 14px;
position: relative;
}
[data-rmc-aesthetic="v2"] aside.sb .brand-row .name {
font-weight: 600;
font-size: var(--type-size-body);
letter-spacing: -0.01em;
line-height: 1.2;
}
[data-rmc-aesthetic="v2"] aside.sb .brand-row .name small {
display: block;
font-weight: 400;
color: var(--color-base-400, var(--color-base-400)); /* theme-locked-allow: manual-review */
font-size: var(--type-size-micro);
margin-top: 2px;
letter-spacing: 0;
}
[data-rmc-aesthetic="v2"] aside.sb .nav-section {
text-transform: uppercase;
letter-spacing: var(--tracking-eyebrow, 0.06em);
font-size: var(--type-size-micro);
font-weight: 600;
color: var(--color-base-400, var(--color-base-400)); /* theme-locked-allow: manual-review */
padding: 14px 14px 6px;
}
[data-rmc-aesthetic="v2"] aside.sb a.nav-link {
position: relative;
display: flex;
align-items: center;
gap: 11px;
padding: 9px 14px;
color: var(--color-base-300); /* theme-locked-allow: manual-review */
text-decoration: none;
font-size: var(--type-size-body);
font-weight: 500;
border-radius: 10px;
margin-bottom: 1px;
transition:
background var(--dur-fast, 150ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1)),
color var(--dur-fast, 150ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1)),
transform var(--dur-fast, 150ms) var(--ease-apple-snap, cubic-bezier(0.65, 0, 0.35, 1));
}
[data-rmc-aesthetic="v2"] aside.sb a.nav-link::before {
content: '';
position: absolute;
left: -10px;
top: 50%;
height: 0;
width: 3px;
background: var(--school-primary);
border-radius: 0 3px 3px 0;
transform: translateY(-50%);
transition: height var(--dur-base, 240ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1));
}
[data-rmc-aesthetic="v2"] aside.sb a.nav-link:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--color-base-0); /* theme-locked-allow: manual-review */
}
[data-rmc-aesthetic="v2"] aside.sb a.nav-link:active {
transform: scale(0.98);
}
[data-rmc-aesthetic="v2"] aside.sb a.nav-link.active {
background: color-mix(in oklab, var(--school-primary) 24%, transparent);
color: var(--color-base-0); /* theme-locked-allow: manual-review */
}
[data-rmc-aesthetic="v2"] aside.sb a.nav-link.active::before {
height: 60%;
background: rgba(255, 255, 255, 0.85);
}
[data-rmc-aesthetic="v2"] aside.sb a.nav-link .badge-soft {
margin-left: auto;
background: rgba(255, 255, 255, 0.14);
padding: 2px 8px;
border-radius: 999px;
font-size: var(--type-size-micro);
font-weight: 600;
}
[data-rmc-aesthetic="v2"] aside.sb .user-row {
position: absolute;
bottom: 14px;
left: 10px;
right: 10px;
display: flex;
gap: 10px;
align-items: center;
padding: 10px 12px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.05);
}
[data-rmc-aesthetic="v2"] aside.sb .user-row .av,
[data-rmc-aesthetic="v2"] aside.sb .av {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--school-primary), var(--school-accent));
display: flex;
align-items: center;
justify-content: center;
color: var(--color-base-0); /* theme-locked-allow: manual-review */
font-weight: 700;
font-size: var(--type-size-eyebrow);
}
/* ==========================================================================
6. TOPBAR — sticky breadcrumb + actions bar
========================================================================== */
[data-rmc-aesthetic="v2"] .topbar {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 24px;
border-bottom: 1px solid var(--bs-border-color, rgba(26, 22, 18, 0.08));
background: var(--apple-material-bg, rgba(255, 255, 255, 0.78));
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
position: sticky;
top: 0;
z-index: 50;
}
[data-rmc-aesthetic="v2"] .topbar .breadcrumb {
margin: 0;
padding: 0;
font-size: var(--type-size-caption);
}
[data-rmc-aesthetic="v2"] .topbar .topbar-actions {
margin-left: auto;
display: flex;
gap: 8px;
align-items: center;
}
/* Search pill (cmd-k trigger) */
[data-rmc-aesthetic="v2"] .search-pill {
background: var(--color-base-100, var(--color-base-100)); /* theme-locked-allow: manual-review */
border: 1px solid var(--bs-border-color, rgba(26, 22, 18, 0.08));
border-radius: 10px;
padding: 6px 12px;
display: flex;
align-items: center;
gap: 8px;
font-size: var(--type-size-caption);
color: var(--color-base-500, var(--color-base-500)); /* theme-locked-allow: manual-review */
min-width: 240px;
cursor: pointer;
transition:
border-color var(--dur-fast, 150ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1)),
background var(--dur-fast, 150ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1));
}
[data-rmc-aesthetic="v2"] .search-pill:hover {
border-color: var(--school-primary);
background: var(--color-base-0, var(--color-base-0)); /* theme-locked-allow: manual-review */
}
[data-rmc-aesthetic="v2"] .search-pill kbd { margin-left: auto; }
[data-rmc-aesthetic="v2"][data-bs-theme="dark"] .search-pill {
background: rgba(255, 255, 255, 0.04);
}
/* ==========================================================================
7. CARD-X — the primary card primitive (padded, elevated, rounded 14px)
========================================================================== */
[data-rmc-aesthetic="v2"] .card-x {
background: var(--color-base-0, var(--color-base-0)); /* theme-locked-allow: manual-review */
border-radius: 14px;
box-shadow: var(--apple-elev-1, 0 0 0 1px rgba(26, 22, 18, 0.05), 0 1px 2px rgba(26, 22, 18, 0.04));
padding: 18px;
}
[data-rmc-aesthetic="v2"][data-bs-theme="dark"] .card-x {
background: var(--color-base-800); /* theme-locked-allow: manual-review */
}
[data-rmc-aesthetic="v2"] .card-x.interactive {
transition:
box-shadow var(--dur-base, 240ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1)),
transform var(--dur-base, 240ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1));
cursor: pointer;
}
[data-rmc-aesthetic="v2"] .card-x.interactive:hover {
box-shadow: var(--apple-elev-3);
transform: translateY(-1px);
}
/* ==========================================================================
8. KPI — metric card with label/value/delta/kpi-icon
==========================================================================
Note: legacy `.kpi { font-weight: 700; letter-spacing: -0.3px }` from
`portal-base-shell.css` cascades through but is inert because the kpi
card itself contains no direct text — only .label and .value children
which set their own weights. Safe.
========================================================================== */
[data-rmc-aesthetic="v2"] .kpi {
background: var(--color-base-0, var(--color-base-0)); /* theme-locked-allow: manual-review */
border-radius: 14px;
padding: 20px;
box-shadow: var(--apple-elev-1);
transition:
box-shadow var(--dur-base, 240ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1)),
transform var(--dur-base, 240ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1));
}
[data-rmc-aesthetic="v2"] .kpi:hover {
box-shadow: var(--apple-elev-3);
transform: translateY(-2px);
}
[data-rmc-aesthetic="v2"][data-bs-theme="dark"] .kpi {
background: var(--color-base-800); /* theme-locked-allow: manual-review */
}
[data-rmc-aesthetic="v2"] .kpi .label {
font-size: var(--type-size-micro);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--tracking-eyebrow, 0.06em);
color: var(--color-base-500, var(--color-base-500)); /* theme-locked-allow: manual-review */
}
[data-rmc-aesthetic="v2"][data-bs-theme="dark"] .kpi .label {
color: var(--color-base-400, var(--color-base-400)); /* theme-locked-allow: manual-review */
}
[data-rmc-aesthetic="v2"] .kpi .value {
font-size: var(--type-size-headline-l);
font-weight: 700;
letter-spacing: var(--tracking-display, -0.025em);
margin-top: 6px;
font-variant-numeric: tabular-nums;
}
[data-rmc-aesthetic="v2"] .kpi .delta {
font-size: var(--type-size-caption);
margin-top: 6px;
font-weight: 500;
}
[data-rmc-aesthetic="v2"] .kpi .delta.up { color: var(--ds-success, var(--color-emerald-600)); }
[data-rmc-aesthetic="v2"] .kpi .delta.down { color: var(--ds-danger, var(--color-red-600)); }
[data-rmc-aesthetic="v2"] .kpi-icon {
width: 36px;
height: 36px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in oklab, var(--school-primary) 14%, transparent);
color: var(--school-primary);
}
[data-rmc-aesthetic="v2"] .kpi-icon.success {
background: rgba(16, 185, 129, 0.12);
color: var(--school-accent);
}
[data-rmc-aesthetic="v2"] .kpi-icon.warn {
background: rgba(217, 119, 6, 0.12);
color: var(--ds-warning, var(--color-amber-600));
}
[data-rmc-aesthetic="v2"] .kpi-icon.danger {
background: rgba(220, 38, 38, 0.12);
color: var(--ds-danger, var(--color-red-600));
}
/* ==========================================================================
9. BUTTON POLISH — Bootstrap .btn variants
========================================================================== */
/* Pass 10: WCAG 2.5.8 minimum target size (24×24 CSS px) on all viewports.
.btn-sm participants opt into the floor without losing their visual size by
pairing min-height/min-width with their compact padding. */
[data-rmc-aesthetic="v2"] .btn {
min-height: 24px;
min-width: 24px;
border-radius: 10px;
font-weight: 500;
letter-spacing: -0.005em;
transition:
background-color var(--dur-fast, 150ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1)),
border-color var(--dur-fast, 150ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1)),
color var(--dur-fast, 150ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1)),
box-shadow var(--dur-base, 240ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1)),
transform var(--dur-fast, 150ms) var(--ease-apple-snap, cubic-bezier(0.65, 0, 0.35, 1)),
filter var(--dur-fast, 150ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1));
}
[data-rmc-aesthetic="v2"] .btn:hover { filter: brightness(1.04) saturate(1.03); }
[data-rmc-aesthetic="v2"] .btn:active { transform: scale(0.98); transition-duration: 80ms; }
[data-rmc-aesthetic="v2"] .btn-primary,
[data-rmc-aesthetic="v2"] .btn-success,
[data-rmc-aesthetic="v2"] .btn-danger,
[data-rmc-aesthetic="v2"] .btn-warning {
border: none;
box-shadow: 0 1px 2px rgba(26, 22, 18, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
[data-rmc-aesthetic="v2"] .btn-primary:hover {
box-shadow:
0 6px 16px -2px color-mix(in oklab, var(--bs-primary) 35%, transparent),
0 2px 4px rgba(26, 22, 18, 0.06);
}
[data-rmc-aesthetic="v2"] .btn:focus-visible,
[data-rmc-aesthetic="v2"] a:focus-visible {
outline: none;
box-shadow: var(--apple-focus-ring) !important;
}
/* ==========================================================================
10. FORM POLISH — inputs, selects with school-primary focus ring
========================================================================== */
[data-rmc-aesthetic="v2"] .form-control,
[data-rmc-aesthetic="v2"] .form-select {
border-radius: 10px;
border-color: var(--bs-border-color, rgba(26, 22, 18, 0.08));
transition:
border-color var(--dur-fast, 150ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1)),
box-shadow var(--dur-fast, 150ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1));
}
[data-rmc-aesthetic="v2"] .form-control:focus,
[data-rmc-aesthetic="v2"] .form-select:focus {
border-color: color-mix(in oklab, var(--school-primary) 60%, var(--bs-border-color, rgba(26, 22, 18, 0.08)));
box-shadow: 0 0 0 4px color-mix(in oklab, var(--school-primary) 18%, transparent);
}
/* ==========================================================================
11. BADGE / BREADCRUMB / MODAL / DROPDOWN / KBD polish
========================================================================== */
[data-rmc-aesthetic="v2"] .badge {
font-weight: 500;
padding: 4px 10px;
border-radius: 999px;
}
[data-rmc-aesthetic="v2"] .breadcrumb {
--bs-breadcrumb-divider: '';
padding: 0;
margin: 0;
font-size: var(--type-size-caption);
}
[data-rmc-aesthetic="v2"] .breadcrumb-item {
display: inline-flex;
align-items: center;
color: var(--color-base-500, var(--color-base-500)); /* theme-locked-allow: manual-review */
}
[data-rmc-aesthetic="v2"] .breadcrumb-item + .breadcrumb-item { padding-left: 0; }
[data-rmc-aesthetic="v2"] .breadcrumb-item + .breadcrumb-item::before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
margin: 0 6px;
background-color: var(--color-base-500, var(--color-base-500)); /* theme-locked-allow: manual-review */
opacity: .5;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
[data-rmc-aesthetic="v2"] .breadcrumb-item a {
color: var(--color-base-500, var(--color-base-500)); /* theme-locked-allow: manual-review */
text-decoration: none;
transition: color var(--dur-fast, 150ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1));
}
[data-rmc-aesthetic="v2"] .breadcrumb-item a:hover { color: var(--school-primary); }
[data-rmc-aesthetic="v2"] .breadcrumb-item.active {
color: var(--color-base-900, var(--color-base-900)); /* theme-locked-allow: manual-review */
font-weight: 600;
}
[data-rmc-aesthetic="v2"][data-bs-theme="dark"] .breadcrumb-item { color: var(--color-base-400, var(--color-base-400)); } /* theme-locked-allow: manual-review */
[data-rmc-aesthetic="v2"][data-bs-theme="dark"] .breadcrumb-item.active { color: var(--color-base-100); } /* theme-locked-allow: manual-review */
[data-rmc-aesthetic="v2"][data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
background-color: var(--color-base-400, var(--color-base-400)); /* theme-locked-allow: manual-review */
}
[data-rmc-aesthetic="v2"] .modal-content {
border: none;
border-radius: 18px;
box-shadow: var(--apple-elev-modal);
}
[data-rmc-aesthetic="v2"] .modal-backdrop.show {
background: color-mix(in oklab, var(--color-base-900, var(--color-base-900)) 36%, transparent); /* theme-locked-allow: decorative-tint-mix */
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
opacity: 1;
}
[data-rmc-aesthetic="v2"] .dropdown-menu {
border: none;
box-shadow: var(--apple-elev-3);
border-radius: 12px;
padding: 6px;
}
[data-rmc-aesthetic="v2"] .dropdown-item {
border-radius: 8px;
padding: 8px 12px;
font-weight: 500;
}
[data-rmc-aesthetic="v2"] kbd {
background: var(--color-base-100, var(--color-base-100)); /* theme-locked-allow: manual-review */
color: var(--color-base-900, var(--color-base-900)); /* theme-locked-allow: manual-review */
border: 1px solid var(--bs-border-color, rgba(26, 22, 18, 0.08));
border-bottom-width: 2px;
border-radius: 5px;
padding: 2px 6px;
font-family: ui-monospace, "SF Mono", "Cascadia Code", monospace;
font-size: var(--type-size-eyebrow);
font-weight: 600;
line-height: 1;
}
[data-rmc-aesthetic="v2"][data-bs-theme="dark"] kbd {
background: rgba(255, 255, 255, 0.06);
color: var(--color-base-100); /* theme-locked-allow: manual-review */
}
/* ==========================================================================
12. INSIGHT CARD — actionable AI/system callout (warning/danger/info)
==========================================================================
Coexists with the data-attribute variant from `design-system-unified.css`
(which uses `[data-rmc-insight-tone="warning"]`). The class-name variants
below are what the mockup uses and are additive — both styles work.
========================================================================== */
[data-rmc-aesthetic="v2"] .insight-card {
background: var(--color-base-0, var(--color-base-0)); /* theme-locked-allow: manual-review */
border-radius: 14px;
padding: 18px 20px;
box-shadow: var(--apple-elev-1);
display: flex;
gap: 14px;
align-items: flex-start;
border-left: 3px solid transparent;
}
[data-rmc-aesthetic="v2"][data-bs-theme="dark"] .insight-card {
background: var(--color-base-800); /* theme-locked-allow: manual-review */
}
[data-rmc-aesthetic="v2"] .insight-card.warning { border-left-color: var(--ds-warning, var(--color-amber-600)); }
[data-rmc-aesthetic="v2"] .insight-card.danger { border-left-color: var(--ds-danger, var(--color-red-600)); }
[data-rmc-aesthetic="v2"] .insight-card.info { border-left-color: var(--school-primary); }
[data-rmc-aesthetic="v2"] .insight-card.success { border-left-color: var(--ds-success, var(--color-emerald-600)); }
[data-rmc-aesthetic="v2"] .insight-card .ico {
width: 40px;
height: 40px;
border-radius: 12px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--type-size-body-l);
background: color-mix(in oklab, var(--school-primary) 14%, transparent);
color: var(--school-primary);
}
[data-rmc-aesthetic="v2"] .insight-card.warning .ico {
background: rgba(217, 119, 6, 0.12);
color: var(--ds-warning, var(--color-amber-600));
}
[data-rmc-aesthetic="v2"] .insight-card.danger .ico {
background: rgba(220, 38, 38, 0.12);
color: var(--ds-danger, var(--color-red-600));
}
[data-rmc-aesthetic="v2"] .insight-card.success .ico {
background: rgba(22, 163, 74, 0.12);
color: var(--ds-success, var(--color-emerald-600));
}
[data-rmc-aesthetic="v2"] .insight-card h4 {
font-size: var(--type-size-body);
margin: 0 0 4px;
font-weight: 600;
}
[data-rmc-aesthetic="v2"] .insight-card p {
color: var(--color-base-500, var(--color-base-500)); /* theme-locked-allow: manual-review */
margin: 0 0 8px;
font-size: var(--type-size-body);
line-height: 1.5;
}
[data-rmc-aesthetic="v2"][data-bs-theme="dark"] .insight-card p {
color: var(--color-base-400, var(--color-base-400)); /* theme-locked-allow: manual-review */
}
/* ==========================================================================
13. GRADEBOOK — Apple-Numbers/Linear-tier editable table
========================================================================== */
[data-rmc-aesthetic="v2"] .gradebook-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--color-base-0, var(--color-base-0)); /* theme-locked-allow: manual-review */
border-radius: 12px;
overflow: hidden;
box-shadow: var(--apple-elev-1);
}
[data-rmc-aesthetic="v2"][data-bs-theme="dark"] .gradebook-table {
background: var(--color-base-800); /* theme-locked-allow: manual-review */
}
[data-rmc-aesthetic="v2"] .gradebook-table thead th {
background: var(--color-base-50, var(--color-base-50)); /* theme-locked-allow: manual-review */
font-size: var(--type-size-micro);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--tracking-eyebrow, 0.06em);
color: var(--color-base-500, var(--color-base-500)); /* theme-locked-allow: manual-review */
padding: 10px 12px;
text-align: left;
border-bottom: 1px solid var(--bs-border-color, rgba(26, 22, 18, 0.08));
position: sticky;
top: 0;
}
[data-rmc-aesthetic="v2"][data-bs-theme="dark"] .gradebook-table thead th {
background: rgba(255, 255, 255, 0.04);
color: var(--color-base-400, var(--color-base-400)); /* theme-locked-allow: manual-review */
}
[data-rmc-aesthetic="v2"] .gradebook-table thead th.num { text-align: right; }
[data-rmc-aesthetic="v2"] .gradebook-table tbody td {
padding: 10px 12px;
border-bottom: 1px solid var(--bs-border-color, rgba(26, 22, 18, 0.08));
font-size: var(--type-size-body);
transition: background var(--dur-fast, 150ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1));
}
[data-rmc-aesthetic="v2"] .gradebook-table tbody tr:last-child td { border-bottom: none; }
[data-rmc-aesthetic="v2"] .gradebook-table tbody tr:hover td {
background: color-mix(in oklab, var(--school-primary) 4%, transparent);
}
[data-rmc-aesthetic="v2"] .gradebook-table tbody td.num {
text-align: right;
font-variant-numeric: tabular-nums;
}
[data-rmc-aesthetic="v2"] .gradebook-table .student-cell {
display: flex;
align-items: center;
gap: 10px;
}
[data-rmc-aesthetic="v2"] .gradebook-table .student-cell .av {
width: 30px;
height: 30px;
border-radius: 50%;
background: linear-gradient(135deg, var(--school-primary),
color-mix(in oklab, var(--school-primary) 70%, var(--school-accent)));
display: flex;
align-items: center;
justify-content: center;
color: var(--color-base-0); /* theme-locked-allow: manual-review */
font-weight: 600;
font-size: var(--type-size-micro);
flex-shrink: 0;
}
[data-rmc-aesthetic="v2"] .gradebook-table .mark-cell {
width: 56px;
padding: 4px 8px;
border: 1px solid transparent;
border-radius: 6px;
text-align: right;
font-variant-numeric: tabular-nums;
background: transparent;
color: var(--bs-body-color);
transition:
border-color var(--dur-fast, 150ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1)),
background var(--dur-fast, 150ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1));
font-family: inherit;
font-size: var(--type-size-body);
font-weight: 500;
}
[data-rmc-aesthetic="v2"] .gradebook-table .mark-cell:hover,
[data-rmc-aesthetic="v2"] .gradebook-table .mark-cell:focus {
outline: none;
background: var(--color-base-50, var(--color-base-50)); /* theme-locked-allow: manual-review */
border-color: var(--bs-border-color, rgba(26, 22, 18, 0.08));
}
[data-rmc-aesthetic="v2"] .gradebook-table .mark-cell:focus {
border-color: var(--school-primary);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--school-primary) 20%, transparent);
}
[data-rmc-aesthetic="v2"] .grade-pill {
display: inline-block;
padding: 2px 8px;
border-radius: 6px;
font-size: var(--type-size-micro);
font-weight: 600;
}
[data-rmc-aesthetic="v2"] .grade-pill.high { background: rgba(16, 185, 129, 0.14); color: var(--school-accent); }
[data-rmc-aesthetic="v2"] .grade-pill.mid { background: rgba(217, 119, 6, 0.14); color: var(--ds-warning, var(--color-amber-600)); }
[data-rmc-aesthetic="v2"] .grade-pill.low { background: rgba(220, 38, 38, 0.14); color: var(--ds-danger, var(--color-red-600)); }
[data-rmc-aesthetic="v2"] .gradebook-toolbar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding: 14px 0;
}
[data-rmc-aesthetic="v2"] .save-indicator {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--type-size-caption);
color: var(--ds-success, var(--color-emerald-600));
}
/* ==========================================================================
14. FAMILY HERO — parent dashboard hero block (gradient + glance grid)
========================================================================== */
[data-rmc-aesthetic="v2"] .family-hero {
background: linear-gradient(135deg, var(--school-primary),
color-mix(in oklab, var(--school-primary) 70%, var(--school-accent)));
color: var(--color-base-0); /* theme-locked-allow: manual-review */
border-radius: 18px;
padding: 28px;
box-shadow: var(--apple-elev-3);
position: relative;
overflow: hidden;
}
[data-rmc-aesthetic="v2"] .family-hero::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 50% 80% at 90% 50%,
rgba(255, 255, 255, 0.18), transparent 70%);
pointer-events: none;
}
[data-rmc-aesthetic="v2"] .family-hero > * { position: relative; }
[data-rmc-aesthetic="v2"] .family-hero .av-large {
width: 80px;
height: 80px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
border: 3px solid rgba(255, 255, 255, 0.4);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--type-size-headline-m);
font-weight: 700;
}
[data-rmc-aesthetic="v2"] .family-hero h2 {
font-size: clamp(1.5rem, 3vw, 2.2rem);
margin: 0;
letter-spacing: var(--tracking-display, -0.025em);
}
[data-rmc-aesthetic="v2"] .family-hero .meta {
opacity: .85;
margin-top: 2px;
font-weight: 500;
}
[data-rmc-aesthetic="v2"] .family-glance {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin-top: 20px;
}
[data-rmc-aesthetic="v2"] .family-glance .g-cell {
background: rgba(255, 255, 255, 0.14);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-radius: 12px;
padding: 14px;
}
[data-rmc-aesthetic="v2"] .family-glance .g-cell .l {
font-size: var(--type-size-micro);
opacity: .85;
text-transform: uppercase;
letter-spacing: var(--tracking-eyebrow, 0.06em);
font-weight: 600;
}
[data-rmc-aesthetic="v2"] .family-glance .g-cell .v {
font-size: var(--type-size-headline-m);
font-weight: 700;
margin-top: 2px;
font-variant-numeric: tabular-nums;
}
@media (max-width: 700px) {
[data-rmc-aesthetic="v2"] .family-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ==========================================================================
15. REPORT CARD — printable Term report (.report-card-paper et al.)
========================================================================== */
[data-rmc-aesthetic="v2"] .report-card-paper {
background: var(--color-base-0); /* theme-locked-allow: manual-review */
color: var(--color-base-900); /* theme-locked-allow: manual-review */
max-width: 820px;
margin: 0 auto;
border-radius: 12px;
box-shadow: var(--apple-elev-3);
padding: 56px 56px 44px;
position: relative;
font-family: 'Inter', system-ui, sans-serif;
}
[data-rmc-aesthetic="v2"] .report-card-paper::before {
content: '';
position: absolute;
inset: 0;
border-top: 6px solid;
border-image: linear-gradient(90deg, var(--school-primary), var(--school-accent)) 1;
border-radius: 12px 12px 0 0;
pointer-events: none;
}
[data-rmc-aesthetic="v2"] .report-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
padding-bottom: 18px;
border-bottom: 1px solid var(--color-base-200); /* theme-locked-allow: manual-review */
}
[data-rmc-aesthetic="v2"] .report-header .school {
display: flex;
gap: 14px;
align-items: center;
}
[data-rmc-aesthetic="v2"] .report-header .school-mark {
width: 56px;
height: 56px;
border-radius: 14px;
background: linear-gradient(135deg, var(--school-primary), var(--school-accent));
display: flex;
align-items: center;
justify-content: center;
color: var(--color-base-0); /* theme-locked-allow: manual-review */
font-weight: 700;
font-size: var(--type-size-headline-m);
}
[data-rmc-aesthetic="v2"] .report-header .school h1 {
font-size: var(--type-size-headline-m);
margin: 0;
letter-spacing: var(--tracking-heading, -0.015em);
}
[data-rmc-aesthetic="v2"] .report-header .school .addr {
font-size: var(--type-size-caption);
color: var(--color-base-500); /* theme-locked-allow: manual-review */
}
[data-rmc-aesthetic="v2"] .report-header .term {
text-align: right;
font-size: var(--type-size-caption);
color: var(--color-base-600); /* theme-locked-allow: manual-review */
}
[data-rmc-aesthetic="v2"] .report-header .term strong {
display: block;
font-size: var(--type-size-body);
color: var(--color-base-900); /* theme-locked-allow: manual-review */
}
[data-rmc-aesthetic="v2"] .report-student {
display: grid;
grid-template-columns: 80px 1fr auto;
gap: 20px;
padding: 24px 0;
border-bottom: 1px solid var(--color-base-200); /* theme-locked-allow: manual-review */
align-items: center;
}
[data-rmc-aesthetic="v2"] .report-student .av {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, var(--school-primary),
color-mix(in oklab, var(--school-primary) 70%, var(--school-accent)));
color: var(--color-base-0); /* theme-locked-allow: manual-review */
display: flex;
align-items: center;
justify-content: center;
font-size: var(--type-size-headline-m);
font-weight: 700;
}
[data-rmc-aesthetic="v2"] .report-student h2 {
font-size: var(--type-size-headline-m);
margin: 0;
letter-spacing: var(--tracking-display, -0.025em);
}
[data-rmc-aesthetic="v2"] .report-student .meta {
color: var(--color-base-500); /* theme-locked-allow: manual-review */
margin-top: 2px;
font-weight: 500;
}
[data-rmc-aesthetic="v2"] .report-student .stat { text-align: right; }
[data-rmc-aesthetic="v2"] .report-student .stat .v {
font-size: var(--type-size-headline-l);
font-weight: 700;
letter-spacing: var(--tracking-display, -0.025em);
}
[data-rmc-aesthetic="v2"] .report-student .stat .l {
font-size: var(--type-size-eyebrow);
text-transform: uppercase;
letter-spacing: var(--tracking-eyebrow, 0.06em);
color: var(--color-base-500); /* theme-locked-allow: manual-review */
font-weight: 600;
}
[data-rmc-aesthetic="v2"] .report-grades {
width: 100%;
border-collapse: collapse;
margin-top: 24px;
}
[data-rmc-aesthetic="v2"] .report-grades thead th {
font-size: var(--type-size-micro);
text-transform: uppercase;
letter-spacing: var(--tracking-eyebrow, 0.06em);
color: var(--color-base-500); /* theme-locked-allow: manual-review */
font-weight: 600;
padding: 10px 8px;
border-bottom: 1px solid var(--color-base-200); /* theme-locked-allow: manual-review */
text-align: left;
}
[data-rmc-aesthetic="v2"] .report-grades thead th.num { text-align: right; }
[data-rmc-aesthetic="v2"] .report-grades tbody td {
padding: 12px 8px;
border-bottom: 1px solid var(--color-base-100); /* theme-locked-allow: manual-review */
font-size: var(--type-size-body);
}
[data-rmc-aesthetic="v2"] .report-grades tbody td.num {
text-align: right;
font-variant-numeric: tabular-nums;
font-weight: 500;
}
[data-rmc-aesthetic="v2"] .report-grades tbody tr:last-child td { border-bottom: none; }
[data-rmc-aesthetic="v2"] .report-grades tbody td.subject { font-weight: 600; }
[data-rmc-aesthetic="v2"] .report-grades tbody td.teacher { color: var(--color-base-500); font-size: var(--type-size-caption); } /* theme-locked-allow: manual-review */
[data-rmc-aesthetic="v2"] .report-comments {
margin-top: 24px;
padding: 18px 20px;
background: var(--color-base-50); /* theme-locked-allow: manual-review */
border-radius: 10px;
}
[data-rmc-aesthetic="v2"] .report-comments h3 {
font-size: var(--type-size-caption);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--tracking-eyebrow, 0.06em);
color: var(--color-base-500); /* theme-locked-allow: manual-review */
margin: 0 0 8px;
}
[data-rmc-aesthetic="v2"] .report-comments p {
font-size: var(--type-size-body);
line-height: 1.6;
margin: 0 0 8px;
}
[data-rmc-aesthetic="v2"] .report-comments .signoff {
margin-top: 14px;
font-size: var(--type-size-caption);
color: var(--color-base-500); /* theme-locked-allow: manual-review */
font-style: italic;
}
[data-rmc-aesthetic="v2"] .report-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 28px;
padding-top: 16px;
border-top: 1px solid var(--color-base-200); /* theme-locked-allow: manual-review */
font-size: var(--type-size-caption);
color: var(--color-base-500); /* theme-locked-allow: manual-review */
}
/* ==========================================================================
16. LOGIN — split-screen brand panel + form
========================================================================== */
[data-rmc-aesthetic="v2"] .login-shell {
display: grid;
grid-template-columns: 1.05fr 1fr;
min-height: 100vh;
}
@media (max-width: 900px) {
[data-rmc-aesthetic="v2"] .login-shell { grid-template-columns: 1fr; }
[data-rmc-aesthetic="v2"] .login-shell .login-brand-side { display: none; }
}
[data-rmc-aesthetic="v2"] .login-brand-side {
background:
radial-gradient(ellipse 50% 60% at 30% 30%,
color-mix(in oklab, var(--school-primary) 60%, transparent),
transparent 70%),
radial-gradient(ellipse 60% 80% at 80% 80%,
color-mix(in oklab, var(--school-accent) 50%, transparent),
transparent 70%),
linear-gradient(135deg, color-mix(in oklab, var(--color-indigo-900) 80%, var(--color-base-950)) 0%, var(--color-base-900, var(--color-base-900)) 60%);
color: var(--color-base-0); /* theme-locked-allow: manual-review */
padding: 56px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
}
[data-rmc-aesthetic="v2"] .login-brand-side .brand-mark {
width: 48px;
height: 48px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.16);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: var(--type-size-body-l);
}
[data-rmc-aesthetic="v2"] .login-brand-side h1 {
font-size: clamp(2rem, 4vw, 2.75rem);
letter-spacing: var(--tracking-display, -0.025em);
margin: 0 0 12px;
max-width: 520px;
}
[data-rmc-aesthetic="v2"] .login-brand-side p {
font-size: var(--type-size-body-l);
opacity: 0.85;
line-height: 1.6;
max-width: 480px;
}
[data-rmc-aesthetic="v2"] .login-brand-side .testimonial {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 14px;
padding: 18px 20px;
max-width: 420px;
}
[data-rmc-aesthetic="v2"] .login-brand-side .testimonial .who {
font-size: var(--type-size-caption);
opacity: .75;
margin-top: 8px;
}
[data-rmc-aesthetic="v2"] .login-form-side {
background: var(--color-base-0, var(--color-base-0)); /* theme-locked-allow: manual-review */
padding: 56px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
[data-rmc-aesthetic="v2"][data-bs-theme="dark"] .login-form-side {
background: var(--color-base-900); /* theme-locked-allow: manual-review */
}
[data-rmc-aesthetic="v2"] .login-form {
width: 100%;
max-width: 380px;
}
[data-rmc-aesthetic="v2"] .login-form h2 {
font-size: var(--type-size-headline-m);
letter-spacing: var(--tracking-display, -0.025em);
margin: 0 0 6px;
}
[data-rmc-aesthetic="v2"] .login-form .sub {
color: var(--color-base-500, var(--color-base-500)); /* theme-locked-allow: manual-review */
font-size: var(--type-size-body);
margin-bottom: 24px;
}
[data-rmc-aesthetic="v2"][data-bs-theme="dark"] .login-form .sub {
color: var(--color-base-400, var(--color-base-400)); /* theme-locked-allow: manual-review */
}
/* ==========================================================================
17. ADMIN PAGE WRAP — operator console (dark + indigo)
========================================================================== */
[data-rmc-aesthetic="v2"] .admin-page-wrap {
background: var(--color-base-950); /* theme-locked-allow: manual-review */
color: var(--color-base-200); /* theme-locked-allow: manual-review */
min-height: 100vh;
}
[data-rmc-aesthetic="v2"] .admin-page-wrap .topbar {
background: rgba(11, 17, 32, 0.78);
border-bottom-color: rgba(168, 160, 146, 0.16);
}
[data-rmc-aesthetic="v2"] .admin-page-wrap .breadcrumb-item { color: var(--color-base-400, var(--color-base-400)); } /* theme-locked-allow: manual-review */
[data-rmc-aesthetic="v2"] .admin-page-wrap .breadcrumb-item.active { color: var(--color-base-100); } /* theme-locked-allow: manual-review */
[data-rmc-aesthetic="v2"] .admin-page-wrap .breadcrumb-item + .breadcrumb-item::before {
background-color: var(--color-base-400, var(--color-base-400)); /* theme-locked-allow: manual-review */
}
[data-rmc-aesthetic="v2"] .admin-page-wrap .card-x,
[data-rmc-aesthetic="v2"] .admin-page-wrap .kpi,
[data-rmc-aesthetic="v2"] .admin-page-wrap .gradebook-table,
[data-rmc-aesthetic="v2"] .admin-page-wrap .insight-card {
background: var(--color-base-800); /* theme-locked-allow: manual-review */
}
[data-rmc-aesthetic="v2"] .admin-page-wrap .kpi .label,
[data-rmc-aesthetic="v2"] .admin-page-wrap .eyebrow,
[data-rmc-aesthetic="v2"] .admin-page-wrap .page-sub {
color: var(--color-base-400, var(--color-base-400)); /* theme-locked-allow: manual-review */
}
[data-rmc-aesthetic="v2"] .admin-page-wrap aside.sb { background: var(--color-base-950); } /* theme-locked-allow: manual-review */
[data-rmc-aesthetic="v2"] .admin-page-wrap .search-pill {
background: rgba(255, 255, 255, 0.04);
color: var(--color-base-400, var(--color-base-400)); /* theme-locked-allow: manual-review */
}
/* ==========================================================================
18. ACTIVITY FEED — timeline list with tinted icons
========================================================================== */
[data-rmc-aesthetic="v2"] .activity-feed .item {
display: flex;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--bs-border-color, rgba(26, 22, 18, 0.08));
}
[data-rmc-aesthetic="v2"] .activity-feed .item:last-child { border-bottom: none; }
[data-rmc-aesthetic="v2"] .activity-feed .item .ico {
width: 32px;
height: 32px;
border-radius: 10px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
[data-rmc-aesthetic="v2"] .activity-feed .item .ico.add {
background: color-mix(in oklab, var(--school-primary) 14%, transparent);
color: var(--school-primary);
}
[data-rmc-aesthetic="v2"] .activity-feed .item .ico.success {
background: rgba(16, 185, 129, 0.14);
color: var(--school-accent);
}
[data-rmc-aesthetic="v2"] .activity-feed .item .ico.warn {
background: rgba(217, 119, 6, 0.14);
color: var(--ds-warning, var(--color-amber-600));
}
[data-rmc-aesthetic="v2"] .activity-feed .who { font-weight: 600; }
[data-rmc-aesthetic="v2"] .activity-feed .what {
color: var(--color-base-500, var(--color-base-500)); /* theme-locked-allow: manual-review */
font-size: var(--type-size-caption);
}
[data-rmc-aesthetic="v2"][data-bs-theme="dark"] .activity-feed .what,
[data-rmc-aesthetic="v2"] .admin-page-wrap .activity-feed .what {
color: var(--color-base-400, var(--color-base-400)); /* theme-locked-allow: manual-review */
}
/* ==========================================================================
19. TOAST CONTAINER — top-right material toasts
========================================================================== */
[data-rmc-aesthetic="v2"] .toast-container-x {
position: fixed;
top: 70px;
right: 16px;
z-index: 1080;
display: flex;
flex-direction: column;
gap: 8px;
max-width: min(420px, calc(100vw - 32px));
}
[data-rmc-aesthetic="v2"] .toast-x {
background: var(--apple-material-bg, rgba(255, 255, 255, 0.78));
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
border: 1px solid var(--apple-material-border, rgba(26, 22, 18, 0.08));
border-radius: 12px;
box-shadow: var(--apple-elev-3);
padding: 12px 14px;
font-size: var(--type-size-body);
font-weight: 500;
display: flex;
gap: 10px;
align-items: flex-start;
animation: rmc-toastIn 360ms var(--ease-apple-spring, cubic-bezier(0.175, 0.885, 0.32, 1.275)) both;
color: var(--bs-body-color);
}
[data-rmc-aesthetic="v2"] .toast-x .ico-t {
width: 28px;
height: 28px;
border-radius: 8px;
background: rgba(16, 185, 129, 0.14);
color: var(--school-accent);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
[data-rmc-aesthetic="v2"] .toast-x.is-error .ico-t {
background: rgba(220, 38, 38, 0.14);
color: var(--ds-danger, var(--color-red-600));
}
[data-rmc-aesthetic="v2"] .toast-x .x-btn {
background: transparent;
border: none;
margin-left: auto;
cursor: pointer;
color: var(--color-base-500, var(--color-base-500)); /* theme-locked-allow: manual-review */
font-size: var(--type-size-body);
}
@keyframes rmc-toastIn {
from { transform: translateX(110%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
/* ==========================================================================
20. PROGRESS BAR — top-of-viewport indeterminate stripe
========================================================================== */
[data-rmc-aesthetic="v2"] .progress-x {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent,
var(--school-primary),
color-mix(in oklab, var(--school-primary) 70%, var(--school-accent)),
transparent);
background-size: 50% 100%;
background-repeat: no-repeat;
z-index: 9998;
animation: rmc-progressSlide 1.2s var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1)) infinite;
display: none;
}
[data-rmc-aesthetic="v2"] .progress-x.active { display: block; }
@keyframes rmc-progressSlide {
0% { background-position: -50% 0; }
100% { background-position: 150% 0; }
}
/* ==========================================================================
21. COMMAND PALETTE — ⌘K overlay + modal + results
========================================================================== */
[data-rmc-aesthetic="v2"] .cp-overlay {
position: fixed;
inset: 0;
background: color-mix(in oklab, var(--color-base-900, var(--color-base-900)) 28%, transparent); /* theme-locked-allow: decorative-tint-mix */
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
z-index: 1090;
display: none;
align-items: flex-start;
justify-content: center;
padding-top: 12vh;
}
[data-rmc-aesthetic="v2"] .cp-overlay.active {
display: flex;
animation: rmc-cpOverlayIn 240ms var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1)) both;
}
@keyframes rmc-cpOverlayIn { from { opacity: 0; } to { opacity: 1; } }
[data-rmc-aesthetic="v2"] .cp-modal {
width: min(640px, calc(100vw - 32px));
background: var(--color-base-0, var(--color-base-0)); /* theme-locked-allow: manual-review */
border-radius: 18px;
box-shadow: var(--apple-elev-modal);
overflow: hidden;
animation: rmc-cpModalIn 280ms var(--ease-apple-spring, cubic-bezier(0.175, 0.885, 0.32, 1.275)) both;
}
[data-rmc-aesthetic="v2"][data-bs-theme="dark"] .cp-modal { background: var(--color-base-800); } /* theme-locked-allow: manual-review */
@keyframes rmc-cpModalIn {
from { transform: translateY(-12px) scale(0.97); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
[data-rmc-aesthetic="v2"] .cp-input {
width: 100%;
border: none;
background: transparent;
padding: 18px 22px;
font-size: var(--type-size-body-l);
outline: none;
color: var(--bs-body-color);
border-bottom: 1px solid var(--bs-border-color, rgba(26, 22, 18, 0.08));
}
[data-rmc-aesthetic="v2"] .cp-results {
max-height: 56vh;
overflow-y: auto;
padding: 6px;
}
[data-rmc-aesthetic="v2"] .cp-result {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-radius: 10px;
color: var(--bs-body-color);
text-decoration: none;
cursor: pointer;
font-weight: 500;
transition: background var(--dur-fast, 150ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1));
}
[data-rmc-aesthetic="v2"] .cp-result.is-selected,
[data-rmc-aesthetic="v2"] .cp-result:hover {
background: color-mix(in oklab, var(--school-primary) 8%, transparent);
}
[data-rmc-aesthetic="v2"] .cp-result.is-selected { color: var(--school-primary); }
[data-rmc-aesthetic="v2"] .cp-result .icon {
width: 28px;
height: 28px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in oklab, var(--school-primary) 14%, transparent);
color: var(--school-primary);
}
[data-rmc-aesthetic="v2"] .cp-footer {
border-top: 1px solid var(--bs-border-color, rgba(26, 22, 18, 0.08));
padding: 10px 16px;
font-size: var(--type-size-caption);
color: var(--color-base-500, var(--color-base-500)); /* theme-locked-allow: manual-review */
display: flex;
justify-content: space-between;
}
[data-rmc-aesthetic="v2"][data-bs-theme="dark"] .cp-footer {
color: var(--color-base-400, var(--color-base-400)); /* theme-locked-allow: manual-review */
}
/* ==========================================================================
22. PAGE ENTER — soft fade-up for in-page navigation
========================================================================== */
@keyframes rmc-pageEnter {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
[data-rmc-aesthetic="v2"] .rmc-page-enter {
animation: rmc-pageEnter 320ms var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1)) both;
}
/* ==========================================================================
23. PULSE — used for "live" indicator dots
========================================================================== */
@keyframes rmc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
[data-rmc-aesthetic="v2"] .rmc-pulse {
animation: rmc-pulse 1.5s infinite;
}
/* ==========================================================================
24. COMPAT SHIMS — auto-upgrade existing Bootstrap patterns
==========================================================================
These shims target idioms already used across the 250-template codebase
so that pages get the mockup look WITHOUT requiring per-template markup
changes. Every shim is scoped under [data-rmc-aesthetic="v2"] so removing
the attribute from any surface reverts to legacy Bootstrap.
Design constraint: shims add visual polish (radius, shadow, typography)
but never change LAYOUT (no padding/margin changes that would break flow).
========================================================================== */
/* --- 24.1 Card variants -------------------------------------------------- */
/* The .card.border-0.shadow-sm idiom is used ~280+ times across the codebase
to signal "elevated content card". Give it the .card-x look. We don't
touch padding because Bootstrap's .card-body already controls inner space. */
[data-rmc-aesthetic="v2"] .card.border-0.shadow-sm,
[data-rmc-aesthetic="v2"] .card.shadow-sm,
[data-rmc-aesthetic="v2"] .card.shadow,
[data-rmc-aesthetic="v2"] .card.card-elevated {
border-radius: 14px;
box-shadow: var(--apple-elev-1);
border: none;
transition: box-shadow var(--dur-base, 240ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1));
}
[data-rmc-aesthetic="v2"][data-bs-theme="dark"] .card.border-0.shadow-sm,
[data-rmc-aesthetic="v2"][data-bs-theme="dark"] .card.shadow-sm,
[data-rmc-aesthetic="v2"][data-bs-theme="dark"] .card.shadow {
background: var(--color-base-800); /* theme-locked-allow: manual-review */
}
[data-rmc-aesthetic="v2"] .card.card-elevated:hover {
box-shadow: var(--apple-elev-3);
}
/* Card headers — match the eyebrow/title grammar inside cards. */
[data-rmc-aesthetic="v2"] .card .card-header {
background: transparent;
border-bottom: 1px solid var(--bs-border-color, rgba(26, 22, 18, 0.08));
font-weight: 600;
letter-spacing: -0.01em;
padding: 14px 20px;
}
/* --- 24.2 Alert polish --------------------------------------------------- */
[data-rmc-aesthetic="v2"] .alert.border-0.shadow-sm,
[data-rmc-aesthetic="v2"] .alert.rounded-4,
[data-rmc-aesthetic="v2"] .alert.rounded-3 {
border-radius: 14px;
box-shadow: var(--apple-elev-1);
}
/* --- 24.3 Existing "eyebrow" idiom --------------------------------------- */
/* Templates often use .text-uppercase.small.text-muted as a label/eyebrow.
Promote it to the mockup eyebrow grammar. */
[data-rmc-aesthetic="v2"] .text-uppercase.small.text-muted,
[data-rmc-aesthetic="v2"] .text-uppercase.text-muted.small,
[data-rmc-aesthetic="v2"] .small.text-uppercase.text-muted {
letter-spacing: var(--tracking-eyebrow, 0.06em);
font-weight: 600;
font-size: var(--type-size-micro);
}
/* --- 24.4 Dashboard role-home wrapper ------------------------------------ */
/* Pages with data-page-archetype="role-home" or .dashboard-page-* body class
are the high-traffic dashboards (teacher, parent, student, super, admin).
Tighten their max-width and apply the mockup's main padding rhythm. */
[data-rmc-aesthetic="v2"] body[class*="dashboard-page-"] > .container-lg,
[data-rmc-aesthetic="v2"] body[class*="dashboard-page-"] > .container-xl,
[data-rmc-aesthetic="v2"] [data-page-archetype="role-home"] > .container-lg,
[data-rmc-aesthetic="v2"] [data-page-archetype="role-home"] > .container-fluid {
max-width: 1400px;
}
/* --- 24.5 Login card polish ---------------------------------------------- */
[data-rmc-aesthetic="v2"] .card.login-card,
[data-rmc-aesthetic="v2"] .login-card {
border-radius: 18px;
box-shadow: var(--apple-elev-3);
border: none;
}
[data-rmc-aesthetic="v2"] .auth-hero .hero-logo {
border-radius: 14px;
box-shadow: 0 8px 24px -8px color-mix(in oklab, var(--school-primary) 40%, transparent);
}
/* --- 24.6 Topbar (existing #portalHeader / .navbar.topbar) --------------- */
/* The portal_base.html topbar is a Bootstrap navbar. We bump its blur +
border-bottom to match the mockup's material-bar look, without changing
its layout/links (which are role-aware). */
[data-rmc-aesthetic="v2"] nav#portalHeader.topbar-sticky,
[data-rmc-aesthetic="v2"] nav.navbar.topbar-sticky {
border-bottom: 1px solid var(--bs-border-color, rgba(26, 22, 18, 0.08));
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
}
/* --- 24.7 Table polish (matching the mockup gradebook + report-grades) --- */
/* Bootstrap .table inside a .card.border-0.shadow-sm gets gradebook-table feel. */
[data-rmc-aesthetic="v2"] .card .table {
margin-bottom: 0;
}
[data-rmc-aesthetic="v2"] .card .table > thead > tr > th {
background: var(--color-base-50, var(--color-base-50)); /* theme-locked-allow: manual-review */
font-size: var(--type-size-micro);
font-weight: 600;
text-transform: uppercase;
letter-spacing: var(--tracking-eyebrow, 0.06em);
color: var(--color-base-500, var(--color-base-500)); /* theme-locked-allow: manual-review */
border-bottom: 1px solid var(--bs-border-color, rgba(26, 22, 18, 0.08));
}
[data-rmc-aesthetic="v2"][data-bs-theme="dark"] .card .table > thead > tr > th {
background: rgba(255, 255, 255, 0.04);
color: var(--color-base-400, var(--color-base-400)); /* theme-locked-allow: manual-review */
}
[data-rmc-aesthetic="v2"] .card .table > tbody > tr > td {
font-size: var(--type-size-body);
}
[data-rmc-aesthetic="v2"] .card .table.table-hover > tbody > tr:hover > td {
background: color-mix(in oklab, var(--school-primary) 4%, transparent);
}
/* --- 24.8 Badge softening ------------------------------------------------- */
/* Bootstrap .badge.bg-* keep their colors but get the pill radius (already
in section 11), this just softens .text-bg-* utility variants too. */
[data-rmc-aesthetic="v2"] .badge.text-bg-success,
[data-rmc-aesthetic="v2"] .badge.text-bg-warning,
[data-rmc-aesthetic="v2"] .badge.text-bg-danger,
[data-rmc-aesthetic="v2"] .badge.text-bg-primary,
[data-rmc-aesthetic="v2"] .badge.text-bg-secondary,
[data-rmc-aesthetic="v2"] .badge.text-bg-info {
font-weight: 500;
padding: 4px 10px;
border-radius: 999px;
}
/* --- 24.9 Tdm-bg / parent-dashboard root wrappers ------------------------ */
/* Teacher and parent dashboards use custom wrapper classes. Give the inner
surface the soft canvas feel of the mockup. */
[data-rmc-aesthetic="v2"] .tdm-bg,
[data-rmc-aesthetic="v2"] .parent-dashboard.parent-dashboard-shell {
background: transparent;
}
/* --- 24.10 Bootstrap nav-tabs (used on messages, settings, etc.) --------- */
[data-rmc-aesthetic="v2"] .nav-tabs {
border-bottom: 1px solid var(--bs-border-color, rgba(26, 22, 18, 0.08));
gap: 2px;
}
[data-rmc-aesthetic="v2"] .nav-tabs .nav-link {
border: none;
border-radius: 8px 8px 0 0;
padding: 8px 14px;
color: var(--color-base-600, var(--color-base-600)); /* theme-locked-allow: manual-review */
font-weight: 500;
font-size: var(--type-size-body);
transition: background var(--dur-fast, 150ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1)), color var(--dur-fast, 150ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1));
}
[data-rmc-aesthetic="v2"] .nav-tabs .nav-link:hover {
background: color-mix(in oklab, var(--school-primary) 6%, transparent);
color: var(--school-primary);
border: none;
}
[data-rmc-aesthetic="v2"] .nav-tabs .nav-link.active {
background: transparent;
color: var(--school-primary);
font-weight: 600;
border: none;
border-bottom: 2px solid var(--school-primary);
}
/* --- 24.11 Bootstrap list-group (used on calendar, message threads) ----- */
[data-rmc-aesthetic="v2"] .list-group-flush > .list-group-item {
padding: 12px 0;
border-color: var(--bs-border-color, rgba(26, 22, 18, 0.08));
transition: background var(--dur-fast, 150ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1));
}
/* --- 24.12 Dropdown button-groups (used in report card actions) --------- */
[data-rmc-aesthetic="v2"] .btn-group .dropdown-toggle,
[data-rmc-aesthetic="v2"] .btn-group .btn {
border-radius: 10px;
}
[data-rmc-aesthetic="v2"] .btn-group .btn:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
[data-rmc-aesthetic="v2"] .btn-group .btn:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
margin-left: -1px;
}
/* --- 24.13 The .rmc-page-header wrapper used by Wave 1 surgical edits ---- */
/* Just gives the v2 page-header block a clean stacking context. */
[data-rmc-aesthetic="v2"] .rmc-page-header {
display: flex;
flex-direction: column;
gap: 2px;
}
/* --- 24.14 Backwards-compat: legacy .h2.mb-0 inside page-header partial -- */
/* The shared page_header.html partials use `` for
backwards compat with .h2 utility sizing. Make sure .page-h1 wins. */
[data-rmc-aesthetic="v2"] .page-header h1.page-h1.h2,
[data-rmc-aesthetic="v2"] .page-header h1.page-h1.h4,
[data-rmc-aesthetic="v2"] .studio-os-topbar h1.page-h1.h4 {
font-size: clamp(1.5rem, 2.5vw, 2rem);
}
/* --- 24.15 Portal sidebar polish (matches mockup aside.sb feel) ---------- */
/* The portal sidebar in templates/partials/portal_sidebar.html uses existing
classes (.sidebar-header, .sidebar-avatar, .sidebar-info, .sidebar-section-
title, .nav-pill). We polish them WITHOUT changing markup, so every
authenticated page renders sidebar chrome closer to the mockup's aside.sb. */
[data-rmc-aesthetic="v2"] .sidebar-header {
padding-bottom: 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
margin-bottom: 12px;
}
[data-rmc-aesthetic="v2"] .sidebar-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--school-primary), var(--school-accent));
display: flex;
align-items: center;
justify-content: center;
color: var(--color-base-0); /* theme-locked-allow: manual-review */
font-weight: 700;
font-size: var(--type-size-caption);
flex-shrink: 0;
}
[data-rmc-aesthetic="v2"] .sidebar-info h6 {
font-size: var(--type-size-body);
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.2;
margin: 0;
}
[data-rmc-aesthetic="v2"] .sidebar-info p {
font-size: var(--type-size-micro);
margin-top: 2px;
letter-spacing: 0;
opacity: 0.7;
}
[data-rmc-aesthetic="v2"] .sidebar-section-title {
text-transform: uppercase;
letter-spacing: var(--tracking-eyebrow, 0.06em);
font-size: var(--type-size-micro);
font-weight: 600;
opacity: 0.6;
padding: 14px 14px 6px;
}
[data-rmc-aesthetic="v2"] .nav-pill,
[data-rmc-aesthetic="v2"] [data-sidebar-nav="true"] a.nav-link {
position: relative;
display: flex;
align-items: center;
gap: 11px;
padding: 9px 14px;
font-size: var(--type-size-body);
font-weight: 500;
border-radius: 10px;
margin-bottom: 1px;
transition:
background var(--dur-fast, 150ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1)),
color var(--dur-fast, 150ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1)),
transform var(--dur-fast, 150ms) var(--ease-apple-snap, cubic-bezier(0.65, 0, 0.35, 1));
}
[data-rmc-aesthetic="v2"] .nav-pill.active,
[data-rmc-aesthetic="v2"] [data-sidebar-nav="true"] a.nav-link.active {
background: color-mix(in oklab, var(--school-primary) 18%, transparent);
font-weight: 600;
}
/* --- 24.16 Empty state polish (rmc-empty-state class added to partial) -- */
[data-rmc-aesthetic="v2"] .rmc-empty-state {
border-radius: 14px;
background: var(--color-base-0, var(--color-base-0)); /* theme-locked-allow: manual-review */
box-shadow: var(--apple-elev-1);
padding: 48px 32px;
}
[data-rmc-aesthetic="v2"][data-bs-theme="dark"] .rmc-empty-state {
background: var(--color-base-800); /* theme-locked-allow: manual-review */
}
[data-rmc-aesthetic="v2"] .rmc-empty-state .rmc-empty-icon {
width: 64px;
height: 64px;
border-radius: 18px;
background: color-mix(in oklab, var(--school-primary) 10%, transparent);
color: var(--school-primary);
display: flex;
align-items: center;
justify-content: center;
}
[data-rmc-aesthetic="v2"] .rmc-empty-state .rmc-empty-message {
font-size: var(--type-size-body);
line-height: 1.5;
max-width: 480px;
margin-left: auto;
margin-right: auto;
}
/* --- 24.17 Pagination polish (cascades to 12 partial uses) ---------------*/
[data-rmc-aesthetic="v2"] .pagination .page-link {
border-radius: 8px;
border: 1px solid var(--bs-border-color, rgba(26, 22, 18, 0.08));
color: var(--color-base-700, var(--color-base-700)); /* theme-locked-allow: manual-review */
font-weight: 500;
font-size: var(--type-size-caption);
margin: 0 2px;
transition:
background var(--dur-fast, 150ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1)),
color var(--dur-fast, 150ms) var(--ease-apple, cubic-bezier(0.32, 0.72, 0, 1));
}
[data-rmc-aesthetic="v2"] .pagination .page-link:hover {
background: color-mix(in oklab, var(--school-primary) 6%, transparent);
color: var(--school-primary);
border-color: var(--school-primary);
}
[data-rmc-aesthetic="v2"] .pagination .page-item.active .page-link {
background: var(--school-primary);
border-color: var(--school-primary);
color: var(--color-base-0); /* theme-locked-allow: manual-review */
}
[data-rmc-aesthetic="v2"] .pagination .page-item.disabled .page-link {
opacity: 0.5;
}
/* --- 24.18 Dashboard hero polish (widgets/dashboard_hero.html, 19 uses) - */
[data-rmc-aesthetic="v2"] .dashboard-hero {
border-radius: 18px;
box-shadow: var(--apple-elev-3);
background: linear-gradient(135deg,
var(--school-primary),
color-mix(in oklab, var(--school-primary) 70%, var(--school-accent)));
color: var(--color-base-0); /* theme-locked-allow: manual-review */
position: relative;
overflow: hidden;
}
[data-rmc-aesthetic="v2"] .dashboard-hero::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 50% 80% at 90% 50%,
rgba(255, 255, 255, 0.18), transparent 70%);
pointer-events: none;
}
[data-rmc-aesthetic="v2"] .dashboard-hero > * { position: relative; }
[data-rmc-aesthetic="v2"] .dashboard-hero .hero-icon {
width: 56px;
height: 56px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.18);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
[data-rmc-aesthetic="v2"] .dashboard-hero h2 {
font-size: clamp(1.5rem, 3vw, 2.2rem);
letter-spacing: var(--tracking-display, -0.025em);
}
[data-rmc-aesthetic="v2"] .dashboard-hero .kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
margin-top: 20px;
}
[data-rmc-aesthetic="v2"] .dashboard-hero .kpi-pill {
background: rgba(255, 255, 255, 0.14);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-radius: 12px;
padding: 14px;
}
[data-rmc-aesthetic="v2"] .dashboard-hero .kpi-label {
font-size: var(--type-size-micro);
opacity: .85;
text-transform: uppercase;
letter-spacing: var(--tracking-eyebrow, 0.06em);
font-weight: 600;
}
[data-rmc-aesthetic="v2"] .dashboard-hero .kpi-value {
font-size: var(--type-size-headline-m);
font-weight: 700;
margin-top: 2px;
font-variant-numeric: tabular-nums;
}
/* --- 24.19 Action bar polish — .ds-action-bar grammar (20 callers across portal + admin). --- */
[data-rmc-aesthetic="v2"] .ds-action-bar {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
[data-rmc-aesthetic="v2"] .ds-action-bar .btn {
white-space: nowrap; /* horizontal-overflow-risk-allow: short-pill-content-bounded */
}
/* ==========================================================================
25. RETIREMENT AUDIT — zero-load CSS retired 2026-05-12
==========================================================================
The following ~84 KB / 7 files were deleted on 2026-05-12 after re-audit
confirmed zero template/python references:
admin_sidebar_enhanced.css 30.8 KB → per-theme overrides in backend-themes.css
backend-dashboard-extras.css 13.4 KB → orphan; logic in backend-dashboard-v2.css
admin-dark-readability.css 11.8 KB → folded into design-tokens.css token defaults
admin-content-readability.css 10.6 KB → folded into design-tokens.css token defaults
portal_theme.css 6.1 KB → conflicted with --portal-bg; superseded by tokens
backend-command-center-fixes.css 5.8 KB → fixes folded upstream
admin-flow.css 5.5 KB → orphan
Kept (still loaded, do NOT retire):
print.css 6.4 KB ← media="print" attr in base templates
Service worker note: portal_theme.css removed from static/js/service-worker.js
cache manifest. backend-dashboard-extras.css remained as a tolerated-missing
candidate in test_theme_visibility_matrix.py (test has fallback logic).
This block stays as a record so future Claude sessions don't re-audit and
so the deletion intent stays linked to the canonical token migration.
========================================================================== */
/* ==========================================================================
26. REDUCED-MOTION FALLBACKS
========================================================================== */
@media (prefers-reduced-motion: reduce) {
[data-rmc-aesthetic="v2"] .card-x.interactive,
[data-rmc-aesthetic="v2"] .kpi,
[data-rmc-aesthetic="v2"] aside.sb a.nav-link,
[data-rmc-aesthetic="v2"] .btn,
[data-rmc-aesthetic="v2"] .toast-x,
[data-rmc-aesthetic="v2"] .cp-overlay,
[data-rmc-aesthetic="v2"] .cp-modal,
[data-rmc-aesthetic="v2"] .progress-x {
transition: none;
animation: none;
}
}