/* ============================================ Main CSS - Common Layouts Import order matters for proper cascading ============================================ */ /* 1. Variables first - needed by all other files */ @import url('variables.css'); /* 2. Base styles */ @import url('base.css'); /* 3. Layout components */ @import url('sidebar.css'); @import url('header.css'); @import url('layout.css'); /* 4. UI components */ @import url('forms.css'); @import url('buttons.css'); @import url('cards.css'); @import url('tables.css'); /* 5. Page-specific styles */ @import url('crud.css'); /* 6. Responsive overrides last */ @import url('responsive.css'); /* ============================================ Swup Page Transitions ============================================ */ /* Swup adds state classes on : - is-changing: an animated visit is happening - is-animating: active animation phase Keep transitions to opacity/filter only to avoid issues with position:fixed children inside the swapped container. */ .transition-fade { opacity: 1; background-color: var(--bg-secondary); } html.is-changing .transition-fade { transition: opacity 220ms ease; } html.is-animating .transition-fade { opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { html.is-changing .transition-fade { transition: none !important; } html.is-animating .transition-fade { opacity: 1; filter: none; } }