/* LINKS LMS — theme tokens (toggle via data-theme on ) */ html[data-theme="dark"] { color-scheme: dark; --bg: #0f1419; --bg-elevated: #161d27; --surface: #1c2633; --border: rgba(255, 255, 255, 0.08); --text: #e8edf4; --muted: #8b9aaf; --accent: #5b8cff; --accent-dim: #3d6fd6; --success: #3ecf8e; --danger: #f07178; --radius: 12px; --radius-sm: 8px; --font: "DM Sans", system-ui, sans-serif; --font-display: "Instrument Serif", Georgia, serif; --shadow: 0 18px 50px rgba(0, 0, 0, 0.45); --nav-bg: rgba(15, 20, 25, 0.85); --nav-border: rgba(255, 255, 255, 0.08); --body-gradient: radial-gradient(1200px 600px at 10% -10%, rgba(91, 140, 255, 0.12), transparent), radial-gradient(800px 400px at 100% 0%, rgba(62, 207, 142, 0.06), transparent); --input-bg: rgba(0, 0, 0, 0.25); --input-border: var(--border); --login-page-bg: #13161c; --login-card-bg: #1a1d24; --login-card-border: rgba(255, 255, 255, 0.06); --login-card-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); --login-input-bg: #12151a; --login-input-border: rgba(255, 255, 255, 0.1); --login-placeholder: #5c6570; --login-alt-bg: rgba(0, 0, 0, 0.2); --login-or-line: rgba(255, 255, 255, 0.1); --login-icon: #6b7689; --login-label: #c4cad4; --login-check: #9aa3b2; } html[data-theme="light"] { color-scheme: light; --bg: #edf0f6; --bg-elevated: #ffffff; --surface: #ffffff; --border: rgba(20, 23, 29, 0.1); --text: #14171d; --muted: #5c6678; --accent: #2d62d8; --accent-dim: #2560c4; --success: #059669; --danger: #dc2626; --radius: 12px; --radius-sm: 8px; --font: "DM Sans", system-ui, sans-serif; --font-display: "Instrument Serif", Georgia, serif; --shadow: 0 18px 50px rgba(20, 23, 29, 0.1); --nav-bg: rgba(255, 255, 255, 0.92); --nav-border: rgba(20, 23, 29, 0.08); --body-gradient: radial-gradient(1200px 600px at 10% -10%, rgba(91, 140, 255, 0.12), transparent), radial-gradient(800px 400px at 100% 0%, rgba(62, 207, 142, 0.08), transparent); --input-bg: #f3f5f9; --input-border: rgba(20, 23, 29, 0.12); --login-page-bg: #e8ecf4; --login-card-bg: #ffffff; --login-card-border: rgba(20, 23, 29, 0.1); --login-card-shadow: 0 24px 60px rgba(20, 23, 29, 0.12); --login-input-bg: #f3f5f9; --login-input-border: rgba(20, 23, 29, 0.12); --login-placeholder: #8b95a5; --login-alt-bg: rgba(20, 23, 29, 0.04); --login-or-line: rgba(20, 23, 29, 0.12); --login-icon: #6b7689; --login-label: #3d4550; --login-check: #5c6678; } *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-font-smoothing: antialiased; } body.app-body { margin: 0; min-height: 100vh; font-family: var(--font); background: var(--body-gradient), var(--bg); color: var(--text); line-height: 1.55; } a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .main { max-width: 1100px; margin: 0 auto; padding: 2rem 1.25rem 5.5rem; } /* Top nav */ .topnav { border-bottom: 1px solid var(--nav-border); background: var(--nav-bg); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 50; } .topnav__inner { max-width: 1100px; margin: 0 auto; padding: 0.85rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--text); font-weight: 600; letter-spacing: -0.02em; text-decoration: none; } .brand:hover { text-decoration: none; color: var(--text); } .brand__mark { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--accent), #8b5cf6); box-shadow: 0 4px 14px rgba(91, 140, 255, 0.35); } .brand__text { font-size: 1.05rem; } .topnav__links { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.95rem; } .topnav__links a { color: var(--muted); } .topnav__links a:hover { color: var(--text); } .topnav__user { color: var(--muted); font-size: 0.9rem; } /* Hero / landing */ .hero { padding: 1rem 0 2rem; } .hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2.5rem; align-items: start; } @media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } } .hero__title { font-family: var(--font-display); font-size: clamp(2.1rem, 4vw, 2.85rem); font-weight: 400; line-height: 1.15; margin: 0.5rem 0 1rem; letter-spacing: -0.02em; } .hero__lead { color: var(--muted); font-size: 1.05rem; max-width: 46ch; margin: 0 0 1.5rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; color: var(--accent); margin: 0; font-weight: 600; } /* Cards */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.35rem 1.5rem; } .card--elevated { background: var(--bg-elevated); box-shadow: var(--shadow); } .card__title { font-size: 1.15rem; margin: 0 0 0.75rem; font-weight: 600; } .feature-list { margin: 0; padding-left: 1.1rem; color: var(--muted); } .feature-list li { margin-bottom: 0.6rem; } .feature-list strong { color: var(--text); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.55rem 1.1rem; border-radius: var(--radius-sm); border: 1px solid transparent; font-weight: 600; font-size: 0.95rem; cursor: pointer; font-family: inherit; text-decoration: none; transition: background 0.15s, border-color 0.15s, color 0.15s; } .btn:hover { text-decoration: none; } .btn--primary { background: linear-gradient(180deg, var(--accent), var(--accent-dim)); color: #fff; border-color: rgba(255, 255, 255, 0.12); } .btn--primary:hover { filter: brightness(1.06); color: #fff; } .btn--secondary { background: var(--surface); border-color: var(--border); color: var(--text); } .btn--secondary:hover { border-color: rgba(255, 255, 255, 0.2); } .btn--ghost { background: transparent; border-color: var(--border); color: var(--text); } .btn--ghost:hover { background: rgba(255, 255, 255, 0.04); } .btn--danger { background: rgba(240, 113, 120, 0.12); border-color: rgba(240, 113, 120, 0.35); color: #ffb4b8; } .btn--danger:hover { background: rgba(240, 113, 120, 0.2); } .btn--sm { padding: 0.35rem 0.75rem; font-size: 0.85rem; } .btn--block { width: 100%; } /* Forms */ .form { display: flex; flex-direction: column; gap: 1rem; } .form--inline { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } } .form-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; } .label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.88rem; color: var(--muted); } .input { padding: 0.55rem 0.75rem; border-radius: var(--radius-sm); border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text); font-family: inherit; font-size: 1rem; } .input:focus { outline: 2px solid rgba(91, 140, 255, 0.45); outline-offset: 1px; } .input--inline { width: auto; min-width: 8rem; } .textarea { min-height: 100px; resize: vertical; } .checkbox { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; color: var(--text); } /* Page */ .page { animation: fade 0.35s ease; } @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .page--narrow { max-width: 480px; margin: 0 auto; } .page-head { margin-bottom: 1.5rem; } .page-head--split { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .page-head__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .h1 { font-family: var(--font-display); font-size: 2rem; font-weight: 400; margin: 0 0 0.35rem; letter-spacing: -0.02em; } .h2 { font-size: 1.2rem; margin: 0 0 0.75rem; font-weight: 600; } .h3 { font-size: 1rem; margin: 1.25rem 0 0.5rem; font-weight: 600; color: var(--muted); } .muted { color: var(--muted); margin: 0; } /* Alerts */ .alert { padding: 0.65rem 0.85rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: 0.92rem; } .alert--success { background: rgba(62, 207, 142, 0.12); border: 1px solid rgba(62, 207, 142, 0.35); color: #9cf0c9; } .alert--error { background: rgba(240, 113, 120, 0.1); border: 1px solid rgba(240, 113, 120, 0.35); color: #ffc9cc; } /* Auth */ .auth-card .h1 { margin-bottom: 0.75rem; } /* Stats */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .stat { padding: 1.25rem; } .stat__label { display: block; font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .stat__value { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; } /* Tables */ .table-wrap { overflow-x: auto; } .table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .table th, .table td { padding: 0.65rem 0.75rem; text-align: left; border-bottom: 1px solid var(--border); } .table th { color: var(--muted); font-weight: 500; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; } .table--compact td { padding: 0.45rem 0.5rem; } .stack-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .inline-form { display: inline; } /* Teacher class grid */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } .class-card__desc { color: var(--muted); font-size: 0.9rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Parent */ .section { margin-bottom: 1.5rem; } .child-block__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; } .pill-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .pill { display: inline-block; padding: 0.25rem 0.65rem; border-radius: 999px; background: rgba(91, 140, 255, 0.12); border: 1px solid rgba(91, 140, 255, 0.25); font-size: 0.88rem; } .empty-state { text-align: center; padding: 2rem 1rem; color: var(--muted); } .danger-zone { margin-top: 2rem; padding-top: 1rem; border-top: 1px dashed var(--border); } /* Footer */ .site-footer { border-top: 1px solid var(--border); margin-top: 3rem; padding: 1.5rem 1.25rem; color: var(--muted); font-size: 0.85rem; } .site-footer__inner { max-width: 1100px; margin: 0 auto; } .site-footer p { margin: 0; } /* ---------- Theme FAB (lavender circle, all pages) ---------- */ .theme-fab { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 100; width: 52px; height: 52px; padding: 0; border: none; border-radius: 50%; background: #b9bbf3; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22); transition: transform 0.15s ease, box-shadow 0.15s ease; } .theme-fab:hover { transform: scale(1.06); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28); } .theme-fab:active { transform: scale(0.98); } .theme-fab__icon { display: none; flex-shrink: 0; } html[data-theme="dark"] .theme-fab__icon--sun { display: block; } html[data-theme="light"] .theme-fab__icon--moon { display: block; } /* ---------- Login screen (centered card, reference layout) ---------- */ body.app-body:has(.login-page) { background: var(--login-page-bg); } body.app-body:has(.login-page) .topnav, body.app-body:has(.login-page) .site-footer { display: none; } body.app-body:has(.login-page) .main { max-width: none; margin: 0; padding: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; } .login-page { width: 100%; padding: 2rem 1.25rem 3rem; display: flex; justify-content: center; align-items: center; } .login-card { width: 100%; max-width: 420px; background: var(--login-card-bg); border: 1px solid var(--login-card-border); border-radius: 16px; padding: 2rem 1.75rem 1.75rem; box-shadow: var(--login-card-shadow); } .login-brand { position: relative; width: 72px; height: 72px; margin: 0 auto 1.5rem; display: grid; place-items: center; } .login-brand__frame { position: absolute; inset: 0; border-radius: 6px; border: 2px solid #e63946; box-shadow: inset 0 0 0 1px rgba(230, 57, 70, 0.25); } .login-brand__frame::before, .login-brand__frame::after { content: ""; position: absolute; width: 10px; height: 10px; border-color: #e63946; border-style: solid; } .login-brand__frame::before { top: -4px; left: -4px; border-width: 2px 0 0 2px; } .login-brand__frame::after { bottom: -4px; right: -4px; border-width: 0 2px 2px 0; } .login-brand__text { position: relative; z-index: 1; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.12em; color: #e63946; line-height: 1.1; text-align: center; max-width: 3.2rem; } .login-card__head { text-align: center; margin-bottom: 1.5rem; } .login-card__title { margin: 0 0 0.35rem; font-size: 1.5rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; } .login-card__subtitle { margin: 0; font-size: 0.9rem; color: var(--muted); } .login-alert { padding: 0.65rem 0.85rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.88rem; } .login-alert--success { background: rgba(62, 207, 142, 0.12); border: 1px solid rgba(62, 207, 142, 0.35); color: #9cf0c9; } .login-alert--error { background: rgba(240, 113, 120, 0.1); border: 1px solid rgba(240, 113, 120, 0.35); color: #ffc9cc; } .login-form { display: flex; flex-direction: column; gap: 1rem; } .login-field__label { display: block; font-size: 0.8rem; font-weight: 500; color: var(--login-label); margin-bottom: 0.4rem; } .login-input-wrap { position: relative; display: flex; align-items: center; } .login-input__icon { position: absolute; left: 0.85rem; color: var(--login-icon); display: flex; pointer-events: none; } .login-input { width: 100%; padding: 0.7rem 0.85rem 0.7rem 2.65rem; border-radius: 10px; border: 1px solid var(--login-input-border); background: var(--login-input-bg); color: var(--text); font-size: 0.95rem; font-family: inherit; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .login-input.login-input--with-toggle { padding-right: 2.75rem; } .login-input::placeholder { color: var(--login-placeholder); } .login-input:focus { border-color: rgba(91, 140, 255, 0.55); box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.12); } .login-input__toggle { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 0.35rem; color: var(--login-icon); cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 6px; } .login-input__toggle:hover { color: var(--muted); background: rgba(128, 128, 128, 0.12); } .login-row--split { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-top: -0.25rem; } .login-check { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: var(--login-check); cursor: pointer; user-select: none; } .login-check input { width: 1rem; height: 1rem; accent-color: var(--accent); } .login-link-forgot { font-size: 0.85rem; color: var(--accent); font-weight: 500; text-decoration: none; } .login-link-forgot:hover { text-decoration: underline; } .login-btn-primary { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; margin-top: 0.25rem; padding: 0.85rem 1.25rem; border: none; border-radius: 10px; font-size: 1rem; font-weight: 600; font-family: inherit; color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--accent) 0%, #7c5cff 55%, #8b5cf6 100%); box-shadow: 0 8px 24px rgba(91, 140, 255, 0.28); transition: transform 0.12s, filter 0.12s; } .login-btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); } .login-btn-primary:active { transform: translateY(0); } .login-or { display: flex; align-items: center; gap: 0.75rem; margin: 1.35rem 0; } .login-or__line { flex: 1; height: 1px; background: var(--login-or-line); } .login-or__text { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; color: var(--login-icon); } .login-alt-actions { display: flex; flex-direction: column; gap: 0.6rem; } .login-alt-btn { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.85rem; border-radius: 10px; border: 1px solid var(--border); background: var(--login-alt-bg); color: inherit; text-decoration: none; transition: background 0.15s, border-color 0.15s; } .login-alt-btn:hover { background: rgba(128, 128, 128, 0.1); border-color: var(--border); text-decoration: none; } .login-alt-btn__icon { flex-shrink: 0; color: var(--muted); display: flex; } .login-alt-btn__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; text-align: left; } .login-alt-btn__title { font-size: 0.92rem; font-weight: 600; color: var(--text); } .login-alt-btn__sub { font-size: 0.78rem; color: var(--muted); line-height: 1.3; } .login-alt-btn__chev { flex-shrink: 0; color: var(--login-icon); } .login-footer-line { text-align: center; margin: 1.5rem 0 0; font-size: 0.9rem; color: var(--muted); } .login-footer-line a { color: var(--accent); font-weight: 600; text-decoration: none; } .login-footer-line a:hover { text-decoration: underline; } @media (max-width: 400px) { .login-card { padding: 1.5rem 1.15rem; } }