/* Student dashboard home view: "Akademik Premium" skin. Every rule is scoped to .skorspm-student-dashboard--home. */ /* Tokens */ .skorspm-student-dashboard--home, .skorspm-student-dashboard--subject { --sdx-navy: #0B1F3A; --sdx-navy-2: #13305A; --sdx-navy-soft: #EEF2F8; --sdx-emerald: #0E9F7E; --sdx-emerald-deep: #0E7C67; --sdx-emerald-soft: #E6F6F1; --sdx-gold: #C99A2E; --sdx-gold-bright: #E9C46A; --sdx-gold-soft: #FBF3E0; --sdx-gold-ink: #7F5C10; --sdx-amber: #B86E0A; --sdx-amber-soft: #FFF3E3; --sdx-red: #C2412D; --sdx-red-soft: #FDECEC; --sdx-ink: #0F1B2D; --sdx-muted: #5B6B80; --sdx-line: #E4E9F1; --sdx-bg: #F3F5F9; --sdx-radius-xl: 20px; --sdx-radius-lg: 16px; --sdx-radius-md: 12px; --sdx-shadow: 0 1px 2px rgba(15, 27, 45, .04), 0 8px 24px -12px rgba(15, 27, 45, .10); --sdx-focus: 0 0 0 3px rgba(14, 159, 126, .35); grid-template-columns: minmax(0, 1fr); align-items: start; gap: 16px; margin: 16px auto; padding: 12px; border-radius: var(--sdx-radius-xl); background: var(--sdx-bg); color: var(--sdx-ink); } .skorspm-student-dashboard--home::before, .skorspm-student-dashboard--subject::before { content: none; } .skorspm-student-dashboard--home [hidden], .skorspm-student-dashboard--subject [hidden] { display: none !important; } /* Sticky offset below the theme's own sticky site header. Tune the 88px (set in the 1024px query) to the theme header height. */ .skorspm-student-dashboard--home, .skorspm-student-dashboard--subject { --skorspm-sticky-offset: 0px; } .skorspm-student-dashboard--home [id^="skorspm-sd-"] { scroll-margin-top: 88px; } .skorspm-student-dashboard--home :is(.skorspm-student-dashboard__avatar-button, .skorspm-student-dashboard__nickname-row button, .skorspm-daily-quest__button, .skorspm-daily-quest__refresh, .skorspm-daily-quest__task-link, .skorspm-student-dashboard__top-rank-marquee):focus-visible { outline: 3px solid var(--sdx-emerald); outline-offset: 2px; } /* Shell + shortcut nav */ .skorspm-student-dashboard--home .skorspm-student-dashboard__main { display: grid; gap: 16px; align-content: start; min-width: 0; } .skorspm-student-dashboard--home .skorspm-student-dashboard__shortcut-nav { position: sticky; top: 0; z-index: 20; display: flex; gap: 6px; padding: 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-radius: var(--sdx-radius-lg); background: var(--sdx-navy); box-shadow: var(--sdx-shadow); } .skorspm-student-dashboard--home .skorspm-student-dashboard__shortcut-nav::-webkit-scrollbar { display: none; } .skorspm-student-dashboard--home .skorspm-student-dashboard__shortcut-brand { display: none; align-items: center; gap: 10px; margin: 0 6px 14px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .1); color: #fff; } .skorspm-student-dashboard--home .skorspm-student-dashboard__shortcut-brand-mark { flex: 0 0 auto; width: 38px; height: 38px; padding: 9px; border-radius: var(--sdx-radius-md); background: linear-gradient(135deg, var(--sdx-emerald), var(--sdx-emerald-deep)); } .skorspm-student-dashboard--home .skorspm-student-dashboard__shortcut-brand strong { display: block; font-family: var(--sk-unified-font-heading, inherit); font-size: 1.1rem; font-weight: 800; line-height: 1.2; } .skorspm-student-dashboard--home .skorspm-student-dashboard__shortcut-brand small { display: block; margin-top: 2px; color: rgba(255, 255, 255, .72); font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .skorspm-student-dashboard--home .skorspm-student-dashboard__shortcut-link { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px; border-radius: var(--sdx-radius-md); color: rgba(255, 255, 255, .84); font-size: .92rem; font-weight: 700; text-decoration: none; white-space: nowrap; scroll-snap-align: start; } .skorspm-student-dashboard--home .skorspm-student-dashboard__shortcut-link:is(:hover, :focus) { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; } .skorspm-student-dashboard--home .skorspm-student-dashboard__shortcut-link:focus-visible { outline: 3px solid var(--sdx-gold-bright); outline-offset: -3px; } .skorspm-student-dashboard--home .skorspm-student-dashboard__shortcut-icon { flex: 0 0 auto; width: 20px; height: 20px; } .skorspm-student-dashboard--home .skorspm-student-dashboard__icon { display: block; width: 100%; height: 100%; } /* Cards */ .skorspm-student-dashboard--home .skorspm-student-dashboard__card { padding: clamp(16px, 2.5vw, 22px); border: 1px solid var(--sdx-line); border-radius: var(--sdx-radius-lg); background: #fff; box-shadow: var(--sdx-shadow); } .skorspm-student-dashboard--home .skorspm-student-dashboard__card h2 { margin: 0 0 4px; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); font-weight: 800; line-height: 1.3; letter-spacing: 0; color: var(--sdx-ink); } .skorspm-student-dashboard--home .skorspm-student-dashboard__subtext { margin: 0 0 14px; font-size: .9rem; color: var(--sdx-muted); } .skorspm-student-dashboard--home .skorspm-student-dashboard__card--welcome { display: grid; gap: 16px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; } /* Hero */ .skorspm-student-dashboard--home .skorspm-student-dashboard__hero { position: relative; z-index: 0; overflow: hidden; display: grid; gap: 16px; padding: clamp(18px, 3.4vw, 32px); border-radius: var(--sdx-radius-xl); background: linear-gradient(120deg, var(--sdx-navy) 0%, var(--sdx-navy-2) 55%, var(--sdx-emerald-deep) 120%); box-shadow: var(--sdx-shadow); color: #fff; } .skorspm-student-dashboard--home .skorspm-student-dashboard__hero::after { content: ""; position: absolute; z-index: -1; top: -45%; right: -12%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(14, 159, 126, .32), rgba(14, 159, 126, 0)); pointer-events: none; } .skorspm-student-dashboard--home .skorspm-student-dashboard__hero-identity { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 16px; } .skorspm-student-dashboard--home :is(.skorspm-student-dashboard__avatar-form, .skorspm-student-dashboard__avatar-row) { display: contents; } .skorspm-student-dashboard--home .skorspm-student-dashboard__avatar-thumbnail-wrap { grid-column: 1; grid-row: 1 / span 2; width: 76px; height: 76px; margin: 0; padding: 3px; border: 0; border-radius: 50%; background: conic-gradient(var(--sdx-gold-bright), var(--sdx-emerald), var(--sdx-gold-bright)); } .skorspm-student-dashboard--home .skorspm-student-dashboard__avatar-thumbnail { width: 100%; height: 100%; border: 2px solid var(--sdx-navy); border-radius: 50%; background: #fff; } .skorspm-student-dashboard--home .skorspm-student-dashboard__hero-copy { grid-column: 2; grid-row: 1; align-self: end; min-width: 0; } .skorspm-student-dashboard--home .skorspm-student-dashboard__hero-copy h2 { margin: 0 0 4px; color: #6EE7C8; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; } .skorspm-student-dashboard--home .skorspm-student-dashboard__hero-greeting { margin: 0; font-family: var(--sk-unified-font-heading, inherit); font-size: clamp(1.4rem, 1rem + 2vw, 2rem); font-weight: 800; line-height: 1.15; color: #fff; overflow-wrap: anywhere; } .skorspm-student-dashboard--home .skorspm-student-dashboard__avatar-controls { grid-column: 2; grid-row: 2; align-self: start; width: auto; } .skorspm-student-dashboard--home .skorspm-student-dashboard__avatar-file-label { color: rgba(255, 255, 255, .75); } .skorspm-student-dashboard--home .skorspm-student-dashboard__avatar-controls input[type='file'] { color: #fff; } .skorspm-student-dashboard--home .skorspm-student-dashboard__avatar-button { width: auto; min-height: 44px; margin: 0; padding: 8px 16px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font-size: .85rem; box-shadow: none; transform: none; } .skorspm-student-dashboard--home .skorspm-student-dashboard__avatar-button:is(:hover, :focus) { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .18); box-shadow: none; transform: none; } .skorspm-student-dashboard--home .skorspm-student-dashboard__avatar-status { max-width: none; margin: 6px 0 0; color: rgba(255, 255, 255, .85); font-size: .8rem; } .skorspm-student-dashboard--home .skorspm-student-dashboard__avatar-status[data-state='error'] { color: #FFB4A8; } /* Rank panel */ .skorspm-student-dashboard--home .skorspm-student-dashboard__exp-summary { order: 0; display: grid; grid-template-columns: 64px max-content minmax(0, 1fr); grid-template-areas: "img rank rank" "img exp token"; align-items: center; gap: 2px 16px; width: auto; min-width: 0; max-width: none; margin: 0; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--sdx-radius-lg); background: rgba(255, 255, 255, .06); text-align: left; } .skorspm-student-dashboard--home :is(.skorspm-student-dashboard__rank-image, .skorspm-student-dashboard__rank-fallback) { grid-area: img; width: 64px; height: 64px; } .skorspm-student-dashboard--home .skorspm-student-dashboard__rank-fallback { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .1); color: #fff; } .skorspm-student-dashboard--home .skorspm-student-dashboard__rank-text { grid-area: rank; margin: 0; color: var(--sdx-gold-bright); font-size: 1.15rem; font-weight: 800; } .skorspm-student-dashboard--home .skorspm-student-dashboard__exp-text { grid-area: exp; } .skorspm-student-dashboard--home .skorspm-student-dashboard__token-text { grid-area: token; } .skorspm-student-dashboard--home :is(.skorspm-student-dashboard__exp-text, .skorspm-student-dashboard__token-text) { margin: 0; color: rgba(255, 255, 255, .72); font-size: .78rem; } .skorspm-student-dashboard--home :is(.skorspm-student-dashboard__exp-text, .skorspm-student-dashboard__token-text) strong { color: #fff; font-size: 1.1rem; } /* Info tiles + nickname form */ .skorspm-student-dashboard--home .skorspm-student-dashboard__welcome-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .skorspm-student-dashboard--home .skorspm-student-dashboard__welcome-item { padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--sdx-radius-md); background: rgba(255, 255, 255, .06); } .skorspm-student-dashboard--home .skorspm-student-dashboard__welcome-item--parent-email { display: none; } .skorspm-student-dashboard--home .skorspm-student-dashboard__welcome-label { color: rgba(255, 255, 255, .68); font-size: .66rem; letter-spacing: .12em; } .skorspm-student-dashboard--home .skorspm-student-dashboard__welcome-value { color: #fff; font-size: .95rem; } .skorspm-student-dashboard--home .skorspm-student-dashboard__nickname-form { margin: 0; } .skorspm-student-dashboard--home .skorspm-student-dashboard__nickname-form p { margin: 0 0 6px; } .skorspm-student-dashboard--home .skorspm-student-dashboard__nickname-form label { color: rgba(255, 255, 255, .72); } .skorspm-student-dashboard--home .skorspm-student-dashboard__nickname-row { flex-direction: row; align-items: stretch; gap: 10px; } .skorspm-student-dashboard--home .skorspm-student-dashboard__nickname-row input[type='text'] { min-height: 44px; padding: 10px 14px; border: 1px solid transparent; border-radius: var(--sdx-radius-md); background: #fff; color: var(--sdx-ink); font-size: 1rem; } .skorspm-student-dashboard--home .skorspm-student-dashboard__nickname-row input[type='text']:focus { outline: 3px solid var(--sdx-gold-bright); outline-offset: 2px; border-color: transparent; } .skorspm-student-dashboard--home .skorspm-student-dashboard__nickname-row button { width: auto; min-height: 44px; padding: 10px 22px; border: 0; border-radius: var(--sdx-radius-md); background: linear-gradient(180deg, var(--sdx-gold-bright), var(--sdx-gold)); color: var(--sdx-navy); font-weight: 800; box-shadow: none; transform: none; } .skorspm-student-dashboard--home .skorspm-student-dashboard__nickname-row button:is(:hover, :focus) { background: var(--sdx-gold-bright); color: var(--sdx-navy); box-shadow: none; transform: none; } /* Daily Quest (renderer markup is frozen; CSS only) */ /* === Daily Quest "Quest Path" (rc22) === Home layout only (renderer 'layout' => 'home'); the base student-daily-quest.css stays untouched, so its spacing is neutralised here. Grid flows in DOM order so hidden blocks leave no gaps. */ .skorspm-student-dashboard--home .skorspm-daily-quest--home { --dq-blue: #2F5DB8; --dq-blue-soft: #EAF0FB; --dq-ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --dq-ico-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3Crect x='5' y='11' width='14' height='10' rx='2.5'/%3E%3C/svg%3E"); --dq-ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 11v6M12 7.5v.01' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); display: grid; gap: 14px; margin: 0; padding: 14px; border: 1px solid var(--sdx-line); border-radius: var(--sdx-radius-lg); background: #fff; box-shadow: var(--sdx-shadow); color: var(--sdx-ink); } .skorspm-student-dashboard--home .skorspm-daily-quest--home > * { margin: 0; } .skorspm-student-dashboard--home .skorspm-daily-quest--home svg { display: block; width: 100%; height: 100%; } /* Hero: header + progress ring */ .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__hero { position: relative; z-index: 0; overflow: hidden; display: grid; gap: 14px; padding: 16px; border-radius: var(--sdx-radius-md); background: linear-gradient(125deg, var(--sdx-navy) 0%, var(--sdx-navy-2) 58%, var(--sdx-emerald-deep) 130%); color: #fff; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__hero::after { content: ""; position: absolute; z-index: -1; top: -40%; right: -15%; width: 55%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(233, 196, 106, .22), rgba(233, 196, 106, 0)); pointer-events: none; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__header { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "badge title status" "badge sub sub"; align-items: start; gap: 2px 12px; } .skorspm-student-dashboard--home .skorspm-daily-quest--home :is(.skorspm-daily-quest__identity, .skorspm-daily-quest__identity > div) { display: contents; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__badge { grid-area: badge; width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: linear-gradient(135deg, var(--sdx-gold-bright), var(--sdx-gold)); color: #3A2A06; box-shadow: 0 6px 14px -6px rgba(201, 154, 46, .8); } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__title { grid-area: title; align-self: center; margin: 0; color: #fff; font-family: var(--sk-unified-font-heading, inherit); font-size: 1.04rem; font-weight: 800; line-height: 1.25; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__subtitle { grid-area: sub; color: rgba(255, 255, 255, .74); font-size: .8rem; line-height: 1.45; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__status { grid-area: status; padding: 5px 10px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .12); color: #fff; font-size: .68rem; font-weight: 800; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__status.is-accepted { border-color: rgba(233, 196, 106, .4); background: rgba(233, 196, 106, .16); color: var(--sdx-gold-bright); } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__status.is-completed { border-color: rgba(127, 227, 198, .35); background: rgba(52, 195, 160, .16); color: #7FE3C6; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__progress { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 14px; margin: 0; padding: 12px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; background: rgba(255, 255, 255, .07); } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__progress-head { display: grid; gap: 2px; margin: 0; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__progress-summary { color: #fff; font-size: .98rem; font-weight: 800; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__progress-message { color: rgba(255, 255, 255, .75); font-size: .78rem; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__progressbar { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__ring { position: relative; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--sdx-gold-bright) calc(var(--dq-pct, 0) * 1%), rgba(255, 255, 255, .14) 0); counter-reset: dq var(--dq-pct, 0); transition: opacity .15s ease; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--sdx-navy); } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__ring::after { content: counter(dq) "%"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: .9rem; font-weight: 800; } .skorspm-student-dashboard--home .skorspm-daily-quest--home[aria-busy="true"] .skorspm-daily-quest__ring { opacity: .6; } /* Quest path (round ladder) */ .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__path { display: grid; gap: 10px; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__path-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__path-title { color: var(--sdx-muted); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__ladder-meta { margin: 0; color: var(--sdx-muted); font-size: .72rem; font-weight: 700; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__ladder { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; overflow: visible; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__ladder-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--sdx-muted); font-size: .68rem; font-weight: 700; white-space: normal; opacity: 1; animation: none; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__ladder-step::after { content: ""; position: absolute; z-index: 0; top: 17px; left: calc(50% + 20px); right: calc(-50% + 20px); height: 3px; border-radius: 2px; background: var(--sdx-line); } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__ladder-step:last-child::after { content: none; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__ladder-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #F1F4F8; color: #94A3B8; font-size: .82rem; font-weight: 800; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__ladder-step-label { display: block; max-width: 100%; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__ladder-step.is-completed { color: var(--sdx-emerald-deep); } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__ladder-step.is-completed::after { background: var(--sdx-emerald); } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__ladder-step.is-completed .skorspm-daily-quest__ladder-dot { background: var(--sdx-emerald); } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__ladder-step:is(.is-completed, .is-locked) .skorspm-daily-quest__ladder-num { display: none; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__ladder-step.is-completed .skorspm-daily-quest__ladder-dot::before { content: ""; width: 16px; height: 16px; background: #fff; -webkit-mask: var(--dq-ico-check) center / contain no-repeat; mask: var(--dq-ico-check) center / contain no-repeat; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__ladder-step.is-locked .skorspm-daily-quest__ladder-dot::before { content: ""; width: 14px; height: 14px; background: #94A3B8; -webkit-mask: var(--dq-ico-lock) center / contain no-repeat; mask: var(--dq-ico-lock) center / contain no-repeat; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__ladder-step:is(.is-current, .is-available) { color: var(--sdx-navy); } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__ladder-step:is(.is-current, .is-available) .skorspm-daily-quest__ladder-dot { background: var(--sdx-navy); color: var(--sdx-gold-bright); box-shadow: 0 0 0 4px rgba(233, 196, 106, .35); } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__ladder-step.is-next { color: var(--sdx-gold-ink); } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__ladder-step.is-next .skorspm-daily-quest__ladder-dot { border: 2px dashed var(--sdx-gold); background: #fff; color: var(--sdx-gold-ink); } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__ladder-step.is-attention-target .skorspm-daily-quest__ladder-dot { animation: sd-dq-pulse 1.8s ease-out infinite; } /* Round brief */ .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__round { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid var(--sdx-line); border-left: 4px solid var(--sdx-gold); border-radius: 12px; background: #FBFCFE; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__round-kicker { margin: 0 0 2px; color: var(--sdx-gold-ink); font-size: .64rem; letter-spacing: .12em; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__round-title { color: var(--sdx-navy); font-size: .98rem; font-weight: 800; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__round-meta { margin: 2px 0 0; color: var(--sdx-muted); font-size: .74rem; font-weight: 700; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__bonus-wrap { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #EED9A4; border-radius: 999px; background: var(--sdx-gold-soft); color: var(--sdx-gold-ink); } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__bonus { margin: 0; padding: 0; border: 0; background: none; color: inherit; font-size: .74rem; font-weight: 800; white-space: normal; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__bonus-icon { flex: 0 0 13px; width: 13px; height: 13px; } /* Empty state */ .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__empty { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 0; border-radius: 12px; background: var(--sdx-navy-soft); color: var(--sdx-ink); font-size: .86rem; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__empty::before { content: ""; flex: 0 0 20px; height: 20px; background: var(--sdx-navy-2); -webkit-mask: var(--dq-ico-info) center / contain no-repeat; mask: var(--dq-ico-info) center / contain no-repeat; } /* Tasks: icon tile + copy laid out on the row grid (task-copy uses display: contents) */ .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__task-list { grid-template-columns: minmax(0, 1fr); gap: 10px; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__task { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "icon step" "icon head" "icon reason" ". link"; align-items: start; gap: 2px 12px; padding: 12px; border: 1px solid var(--sdx-line); border-radius: 14px; background: #fff; transition: transform .18s ease; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__task-copy { display: contents; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__task-marker { display: none; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__task-icon { grid-area: icon; display: grid; place-items: center; width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: var(--sdx-gold-soft); color: var(--sdx-gold-ink); } .skorspm-student-dashboard--home .skorspm-daily-quest--home .is-type-flashcard .skorspm-daily-quest__task-icon { background: var(--sdx-emerald-soft); color: var(--sdx-emerald-deep); } .skorspm-student-dashboard--home .skorspm-daily-quest--home .is-type-video .skorspm-daily-quest__task-icon { background: var(--dq-blue-soft); color: var(--dq-blue); } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__task-step { grid-area: step; color: var(--sdx-muted); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__task-head { grid-area: head; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 8px; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__task-head strong { color: var(--sdx-ink); font-size: .9rem; font-weight: 800; line-height: 1.3; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__task-status { padding: 3px 8px; border-radius: 999px; background: #F1F4F8; color: var(--sdx-muted); font-size: .64rem; font-weight: 800; white-space: nowrap; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__task-copy > p { grid-area: reason; margin: 2px 0 0; color: var(--sdx-muted); font-size: .76rem; line-height: 1.45; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__task-link { grid-area: link; justify-self: start; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 8px; padding: 8px 16px; border: 1.5px solid var(--sdx-emerald); border-radius: 999px; background: #fff; color: var(--sdx-emerald-deep); font-size: .82rem; font-weight: 800; text-decoration: none; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__task-link::after { content: "\2192"; content: "\2192" / ""; margin-left: 6px; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__task-link:hover { background: var(--sdx-emerald-soft); color: var(--sdx-emerald-deep); text-decoration: none; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__task.is-pending:nth-child(1 of .is-pending) { border-color: var(--sdx-emerald); box-shadow: 0 0 0 3px rgba(14, 159, 126, .14); } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__task.is-pending:nth-child(1 of .is-pending) .skorspm-daily-quest__task-link { border-color: var(--sdx-emerald-deep); background: var(--sdx-emerald-deep); color: #fff; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__task.is-completed { border-color: #BFE6D9; background: linear-gradient(90deg, var(--sdx-emerald-soft), #fff 70%); } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__task.is-completed .skorspm-daily-quest__task-icon { background: var(--sdx-emerald); color: #fff; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__task.is-completed .skorspm-daily-quest__task-icon svg { display: none; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__task.is-completed .skorspm-daily-quest__task-icon::after { content: ""; width: 20px; height: 20px; background: #fff; -webkit-mask: var(--dq-ico-check) center / contain no-repeat; mask: var(--dq-ico-check) center / contain no-repeat; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__task.is-completed .skorspm-daily-quest__task-head strong { color: #3D5A52; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__task.is-completed .skorspm-daily-quest__task-status { background: var(--sdx-emerald-deep); color: #fff; } /* Completion banner */ .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__completion { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "icon label" "icon msg"; align-items: center; gap: 2px 12px; padding: 14px; border: 1px solid #A7DCCB; border-radius: 14px; background: linear-gradient(120deg, #E6F6F1, #F4FBF8); } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__completion-icon { grid-area: icon; align-self: start; width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: var(--sdx-emerald-deep); color: #fff; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__completion strong { grid-area: label; margin: 0; color: var(--sdx-emerald-deep); font-family: var(--sk-unified-font-heading, inherit); font-size: .95rem; font-weight: 800; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__completion p { grid-area: msg; margin: 0; color: #2F5A4F; font-size: .8rem; } /* Footer + CTA */ .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__footer:not(:has(> :not([hidden]))) { display: none; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__footer { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 12px; border-top: 1px dashed var(--sdx-line); } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__footer-copy-wrap { justify-items: start; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__footer-copy { color: var(--sdx-muted); font-size: .8rem; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__refresh { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--sdx-line); border-radius: 999px; background: #fff; color: var(--sdx-navy); font-size: .76rem; font-weight: 800; text-decoration: none; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__refresh:hover { background: var(--sdx-navy-soft); color: var(--sdx-navy); } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__refresh:disabled { opacity: .6; cursor: wait; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__refresh-icon { flex: 0 0 14px; width: 14px; height: 14px; } .skorspm-student-dashboard--home .skorspm-daily-quest--home :is(.skorspm-daily-quest__form, .skorspm-daily-quest__button) { width: 100%; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__button { min-height: 52px; padding: 12px 20px; border: 0; border-radius: 12px; background: linear-gradient(180deg, #EFCF7C, #C99A2E); color: #1A1405; font-family: var(--sk-unified-font-heading, inherit); font-size: .98rem; font-weight: 800; box-shadow: 0 10px 22px -12px rgba(201, 154, 46, .9); } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__button:is(:hover, :focus-visible) { background: linear-gradient(180deg, #F3D98F, #D7AA3F); color: #1A1405; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__button:is(.is-disabled, :disabled) { background: #E2E8F0; color: #64748B; box-shadow: none; cursor: default; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__button.has-attention-pulse { animation: sd-dq-cta 1.8s ease-out infinite; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__button.has-attention-pulse:is(:hover, :focus-visible) { animation: none; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__button-icon { width: 20px; height: 20px; } @media (max-width: 359.98px) { .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__ladder-dot { width: 32px; height: 32px; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__ladder-step::after { top: 15px; left: calc(50% + 18px); right: calc(-50% + 18px); } } @media (min-width: 640px) { .skorspm-student-dashboard--home .skorspm-daily-quest--home { padding: 18px; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__hero { grid-template-columns: minmax(0, 1fr) 260px; align-items: center; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__title { font-size: 1.25rem; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__task { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "icon step link" "icon head link" "icon reason link"; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__task-link { align-self: center; justify-self: end; margin-top: 0; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__footer { flex-direction: row; align-items: center; justify-content: space-between; } .skorspm-student-dashboard--home .skorspm-daily-quest--home :is(.skorspm-daily-quest__form, .skorspm-daily-quest__button) { width: auto; } } @media (min-width: 1200px) { .skorspm-student-dashboard--home .skorspm-daily-quest--home { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px 20px; padding: 22px; } .skorspm-student-dashboard--home .skorspm-daily-quest--home > * { grid-column: 1 / -1; } .skorspm-student-dashboard--home .skorspm-daily-quest--home > .skorspm-daily-quest__path { grid-column: 1; } .skorspm-student-dashboard--home .skorspm-daily-quest--home > .skorspm-daily-quest__path + .skorspm-daily-quest__round { grid-column: 2; align-self: end; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__hero { grid-template-columns: minmax(0, 1fr) 300px; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__task-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__task { grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; grid-template-areas: "icon step" "icon head" "icon reason" "link link"; } .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__task-link { align-self: end; justify-self: stretch; margin-top: 10px; } } @keyframes sd-dq-pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(201, 154, 46, .45); } 65% { transform: scale(1.03); box-shadow: 0 0 0 10px rgba(201, 154, 46, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(201, 154, 46, 0); } } @keyframes sd-dq-cta { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(201, 154, 46, .5); } 65% { transform: scale(1.03); box-shadow: 0 0 0 14px rgba(201, 154, 46, 0); } } /* Subscribed subjects */ .skorspm-student-dashboard--home .skorspm-student-dashboard__subject-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 12px; } .skorspm-student-dashboard--home .skorspm-student-dashboard__subject-card { --sd-accent: #0E9F7E; border: 1px solid var(--sdx-line); border-top: 4px solid var(--sd-accent); border-radius: 14px; background: #fff; box-shadow: var(--sdx-shadow); transition: transform .15s ease; } .skorspm-student-dashboard--home .skorspm-student-dashboard__subject-card:nth-child(6n+2) { --sd-accent: #2F5DB8; } .skorspm-student-dashboard--home .skorspm-student-dashboard__subject-card:nth-child(6n+3) { --sd-accent: #C99A2E; } .skorspm-student-dashboard--home .skorspm-student-dashboard__subject-card:nth-child(6n+4) { --sd-accent: #7C3AED; } .skorspm-student-dashboard--home .skorspm-student-dashboard__subject-card:nth-child(6n+5) { --sd-accent: #C2412D; } .skorspm-student-dashboard--home .skorspm-student-dashboard__subject-card:nth-child(6n+6) { --sd-accent: #0E7490; } .skorspm-student-dashboard--home .skorspm-student-dashboard__subject-card-link { padding: 14px; } .skorspm-student-dashboard--home .skorspm-student-dashboard__subject-card-link:is(:hover, :focus-visible) { background: none; } .skorspm-student-dashboard--home .skorspm-student-dashboard__subject-card-link:focus-visible { outline: 3px solid var(--sdx-emerald); outline-offset: -3px; border-radius: 10px; } .skorspm-student-dashboard--home .skorspm-student-dashboard__subject-card h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; color: var(--sdx-ink); font-size: 1rem; } .skorspm-student-dashboard--home .skorspm-student-dashboard__subject-card h3::after { content: "\2192"; content: "\2192" / ""; flex: 0 0 24px; display: grid; place-items: center; height: 24px; border-radius: 50%; background: #F1F4F8; color: var(--sdx-muted); font-size: .8rem; } .skorspm-student-dashboard--home .skorspm-subject-metric-list { gap: 7px; } .skorspm-student-dashboard--home .skorspm-subject-metric-item { align-items: center; } .skorspm-student-dashboard--home .skorspm-subject-metric-icon { flex: 0 0 22px; width: 22px; height: 22px; margin: 0; padding: 3px; border-radius: 6px; background: var(--sdx-bg); color: var(--sd-accent); } .skorspm-student-dashboard--home .skorspm-subject-metric-icon svg { width: 16px; height: 16px; } .skorspm-student-dashboard--home .skorspm-subject-metric-text { color: var(--sdx-muted); font-size: 11.5px; line-height: 1.35; } .skorspm-student-dashboard--home .skorspm-subject-metric-text strong { color: var(--sdx-ink); font-size: 13px; } .skorspm-student-dashboard--home .skorspm-student-dashboard__quiz-meta--guard { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--sdx-amber-soft); color: #8A4B05; font-size: .78rem; } /* Progress trends + Top 50 */ .skorspm-student-dashboard--home .skorspm-student-dashboard__progress-grid--trends { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .skorspm-student-dashboard--home .skorspm-progress-card { --sd-ring: #94A3B8; --sd-ring-soft: #F1F5F9; --sd-ring-ink: #475569; --sk-progress-accent: var(--sd-ring); --sk-progress-status-bg: var(--sd-ring-soft); --sk-progress-status-text: var(--sd-ring-ink); --sk-progress-track: #EEF2F7; gap: 10px; padding: 14px 12px; border: 1px solid var(--sdx-line); border-radius: 14px; background: #fff; box-shadow: none; text-align: center; } .skorspm-student-dashboard--home .skorspm-progress-card--status-needs-practice { --sd-ring: var(--sdx-red); --sd-ring-soft: var(--sdx-red-soft); --sd-ring-ink: #9B2C1C; } .skorspm-student-dashboard--home .skorspm-progress-card--status-keep-going { --sd-ring: var(--sdx-amber); --sd-ring-soft: var(--sdx-amber-soft); --sd-ring-ink: #8A4B05; } .skorspm-student-dashboard--home .skorspm-progress-card--status-good-progress { --sd-ring: var(--sdx-emerald); --sd-ring-soft: var(--sdx-emerald-soft); --sd-ring-ink: var(--sdx-emerald-deep); } .skorspm-student-dashboard--home .skorspm-progress-card--status-excellent { --sd-ring: var(--sdx-gold); --sd-ring-soft: var(--sdx-gold-soft); --sd-ring-ink: var(--sdx-gold-ink); } .skorspm-student-dashboard--home .skorspm-progress-card__title { color: var(--sdx-ink); font-size: .9rem; } .skorspm-student-dashboard--home .skorspm-progress-card__attempts { padding: 0; border: 0; background: none; box-shadow: none; color: var(--sdx-muted); font-size: .72rem; } .skorspm-student-dashboard--home .skorspm-progress-card__ring { align-content: center; width: 100px; height: 100px; max-width: 100%; background: conic-gradient(var(--sd-ring) calc(var(--average-score) * 1%), #EEF2F7 0); box-shadow: none; } .skorspm-student-dashboard--home .skorspm-progress-card__ring::after { inset: 10px; background: #fff; box-shadow: none; } .skorspm-student-dashboard--home .skorspm-progress-card__score { color: var(--sdx-ink); font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem); } .skorspm-student-dashboard--home .skorspm-progress-card__score-label { margin-top: 2px; color: var(--sdx-muted); font-size: .62rem; } .skorspm-student-dashboard--home .skorspm-progress-card__bar-row { color: var(--sdx-muted); font-size: .8rem; } .skorspm-student-dashboard--home .skorspm-progress-card__bar-value { color: var(--sdx-ink); } .skorspm-student-dashboard--home .skorspm-progress-card__bar-track { height: 6px; box-shadow: none; } .skorspm-student-dashboard--home .skorspm-progress-card__footer { justify-items: center; gap: 6px; } .skorspm-student-dashboard--home .skorspm-progress-card__status { justify-self: center; padding: 4px 12px; border: 0; font-size: .75rem; } .skorspm-student-dashboard--home .skorspm-progress-card__footer p { color: var(--sdx-muted); font-size: .72rem; } .skorspm-student-dashboard--home .skorspm-student-dashboard__progress-card--top-rank { grid-column: 1 / -1; padding: 16px; border: 0; border-radius: var(--sdx-radius-lg); background: linear-gradient(160deg, var(--sdx-navy) 0%, var(--sdx-navy-2) 100%); color: #fff; } .skorspm-student-dashboard--home .skorspm-student-dashboard__progress-card--top-rank > strong { color: #fff; font-size: .95rem; } .skorspm-student-dashboard--home .skorspm-student-dashboard__top-rank-marquee { height: 260px; border-color: rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); } .skorspm-student-dashboard--home .skorspm-student-dashboard__top-rank-list { counter-reset: sd-rank; gap: 0; padding: 4px 12px; } .skorspm-student-dashboard--home .skorspm-student-dashboard__top-rank-item { counter-increment: sd-rank; padding: 10px 0; border-bottom-color: rgba(255, 255, 255, .08); } .skorspm-student-dashboard--home .skorspm-student-dashboard__top-rank-item::before { content: counter(sd-rank); flex: 0 0 20px; color: var(--sdx-gold-bright); font-size: .85rem; font-weight: 800; } .skorspm-student-dashboard--home .skorspm-student-dashboard__top-rank-avatar { flex: 0 0 32px; width: 32px; height: 32px; border-color: rgba(255, 255, 255, .2); } .skorspm-student-dashboard--home .skorspm-student-dashboard__top-rank-meta { flex: 1 1 auto; } .skorspm-student-dashboard--home .skorspm-student-dashboard__top-rank-name { color: #fff; font-size: .82rem; } .skorspm-student-dashboard--home .skorspm-student-dashboard__top-rank-exp { margin-left: auto; color: rgba(255, 255, 255, .7); font-size: .72rem; } .skorspm-student-dashboard--home .skorspm-student-dashboard__top-rank-exp strong { color: var(--sdx-gold-bright); font-size: .85rem; } .skorspm-student-dashboard--home .skorspm-student-dashboard__top-rank-rank { color: rgba(255, 255, 255, .6); } .skorspm-student-dashboard--home .skorspm-student-dashboard__top-rank-empty { color: rgba(255, 255, 255, .8); } .skorspm-student-dashboard--home .skorspm-student-dashboard__top-rank-quote { border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .82); } /* Progress summary chart */ .skorspm-student-dashboard--home .skorspm-student-dashboard__summary-chart-svg { padding: 8px 0; border: 0; background: none; } .skorspm-student-dashboard--home .skorspm-student-dashboard__summary-chart-grid { stroke: var(--sdx-line); stroke-dasharray: 4 4; } .skorspm-student-dashboard--home .skorspm-student-dashboard__summary-chart-axis { stroke: #CBD5E1; } .skorspm-student-dashboard--home :is(.skorspm-student-dashboard__summary-chart-axis-label, .skorspm-student-dashboard__summary-chart-caption) { fill: var(--sdx-muted); } .skorspm-student-dashboard--home .skorspm-student-dashboard__summary-chart-line { stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .skorspm-student-dashboard--home .skorspm-student-dashboard__summary-chart-point { stroke: #fff; stroke-width: 2; } .skorspm-student-dashboard--home .skorspm-student-dashboard__summary-legend { display: flex; flex-wrap: wrap; gap: 8px; } .skorspm-student-dashboard--home .skorspm-student-dashboard__summary-legend-item { align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--sdx-line); border-radius: 14px; background: #fff; } .skorspm-student-dashboard--home .skorspm-student-dashboard__summary-legend-swatch { width: 10px; height: 10px; margin: 0; border: 0; } .skorspm-student-dashboard--home .skorspm-student-dashboard__summary-legend-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: .78rem; } .skorspm-student-dashboard--home .skorspm-student-dashboard__summary-legend-copy strong { margin: 0; color: var(--sdx-ink); } .skorspm-student-dashboard--home .skorspm-student-dashboard__summary-legend-copy p { margin: 0; color: var(--sdx-muted); } /* Recent attempts */ .skorspm-student-dashboard--home .skorspm-student-dashboard__history-item--recent-attempt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 12px 14px; border: 1px solid var(--sdx-line); border-radius: var(--sdx-radius-md); background: linear-gradient(90deg, var(--sdx-emerald-soft) var(--skorspm-attempt-correct-stop), #fff var(--skorspm-attempt-correct-stop)); } .skorspm-student-dashboard--home .skorspm-student-dashboard__history-item--recent-attempt::before { content: none; } .skorspm-student-dashboard--home .skorspm-student-dashboard__history-item p { margin: 2px 0 0; color: var(--sdx-muted); font-size: .8rem; } .skorspm-student-dashboard--home .skorspm-student-dashboard__history-header { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px 8px; margin: 0; } .skorspm-student-dashboard--home .skorspm-student-dashboard__history-title { color: var(--sdx-ink); font-size: .92rem; } .skorspm-student-dashboard--home .skorspm-student-dashboard__history-badge { padding: 3px 8px; border: 0; background: var(--sdx-navy-soft); color: var(--sdx-navy-2); font-size: .66rem; } .skorspm-student-dashboard--home .skorspm-student-dashboard__history-score { grid-column: 2; grid-row: 1 / span 3; display: grid; justify-items: center; min-width: 62px; padding: 6px 10px; border: 1px solid var(--sdx-line); border-radius: 10px; background: #fff; line-height: 1.15; } .skorspm-student-dashboard--home .skorspm-student-dashboard__history-score-value { color: var(--sdx-ink); font-size: 1.05rem; font-weight: 800; } .skorspm-student-dashboard--home .skorspm-student-dashboard__history-score-meta { color: var(--sdx-muted); font-size: .7rem; } /* Notices */ .skorspm-student-dashboard--home .skorspm-student-dashboard__notice { margin: 0; padding: 12px 16px; border: 1px solid #F5C2BA; border-radius: var(--sdx-radius-md); background: var(--sdx-red-soft); color: #8E2A1B; box-shadow: none; } .skorspm-student-dashboard--home .skorspm-student-dashboard__notice--success { border-color: #B7E4D6; background: var(--sdx-emerald-soft); color: #0B5E4E; } /* Responsive (base = phone) */ @media (max-width: 379px) { .skorspm-student-dashboard--home .skorspm-student-dashboard__welcome-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 359px) { .skorspm-student-dashboard--home .skorspm-student-dashboard__nickname-row { flex-wrap: wrap; } .skorspm-student-dashboard--home .skorspm-student-dashboard__nickname-row button { flex: 1 1 100%; } } @media (hover: hover) { .skorspm-student-dashboard--home .skorspm-student-dashboard__subject-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(15, 27, 45, .06), 0 14px 28px -12px rgba(15, 27, 45, .22); } } @media (min-width: 600px) { .skorspm-student-dashboard--home .skorspm-student-dashboard__shortcut-nav { top: calc(var(--skorspm-sticky-offset) + var(--wp-admin--admin-bar--height, 0px)); } } @media (min-width: 640px) { .skorspm-student-dashboard--home { padding: 16px; } .skorspm-student-dashboard--home .skorspm-student-dashboard__hero { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .skorspm-student-dashboard--home :is(.skorspm-student-dashboard__welcome-grid, .skorspm-student-dashboard__nickname-form) { grid-column: 1 / -1; } } @media (min-width: 760px) { .skorspm-student-dashboard--home .skorspm-student-dashboard__welcome-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .skorspm-student-dashboard--home .skorspm-student-dashboard__subject-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .skorspm-student-dashboard--home .skorspm-student-dashboard__progress-grid--trends { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .skorspm-student-dashboard--home, .skorspm-student-dashboard--subject { --skorspm-sticky-offset: 88px; } .skorspm-student-dashboard--home .skorspm-student-dashboard__shortcut-nav { position: static; } } @media (min-width: 1200px) { .skorspm-student-dashboard--home { grid-template-columns: 232px minmax(0, 1fr); gap: 20px; padding: 20px; } .skorspm-student-dashboard--home .skorspm-student-dashboard__shortcut-nav { position: sticky; top: calc(var(--skorspm-sticky-offset) + var(--wp-admin--admin-bar--height, 0px) + 24px); flex-direction: column; gap: 4px; padding: 20px 12px; overflow: visible; border-radius: var(--sdx-radius-xl); background: linear-gradient(180deg, var(--sdx-navy) 0%, var(--sdx-navy-2) 100%); } .skorspm-student-dashboard--home .skorspm-student-dashboard__shortcut-brand { display: flex; } .skorspm-student-dashboard--home .skorspm-student-dashboard__shortcut-link { white-space: normal; } .skorspm-student-dashboard--home .skorspm-student-dashboard__progress-grid--trends { grid-template-columns: repeat(4, minmax(0, 1fr)); } .skorspm-student-dashboard--home .skorspm-student-dashboard__progress-card--top-rank { grid-column: auto; } .skorspm-student-dashboard--home .skorspm-student-dashboard__main { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } .skorspm-student-dashboard--home .skorspm-student-dashboard__main > * { grid-column: 1 / -1; } .skorspm-student-dashboard--home .skorspm-student-dashboard__main > .skorspm-student-dashboard__card--progress-summary { grid-column: 1; } .skorspm-student-dashboard--home .skorspm-student-dashboard__main > .skorspm-student-dashboard__card--recent-attempts { grid-column: 2; } } /* Reduced motion: stop the recoloured pulses and hover movement (the shared CSS already stops the Top 50 marquee). */ @media (prefers-reduced-motion: reduce) { .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__ladder-step.is-attention-target .skorspm-daily-quest__ladder-dot, .skorspm-student-dashboard--home .skorspm-daily-quest--home .skorspm-daily-quest__button.has-attention-pulse { animation: none; } .skorspm-student-dashboard--home :is(.skorspm-student-dashboard__subject-card, .skorspm-daily-quest__task, .skorspm-progress-card) { transition: none; } .skorspm-student-dashboard--home .skorspm-daily-quest--home :is(.skorspm-daily-quest__task, .skorspm-daily-quest__ring) { transition: none; } } /* === Subject view (rc20) === Scoped to .skorspm-student-dashboard--subject; tokens are shared with the home view above. PDF/video rules target only classes that the AJAX pagination HTML also contains. */ .skorspm-student-dashboard--subject { /* Mask icons (36x36 tile at 14% alpha + stroke glyph); tinted with background-color, so one data-URI serves every tone. */ --sd-ico-cards: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Crect width='36' height='36' rx='10' opacity='.14'/%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' transform='translate(8 8) scale(.84)'%3E%3Crect x='3' y='7' width='13' height='10' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-3'/%3E%3C/g%3E%3C/svg%3E"); --sd-ico-quiz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Crect width='36' height='36' rx='10' opacity='.14'/%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' transform='translate(8 8) scale(.84)'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9a2.5 2.5 0 0 1 4.9.8c0 1.7-2.4 2.2-2.4 3.7M12 17h.01'/%3E%3C/g%3E%3C/svg%3E"); --sd-ico-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Crect width='36' height='36' rx='10' opacity='.14'/%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' transform='translate(8 8) scale(.84)'%3E%3Cpath d='M6 3h8l5 5v13H6zM14 3v5h5M9 13h7M9 17h5'/%3E%3C/g%3E%3C/svg%3E"); --sd-ico-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Crect width='36' height='36' rx='10' opacity='.14'/%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' transform='translate(8 8) scale(.84)'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20V3H6.5A2.5 2.5 0 0 0 4 5.5zM4 19.5A2.5 2.5 0 0 0 6.5 22H20v-5'/%3E%3C/g%3E%3C/svg%3E"); --sd-ico-video: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Crect width='36' height='36' rx='10' opacity='.14'/%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' transform='translate(8 8) scale(.84)'%3E%3Crect x='2' y='5' width='15' height='14' rx='2'/%3E%3Cpath d='M17 10l5-3v10l-5-3'/%3E%3C/g%3E%3C/svg%3E"); } .skorspm-student-dashboard--subject :is(#skorspm-flashcard-section, #skorspm-video-section, [id^="skorspm-sd-"]) { scroll-margin-top: calc(var(--skorspm-sticky-offset) + var(--wp-admin--admin-bar--height, 0px) + 72px); } .skorspm-student-dashboard--subject :is(.skorspm-subject-dashboard__header-link a, .skorspm-student-dashboard__quiz-item a, .skorspm-flashcard-launch, .skorspm-subject-dashboard__icon-action, .skorspm-subject-dashboard__pagination-link, .skorspm-subject-dashboard__pagination-number, .skorspm-subject-dashboard__video-search-button, .skorspm-subject-dashboard__video-watch-button):focus-visible { outline: 3px solid var(--sdx-emerald); outline-offset: 2px; } /* Section cards + tones */ .skorspm-student-dashboard--subject .skorspm-student-dashboard__card { padding: clamp(16px, 2.5vw, 24px); border: 1px solid var(--sdx-line); border-radius: var(--sdx-radius-lg); background: #fff; box-shadow: var(--sdx-shadow); } .skorspm-student-dashboard--subject #skorspm-flashcard-section { --sd-tone: var(--sdx-emerald-deep); --sd-ico: var(--sd-ico-cards); background: linear-gradient(135deg, var(--sdx-emerald-soft), #fff 60%); } .skorspm-student-dashboard--subject .skorspm-quiz-section { --sd-tone: var(--sdx-gold); --sd-ico: var(--sd-ico-quiz); } .skorspm-student-dashboard--subject #skorspm-sd-pdf-qa { --sd-tone: #2F5DB8; --sd-ico: var(--sd-ico-doc); } .skorspm-student-dashboard--subject #skorspm-sd-pdf-notes { --sd-tone: #7C3AED; --sd-ico: var(--sd-ico-book); } .skorspm-student-dashboard--subject #skorspm-video-section { --sd-tone: var(--sdx-red); --sd-ico: var(--sd-ico-video); } .skorspm-student-dashboard--subject :is(#skorspm-flashcard-section, .skorspm-quiz-section, #skorspm-video-section, [id^="skorspm-sd-pdf-"] .skorspm-student-dashboard__card) h2 { display: flex; align-items: center; gap: 12px; } .skorspm-student-dashboard--subject :is(#skorspm-flashcard-section, .skorspm-quiz-section, #skorspm-video-section, [id^="skorspm-sd-pdf-"] .skorspm-student-dashboard__card) h2::before { content: ""; flex: 0 0 36px; height: 36px; background: var(--sd-tone); -webkit-mask: var(--sd-ico) center / 36px no-repeat; mask: var(--sd-ico) center / 36px no-repeat; } /* Hero */ .skorspm-student-dashboard--subject .skorspm-student-dashboard__subject-hero { position: relative; z-index: 0; padding: clamp(18px, 3.4vw, 32px); border: 0; border-radius: var(--sdx-radius-xl); background: linear-gradient(120deg, var(--sdx-navy) 0%, var(--sdx-navy-2) 55%, var(--sdx-emerald-deep) 120%); color: #fff; } .skorspm-student-dashboard--subject .skorspm-student-dashboard__subject-hero::after { content: ""; position: absolute; z-index: -1; top: -45%; right: -12%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(14, 159, 126, .32), rgba(14, 159, 126, 0)); pointer-events: none; } .skorspm-student-dashboard--subject .skorspm-subject-dashboard__header-link { margin: 0 0 14px; } .skorspm-student-dashboard--subject .skorspm-subject-dashboard__header-link a { min-height: 44px; padding: 10px 16px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font-size: .88rem; font-weight: 700; text-decoration: none; } .skorspm-student-dashboard--subject .skorspm-subject-dashboard__header-link a:is(:hover, :focus) { background: rgba(255, 255, 255, .18); color: #fff; text-decoration: none; } .skorspm-student-dashboard--subject .skorspm-student-dashboard__subject-hero-eyebrow { margin: 0 0 4px; color: #6EE7C8; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .skorspm-student-dashboard--subject .skorspm-student-dashboard__subject-hero h2 { margin: 0; color: #fff; font-size: clamp(1.5rem, 1.1rem + 2vw, 2.2rem); font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; } .skorspm-student-dashboard--subject .skorspm-student-dashboard__subject-hero-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; } .skorspm-student-dashboard--subject .skorspm-student-dashboard__subject-hero-stats li { margin: 0; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: .8rem; font-weight: 700; } /* Jump nav */ .skorspm-student-dashboard--subject .skorspm-student-dashboard__subject-jump { position: sticky; top: var(--skorspm-sticky-offset); z-index: 20; display: flex; gap: 6px; padding: 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; border: 1px solid var(--sdx-navy); border-radius: var(--sdx-radius-lg); background: #fff; box-shadow: var(--sdx-shadow); } .skorspm-student-dashboard--subject .skorspm-student-dashboard__subject-jump::-webkit-scrollbar { display: none; } .skorspm-student-dashboard--subject .skorspm-student-dashboard__subject-jump a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px; border-radius: var(--sdx-radius-md); color: var(--sdx-navy); font-size: .9rem; font-weight: 700; text-decoration: none; white-space: nowrap; scroll-snap-align: start; } .skorspm-student-dashboard--subject .skorspm-student-dashboard__subject-jump a:is(:hover, :focus) { background: var(--sdx-navy-soft); color: var(--sdx-navy); text-decoration: none; } .skorspm-student-dashboard--subject .skorspm-student-dashboard__subject-jump a:focus-visible { outline: 3px solid var(--sdx-emerald); outline-offset: -3px; } .skorspm-student-dashboard--subject .skorspm-student-dashboard__subject-jump .skorspm-student-dashboard__icon { display: block; flex: 0 0 18px; width: 18px; height: 18px; } /* Flashcard */ .skorspm-student-dashboard--subject .skorspm-flashcard-section__subheader { max-width: 70ch; } .skorspm-student-dashboard--subject #skorspm-flashcard-section .skorspm-student-dashboard__quiz-meta { display: inline-flex; margin: 10px 0 4px; padding: 4px 12px; border: 1px solid #A7DCCB; border-radius: 999px; background: var(--sdx-emerald-soft); color: var(--sdx-emerald-deep); font-size: .8rem; font-weight: 700; } .skorspm-student-dashboard--subject .skorspm-flashcard-launch { width: 100%; min-height: 48px; margin-top: 8px; } .skorspm-student-dashboard--subject .skorspm-flashcard-launch:not([disabled]) { padding: 12px 22px; border: 0; border-radius: 12px; background: var(--sdx-emerald-deep); color: #fff; font-weight: 800; box-shadow: none; transform: none; } .skorspm-student-dashboard--subject .skorspm-flashcard-launch:not([disabled]):is(:hover, :focus) { background: #0B6252; color: #fff; box-shadow: none; transform: none; } /* Quiz practice */ .skorspm-student-dashboard--subject .skorspm-student-dashboard__quiz-list { gap: 12px; } .skorspm-student-dashboard--subject .skorspm-student-dashboard__quiz-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px; border: 1px solid var(--sdx-line); border-radius: 14px; background: var(--sdx-bg); } .skorspm-student-dashboard--subject .skorspm-student-dashboard__quiz-item > strong { flex: 1 0 100%; color: var(--sdx-ink); font-size: 1.05rem; font-weight: 700; } .skorspm-student-dashboard--subject .skorspm-student-dashboard__quiz-item .skorspm-student-dashboard__quiz-meta { display: inline-flex; margin: 0; padding: 4px 10px; border: 1px solid var(--sdx-line); border-radius: 999px; background: #fff; color: var(--sdx-muted); font-size: 12px; } .skorspm-student-dashboard--subject .skorspm-student-dashboard__quiz-item .skorspm-student-dashboard__quiz-meta--guard { border-color: #F3D3A8; background: var(--sdx-amber-soft); color: #8A4B05; font-weight: 700; } .skorspm-student-dashboard--subject .skorspm-student-dashboard__quiz-item .skorspm-subject-dashboard__resource-actions { flex: 1 0 100%; gap: 10px; margin-top: 6px; } .skorspm-student-dashboard--subject .skorspm-student-dashboard__quiz-item :is(a, .skorspm-subject-dashboard__action-disabled) { flex: 1 1 100%; min-height: 48px; margin: 0; padding: 12px 18px; border-radius: 12px; font-size: .92rem; font-weight: 700; box-shadow: none; transform: none; } .skorspm-student-dashboard--subject .skorspm-student-dashboard__quiz-item a:nth-child(1) { border: 1.5px solid var(--sdx-emerald-deep); background: #fff; color: var(--sdx-emerald-deep); } .skorspm-student-dashboard--subject .skorspm-student-dashboard__quiz-item a:nth-child(1):is(:hover, :focus) { background: var(--sdx-emerald-soft); color: var(--sdx-emerald-deep); } .skorspm-student-dashboard--subject .skorspm-student-dashboard__quiz-item a:nth-child(2) { border: 0; background: linear-gradient(180deg, #E9C46A, #C99A2E); color: #2A1F05; } .skorspm-student-dashboard--subject .skorspm-student-dashboard__quiz-item a:nth-child(2):is(:hover, :focus) { background: linear-gradient(180deg, #F0D287, #E9C46A); color: #2A1F05; } .skorspm-student-dashboard--subject .skorspm-student-dashboard__quiz-item .skorspm-subject-dashboard__action-disabled { border: 1px solid var(--sdx-line); background: #EEF2F7; color: var(--sdx-muted); opacity: 1; cursor: not-allowed; } /* PDF lists (AJAX-safe) */ .skorspm-student-dashboard--subject .skorspm-subject-dashboard__pdf-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 56px; padding: 12px 14px; border: 1px solid var(--sdx-line); border-radius: 12px; background: #fff; transition: transform .15s ease; } .skorspm-student-dashboard--subject .skorspm-subject-dashboard__pdf-item::before { content: ""; width: 32px; height: 32px; background: var(--sd-tone); -webkit-mask: var(--sd-ico-doc) center / 32px no-repeat; mask: var(--sd-ico-doc) center / 32px no-repeat; } .skorspm-student-dashboard--subject .skorspm-subject-dashboard__pdf-item .skorspm-subject-dashboard__pdf-title { color: var(--sdx-ink); font-size: .92rem; font-weight: 700; } .skorspm-student-dashboard--subject .skorspm-subject-dashboard__pdf-actions { margin: 0; gap: 4px; } .skorspm-student-dashboard--subject .skorspm-subject-dashboard__icon-action { width: 44px; height: 44px; margin: 0; padding: 10px; border: 2px solid transparent; border-radius: 50%; background: var(--sdx-bg) padding-box; color: var(--sdx-navy-2); box-shadow: none; } .skorspm-student-dashboard--subject .skorspm-subject-dashboard__icon-action:is(:hover, :focus) { border-color: transparent; background-color: var(--sdx-navy-soft); color: var(--sd-tone); } /* Video (AJAX-safe) */ .skorspm-student-dashboard--subject .skorspm-subject-dashboard__video-toolbar { flex-direction: column; align-items: stretch; gap: 12px; margin: 0 0 14px; } .skorspm-student-dashboard--subject .skorspm-subject-dashboard__video-search-form { display: flex; width: 100%; margin: 0; padding: 0; gap: 0; border: 0; background: none; box-shadow: none; } .skorspm-student-dashboard--subject .skorspm-subject-dashboard__video-search-input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 10px 14px; border: 1px solid var(--sdx-line); border-right: 0; border-radius: 12px 0 0 12px; background: #fff; color: var(--sdx-ink); font-size: 1rem; box-shadow: none; } .skorspm-student-dashboard--subject .skorspm-subject-dashboard__video-search-input:focus { outline: 3px solid var(--sdx-emerald); outline-offset: 1px; border-color: var(--sdx-line); } .skorspm-student-dashboard--subject .skorspm-subject-dashboard__video-search-button { flex: 0 0 auto; height: 44px; padding: 0 18px; border: 0; border-radius: 0 12px 12px 0; background: var(--sdx-emerald-deep); color: #fff; box-shadow: none; } .skorspm-student-dashboard--subject .skorspm-subject-dashboard__video-search-button:is(:hover, :focus-visible) { background: #0B6252; box-shadow: none; } .skorspm-student-dashboard--subject .skorspm-subject-dashboard__video-list { grid-template-columns: minmax(0, 1fr); gap: 12px; } .skorspm-student-dashboard--subject .skorspm-subject-dashboard__video-item { padding: 12px; border: 1px solid var(--sdx-line); border-radius: 14px; background: #fff; } .skorspm-student-dashboard--subject .skorspm-subject-dashboard__video-row { flex-direction: column; align-items: flex-start; gap: 10px; } .skorspm-student-dashboard--subject .skorspm-subject-dashboard__video-actions a.skorspm-subject-dashboard__video-watch-button { padding: 2px; border-radius: 12px; } .skorspm-student-dashboard--subject .skorspm-subject-dashboard__video-watch-button img { border-radius: 10px; } .skorspm-student-dashboard--subject .skorspm-subject-dashboard__video-item .skorspm-subject-dashboard__video-title { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; color: var(--sdx-ink); font-size: .92rem; font-weight: 700; line-height: 1.35; } /* Pagination (PDF + video, AJAX-safe): 40px pills with a 44px hit area (2px transparent border). */ .skorspm-student-dashboard--subject .skorspm-subject-dashboard__pagination { justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding: 0; overflow: visible; } .skorspm-student-dashboard--subject .skorspm-subject-dashboard__pagination-pages { flex-wrap: wrap; justify-content: center; gap: 6px; } .skorspm-student-dashboard--subject :is(.skorspm-subject-dashboard__pagination-link, .skorspm-subject-dashboard__pagination-number) { min-width: 44px; height: 44px; padding: 0 14px; border: 2px solid transparent; border-radius: 999px; background: #fff padding-box; box-shadow: inset 0 0 0 1px var(--sdx-line); color: var(--sdx-navy); font-size: .85rem; font-weight: 700; white-space: nowrap; text-decoration: none; } .skorspm-student-dashboard--subject :is(.skorspm-subject-dashboard__pagination-link, .skorspm-subject-dashboard__pagination-number):hover { border-color: transparent; background-color: var(--sdx-navy-soft); text-decoration: none; } .skorspm-student-dashboard--subject .skorspm-subject-dashboard__pagination-number.is-current { background-color: var(--sdx-navy); box-shadow: none; color: #fff; } .skorspm-student-dashboard--subject .skorspm-subject-dashboard__pagination-link.is-disabled { color: #94A3B8; opacity: 1; } .skorspm-student-dashboard--subject .skorspm-subject-dashboard__pagination-ellipsis { color: var(--sdx-muted); } /* Access denied */ .skorspm-student-dashboard--subject .skorspm-student-dashboard__card--access-denied { border-left: 4px solid var(--sdx-red); background: var(--sdx-red-soft); text-align: center; } .skorspm-student-dashboard--subject .skorspm-student-dashboard__card--access-denied h2 { color: #9B2C1C; } /* Subject responsive (base = phone) */ @media (hover: hover) { .skorspm-student-dashboard--subject .skorspm-subject-dashboard__pdf-item:hover { border-color: var(--sd-tone); transform: translateY(-1px); } } @media (min-width: 600px) { .skorspm-student-dashboard--subject .skorspm-student-dashboard__subject-jump { top: calc(var(--skorspm-sticky-offset) + var(--wp-admin--admin-bar--height, 0px)); } } @media (min-width: 640px) { .skorspm-student-dashboard--subject { padding: 16px; } .skorspm-student-dashboard--subject .skorspm-flashcard-launch { width: auto; } .skorspm-student-dashboard--subject .skorspm-student-dashboard__quiz-item :is(a, .skorspm-subject-dashboard__action-disabled) { flex: 0 0 auto; } } @media (min-width: 760px) { .skorspm-student-dashboard--subject .skorspm-subject-dashboard__video-toolbar { flex-direction: row; align-items: center; } .skorspm-student-dashboard--subject .skorspm-subject-dashboard__video-search-form { flex: 0 1 380px; width: auto; } .skorspm-student-dashboard--subject .skorspm-subject-dashboard__video-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { .skorspm-student-dashboard--subject { max-width: 1120px; padding: 20px; } .skorspm-student-dashboard--subject .skorspm-subject-dashboard__video-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { .skorspm-student-dashboard--subject .skorspm-subject-dashboard__pdf-item { transition: none; } } /* === Phone polish (rc21) === Home view only. Toggles and the subject CTA appear only on phones once student-dashboard-accordion.js adds is-sd-acc-ready to the root; without JS (or from 640px) every panel stays open and the profile label buttons look like the old label spans. */ .skorspm-student-dashboard--home :is(.skorspm-student-dashboard__subject-toggle, .skorspm-student-dashboard__subject-open-cta, .skorspm-sd-acc__chevron) { display: none; } .skorspm-student-dashboard--home button.skorspm-student-dashboard__welcome-label { -webkit-appearance: none; appearance: none; width: auto; min-height: 0; margin: 0 0 4px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-family: inherit; line-height: inherit; text-align: left; text-shadow: none; cursor: default; } @media (max-width: 639.98px) { /* Full width: drop stacked gutters and break out of the theme content container. */ .skorspm-student-dashboard--home { box-sizing: border-box; width: 100vw; max-width: 100vw; margin: 8px calc(50% - 50vw); padding: 8px; border-radius: 0; } .skorspm-student-dashboard--home .skorspm-student-dashboard__main { gap: 12px; } .skorspm-student-dashboard--home .skorspm-student-dashboard__card:not(.skorspm-student-dashboard__card--welcome) { padding: 14px; border-radius: var(--sdx-radius-md); } /* Accordion contract */ .skorspm-student-dashboard--home.is-sd-acc-ready .skorspm-sd-acc__item:not(.is-open) > .skorspm-sd-acc__panel { display: none; } .skorspm-student-dashboard--home.is-sd-acc-ready .skorspm-sd-acc__toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; margin: 0; border: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; } .skorspm-student-dashboard--home.is-sd-acc-ready .skorspm-sd-acc__toggle:focus-visible { outline: 3px solid var(--sdx-emerald); outline-offset: -3px; } .skorspm-student-dashboard--home.is-sd-acc-ready .skorspm-sd-acc__chevron { position: relative; display: block; flex: 0 0 20px; width: 20px; height: 20px; transition: transform .15s ease; } .skorspm-student-dashboard--home.is-sd-acc-ready .skorspm-sd-acc__chevron::before { content: ""; position: absolute; top: 5px; left: 6px; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); } .skorspm-student-dashboard--home.is-sd-acc-ready .is-open > .skorspm-sd-acc__toggle .skorspm-sd-acc__chevron { transform: rotate(180deg); } /* Subscribed subjects */ .skorspm-student-dashboard--home .skorspm-student-dashboard__subject-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; } .skorspm-student-dashboard--home.is-sd-acc-ready .skorspm-student-dashboard__subject-toggle { padding: 12px 14px; color: var(--sdx-ink); } .skorspm-student-dashboard--home .skorspm-student-dashboard__subject-toggle-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; font-weight: 700; } .skorspm-student-dashboard--home.is-sd-acc-ready .skorspm-student-dashboard__subject-card-link { padding: 0 14px 12px; } .skorspm-student-dashboard--home.is-sd-acc-ready .skorspm-sd-acc__panel h3 { display: none; } .skorspm-student-dashboard--home .skorspm-student-dashboard__subject-card .skorspm-subject-metric-list { gap: 6px; } .skorspm-student-dashboard--home .skorspm-student-dashboard__subject-card .skorspm-subject-metric-text { font-size: .82rem; } .skorspm-student-dashboard--home.is-sd-acc-ready .skorspm-student-dashboard__subject-open-cta { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin-top: 10px; border-radius: 999px; background: var(--sdx-emerald-deep); color: #fff; font-size: .88rem; font-weight: 700; } /* Profile tiles */ .skorspm-student-dashboard--home .skorspm-student-dashboard__welcome-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; } .skorspm-student-dashboard--home.is-sd-acc-ready .skorspm-student-dashboard__welcome-item { padding: 0 12px; } .skorspm-student-dashboard--home.is-sd-acc-ready .skorspm-student-dashboard__welcome-label:focus-visible { outline-color: var(--sdx-gold-bright); outline-offset: 2px; } .skorspm-student-dashboard--home.is-sd-acc-ready .skorspm-student-dashboard__welcome-value { padding-bottom: 10px; overflow-wrap: anywhere; } /* Progress trends: one column of compact horizontal cards */ .skorspm-student-dashboard--home .skorspm-student-dashboard__progress-grid--trends { grid-template-columns: minmax(0, 1fr); gap: 10px; } .skorspm-student-dashboard--home .skorspm-progress-card { grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "head head" "ring bar" "ring foot"; align-items: center; gap: 6px 14px; padding: 12px; text-align: left; } .skorspm-student-dashboard--home .skorspm-progress-card__header { grid-area: head; } .skorspm-student-dashboard--home .skorspm-progress-card__ring { grid-area: ring; width: 76px; height: 76px; margin: 0; } .skorspm-student-dashboard--home .skorspm-progress-card__ring::after { inset: 8px; } .skorspm-student-dashboard--home .skorspm-progress-card__score { font-size: 1.05rem; } .skorspm-student-dashboard--home .skorspm-progress-card__bar { grid-area: bar; } .skorspm-student-dashboard--home .skorspm-progress-card__footer { grid-area: foot; justify-items: start; } .skorspm-student-dashboard--home .skorspm-progress-card__status { justify-self: start; } /* Student Lounge (embedded shoutbox only): cap the admin size vars instead of overriding them. */ .skorspm-student-dashboard--home .skorspm-shoutbox--embedded { padding: 12px; } .skorspm-student-dashboard--home .skorspm-shoutbox--embedded .skorspm-shoutbox__title { font-size: min(var(--shoutbox-title-size), 1.15rem); line-height: 1.25; } .skorspm-student-dashboard--home .skorspm-shoutbox--embedded .skorspm-shoutbox__notice { font-size: min(var(--shoutbox-notice-size), .75rem); line-height: 1.4; } .skorspm-student-dashboard--home .skorspm-shoutbox--embedded .skorspm-shoutbox__live { padding: .28rem .65rem; font-size: .7rem; } .skorspm-student-dashboard--home .skorspm-shoutbox--embedded .skorspm-shoutbox__feedback { font-size: .8rem; } .skorspm-student-dashboard--home .skorspm-shoutbox--embedded .skorspm-shoutbox__online { padding: .65rem .75rem; } .skorspm-student-dashboard--home .skorspm-shoutbox--embedded .skorspm-shoutbox__online-title { font-size: .88rem; } .skorspm-student-dashboard--home .skorspm-shoutbox--embedded .skorspm-shoutbox__online-student { grid-template-columns: 32px minmax(0, 1fr); } .skorspm-student-dashboard--home .skorspm-shoutbox--embedded :is(.skorspm-shoutbox__online-name, .skorspm-shoutbox__name, .skorspm-shoutbox__pinned-name) { font-size: .84rem; } .skorspm-student-dashboard--home .skorspm-shoutbox--embedded :is(.skorspm-shoutbox__text, .skorspm-shoutbox__pinned-line) { font-size: .86rem; line-height: 1.45; } .skorspm-student-dashboard--home .skorspm-shoutbox--embedded .skorspm-shoutbox__badge { padding: .2rem .45rem; font-size: .62rem; } .skorspm-student-dashboard--home .skorspm-shoutbox--embedded .skorspm-shoutbox__message { grid-template-columns: 32px minmax(0, 1fr); padding: .6rem .7rem; } .skorspm-student-dashboard--home .skorspm-shoutbox--embedded :is(.skorspm-shoutbox__avatar, .skorspm-shoutbox__online-avatar) { width: 32px; height: 32px; } .skorspm-student-dashboard--home .skorspm-shoutbox--embedded .skorspm-shoutbox__pinned-card { padding: .6rem .75rem; } .skorspm-student-dashboard--home .skorspm-shoutbox--embedded .skorspm-shoutbox__send { min-height: 44px; font-size: .82rem; } .skorspm-student-dashboard--home .skorspm-shoutbox--embedded .skorspm-shoutbox__input { font-size: 16px; } /* Recent attempts: slimmer rows; the marks line stays for screen readers (the score box is aria-hidden). */ .skorspm-student-dashboard--home .skorspm-student-dashboard__history-list--recent-attempts { gap: 6px; } .skorspm-student-dashboard--home .skorspm-student-dashboard__history-item--recent-attempt { column-gap: 10px; padding: 8px 10px; border-radius: 10px; } .skorspm-student-dashboard--home .skorspm-student-dashboard__history-title { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .84rem; font-weight: 700; } .skorspm-student-dashboard--home .skorspm-student-dashboard__history-badge { padding: 2px 6px; font-size: .6rem; } .skorspm-student-dashboard--home .skorspm-student-dashboard__history-item .skorspm-student-dashboard__history-date { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; } .skorspm-student-dashboard--home .skorspm-student-dashboard__history-item .skorspm-student-dashboard__history-marks { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skorspm-student-dashboard--home .skorspm-student-dashboard__history-score { min-width: 50px; padding: 4px 6px; border-radius: 8px; } .skorspm-student-dashboard--home .skorspm-student-dashboard__history-score-value { font-size: .9rem; } .skorspm-student-dashboard--home .skorspm-student-dashboard__history-score-meta { font-size: .62rem; } } @media (max-width: 639.98px) and (prefers-reduced-motion: reduce) { .skorspm-student-dashboard--home.is-sd-acc-ready .skorspm-sd-acc__chevron { transition: none; } }