:root{ --ink:#11120f; --muted:#706c66; --soft:#f4f0e8; --paper:#fffdf8; --line:#ded8cc; --green:#dcecdf; --green-strong:#2f604f; --blue:#dceafb; --blue-strong:#426fa8; --yellow:#f6edbd; --yellow-strong:#a27324; --red:#f4d8d3; --red-strong:#9b4d4b; --shadow:0 18px 55px rgba(30,27,20,.11); --radius:28px; --radius-sm:18px; } *{box-sizing:border-box} html{min-height:100%; -webkit-text-size-adjust:100%} body{margin:0; min-height:100%; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC","Microsoft YaHei",Arial,sans-serif; color:var(--ink); background:#ebe9e1;} a{color:inherit; text-decoration:none} button,input,textarea,select{font:inherit} img{max-width:100%} .page-bg{min-height:100vh; padding:calc(env(safe-area-inset-top) + 18px) 14px calc(env(safe-area-inset-bottom) + 90px); background:radial-gradient(circle at top left,#fff8e4 0,#ebe9e1 32%,#f7f5ef 100%)} .app-shell{width:100%; max-width:760px; margin:0 auto}.wide-shell{max-width:1180px}.home-shell{max-width:1080px}.print-shell{max-width:900px} .eyebrow{margin:0 0 8px; letter-spacing:.18em; text-transform:uppercase; font-weight:800; font-size:12px; color:var(--green-strong)} h1,h2,h3,p{margin-top:0} h1{font-size:clamp(32px,7vw,58px); line-height:1.02; letter-spacing:-.05em; margin-bottom:12px} h2{font-size:24px; letter-spacing:-.03em} h3{font-size:18px; letter-spacing:-.02em}.lead{font-size:18px; line-height:1.65; color:#615f58}.muted{color:var(--muted); line-height:1.65}.body-text{line-height:1.8}.ok-text{color:#276246;font-weight:800}.warn-text{color:#9a4a2f;font-weight:800}.feedback-text{background:#fff8df;border-radius:16px;padding:12px;line-height:1.7} .message-stack{position:sticky; top:10px; z-index:40; display:grid; gap:8px; margin-bottom:14px}.message{border:1px solid var(--line); background:#fff; padding:12px 14px; border-radius:16px; box-shadow:var(--shadow); font-weight:700}.message.success{border-color:#b8d8c0}.message.error{border-color:#e3b2a8} .btn{border:0; border-radius:999px; padding:14px 20px; min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--ink); color:#fff; font-weight:900; cursor:pointer; box-shadow:none}.btn.primary{background:var(--green-strong)}.btn.secondary{background:#fff; color:var(--ink); border:1.5px solid var(--ink)}.btn.ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line)}.btn.compact{min-height:38px; padding:9px 15px; font-size:14px}.btn.full{width:100%}.btn:disabled{opacity:.4; cursor:not-allowed}.button-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px}.button-row.vertical{flex-direction:column; align-items:stretch}.compact-gap{gap:8px}.text-link,.small-link{font-weight:900; color:var(--green-strong)}.small-link{white-space:nowrap} .home-hero{background:var(--paper); border-radius:42px; padding:22px; min-height:calc(100vh - 70px); display:grid; gap:28px; box-shadow:var(--shadow); overflow:hidden}.hero-art{position:relative; min-height:360px; border-radius:34px; background:linear-gradient(180deg,#e7eed7,#f5e37e); overflow:hidden}.art-card{position:absolute; background:var(--green-strong)}.art-main{right:-44px; top:70px; width:70%; height:42%; border-radius:40px 0 0 40px}.art-small{left:70px; bottom:58px; width:45%; height:24%; border-radius:30px; background:#fff; transform:rotate(16deg); opacity:.96}.art-dot{position:absolute; top:120px; left:42%; width:120px; height:120px; border-radius:50%; background:#f5b982}.art-pill{position:absolute; left:42%; bottom:78px; padding:20px 54px; border:1px solid rgba(255,255,255,.8); border-radius:999px; background:rgba(255,255,255,.28); color:#fff; font-weight:900}.hero-copy{padding:4px 8px 22px; text-align:center}.entry-grid{display:grid; gap:12px; margin-top:28px}.entry-card{display:block; text-align:left; padding:22px; border-radius:26px; background:#f1ede5; border:1.5px solid transparent}.entry-card.primary{background:var(--green-strong); color:#fff}.entry-card span{display:block; font-size:22px; font-weight:950; letter-spacing:-.03em}.entry-card small{display:block; margin-top:8px; color:inherit; opacity:.72; line-height:1.5} .auth-card,.simple-card,.rule-card,.progress-card,.wizard-card{background:rgba(255,253,248,.96); border:1px solid rgba(0,0,0,.08); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}.auth-card{max-width:460px; margin:6vh auto}.narrow{max-width:620px}.form-stack{display:grid; gap:12px}.form-stack p{display:grid; gap:6px}.form-stack label,label{font-weight:900}.form-stack input,.form-stack textarea,.form-stack select,.search-bar input,.search-bar select,.filter-panel input,.filter-panel select,.bulk-actions input,.bulk-actions select,.form-grid input,.form-grid textarea,.form-grid select{width:100%; border:1.5px solid var(--line); border-radius:18px; padding:14px 16px; min-height:50px; background:#fff; color:var(--ink)}textarea{resize:vertical}.errorlist{margin:0; padding:10px 14px; border-radius:14px; background:#fff1ed; color:#9a3d28; font-weight:700; list-style:none}.field-error{color:#9a3d28}.form-grid{display:grid; gap:14px}.form-grid.two{grid-template-columns:1fr}.mobile-header,.desktop-header{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin:8px 0 20px}.mobile-header.compact{margin-bottom:10px}.desktop-header{align-items:center}.desktop-header h1,.mobile-header h1{margin-bottom:4px} .subject-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}.subject-card{position:relative; min-height:142px; padding:22px; border-radius:28px; overflow:hidden; border:1px solid rgba(0,0,0,.08); box-shadow:var(--shadow)}.subject-card span{display:block; font-size:22px; font-weight:950}.subject-card strong{display:block; margin-top:20px; font-size:42px; line-height:1}.subject-card small{display:block; margin-top:8px; color:rgba(0,0,0,.58); font-weight:700}.subject-card:after{content:""; position:absolute; right:-18px; bottom:-24px; width:100px; height:100px; border-radius:30px; background:rgba(255,255,255,.45)}.subject-en{background:var(--green)}.subject-math{background:var(--blue)}.subject-sci{background:var(--yellow)}.subject-ap{background:var(--red)}.subject-neutral{background:#f4f0e8}.subject-en .btn.primary{background:var(--green-strong)}.subject-math .btn.primary{background:var(--blue-strong)}.subject-sci .btn.primary{background:var(--yellow-strong)}.subject-ap .btn.primary{background:var(--red-strong)} .h-scroll{display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; -webkit-overflow-scrolling:touch}.chip,.status-pill{display:inline-flex; align-items:center; justify-content:center; border:1.5px solid var(--ink); border-radius:999px; min-height:42px; padding:10px 16px; white-space:nowrap; font-weight:900; background:#fff}.chip.active,.status-pill{background:var(--ink); color:#fff}.status-pill.warn{background:#fff1dd; color:#8b531b; border-color:#edc789}.search-bar{display:flex; gap:10px; margin:16px 0}.wide-search{max-width:720px}.filter-panel{display:grid; grid-template-columns:1fr; gap:10px; margin:16px 0; padding:14px; border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.7)} .card-list{display:grid; gap:14px}.spacious{margin-top:16px}.assignment-card,.teacher-card,.review-card,.student-progress-card{position:relative; display:flex; justify-content:space-between; align-items:flex-start; gap:16px; border:1px solid rgba(0,0,0,.08); border-radius:26px; padding:18px; box-shadow:0 10px 28px rgba(30,27,20,.08); overflow:hidden}.assignment-card.large{display:block}.assignment-card h3,.teacher-card h2,.review-card h2,.student-progress-card h2{margin-bottom:8px}.tag{font-size:13px; font-weight:950; color:rgba(0,0,0,.56); margin-bottom:8px}.line-clamp{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; line-height:1.6}.card-actions{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:14px}.empty-card{border:1.5px dashed var(--line); border-radius:24px; padding:24px; background:rgba(255,255,255,.55); color:var(--muted); font-weight:800}.section-block{margin-top:24px}.section-title{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}.section-title h2{margin:0}.rule-card,.progress-card{margin-bottom:16px}.rule-chips{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0}.rule-chips span{background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 12px; font-weight:900}.progress-head{display:flex; justify-content:space-between; align-items:center; gap:16px}.progress-card h2{font-size:52px; line-height:1; margin:0}.progress-numbers{text-align:right}.progress-numbers strong{display:block; font-size:22px}.progress-numbers span,.progress-numbers small{color:var(--muted); font-weight:800}.progress-bar{height:12px; border-radius:999px; overflow:hidden; background:rgba(0,0,0,.08); margin:16px 0}.progress-bar span{display:block; height:100%; background:var(--green-strong); border-radius:999px} .info-list{display:grid; gap:10px}.info-list div{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line)}.info-list dt{font-weight:900}.info-list dd{margin:0; color:var(--muted); text-align:right}.file-list{display:grid; gap:10px; margin-top:12px}.file-list a,.file-list span,.file-list .row-line{display:flex; justify-content:space-between; gap:12px; align-items:center; padding:12px 14px; border-radius:16px; background:#fff; border:1px solid var(--line); font-weight:800}.history-list div{padding:12px; border-radius:16px; background:#fff; border:1px solid var(--line)}.detail-hero{border-radius:32px; padding:28px; margin-bottom:16px; box-shadow:var(--shadow)}.detail-hero h1{font-size:36px}.sticky-action{position:sticky; bottom:calc(env(safe-area-inset-bottom) + 76px); z-index:10; margin:16px 0; padding:10px; border-radius:24px; background:rgba(255,253,248,.82); backdrop-filter:blur(10px)} .bottom-nav{position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom) + 12px); transform:translateX(-50%); z-index:30; width:min(420px,calc(100vw - 28px)); display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:8px; border-radius:999px; background:rgba(255,255,255,.88); border:1px solid rgba(0,0,0,.08); box-shadow:var(--shadow); backdrop-filter:blur(16px)}.bottom-nav a{display:flex; align-items:center; justify-content:center; min-height:44px; border-radius:999px; font-weight:950; color:#7b7468}.bottom-nav a.active{background:var(--ink); color:#fff} .teacher-nav{position:sticky; top:8px; z-index:25; display:flex; gap:8px; overflow-x:auto; padding:8px; margin-bottom:18px; border-radius:999px; background:rgba(255,255,255,.82); border:1px solid rgba(0,0,0,.08); backdrop-filter:blur(16px)}.teacher-nav a{white-space:nowrap; padding:10px 14px; border-radius:999px; font-weight:900}.teacher-nav a:hover{background:#f1ede5}.stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px}.stat-card{background:#fff; border-radius:24px; padding:20px; box-shadow:var(--shadow); border:1px solid var(--line)}.stat-card span{color:var(--muted); font-weight:900}.stat-card strong{display:block; font-size:42px; margin-top:8px}.desktop-grid,.review-card-grid,.teacher-action-grid{display:grid; gap:14px}.teacher-card{display:block; min-height:240px}.teacher-action-grid{grid-template-columns:1fr}.admin-action{display:block; padding:24px; border-radius:28px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow)}.admin-action strong{display:block; font-size:22px; margin-bottom:8px}.admin-action span{color:var(--muted); line-height:1.6}.create-form{display:grid; gap:16px}.wizard-card{position:relative}.step-badge{position:absolute; right:18px; top:18px; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:#fff; font-weight:950}.chip-field ul{display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:8px 0}.chip-field li{margin:0}.chip-field label{display:flex; align-items:center; gap:8px; min-height:44px; border:1.5px solid var(--ink); border-radius:999px; padding:10px 14px; cursor:pointer}.chip-field input{width:auto; min-height:auto}.bulk-panel{display:grid; gap:14px}.bulk-actions{display:grid; grid-template-columns:1fr; gap:10px; padding:14px; border-radius:24px; background:#fff; border:1px solid var(--line)}.review-card{padding-left:52px}.select-dot{position:absolute; left:18px; top:22px}.select-dot input{position:absolute; opacity:0}.select-dot span{display:block; width:22px; height:22px; border-radius:50%; border:2px solid var(--ink); background:#fff}.select-dot input:checked + span{background:var(--ink); box-shadow:inset 0 0 0 4px #fff}.two-column{display:grid; gap:16px}.responsive-table{overflow-x:auto}.responsive-table table{width:100%; border-collapse:collapse; min-width:720px}.responsive-table th,.responsive-table td{padding:12px; border-bottom:1px solid var(--line); text-align:left}.responsive-table th{font-weight:950; background:#f4f0e8}.disabled-card{opacity:.55}.result-box{margin-top:16px; padding:14px; background:#fff; border-radius:18px; border:1px solid var(--line)}.row-line{display:flex!important} .print-page{background:#fff; border-radius:28px; padding:26px; box-shadow:var(--shadow)}.print-head{display:flex; justify-content:space-between; gap:16px; align-items:flex-start}.qr-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0}.qr-grid div{padding:16px; border:1px solid var(--line); border-radius:18px; text-align:center}.qr-grid img{width:130px}.qr-grid span{display:block; font-weight:900}.print-list{display:grid; gap:12px}.print-list article{border-bottom:1px solid var(--line); padding-bottom:12px; line-height:1.7} @media (min-width:760px){ .page-bg{padding:32px}.home-hero{grid-template-columns:1fr 1fr; align-items:center; min-height:700px; padding:36px}.hero-art{min-height:560px}.hero-copy{text-align:left; padding:30px}.entry-grid{max-width:460px}.form-grid.two{grid-template-columns:1fr 1fr}.teacher-action-grid{grid-template-columns:repeat(2,1fr)}.desktop-grid{grid-template-columns:repeat(2,1fr)}.review-card-grid{grid-template-columns:repeat(2,1fr)}.desktop-subjects{grid-template-columns:repeat(4,1fr)}.filter-panel{grid-template-columns:2fr repeat(4,1fr) auto}.bulk-actions{grid-template-columns:1.2fr 1fr 2fr auto}.two-column{grid-template-columns:1fr 1fr}.sticky-action{bottom:20px}.progress-card h2{font-size:64px} } @media (min-width:1080px){.desktop-grid{grid-template-columns:repeat(3,1fr)}.review-card-grid{grid-template-columns:repeat(3,1fr)}} @media (max-width:520px){ .page-bg{padding-left:12px; padding-right:12px}.home-hero{border-radius:34px}.hero-art{min-height:430px}.art-main{width:82%; right:-84px}.art-small{left:34px; width:58%}.art-dot{left:44%; width:104px;height:104px}.subject-grid{grid-template-columns:1fr}.stat-grid{grid-template-columns:1fr}.mobile-header h1{font-size:34px}.assignment-card{display:block}.card-actions{margin-top:12px}.search-bar{flex-direction:column}.print-head{display:block}.qr-grid{grid-template-columns:1fr}.detail-hero h1{font-size:32px} } @media print{.no-print,.bottom-nav,.teacher-nav,.message-stack{display:none!important}.page-bg{padding:0;background:#fff}.app-shell{max-width:none}.print-page{box-shadow:none;border-radius:0}} .chip-field label.is-checked{background:var(--ink);color:#fff}.chip-field label.is-checked input{accent-color:#fff}.chip-field .errorlist{flex-basis:100%} /* -------------------------------------------------------------------------- Student experience refinement — v5 Compact mobile-first layout, responsive navigation and restrained motion. -------------------------------------------------------------------------- */ html { scroll-behavior: smooth; } body { overflow-x: hidden; } .page-bg { animation: page-enter .42s cubic-bezier(.22,.8,.22,1) both; } .btn, .small-link, .text-link, .entry-card, .subject-card, .catalog-card, .bottom-nav a { -webkit-tap-highlight-color: transparent; } .btn { transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, background-color .24s ease, border-color .24s ease, opacity .2s ease; } .btn:not(:disabled):active { transform: scale(.975); } .btn:not(:disabled):hover { transform: translateY(-1px); } /* One-time, notification-style welcome. It falls out of the status-bar area instead of permanently occupying the dashboard. */ .message-stack { pointer-events: none; } .message.transient { position: fixed; z-index: 90; top: calc(env(safe-area-inset-top) + 10px); left: 50%; width: min(500px, calc(100vw - 28px)); transform: translate(-50%, -130%); border-color: #b8d8c0; pointer-events: auto; animation: notification-in .45s cubic-bezier(.18,.85,.24,1.1) forwards, notification-out .32s cubic-bezier(.55,.06,.68,.19) 2.25s forwards; } /* Home */ .home-hero-refined { min-height: calc(100svh - 54px); display: grid; align-content: center; gap: clamp(28px, 7vh, 58px); padding: clamp(24px, 6vw, 52px); border-radius: 40px; background: rgba(255,253,248,.94); overflow: hidden; } .hero-brand { min-height: clamp(142px, 25vw, 250px); display: grid; place-items: center; padding: 18px; border-radius: 30px; background: linear-gradient(135deg, #f5f0e6, #fffdf8); border: 1px solid rgba(30,27,20,.06); } .hero-logo { display: block; width: min(88%, 460px); max-height: 190px; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(24,20,20,.10)); } .home-copy-refined { padding: 0; text-align: center; } .home-copy-refined h1 { margin-bottom: 0; } .entry-grid-refined { max-width: 510px; margin: 28px auto 0; gap: 11px; } .entry-card-refined { position: relative; min-height: 74px; padding: 18px 22px; display: grid; place-items: center; text-align: center; color: var(--ink); background: #f0ece4; border: 1px solid rgba(30,27,20,.06); box-shadow: 0 8px 20px rgba(30,27,20,.045); transform-origin: center; transition: transform .25s cubic-bezier(.2,.8,.2,1), background-color .30s ease, color .22s ease, box-shadow .3s ease; } .entry-card-refined span { margin: 0; font-size: clamp(18px, 4.5vw, 23px); } .entry-card-refined:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(30,27,20,.10); } .entry-card-refined.is-activating { transform: scale(.978); color: #fff; box-shadow: 0 12px 26px rgba(30,27,20,.17); } .entry-card-refined[data-entry-tone="student"].is-activating { background: var(--green-strong); } .entry-card-refined[data-entry-tone="parent"].is-activating { background: var(--yellow-strong); } .entry-card-refined[data-entry-tone="teacher"].is-activating { background: var(--blue-strong); } /* Authentication */ .auth-card-refined { padding: clamp(26px, 7vw, 38px); border-radius: 32px; } .auth-card-refined h1 { margin-bottom: 14px; } .auth-intro { margin-bottom: 26px; } .auth-form { gap: 13px; } .auth-form .btn { margin-top: 12px; } .auth-back-link { display: inline-flex; margin-top: 28px; padding: 4px 0; } /* Student dashboard */ .student-dashboard-header { margin-top: 12px; margin-bottom: 28px; } .student-dashboard-header h1 { font-size: clamp(38px, 11vw, 56px); overflow-wrap: anywhere; } .student-progress-card { padding: clamp(22px, 6vw, 30px); } .progress-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 2px; } .progress-actions .btn { min-width: 0; padding-left: 12px; padding-right: 12px; } .dashboard-rule-card { padding: clamp(22px, 6vw, 30px); } .dashboard-rule-card h2 { margin-bottom: 18px; } .rule-chips { align-items: center; } .rule-chips span { line-height: 1.2; } .rule-status { margin: 20px 0 0; line-height: 1.55; } .rule-empty-copy { margin: 0; } .section-title > a { font-weight: 900; color: var(--green-strong); } /* Bottom navigation: a small, responsive pill shift and a short outgoing page transition. */ .bottom-nav { transition: transform .26s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease; } .bottom-nav a { position: relative; overflow: hidden; transition: color .22s ease, transform .24s cubic-bezier(.2,.8,.2,1), background-color .27s ease; } .bottom-nav a::after { content:""; position:absolute; inset:7px; border-radius:999px; opacity:0; background:rgba(255,255,255,.12); transform:scale(.72); transition:opacity .2s ease, transform .28s cubic-bezier(.2,.8,.2,1); } .bottom-nav a.active::after { opacity:1; transform:scale(1); } .bottom-nav a span { position:relative; z-index:1; } .bottom-nav a:not(.active):active, .bottom-nav a.is-navigating { transform: scale(.94); } body.is-page-leaving .app-shell { animation: page-leave .16s ease both; } /* Assignment library landing */ .catalog-header { margin-bottom: 22px; } .library-subject-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .library-subject-card { min-height: 132px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 24px; box-shadow: 0 11px 24px rgba(30,27,20,.07); transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease; } .library-subject-card:hover { transform: translateY(-3px); box-shadow: 0 18px 30px rgba(30,27,20,.12); } .library-subject-card span { font-size: 22px; } .library-subject-card small { margin: 0; font-size: 14px; } .library-subject-card small strong { display: inline; margin: 0 3px 0 0; font-size: 24px; color: var(--ink); } .library-subject-card:after { width: 66px; height: 66px; border-radius: 22px; right: -13px; bottom: -15px; } /* No horizontal drag: sub-subject filters wrap naturally at every device width. */ .subsubject-grid { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 17px; } .subsubject-grid .chip { min-height: 40px; padding: 9px 14px; font-size: 14px; } .live-search { position: relative; display: block; margin: 0 0 16px; } .live-search input { padding-right: 48px; } .search-empty { text-align: center; } .catalog-card { background: rgba(255,255,255,.44) !important; border: 1px solid rgba(255,255,255,.72); box-shadow: 0 12px 30px rgba(30,27,20,.08), inset 0 1px 0 rgba(255,255,255,.72); backdrop-filter: blur(16px) saturate(125%); -webkit-backdrop-filter: blur(16px) saturate(125%); transition: transform .32s cubic-bezier(.2,.8,.2,1), background-color .32s ease, border-color .32s ease, box-shadow .32s ease; } .catalog-card:hover { transform: translateY(-2px); } .catalog-card.is-selected { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(30,27,20,.12), inset 0 1px 0 rgba(255,255,255,.75); } .catalog-card.is-selected.subject-en { background: rgba(224,242,230,.86) !important; border-color: rgba(92,151,112,.26); } .catalog-card.is-selected.subject-math { background: rgba(224,237,255,.88) !important; border-color: rgba(85,133,191,.24); } .catalog-card.is-selected.subject-sci { background: rgba(255,246,202,.88) !important; border-color: rgba(188,150,44,.25); } .catalog-card.is-selected.subject-ap { background: rgba(255,229,226,.88) !important; border-color: rgba(165,83,80,.24); } .catalog-card.is-changing { animation: selection-lift .42s cubic-bezier(.2,.85,.24,1); } .catalog-card-actions { min-height: 40px; } .selection-state { font-weight: 900; color: var(--green-strong); font-size: 14px; } .catalog-card form { margin: 0; } .catalog-card[hidden] { display: none !important; } .assignment-meta { margin-bottom: 13px; } /* Detail and package */ .detail-header { margin-bottom: 14px; } .assignment-detail-card .btn + .btn { margin-top: 10px; } .package-header { margin-bottom: 22px; } .package-rule-card { padding: clamp(22px, 6vw, 30px); } .package-rule-card .warn-text + .warn-text { margin-top: 10px; } .package-confirm-action { border: 1px solid rgba(30,27,20,.05); box-shadow: 0 10px 28px rgba(30,27,20,.07); } .package-confirm-action .btn:disabled { opacity: .66; background: #94ad9f; color: #fff; } .confirmed-package-card { margin-top: 20px; } /* Print / QR page */ .print-page-header { margin-bottom: 18px; } .print-page { padding: clamp(22px, 6vw, 32px); } .print-head { align-items: flex-start; } .print-student-summary h1 { margin-bottom: 6px; font-size: clamp(32px, 8.6vw, 48px); overflow-wrap: anywhere; } .print-english-name { margin: 0; color: var(--muted); font-size: clamp(20px, 5.5vw, 27px); font-weight: 800; overflow-wrap: anywhere; } .qr-bundle { margin: 24px 0 28px; padding: 14px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,253,248,.75); } .qr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; } .qr-grid div { min-width: 0; padding: 12px 7px; border: 0; border-radius: 15px; background: #fff; } .qr-grid img { width: min(100%, 134px); } .qr-grid span { margin-top: 7px; font-size: 14px; } .qr-note { margin: 13px 4px 2px; color: var(--muted); font-size: 13px; line-height: 1.55; text-align: center; } @keyframes page-enter { from { opacity:0; transform: translateY(7px); } to { opacity:1; transform:translateY(0); } } @keyframes page-leave { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(5px); } } @keyframes notification-in { from { opacity:0; transform:translate(-50%,-130%); } to { opacity:1; transform:translate(-50%,0); } } @keyframes notification-out { from { opacity:1; transform:translate(-50%,0); } to { opacity:0; transform:translate(-50%,-130%); } } @keyframes selection-lift { 0%{ transform:translateY(0) scale(1); } 45%{ transform:translateY(-6px) scale(1.012); } 100%{ transform:translateY(-3px) scale(1); } } @media (min-width: 760px) { .home-hero-refined { grid-template-columns: minmax(260px,.8fr) minmax(340px,1fr); min-height: 660px; } .home-copy-refined { text-align: left; } .entry-grid-refined { margin-left: 0; } .hero-brand { min-height: 360px; } .hero-logo { max-height: 280px; } .library-subject-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } .library-subject-card { min-height: 150px; } .subsubject-grid .chip { font-size: 15px; } } @media (max-width: 520px) { .home-hero-refined { min-height: calc(100svh - 42px); padding: 22px 18px; } .hero-brand { min-height: 164px; } .hero-logo { max-height: 122px; width: 88%; } .home-copy-refined h1 { font-size: clamp(34px, 10.5vw, 44px); } .entry-card-refined { min-height: 68px; } .progress-actions .btn { min-height: 46px; font-size: 15px; } .library-subject-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .library-subject-card { min-height: 124px; padding: 16px; } .library-subject-card span { font-size: 20px; } .subsubject-grid { gap: 7px; } .subsubject-grid .chip { min-height: 38px; padding: 8px 12px; } .catalog-card { border-radius: 24px; } .qr-grid img { width: min(100%, 112px); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } @media print { .qr-bundle { border-color:#ddd; } .qr-note { color:#555; } } .client-toast { position:fixed; z-index:100; left:50%; bottom:calc(env(safe-area-inset-bottom) + 92px); width:min(430px,calc(100vw - 28px)); transform:translateX(-50%); padding:13px 16px; border-radius:16px; background:#3d312b; color:#fff; box-shadow:0 16px 36px rgba(30,27,20,.22); font-weight:800; line-height:1.5; animation:toast-in .25s cubic-bezier(.2,.8,.2,1) both; } .client-toast.is-hiding { animation:toast-out .35s ease forwards; } @keyframes toast-in { from{opacity:0;transform:translate(-50%,14px)} to{opacity:1;transform:translate(-50%,0)} } @keyframes toast-out { from{opacity:1;transform:translate(-50%,0)} to{opacity:0;transform:translate(-50%,12px)} } .admin-rule-form { gap:16px; } .admin-rule-row { display:grid; grid-template-columns:1fr; gap:8px; padding:15px; border:1px solid var(--line); border-radius:18px; background:#fff; } .admin-rule-toggle { display:flex; align-items:center; gap:9px; font-size:14px; color:var(--green-strong); } .admin-rule-toggle input { width:18px; height:18px; min-height:0; accent-color:var(--green-strong); } .admin-rule-section-title { margin:10px 0 0; font-size:20px; } .message-stack:has(.message.transient:only-child) { height:0; margin:0; } /* -------------------------------------------------------------------------- Student experience refinement — v6 Fixed bottom navigation, native-feeling taps, no page-fade refresh, and a rebuilt progress / submit / print layout. -------------------------------------------------------------------------- */ html { scroll-behavior: auto; } .page-bg { animation: none !important; transform: none !important; padding-bottom: calc(env(safe-area-inset-bottom) + 116px); } .app-shell { transform: none !important; } body.is-page-leaving .app-shell { animation: none !important; } a, button, input, textarea, select, label, .chip, .btn, .bottom-nav a, .small-link, .text-link { -webkit-tap-highlight-color: transparent; } a:focus:not(:focus-visible), button:focus:not(:focus-visible), .chip:focus:not(:focus-visible), input:focus:not(:focus-visible), textarea:focus:not(:focus-visible), select:focus:not(:focus-visible) { outline: none; box-shadow: none; } a:focus-visible, button:focus-visible, .chip:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid rgba(47,96,79,.38); outline-offset: 3px; } .btn, .chip, .bottom-nav a, .library-subject-card, .entry-card-refined, .small-link, .text-link { user-select: none; } .is-pressed { transform: scale(.985); } .small-link.is-pressed, .text-link.is-pressed { transform: none; opacity: .68; } .btn, .chip, .library-subject-card, .catalog-card, .entry-card-refined { transition-duration: .16s, .18s, .18s, .18s, .18s; } /* Dashboard progress card */ .student-progress-card { display: block !important; padding: clamp(24px, 6.5vw, 34px) !important; border-radius: 31px; overflow: hidden; } .progress-dashboard-grid { display: grid; grid-template-columns: minmax(86px, .85fr) minmax(58px, .55fr) minmax(112px, .95fr); align-items: center; gap: clamp(12px, 3.2vw, 22px); } .progress-percent-block .eyebrow { margin-bottom: 9px; } .progress-percent-block h2 { font-size: clamp(50px, 14vw, 76px); line-height: .9; margin: 0; letter-spacing: -.06em; } .student-progress-card .progress-numbers { text-align: center; align-self: center; } .student-progress-card .progress-numbers strong { font-size: clamp(28px, 7.4vw, 39px); line-height: 1; letter-spacing: -.04em; } .student-progress-card .progress-numbers span { display: block; margin-top: 7px; font-size: clamp(16px, 4.2vw, 21px); line-height: 1.25; color: var(--muted); } .student-progress-card .progress-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; justify-self: stretch; } .student-progress-card .progress-actions .btn { min-height: 50px; width: 100%; padding: 11px 14px; font-size: clamp(14px, 3.9vw, 17px); line-height: 1.18; white-space: normal; } .student-progress-card .progress-bar { height: 13px; margin: clamp(20px, 5vw, 26px) 0 0; background: rgba(17,18,15,.10); box-shadow: inset 0 1px 2px rgba(0,0,0,.05); } .student-progress-card .progress-bar span { min-width: 0; transition: width .24s cubic-bezier(.2,.8,.2,1); } /* Bottom tab bar: fixed above content with a sliding active capsule. */ .bottom-nav { position: fixed !important; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 12px); transform: translate3d(-50%,0,0) !important; overflow: hidden; isolation: isolate; z-index: 120; width: min(420px, calc(100vw - 28px)); box-shadow: 0 18px 50px rgba(30,27,20,.16); --nav-index: 0; } .bottom-nav.nav-catalog { --nav-index: 1; } .bottom-nav.nav-package { --nav-index: 2; } .bottom-nav::before { content: ""; position: absolute; z-index: 0; top: 8px; bottom: 8px; left: 8px; width: calc((100% - 32px) / 3); border-radius: 999px; background: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transform: translate3d(calc(var(--nav-index) * (100% + 8px)), 0, 0); transition: transform .24s cubic-bezier(.22, 1, .36, 1); } .bottom-nav a { position: relative; z-index: 1; background: transparent !important; color: #756f66; transform: translateZ(0); transition: color .16s ease, transform .12s cubic-bezier(.2,.8,.2,1); } .bottom-nav a.active { background: transparent !important; color: #fff; } .bottom-nav a::after { display: none !important; } .bottom-nav a:active, .bottom-nav a.is-pressed { transform: scale(.96); } /* Keep selected/tapped controls clean: no old mobile-blue highlight boxes. */ .section-title > a, .subsubject-grid .chip, .library-subject-card, .catalog-card .btn, .assignment-card .btn { -webkit-tap-highlight-color: rgba(0,0,0,0); } /* Print page spacing */ .print-head { gap: 22px; } .print-download-action { flex-shrink: 0; margin-top: 36px; } .print-student-summary { min-width: 0; } /* Submission page spacing and form polish */ .student-submit-page .detail-hero { margin-bottom: 20px; } .student-submit-page .simple-card { margin-top: 18px; } .student-submit-page .simple-card:first-of-type { margin-top: 0; } .student-submit-page .simple-card h2 { margin-bottom: 18px; } .student-submit-page .simple-card p { line-height: 1.72; } .student-submit-page .form-stack { gap: 16px; } .student-submit-page input[type="file"] { padding: 16px; line-height: 1.4; } .student-submit-page textarea { min-height: 118px; } .history-list { gap: 12px; } .history-list div { padding: 15px; } @media (max-width: 520px) { .page-bg { padding-bottom: calc(env(safe-area-inset-bottom) + 118px); } .student-progress-card { padding: 24px 22px !important; } .progress-dashboard-grid { grid-template-columns: minmax(82px,.8fr) minmax(52px,.48fr) minmax(110px,.92fr); gap: 12px; } .student-progress-card .progress-actions .btn { min-height: 48px; padding-left: 10px; padding-right: 10px; } .print-head { display: block; } .print-download-action { margin-top: 22px; margin-bottom: 6px; } .qr-bundle { margin-top: 30px; } } @media (max-width: 370px) { .progress-dashboard-grid { grid-template-columns: 1fr 1fr; } .student-progress-card .progress-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; margin-top: 4px; } } @media (prefers-reduced-motion: reduce) { .bottom-nav::before, .student-progress-card .progress-bar span { transition: none !important; } } /* -------------------------------------------------------------------------- Parent + teacher experience refinement — v7 -------------------------------------------------------------------------- */ /* Student dashboard: make the submitted counter quieter and shift its visual weight slightly left without disturbing the two action buttons. */ .progress-dashboard-grid { grid-template-columns: minmax(92px,.95fr) minmax(42px,.38fr) minmax(116px,1fr); } .student-progress-card .progress-numbers { justify-self: start; text-align: left; transform: translateX(-5px); } .student-progress-card .progress-numbers strong { font-size: clamp(22px,5.8vw,30px); letter-spacing: -.035em; } .student-progress-card .progress-numbers span { margin-top: 5px; font-size: clamp(13px,3.5vw,16px); } /* Login pages share the same generous button/back-link rhythm. */ .auth-form + .auth-back-link { margin-top: 30px; } /* Parent dashboard: transient welcome message and softer subject cards. */ .parent-dashboard-header { margin-top: 12px; margin-bottom: 28px; } .parent-progress-card { padding: clamp(22px,6vw,30px); } .parent-assignment-list { gap: 16px; } .parent-assignment-card { display: block; border-color: rgba(30,27,20,.055); box-shadow: 0 10px 26px rgba(30,27,20,.055); } .parent-assignment-card.subject-en { background: rgba(237,247,239,.82); } .parent-assignment-card.subject-math { background: rgba(238,245,254,.84); } .parent-assignment-card.subject-sci { background: rgba(255,249,221,.86); } .parent-assignment-card.subject-ap { background: rgba(253,239,237,.86); } /* Teacher bottom navigation: one row, no horizontal drag, and the same sliding black capsule used by the student experience. */ .teacher-nav { --teacher-nav-index: 0; position: fixed !important; z-index: 125; left: 50%; right: auto; top: auto !important; bottom: calc(env(safe-area-inset-bottom) + 12px); width: min(690px, calc(100vw - 20px)); margin: 0; padding: 7px; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 0; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.91); border: 1px solid rgba(0,0,0,.08); box-shadow: 0 18px 50px rgba(30,27,20,.16); backdrop-filter: blur(18px) saturate(125%); -webkit-backdrop-filter: blur(18px) saturate(125%); transform: translate3d(-50%,0,0) !important; isolation: isolate; } .teacher-nav.nav-library { --teacher-nav-index: 1; } .teacher-nav.nav-create { --teacher-nav-index: 2; } .teacher-nav.nav-review { --teacher-nav-index: 3; } .teacher-nav.nav-progress { --teacher-nav-index: 4; } .teacher-nav.nav-data { --teacher-nav-index: 5; } .teacher-nav::before { content: ""; position: absolute; z-index: 0; inset-block: 7px; left: 7px; width: calc((100% - 14px) / 6); border-radius: 999px; background: var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transform: translate3d(calc(var(--teacher-nav-index) * 100%),0,0); transition: transform .25s cubic-bezier(.22,1,.36,1); } .teacher-nav a { position: relative; z-index: 1; min-width: 0; min-height: 44px; padding: 8px 3px; display: flex; align-items: center; justify-content: center; border-radius: 999px; color: #756f66; background: transparent !important; font-size: clamp(11px,2.9vw,14px); font-weight: 950; line-height: 1; white-space: nowrap; transition: color .16s ease, transform .12s cubic-bezier(.2,.8,.2,1); } .teacher-nav a.active { color: #fff; } .teacher-nav a:hover { background: transparent; } .teacher-nav a:active, .teacher-nav a.is-pressed { transform: scale(.94); } .teacher-view .page-bg, body:has(.teacher-nav) .page-bg { padding-bottom: calc(env(safe-area-inset-bottom) + 118px); } /* Teacher workspace header and compact three-column statistics. */ .teacher-home-header { align-items: flex-start; margin-top: 12px; margin-bottom: 18px; } .teacher-home-header h1 { margin-bottom: 0; } .teacher-logout-link { padding: 7px 2px; } .teacher-stat-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin-bottom: 12px; } .teacher-stat-card { min-width: 0; padding: 13px 11px; border: 1px solid rgba(30,27,20,.065); border-radius: 20px; background: rgba(255,255,255,.78); box-shadow: 0 9px 24px rgba(30,27,20,.055); } .teacher-stat-card span { display: block; min-height: 2.55em; color: var(--muted); font-size: clamp(11px,2.8vw,14px); font-weight: 900; line-height: 1.25; } .teacher-stat-card strong { display: block; margin-top: 5px; font-size: clamp(25px,7vw,36px); line-height: 1; letter-spacing: -.04em; } .teacher-manage-row { display: flex; justify-content: flex-end; margin: 3px 0 5px; } .teacher-manage-pill { min-height: 38px; padding: 8px 15px; } .teacher-subject-section { margin-top: 18px; } .teacher-subject-grid, .teacher-library-subject-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 12px; } .teacher-subject-card { min-height: 122px !important; padding: 17px !important; justify-content: flex-start; gap: 8px; box-shadow: 0 10px 25px rgba(30,27,20,.06); } .teacher-subject-card span { margin-bottom: auto; font-size: clamp(20px,5vw,25px); } .teacher-subject-card small { font-size: 13px; line-height: 1.3; } .teacher-subject-card small strong { font-size: 23px; } .teacher-subject-card.subject-en { background: #eef7f0; } .teacher-subject-card.subject-math { background: #eef5fd; } .teacher-subject-card.subject-sci { background: #fff9dc; } .teacher-subject-card.subject-ap { background: #fceeed; } /* Teacher library landing and subject libraries. */ .teacher-library-header { margin-top: 10px; margin-bottom: 20px; } .subject-library-header { align-items: flex-start; } .teacher-simple-back { padding: 8px 2px; } .teacher-live-search { margin-top: 4px; } .teacher-assignment-grid { align-items: start; } .teacher-library-card { min-height: 0 !important; display: block; scroll-margin-top: 24px; border-color: rgba(30,27,20,.055); box-shadow: 0 10px 26px rgba(30,27,20,.06); transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease; } .teacher-library-card:hover { transform: translateY(-2px); box-shadow: 0 15px 30px rgba(30,27,20,.09); } .teacher-library-card.subject-en { background: rgba(239,249,241,.9); } .teacher-library-card.subject-math { background: rgba(239,246,255,.92); } .teacher-library-card.subject-sci { background: rgba(255,250,224,.94); } .teacher-library-card.subject-ap { background: rgba(253,239,238,.94); } .teacher-library-card form { margin: 0; } .teacher-library-card[hidden] { display: none !important; } .teacher-assignment-grid .search-empty { grid-column: 1 / -1; } .teacher-library-card .line-clamp { -webkit-line-clamp: 3; } .teacher-review-card { scroll-margin-top: 24px; } /* Keep review screens visually consistent with the lighter libraries. */ .teacher-review-card.subject-en { background: rgba(239,249,241,.88); } .teacher-review-card.subject-math { background: rgba(239,246,255,.9); } .teacher-review-card.subject-sci { background: rgba(255,250,224,.92); } .teacher-review-card.subject-ap { background: rgba(253,239,238,.92); } .teacher-review-header { align-items: flex-start; } .teacher-filter-panel input[type="hidden"] { display: none; } @media (min-width: 760px) { .teacher-stat-card { padding: 16px 17px; } .teacher-subject-grid, .teacher-library-subject-grid { max-width: 780px; } .teacher-subject-card { min-height: 134px !important; } } @media (max-width: 520px) { .progress-dashboard-grid { grid-template-columns: minmax(88px,.92fr) minmax(40px,.34fr) minmax(112px,1fr); gap: 10px; } .student-progress-card .progress-numbers { transform: translateX(-6px); } .teacher-nav { width: calc(100vw - 16px); bottom: calc(env(safe-area-inset-bottom) + 8px); padding: 6px; } .teacher-nav::before { inset-block: 6px; left: 6px; width: calc((100% - 12px) / 6); } .teacher-nav a { min-height: 43px; padding-inline: 1px; font-size: clamp(10.5px,3vw,12.5px); } .teacher-stat-grid { gap: 7px; } .teacher-stat-card { padding: 12px 8px; border-radius: 18px; } .teacher-stat-card span { font-size: 10.5px; } .teacher-stat-card strong { font-size: 27px; } .teacher-subject-card { min-height: 116px !important; padding: 15px !important; } .teacher-library-card { border-radius: 24px; } } @media (max-width: 370px) { .progress-dashboard-grid { grid-template-columns: 1fr 1fr; } .student-progress-card .progress-numbers { justify-self: end; transform: none; text-align: right; } .teacher-nav a { font-size: 10px; } .teacher-stat-card span { min-height: 3.7em; } } @media (prefers-reduced-motion: reduce) { .teacher-nav::before { transition: none !important; } } /* -------------------------------------------------------------------------- Teacher + student refinement — v8 -------------------------------------------------------------------------- */ /* Student / teacher detail return links now carry an encoded anchor. Make the target land comfortably in the middle of the viewport instead of the top. */ .catalog-card, .teacher-library-card { scroll-margin-top: 28px; scroll-margin-bottom: 110px; } /* Teacher dashboard: balanced header actions, stronger statistics, and more even vertical rhythm on mobile and desktop. */ .teacher-dashboard-view .app-shell { min-height: calc(100vh - 150px); } .teacher-home-header { margin-top: clamp(22px,5vw,48px); margin-bottom: clamp(28px,6vw,48px); align-items: flex-start; } .teacher-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: clamp(14px,3vw,24px); padding-top: 9px; flex-shrink: 0; } .teacher-header-actions .small-link { padding: 6px 0; font-size: clamp(16px,3.9vw,21px); line-height: 1.1; } .teacher-header-actions .teacher-manage-link { color: var(--green-strong); } .teacher-stat-grid { gap: clamp(10px,2.7vw,22px); margin-bottom: clamp(42px,9vw,74px); } .teacher-stat-card { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; column-gap: 8px; min-height: clamp(82px,17vw,112px); padding: clamp(15px,3.8vw,24px) clamp(14px,3.2vw,22px); border-radius: clamp(20px,4.4vw,30px); background: rgba(255,255,255,.82); } .teacher-stat-card span { min-height: 0; align-self: center; font-size: clamp(13px,3.15vw,18px); line-height: 1.28; letter-spacing: -.02em; } .teacher-stat-card strong { justify-self: end; margin-top: 0; font-size: clamp(30px,7.4vw,46px); line-height: .92; letter-spacing: -.055em; font-variant-numeric: tabular-nums; } .teacher-subject-section { margin-top: 0; } .teacher-subject-section .section-title { margin-bottom: clamp(18px,4vw,26px); } .teacher-subject-grid { gap: clamp(16px,3.4vw,24px); } .teacher-subject-card { min-height: clamp(132px,23vw,178px) !important; padding: clamp(19px,4.6vw,30px) !important; } /* Teacher assignment detail page mirrors the student detail layout but removes all student-only package actions. */ .teacher-detail-hero { margin-top: 2px; } .teacher-assignment-detail-card { display: grid; gap: 16px; } .teacher-assignment-detail-card h2, .teacher-assignment-detail-card h3 { margin-bottom: 0; } .teacher-assignment-detail-card .file-list a span { min-width: 0; overflow-wrap: anywhere; } /* Create-assignment page: replace the oversized return capsule, add generous field rhythm, and turn checkbox rows into light liquid-glass choice rows. */ .teacher-create-header { margin-top: clamp(14px,4vw,36px); margin-bottom: clamp(28px,6vw,48px); align-items: flex-start; } .teacher-create-header .muted { max-width: 520px; } .teacher-create-form { gap: clamp(24px,5vw,38px); padding-bottom: 24px; } .teacher-create-form .teacher-wizard-card { padding: clamp(28px,6vw,44px) clamp(24px,5.6vw,42px); border-radius: clamp(30px,6vw,42px); } .teacher-create-form .teacher-wizard-card h2 { margin: 0 56px clamp(24px,5vw,34px) 0; font-size: clamp(28px,6.4vw,40px); line-height: 1.08; } .teacher-create-form .step-badge { top: clamp(22px,4.8vw,32px); right: clamp(22px,4.8vw,32px); width: clamp(42px,8.5vw,52px); height: clamp(42px,8.5vw,52px); font-size: clamp(18px,4.2vw,24px); } .form-field { display: grid; gap: 12px; } .create-select-grid { gap: clamp(18px,4.6vw,28px); } .teacher-create-form label, .teacher-create-form .form-field label { display: block; margin: 0; font-size: clamp(17px,4.1vw,22px); line-height: 1.24; } .teacher-create-form input, .teacher-create-form textarea, .teacher-create-form select { border-color: rgba(30,27,20,.18); border-radius: 22px; background-color: rgba(255,255,255,.70); box-shadow: inset 0 1px 0 rgba(255,255,255,.45); } .teacher-create-form select { appearance: none; -webkit-appearance: none; padding-right: 58px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2311120f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 24px center; background-size: 18px 18px; } .teacher-create-form select::-ms-expand { display: none; } .create-content-stack { gap: 16px; } .create-content-stack label:not(:first-child) { margin-top: 8px; } .create-content-stack textarea { min-height: 170px; } .create-choice-field { margin-top: 0; } .teacher-create-form .chip-field ul { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0; padding: 0; list-style: none; } .teacher-create-form .chip-field li { margin: 0; } .teacher-create-form .chip-field label { width: 100%; min-height: 58px; padding: 14px 18px; border: 1.4px solid rgba(17,18,15,.28); border-radius: 999px; background: rgba(255,255,255,.50); backdrop-filter: blur(16px) saturate(122%); -webkit-backdrop-filter: blur(16px) saturate(122%); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 20px rgba(30,27,20,.025); color: var(--ink); transition: background-color .2s ease, border-color .2s ease, box-shadow .22s ease, transform .16s cubic-bezier(.2,.8,.2,1); } .teacher-create-form .chip-field label:hover { transform: translateY(-1px); } .teacher-create-form .chip-field label.is-checked { background: rgba(220,236,223,.72); border-color: rgba(47,96,79,.34); box-shadow: 0 12px 28px rgba(47,96,79,.08), inset 0 1px 0 rgba(255,255,255,.54); transform: translateY(-1px); } .teacher-create-form .chip-field input { width: 18px; height: 18px; min-height: 0; flex: 0 0 auto; accent-color: var(--green-strong); } .create-subtitle { margin: clamp(28px,6vw,42px) 0 clamp(16px,3.6vw,22px); font-size: clamp(22px,5.2vw,30px); } .material-wizard-card { display: grid; gap: clamp(22px,5vw,32px); } .material-wizard-card h2 { margin-bottom: 0 !important; } .submission-choice-field { margin-top: 0; } .create-material-stack { display: grid; gap: clamp(22px,5vw,32px); } .upload-material-field input[type="file"] { width: 100%; padding: 14px; min-height: 56px; border: 1.4px solid rgba(30,27,20,.18); border-radius: 22px; background: rgba(255,255,255,.64); } .upload-material-field p { margin: 0; font-size: clamp(14px,3.6vw,17px); } .teacher-create-form .teacher-create-submit { position: static; margin: clamp(2px,1.5vw,10px) 0 clamp(14px,4vw,30px); padding: 0 clamp(12px,3vw,24px); } .teacher-create-form .teacher-create-submit .btn { min-height: 60px; font-size: clamp(18px,4.4vw,23px); } @media (min-width: 760px) { .teacher-home-header { margin-top: 40px; } .teacher-stat-grid { max-width: 880px; } .teacher-stat-card { min-height: 118px; } .teacher-subject-grid { max-width: 860px; } .teacher-create-form .chip-field ul { grid-template-columns: repeat(2,minmax(0,1fr)); } .teacher-create-form .submission-choice-field ul { grid-template-columns: repeat(4,minmax(0,1fr)); } .create-material-stack { grid-template-columns: repeat(2,minmax(0,1fr)); } .upload-material-field { grid-column: 1 / -1; } } @media (max-width: 520px) { .teacher-home-header { margin-bottom: 30px; } .teacher-header-actions { gap: 14px; padding-top: 6px; } .teacher-stat-grid { gap: 8px; margin-bottom: 44px; } .teacher-stat-card { min-height: 82px; padding: 13px 10px; } .teacher-stat-card span { font-size: clamp(12px,3.25vw,14px); } .teacher-stat-card strong { font-size: clamp(28px,7.2vw,34px); } .teacher-subject-card { min-height: 128px !important; } .teacher-create-form .teacher-wizard-card { padding-left: 22px; padding-right: 22px; } .teacher-create-form .chip-field label { min-height: 56px; padding-left: 16px; } .teacher-create-form select { background-position: right 20px center; padding-right: 52px; } } @media (max-width: 370px) { .teacher-header-actions .small-link { font-size: 14px; } .teacher-stat-card { grid-template-columns: 1fr; align-items: start; row-gap: 8px; } .teacher-stat-card strong { justify-self: start; } } /* v8 small overrides after legacy chip styles. */ .teacher-create-form .chip-field label { display: flex; align-items: center; gap: 12px; } .teacher-create-form .chip-field label.is-checked { color: var(--ink); } @media (max-width: 370px) { .teacher-stat-card span { min-height: 0; } } /* -------------------------------------------------------------------------- Teacher polish — v9 -------------------------------------------------------------------------- */ /* Teacher home: rebuild the three statistic cards so labels never wrap and numbers have room for two or three digits. */ .teacher-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(10px, 2.7vw, 18px) !important; margin-bottom: clamp(42px, 8vw, 66px) !important; } .teacher-stat-card { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 8px !important; min-width: 0 !important; min-height: clamp(92px, 16vw, 122px) !important; padding: clamp(16px, 3.4vw, 23px) clamp(15px, 3.1vw, 22px) !important; border-radius: clamp(22px, 4.2vw, 30px) !important; background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,255,255,.62)) !important; border: 1px solid rgba(255,255,255,.74) !important; box-shadow: 0 16px 36px rgba(30,27,20,.08), inset 0 1px 0 rgba(255,255,255,.82) !important; backdrop-filter: blur(18px) saturate(124%); -webkit-backdrop-filter: blur(18px) saturate(124%); overflow: hidden; } .teacher-stat-card strong { display: block !important; margin: 0 !important; max-width: 100%; align-self: flex-start !important; justify-self: auto !important; font-size: clamp(34px, 7.2vw, 52px) !important; line-height: .92 !important; letter-spacing: -.06em !important; font-variant-numeric: tabular-nums; white-space: nowrap; } .teacher-stat-card span { display: block !important; max-width: 100%; min-height: 0 !important; color: #716c64 !important; font-size: clamp(12px, 2.85vw, 15px) !important; line-height: 1.1 !important; font-weight: 950 !important; letter-spacing: -.01em !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; } /* Create page title rhythm: make the explanation breathe below the heading. */ .teacher-create-header h1 { margin-bottom: clamp(16px, 3.6vw, 22px) !important; } .teacher-create-header .muted { margin: 0; line-height: 1.7; max-width: min(620px, 100%) !important; } /* Django renders checkbox/radio groups as a nested
in recent versions, not always as