/* * School SMS theme. * Professional navy/blue for staff-facing screens; the student portal * gets brighter, kid-friendly accents via the .portal-student class * set on in base.html. */ :root { --sms-navy: #14213d; --sms-blue: #1d6fd1; --sms-green: #2f9e63; --sms-amber: #f4a825; --sms-bg: #f5f7fb; } body { background: var(--sms-bg); min-height: 100vh; } /* ---- Demo banner ---- */ .demo-banner { background: repeating-linear-gradient(45deg, var(--sms-amber), var(--sms-amber) 12px, #e0951a 12px, #e0951a 24px); color: #14213d; font-weight: 600; text-align: center; padding: .35rem .5rem; font-size: .9rem; } /* ---- Sidebar layout ---- */ .sms-sidebar { background: var(--sms-navy); min-height: 100vh; width: 240px; flex-shrink: 0; } .sms-sidebar .nav-link { color: #cfd8ea; border-radius: .5rem; margin: .1rem .5rem; padding: .5rem .9rem; } .sms-sidebar .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; } .sms-sidebar .nav-link.active { background: var(--sms-blue); color: #fff; } .sms-sidebar .brand { color: #fff; font-weight: 700; padding: 1rem; display: block; text-decoration: none; } .sms-content { flex-grow: 1; min-width: 0; } @media (max-width: 991px) { .sms-sidebar { position: fixed; z-index: 1040; left: -260px; transition: left .25s; } .sms-sidebar.show { left: 0; } } /* ---- Cards & stats ---- */ .stat-card { border: 0; border-radius: 1rem; box-shadow: 0 1px 4px rgba(20,33,61,.08); } .stat-card .stat-value { font-size: 1.9rem; font-weight: 700; color: var(--sms-navy); } .stat-card .stat-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #fff; } /* ---- Kid-friendly student portal ---- */ .portal-student { background: linear-gradient(180deg, #eef6ff 0%, #f6fff2 100%); } .portal-student .sms-sidebar { background: #2456a6; } .portal-student .stat-card { border-radius: 1.25rem; } .portal-student h1, .portal-student h2 { color: #2456a6; } /* ---- Login page ---- */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--sms-navy) 0%, #1d3a6e 60%, var(--sms-blue) 100%); } .login-card { max-width: 420px; width: 100%; border-radius: 1.25rem; }