/** * SAW LMS Critical CSS * * Inlined in for fast first paint. * Only includes above-the-fold styles. */ /* CSS Variables - Light Theme (default) */ :root { /* Colors - Brand */ --saw-color-primary: #6366f1; --saw-color-primary-hover: #4f46e5; --saw-color-primary-light: #e0e7ff; --saw-color-secondary: #64748b; --saw-color-accent: #f59e0b; /* Colors - Semantic */ --saw-color-success: #10b981; --saw-color-warning: #f59e0b; --saw-color-error: #ef4444; --saw-color-info: #3b82f6; /* Colors - Background */ --saw-bg-app: #f8fafc; --saw-bg-surface: #ffffff; --saw-bg-surface-hover: #f1f5f9; --saw-bg-elevated: #ffffff; --saw-bg-overlay: rgba(0, 0, 0, 0.5); /* Colors - Text */ --saw-text-primary: #0f172a; --saw-text-secondary: #475569; --saw-text-tertiary: #94a3b8; --saw-text-disabled: #cbd5e1; --saw-text-inverse: #ffffff; /* Colors - Border */ --saw-border-default: #e2e8f0; --saw-border-light: #f1f5f9; --saw-border-dark: #cbd5e1; /* Typography */ --saw-font-family: 'Inter', system-ui, -apple-system, sans-serif; --saw-font-size-xs: 0.75rem; --saw-font-size-sm: 0.875rem; --saw-font-size-base: 1rem; --saw-font-size-lg: 1.125rem; --saw-font-size-xl: 1.25rem; --saw-font-size-2xl: 1.5rem; --saw-font-size-3xl: 1.875rem; /* Spacing */ --saw-spacing-1: 0.25rem; --saw-spacing-2: 0.5rem; --saw-spacing-3: 0.75rem; --saw-spacing-4: 1rem; --saw-spacing-6: 1.5rem; --saw-spacing-8: 2rem; --saw-spacing-12: 3rem; /* Border Radius */ --saw-radius-sm: 0.25rem; --saw-radius-md: 0.5rem; --saw-radius-lg: 0.75rem; --saw-radius-xl: 1rem; --saw-radius-full: 9999px; /* Shadows */ --saw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --saw-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --saw-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* Transitions */ --saw-transition-fast: 150ms ease; --saw-transition-normal: 250ms ease; /* Layout */ --saw-header-height: 64px; --saw-sidebar-width: 280px; --saw-container-max: 1280px; } /* Dark Theme */ [data-theme="dark"] { --saw-bg-app: #0f172a; --saw-bg-surface: #1e293b; --saw-bg-surface-hover: #334155; --saw-bg-elevated: #1e293b; --saw-text-primary: #f1f5f9; --saw-text-secondary: #94a3b8; --saw-text-tertiary: #64748b; --saw-border-default: #334155; --saw-border-light: #1e293b; --saw-border-dark: #475569; --saw-color-primary: #818cf8; --saw-color-primary-hover: #a5b4fc; --saw-color-primary-light: rgba(99, 102, 241, 0.2); --saw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --saw-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4); --saw-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5); } /* Reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; line-height: 1.5; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--saw-font-family); font-size: var(--saw-font-size-base); color: var(--saw-text-primary); background-color: var(--saw-bg-app); min-height: 100vh; } /* App Container */ .saw-app { display: flex; flex-direction: column; min-height: 100vh; } .saw-app__container { display: flex; flex-direction: column; min-height: 100vh; } /* Header */ .saw-header { position: sticky; top: 0; z-index: 100; height: var(--saw-header-height); background: var(--saw-bg-surface); border-bottom: 1px solid var(--saw-border-default); box-shadow: var(--saw-shadow-sm); } .saw-header__container { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: var(--saw-container-max); margin: 0 auto; padding: 0 var(--saw-spacing-4); } .saw-header__logo-link { display: flex; align-items: center; text-decoration: none; color: var(--saw-text-primary); font-weight: 600; font-size: var(--saw-font-size-lg); } .saw-header__nav { display: none; } @media (min-width: 768px) { .saw-header__nav { display: flex; } } .saw-header__nav-list { display: flex; align-items: center; list-style: none; gap: var(--saw-spacing-1); height: 100%; margin: 0; padding: 0; } .saw-header__nav-item { display: flex; align-items: center; height: 100%; margin: 0; } .saw-header__nav-link { display: flex; align-items: center; gap: var(--saw-spacing-2); padding: var(--saw-spacing-2) var(--saw-spacing-3); color: var(--saw-text-secondary); text-decoration: none; font-size: var(--saw-font-size-sm); font-weight: 500; border-radius: var(--saw-radius-md); transition: all var(--saw-transition-fast); } .saw-header__nav-link:hover { color: var(--saw-text-primary); background: var(--saw-bg-surface-hover); } .saw-header__nav-item--active .saw-header__nav-link { color: var(--saw-color-primary); background: var(--saw-color-primary-light); } .saw-header__actions { display: flex; align-items: center; gap: var(--saw-spacing-2); } .saw-header__action { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--saw-text-secondary); background: transparent; border: none; border-radius: var(--saw-radius-md); cursor: pointer; transition: all var(--saw-transition-fast); } .saw-header__action:hover { color: var(--saw-text-primary); background: var(--saw-bg-surface-hover); } /* Main Content */ .saw-main { flex: 1; width: 100%; max-width: var(--saw-container-max); margin: 40px auto; padding: 0 var(--saw-spacing-4); } /* Checkout and Cart pages - no top margin */ .saw-main--checkout, .saw-main--cart { margin-top: 0; padding-top: var(--saw-spacing-6); } /* Icon */ .saw-icon { width: 20px; height: 20px; flex-shrink: 0; } /* Theme toggle visibility */ [data-theme="light"] .saw-theme-dark, [data-theme="dark"] .saw-theme-light { display: none; } /* Loading state */ .saw-loading { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background: var(--saw-bg-overlay); } .saw-loading[aria-hidden="false"] { display: flex; } .saw-loading__spinner { width: 48px; height: 48px; border: 4px solid var(--saw-border-default); border-top-color: var(--saw-color-primary); border-radius: 50%; animation: saw-spin 1s linear infinite; } @keyframes saw-spin { to { transform: rotate(360deg); } } /* Button base - for login button in header */ .saw-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--saw-spacing-2); padding: var(--saw-spacing-2) var(--saw-spacing-4); font-family: inherit; font-size: var(--saw-font-size-sm); font-weight: 500; line-height: 1.5; text-decoration: none; border: none; border-radius: var(--saw-radius-md); cursor: pointer; transition: all var(--saw-transition-fast); width: auto; height: auto; } .saw-btn--primary { color: var(--saw-text-inverse); background: var(--saw-color-primary); } .saw-btn--primary:hover { background: var(--saw-color-primary-hover); } .saw-btn--sm { padding: var(--saw-spacing-1) var(--saw-spacing-3); font-size: var(--saw-font-size-xs); } /* Mobile menu toggle */ .saw-header__mobile-toggle { display: flex; } @media (min-width: 768px) { .saw-header__mobile-toggle { display: none; } } .saw-header__mobile-toggle .saw-icon--x { display: none; } .saw-header__mobile-toggle[aria-expanded="true"] .saw-icon--menu { display: none; } .saw-header__mobile-toggle[aria-expanded="true"] .saw-icon--x { display: block; }