/*
* ==========================================================================
* LESSON STUDIO — DESIGN SYSTEM
* ==========================================================================
*
* Phase 4I-1: Foundation file (original)
* Phase 4I-4A: Navy & Sage palette, Fraunces + DM Sans typography
* Version: 2.0.0
* Created: February 2026
*
* This file defines the visual DNA of the entire application through
* CSS custom properties. It's designed to coexist with Bootstrap 5
* during the transition period.
*
* v2 CHANGES:
* - Brand palette: Musical Blue → Navy (#172434 base)
* - Accent palette: Warm Gold → Sage Green (#16764b / #86efac)
* - Neutrals: Warm gray → Cool green-tinted gray
* - Typography: Plus Jakarta Sans → DM Sans (body) + Fraunces (headings)
* - Semantic colors adjusted to complement sage palette
*
* HOW TO USE:
* 1. Add to base.html AFTER Bootstrap CSS, BEFORE inline styles:
*
*
*
* 2. Reference variables in templates and inline styles:
* style="color: var(--ls-text-primary)"
* style="background: var(--ls-bg-surface)"
*
* All variables prefixed with --ls- to avoid collision with Bootstrap's
* own custom properties (--bs-*).
* ==========================================================================
*/
/* ==========================================================================
FONTS (self-hosted — see static/vendor/VERSIONS.md)
========================================================================== */
@import url('../vendor/fonts/fonts.css');
/* ==========================================================================
DESIGN TOKENS — The DNA of the visual system
==========================================================================
These are the single source of truth for every color, size, and effect
in the application. When we eventually add dark mode, we only need to
swap values in this one section.
========================================================================== */
:root {
/* ------------------------------------------------------------------
BRAND COLORS — Navy
------------------------------------------------------------------
Deep navy palette. The primary structural color.
950 = sidebar/darkest 600 = primary accent 50 = lightest tint
------------------------------------------------------------------ */
--ls-blue-950: #0d1520;
--ls-blue-900: #121d2e;
--ls-blue-800: #172434;
--ls-blue-700: #1e3044;
--ls-blue-600: #2a4460;
--ls-blue-500: #3a5a7c;
--ls-blue-400: #547896;
--ls-blue-300: #7a9bb5;
--ls-blue-200: #aec5d8;
--ls-blue-100: #dae7f0;
--ls-blue-50: #eef3f7;
/* ------------------------------------------------------------------
ACCENT COLORS — Sage Green
------------------------------------------------------------------
Sage green accents for brand highlights, interactive elements,
success states. Distinctive and professional.
------------------------------------------------------------------ */
--ls-sage-600: #136841;
--ls-sage-500: #16764b;
--ls-sage-400: #22956a;
--ls-sage-300: #4cc38e;
--ls-sage-200: #86efac;
--ls-sage-100: #c8f7d9;
--ls-sage-50: #ecfdf3;
/* ------------------------------------------------------------------
NEUTRAL PALETTE
------------------------------------------------------------------
Used for text, borders, backgrounds, and surfaces.
Slight cool undertone with green tint to complement sage palette.
------------------------------------------------------------------ */
--ls-gray-950: #0f1514;
--ls-gray-900: #172434;
--ls-gray-800: #2d3d3a;
--ls-gray-700: #3e524d;
--ls-gray-600: #5a7265;
--ls-gray-500: #6e8a7d;
--ls-gray-400: #8fa69a;
--ls-gray-300: #b5c7bf;
--ls-gray-200: #dfe6e2;
--ls-gray-100: #eef2f0;
--ls-gray-50: #f7f9f8;
/* ------------------------------------------------------------------
SEMANTIC COLORS
------------------------------------------------------------------
Each semantic color has a main shade (for text/icons) and a
background shade (for badges, flash messages, alert bars).
------------------------------------------------------------------ */
/* Success — payments received, confirmed, current */
--ls-success: #16764b;
--ls-success-dark:#136841;
--ls-success-bg: #ecfdf3;
--ls-success-border: #c8f7d9;
/* Warning — partial payments, needs attention, pending */
--ls-warning: #ca8a04;
--ls-warning-dark:#a37403;
--ls-warning-bg: #fefce8;
--ls-warning-border: #fef08a;
/* Danger — unpaid, errors, overdue, destructive actions */
--ls-danger: #dc2626;
--ls-danger-dark: #b91c1c;
--ls-danger-bg: #fef2f2;
--ls-danger-border: #fecaca;
/* Info — neutral informational, calendar sync, tips */
--ls-info: #2a4460;
--ls-info-dark: #1e3044;
--ls-info-bg: #eef3f7;
--ls-info-border: #aec5d8;
/* ------------------------------------------------------------------
FUNCTIONAL / SEMANTIC ALIASES
------------------------------------------------------------------
These map design tokens to their function. Use THESE in components,
not the raw color values above. This makes dark mode a simple swap.
------------------------------------------------------------------ */
/* Text */
--ls-text-primary: var(--ls-gray-900); /* Headings, body text, labels */
--ls-text-secondary: var(--ls-gray-600); /* Descriptions, secondary info */
/* #61 A4: decoupled from --ls-gray-400 (#8fa69a computed 2.60:1 on
surface — an AA fail across ~110 usages). #5f7368 is 4.6:1 on
surface and stays in the green-gray family; gray-400 itself is
unchanged for non-text uses. */
--ls-text-muted: #5f7368; /* Hints, placeholders, metadata */
--ls-text-inverse: #ffffff; /* Text on dark backgrounds */
/* Backgrounds */
--ls-bg-page: var(--ls-gray-50); /* Page background */
--ls-bg-surface: #ffffff; /* Cards, modals, dropdowns */
--ls-bg-inset: var(--ls-gray-100); /* Inset areas, code blocks */
--ls-bg-hover: var(--ls-gray-50); /* Table row hover, list hover */
--ls-bg-navbar: var(--ls-blue-800); /* Main navigation / sidebar */
--ls-bg-overlay: rgba(255, 255, 255, 0.9); /* Translucent bars over content
(pair with backdrop-blur) */
/* Borders */
--ls-border: var(--ls-gray-200); /* Default border (cards, decor) */
--ls-border-light: var(--ls-gray-100); /* Subtle borders (table rows) */
/* #61 A32: form-field boundaries need >=3:1 (SC 1.4.11); the decorative
card border (1.27:1) stays subtle by design. */
--ls-border-input: var(--ls-gray-500);
--ls-border-focus: var(--ls-sage-400); /* Input focus ring */
/* Interactive */
--ls-primary: var(--ls-sage-500); /* Primary buttons, links */
--ls-primary-hover: var(--ls-sage-600); /* Primary hover state */
--ls-primary-active:var(--ls-sage-600); /* Primary active/pressed state */
--ls-accent: var(--ls-sage-200); /* Light sage accent (sidebar badges, highlights) */
--ls-accent-hover: var(--ls-sage-300); /* Accent hover state */
/* ------------------------------------------------------------------
TYPOGRAPHY
------------------------------------------------------------------
Fraunces (variable serif) for headings and stat values — adds
warmth and brand personality. DM Sans for everything else —
clean geometric sans-serif with excellent readability.
------------------------------------------------------------------ */
--ls-font-family: 'DM Sans', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--ls-font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
/* Size scale — each step has a clear purpose */
--ls-text-xs: 0.6875rem; /* 11px — table headers, micro labels */
--ls-text-sm: 0.8125rem; /* 13px — badges, hints, metadata */
--ls-text-base: 0.9063rem; /* 14.5px — body text, form inputs */
--ls-text-md: 0.9375rem; /* 15px — card headings, section labels */
--ls-text-lg: 1.0625rem; /* 17px — modal titles, large labels */
--ls-text-xl: 1.375rem; /* 22px — page titles */
--ls-text-2xl: 1.75rem; /* 28px — stat card values */
/* Public-scoped scale (#152 §4) — sizes the marketing surface needs
that the app doesn't. Tokens live HERE (not in public.css) so a
redesign moves both surfaces from one file. */
--ls-display-1: clamp(2.6rem, 6.5vw, 4.2rem); /* public hero headline */
--ls-display-2: clamp(1.8rem, 4vw, 2.6rem); /* public section headings */
--ls-section-gap: clamp(3rem, 9vw, 6.25rem); /* public section rhythm */
/* Weight scale */
--ls-font-normal: 400; /* Body text */
--ls-font-medium: 500; /* Secondary labels, nav items */
--ls-font-semibold: 600; /* Headings, button text, table headers */
--ls-font-bold: 700; /* Page titles, stat values */
/* Line heights */
--ls-leading-tight: 1.3; /* Headings, stat values */
--ls-leading-normal: 1.6; /* Body text, descriptions */
--ls-leading-relaxed:1.75; /* Long-form text if we ever need it */
/* Letter spacing */
--ls-tracking-tight: -0.02em; /* Page titles, large text */
--ls-tracking-normal: 0; /* Body text */
--ls-tracking-wide: 0.05em; /* Uppercase table headers, labels */
/* ------------------------------------------------------------------
SPACING
------------------------------------------------------------------
4px base unit. Used for margins, padding, and gaps.
Named by their multiple: space-1 = 4px, space-2 = 8px, etc.
------------------------------------------------------------------ */
--ls-space-0: 0;
--ls-space-1: 0.25rem; /* 4px */
--ls-space-2: 0.5rem; /* 8px */
--ls-space-3: 0.75rem; /* 12px */
--ls-space-4: 1rem; /* 16px */
--ls-space-5: 1.25rem; /* 20px */
--ls-space-6: 1.5rem; /* 24px */
--ls-space-8: 2rem; /* 32px */
--ls-space-10: 2.5rem; /* 40px */
--ls-space-12: 3rem; /* 48px */
--ls-space-16: 4rem; /* 64px */
/* ------------------------------------------------------------------
EFFECTS — Borders, shadows, transitions
------------------------------------------------------------------ */
/* Border radius */
--ls-radius-sm: 6px; /* Small elements (badges, small buttons) */
--ls-radius-md: 8px; /* Default (inputs, buttons, cards) */
--ls-radius-lg: 12px; /* Large cards, modals */
--ls-radius-xl: 16px; /* Extra-large containers */
--ls-radius-full:9999px; /* Fully round (pills, avatars) */
/* Shadows — progressive depth */
--ls-shadow-xs: 0 1px 2px rgba(15, 20, 40, 0.04);
--ls-shadow-sm: 0 1px 3px rgba(15, 20, 40, 0.06),
0 1px 2px rgba(15, 20, 40, 0.04);
--ls-shadow-md: 0 4px 12px rgba(15, 20, 40, 0.08);
--ls-shadow-lg: 0 8px 24px rgba(15, 20, 40, 0.12);
--ls-shadow-xl: 0 16px 48px rgba(15, 20, 40, 0.16);
/* Focus ring — accessible, branded */
--ls-shadow-focus: 0 0 0 3px rgba(22, 118, 75, 0.45); /* #61 */
--ls-shadow-focus-danger: 0 0 0 3px rgba(220, 38, 38, 0.2);
/* Transitions */
--ls-transition-fast: 120ms ease; /* Hover color changes */
--ls-transition-normal: 180ms ease; /* Most interactions */
--ls-transition-slow: 300ms ease; /* Modal open/close, page transitions */
/* Transition curves */
--ls-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* Enters smoothly */
--ls-ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); /* Symmetric */
--ls-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Slight overshoot */
/* ------------------------------------------------------------------
LAYOUT
------------------------------------------------------------------ */
--ls-navbar-height: 56px;
--ls-section-tab-height: 44px;
--ls-page-max-width: 1200px;
--ls-sidebar-width: 320px; /* Student detail side panel */
/* Z-index scale */
--ls-z-dropdown: 100;
--ls-z-sticky: 200;
--ls-z-navbar: 300;
--ls-z-modal: 400;
/* Toast must clear all Bootstrap defaults (modal=1055, popover=1080,
toast-container=1090) so notifications always render on top.
Bumped from 500 in v0.60.8 after the tracking-page invisible-toast
discovery — Bootstrap-stacked elements at top-right buried it. */
--ls-z-toast: 1100;
}
/* ==========================================================================
DARK MODE (#12)
==========================================================================
The theme marker is data-bs-theme="dark" on — ONE attribute drives
both Bootstrap's native dark variables and these token swaps, so the two
can't drift. It is set pre-paint by the inline script in base.html's
(localStorage 'ls-theme', falling back to prefers-color-scheme)
and toggled by js/theme-toggle.js.
Scoped inside @media screen so PRINT always gets the light tokens —
printing from dark mode must not produce dark pages.
Neutrals are green-tinted to match the brand ramp. --ls-bg-navbar and
--ls-text-inverse are deliberately NOT swapped: the sidebar chrome is
identical in both modes, and inverse text sits on colored fills whose
colors barely change.
========================================================================== */
@media screen {
:root[data-bs-theme="dark"] {
/* Align Bootstrap's dark-theme surfaces with ours. Bootstrap (and the
Tom Select bootstrap5 theme) read --bs-body-bg & friends; left at
Bootstrap's own dark values (#212529 etc.) they sit a visibly
different shade next to our --ls-bg-surface cards. */
--bs-body-bg: var(--ls-bg-surface);
--bs-body-color: var(--ls-text-primary);
--bs-border-color: var(--ls-border);
--bs-tertiary-bg: var(--ls-bg-inset);
--bs-secondary-bg: var(--ls-bg-inset);
--bs-secondary-color: var(--ls-text-secondary);
--bs-tertiary-color: var(--ls-text-muted);
/* Gray ramp, mirrored — fixes every direct --ls-gray-* use for free.
50 (was lightest) is now the darkest subtle tint, 950 near-white. */
--ls-gray-950: #f7f9f8;
--ls-gray-900: #e8eeeb;
--ls-gray-800: #d3ddd8;
--ls-gray-700: #b0bfb8;
--ls-gray-600: #9fb3a9;
--ls-gray-500: #6e8a7d; /* mid — unchanged */
--ls-gray-400: #5f7268;
--ls-gray-300: #3d4f48;
--ls-gray-200: #2c3a35;
--ls-gray-100: #232f2b;
--ls-gray-50: #1c2622;
/* Light tint steps of the accent ramps become dark tints. Deeper steps
(sage-200+, blue-200+) stay put — they're used on the navy sidebar. */
--ls-sage-100: #1a3327;
--ls-sage-50: #14261d;
--ls-blue-100: #1a2735;
--ls-blue-50: #16202b;
/* Mid-blues are used as link-ish text (dashboard names, view-all links)
and a focus outline — too muddy on dark surfaces; lift them. Deeper
steps (600+) are fills/chips with light text and stay put. */
--ls-blue-500: #7a9bb5;
--ls-blue-400: #6b8dab;
/* Semantic colors — main shades brightened a step for dark-surface
contrast; -bg/-border tints become translucent so they sit naturally
on any dark surface. */
--ls-success: #35b384; /* #61: 5.2:1 as text even on its tint */
--ls-success-dark:#22956a;
--ls-success-bg: rgba(76, 195, 142, 0.08);
--ls-success-border: rgba(76, 195, 142, 0.32);
--ls-warning: #eab308;
--ls-warning-dark:#ca8a04;
--ls-warning-bg: rgba(234, 179, 8, 0.10);
--ls-warning-border: rgba(234, 179, 8, 0.32);
--ls-danger: #f87171; /* #61: 5.9:1 as text on dark surface */
--ls-danger-dark: #ef4444;
--ls-danger-bg: rgba(239, 68, 68, 0.08);
--ls-danger-border: rgba(239, 68, 68, 0.32);
--ls-info: #7a9bb5;
--ls-info-dark: #547896;
--ls-info-bg: rgba(122, 155, 181, 0.10);
--ls-info-border: rgba(122, 155, 181, 0.32);
/* Functional aliases — the swap points */
--ls-text-primary: #e6ece9;
--ls-text-secondary: #9fb3a9;
--ls-text-muted: #7f9389; /* #61 A4: 4.7:1 on dark surface */
--ls-bg-page: #111815;
--ls-bg-surface: #1a2420;
--ls-bg-inset: #22302b;
--ls-bg-hover: #212d28;
--ls-bg-overlay: rgba(26, 36, 32, 0.9);
--ls-border: #2e3c36;
--ls-border-light: #26322d;
--ls-border-input: #5f7268; /* #61 A32: ~3.1:1 vs dark field */
/* Interactive — hover BRIGHTENS on dark (light mode darkens).
#61: #1d8a58 computed 3.67:1 as link text; lifted. Button fills get
dark text in components.css, so the lift is safe there too. */
--ls-primary: #2aa276;
--ls-primary-hover: #35b384;
--ls-primary-active: #35b384;
/* Shadows — stronger, or they vanish against dark surfaces */
--ls-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
--ls-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35),
0 1px 2px rgba(0, 0, 0, 0.3);
--ls-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
--ls-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
--ls-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
}
}
/* ==========================================================================
DARK MODE — BOOTSTRAP HAZARD-CLASS OVERRIDES (#12)
==========================================================================
Bootstrap 5.3's dark theme does NOT redefine --bs-white-rgb/--bs-light-rgb/
--bs-dark-rgb, so .bg-white/.bg-light/.text-dark/.table-light stay light
even under data-bs-theme="dark". ~116 template uses across 21 templates;
this block retargets them to theme-aware tokens in one place.
========================================================================== */
@media screen {
:root[data-bs-theme="dark"] .bg-white {
background-color: var(--ls-bg-surface) !important;
}
:root[data-bs-theme="dark"] .bg-light {
background-color: var(--ls-bg-inset) !important;
}
:root[data-bs-theme="dark"] .text-dark {
color: var(--ls-text-primary) !important;
}
:root[data-bs-theme="dark"] .table-light > :not(caption) > * > * {
--bs-table-bg: var(--ls-bg-inset);
--bs-table-color: var(--ls-text-primary);
background-color: var(--ls-bg-inset);
color: var(--ls-text-primary);
}
}
/* ==========================================================================
BASE ELEMENT STYLES
==========================================================================
Light-touch resets and defaults. These apply globally but are designed
to coexist with Bootstrap. They set the new font and improve defaults
without breaking existing Bootstrap-styled pages.
========================================================================== */
/*
* Apply our font to the whole document.
* Bootstrap's font-family is set on body, so we need !important here
* during the transition period. Once Bootstrap is fully replaced,
* we can remove !important.
*/
body {
font-family: var(--ls-font-family) !important;
font-size: var(--ls-text-base);
line-height: var(--ls-leading-normal);
color: var(--ls-text-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/*
* Improve text rendering for headings.
* These don't override Bootstrap's heading sizes yet — that happens
* in Phase 4I-2 when we add .ls-page-title, .ls-card-title, etc.
*/
h1, h2, h3, h4, h5, h6 {
font-family: var(--ls-font-heading);
letter-spacing: var(--ls-tracking-tight);
font-weight: var(--ls-font-semibold);
}
/* ==========================================================================
UTILITY CLASSES
==========================================================================
Reusable helpers for common patterns. Prefixed with .ls- to avoid
collision with Bootstrap utilities.
========================================================================== */
/* --- Text colors --- */
.ls-text-primary { color: var(--ls-text-primary) !important; }
.ls-text-secondary { color: var(--ls-text-secondary) !important; }
.ls-text-muted { color: var(--ls-text-muted) !important; }
.ls-text-success { color: var(--ls-success) !important; }
.ls-text-warning { color: var(--ls-warning) !important; }
.ls-text-danger { color: var(--ls-danger) !important; }
.ls-text-info { color: var(--ls-info) !important; }
.ls-text-blue { color: var(--ls-blue-600) !important; }
.ls-text-sage { color: var(--ls-sage-500) !important; }
/* --- Background colors --- */
.ls-bg-page { background-color: var(--ls-bg-page) !important; }
.ls-bg-surface { background-color: var(--ls-bg-surface) !important; }
.ls-bg-inset { background-color: var(--ls-bg-inset) !important; }
.ls-bg-success { background-color: var(--ls-success-bg) !important; }
.ls-bg-warning { background-color: var(--ls-warning-bg) !important; }
.ls-bg-danger { background-color: var(--ls-danger-bg) !important; }
.ls-bg-info { background-color: var(--ls-info-bg) !important; }
.ls-bg-blue { background-color: var(--ls-blue-50) !important; }
.ls-bg-sage { background-color: var(--ls-sage-50) !important; }
/* --- Text sizes --- */
.ls-text-xs { font-size: var(--ls-text-xs) !important; }
.ls-text-sm { font-size: var(--ls-text-sm) !important; }
.ls-text-base { font-size: var(--ls-text-base) !important; }
.ls-text-md { font-size: var(--ls-text-md) !important; }
.ls-text-lg { font-size: var(--ls-text-lg) !important; }
.ls-text-xl { font-size: var(--ls-text-xl) !important; }
.ls-text-2xl { font-size: var(--ls-text-2xl) !important; }
/* --- Font weights --- */
.ls-font-normal { font-weight: var(--ls-font-normal) !important; }
.ls-font-medium { font-weight: var(--ls-font-medium) !important; }
.ls-font-semibold { font-weight: var(--ls-font-semibold) !important; }
.ls-font-bold { font-weight: var(--ls-font-bold) !important; }
/* --- Uppercase label (table headers, section labels) --- */
.ls-label-upper {
font-size: var(--ls-text-xs);
font-weight: var(--ls-font-semibold);
text-transform: uppercase;
letter-spacing: var(--ls-tracking-wide);
color: var(--ls-text-muted);
}
/* --- Border radius --- */
.ls-rounded-sm { border-radius: var(--ls-radius-sm) !important; }
.ls-rounded { border-radius: var(--ls-radius-md) !important; }
.ls-rounded-lg { border-radius: var(--ls-radius-lg) !important; }
.ls-rounded-xl { border-radius: var(--ls-radius-xl) !important; }
.ls-rounded-full { border-radius: var(--ls-radius-full) !important; }
/* --- Shadows --- */
.ls-shadow-xs { box-shadow: var(--ls-shadow-xs) !important; }
.ls-shadow-sm { box-shadow: var(--ls-shadow-sm) !important; }
.ls-shadow { box-shadow: var(--ls-shadow-md) !important; }
.ls-shadow-lg { box-shadow: var(--ls-shadow-lg) !important; }
.ls-shadow-xl { box-shadow: var(--ls-shadow-xl) !important; }
.ls-shadow-none { box-shadow: none !important; }
/* --- Transitions --- */
.ls-transition { transition: all var(--ls-transition-normal); }
.ls-transition-fast { transition: all var(--ls-transition-fast); }
.ls-transition-slow { transition: all var(--ls-transition-slow); }
/* ==========================================================================
ANIMATION KEYFRAMES
==========================================================================
Reusable animations for flash messages, modals, tooltips, etc.
========================================================================== */
/* Fade in from above (flash messages, dropdowns) */
@keyframes ls-fade-in-down {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Fade in from below (modals, tooltips) */
@keyframes ls-fade-in-up {
from {
opacity: 0;
transform: translateY(12px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Fade in (generic, overlays) */
@keyframes ls-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Slide in from right (notifications, panels) */
@keyframes ls-slide-in-right {
from {
opacity: 0;
transform: translateX(24px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Gentle pulse (badges with updates, today indicator) */
@keyframes ls-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
/* Spinner for loading states */
@keyframes ls-spin {
to { transform: rotate(360deg); }
}
/* Success pulse (payment confirmed, etc.) */
@keyframes ls-success-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(22, 118, 75, 0); }
50% { box-shadow: 0 0 0 8px rgba(22, 118, 75, 0.15); }
}
/* Animation utility classes */
.ls-animate-fade-in-down { animation: ls-fade-in-down 0.25s var(--ls-ease-out); }
.ls-animate-fade-in-up { animation: ls-fade-in-up 0.3s var(--ls-ease-out); }
.ls-animate-fade-in { animation: ls-fade-in 0.2s ease; }
.ls-animate-slide-in-right{ animation: ls-slide-in-right 0.3s var(--ls-ease-out); }
.ls-animate-pulse { animation: ls-pulse 2s ease-in-out infinite; }
.ls-animate-spin { animation: ls-spin 0.6s linear infinite; }
/* ==========================================================================
PRINT STYLES
==========================================================================
Basic print optimization. When you print a balance report or student
list, it should look clean on paper.
========================================================================== */
@media print {
/* Hide navigation and interactive elements */
nav, .flash-container, footer,
button, .btn, .dropdown-menu {
display: none !important;
}
/* Remove backgrounds and shadows for ink savings */
body {
background: white !important;
color: black !important;
font-size: 12pt;
}
.card, .stat-card {
box-shadow: none !important;
border: 1px solid #ddd !important;
}
/* Ensure tables print well */
table {
page-break-inside: auto;
}
tr {
page-break-inside: avoid;
}
}
/* ==========================================================================
REDUCED MOTION — global catch-all (#61 A24)
==========================================================================
Individual prefers-reduced-motion blocks exist for the drawer, panel and
palette, but ~76 animation/transition declarations were uncovered
(including infinite pulse/shimmer loops). This effectively freezes all
motion for users who asked for that; the targeted blocks remain as
documentation of intent.
========================================================================== */
@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;
}
}