/* GAMW Ensembles - the teachers' views. Scoped to .gamw-jpr; phone first. */ .gamw-jpr { --jp-navy: #1A1F3C; --jp-pink: #FF325C; --jp-line: #E3E7F0; --jp-muted: #6B7280; --jp-bg: #F7F8FC; max-width: 980px; margin: 0 auto; padding: 4px; font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.5; color: var(--jp-navy); -webkit-font-smoothing: antialiased; } .gamw-jpr *, .gamw-jpr *::before, .gamw-jpr *::after { box-sizing: border-box; } .gamw-jpr button, .gamw-jpr input, .gamw-jpr select { font: inherit; } .gamw-jpr a { color: var(--jp-navy); } .jp-loading { color: var(--jp-muted); padding: 30px 0; } .jp-badge { display: inline-block; background: var(--jp-pink); color: #fff; font-family: Syne, Georgia, serif; font-weight: 800; border-radius: 8px; padding: 3px 10px; font-size: 14px; } /* ── login ─────────────────────────────────────────────────────────── */ .jp-login { max-width: 400px; margin: 30px auto; background: #fff; border: 1.5px solid var(--jp-line); border-radius: 16px; padding: 22px; box-shadow: 0 10px 30px rgba(26,31,60,.06); } .jp-login h2 { font-family: Syne, Georgia, serif; font-weight: 800; margin: 12px 0 6px; font-size: 24px; } .jp-login p { color: var(--jp-muted); font-size: 14.5px; margin: 0 0 14px; } .jp-login .jp-warn { color: #B42318; } .jp-login label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 4px; } .jp-login input[type=text], .jp-login input[type=password] { width: 100%; border: 1.5px solid var(--jp-line); border-radius: 10px; padding: 10px 12px; font-size: 16px; margin-bottom: 12px; } .jp-login .login-remember { font-size: 13px; color: var(--jp-muted); margin-bottom: 12px; } .jp-login .login-remember label { display: inline; font-weight: 500; } .jp-login input[type=submit] { width: 100%; background: var(--jp-pink); color: #fff; border: 0; border-radius: 10px; padding: 12px; font-weight: 800; font-size: 15px; cursor: pointer; } /* ── nav ───────────────────────────────────────────────────────────── */ .jp-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; } .jp-nav-items { display: inline-flex; gap: 3px; background: #EEF1F8; border-radius: 10px; padding: 3px; } .jp-nav-a { text-decoration: none; font-size: 13.5px; font-weight: 700; color: var(--jp-muted); padding: 6px 12px; border-radius: 8px; } .jp-nav-a.is-on { background: #fff; color: var(--jp-navy); box-shadow: 0 1px 3px rgba(26,31,60,.14); } .jp-nav-a.is-off { opacity: .45; cursor: default; } .jp-nav-out { margin-left: auto; font-size: 12.5px; color: var(--jp-muted); text-decoration: none; } .jp-h1 { font-family: Syne, Georgia, serif; font-weight: 800; font-size: clamp(22px, 4.5vw, 30px); line-height: 1.15; margin: 0 0 14px; } .jp-h2 { font-family: Syne, Georgia, serif; font-weight: 800; font-size: 17px; margin: 0 0 8px; } .jp-h3 { font-weight: 800; font-size: 14px; margin: 14px 0 6px; } .jp-hint { font-size: 13px; color: var(--jp-muted); margin: 0 0 8px; } .jp-muted { color: #A6ADBF; font-size: 13.5px; } .jp-muted-s { color: var(--jp-muted); font-size: 12px; } .jp-back { display: inline-block; font-size: 13.5px; text-decoration: none; color: var(--jp-muted); margin: 0 0 10px; } .jp-sect { background: #fff; border: 1.5px solid var(--jp-line); border-radius: 14px; padding: 14px 16px; margin: 0 0 14px; } /* ── overview cards ────────────────────────────────────────────────── */ .jp-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .jp-card { display: block; text-decoration: none; background: #fff; border: 1.5px solid var(--jp-line); border-radius: 14px; padding: 14px 16px; box-shadow: 0 8px 24px rgba(26,31,60,.05); transition: transform .08s, border-color .12s; } .jp-card:hover { transform: translateY(-2px); border-color: var(--jp-pink); } .jp-card-t { font-weight: 800; font-size: 16px; } .jp-card-s { font-size: 13px; color: var(--jp-muted); } .jp-card-when { margin-top: 6px; font-weight: 700; color: var(--jp-pink); font-size: 14px; } .jp-card-n { font-size: 12.5px; color: var(--jp-muted); margin-top: 2px; } /* ── detail head ───────────────────────────────────────────────────── */ .jp-head { margin: 0 0 14px; } .jp-head-meta { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 14.5px; color: var(--jp-muted); } .jp-head-meta span:nth-child(1) { color: var(--jp-navy); font-weight: 600; } .jp-head-contact { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13.5px; margin-top: 4px; } .jp-segs { display: inline-flex; gap: 3px; background: #EEF1F8; border-radius: 10px; padding: 3px; flex-wrap: wrap; } .jp-seg { border: 0; background: transparent; cursor: pointer; border-radius: 8px; padding: 7px 12px; font-size: 13.5px; font-weight: 700; color: var(--jp-muted); } .jp-seg.is-on { background: #fff; color: var(--jp-navy); box-shadow: 0 1px 3px rgba(26,31,60,.14); } .jp-btn { display: inline-block; text-decoration: none; border: 1.5px solid var(--jp-line); background: #fff; color: var(--jp-navy); border-radius: 10px; padding: 10px 16px; font-size: 14px; font-weight: 700; cursor: pointer; } .jp-btn:hover { border-color: #C7CEE0; } .jp-btn--go { background: var(--jp-pink); border-color: var(--jp-pink); color: #fff; } .jp-btn--go.is-off { opacity: .45; pointer-events: none; } .jp-btn--sm { padding: 6px 11px; font-size: 12.5px; } .jp-btn--danger { color: #B42318; border-color: #F6B4BF; } /* ── roster / students ─────────────────────────────────────────────── */ .jp-roster-g { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #A6ADBF; margin: 12px 0 4px; } .jp-student { border-bottom: 1px solid #F1F3F8; } .jp-student:last-child { border-bottom: 0; } .jp-student-btn, .jp-row-btn { width: 100%; text-align: left; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; background: transparent; border: 0; padding: 10px 6px; cursor: pointer; border-radius: 8px; } .jp-student-btn:hover, .jp-row-btn:hover { background: var(--jp-bg); } .jp-row-btn { border-bottom: 1px solid #F1F3F8; border-radius: 0; } .jp-student-name { font-weight: 700; font-size: 15px; } .jp-student-sub { font-size: 12.5px; color: var(--jp-muted); } .jp-student-band { font-size: 12px; color: var(--jp-pink); font-weight: 700; margin-left: auto; } .jp-tag { display: inline-block; background: #EEF1F8; color: var(--jp-muted); border-radius: 6px; padding: 2px 7px; font-size: 11px; font-weight: 700; } .jp-contact { display: flex; gap: 8px; flex-wrap: wrap; padding: 2px 6px 12px 36px; } .jp-contact-a { display: inline-block; text-decoration: none; background: var(--jp-bg); border: 1.5px solid var(--jp-line); border-radius: 999px; padding: 7px 13px; font-size: 14px; font-weight: 600; } .jp-contact-a:hover { border-color: var(--jp-pink); } .jp-student.is-open .jp-student-btn { background: var(--jp-bg); } /* ── repertoire ────────────────────────────────────────────────────── */ .jp-pieces { display: grid; gap: 6px; } .jp-piece { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--jp-line); border-radius: 10px; } .jp-piece-main { flex: 1 1 auto; min-width: 0; } .jp-piece-t { font-weight: 700; } .jp-piece-s { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; margin-top: 2px; } .jp-link { font-size: 13px; font-weight: 600; } .jp-form { background: var(--jp-bg); border: 1.5px solid var(--jp-line); border-radius: 12px; padding: 14px; margin-top: 10px; } .jp-field { display: block; margin-bottom: 10px; } .jp-field > span { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 4px; } .jp-input { width: 100%; border: 1.5px solid var(--jp-line); border-radius: 10px; padding: 10px 12px; font-size: 15px; background: #fff; color: var(--jp-navy); } .jp-score { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .jp-score-name { font-size: 13px; color: var(--jp-muted); } .jp-form-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; } .jp-spacer { flex: 1 1 auto; } .jp-err { background: #FEECEC; color: #B42318; border-radius: 9px; padding: 8px 10px; font-size: 13px; margin: 6px 0; } .jp-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; } .jp-filters .jp-input { flex: 1 1 220px; width: auto; } .jp-scroll { overflow-x: auto; } .jp-table { width: 100%; border-collapse: collapse; font-size: 14px; } .jp-table th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--jp-muted); padding: 8px 8px; border-bottom: 1.5px solid var(--jp-line); cursor: pointer; white-space: nowrap; } .jp-table td { padding: 9px 8px; border-bottom: 1px solid #F1F3F8; vertical-align: top; } .jp-td-links { white-space: nowrap; font-size: 16px; } .jp-td-links a { margin-right: 8px; text-decoration: none; } .jp-sort { color: var(--jp-pink); } .jp-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; } .jp-chip { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--jp-line); background: #fff; border-radius: 999px; padding: 6px 12px 6px 9px; font-size: 13.5px; font-weight: 700; cursor: pointer; color: var(--jp-navy); } .jp-chip b { background: #EEF1F8; border-radius: 999px; padding: 0 7px; font-size: 12px; } .jp-chip.is-on { background: var(--jp-navy); border-color: var(--jp-navy); color: #fff; } .jp-chip.is-on b { background: rgba(255,255,255,.2); } .jp-panel { margin-top: 12px; border-color: var(--jp-pink); } .jp-toasts { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 100001; display: flex; flex-direction: column; gap: 8px; align-items: center; } .jp-toast { background: #1A1F3C; color: #fff; border-radius: 11px; padding: 11px 16px; font-size: 13.5px; font-weight: 600; box-shadow: 0 10px 30px rgba(15,19,48,.28); transition: opacity .3s, transform .3s; } .jp-toast.is-bad { background: #B42318; } .jp-toast.is-out { opacity: 0; transform: translateY(6px); } @media (max-width: 560px) { .jp-student-band { margin-left: 0; width: 100%; } .jp-contact { padding-left: 6px; } .jp-piece { flex-wrap: wrap; } } .jp-msg-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .jp-wa-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 4px; border-bottom: 1px solid #F1F3F8; } textarea.jp-input { resize: vertical; min-height: 70px; } /* the hidden attribute must win over display:flex, or every contact shows at once */ .gamw-jpr [hidden] { display: none !important; } .jp-chips-lbl { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #A6ADBF; align-self: center; margin-right: 2px; } .jp-sect--link { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--jp-muted); } /* ── Theme-proofing: themes colour