:root{ /* Mirrors static/main.css so the app and the courses share a voice. */ --font-ui-latin:'DM Sans'; --font-ui-cjk-tw:'Noto Sans TC','PingFang TC','Microsoft JhengHei'; --font-heading-latin:var(--font-ui-latin),var(--font-ui-cjk-tw),-apple-system,sans-serif; --font-learning-content:var(--font-ui-latin),var(--font-ui-cjk-tw),-apple-system,sans-serif; --bg:#281720; --bg-soft:#3a2230; --panel:#452936; --panel-2:#51313f; --line:rgba(239,211,194,.16); --ink:#fffaf5; --dim:#d5b9c4; --said:#d5b9c4; --gold:#f0bf58; --gold-soft:#ffe2a1; --mint:#a8e6cf; --red:#ee5b63; --success:#2f9e6f; --shadow:0 22px 60px rgba(12,4,8,.28); } *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; } body{ margin:0; background: radial-gradient(circle at 82% 8%,rgba(240,191,88,.12),transparent 25%), radial-gradient(circle at 12% 90%,rgba(168,230,207,.08),transparent 28%), linear-gradient(155deg,var(--bg-soft),var(--bg) 64%); color:var(--ink); /* 拉丁排在中文前面：中文字在拉丁字型裡找不到，會自然落到 Noto Sans TC， 但英文就不會被中文字型的拉丁字取代。 */ font-family:var(--font-ui-latin),var(--font-ui-cjk-tw),-apple-system,sans-serif; } body::before{ content:attr(data-city); position:fixed; right:-18px; bottom:4vh; color:rgba(255,255,255,.018); font-family:Georgia,serif; font-size:clamp(90px,24vw,190px); font-weight:600; letter-spacing:-8px; writing-mode:vertical-rl; pointer-events:none; } /* 100dvh, with 100vh as the fallback for browsers that lack it. On iOS Safari 100vh is the height WITHOUT the toolbars, so the last thing on the page — the start button — sat underneath the bottom bar. */ .wrap{ max-width:540px; margin:0 auto; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; position:relative; } header{ padding:18px 20px 10px; } .course-nav{ display:flex; align-items:stretch; gap:5px; margin:0 -2px 14px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:none; } .course-nav::-webkit-scrollbar{ display:none; } .course-nav.has-scenarios{ flex-direction:column; align-items:stretch; gap:7px; } .nav-row{ display:flex; justify-content:center; gap:6px; overflow-x:auto; scrollbar-width:none; } .nav-row::-webkit-scrollbar{ display:none; } .scenario-row .course-link{ min-height:36px; flex-direction:row; gap:5px; } .step-row .course-link{ min-height:42px; } .scenario-select-wrap{ width:100%; max-width:430px; margin:0 auto; position:relative; } .scenario-select{ width:100%; appearance:none; border:1px solid rgba(255,255,255,.3); border-radius:13px; background:rgba(255,255,255,.1); color:#fff; padding:9px 38px 9px 14px; font:700 13px/1.2 inherit; cursor:pointer; } .scenario-select-wrap::after{ content:"⌄"; position:absolute; right:14px; top:50%; transform:translateY(-58%); color:#fff; pointer-events:none; font-size:17px; } .scenario-select option{ color:#24383d; background:#fff; } .course-label{ display:none; } .course-link{ min-width:56px; min-height:43px; display:flex; flex-direction:column; justify-content:center; gap:1px; border-radius:14px; border:1px solid var(--line); color:var(--dim); text-align:center; text-decoration:none; font-size:9px; background:rgba(255,255,255,.025); padding:5px; } .course-link .mission-icon{ font-size:14px; line-height:1; font-weight:700; } .course-link .mission-name{ white-space:nowrap; } .course-link.on{ background:linear-gradient(145deg,var(--gold-soft),var(--gold)); border-color:var(--gold); color:var(--bg); font-weight:700; box-shadow:0 8px 24px rgba(240,191,88,.2); } .course-link.locked{ opacity:.38; cursor:not-allowed; } header h1{ font-size:22px; margin:0; letter-spacing:.01em; } header p{ margin:4px 0 0; color:var(--dim); font-size:13px; } body.intro-mode header{ padding-bottom:2px; } body.intro-mode header h1,body.intro-mode header p{ display:none; } .stage{ flex:1; padding:8px 20px calc(24px + env(safe-area-inset-bottom, 0px)); } .btn{ display:block; width:100%; border:0; border-radius:14px; padding:15px; font-size:17px; font-weight:600; cursor:pointer; text-decoration:none; } .btn.gold{ background:var(--gold); color:#3a2230; } .btn.start-cta{ width:auto; min-width:210px; max-width:82%; margin-left:auto; margin-right:auto; padding:10px 20px; border-radius:14px; font-size:16px; } .orientation-actions{ width:min(100%,360px); margin:22px auto 0; display:grid; gap:10px; } .orientation-actions.single-action{ width:min(100%,320px); } /* Flat, single fill, no lift. A gradient plus an inner highlight plus a coloured drop shadow is three tricks doing the job one solid colour does, and it is the loudest thing dating this screen. */ .btn.orientation-start{ width:100%; min-width:0; max-width:none; margin:0; padding:14px 24px; border:0; border-radius:14px; background:var(--gold); color:#34232c; text-align:center; letter-spacing:-.01em; transition:background-color .16s ease; } .btn.orientation-start:hover{ background:#eecb5f; } .start-choice{ width:auto; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:12px; } .start-choice .dog-action{ width:fit-content; max-width:90%; padding:10px 18px; border-radius:12px; font-size:.92rem; font-weight:600; white-space:nowrap; } .start-choice .dog-action.secondary{ background:#fff; color:var(--gold-ink); border:2px solid rgba(209,157,43,.55); } .start-choice .dog-action.primary{ background:var(--gold); color:#3a2230; border:2px solid var(--gold); } /* The compact sizing above is for the two-button row. A lone button — the section transition, or a mission start with no opener — carries a longer label and looks squat at that size, so it takes the mission CTA's shape. */ /* The lone continue button. Same treatment as .btn.orientation-start, which is the point: this rule carried its own copy of the gradient, the inset highlight and the coloured drop, so flattening one button left this one behind on a screen the learner sees between every section. */ .start-choice .dog-action:only-child{ width:min(100%,320px); max-width:100%; padding:15px 26px; border-radius:14px; font-size:17px; letter-spacing:-.01em; border:0; background:var(--gold); color:#34232c; transition:background-color .16s ease; } .start-choice .dog-action:only-child:hover{ background:#eecb5f; } .btn.teal{ background:#08a0bc; color:#fff; } .center>.btn.teal{ max-width:420px; margin-left:auto; margin-right:auto; } .btn.next-compact{ display:inline-block; width:auto; min-width:150px; margin:18px auto 10px; padding:13px 28px; background:#fff; color:#0793ad; border:2px solid #62b8cc; border-radius:18px; text-decoration:none; } .completion-stage{ min-height:620px; } /* 按鈕跟著內容走。原本釘在舞台 60% 的位置，內容一少中間就開一個大洞。 */ .completion-actions{ margin:30px auto 0; width:min(420px,calc(100% - 40px)); display:flex; flex-direction:column; align-items:center; position:relative; z-index:3; } .completion-actions .btn.completion-compact{ width:min(100%,280px); min-width:0; margin:8px auto; padding:13px 24px; border-radius:18px; } .completion-secondary{ display:flex; flex-direction:row; gap:12px; width:min(100%,420px); margin:10px auto 0; } .completion-secondary .btn.completion-compact{ flex:1; width:auto; min-width:0; margin:0; padding:13px 12px; font-size:15px; border-radius:18px; color:#fffaf5; border:1px solid rgba(255,255,255,.16); background-color:var(--teal); background-image: linear-gradient(145deg,rgba(255,255,255,.07),rgba(0,35,43,.10)), repeating-linear-gradient(135deg,transparent 0 12px,rgba(255,255,255,.045) 12px 13px); box-shadow:0 8px 20px rgba(8,120,139,.16); transition:transform .16s ease,box-shadow .16s ease,filter .16s ease; } .completion-secondary .btn.completion-compact:hover{ transform:translateY(-1px); filter:saturate(1.06); box-shadow:0 11px 24px rgba(8,120,139,.22); } .btn.ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line); } .btn:disabled{ opacity:.4; cursor:default; } /* 選做的關卡：看得到、點得到，但視覺上不跟必走的關卡搶。 */ .course-link.optional{ opacity:.72; border-style:dashed; } .roadmap-item.optional{ opacity:.72; } .card{ background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018)),var(--panel); border:1px solid var(--line); border-radius:18px; padding:14px 16px; margin:10px 0; box-shadow:0 9px 26px rgba(12,4,8,.12); transition:box-shadow .18s,border-color .18s,transform .18s; } .card.glow{ box-shadow:inset 0 0 0 2px var(--gold); border-color:var(--gold); } /* Was transform:scale(1.05) — the card jumped and shoved its neighbours a pixel each way. The ring says the same thing without moving the layout. */ .card.now{ box-shadow:inset 0 0 0 2px var(--gold); border-color:var(--gold); z-index:1; } .bigcard{ background:linear-gradient(150deg,var(--panel-2),var(--panel)); border:1px solid var(--line); border-radius:26px; padding:38px 22px 46px; min-height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; position:relative; box-shadow:var(--shadow); overflow:hidden; } .orientation-hero{ min-height:440px; align-items:stretch; text-align:left; padding:30px 26px; } .orientation-hero.orientation-hero--unframed{ min-height:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; overflow:visible; } .orientation-hero.orientation-hero--unframed::before{ display:none; } .orientation-hero::before{ content:attr(data-location); white-space:pre; position:absolute; right:20px; top:18px; color:rgba(255,255,255,.05); font:800 33px/1 Georgia,serif; text-align:right; } .passport-stamp{ width:max-content; color:var(--gold-soft); font-size:var(--text-meta); font-weight:600; letter-spacing:.12em; text-transform:uppercase; } .hero-kicker{ color:var(--mint); font-size:15px; font-weight:600; margin-top:auto; } .hero-title{ font-family:var(--font-heading-latin); font-size:var(--text-display); line-height:var(--lh-display); margin:7px 0 10px; font-weight:600; letter-spacing:-.025em; } [data-hl="zh"] .hero-title{ font-weight:500; letter-spacing:0; } /* Sits on the title's own baseline rather than above it: a course badge stacked over the name reads as a second heading. */ .hero-icon{ margin-right:10px; font-size:.85em; vertical-align:.04em; } .hero-copy{ color:var(--dim); font-size:var(--text-body); line-height:var(--lh-body); margin:0 0 22px; } .scenario-task-lead{ margin:10px 0 2px; color:var(--dim); font-size:var(--text-meta); font-weight:650; letter-spacing:.04em; text-transform:uppercase; } .scenario-task{ margin:0 0 4px; color:var(--ink); font-size:var(--text-body); line-height:var(--lh-body); font-weight:600; } /* Amber = not yet, green = done — the same legend the bulb topic list uses, so a learner reads both lists the same way. */ .roadmap-legend{ display:flex; gap:18px; margin:6px 0 2px; font-size:var(--text-meta); color:var(--dim); } .roadmap-legend .dot{ display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:6px; vertical-align:-1px; } /* Named for what they mean, not what colour they carry: `dot.amber` had to be renamed the moment the colour was questioned, and a class that has to be renamed to change a colour is a class that was named wrong. */ .roadmap-legend .dot.pending{ background:var(--gold); } .roadmap-legend .dot.done{ background:var(--success); } /* Tighter between rows, looser above the list. Even gaps everywhere made the list read as six unrelated bars instead of one block. */ .mission-roadmap{ display:grid; gap:6px; margin-top:14px; } /* Translucent material rather than a solid box: a thin wash of the ink colour, a hairline at low alpha, and a blur so whatever passes behind (the city watermark) shows through instead of being covered. Opaque white on white needed a hard border to exist at all — this does not. */ .roadmap-item{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:13px; background:rgba(255,255,255,.04); border:1px solid var(--line); -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px); } .roadmap-number{ width:26px; height:26px; display:grid; place-items:center; border-radius:50%; flex:0 0 auto; color:var(--gold-ink); background:var(--gold); font-size:12px; font-weight:700; } .roadmap-item.complete .roadmap-number{ color:#fff; background:var(--success); } .roadmap-check{ flex:0 0 auto; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:rgba(47,158,111,.16); color:var(--success); font-size:14px; font-weight:800; } .roadmap-text{ min-width:0; flex:1; font-size:var(--text-body); color:var(--ink); font-weight:500; letter-spacing:-.01em; } .roadmap-free-badge{ flex:0 0 auto; padding:4px 8px; border-radius:999px; background:rgba(240,185,68,.16); color:#9a6500; font-size:10px; font-weight:750; letter-spacing:.08em; } .scenario-title-row{ display:flex; align-items:center; gap:10px; } .scenario-title-row .hero-title{ flex:0 1 auto; } .mission-intro{ background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),var(--panel); border:1px solid var(--line); border-radius:22px; padding:20px; margin-bottom:12px; box-shadow:var(--shadow); } .mission-eyebrow{ color:var(--gold); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; } .mission-title{ font-size:25px; line-height:1.25; margin:7px 0 5px; font-weight:600; } .mission-subtitle{ color:var(--dim); font-size:14px; line-height:1.55; } .compact-mission-title{ margin:2px 0 14px; color:var(--ink); font-size:25px; line-height:1.25; font-weight:600; } /* Fills whatever the stage has left, rather than a fixed 620px. That number was tuned on one screen: on a phone whose visible area is 700px it made header + padding + 620 = 746, so the start button hung 46px below the fold. `.stage` is already flex:1 inside a 100dvh wrap, so stretching to it is the same intent without the magic number. */ /* The class both screens that use this layout set — the mission opener and the section transition. `body.intro-mode` covered only the first. */ .stage.mission-start-stage{ display:flex; flex-direction:column; } .mission-start-layout{ flex:1; min-height:0; display:flex; flex-direction:column; } .mission-start-content{ width:100%; } .mission-start-layout .compact-mission-title{ text-align:center; margin-top:4px; } .mission-start-layout .mission-overview{ width:100%; } .intro-text-copy{ white-space:pre-line; line-height:1.75; } .mission-start-layout .mission-start-spacer{ flex:1; min-height:24px; } /* The mission opener and the two section transitions have to land in exactly the same place: you cross between them in a single tap, and anything that moves reads as the page jumping. Three things used to move — a title of one line or two, a tip of one line or two, and the opener's row of dots, which the transitions did not have. Each is reserved, so the block is a constant height and centring it puts all three at the same y. */ /* Bottom-aligned inside the reserved two lines, not centred: a one-line title centred in a two-line box put half a line of air between it and the tip below, and those two are one thought. The spare line goes above instead. */ .mission-start-layout .compact-mission-title{ min-height:2.5em; display:flex; align-items:flex-end; justify-content:center; margin-bottom:10px; } /* The box hugs its own text; the space for a second line is reserved on the row around it instead. A `min-height` on the box itself made every one-line tip sit in a two-line panel — which is what "too tall" was. Reserving it one level up keeps the three screens identical without inflating the box. */ .mission-start-layout .mission-overview{ min-height:92px; } .mission-start-layout .start-summary{ min-height:0; margin:0; padding:14px 18px; } .mission-start-layout .dots{ min-height:8px; } .mission-start-layout.sparse .mission-start-content{ flex:1; display:flex; flex-direction:column; justify-content:center; } .mission-start-layout.sparse .mission-start-spacer{ display:none; } .mission-start-layout .btn.gold{ flex:0 0 auto; } .mission-brief{ display:grid; gap:10px; } .brief-row{ background:rgba(255,255,255,.045); border:1px solid var(--line); border-radius:15px; padding:14px; } .brief-label{ color:var(--gold); font-size:11px; font-weight:600; letter-spacing:.08em; margin-bottom:4px; } .brief-value{ color:var(--ink); font-size:16px; font-weight:600; } /* Bigger than a note: on these screens this line is the only content there is, and it was set at footnote size. */ .start-summary{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:18px; margin:10px 0; text-align:center; color:var(--dim); font-size:18px; } .start-summary strong{ color:var(--gold); font-size:20px; } .rule-t.big{ font-size:27px; } .rule-n.big{ font-size:17px; color:var(--dim); line-height:1.7; } .rule-t{ font-weight:600; color:var(--gold); font-size:15px; } .rule-n{ color:var(--dim); font-size:13px; margin-top:2px; } .rule-x{ font-family:var(--font-learning-content); color:var(--mint); font-size:15px; font-weight:600; margin-top:6px; } .phrase{ font-family:var(--font-learning-content); font-size:40px; font-weight:600; letter-spacing:-.015em; text-align:center; text-wrap:balance; color:var(--mint); } .phrase-row{ display:flex; align-items:center; justify-content:center; gap:12px; margin:16px 0 6px; } /* Both practice cards put playback and copy on one left-aligned reading axis. The warm-up card used to centre its phrase instead, and a centred block is what made the play button look orphaned the moment a word wrapped: the glyphs pulled to the middle of a full-width box while the button stayed out at the edge, lined up against nothing. Left-aligned, the first line starts right beside it — and step 1 and step 2 now read the same way. */ .sentence-card .phrase-row, .pronun-card .phrase-row{ width:100%; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; justify-content:initial; margin:2px 0 4px; } .sentence-card .phrase, .pronun-card .phrase{ min-width:0; text-align:left; text-wrap:pretty; } .pronun-card{ --play-gutter:58px; } .pronun-card .word-meta{ align-items:stretch; } /* `.word-meta .meaning{margin:0}` further down carries the same weight and comes later, so the gutter needs one more class to survive it. */ .pronun-card .word-meta .meaning{ text-align:left; margin:0 0 0 var(--play-gutter); } .sentence-card .phrase{ font-size:29px; line-height:1.18; font-weight:500; letter-spacing:-.01em; } /* The meaning reads under the sentence it translates, so it starts where the sentence starts: past the play button's column and the gap beside it. It was centred while the sentence was left-aligned, so it slid left and right with every phrase's length. */ .sentence-card{ --play-gutter:58px; } .sentence-card .word-meta{ align-items:stretch; } .sentence-card .meaning{ font-size:18px; margin:0 0 4px var(--play-gutter); text-align:left; } .sentence-card .chunks{ gap:0; margin:2px 0 8px; padding:3px 0; } .sentence-card .chunks-fold{ margin:2px 0 8px; } .sentence-card .chunks-fold .chunks{ margin:0; padding:0 13px 8px; } .sentence-card .chunk{ padding:4px 11px; } .sentence-card .structure{ padding:9px 11px; margin-bottom:9px; } .playbtn{ width:46px; height:46px; border-radius:50%; border:0; background:var(--gold); color:#3a2230; font-size:15px; cursor:pointer; flex:0 0 auto; } .playbtn:active{ transform:scale(.92); } .meaning{ text-align:center; color:var(--mint); font-size:20px; margin:2px 0 5px; } .word-meta{ display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; margin:2px 0 14px; } .word-meta .meaning{ margin:0; } /* A tint, not a panel. The framed box it used to sit in read as "this is the important part", which is backwards for a note — but with nothing at all the lines float loose under the bubble. A faint band with no border groups them without competing with the sentence above. */ .notes{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:6px 0; padding:9px 13px; margin:6px 0 16px; overflow:hidden; border-radius:10px; background:rgba(255,255,255,.05); border:0; } .notes:empty{ display:none; } .notes li{ display:flex; align-items:center; padding:0; margin:0; font-size:17px; color:#f0dbe6; transition:box-shadow .2s,background .2s,transform .2s; } .note-icon{ align-self:flex-start; margin-right:6px; } .note-copy{ display:block; min-width:0; } .notes li+li::before{ content:"/"; padding:0 10px; color:var(--dim); font-weight:400; } .pronun-card .notes{ flex-direction:column; align-items:stretch; gap:4px; } /* Both rows the same size, weight and colour. The phonetic hint was set a notch smaller and paler to mark it as secondary, but two lines sitting on one another at different sizes is harder to read than either — and the emoji scale with the type, so the markers came out mismatched too. */ .pronun-card .notes li+li::before{ display:none; } /* Back above the mic, on its own line. Parked in the notes panel's corner it read as part of the note rather than as a way out to a dictionary — but it stays small: it was a 32px emoji, which is a lot of weight for a link most people never press. */ .pronun-link{ display:block; width:max-content; margin:2px auto 12px; font-size:22px; line-height:1; text-decoration:none; opacity:.7; } .pronun-link:hover{ opacity:1; } .teaching{ background:rgba(232,184,75,.16)!important; box-shadow:0 0 0 3px var(--gold),0 0 24px rgba(232,184,75,.28); transform:scale(1.025); } .usage-note{ background:#ead8c7; color:#563b39; border:1px solid #f3e6da; border-radius:12px; padding:12px 14px; margin:4px 0 16px; font-size:16px; line-height:1.55; box-shadow:0 5px 16px rgba(20,8,14,.14); } .scene-label{ display:inline-block; color:var(--gold); border:1px solid var(--line); border-radius:999px; padding:6px 11px; font-size:13px; margin-bottom:12px; } .dialogue-bubble{ border-radius:22px; padding:18px; margin:8px 0; line-height:1.5; position:relative; box-shadow:none; } .dialogue-bubble.replayable{ cursor:pointer; transition:transform .16s,border-color .16s,background .16s; } .dialogue-bubble.replayable:active{ transform:scale(.99); } .dialogue-bubble.ai{ background:linear-gradient(145deg,rgba(168,230,207,.18),rgba(168,230,207,.07)); border:1px solid rgba(168,230,207,.38); border-bottom-left-radius:7px; } .dialogue-bubble.you{ background:linear-gradient(145deg,rgba(240,191,88,.16),rgba(240,191,88,.06)); border:1px solid rgba(240,191,88,.35); border-bottom-right-radius:7px; padding:13px 18px; margin-top:14px; } .dialogue-bubble.you.guided-answer{ background:#fffaf0; border-color:#eee0b9; } @keyframes learner-turn-glow{ 0%,100%{ box-shadow:0 0 0 2px rgba(222,170,43,.34),0 7px 22px rgba(222,170,43,.10); } 50%{ box-shadow:0 0 0 4px rgba(222,170,43,.58),0 8px 28px rgba(222,170,43,.22); } } .dialogue-bubble.you.your-turn{ border-color:#d9aa36; animation:learner-turn-glow 1.8s ease-in-out infinite; } @keyframes learner-listening-glow{ 0%,100%{ box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 48%,transparent),0 8px 24px rgba(222,170,43,.16); } 50%{ box-shadow:0 0 0 7px color-mix(in srgb,var(--gold) 68%,transparent),0 10px 34px rgba(222,170,43,.30); } } .dialogue-bubble.you.is-listening{ border-color:var(--gold); animation:learner-listening-glow 1.15s ease-in-out infinite; } /* 自動播放被瀏覽器擋掉時的提示：輕輕呼吸，告訴人這裡可以點。 */ .needs-tap{ animation:needs-tap 1.6s ease-in-out infinite; } @keyframes needs-tap{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } } @media (prefers-reduced-motion:reduce){ .needs-tap{ animation:none; outline:2px solid var(--gold); outline-offset:3px; } .dialogue-bubble.you.your-turn{ animation:none; box-shadow:0 0 0 3px rgba(222,170,43,.46); } .dialogue-bubble.you.is-listening{ animation:none; box-shadow:0 0 0 5px color-mix(in srgb,var(--gold) 58%,transparent); } } .guided-answer-line{ font-size:17px; line-height:1.45; } .guided-answer-line:first-child{ font-size:14px; color:var(--dim); } .guided-answer-line+.guided-answer-line{ margin-top:6px; } .guided-answer-phrase{ color:var(--mint); font-family:var(--font-learning-content); font-size:24px; font-weight:600; line-height:1.25; } .challenge-prompt{ color:var(--ink); font-size:17px; line-height:1.45; } .challenge-hint-answer{ display:none; width:100%; margin-top:10px; padding:0; border:0; background:transparent; color:#987019; text-align:left; cursor:pointer; font-family:var(--font-learning-content); font-size:22px; font-weight:600; } .challenge-hint-answer.visible{ display:block; } .challenge-hint-play{ margin-right:8px; color:#6e858a; font-size:17px; } .speaker{ color:var(--dim); font-size:12px; margin-bottom:5px; } .dialogue-speaker-label{ color:var(--dim); font-size:13px; font-weight:600; margin:0 0 -7px 14px; position:relative; z-index:1; width:max-content; background:#fff; padding:0 6px; } .dialogue-you-label{ color:#987019; } .dialogue-bubble.ai{ padding:14px 18px 14px 52px; } .bubble-play{ position:absolute; left:18px; top:50%; transform:translateY(-50%); color:#6e858a; font-size:20px; line-height:1; } .dialogue-text{ font-family:var(--font-learning-content); color:var(--mint); font-size:22px; font-weight:600; } .dialogue-bubble.ai .dialogue-text{ font-size:24px; line-height:1.25; } .sentence-continuation{ display:inline-block; margin-top:.12em; } .dialogue-meaning{ color:#f0dbe6; font-size:15px; line-height:1.4; margin-top:5px; } /* Steps 1 and 2 present their line in the dialogue's own bubble: the sentence big, its meaning directly under it, both inside one panel. They used to put the sentence loose on the page and its notes in a tinted box — which framed the footnote and left the sentence unframed, exactly backwards. */ .phrase-bubble{ margin:10px 0 6px; } /* The gold disc, not the dialogue's bare triangle: on these two steps the sentence is the thing you play over and over, and a filled circle says "press me" from across the room. Anchored to the first line, because a sentence here often wraps and a vertically centred disc then floats. */ .dialogue-bubble.ai.phrase-bubble{ padding:16px 18px 16px 66px; } .phrase-bubble .bubble-play{ left:16px; top:19px; transform:none; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--gold); color:#3a2230; font-size:13px; } .pronun-card .phrase-bubble .dialogue-text{ font-size:32px; line-height:1.2; } .sentence-card .phrase-bubble .dialogue-text{ font-size:26px; line-height:1.28; font-weight:600; } .phrase-bubble .dialogue-meaning{ font-size:17px; line-height:1.45; margin-top:7px; } .dialogue-bubble.you .dialogue-meaning{ font-size:17px; line-height:1.4; } /* 中文密度高，同樣的 px 讀起來比拉丁字大一號。英文介面把幾個「意思」層級 的字稍微加大，才壓得住上面的目標語句子。 */ [data-hl="en"] .dialogue-meaning{ font-size:16px; } /* The notes read at the meaning's size, so they follow it down here too. */ [data-hl="en"] .notes li{ font-size:16px; } [data-hl="en"] .guided-answer-line:first-child{ font-size:15px; } [data-hl="en"] .challenge-prompt{ font-size:18px; } /* The fold owns the panel now; the list inside it is plain. Folded, the summary alone is the panel — the chunk words on one line, and a question mark that says the meanings are one tap away. */ /* Folded, this is one question mark and nothing else — no band, no words. Open, it becomes the tinted panel with its label and rows. */ .chunks-fold{ margin:6px 0 14px; overflow:hidden; border-radius:10px; background:transparent; border:0; } .chunks-fold[open]{ background:rgba(255,255,255,.05); } .chunks-fold > summary{ display:flex; align-items:center; justify-content:center; gap:10px; padding:8px 0; cursor:pointer; list-style:none; } .chunks-fold[open] > summary{ padding:9px 13px 2px; } .chunks-fold > summary::-webkit-details-marker{ display:none; } /* Gold, not grey on grey: it is the one thing in this panel you can press. */ .chunks-toggle{ flex:0 0 auto; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:rgba(232,184,75,.16); color:var(--gold); font-size:13px; font-weight:700; line-height:1; } .chunks-toggle::after{ content:'?'; } /* Open, the caret sits alone at the top right. No heading: the rows under it say what they are, and a label would only name what is already legible. */ .chunks-fold[open] > summary{ justify-content:flex-end; } .chunks-fold[open] .chunks-toggle{ background:transparent; } .chunks-fold[open] .chunks-toggle::after{ content:'▴'; } .chunks{ display:flex; flex-direction:column; gap:0; margin:4px 0 14px; padding:5px 0; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:12px; overflow:hidden; } .chunks-fold .chunks{ margin:0; padding:0 13px 8px; background:transparent; border:0; border-radius:0; } .chunk{ width:100%; display:flex; align-items:center; gap:9px; background:transparent; border:0; border-radius:0; padding:5px 0; text-align:left; color:#f0dbe6; font:inherit; font-size:18px; cursor:pointer; } .chunk:hover{ background:rgba(255,255,255,.05); } .chunk.chunk-static{ cursor:default; } .chunk.chunk-static:hover{ background:transparent; } .chunk-play{ flex:0 0 auto; color:#987019; font-size:12px; } .chunk strong{ color:var(--mint); font-size:18px; } .chunk span{ color:#f0dbe6; font-size:18px; } .dialogue-chunks{ width:auto; display:flex; flex-flow:row wrap; align-items:center; gap:3px 16px; margin:3px 18px 11px 52px; padding:0; background:transparent; border:0; border-radius:0; overflow:visible; } .dialogue-chunks .chunk{ width:auto; flex:0 1 auto; gap:5px; padding:2px 0; color:var(--dim); line-height:1.25; } .dialogue-chunks .chunk strong{ font-size:14px; font-weight:600; } .dialogue-chunks .chunk span{ font-size:14px; color:var(--dim); } .structure{ color:#563b39; background:#ead8c7; border:1px solid #f3e6da; border-left:4px solid #bd8a4a; border-radius:12px; padding:12px 14px; margin:0 0 16px; line-height:1.55; box-shadow:0 5px 16px rgba(20,8,14,.14); } .row{ display:flex; justify-content:center; gap:10px; margin-top:8px; } .row .btn{ flex:0 1 150px; width:auto; padding:10px 16px; font-size:14px; } .dots{ display:flex; justify-content:center; gap:6px; margin:16px 0 8px; } .dot{ width:8px; height:8px; border-radius:50%; background:var(--line); } .dot.on{ background:var(--gold); } .legend{ text-align:center; color:var(--dim); font-size:12.5px; line-height:1.9; margin-top:6px; padding-top:10px; border-top:1px solid var(--line); } .score{ text-align:center; margin:12px 0; min-height:44px; } .score .big{ font-size:30px; font-weight:700; } .result-one-line{ margin-top:10px; display:flex; align-items:baseline; justify-content:center; gap:10px; flex-wrap:wrap; text-align:center; font-size:clamp(11px,2.8vw,15px); } .result-transcript{ color:var(--said); } .result-score{ display:inline-flex; align-items:baseline; gap:4px; color:var(--teal); } .result-score strong{ font-size:clamp(25px,5vw,34px); line-height:1; font-weight:750; letter-spacing:-.04em; } .result-score small{ color:var(--dim); font-size:12px; font-weight:400; } .result-feedback{ font-weight:650; } @media (max-width:1024px){ .result-one-line{ flex-wrap:wrap; justify-content:center; align-items:baseline; gap:6px 10px; font-size:16px; } .result-one-line .result-transcript{ flex-basis:100%; max-width:100%; overflow-wrap:anywhere; line-height:1.4; } } .said{ color:var(--dim); font-size:13px; } .result-detail{ display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap; } .answer-reference{ width:auto; margin:12px auto 4px; padding:10px 16px; border:1px solid var(--line); border-radius:14px; background:var(--panel); color:var(--gold); cursor:pointer; box-shadow:0 8px 22px rgba(12,4,8,.1); display:inline-flex; align-items:center; justify-content:center; gap:9px; } .answer-reference span{ font-size:15px; line-height:1; } .answer-reference strong{ font-family:var(--font-learning-content); font-size:18px; font-weight:600; } /* 結業成績卡裡的重練清單：靠左等寬，讀起來才像一份清單而不是幾顆散開的按鈕。 */ .completion-stage .card .answer-reference{ display:flex; width:100%; margin:6px 0 0; justify-content:flex-start; text-align:left; box-shadow:none; color:var(--ink); } .completion-stage .card .answer-reference strong{ font-size:16px; } /* 結業的解鎖面板：第一列是剛完成的，其餘鎖著，整塊連到課程目錄。 */ .unlock-panel{ display:block; padding:0; color:#fffaf5; text-align:left; text-decoration:none; } .unlock-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } .unlock-course{ min-height:142px; display:flex; flex-direction:column; align-items:flex-start; padding:15px; border:1px solid rgba(255,255,255,.15); border-radius:14px; background:rgba(255,255,255,.055); } .unlock-course-icon{ font-size:27px; line-height:1; } .unlock-course strong{ margin-top:18px; color:#fffaf5; font-size:17px; line-height:1.25; } .unlock-course-copy{ margin-top:7px; color:rgba(255,250,245,.64); font-size:12px; line-height:1.4; } .unlock-course.suggested{ border-color:rgba(240,191,88,.38); background:rgba(240,191,88,.09); } .unlock-course .unlock-badge{ display:block; margin-top:auto; padding-top:9px; color:#ffe2a1; font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; } .unlock-course.coming-soon{ color:rgba(255,250,245,.52); } .unlock-course.coming-soon strong{ color:rgba(255,250,245,.58); } .unlock-row{ display:flex; align-items:center; gap:8px; padding:7px 0; font-size:15px; } .unlock-row + .unlock-row{ border-top:1px solid rgba(255,255,255,.12); } .unlock-row strong{ font-weight:600; flex:1; min-width:0; } .unlock-row > span{ flex:0 0 auto; } /* 有標籤的那一堂是建議的下一步——給它一點底色，讓三堂不再長得一樣。 */ .unlock-row.suggested{ margin:0 -8px; padding-left:8px; padding-right:8px; border-radius:10px; background:rgba(240,191,88,.12); } .unlock-row .unlock-badge{ color:#ffe2a1; opacity:1; } /* 課程目錄不該只能從結業頁進去——任務頁固定留一個入口。 */ /* The way out sits last, under the offer. It used to come between the start button and the unlock card, so the page put an exit between the thing you came to do and the thing being sold. */ .catalog-link{ display:block; width:fit-content; margin:16px auto 0; padding:9px 14px; border:0; border-radius:12px; background:none; text-align:center; text-decoration:none; color:var(--teal); font-weight:650; font-size:14px; transition:color .16s ease,background-color .16s ease; } .catalog-link:hover{ background-color:rgba(8,120,139,.08); } /* Quieter than the catalogue link above it: leaving is a smaller decision than browsing, and this is the last thing on the page. */ /* The way back into the app, so it is a control rather than a caption: --dim at this size was the quietest thing on the screen. */ .catalog-link.app-link{ margin-top:6px; padding:7px 14px; border:1px solid var(--line); border-radius:999px; color:var(--teal); font-weight:600; } .catalog-link.app-link:hover{ border-color:var(--teal); } /* 結業頁只剩這一個出口。跟課程裡的主要行動鈕同一個填色，讓它讀起來是同一個 產品的東西，不是另外貼上去的促銷按鈕。 */ /* Signed out this is an and signed in a