/* ============================================================================ Reading Rangers — design system (Claude Design "Reading Rangers", Pippa llama) Fonts loaded per-page: Baloo 2 (headings), Fredoka (body), Inter (teacher/admin), Noto Sans TC (Chinese). Colors + components below match the approved mockups. ========================================================================== */ :root { --f-head: 'Baloo 2', system-ui, sans-serif; --f-body: 'Fredoka', system-ui, sans-serif; --f-ui: 'Inter', system-ui, sans-serif; --f-zh: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif; --ink: #31436b; /* headings navy */ --text: #293B2A; /* body text */ --muted: #6b7280; --faint: #9ca3af; --blue: #4F6AA7; --blue-lt: #6F8AC4; --blue-dk: #31436b; --gold: #FED208; --gold-dk: #D4AC00; --cream: #FFFBE0; --orange: #DE5507; --orange-lt: #FB964F; --orange-dk: #A93D03; --peach: #FFEAD9; --green: #84A187; --green-dk: #527055; --green-deep: #293B2A; --mint: #E7EFE8; --coral: #C0503A; --coral-bg: #FCE8E2; --surface: #ffffff; --line: #e5e7eb; --line-soft: #f3f4f6; /* legacy hooks used by score coloring in the JS (teacher grid + detail) */ --good: #527055; --ok: #C06A12; --bad: #C0503A; font-size: 17px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--f-body); color: var(--text); background: #EEF2F9; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } input, button, textarea { font-family: inherit; } .zh { font-family: var(--f-zh); font-weight: 500; } /* per-page backgrounds (set data-bg on ) */ body[data-bg="landing"] { background: linear-gradient(160deg,#FFFBE0 0%,#ffffff 42%,#f1f4fa 100%); } body[data-bg="login"] { background: linear-gradient(160deg,#f1f4fa 0%,#ffffff 50%,#FFFBE0 100%); } body[data-bg="student"] { background: linear-gradient(180deg,#f1f4fa 0%,#ffffff 30%) fixed; } body[data-bg="read"] { background: linear-gradient(180deg,#FFFBE0 0%,#ffffff 34%) fixed; } body[data-bg="ui"] { background: #f9fafb; } /* ---- animations ---- */ @keyframes rr-float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);} } @keyframes rr-floatslow { 0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(-12px) rotate(2deg);} } @keyframes rr-pop { 0%{transform:scale(.92);} 55%{transform:scale(1.03);} 100%{transform:scale(1);} } @keyframes rr-pulse { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.08);opacity:.82;} } @keyframes rr-mic { 0%,100%{transform:scaleY(.3);} 50%{transform:scaleY(1);} } @keyframes rr-confetti { 0%{transform:translateY(-20px) rotate(0);opacity:1;} 100%{transform:translateY(560px) rotate(540deg);opacity:0;} } @keyframes rr-rise { 0%{transform:translateY(16px);opacity:0;} 100%{transform:translateY(0);opacity:1;} } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } } @media print { [data-noprint], .rr-navchrome { display:none !important; } body { background:#fff !important; } } .rr-float { animation: rr-floatslow 5s ease-in-out infinite; } .rr-mascot svg { display:block; width:100%; height:auto; } /* ---- layout ---- */ .wrap { max-width: 1120px; margin: 0 auto; padding: 22px clamp(14px,4vw,40px); } .narrow { max-width: 620px; } .center { text-align: center; } .muted { color: var(--muted); } .hide { display: none !important; } .row-2 { display: flex; gap: 12px; flex-wrap: wrap; } .row-2 > * { flex: 1; min-width: 160px; } h1, h2, h3 { font-family: var(--f-head); color: var(--ink); } small.note { display:block; color: var(--faint); margin-top: 10px; font-size: .82rem; line-height: 1.5; } a.back { color: var(--muted); text-decoration: none; font-size: .9rem; font-family: var(--f-head); font-weight: 700; } a.back:hover { color: var(--blue); } /* ---- brand header (student/teacher/admin) ---- */ header.topbar { display: flex; align-items: center; gap: 12px; padding: 14px clamp(14px,4vw,32px); background: rgba(255,255,255,.85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-soft); } header.topbar .logo { width: 40px; height: 40px; border-radius: 9999px; box-shadow: 0 2px 8px rgba(0,0,0,.12); object-fit: cover; } header.topbar .logo.emoji { font-size: 1.6rem; box-shadow: none; display:inline-flex; align-items:center; justify-content:center; } header.topbar h1 { font-size: 1.1rem; margin: 0; font-weight: 800; } header.topbar .sub { color: var(--muted); font-size: .8rem; font-family: var(--f-body); } header.topbar .spacer { flex: 1; } .pill { font-size: .72rem; font-weight: 800; padding: 5px 12px; border-radius: 9999px; background: #eef0fb; color: var(--blue-dk); font-family: var(--f-head); } .pill.demo { background: #fff1e6; color: #c4561f; } /* ---- cards ---- */ .card { background: var(--surface); border-radius: 26px; padding: clamp(20px,4vw,32px); box-shadow: 0 8px 0 #f0e9cf, 0 10px 26px rgba(41,59,42,.06); } .card.plain { box-shadow: 0 6px 0 #eef1f7, 0 8px 20px rgba(41,59,42,.05); } .card + .card { margin-top: 18px; } h2 { font-size: clamp(1.4rem,3vw,1.8rem); margin: 0 0 6px; font-weight: 800; } /* ---- inputs ---- */ label { display: block; font-family: var(--f-head); font-weight: 700; font-size: .95rem; color: #374151; margin: 16px 0 8px; } label .zh { color: var(--faint); font-weight: 500; font-size: .85rem; } input[type=text], input[type=password], textarea, select { width: 100%; height: 56px; padding: 0 18px; font-size: 1.05rem; border: 2px solid var(--line); border-radius: 16px; background: #f9fafb; color: #111827; font-family: var(--f-body); outline: none; transition: border-color .15s, box-shadow .15s; } textarea { height: auto; min-height: 130px; padding: 16px 18px; resize: vertical; line-height: 1.6; } input:focus, textarea:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(79,106,167,.18); background:#fff; } /* ---- buttons (chunky 3D) ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 58px; padding: 0 24px; cursor: pointer; border: 0; border-radius: 9999px; font-family: var(--f-head); font-weight: 800; font-size: 1.1rem; color: #fff; background: linear-gradient(135deg,var(--blue-lt),var(--blue)); box-shadow: 0 8px 0 var(--blue-dk); transition: transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .14s, filter .15s; } .btn:hover { filter: brightness(1.04); } .btn:active { transform: translateY(5px); box-shadow: 0 3px 0 var(--blue-dk); } .btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: 0 8px 0 var(--blue-dk); transform: none; } .btn.big { min-height: 66px; font-size: 1.25rem; } .btn .zh { color: rgba(255,255,255,.92); font-weight: 700; font-size: .85em; } .btn.gold, .btn.record { background: linear-gradient(135deg,var(--gold),var(--orange)); box-shadow: 0 8px 0 var(--orange-dk); } .btn.gold:active, .btn.record:active { box-shadow: 0 3px 0 var(--orange-dk); } .btn.green, .btn.danger { background: linear-gradient(135deg,var(--green),var(--green-deep)); box-shadow: 0 8px 0 #182118; } .btn.green:active, .btn.danger:active { box-shadow: 0 3px 0 #182118; } .btn.ghost { background: #fff; color: var(--ink); box-shadow: 0 6px 0 #dbe2ef, inset 0 0 0 2px #dde4f1; } .btn.ghost .zh { color: var(--faint); } .btn.ghost:active { box-shadow: 0 2px 0 #dbe2ef, inset 0 0 0 2px #dde4f1; } .btn.small { min-height: 44px; font-size: .95rem; width: auto; padding: 0 18px; box-shadow: 0 4px 0 #dbe2ef; } .btn.small:active { box-shadow: 0 1px 0 #dbe2ef; } .btn .try-pill { font-family: var(--f-body); font-weight: 600; font-size: .72em; background: rgba(255,255,255,.28); padding: 3px 10px; border-radius: 9999px; } /* ============================ LANDING ============================ */ .landing-hero { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: clamp(8px,3vw,40px); flex-wrap: wrap; text-align: center; padding: 8px 0; } .hero-blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .hero-blobs i { position: absolute; border-radius: 9999px; filter: blur(85px); display: block; } .hero-emoji { position: absolute; opacity: .45; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--gold); color: #6E2802; font-family: var(--f-head); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding: 7px 16px; border-radius: 9999px; box-shadow: 0 4px 0 var(--gold-dk); } .landing-hero h1 { font-size: clamp(40px,7vw,66px); line-height: 1.02; margin: 16px 0 6px; letter-spacing: -.02em; font-weight: 800; } .trail-head { position: relative; z-index: 2; max-width: 1180px; margin: 30px auto 16px; display: flex; align-items: center; gap: 14px; } .trail-head .t { font-family: var(--f-head); font-weight: 800; font-size: 22px; color: var(--green-deep); white-space: nowrap; } .trail-head .z { font-family: var(--f-zh); font-size: 15px; color: var(--green); font-weight: 500; white-space: nowrap; } .trail-head .rule { flex: 1; height: 3px; border-radius: 9999px; background: repeating-linear-gradient(90deg,#BDCFBE 0 10px,transparent 10px 20px); } .week-grid { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,240px),1fr)); gap: clamp(14px,2vw,20px); } .week-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; text-align: left; border: 0; cursor: pointer; padding: 16px; border-radius: 26px; font-family: inherit; background: #fff; box-shadow: 0 8px 0 #dbe2ef, 0 8px 24px rgba(41,59,42,.06); transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s; } .week-card:hover { transform: translateY(-4px); box-shadow: 0 12px 0 #dbe2ef, 0 14px 30px rgba(41,59,42,.08); } .week-card:active { transform: translateY(4px); box-shadow: 0 4px 0 #dbe2ef; } .week-card.current { box-shadow: 0 0 0 3px var(--gold), 0 10px 0 #E9C200; } .week-card.current:hover { transform: translateY(-4px); box-shadow: 0 0 0 3px var(--gold), 0 14px 0 #E9C200; } .week-card.locked { background: #f3f4f6; box-shadow: inset 0 0 0 2px var(--line); cursor: not-allowed; } .week-card.locked:hover, .week-card.locked:active { transform: none; box-shadow: inset 0 0 0 2px var(--line); } .wc-top { display: flex; align-items: center; justify-content: space-between; width: 100%; } .wc-num { width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-head); font-weight: 800; font-size: 15px; color: #fff; background: linear-gradient(135deg,var(--blue-lt),var(--blue)); } .week-card.current .wc-num { background: linear-gradient(135deg,var(--gold),var(--orange)); } .week-card.locked .wc-num { background: var(--line); color: var(--faint); } .wc-flag { font-size: 26px; } .wc-icon { font-size: clamp(52px,9vw,64px); line-height: 1; margin: 8px 0 6px; } .week-card.locked .wc-icon { filter: grayscale(1) opacity(.5); } .wc-title { font-family: var(--f-head); font-weight: 800; font-size: 20px; color: var(--ink); width: 100%; } .week-card.locked .wc-title { color: var(--faint); } .wc-zh { font-family: var(--f-zh); font-weight: 500; font-size: 14px; color: var(--muted); width: 100%; margin-top: 1px; } .wc-pill { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-head); font-weight: 800; font-size: 13px; padding: 6px 14px; border-radius: 9999px; } .wc-pill.ready { color: var(--ink); background: #dde4f1; } .wc-pill.start { color: #6E2802; background: var(--gold); } .wc-pill.soon { color: var(--faint); background: var(--line); font-weight: 700; } .wc-pill.done { color: #fff; background: var(--green, #2e6b4f); } /* ---- role modal ---- */ .modal { position: fixed; inset: 0; z-index: 8000; background: rgba(41,59,42,.42); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; } .role-card { width: 100%; max-width: 460px; background: #fff; border-radius: 32px; padding: 34px clamp(22px,5vw,38px) 30px; box-shadow: 0 30px 70px rgba(0,0,0,.30); text-align: center; animation: rr-pop .4s cubic-bezier(.34,1.56,.64,1); } .role-chip { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 4px; background: var(--cream); border: 1.5px solid #FFE76A; padding: 6px 16px; border-radius: 9999px; font-family: var(--f-head); font-weight: 800; font-size: 16px; color: var(--ink); } .role-btns { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; } .role-btn { width: 100%; min-height: 64px; border: 0; border-radius: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px; color: #fff; background: linear-gradient(135deg,var(--blue-lt),var(--blue)); box-shadow: 0 8px 0 var(--blue-dk); transition: transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .14s; } .role-btn:active { transform: translateY(5px); box-shadow: 0 3px 0 var(--blue-dk); } .role-btn.teacher { background: #fff; color: var(--ink); box-shadow: 0 6px 0 #dbe2ef, inset 0 0 0 2px #dde4f1; } .role-btn.teacher:active { box-shadow: 0 2px 0 #dbe2ef, inset 0 0 0 2px #dde4f1; } .role-btn .ic { font-size: 26px; } .role-btn .lb { text-align: left; } .role-btn .lb b { display: block; font-family: var(--f-head); font-weight: 800; font-size: 19px; } .role-btn .lb span { font-family: var(--f-zh); font-weight: 500; font-size: 14px; opacity: .9; } .role-btn.teacher .lb span { color: var(--faint); } /* ============================ LOGIN ============================ */ .login-wrap { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(20px,5vw,56px) clamp(16px,4vw,40px); } .login-card { position: relative; z-index: 2; width: 100%; max-width: 480px; } .login-mascot { width: 130px; margin: 0 auto -34px; position: relative; z-index: 3; } .login-inner { background: #fff; border-radius: 32px; padding: 52px clamp(22px,5vw,40px) 34px; box-shadow: 0 24px 60px rgba(41,59,42,.14); border: 1px solid var(--line-soft); text-align: center; } .login-inner h1 { font-size: clamp(28px,5vw,36px); margin: 0; font-weight: 800; } .week-chip { display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 22px; background: var(--cream); border: 1.5px solid #FFE76A; padding: 9px 18px; border-radius: 9999px; font-family: var(--f-head); font-weight: 700; font-size: 15px; color: #6E2802; } .login-inner .fields { text-align: left; display: flex; flex-direction: column; gap: 4px; } /* ============================ STUDENT PICKER ============================ */ .stu-head { display: flex; align-items: center; gap: 16px; padding: 22px 4px 8px; } .stu-head .mascot { width: 74px; flex-shrink: 0; } .stu-head h1 { font-size: clamp(26px,5vw,34px); margin: 0; line-height: 1.05; font-weight: 800; } .stu-head .sub { margin: 4px 0 0; font-size: 15px; color: var(--muted); } .progress-card { background: #fff; border-radius: 24px; padding: 18px 22px; box-shadow: 0 6px 0 #eef1f7, 0 8px 20px rgba(41,59,42,.05); margin: 8px 0 20px; } .progress-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .progress-top .t { font-family: var(--f-head); font-weight: 800; font-size: 16px; color: var(--green-deep); } .progress-top .n { font-family: var(--f-head); font-weight: 800; font-size: 15px; color: var(--blue); } .progress-bar { position: relative; height: 16px; border-radius: 9999px; background: #eef1f7; overflow: hidden; } .progress-bar > i { position: absolute; inset: 0; width: 0%; border-radius: 9999px; background: linear-gradient(90deg,var(--green),var(--green-dk)); transition: width .6s cubic-bezier(.34,1.56,.64,1); } .progress-flags { display: flex; justify-content: space-between; margin-top: 8px; font-size: 19px; } .progress-flags span:not(:first-child) { opacity: .35; } .progress-flags span:last-child { opacity: .55; } .day-tabs { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 12px; } .day-tab { border: 0; cursor: pointer; font-family: var(--f-head); font-weight: 800; font-size: 15px; padding: 10px 20px; border-radius: 9999px; white-space: nowrap; background: #fff; color: var(--muted); box-shadow: 0 2px 0 #e7ebf3; transition: all .15s; } .day-tab.on { background: var(--blue); color: #fff; box-shadow: 0 4px 0 var(--blue-dk); } .pgroup { margin-top: 20px; } .pgroup-h { display: flex; align-items: center; gap: 10px; margin: 0 2px 12px; } .pgroup-h .ic { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; } .pgroup-read .ic { background: #dde4f1; } .pgroup-write .ic { background: var(--peach); } /* Week 6: the performance — the biggest thing she does all week, so it looks like it. */ .pgroup-perform .ic { background: #FFE9B8; } .pgroup-perform .passage-item .pi-icon { background: #FFF7E3; } .pgroup-h .en { font-family: var(--f-head); font-weight: 800; font-size: 19px; color: var(--ink); } .pgroup-h .zh { font-size: 13px; color: var(--faint); } .pgrid { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,340px),1fr)); gap: 12px; } .passage-item { position: relative; text-align: left; border: 0; cursor: pointer; padding: 16px 18px; border-radius: 22px; background: #fff; display: flex; align-items: center; gap: 14px; width: 100%; font-family: inherit; box-shadow: 0 5px 0 #e7ebf3, 0 6px 16px rgba(41,59,42,.05); transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s; } .passage-item:hover { transform: translateY(-3px); box-shadow: 0 8px 0 #e0e5ef, 0 10px 22px rgba(41,59,42,.09); } .passage-item:active { transform: translateY(4px); box-shadow: 0 1px 0 #e7ebf3; } .passage-item.done { background: #f4faf4; box-shadow: 0 5px 0 #cfe0d0, 0 6px 16px rgba(41,59,42,.06); } .passage-item .pi-icon { width: 52px; height: 52px; flex-shrink: 0; border-radius: 16px; background: #f1f4fa; display: inline-flex; align-items: center; justify-content: center; font-size: 28px; } .pgroup-write .passage-item .pi-icon { background: #FFF6EC; } .passage-item .pi-title { flex: 1; min-width: 0; font-family: var(--f-head); font-weight: 700; font-size: 17px; color: #1f2937; } .passage-item .pi-done { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; background: var(--mint); color: var(--green-dk); font-family: var(--f-head); font-weight: 800; font-size: 12px; padding: 6px 12px; border-radius: 9999px; white-space: nowrap; } /* ============================ READ + SCORECARD ============================ */ .reader-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 2px 10px; gap: 12px; } .mode-chip { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; background: #fff; padding: 8px 14px; border-radius: 9999px; font-family: var(--f-head); font-weight: 700; font-size: 13px; color: #6E2802; box-shadow: 0 2px 8px rgba(0,0,0,.05); } .mode-chip.write { color: var(--orange-dk); } .passage-card .p-title { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .passage-card .p-title .em { font-size: 30px; } .passage-card .p-title .en { font-family: var(--f-head); font-weight: 800; font-size: 20px; color: var(--ink); } .passage-card .p-title .zh { font-size: 13px; color: var(--faint); } .passage { font-family: var(--f-body); font-weight: 500; font-size: clamp(20px,3vw,26px); line-height: 1.85; letter-spacing: .01em; color: var(--text); margin: 0; } .rec-area { text-align: center; margin-top: 18px; } .rec-area .card { text-align: center; } .tries-note { display: inline-flex; align-items: center; gap: 8px; background: var(--cream); border: 1.5px solid #FFE76A; color: #6E2802; font-family: var(--f-head); font-weight: 700; font-size: 14px; padding: 8px 16px; border-radius: 9999px; margin-bottom: 4px; } .tries-note.out { background: var(--coral-bg); border-color: #f3d0c4; color: var(--coral); } .rec-notice { background: var(--coral-bg); border: 1.5px solid #f3d6cb; color: var(--orange-dk); border-radius: 18px; padding: 16px; margin-bottom: 14px; font-family: var(--f-body); font-weight: 500; line-height: 1.55; } .rec-notice .zh { display: block; margin-top: 4px; color: var(--coral); } .headset-note { margin-top: 14px; font-family: var(--f-body); font-size: 13px; color: var(--muted); background: #f1f4fa; border-radius: 12px; padding: 10px 14px; line-height: 1.5; } .headset-note .zh { display: block; color: var(--faint); margin-top: 2px; } .listening-chip { display: inline-flex; align-items: center; gap: 9px; background: #dde4f1; color: var(--ink); font-family: var(--f-head); font-weight: 800; font-size: 16px; padding: 9px 20px; border-radius: 9999px; } .listening-chip .dot { width: 11px; height: 11px; border-radius: 9999px; background: var(--orange); animation: rr-pulse 1s ease-in-out infinite; } .timer-ring { position: relative; width: 150px; height: 150px; margin: 22px auto 6px; } .timer-ring svg { transform: rotate(-90deg); display: block; } .timer-ring .lbl { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .timer-ring .t { font-family: var(--f-head); font-weight: 800; font-size: 34px; color: var(--blue); } .timer-ring .t.over { color: var(--orange); } .timer-ring .s { font-family: var(--f-body); font-size: 12px; color: var(--faint); } .mic-meter { display: flex; align-items: flex-end; justify-content: center; gap: 5px; height: 64px; margin: 8px 0 22px; } .mic-meter i { width: 7px; border-radius: 9999px; background: linear-gradient(180deg,var(--blue-lt),var(--blue)); transform-origin: bottom; } /* level-driven bar (student.js sets #levelBar width) hidden meter fallback */ .level { display: none; } .checking { text-align: center; } .checking .mascot { width: 150px; margin: 0 auto 4px; } .checking h3 { font-size: clamp(20px,3vw,24px); margin: 6px 0; font-weight: 800; } .dot-row { display: inline-flex; gap: 9px; margin-top: 4px; } .dot-row span { width: 14px; height: 14px; border-radius: 9999px; animation: rr-pulse .9s ease-in-out infinite; } .dot-row span:nth-child(1){ background: var(--gold); } .dot-row span:nth-child(2){ background: var(--orange); animation-delay: .15s; } .dot-row span:nth-child(3){ background: var(--blue); animation-delay: .3s; } /* scorecard */ .score-hero { display: flex; align-items: center; gap: clamp(14px,3vw,30px); flex-wrap: wrap; justify-content: center; } .score-hero .mascot { width: clamp(120px,18vw,160px); flex-shrink: 0; } .score-hero .band-msg { flex: 1; min-width: 210px; } .band-chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-head); font-weight: 800; font-size: 15px; padding: 8px 18px; border-radius: 9999px; } .score-hero .band-msg h2 { margin: 14px 0 4px; font-size: clamp(22px,3.4vw,28px); } .rings-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: 12px; margin-top: 16px; } .ring-cell { background: #fff; border-radius: 22px; padding: 18px 10px 14px; box-shadow: 0 5px 0 #f0e9cf, 0 6px 16px rgba(41,59,42,.05); text-align: center; } .ring-cell .rr-ring { margin: 0 auto; } .ring-cell .rc-label { font-family: var(--f-head); font-weight: 700; font-size: 14px; color: #374151; margin-top: 8px; line-height: 1.15; } .ring-cell .rc-zh { font-family: var(--f-zh); font-weight: 500; font-size: 12px; color: var(--faint); } .ring-cell .rc-cmt { font-size: 11px; color: var(--faint); margin-top: 4px; line-height: 1.35; } .ring-ic { font-size: 20px; line-height: 1; } .feedback { background: #f4faf4; border: 1.5px solid #d9ead9; border-radius: 24px; padding: 20px 22px; margin-top: 16px; } .feedback .fb-h { display: flex; align-items: center; gap: 8px; font-family: var(--f-head); font-weight: 800; font-size: 15px; color: var(--green-dk); margin-bottom: 8px; } .feedback .fb-h .zh { font-weight: 500; font-size: 13px; color: var(--green); } .feedback > div:not(.fb-h) { font-family: var(--f-body); font-weight: 500; font-size: clamp(16px,2.2vw,19px); line-height: 1.6; color: var(--text); } .feedback .zh { color: var(--muted); display: block; margin-top: 6px; font-size: 15px; } .marked-wrap { background: #fff; border-radius: 24px; padding: 20px 22px; margin-top: 14px; box-shadow: 0 5px 0 #f0e9cf, 0 6px 16px rgba(41,59,42,.05); } .marked-h { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; font-family: var(--f-head); font-weight: 800; font-size: 15px; color: var(--ink); } .tap-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-head); font-weight: 700; font-size: 12px; color: var(--blue); background: #dde4f1; padding: 5px 12px; border-radius: 9999px; white-space: nowrap; } .tap-badge .zh { font-weight: 500; } .marked-passage { font-family: var(--f-body); font-weight: 500; font-size: clamp(17px,2.4vw,21px); line-height: 1.9; color: var(--text); margin: 0; } mark.miss { color: var(--orange-dk); font-weight: 700; background: var(--peach); border-radius: 8px; padding: 0 6px; box-shadow: inset 0 -2px 0 var(--orange-lt); } mark.miss.say-word { cursor: pointer; } mark.miss.say-word.speaking { background: var(--orange-lt); color: #fff; } #hearPassageBtn.speaking { background: var(--peach); color: var(--orange-dk); box-shadow: 0 6px 0 #f0d9c4, inset 0 0 0 2px var(--orange-lt); } /* mistakes as chunky speaker chips */ .miss-none { margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: var(--mint); color: var(--green-dk); font-family: var(--f-head); font-weight: 800; } .miss-list { margin-top: 16px; } .miss-list .miss-h { font-family: var(--f-head); font-weight: 800; font-size: 15px; color: var(--ink); margin-bottom: 10px; } .miss-list .tap-hint { font-weight: 600; color: var(--faint); font-size: 13px; } .miss-chips { display: flex; flex-wrap: wrap; gap: 10px; } button.miss-word.say-word { border: 2px solid var(--orange-lt); cursor: pointer; font-family: var(--f-head); font-weight: 800; font-size: 17px; color: var(--orange-dk); background: var(--peach); border-radius: 14px; padding: 10px 18px; display: inline-flex; align-items: center; gap: 9px; box-shadow: 0 4px 0 var(--orange-lt); transition: transform .12s, box-shadow .12s, background .12s; } button.miss-word.say-word:hover { background: #FFDCC0; } button.miss-word.say-word:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--orange-lt); } button.miss-word.say-word.speaking { background: var(--orange-lt); color: #fff; } button.miss-word.say-word .spk { font-size: 20px; } .miss-item { display: inline-flex; } /* legacy wrapper; chips render inside */ .miss-item .miss-type, .miss-item .miss-note { display: none; } /* keep chip clean */ /* writing result boxes */ .qbox { background: #FFF6EC; border: 1.5px solid #FFDCC0; border-radius: 18px; padding: 16px 18px; margin-bottom: 14px; } .qbox .qlabel { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-head); font-weight: 800; font-size: 13px; color: var(--orange-dk); background: #fff; border: 1px solid #FFDCC0; padding: 4px 12px; border-radius: 9999px; } .qbox .qtext { font-family: var(--f-head); font-weight: 800; font-size: clamp(20px,3.4vw,28px); color: var(--ink); margin: 12px 0 4px; line-height: 1.25; } .qbox .qtext.zh { font-weight: 500; font-size: 17px; color: var(--muted); margin: 0; } .wtimer { font-family: var(--f-head); font-weight: 700; font-size: 13px; color: var(--faint); } .wtimer.over { color: var(--orange); } .gnote { border-radius: 14px; padding: 12px 16px; font-family: var(--f-head); font-weight: 700; font-size: .95rem; margin-top: 10px; } .gnote.ok { background: var(--mint); color: var(--green-dk); } .gnote.warn { background: #fff3da; color: #8a6d12; } .gcorr-box { margin-top: 14px; background: #f4faf4; border: 1.5px solid #d9ead9; border-radius: 18px; padding: 14px 16px; } .gh { font-family: var(--f-head); font-weight: 800; font-size: 13px; color: var(--muted); margin-bottom: 6px; } .gcorr-text { font-family: var(--f-body); font-weight: 600; font-size: 1.15rem; color: var(--text); } .gissues { margin-top: 12px; } .gissue { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; } .gwrong { color: var(--coral); text-decoration: line-through; font-weight: 700; } .gfix { color: var(--green-dk); font-weight: 800; } .gexp { font-size: .85rem; color: var(--muted); margin-top: 3px; } /* ============================ TEACHER + ADMIN (Inter, calm) ============================ */ body[data-bg="ui"] { font-family: var(--f-ui); color: #1f2937; } .t-head { background: #fff; border-bottom: 1px solid var(--line); padding: 14px clamp(16px,4vw,32px); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; position: sticky; top: 0; z-index: 20; } .t-head .brand { display: flex; align-items: center; gap: 12px; } .t-head img { width: 38px; height: 38px; border-radius: 9999px; } .t-head .brand .t { font-family: var(--f-ui); font-weight: 700; font-size: 16px; color: #111827; } .t-head .brand .s { font-size: 13px; color: var(--muted); } .t-head .actions { display: flex; align-items: center; gap: 10px; } .t-btn { height: 38px; padding: 0 16px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: #4b5563; font-family: var(--f-ui); font-weight: 600; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; } .t-btn:hover { background: var(--line-soft); } .t-btn.primary { border: 0; background: var(--blue); color: #fff; } .t-btn.primary:hover { background: #3f5689; } .t-wrap { max-width: 1120px; margin: 0 auto; padding: 24px clamp(16px,4vw,32px) 120px; } .t-cardgrid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr)); gap: 16px; } .t-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: 0 1px 3px rgba(0,0,0,.04); } .t-card .lbl { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 8px; } .codebox { display: inline-flex; align-items: center; gap: 10px; background: #f1f4fa; border: 1px dashed #b9c6e0; border-radius: 12px; padding: 12px 20px; } .codebox .code { font-family: var(--f-ui); font-weight: 700; font-size: 28px; letter-spacing: .1em; color: var(--ink); white-space: nowrap; } .qr-card { display: flex; align-items: center; gap: 18px; } .qr-card #qr { width: 120px; height: 120px; flex-shrink: 0; background: #fff; border: 1px solid var(--line-soft); border-radius: 12px; padding: 8px; } .qr-card #qr img, .qr-card #qr canvas { width: 100% !important; height: 100% !important; } .statusbar { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 14px; margin: 18px 0; } .stat { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; } .stat .n { font-size: 32px; font-weight: 800; line-height: 1; color: var(--blue); } .stat:nth-child(2) .n { color: var(--green-dk); } .stat .l { font-size: 13px; color: var(--muted); margin-top: 6px; } .t-wrap h3 { font-family: var(--f-ui); font-weight: 700; font-size: 18px; color: #111827; margin: 26px 0 12px; } .grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,260px),1fr)); gap: 10px; } .scard { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; } .scard .head { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .scard .who { font-family: var(--f-ui); font-weight: 700; font-size: 15px; color: #111827; } .scard .ov { font-size: 22px; font-weight: 800; } .scard .badge { font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 9999px; font-family: var(--f-ui); } .badge.waiting { background: var(--line-soft); color: var(--muted); } .badge.reading { background: #dde4f1; color: var(--ink); } .badge.writing { background: var(--peach); color: var(--orange-dk); } .badge.scoring { background: #fef6da; color: #8a6d12; } .badge.done, .badge.answered { background: var(--mint); color: var(--green-dk); } .scard .mini { display: flex; gap: 6px; margin-top: 10px; } .scard .mini > div { flex: 1; text-align: center; } .scard .mini .v { font-weight: 800; font-size: .95rem; } .scard .mini .k { font-size: .6rem; color: var(--faint); text-transform: uppercase; letter-spacing: .3px; } .scard-tries { margin-top: 10px; width: 100%; border: 1px solid var(--line); background: #fff; color: var(--blue); font-family: var(--f-ui); font-weight: 600; font-size: 12.5px; padding: 7px 10px; border-radius: 9px; cursor: pointer; } .scard-tries:hover { background: #f1f4fa; } .scard-tries:disabled { color: var(--green-dk); background: var(--mint); border-color: #cfe0d0; cursor: default; } #emptyHint { text-align: center; color: var(--muted); background: #fff; border: 1px dashed #d1d5db; border-radius: 16px; padding: 40px 24px; } .log { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .logrow { border: 0; border-bottom: 1px solid var(--line-soft); background: #fff; padding: 12px 18px; display: grid; grid-template-columns: 1.2fr 2fr auto auto; gap: 12px; align-items: center; font-family: var(--f-ui); } .logrow:last-child { border-bottom: 0; } .logrow.clickable { cursor: pointer; transition: background .12s; } .logrow.clickable:hover { background: #f9fafb; } .logrow .lname { font-weight: 700; color: #111827; } .logrow .lpass { color: var(--muted); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .logrow .lscore { font-weight: 800; font-size: 1.05rem; } .logrow .ltime { color: var(--faint); font-size: .8rem; white-space: nowrap; } .logrow .expand { color: var(--blue); font-weight: 800; } .logrow.answer { display: block; } .logrow.answer .arow-top { display: flex; gap: 10px; align-items: center; } .logrow.answer .arow-top .lpass { flex: 1; } .logrow.answer .aq { font-size: .82rem; color: var(--muted); margin-top: 6px; } .logrow.answer .aa { margin-top: 4px; white-space: pre-wrap; font-size: .95rem; background: #f9fafb; border: 1px solid var(--line-soft); border-radius: 8px; padding: 8px 10px; max-height: 8em; overflow-y: auto; } .grow { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .gtag { font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 9999px; font-family: var(--f-ui); } .gtag.ok { background: var(--mint); color: var(--green-dk); } .gtag.bad { background: var(--peach); color: var(--orange-dk); } .gtag.warn { background: #fff3da; color: #8a6d12; } .gcorr { width: 100%; font-size: .88rem; background: #f9fafb; border: 1px solid var(--line-soft); border-radius: 8px; padding: 6px 10px; margin-top: 4px; } /* teacher detail modal (over dashboard) */ .modal-card { width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; background: #fff; border-radius: 18px; box-shadow: 0 30px 70px rgba(0,0,0,.35); position: relative; animation: rr-pop .3s cubic-bezier(.34,1.56,.64,1); } .modal-x { position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border: 0; border-radius: 9px; background: var(--line-soft); color: var(--muted); font-size: 1rem; cursor: pointer; } .modal-x:hover { background: var(--line); } #detailBody { padding: 22px; } #detailBody h2 { font-family: var(--f-ui); font-size: 18px; } /* teacher detail still uses .crit/.bar/.overall from the score renderers */ .overall { text-align: center; padding: 4px 0 10px; } .overall .big { font-size: 3rem; font-weight: 900; line-height: 1; font-family: var(--f-head); } .overall .lbl { color: var(--muted); font-weight: 600; font-size: .9rem; } .crit { margin: 12px 0; } .crit .row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; } .crit .name { font-weight: 600; color: #374151; } .crit .num { font-weight: 800; } .bar { height: 9px; border-radius: 9999px; background: var(--line-soft); overflow: hidden; margin: 5px 0; } .bar > i { display: block; height: 100%; border-radius: 9999px; } .transcript { margin-top: 12px; font-size: .85rem; color: var(--muted); font-style: italic; } .aa { margin-top: 4px; white-space: pre-wrap; font-size: .95rem; background: #f9fafb; border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px; } #detailBody .qbox { margin: 8px 0 0; } #detailBody .gcorr-box { border-radius: 12px; } /* admin table */ table.codes { width: 100%; border-collapse: collapse; font-family: var(--f-ui); } table.codes th { text-align: left; padding: 13px 16px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; background: #f9fafb; border-bottom: 2px solid var(--line); } table.codes td { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); font-size: 14px; color: #374151; } table.codes code { font-family: var(--f-ui); font-weight: 600; font-size: 13px; color: #4b5563; background: var(--line-soft); border-radius: 6px; padding: 3px 10px; } table.codes code.big { font-weight: 700; font-size: 14px; letter-spacing: .06em; color: var(--ink); background: #f1f4fa; border: 1px solid #dde4f1; } .adm-help { margin: 0; padding-left: 20px; line-height: 1.9; color: #4b5563; font-size: 14px; } .adm-help code { background: var(--line-soft); padding: 1px 6px; border-radius: 5px; font-size: 13px; } /* toast */ .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #1a2438; color: #fff; padding: 13px 22px; border-radius: 14px; font-family: var(--f-head); font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,.3); z-index: 9000; max-width: calc(100vw - 32px); text-align: center; } /* confetti layer */ .rr-confetti-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } /* ============================ TENSE SENSE ============================ */ .pgroup-tense .ic { background: #efe4ff; } .pgroup-tense .passage-item .pi-icon { background: #f4ecff; } .slot-card { text-align: center; } .slot-title { font-family: var(--f-head); font-weight: 800; font-size: clamp(18px,3vw,22px); color: var(--ink); margin-bottom: 16px; } .slot-reels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 460px) { .slot-reels { grid-template-columns: 1fr; } } .reel { background: linear-gradient(180deg,#31436b,#1a2438); border-radius: 18px; padding: 14px 12px; box-shadow: inset 0 3px 10px rgba(0,0,0,.35); border: 3px solid var(--gold); } .reel-k { font-family: var(--f-head); font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; } .reel-win { display: flex; align-items: center; justify-content: center; min-height: 62px; padding: 8px 10px; border-radius: 12px; background: #fffdf5; color: var(--ink); font-family: var(--f-head); font-weight: 800; font-size: clamp(15px,2.4vw,18px); line-height: 1.25; } .reel-win.tense { color: var(--orange-dk); } .reel-win.spinning { filter: blur(1px); opacity: .85; transition: none; animation: rr-pulse .18s linear infinite; } .tense-given { background: #f4ecff; border: 1.5px solid #e3d3ff; border-radius: 18px; padding: 14px 16px; margin-bottom: 14px; } .tg-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 6px 0; } .tg-row + .tg-row { border-top: 1px dashed #e3d3ff; } .tg-k { font-family: var(--f-head); font-weight: 700; font-size: 13px; color: #6b4fa0; min-width: 130px; } .tg-v { font-family: var(--f-body); font-weight: 600; font-size: clamp(17px,2.6vw,20px); color: var(--ink); } .tg-v.tense { font-family: var(--f-head); font-weight: 800; color: var(--orange-dk); } /* time-phrase helper + hint */ .tp-help { background: #fffbe9; border: 1.5px solid #ffe9a8; border-radius: 14px; padding: 11px 14px; margin: 0 0 12px; font-family: var(--f-body); font-size: 13.5px; color: #6b5a12; line-height: 1.5; } .tp-help .zh { display: block; color: #9a8534; margin-top: 2px; } .tp-toggle { display: inline-block; margin-top: 8px; border: 0; background: #ffe9a8; color: #6E2802; font-family: var(--f-head); font-weight: 700; font-size: 12.5px; padding: 6px 12px; border-radius: 9999px; cursor: pointer; } .tp-toggle .zh { font-weight: 500; } .tp-toggle:hover { background: #ffe07a; } .tp-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; } .tp-chip { font-family: var(--f-body); font-weight: 600; font-size: 13px; color: #6E2802; background: #fff; border: 1.5px solid #ffe9a8; border-radius: 9999px; padding: 5px 12px; } /* Grammar Math — the sentence as building blocks */ .grammar-math { background: #f4ecff; border: 1.5px solid #e3d3ff; border-radius: 20px; padding: 16px 18px; margin-top: 14px; } .gm-h { font-family: var(--f-head); font-weight: 800; font-size: 15px; color: #6b4fa0; margin-bottom: 12px; } .gm-blocks { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; } .gm-block { display: inline-flex; flex-direction: column; gap: 3px; padding: 8px 14px; border-radius: 12px; font-family: var(--f-head); font-weight: 800; font-size: clamp(15px,2.4vw,18px); color: #fff; box-shadow: 0 3px 0 rgba(0,0,0,.12); } .gm-block small { font-family: var(--f-body); font-weight: 600; font-size: 10.5px; opacity: .9; letter-spacing: .02em; text-transform: none; } .gm-block.subj { background: #4F6AA7; } .gm-block.verb { background: #DE5507; } .gm-block.obj { background: #527055; } .gm-block.time { background: #8a5cc0; } .gm-plus { align-self: center; font-family: var(--f-head); font-weight: 900; font-size: 20px; color: #9b8bbf; } .gm-eq { margin-top: 12px; font-family: var(--f-body); font-weight: 700; font-size: clamp(16px,2.6vw,20px); color: var(--ink); padding-top: 10px; border-top: 1px dashed #e3d3ff; } /* the full corrected sentence, big, with each part colored */ .gm-correct { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #e3d3ff; } .gm-correct-h { font-family: var(--f-head); font-weight: 800; font-size: 13px; color: #6b4fa0; margin-bottom: 8px; } .gm-correct-s { font-family: var(--f-body); font-weight: 600; font-size: clamp(22px,4.5vw,30px); line-height: 1.55; color: var(--ink); } .gm-subj { color: #4F6AA7; font-weight: 800; } /* subject — blue */ .gm-verb { color: #DE5507; font-weight: 800; } /* verb / tense — orange */ .gm-obj { color: #527055; font-weight: 800; } /* object — green */ .gm-time { color: #8a5cc0; font-weight: 800; } /* time phrase — purple */ /* example sentence in the time-phrase hint (time phrase colored) */ .tp-example { margin-top: 8px; font-family: var(--f-body); font-size: 14px; color: #6b5a12; line-height: 1.5; } .tp-hl { color: #8a5cc0; font-weight: 800; } /* what/where/how correction boxes */ .tw-count { font-family: var(--f-head); font-weight: 800; font-size: 14px; color: var(--coral); margin-top: 14px; } .tw-box { border-radius: 14px; padding: 12px 14px; margin-top: 10px; font-family: var(--f-body); font-size: .95rem; line-height: 1.5; } .tw-box .tw-k { font-family: var(--f-head); font-weight: 800; font-size: 13px; margin-bottom: 4px; } .tw-box .tw-sub { margin-top: 4px; font-size: .88rem; color: var(--muted); } .tw-what { background: var(--coral-bg); } .tw-what .tw-k { color: var(--coral); } .tw-where { background: #fff3da; } .tw-where .tw-k { color: #8a6d12; } .tw-fix { background: var(--mint); } .tw-fix .tw-k { color: var(--green-dk); } /* ---- Sound on/off toggle (injected by sfx.js on every page) ---- */ .sfx-toggle { position: fixed; left: 14px; bottom: 14px; z-index: 60; width: 46px; height: 46px; border-radius: 9999px; border: 1px solid rgba(0,0,0,.08); background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 16px rgba(0,0,0,.14); font-size: 21px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .12s ease, background .12s ease, opacity .12s ease; } .sfx-toggle:hover { transform: scale(1.08); } .sfx-toggle:active { transform: scale(.92); } .sfx-toggle.is-muted { opacity: .7; background: rgba(238,238,238,.92); } @media (max-width: 520px) { .sfx-toggle { width: 42px; height: 42px; font-size: 19px; left: 10px; bottom: 10px; } } /* ================= Conversation partner (voice role-play) ================= */ .convo-card { margin-top: 4px; } .convo-partner { display: flex; gap: 14px; align-items: center; } .convo-role { font-family: var(--f-head); font-weight: 800; font-size: 1.15rem; color: var(--ink); } .convo-set { margin-top: 4px; font-size: .96rem; color: #374151; line-height: 1.4; } .convo-set.zh { color: var(--faint); font-size: .86rem; margin-top: 2px; } .convo-hints { margin-top: 14px; } .convo-hints-h { font-family: var(--f-head); font-weight: 700; font-size: .9rem; color: var(--muted); margin-bottom: 8px; } .convo-hint { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 7px 12px; background: #f6f8fc; border: 1px solid #e7ecf5; border-radius: 12px; margin-bottom: 6px; } .convo-hint b { color: var(--blue); font-weight: 600; } .convo-hint .zh { color: var(--faint); font-size: .82rem; } .convo-thread { display: flex; flex-direction: column; gap: 12px; max-height: 46vh; overflow-y: auto; padding: 6px 2px 4px; } .convo-bubble { display: flex; gap: 9px; max-width: 92%; } .convo-bubble.ai { align-self: flex-start; } .convo-bubble.me { align-self: flex-end; flex-direction: row-reverse; } .cb-ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9999px; background: var(--mint); display: flex; align-items: center; justify-content: center; font-size: 18px; } .cb-body { position: relative; padding: 10px 13px; border-radius: 16px; line-height: 1.4; } .convo-bubble.ai .cb-body { background: #fff; border: 1.5px solid #e7ecf5; border-bottom-left-radius: 5px; } .convo-bubble.me .cb-body { background: var(--blue); color: #fff; border-bottom-right-radius: 5px; } .cb-text { font-size: 1rem; } .cb-zh { margin-top: 3px; font-size: .82rem; color: var(--faint); } .cb-say { margin-top: 6px; border: 0; background: #eef2f9; color: var(--blue); border-radius: 9999px; padding: 3px 10px; font-size: .85rem; cursor: pointer; } .cb-say:hover { background: #e2e9f6; } .convo-status { text-align: center; font-weight: 600; color: var(--muted); font-size: .92rem; padding: 8px 0 2px; min-height: 1.2em; } .convo-controls { display: flex; justify-content: center; margin-top: 10px; } .btn.record.recording { background: var(--coral); animation: rr-pulse 1.1s ease-in-out infinite; } @keyframes rr-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } } .convo-typerow { display: flex; gap: 8px; margin-top: 12px; } .convo-typerow input { flex: 1; padding: 12px 14px; border: 1.5px solid #d8dee9; border-radius: 12px; font-size: 1rem; font-family: var(--f-body); } .convo-typerow input:focus { outline: none; border-color: var(--blue); } .convo-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; } .convo-checking { text-align: center; padding: 8px 0; } .convo-stars { font-size: 2rem; letter-spacing: 4px; margin: 4px 0; } .convo-fb { margin-top: 12px; padding: 12px 14px; border-radius: 14px; line-height: 1.45; } .convo-fb .cf-h { font-family: var(--f-head); font-weight: 800; font-size: .92rem; margin-bottom: 5px; } .convo-fb .zh { color: var(--faint); font-size: .86rem; } .convo-fb.good { background: var(--mint); } .convo-fb.good .cf-h { color: var(--green-dk); } .convo-fb.next { background: #fff3da; } .convo-fb.next .cf-h { color: #8a6d12; } .convo-fb.phrases { background: #f6f8fc; border: 1px solid #e7ecf5; } .convo-fb.phrases .cf-h { color: var(--blue); } .cf-phrase { display: flex; flex-wrap: wrap; gap: 3px 10px; align-items: baseline; padding: 5px 0; border-top: 1px dashed #e2e8f2; } .cf-phrase:first-of-type { border-top: 0; } .cf-phrase b { font-weight: 600; } .cf-phrase .zh { color: var(--faint); font-size: .82rem; } .pgroup-convo .pgroup-h .ic { background: var(--mint); } /* Teacher: red safety-flag row (AI heard something that may be about real life) */ .logrow.safety { background: #FCE8E2; border: 1.5px solid #E07A65; } .logrow.safety .lname { color: #C0503A; } .logrow.safety .lpass { color: #C0503A; font-weight: 700; } /* ---- Daily 2-topic pick gate ---- */ .pick-gate { padding: 4px 2px 2px; } .pick-h { font-family: var(--f-head); font-weight: 700; font-size: 1rem; color: var(--ink); margin-bottom: 12px; line-height: 1.4; } .pick-h b { color: var(--orange); } .pick-grid { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 16px; } .pick-chip { border: 2px solid #dce3ef; background: #fff; color: #374151; font-family: var(--f-body); font-weight: 600; font-size: .95rem; padding: 10px 15px; border-radius: 9999px; cursor: pointer; transition: transform .1s ease, border-color .12s ease, background .12s ease; } .pick-chip:hover { border-color: var(--blue-lt); } .pick-chip:active { transform: scale(.96); } .pick-chip.on { border-color: var(--blue); background: var(--blue); color: #fff; box-shadow: 0 4px 12px rgba(79,106,167,.28); } .pick-chip.on::before { content: '✓ '; } .pick-locked-note { margin: 14px 2px 8px; font-family: var(--f-head); font-weight: 600; font-size: .88rem; color: var(--muted); } .passage-item.locked { opacity: .55; cursor: not-allowed; filter: grayscale(.4); } .passage-item.locked:hover { transform: none; box-shadow: none; } .pgroup-test .pgroup-h .ic { background: #fff3da; } /* Daily Check — question counter chip */ .test-progress { display: inline-block; margin-left: 6px; font-family: var(--f-body); font-weight: 700; font-size: .75rem; color: var(--orange); background: #fff3da; padding: 2px 9px; border-radius: 9999px; vertical-align: middle; } /* ---- "Your 3 steps today" guide (grade 5-6 clarity) ---- */ .steps-card { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 18px; padding: 14px 16px; box-shadow: 0 4px 14px rgba(0,0,0,.05); margin-bottom: 6px; } .steps-h { font-family: var(--f-head); font-weight: 800; font-size: 1rem; color: var(--ink); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .steps-h .steps-n { margin-left: auto; font-size: .82rem; color: var(--green); background: var(--mint); padding: 2px 10px; border-radius: 9999px; } .steps-row { display: flex; align-items: stretch; gap: 8px; } .steps-arrow { align-self: center; color: var(--faint); font-weight: 800; font-size: 1.1rem; flex-shrink: 0; } .step { flex: 1; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 14px; border: 2px solid #eceff5; background: #f8f9fc; transition: all .15s ease; } .step .step-n { flex-shrink: 0; width: 28px; height: 28px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-family: var(--f-head); font-weight: 800; font-size: .95rem; background: #dfe4ee; color: #6b7280; } .step .step-t { line-height: 1.15; min-width: 0; } .step .step-t b { display: block; font-family: var(--f-head); font-weight: 700; font-size: .9rem; color: var(--ink); } .step .step-t .zh { font-size: .74rem; color: var(--faint); } .step .step-ic { margin-left: auto; font-size: 1rem; flex-shrink: 0; } /* states */ .step.done { border-color: var(--green); background: var(--mint); } .step.done .step-n { background: var(--green); color: #fff; } .step.now { border-color: var(--orange-lt); background: #fff6ea; box-shadow: 0 3px 12px rgba(222,85,7,.14); } .step.now .step-n { background: var(--orange); color: #fff; } .step.now .step-ic { animation: rr-float 1.6s ease-in-out infinite; } .step.locked { opacity: .6; } .pi-tries { margin-left: auto; font-size: .74rem; font-weight: 700; color: var(--orange); background: #fff3da; padding: 2px 9px; border-radius: 9999px; white-space: nowrap; } @media (max-width: 560px) { .steps-row { flex-direction: column; } .steps-arrow { transform: rotate(90deg); align-self: flex-start; margin-left: 22px; } .step { width: 100%; } } /* ---- "Do this now" hand pointing at the active section ---- */ .do-now { display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 12px; padding: 6px 15px; background: var(--orange); color: #fff; border-radius: 9999px; font-family: var(--f-head); font-weight: 700; font-size: .92rem; box-shadow: 0 4px 14px rgba(222,85,7,.32); } .do-now .zh { font-weight: 600; font-size: .78rem; opacity: .92; } .do-now .dn-hand { display: inline-block; font-size: 1.15rem; animation: dn-bounce 1s ease-in-out infinite; } @keyframes dn-bounce { 0%,100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } } /* soft glow around the section the hand is pointing at */ .pgroup-active > .pgrid, .pgroup-active > .pick-gate { outline: 2px dashed var(--orange-lt); outline-offset: 5px; border-radius: 16px; animation: dn-glow 1.8s ease-in-out infinite; } @keyframes dn-glow { 0%,100% { outline-color: var(--orange-lt); } 50% { outline-color: rgba(251,150,79,.35); } } /* ---- End-of-conversation corrections review ---- */ .convo-fb.corrections { background: #fbfcfe; border: 1px solid #e7ecf5; } .convo-fb.corrections .cf-h { color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .corr-count { font-size: .74rem; font-weight: 700; color: var(--orange); background: #fff3da; padding: 2px 9px; border-radius: 9999px; } .corr-count.all-ok { color: var(--green-dk); background: var(--mint); } .corr-row { padding: 8px 0; border-top: 1px dashed #e2e8f2; line-height: 1.45; } .corr-row:first-of-type { border-top: 0; } .corr-row.ok { color: #527055; font-size: .95rem; } .corr-wrong { color: #b04a38; } .corr-right { color: var(--green-dk); margin-top: 3px; } .corr-tag { display: inline-block; font-size: .66rem; font-weight: 800; padding: 1px 7px; border-radius: 9999px; vertical-align: middle; margin-right: 4px; letter-spacing: .02em; } .corr-tag.wrong { background: var(--coral-bg); color: var(--coral); } .corr-tag.right { background: var(--mint); color: var(--green-dk); } .corr-note { margin-top: 3px; font-size: .82rem; color: var(--muted); } /* ---- Guided writing (Corporal Composition, Week 4) ---- */ .comp-source, .comp-example { border-radius: 12px; padding: 10px 13px; margin-top: 10px; font-size: .95rem; line-height: 1.5; } .comp-source { background: #eef4ff; } .comp-source .cs-h { font-family: var(--f-head); font-weight: 700; font-size: .8rem; color: var(--blue); margin-bottom: 3px; } .comp-example { background: #fff6ea; } .comp-example .ce-h { font-family: var(--f-head); font-weight: 700; font-size: .8rem; color: var(--orange); margin-bottom: 3px; } .comp-example .ce-t { font-style: italic; color: #57534e; } .comp-example .ce-n { margin-top: 4px; font-size: .82rem; color: var(--muted); } .cs-t { color: #374151; } .comp-text { width: 100%; margin-top: 12px; border: 2px solid #dce3ef; border-radius: 14px; padding: 12px 14px; font-family: var(--f-body); font-size: 1.02rem; line-height: 1.6; resize: vertical; } .comp-text:focus { outline: none; border-color: var(--blue); } .comp-title { width: 100%; margin-top: 12px; border: 2px solid #dce3ef; border-radius: 12px; padding: 10px 14px; font-family: var(--f-head); font-weight: 700; font-size: 1.05rem; } .comp-title:focus { outline: none; border-color: var(--gold, #FED208); } .checklist { margin-top: 12px; border: 1px solid #e7ecf5; border-radius: 14px; overflow: hidden; } .cl-row { display: flex; gap: 10px; padding: 9px 12px; border-top: 1px solid #eef1f7; align-items: flex-start; } .cl-row:first-child { border-top: 0; } .cl-row.ok { background: #f4faf5; } .cl-row.no { background: #fffaf3; } .cl-ic { flex-shrink: 0; } .cl-l { font-weight: 600; font-size: .92rem; color: #374151; } .cl-n { font-size: .84rem; color: var(--muted); margin-top: 2px; } .comp-corr { margin-top: 10px; background: #f7f8fb; border-radius: 12px; padding: 10px 13px; } .comp-corr summary { cursor: pointer; font-weight: 700; font-size: .9rem; color: var(--blue); } .comp-corr .cs-t { margin-top: 8px; } /* ---- Passport stamps ---- */ .passport { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 16px; padding: 10px 14px; margin: 10px 0 4px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; box-shadow: 0 3px 10px rgba(0,0,0,.04); } .pp-h { font-family: var(--f-head); font-weight: 800; font-size: .92rem; color: var(--ink); } .pp-row { display: flex; gap: 10px; margin-left: auto; } .stamp { width: 58px; height: 58px; border-radius: 12px; border: 2px dashed #d5dae5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--faint); font-size: .66rem; font-weight: 700; } .stamp .stamp-ic { font-size: 1.25rem; line-height: 1; } .stamp.on { border: 2px solid #C0503A; color: #C0503A; background: #FCE8E2; transform: rotate(-4deg); } /* ---- Week 4 games ---- */ .g4-card-wrap { min-height: 380px; } .g4-splash { text-align: center; padding: 18px 6px; } .g4-splash .g4-icon { font-size: 56px; line-height: 1; margin-bottom: 6px; } .g4-splash h2 { margin: 6px 0 2px; } .g4-how { max-width: 480px; margin: 12px auto 18px; color: #57534e; line-height: 1.55; } .g4-stars { font-size: 2rem; margin: 6px 0; } .g4-hud { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-family: var(--f-head); font-weight: 800; } .g4-score { color: var(--orange); } .g4-round { color: var(--muted); font-size: .9rem; } .g4-task { font-weight: 600; color: #374151; margin: 6px 0 10px; line-height: 1.45; } .g4-feedback { min-height: 40px; margin-top: 10px; } .g4-fbcard { border-radius: 12px; padding: 10px 13px; font-weight: 600; line-height: 1.45; } .g4-fbcard.ok { background: var(--mint); color: var(--green-dk); } .g4-fbcard.no { background: #FFEAD9; color: #C06A12; } .g4-btns { margin-top: 12px; } /* market */ .g4-river { position: relative; min-height: 132px; background: linear-gradient(180deg,#dff1f7,#bfe3ee); border-radius: 14px; overflow: hidden; } /* width:max-content stops the abspos boat (left:100%) shrink-fitting to ~0 and stacking the sentence into a tall clipped column; the boat is centred so any height fits. */ .g4-boat { position: absolute; top: 50%; left: 100%; width: max-content; max-width: min(74vw, 520px); display: inline-flex; align-items: center; gap: 8px; font-size: 1.5rem; transform: translate(0, -50%); transition-property: transform; transition-timing-function: linear; } .g4-boat.sail { transform: translate(calc(-100vw - 100%), -50%); } .g4-boat .g4-sent { font-size: .95rem; font-weight: 700; background: #fff; border-radius: 16px; padding: 8px 15px; box-shadow: 0 3px 8px rgba(0,0,0,.12); color: #374151; white-space: normal; max-width: 100%; line-height: 1.35; } @media (max-width: 560px) { .g4-river { min-height: 150px; } .g4-boat .g4-sent { font-size: .9rem; } } /* knockout */ .g4-ring { background: #fdf3f0; border: 2px solid #f3d5cc; border-radius: 14px; padding: 16px 12px; } .g4-words { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; } .g4-word { border: 2px solid #e5e7eb; background: #fff; border-radius: 10px; padding: 8px 12px; font-size: 1rem; font-weight: 600; cursor: pointer; } .g4-word.hit { border-color: var(--coral); background: var(--coral-bg); text-decoration: line-through; } .g4-word.fixed { border-color: var(--green); background: var(--mint); color: var(--green-dk); } .g4-gloves { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; margin-top: 8px; } .g4-glove { border: 2px solid #f0c9bd; background: #fff; border-radius: 9999px; padding: 9px 16px; font-weight: 700; cursor: pointer; } .dodge { animation: g4dodge .4s ease; } @keyframes g4dodge { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } } /* bridge */ .g4-bridge { position: relative; display: flex; align-items: center; gap: 6px; background: linear-gradient(180deg,#eaf6ee,#d8ecdd); border-radius: 14px; padding: 18px 14px; margin-bottom: 10px; font-size: 1.3rem; } .g4-bridge #g4ele { position: relative; left: 0; transition: left .7s ease; font-size: 1.7rem; } .g4-planks { display: flex; gap: 5px; flex: 1; } .g4-plank { flex: 1; height: 26px; border-radius: 6px; background: #cbd5e1; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; font-size: .8rem; } .g4-plank.laid { background: #B0742F; } .g4-cards { display: flex; flex-direction: column; gap: 8px; } .g4-card { text-align: left; border: 2px solid #dce3ef; background: #fff; border-radius: 12px; padding: 10px 14px; font-size: .98rem; font-weight: 600; cursor: pointer; line-height: 1.4; } .g4-card.used { opacity: .45; text-decoration: line-through; } /* chef */ .g4-order { background: #fff; border: 2px dashed #f0c9bd; border-radius: 14px; padding: 14px 16px; font-size: 1.05rem; line-height: 1.55; margin-bottom: 12px; } .g4-boring { background: #FFEAD9; color: #C06A12; font-weight: 800; padding: 1px 7px; border-radius: 7px; } .g4-boring.swapped { background: var(--mint); color: var(--green-dk); } .g4-shelf { display: flex; gap: 9px; flex-wrap: wrap; } .g4-ingr { border: 2px solid #dbe7dc; background: #f4faf5; border-radius: 9999px; padding: 10px 16px; font-weight: 700; cursor: pointer; } /* ===================== WEEK 5 — Lieutenant Listening ===================== */ /* Mission briefing */ .listen-qlist { margin: 12px 0 4px; padding-left: 26px; display: flex; flex-direction: column; gap: 8px; } .listen-qlist li { font-size: .98rem; line-height: 1.45; } .listen-qlist li .zh { display: block; font-weight: 500; color: var(--faint); font-size: .88rem; } .listen-player { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; align-items: stretch; } .listen-bar { height: 12px; border-radius: 9999px; background: #edf1f7; overflow: hidden; border: 1px solid rgba(0,0,0,.05); } .listen-bar i { display: block; height: 100%; width: 0%; border-radius: 9999px; background: linear-gradient(90deg, #5B8DEF, #7FB5FF); transition: width .18s linear; } .listen-count { font-size: .92rem; text-align: center; } /* Transcript reveal + corrections recap */ .listen-reveal { background: #FFF9EC; border: 1px solid #F2E3BC; border-radius: 14px; padding: 10px 14px; } .listen-reveal summary { cursor: pointer; font-weight: 800; font-family: var(--f-head); } .listen-reveal-text { margin-top: 10px; line-height: 1.7; white-space: pre-wrap; } .corr-pair { margin: 8px 0; } .corr-was { text-decoration: line-through; color: var(--coral); opacity: .85; } .corr-now { color: var(--green-dk); font-weight: 700; } /* Rank ladder on the France passport */ .rank-chip { display: inline-block; margin-left: 10px; background: #23324d; color: #ffd977; border-radius: 9999px; padding: 4px 12px; font-size: .85rem; font-weight: 800; letter-spacing: .3px; white-space: nowrap; } .rank-chip .zh { color: #ffe9b3; font-weight: 700; } .rank-row { width: 100%; } .rank-next { font-size: .85rem; color: var(--faint); } /* ---- Week 5 games (g5) — same design language as g4 ---- */ .g5-wrap { display: flex; flex-direction: column; gap: 12px; } .g5-score { font-family: var(--f-head); font-weight: 800; font-size: 1.05rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .g5-combo { color: #E0662E; } .g5-task { background: #F5F8FF; border: 1px solid #dde7fb; border-radius: 14px; padding: 10px 14px; line-height: 1.45; } .g5-task .zh { display: block; color: var(--faint); font-size: .9rem; } .g5-listenrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .g5-listens { font-size: .88rem; } .g5-choices { display: flex; flex-direction: column; gap: 8px; } .g5-choice { text-align: left; border: 2px solid #dce3ef; background: #fff; border-radius: 12px; padding: 11px 14px; font-size: .98rem; font-weight: 600; cursor: pointer; line-height: 1.4; display: flex; gap: 10px; align-items: baseline; } .g5-choice:disabled { opacity: .55; cursor: default; } .g5-choice.good { border-color: var(--green); background: var(--mint); opacity: 1; } .g5-choice.bad { border-color: var(--coral); background: var(--coral-bg); opacity: 1; } .g5-letter { font-family: var(--f-head); font-weight: 800; color: #5B8DEF; flex-shrink: 0; } .g5-word { justify-content: center; text-align: center; font-size: 1.15rem; font-weight: 800; } .g5-why { border-radius: 14px; padding: 11px 14px; line-height: 1.5; } .g5-why.ok { background: var(--mint); } .g5-why.no { background: #FFF6E8; } .g5-why .zh { display: block; color: var(--faint); font-size: .9rem; } /* metro map */ /* The train rides the SAME track box as the rail fill, so its % position always matches the blue progress and it never overlaps the tower at the last stop. */ .g5-map { position: relative; height: 34px; margin-top: 4px; } .g5-track { position: absolute; left: 8px; right: 34px; top: 0; bottom: 0; } .g5-rail { position: absolute; left: 0; right: 0; top: 50%; height: 8px; transform: translateY(-50%); background: #edf1f7; border-radius: 9999px; overflow: hidden; } .g5-rail i { display: block; height: 100%; background: linear-gradient(90deg, #5B8DEF, #9db9f5); border-radius: 9999px; transition: width .4s ease; } .g5-train { position: absolute; top: 50%; transform: translate(-50%, -58%); font-size: 22px; transition: left .4s ease; } .g5-dest { position: absolute; right: 0; top: 50%; transform: translateY(-55%); font-size: 22px; } .g5-mapline { font-size: .85rem; text-align: right; } /* speed radio */ .g5-speedchip { margin-left: auto; background: #FFEAD9; color: #C06A12; border-radius: 9999px; padding: 3px 12px; font-size: .85rem; font-weight: 800; } .g5-typerow { display: flex; gap: 8px; } .g5-typerow input { flex: 1; border: 2px solid #dce3ef; border-radius: 12px; padding: 11px 14px; font-size: 1rem; font-family: inherit; } .g5-answer { margin-top: 8px; line-height: 1.9; } .g5-w { padding: 2px 6px; border-radius: 8px; font-weight: 700; } .g5-w.hit { background: var(--mint); color: var(--green-dk); } .g5-w.miss { background: var(--coral-bg); color: var(--coral); } /* subtitle fixer */ .g5-subbox { background: #101418; color: #fff; border-radius: 14px; padding: 14px 16px; line-height: 2.1; font-size: 1.02rem; } .g5-cc { background: #fff; color: #101418; font-weight: 800; font-size: .7rem; border-radius: 4px; padding: 1px 5px; vertical-align: middle; margin-right: 6px; } .g5-subw { background: transparent; border: none; color: #fff; font: inherit; cursor: pointer; padding: 1px 4px; border-radius: 8px; } .g5-subw:hover:not(:disabled) { background: rgba(255,255,255,.14); } .g5-subw:disabled { cursor: default; } .g5-subw.fixed { background: var(--mint); color: var(--green-dk); font-weight: 800; } .g5-subw.shake { animation: g5shake .35s; background: rgba(255,99,71,.35); } @keyframes g5shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } /* news catcher */ .g5-newshead { background: #B3222E; color: #fff; border-radius: 12px; padding: 9px 14px; font-size: .98rem; } .g5-newshead .zh { display: block; color: #ffd9dc; font-size: .85rem; } @media (max-width: 560px) { .g5-choice { font-size: .92rem; } .g5-subbox { font-size: .94rem; } } /* ---- Motormouth Challenge (W5 day 2: read it aloud fast) ---- */ .rf-para { background: #FFF9EC; border: 1px solid #F2E3BC; border-radius: 14px; padding: 14px 16px; margin-top: 12px; font-size: 1.06rem; line-height: 1.85; } .rf-timer { font-family: var(--f-head); font-weight: 800; font-size: 2.6rem; text-align: center; margin: 12px 0 4px; color: var(--ink); font-variant-numeric: tabular-nums; } .rf-timer span { font-size: 1.1rem; color: var(--faint); margin-left: 2px; } .rf-best { text-align: center; font-size: .9rem; margin-top: 8px; } .rf-scoreline { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 2px 0; } .rf-big { font-family: var(--f-head); font-weight: 800; font-size: 1.9rem; font-variant-numeric: tabular-nums; } .rf-big.good { color: var(--green-dk); } .rf-big.warn { color: #C06A12; } .rf-lbl { font-size: .9rem; color: var(--faint); } .rf-marked { line-height: 2; margin-top: 6px; } .rf-w { padding: 1px 3px; border-radius: 6px; } .rf-w.miss { background: var(--coral-bg); color: var(--coral); font-weight: 700; text-decoration: underline wavy; } @media (max-width: 560px) { .rf-timer { font-size: 2.1rem; } .rf-para { font-size: .98rem; } } /* ---- W5 listening: the book's "what kind of answer?" prompt + NOTES block ---- */ .listen-deep { background: #F5F8FF; border: 1px solid #dde7fb; border-radius: 12px; padding: 10px 14px; margin-top: 12px; line-height: 1.5; } .listen-deep .zh { display: block; color: var(--faint); font-size: .88rem; } .listen-notes { margin-top: 14px; } .listen-notes label { display: block; font-size: .95rem; margin-bottom: 6px; } .listen-notes label .zh { color: var(--faint); font-weight: 500; font-size: .88rem; } .listen-notes textarea { width: 100%; border: 2px solid #dce3ef; border-radius: 12px; padding: 10px 12px; font: inherit; line-height: 1.9; background: repeating-linear-gradient(#fff, #fff 30px, #eef1f7 30px, #eef1f7 31px); } .listen-notes-peek { margin-top: 10px; background: #FFF9EC; border: 1px solid #F2E3BC; border-radius: 12px; padding: 8px 12px; } .listen-notes-peek summary { cursor: pointer; font-weight: 700; font-size: .92rem; } .listen-notes-peek div { margin-top: 6px; white-space: pre-wrap; line-height: 1.6; } /* ---- W5 word games (book p27 BINGO / p31 Word Search) + idiom bubble ---- */ .g5-bubble { background: #fff; border: 2px solid #dce3ef; border-radius: 18px; padding: 14px 18px; font-size: 1.3rem; font-weight: 700; text-align: center; margin: 4px 0 2px; font-family: var(--f-head); } .g5-grid { display: flex; flex-direction: column; gap: 2px; align-items: center; overflow-x: auto; padding: 6px 0; } .g5-row { display: flex; gap: 2px; } .g5-cell { width: 26px; height: 26px; border: 1px solid #e6ebf3; background: #fff; border-radius: 5px; font-weight: 700; font-size: .82rem; cursor: pointer; padding: 0; font-family: var(--f-head); } .g5-cell.sel { background: #FFEAD9; border-color: #E0662E; } .g5-cell.found { background: var(--mint); border-color: var(--green); color: var(--green-dk); } .g5-wslist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .g5-wsword { background: #fff; border: 1px solid #dce3ef; border-radius: 9999px; padding: 4px 11px; font-size: .82rem; font-weight: 700; } .g5-wsword.done { background: var(--mint); border-color: var(--green); color: var(--green-dk); text-decoration: line-through; } .g5-pickgrid { display: flex; flex-wrap: wrap; gap: 7px; } .g5-pickword { background: #fff; border: 2px solid #dce3ef; border-radius: 10px; padding: 8px 12px; font-weight: 700; font-size: .88rem; cursor: pointer; } .g5-pickword.on { background: var(--mint); border-color: var(--green); color: var(--green-dk); } .g5-bingo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .g5-bcell { aspect-ratio: 1; border: 2px solid #dce3ef; background: #fff; border-radius: 10px; font-weight: 800; font-size: .78rem; cursor: pointer; padding: 2px; font-family: var(--f-head); } .g5-bcell.crossed { background: var(--mint); border-color: var(--green); color: var(--green-dk); } .g5-bcell.crossed::after { content: ' ✓'; } @media (max-width: 560px) { .g5-cell { width: 21px; height: 21px; font-size: .7rem; } } /* ---- Accent Detective: the book's written "Chart of Odd-Sounding Words" (p4) ---- */ .g5-chart { border: 2px solid #dce3ef; border-radius: 14px; overflow: hidden; background: #fff; } .g5-chart-h { display: grid; grid-template-columns: 1fr 1fr; background: var(--gold); color: #6E2802; font-family: var(--f-head); font-weight: 800; font-size: .82rem; } .g5-chart-h span { padding: 8px 12px; } .g5-chart-h span + span { border-left: 2px solid rgba(0,0,0,.08); } .g5-chart-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; } .g5-chart-row span { padding: 16px 12px; text-align: center; font-family: var(--f-head); font-weight: 800; font-size: 1.5rem; } .g5-sounds { color: #5B8DEF; } .g5-actual { border-left: 2px solid #eef1f7; color: var(--faint); } .g5-actual.filled { color: var(--green-dk); } /* ============================================================================ WEEK 6 — SERGEANT SPEECH (Japan). Shared chrome for games-w6.js and w6.js. Same tokens as every other week: one design language, no per-week reskin. Sized for a 360px phone held in one hand. ========================================================================== */ .g6-host { display: block; } .g6-splash { text-align: center; padding: 18px 8px 22px; } .g6-title { font-family: var(--f-head); color: var(--ink); font-size: 1.5rem; margin: 0 0 6px; } .g6-sub { color: var(--muted); margin: 0 0 18px; line-height: 1.5; } .g6-start { min-width: 190px; } /* Every bilingual line renders as + . */ .g6-host .en { display: block; } .g6-host .zh { display: block; font-family: var(--f-zh); font-size: .84em; color: var(--muted); margin-top: 1px; } .g6-end { text-align: center; padding: 16px 8px 20px; } .g6-stars { font-size: 2.1rem; letter-spacing: 3px; } .g6-score { font-family: var(--f-head); font-size: 1.5rem; color: var(--ink); margin: 4px 0 8px; } .g6-note { color: var(--muted); margin: 0 auto 16px; max-width: 30ch; line-height: 1.5; } .g6-endbtns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* Prompt + round counter */ .g6-round { display: inline-block; background: var(--cream); color: var(--gold-dk); font-weight: 700; font-size: .8rem; border-radius: 999px; padding: 3px 12px; margin-bottom: 10px; } .g6-prompt { font-family: var(--f-head); color: var(--ink); font-size: 1.18rem; line-height: 1.35; margin: 0 0 14px; text-align: center; } /* Tappable option / card. Min 48px tall — a thumb target, not a mouse target. */ .g6-opt { display: block; width: 100%; min-height: 48px; text-align: left; background: var(--surface); border: 2px solid var(--line); border-radius: 14px; padding: 11px 14px; margin: 0 0 9px; font: inherit; color: var(--text); cursor: pointer; transition: transform .08s ease, border-color .12s ease, background .12s ease; } .g6-opt:active { transform: scale(.985); } .g6-opt.sel { border-color: var(--blue); background: #F2F6FF; } .g6-opt.right { border-color: var(--green-dk); background: var(--mint); } .g6-opt.wrong { border-color: var(--coral); background: var(--coral-bg); } .g6-opt[disabled] { opacity: .62; cursor: default; } /* Two-column bucket board (Essay/Speech, Dojo Sort) — stacks on a narrow phone. */ .g6-buckets { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; } .g6-buckets.four { grid-template-columns: 1fr 1fr; } @media (max-width: 400px) { .g6-buckets { grid-template-columns: 1fr; } } .g6-bucket { border: 2px dashed var(--line); border-radius: 14px; padding: 9px; min-height: 74px; background: #FCFCFD; } .g6-bucket.over { border-color: var(--blue); background: #F2F6FF; } .g6-bucket h4 { font-family: var(--f-head); color: var(--ink); margin: 0 0 6px; font-size: .96rem; text-align: center; } .g6-bucket .zh { text-align: center; } /* A bucket the app deliberately does not score — the four visual body-language rules. */ .g6-bucket.unscored { border-style: solid; border-color: #e7e3f5; background: #FAF9FF; } .g6-bucket.unscored h4::after { content: ' · 不計分'; font-size: .76em; color: var(--faint); font-family: var(--f-zh); } .g6-chip { display: inline-block; background: var(--surface); border: 2px solid var(--line); border-radius: 12px; padding: 7px 11px; margin: 0 6px 6px 0; font-size: .92rem; cursor: pointer; } .g6-chip.sel { border-color: var(--blue); background: #F2F6FF; } .g6-chip.right { border-color: var(--green-dk); background: var(--mint); } .g6-chip.wrong { border-color: var(--coral); background: var(--coral-bg); } /* Reveal panel — why an answer was what it was. */ .g6-reveal { border-left: 4px solid var(--gold); background: var(--cream); border-radius: 0 12px 12px 0; padding: 10px 13px; margin: 10px 0; line-height: 1.5; } .g6-reveal.good { border-left-color: var(--green-dk); background: var(--mint); } .g6-reveal.bad { border-left-color: var(--coral); background: var(--coral-bg); } /* Word Search grid — cells sized from the viewport so it never scrolls sideways. */ .g6-grid { display: grid; gap: 2px; justify-content: center; margin: 10px auto; touch-action: none; } .g6-cell { display: flex; align-items: center; justify-content: center; width: min(7.4vw, 30px); height: min(7.4vw, 30px); font-size: min(3.6vw, 15px); font-weight: 700; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 5px; user-select: none; } .g6-cell.pick { background: var(--gold); border-color: var(--gold-dk); } .g6-cell.found { background: var(--mint); border-color: var(--green-dk); color: var(--green-deep); } /* BINGO board */ .g6-bingo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0; } .g6-bingo .sq { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; text-align: center; font-size: .74rem; font-weight: 700; padding: 3px; border-radius: 10px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); word-break: break-word; } .g6-bingo .sq.mine { background: var(--mint); border-color: var(--green-dk); } .g6-bingo .sq.theirs { background: #EEF1F7; border-color: var(--blue-lt); color: var(--muted); } /* Sliders — the Judging Booth's three rubric columns. */ .g6-slider { margin: 12px 0; } .g6-slider label { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--f-head); color: var(--ink); margin-bottom: 4px; } .g6-slider input[type=range] { width: 100%; height: 34px; } .g6-val { font-variant-numeric: tabular-nums; color: var(--blue); font-weight: 700; } /* The stage. Deliberately near-empty while recording — nothing competing for their eyes. */ .g6-stage { text-align: center; padding: 22px 10px; border-radius: 18px; background: linear-gradient(180deg, #1d2436 0%, #2b3348 100%); color: #fff; } .g6-stage h3 { font-family: var(--f-head); font-size: 1.3rem; margin: 0 0 4px; color: #fff; } .g6-stage .zh { color: #cbd3e6; } .g6-lamp { width: 15px; height: 15px; border-radius: 50%; background: #7a2323; display: inline-block; margin-right: 7px; vertical-align: middle; } .g6-lamp.on { background: #ff3b30; box-shadow: 0 0 13px #ff3b30; animation: g6pulse 1.6s infinite; } @keyframes g6pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } } /* Level needle — the only live signal on the stage. */ .g6-level { height: 9px; border-radius: 999px; background: rgba(255,255,255,.16); overflow: hidden; margin: 16px auto 6px; max-width: 260px; } .g6-level > i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--green) 0%, var(--gold) 72%, var(--orange) 100%); transition: width .08s linear; } /* Paper lanterns — one lights per measured act of preparation. */ .g6-lanterns { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; margin: 10px 0; } .g6-lantern { font-size: 1.15rem; opacity: .22; transition: opacity .35s ease, transform .35s ease; } .g6-lantern.lit { opacity: 1; transform: translateY(-2px); } /* The scorecard — the book's printed table, out of 90 exactly as printed. */ .g6-card { border: 2px solid var(--line); border-radius: 14px; overflow: hidden; margin: 12px 0; } .g6-card .row { display: flex; justify-content: space-between; align-items: center; padding: 10px 13px; border-bottom: 1px solid var(--line); gap: 10px; } .g6-card .row:last-child { border-bottom: 0; background: var(--cream); font-weight: 700; } .g6-card .row .lab { font-family: var(--f-head); color: var(--ink); } .g6-card .row .num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); white-space: nowrap; } /* Says how each row was arrived at: measured, or judged. Honesty, on the card itself. */ .g6-how { font-size: .68rem; text-transform: uppercase; letter-spacing: .5px; border-radius: 999px; padding: 2px 7px; margin-left: 6px; } .g6-how.ruler { background: var(--mint); color: var(--green-deep); } .g6-how.ear { background: var(--peach); color: var(--orange-dk); } /* Teleprompter — the Memory Dojo's fading text. */ .g6-prompter { font-family: var(--f-head); font-size: 1.16rem; line-height: 1.95; color: var(--ink); background: var(--surface); border: 2px solid var(--line); border-radius: 14px; padding: 14px; } .g6-blank { display: inline-block; min-width: 46px; border-bottom: 2.5px solid var(--gold-dk); text-align: center; color: var(--faint); } .g6-blank.filled { border-bottom-color: var(--green-dk); color: var(--green-deep); } /* "Right now you have chosen: X" — shown when a child comes BACK to the topic step, so it reads as changing their mind rather than starting over. */ .comp-chosen { grid-column: 1 / -1; margin-top: 8px; padding: 9px 12px; border-radius: 12px; background: var(--cream); color: var(--text); font-size: .92rem; line-height: 1.5; } .comp-chosen b { color: var(--ink); } .pick-chip.sel { border-color: var(--blue); background: #F2F6FF; box-shadow: inset 0 0 0 1px var(--blue); } /* The child's chosen speech topic, pinned above every step of Week 6's staircase. Sticky so it survives scrolling on a phone — the whole point is that they can always see what they are writing about. */ .comp-topicbar { position: sticky; top: 0; z-index: 5; margin: 0 0 12px; padding: 9px 13px; border-radius: 12px; background: var(--cream); border: 2px solid var(--gold); box-shadow: 0 2px 6px rgba(0,0,0,.05); } .comp-topicbar .ctb-l { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .5px; color: var(--gold-dk); font-weight: 700; } .comp-topicbar .ctb-l .zh { text-transform: none; letter-spacing: 0; font-family: var(--f-zh); margin-left: 4px; } .comp-topicbar .ctb-t { display: block; font-family: var(--f-head); font-size: 1.08rem; line-height: 1.3; color: var(--ink); margin-top: 2px; } /* Step-2 scaffolding: per-line questions and the collapsed worked example. */ .w6-slotlab.w6-slotq { font-weight: 700; color: var(--ink); font-size: .95rem; } .w6-slotlab.w6-slotq .w6-zh { font-weight: 400; } .w6-example { border: 2px dashed var(--line); border-radius: 12px; padding: 8px 12px; margin: 0 0 12px; } .w6-example summary { cursor: pointer; font-weight: 700; color: var(--blue); } .w6-exline { padding: 5px 2px 5px 10px; border-left: 3px solid var(--gold); margin: 6px 0; color: var(--text); } .w6-exline .w6-zh { color: var(--muted); font-family: var(--f-zh); font-size: .9em; margin-left: 6px; } /* Per-line mic on the brainstorm step — say the note instead of typing it. */ .w6-linerow { display: flex; gap: 8px; align-items: stretch; } .w6-linerow .w6-lineIn { flex: 1; min-width: 0; } .w6-micbtn { width: 46px; min-height: 44px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); font-size: 1.15rem; cursor: pointer; } .w6-micbtn.rec { border-color: var(--coral); background: var(--coral-bg); animation: g6pulse 1.6s infinite; } /* Questions-or-free-notes toggle on the brainstorm step. The questions are help, not the assignment — the child picks, and the choice sticks. */ .w6-modes { display: flex; gap: 8px; margin: 0 0 12px; } .w6-mode { flex: 1; min-height: 48px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); font: inherit; color: var(--text); cursor: pointer; padding: 8px 10px; } .w6-mode .w6-zh { display: block; font-size: .82em; color: var(--muted); font-family: var(--f-zh); } .w6-mode.sel { border-color: var(--blue); background: #F2F6FF; box-shadow: inset 0 0 0 1px var(--blue); } /* "Not saved yet — tap Check" reminder. Amber = attention, not alarm. Appears only while typed work exists that the server has not accepted, so it never becomes wallpaper. */ .comp-savenote { margin: 12px 0 0; padding: 10px 13px; border-radius: 12px; background: #FFF6E0; border: 2px solid var(--gold); color: var(--text); font-size: .95rem; line-height: 1.5; animation: savenote-in .25s ease; } .comp-savenote b { color: var(--orange-dk); } .comp-savenote .zh { display: block; font-family: var(--f-zh); color: var(--muted); font-size: .9em; margin-top: 2px; } @keyframes savenote-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* Step 3 rebuilt: PICK your 3 notes, then GROW each one. */ .w6-kidhelp { font-size: 1rem; color: var(--text); background: var(--mint); border-radius: 12px; padding: 10px 13px; } .w6-pickwrap { display: flex; flex-direction: column; gap: 9px; margin: 12px 0; } .w6-pickcard { position: relative; text-align: left; min-height: 52px; padding: 12px 14px 12px 44px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface); font: inherit; color: var(--text); cursor: pointer; transition: transform .08s ease, border-color .12s ease; } .w6-pickcard:active { transform: scale(.985); } .w6-pickcard.sel { border-color: var(--green-dk); background: var(--mint); } .w6-picknum { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; color: var(--green-deep); background: #fff; } .w6-pickcard.sel .w6-picknum { border-color: var(--green-dk); background: var(--green-dk); color: #fff; } .w6-pickfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; } .w6-pickcount { font-family: var(--f-head); font-size: 1.1rem; color: var(--ink); } .w6-pinned { border-left: 4px solid var(--gold); background: var(--cream); border-radius: 0 12px 12px 0; padding: 8px 12px; margin: 0 0 6px; color: var(--ink); font-weight: 600; } .w6-pinlab { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .5px; color: var(--gold-dk); font-weight: 700; margin-bottom: 1px; } .w6-growhint { font-size: .85rem; color: var(--muted); margin: 4px 2px 0; line-height: 1.45; } .w6-growhint .w6-zh { font-family: var(--f-zh); } .w6-exgrow { padding: 5px 2px 5px 10px; border-left: 3px solid var(--green-dk); margin: 6px 0 4px; color: var(--green-deep); } .w6-exgrow .w6-zh { color: var(--muted); font-family: var(--f-zh); font-size: .9em; margin-left: 6px; } .w6-backpick { border: 0; background: none; color: var(--blue); font: inherit; cursor: pointer; padding: 8px 2px; margin-top: 4px; text-align: left; } /* The Grow button is never disabled-and-mute: dimmed until 3 are picked, and it answers back. */ .w6-goGrow.dim { opacity: .55; } .w6-picknudge { min-height: 0; margin-top: 8px; color: var(--orange-dk); font-weight: 600; line-height: 1.5; } .w6-picknudge .w6-zh { font-family: var(--f-zh); font-weight: 400; color: var(--muted); margin-left: 6px; } .w6-picknudge.pulse { animation: savenote-in .3s ease; } /* Per-line "Small fixes" rows: theirs, then the suggestion. */ .fix-row { margin: 7px 0; padding: 7px 10px; border-radius: 10px; background: #fff; } .fix-was { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--coral); } .fix-now { color: var(--green-deep); font-weight: 600; margin-top: 2px; } /* Per-line checking on the notes step: the ✓ button, and the suggestion that appears under a line the moment it is checked — mechanics fixed, meaning untouched, one tap to accept. */ .w6-checkline { width: 46px; min-height: 44px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); font-size: 1.05rem; font-weight: 800; color: var(--green-dk); cursor: pointer; } .w6-fixbox { margin: 6px 0 2px; } .w6-fixwait { color: var(--muted); font-size: .9rem; } .w6-fixok { color: var(--green-deep); font-weight: 700; } .w6-fixwas { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--coral); } .w6-fixnow { color: var(--green-deep); font-weight: 700; margin: 2px 0 6px; } .w6-fixnow + .w6-fixuse, .w6-fixbox .btn { min-height: 40px; } /* "Going on uses the corrected sentences" — the small print under Small fixes that makes the adoption explicit rather than silent. */ .fix-note { margin-top: 8px; font-size: .88rem; color: var(--blue); font-weight: 600; } .fix-note .zh { font-family: var(--f-zh); font-weight: 400; } /* Word-level correction highlights (standing rule): the child sees exactly WHERE the mistake was and HOW it was fixed. Red = the word that was wrong; green = the fix. Whole lines are never crossed out. */ .dw-del { background: var(--coral-bg); color: var(--coral); text-decoration: line-through; text-decoration-thickness: 2px; border-radius: 5px; padding: 0 3px; font-weight: 600; } .dw-add { background: var(--mint); color: var(--green-deep); border-radius: 5px; padding: 0 3px; font-weight: 700; } .fix-was2, .w6-fixwas2 { color: var(--text); } .w6-fixwas2 { margin-bottom: 2px; } /* Daily Check: the answer button while the question is still being read. Visibly waiting, not broken — a disabled-and-silent button reads as a fault (the step-3 lesson). */ #testTalk.waiting { opacity: .6; } /* ============================================================================ RR-PRO SHELL SKIN (2026-08-15) — the rr-pro design law applied to the shared shell: sign-in + week/day hub. Colors and surfaces only; structure, fonts and every id/class the JS touches are unchanged. Source of truth: rr-pro/CLAUDE.md. ========================================================================== */ :root { --ink: #1c2321; /* headings: navy → ink */ --text: #1c2321; --blue: #2e6b4f; --blue-lt: #3d8464; --blue-dk: #245640; /* primary: blue → ranger green */ --gold: #f5c400; --gold-dk: #d9a800; --cream: #f6efdb; /* brand gold from the badge */ --green: #2e6b4f; --green-dk: #245640; --mint: #e3ede7; } body[data-bg="landing"], body[data-bg="login"], body[data-bg="student"], body[data-bg="read"] { background: radial-gradient(1200px 500px at 50% -200px, #efe9db 0%, #f4f1ea 60%); } /* ---- sign-in ---- */ .shell-badge { width: 76px; height: 76px; display: block; margin: 0 auto 8px; filter: drop-shadow(0 8px 20px rgba(20,20,20,.25)); } .shell-wordmark { font-family: var(--f-head); font-weight: 800; font-size: 22px; letter-spacing: .5px; color: var(--ink); margin-bottom: 2px; } .shell-wordmark em { font-style: normal; color: var(--gold-dk); } .shell-wordmark small { display: block; font-family: var(--f-ui); font-size: 10px; font-weight: 700; letter-spacing: 1.2px; color: var(--muted); margin-top: 3px; } .login-inner { border: 1px solid rgba(28,35,33,.08); border-radius: 24px; box-shadow: 0 1px 2px rgba(28,35,33,.05), 0 18px 50px rgba(28,35,33,.10); } /* the Colonel floats where the mascot floated */ .login-mascot { background: #efe7d4 url('/art/w7/colonel-hero.png') center 18%/cover no-repeat !important; border-radius: 50%; box-shadow: 0 10px 26px rgba(28,35,33,.18); overflow: hidden; width: 128px !important; height: 128px !important; } .login-mascot > * { display: none !important; } .week-chip { background: var(--gold); color: #141414; } .login-inner .fields input { border: 1.5px solid rgba(28,35,33,.14); background: #faf9f6; } .login-inner .fields input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(46,107,79,.12); } #joinBtn { background: var(--gold); color: #141414; box-shadow: 0 8px 0 var(--gold-dk); } #joinBtn:active { box-shadow: 0 3px 0 var(--gold-dk); } /* ---- the day picker / hub ---- */ .day-tab { background: #fff; border: 1px solid rgba(28,35,33,.10); color: var(--ink); box-shadow: 0 1px 3px rgba(28,35,33,.06); } .day-tab.on { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 4px 12px rgba(46,107,79,.3); } .passage-item { background: #fff; border: 1px solid rgba(28,35,33,.08); border-radius: 16px; box-shadow: 0 1px 3px rgba(28,35,33,.06); } .passage-item:not(.locked):active { transform: scale(.977); } .passage-item .pi-icon { background: var(--mint); border-radius: 12px; } .passage-item.done { border-color: rgba(217,168,0,.5); background: #fffdf4; } .passage-item.locked { background: #f6f4ee; box-shadow: none; opacity: .68; } /* ---- rr-pro progress card (hub) ---- */ .progress-card.rrp { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid rgba(28,35,33,.08); border-radius: 18px; box-shadow: 0 1px 3px rgba(28,35,33,.06); padding: 16px 18px; } .rrp-ring { position: relative; width: 72px; height: 72px; flex: 0 0 auto; } .rrp-ring svg { transform: rotate(-90deg); display: block; } .rrp-ring .tr { stroke: #ece8de; } .rrp-ring .vl { stroke: var(--blue); stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.16,1,.3,1) .3s; } .rrp-n { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .rrp-n b { font-family: var(--f-head); font-size: 16px; font-weight: 800; color: var(--ink); } .rrp-n span { font-size: 8.5px; color: var(--muted); font-weight: 700; letter-spacing: .5px; } .rrp-meta { flex: 1; min-width: 0; } .rrp-label { font-family: var(--f-head); font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 9px; } .rrp-route { display: flex; align-items: center; } .rrp-route .dot { width: 8px; height: 8px; border-radius: 50%; background: #ddd6c6; flex: 0 0 auto; } .rrp-route .dot.done { background: var(--blue); } .rrp-route .dot.here { width: 12px; height: 12px; background: var(--gold); box-shadow: 0 0 0 4px rgba(245,196,0,.25); } .rrp-route .seg { height: 2.5px; background: #ddd6c6; flex: 1; } .rrp-route .seg.done { background: var(--blue); } /* ---- the Colonel heads the hub ---- */ .stu-head .rr-mascot { background: #efe7d4 url('/art/w7/colonel-hero.png') center 18%/cover no-repeat !important; border-radius: 50%; width: 64px !important; height: 64px !important; box-shadow: 0 6px 16px rgba(28,35,33,.16); overflow: hidden; flex: 0 0 auto; } .stu-head .rr-mascot > * { display: none !important; } /* ---- landing / week chooser ---- */ .hero-emoji { display: none !important; } .hero-blobs i:nth-child(1) { background: rgba(245,196,0,.16) !important; } .hero-blobs i:nth-child(2) { background: rgba(46,107,79,.12) !important; } .hero-blobs i:nth-child(3) { background: rgba(201,182,141,.18) !important; } #heroMascot { background: #efe7d4 url('/art/w7/colonel-hero.png') center 16%/cover no-repeat !important; border-radius: 50%; aspect-ratio: 1; box-shadow: 0 14px 34px rgba(28,35,33,.18); overflow: hidden; } #heroMascot > * { display: none !important; } .week-card { background: #fff; border: 1px solid rgba(28,35,33,.08); box-shadow: 0 1px 3px rgba(28,35,33,.06), 0 8px 24px rgba(28,35,33,.06); } .week-card:hover { transform: translateY(-3px); box-shadow: 0 2px 6px rgba(28,35,33,.08), 0 16px 36px rgba(28,35,33,.10); } .week-card:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(28,35,33,.06); } .week-card.current { box-shadow: 0 0 0 3px var(--gold), 0 10px 28px rgba(217,168,0,.28); } .week-card.current:hover { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--gold), 0 16px 36px rgba(217,168,0,.32); } .week-card.locked { background: #f6f4ee; box-shadow: none; } .passage-item .pi-icon svg { width: 26px; height: 26px; display: block; }