/* 高考 3500 · 词族学习页（Claude 试点）。Tokens follow design.md / design-kit tokens.css. */ @font-face { font-family: "SerifEN"; src: url("fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "SerifEN"; src: url("fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); font-weight: 600 800; font-display: swap; } @font-face { font-family: "SerifEN"; src: url("fonts/source-serif-4-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "SerifEN"; src: url("fonts/source-serif-4-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; unicode-range: U+0100-024F, U+0250-02AF, U+1E00-1EFF; font-display: swap; } :root { --paper: #F8F3EB; --canvas: #F3EFE7; --white: #FFFDF8; --ink: #242115; --body: rgba(36,33,21,.84); --muted: #857D6E; --hair: #E5DCCD; --line: #DDD2C1; --olive: #625C3B; --olive-d: #4D4830; --olive-s: rgba(98,92,59,.12); --panel: #272619; /* functional washes: low-saturation, warm, all derived from the kit's success / warning / danger / info family */ --mem: #8A6A2C; --mem-bg: #F5EDD9; --mem-ln: #E6D6B2; /* 记忆：麦黄 */ --use: #3F6467; --use-bg: #E9EFEC; --use-ln: #CFDCD7; /* 用法：雾青 */ --syn: #55693D; --syn-bg: #EAEEDF; --syn-ln: #D3DCC0; /* 近义：苔绿 */ --ant: #8D4B3F; --ant-bg: #F5E6E0; --ant-ln: #E7CBC1; /* 反义：赭红 */ --conf: #9A5E22; --conf-bg: #F6E8D6; --conf-ln: #EBD3B3; /* 易混：杏橙 */ --rel: #4F6479; --rel-bg: #E7EBEF; --rel-ln: #D0D8E0; /* 相关：灰蓝 */ --fam: #625C3B; --fam-bg: #EEEADC; --fam-ln: #DCD5BE; /* 词族：橄榄 */ --known: #5D6F45; --vague: #A57A2E; --unknown: #9A4F43; --en: "SerifEN", "Source Serif 4", Georgia, "Times New Roman", serif; --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif; --display: "Smiley Sans", "得意黑", "PingFang SC", "Microsoft YaHei", sans-serif; --top: 60px; --side: 276px; } * { box-sizing: border-box; } html { scroll-padding-top: calc(var(--top) + 14px); -webkit-text-size-adjust: 100%; } body { margin: 0; color: var(--body); font: 16px/1.56 var(--ui); letter-spacing: 0; background: var(--canvas); } [lang="en"] { font-family: var(--en); } button { font: inherit; color: inherit; cursor: pointer; } a { color: inherit; } :focus-visible { outline: 3px solid rgba(98,92,59,.3); outline-offset: 2px; border-radius: 6px; } mark { background: linear-gradient(transparent 58%, rgba(224,163,58,.38) 58%); color: var(--ink); font-weight: 600; padding: 0 1px; } kbd { font: 12px/1 var(--ui); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 2px 5px; background: var(--white); margin: 0 1px; } /* ---------- top bar ---------- */ .top { position: sticky; top: 0; z-index: 40; height: var(--top); display: flex; align-items: center; gap: 14px; padding: 0 18px; background: rgba(248,243,235,.92); backdrop-filter: blur(14px) saturate(1.05); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--hair); } .menu { display: none; width: 38px; height: 38px; border: 1px solid rgba(98,92,59,.28); border-radius: 999px; background: var(--white); padding: 0; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 3px; } .menu span { width: 15px; height: 2px; background: var(--olive-d); border-radius: 2px; } .brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; white-space: nowrap; } .b1 { font: 900 22px/1 var(--display); color: var(--ink); } .b2 { font-size: 14px; color: var(--muted); font-weight: 650; } .prog { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); font-weight: 650; white-space: nowrap; } .pbar { width: 120px; height: 6px; border-radius: 6px; background: var(--hair); overflow: hidden; } .pbar i { display: block; height: 100%; width: 0; background: var(--olive); border-radius: 6px; transition: width .3s ease; } .jump { position: relative; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--hair); border-radius: 999px; background: var(--white); } .jump svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; } .jump input { border: 0; outline: 0; background: transparent; width: 130px; font: 14px var(--ui); color: var(--ink); } .jump-list { position: absolute; top: 42px; right: 0; min-width: 240px; max-height: 320px; overflow: auto; background: var(--white); border: 1px solid var(--hair); border-radius: 10px; box-shadow: 0 16px 36px rgba(57,49,32,.14); display: none; padding: 6px; } .jump-list.on { display: block; } .jump-list a { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border-radius: 7px; text-decoration: none; font-size: 14px; } .jump-list a b { font-family: var(--en); color: var(--ink); font-weight: 600; } .jump-list a span { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jump-list a.on { background: var(--olive-s); } @media (hover: hover) { .jump-list a:hover { background: var(--olive-s); } } .seg { display: flex; padding: 3px; border: 1px solid var(--hair); border-radius: 999px; background: var(--white); } .seg button { border: 0; background: transparent; padding: 5px 13px; border-radius: 999px; font-size: 13px; font-weight: 800; color: var(--muted); } .seg button[aria-pressed="true"] { background: var(--olive); color: var(--paper); } /* ---------- layout ---------- */ .shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); } .side { position: sticky; top: var(--top); height: calc(100vh - var(--top)); overflow: auto; border-right: 1px solid var(--hair); background: rgba(248,243,235,.72); backdrop-filter: blur(8px); scrollbar-width: thin; } .side-in { padding: 18px 14px 40px; } .side-u { margin: 0; font: 900 20px/1.1 var(--display); color: var(--ink); } .side-m { margin: 4px 0 8px; font-size: 13px; color: var(--muted); } .legend { margin: 0 0 12px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; } .lg { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-left: 6px; } .lg:first-child { margin-left: 0; } .lg.k { background: var(--known); } .lg.v { background: var(--vague); } .lg.u { background: var(--unknown); } .nf { list-style: none; margin: 0; padding: 0; } .nfi { margin: 0 0 4px; border-radius: 10px; padding: 2px 0 6px; } .nfi.cur { background: rgba(255,253,248,.82); box-shadow: inset 0 0 0 1px var(--hair); } .nft { display: grid; grid-template-columns: 26px 1fr auto; align-items: baseline; gap: 6px; padding: 6px 8px 3px; text-decoration: none; } .nfn { font-size: 12px; color: var(--muted); font-weight: 800; } .nfl { font-size: 15.5px; color: var(--ink); font-weight: 600; } .nfc { font-size: 12px; color: var(--muted); font-weight: 700; } .nws { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 8px 0 40px; } .nw { font-size: 13px; line-height: 1; padding: 5px 7px; border-radius: 999px; border: 1px solid var(--hair); background: rgba(255,253,248,.7); text-decoration: none; color: var(--body); } @media (hover: hover) { .nw:hover { border-color: var(--olive); } } .nw.r-known { background: rgba(93,111,69,.16); border-color: rgba(93,111,69,.4); color: #3E4D2C; } .nw.r-vague { background: rgba(165,122,46,.16); border-color: rgba(165,122,46,.42); color: #6C4F1C; } .nw.r-unknown { background: rgba(154,79,67,.14); border-color: rgba(154,79,67,.4); color: #6E362D; } .nw.here { box-shadow: 0 0 0 2px var(--olive); border-color: var(--olive); color: var(--ink); } .main { min-width: 0; padding: 26px 32px 90px; max-width: 980px; width: 100%; margin: 0 auto; } .scrim { display: none; } /* ---------- hero ---------- */ .hero { padding: 26px 30px; border-radius: 12px; border: 1px solid var(--hair); background: rgba(255,253,248,.72); box-shadow: 0 1px 0 #fff inset; margin-bottom: 26px; } .hero-k { margin: 0; font-size: 13px; letter-spacing: .08em; color: var(--muted); font-weight: 800; } .hero h1 { margin: 6px 0 10px; font: 900 clamp(30px, 4vw, 42px)/1.06 var(--display); color: var(--ink); } .hero-p { margin: 0; max-width: 62em; line-height: 1.9; } .hk { display: inline-block; font-size: 12.5px; font-weight: 800; line-height: 1; padding: 4px 8px; border-radius: 999px; margin: 0 3px; vertical-align: 1px; } .hk-mem { background: var(--mem-bg); color: var(--mem); } .hk-use { background: var(--use-bg); color: var(--use); } .hk-syn { background: var(--syn-bg); color: var(--syn); } .hk-ant { background: var(--ant-bg); color: var(--ant); } .hk-conf { background: var(--conf-bg); color: var(--conf); } .hk-fam { background: var(--fam-bg); color: var(--fam); } .hero-s { margin: 10px 0 0; font-size: 13px; color: var(--muted); } /* ---------- family section ---------- */ .famsec { margin: 0 0 46px; } .f-head { padding: 4px 2px 12px; } .f-kick { margin: 0; font-size: 13px; color: var(--muted); font-weight: 800; display: flex; gap: 6px; flex-wrap: wrap; } .f-head h2 { margin: 4px 0 6px; font: 600 clamp(30px, 3.6vw, 40px)/1.05 var(--en); color: var(--ink); } .f-intro { margin: 0; font-size: 16px; color: var(--body); } .fmap { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 0; border-radius: 12px; background: var(--fam-bg); border: 1px solid var(--fam-ln); overflow: hidden; } .fm-core { padding: 16px 16px 18px; border-right: 1px solid var(--fam-ln); background: rgba(255,253,248,.4); display: flex; flex-direction: column; align-items: center; text-align: center; } .fm-label { margin: 6px 0 0; font: 600 26px/1.1 var(--en); color: var(--ink); } .fm-label:not([lang]) { font: 900 26px/1.15 var(--display); } .fm-gloss { margin: 4px 0 0; font-size: 14px; color: var(--olive-d); font-weight: 700; } .fm-cols { padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; } .fm-col { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--fam-ln); align-items: start; } .fm-col:last-child { border-bottom: 0; } .fm-t b { display: block; font-size: 15px; color: var(--olive-d); font-weight: 850; } .fm-t span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; margin-top: 2px; } .fm-w { display: flex; flex-wrap: wrap; gap: 6px; } .wn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--white); border: 1px solid var(--fam-ln); text-decoration: none; transition: transform .16s ease, box-shadow .16s ease, border-color .16s; } @media (hover: hover) { .wn:hover { transform: translateY(-1px); border-color: var(--olive); box-shadow: 0 6px 14px rgba(57,49,32,.1); } } .wn-i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 800 11px/1 var(--ui); background: var(--olive-s); color: var(--olive-d); } .wn b { font-weight: 600; color: var(--ink); font-size: 15.5px; } .wn-c { font-size: 12.5px; color: var(--muted); } .wn.r-known .wn-i { background: var(--known); color: #fff; } .wn.r-vague .wn-i { background: var(--vague); color: #fff; } .wn.r-unknown .wn-i { background: var(--unknown); color: #fff; } .fm-maps { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 16px 12px; border-top: 1px solid var(--fam-ln); background: rgba(255,253,248,.35); } .mapthumb { display: flex; align-items: center; gap: 8px; border: 1px solid var(--fam-ln); background: var(--white); border-radius: 8px; padding: 4px 10px 4px 4px; font-size: 13px; font-weight: 750; color: var(--olive-d); } .mapthumb img { width: 54px; height: 36px; object-fit: cover; border-radius: 5px; } @media (hover: hover) { .mapthumb:hover { border-color: var(--olive); } } .f-say { margin: 12px 4px 18px; font-size: 15px; color: var(--body); padding-left: 12px; border-left: 3px solid rgba(98,92,59,.24); } /* ---------- unit switcher ---------- */ .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .unitsel select { appearance: none; -webkit-appearance: none; height: 34px; border-radius: 999px; border: 1px solid rgba(98,92,59,.3); background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%234D4830' stroke-width='1.6'/%3E%3C/svg%3E") right 11px center / 10px no-repeat; padding: 0 30px 0 13px; font: 800 14px var(--ui); color: var(--olive-d); cursor: pointer; } @media (hover: hover) { .unitsel select:hover { border-color: var(--olive); } } /* ---------- family map entrance ---------- */ .fmap.pre .fm-col, .fmap.pre .fm-core .mo { opacity: 0; transform: translateX(-10px); } .fmap.pre .wn { opacity: 0; transform: scale(.92); } .fmap.in .fm-col, .fmap.in .fm-core .mo { opacity: 1; transform: none; transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1); } .fmap.in .wn { opacity: 1; transform: none; transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .16s, border-color .16s; } .fmap.in .fm-col:nth-child(2) { transition-delay: .12s; } .fmap.in .fm-col:nth-child(3) { transition-delay: .24s; } .fmap.in .fm-col:nth-child(4) { transition-delay: .36s; } .fmap.in .fm-col:nth-child(5) { transition-delay: .48s; } .fmap.in .fm-col:nth-child(n+6) { transition-delay: .6s; } .fmap.in .fm-col .wn { transition-delay: inherit; } /* ---------- motif ---------- */ .mo { margin: 0; } .mo-stage { aspect-ratio: 4 / 3; width: 100%; border-radius: 10px; background: rgba(255,253,248,.7); overflow: hidden; } .mo-stage svg { width: 100%; height: 100%; display: block; } .mo figcaption { font-size: 12.5px; color: var(--muted); line-height: 1.45; margin-top: 6px; } .mo-core { width: 178px; } .mo-core figcaption { display: none; } .exm.has-mo { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 12px; align-items: start; } .exm.has-mo > *:not(.mo-mini) { grid-column: 2; } .mo-mini { grid-column: 1; grid-row: 1 / span 4; width: 84px; } .mo-mini .mo-stage { border-radius: 7px; background: var(--use-bg); } /* ---------- word card ---------- */ .card { position: relative; margin: 0 0 18px; padding: 22px 24px 16px; border-radius: 12px; background: rgba(255,253,248,.94); border: 1px solid var(--hair); box-shadow: 0 1px 0 #fff inset, 0 10px 26px rgba(57,49,32,.06); } .c-path { margin: 0 0 4px; font-size: 12.5px; color: var(--muted); font-weight: 750; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .c-no { font-weight: 850; color: var(--olive-d); margin-right: 2px; } .c-branch { color: var(--olive-d); background: var(--fam-bg); border: 1px solid var(--fam-ln); padding: 1px 7px; border-radius: 999px; } .c-orig { margin-left: auto; color: #A79F8F; font-weight: 650; } .c-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .c-word { margin: 0; font: 600 40px/1.08 var(--en); color: var(--ink); } .au { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(98,92,59,.3); background: var(--white); display: grid; place-items: center; padding: 0; transition: transform .16s, background .16s; } .au svg { width: 19px; height: 19px; fill: none; stroke: var(--olive-d); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .au svg path:first-child { fill: var(--olive-d); } .au.playing { background: var(--olive); transform: translateY(-1px); } @media (hover: hover) { .au:hover { background: var(--olive); transform: translateY(-1px); } } .au.playing svg { stroke: var(--paper); } .au.playing svg path:first-child { fill: var(--paper); } @media (hover: hover) { .au:hover svg { stroke: var(--paper); } .au:hover svg path:first-child { fill: var(--paper); } } .c-ipa { font-size: 17px; color: var(--muted); } .c-pos { font-size: 12.5px; font-weight: 800; color: var(--olive-d); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; background: var(--paper); } .c-star { font-size: 12px; font-weight: 800; color: #8A6A2C; background: var(--mem-bg); border-radius: 999px; padding: 3px 8px; } .c-core { margin: 8px 0 0; font-size: 19px; font-weight: 750; color: var(--ink); } .c-en { margin: 2px 0 0; font-size: 16px; font-style: italic; color: var(--muted); } .blk { margin-top: 14px; border-radius: 10px; padding: 12px 14px 14px; } .tag { display: inline-block; margin: 0 0 8px; font-size: 12.5px; font-weight: 850; line-height: 1; padding: 5px 9px; border-radius: 999px; color: #fff; letter-spacing: .02em; } .mem { background: var(--mem-bg); border: 1px solid var(--mem-ln); } .mem > .tag { background: var(--mem); } .mem-grid { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 16px; align-items: start; } .mem-grid > .mem-body:first-child { grid-column: 1 / -1; } .mo-big figcaption { color: #7C6A47; } .mrow { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 5px 0; } .mrow + .mrow { border-top: 1px dashed var(--mem-ln); } .mlab { font-size: 12.5px; font-weight: 850; color: var(--mem); } .mrow p { margin: 0; } .seed { font-size: 17px; font-weight: 750; color: var(--ink); } .morph { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .mp { display: inline-flex; align-items: baseline; gap: 6px; background: rgba(255,253,248,.85); border: 1px solid var(--mem-ln); border-radius: 8px; padding: 3px 9px; } .mp b { font-size: 17px; font-weight: 600; color: var(--ink); } .mp i { font-style: normal; font-size: 13.5px; color: var(--mem); font-weight: 700; } .mp-plus { color: var(--mem); font-weight: 800; } .branches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; } .branches li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; } .branches em { font-style: normal; font-size: 13px; color: var(--muted); } .bdot { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--mem); flex: none; transform: translateY(-1px); } .notes { list-style: none; margin: 10px 0 0; padding: 8px 0 0; border-top: 1px solid var(--mem-ln); display: grid; gap: 5px; font-size: 14px; } .notes li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; } .notes b { font-size: 15px; color: var(--ink); min-width: 3em; } .notes .kin { color: var(--muted); font-size: 13px; } .notes .kin i { font-style: normal; color: var(--mem); } .use { background: var(--use-bg); border: 1px solid var(--use-ln); } .use > .tag { background: var(--use); } .sense { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 10px 0; } .sense + .sense { border-top: 1px solid var(--use-ln); } .s-side p { margin: 0; } .s-k { font-size: 15.5px; font-weight: 800; color: var(--ink); line-height: 1.4; } .s-pos { display: inline-block; font-size: 12px; font-weight: 850; color: var(--use); background: rgba(255,253,248,.85); border: 1px solid var(--use-ln); border-radius: 5px; padding: 1px 5px; margin-right: 6px; vertical-align: 1px; } .ex-lab { margin: 0 0 2px; font-size: 12.5px; color: var(--mem); font-weight: 750; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .ex-lab b { color: var(--use); font-weight: 850; } .ex-lab .bdot { width: 7px; height: 7px; } .s-branch { margin-top: 4px !important; font-size: 13px; color: var(--mem); font-weight: 750; display: flex; gap: 6px; align-items: baseline; } .s-branch .bdot { width: 7px; height: 7px; } .s-ex { margin-top: 5px !important; font-size: 13.5px; color: var(--body); line-height: 1.5; } .s-main { min-width: 0; display: flex; flex-direction: column; gap: 7px; } .pts { display: flex; flex-wrap: wrap; gap: 5px; } .pt { display: inline-flex; align-items: baseline; gap: 5px; font-size: 14.5px; padding: 2px 9px; border-radius: 999px; background: rgba(255,253,248,.7); border: 1px solid var(--use-ln); color: var(--use); } .pt i { font-style: normal; font-size: 12.5px; color: var(--muted); } .exm { position: relative; background: var(--white); border-radius: 8px; padding: 9px 46px 9px 13px; border: 1px solid rgba(207,220,215,.7); } .exm .en { margin: 0; font-size: 17.5px; line-height: 1.5; color: var(--ink); } .tr { position: absolute; top: 8px; right: 8px; width: 30px; height: 28px; border-radius: 7px; border: 1px solid var(--use-ln); background: var(--white); font-size: 13px; font-weight: 800; color: var(--use); padding: 0; } .tr[aria-pressed="true"] { background: var(--use); color: #fff; border-color: var(--use); } .zh { display: none; margin-top: 4px; } .tr[aria-pressed="true"] + .zh { display: block; } .zh p { margin: 0; font-size: 14.5px; color: var(--body); } .zh .nt { font-size: 13.5px; color: var(--muted); margin-top: 1px; } .s-note { margin: 0; font-size: 13.5px; color: var(--use); } .sense.more { padding-top: 8px; } .tip { margin: 12px 0 0; font-size: 15px; padding: 9px 12px; border-radius: 10px; background: rgba(154,79,67,.06); border: 1px dashed rgba(154,79,67,.3); display: flex; gap: 10px; align-items: baseline; } .tip .tag { margin: 0; flex: none; } .tg-tip { background: var(--unknown); } .tg-disc { background: var(--olive); } .tg-conf { background: var(--conf); } .tg-quiz { background: var(--use); } .rels { padding: 10px 0 0; } .rels-h { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 6px; } .rels-h h4 { margin: 0; font-size: 15px; color: var(--ink); font-weight: 850; } .rels-h .cnt { font-size: 12.5px; color: var(--muted); } .rr { display: grid; grid-template-columns: 44px 150px minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; align-items: start; padding: 9px 12px; border-radius: 9px; margin-bottom: 5px; border: 1px solid transparent; } .rt { font-size: 12.5px; font-weight: 850; padding-top: 3px; } .rw b { display: block; font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.25; } .rw span { font-size: 13px; color: var(--muted); } .rw .sup { display: inline-block; margin-left: 4px; font-style: normal; font-size: 11px; font-weight: 800; padding: 0 5px; border: 1px dashed currentColor; border-radius: 4px; opacity: .8; } .rx p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink); } .rx .rz { font-size: 13px; color: var(--muted); margin-top: 2px; } .rn { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--body); } .r-syn { background: var(--syn-bg); border-color: var(--syn-ln); } .r-syn .rt, .r-syn .sup { color: var(--syn); } .r-ant { background: var(--ant-bg); border-color: var(--ant-ln); } .r-ant .rt, .r-ant .sup { color: var(--ant); } .r-conf { background: var(--conf-bg); border-color: var(--conf-ln); } .r-conf .rt, .r-conf .sup { color: var(--conf); } .r-rel { background: var(--rel-bg); border-color: var(--rel-ln); } .r-rel .rt, .r-rel .sup { color: var(--rel); } .r-kin { background: var(--fam-bg); border-color: var(--fam-ln); } .r-kin .rt, .r-kin .sup { color: var(--fam); } .rx mark { background: linear-gradient(transparent 60%, rgba(98,92,59,.18) 60%); font-weight: 600; } .disc { margin: 8px 2px 0; font-size: 14.5px; display: flex; gap: 10px; align-items: baseline; } .disc .tag { margin: 0; flex: none; } .fam { background: var(--fam-bg); border: 1px solid var(--fam-ln); padding: 10px 12px; display: flex; align-items: center; gap: 12px; } .fam .tag { background: var(--fam); margin: 0; flex: none; } .fcs { display: flex; flex-wrap: wrap; gap: 5px; } .fc { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; padding: 3px 9px; border-radius: 999px; background: rgba(255,253,248,.8); border: 1px solid var(--fam-ln); font-size: 14.5px; } .fc b { font-weight: 600; color: var(--ink); } .fc span { font: 800 10.5px/1 var(--ui); color: var(--muted); } .fc.cur { background: var(--olive); border-color: var(--olive); } .fc.cur b, .fc.cur span { color: var(--paper); } @media (hover: hover) { .fc:not(.cur):hover { border-color: var(--olive); } } .c-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .c-foot p { margin: 0 auto 0 0; font-size: 14.5px; color: var(--muted); } .c-foot p b { color: var(--ink); font-weight: 600; } .rate { display: flex; gap: 6px; } .rb { min-height: 38px; padding: 6px 16px; border-radius: 999px; border: 1px solid rgba(98,92,59,.3); background: var(--white); font-size: 14px; font-weight: 850; color: var(--olive-d); transition: transform .16s; } @media (hover: hover) { .rb:hover { transform: translateY(-1px); border-color: var(--olive); } } .rb:active { transform: scale(.97); } .rb[data-r="known"][aria-pressed="true"] { background: var(--known); border-color: var(--known); color: #fff; } .rb[data-r="vague"][aria-pressed="true"] { background: var(--vague); border-color: var(--vague); color: #fff; } .rb[data-r="unknown"][aria-pressed="true"] { background: var(--unknown); border-color: var(--unknown); color: #fff; } .nx { min-height: 38px; padding: 6px 18px; border-radius: 999px; border: 0; background: var(--olive); color: var(--paper); font-size: 14px; font-weight: 850; } @media (hover: hover) { .nx:hover { background: var(--olive-d); } } /* ---------- family wrap-up ---------- */ .wrap { border-radius: 12px; padding: 18px 22px; background: rgba(255,253,248,.8); border: 1px dashed var(--line); } .wrap-h { margin: 0 0 10px; font: 900 22px/1.1 var(--display); color: var(--ink); } .wblk + .wblk { margin-top: 14px; } .vss { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px; } .vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--conf-bg); border: 1px solid var(--conf-ln); } .vs b { display: block; font-size: 18px; font-weight: 600; color: var(--ink); } .vs span { font-size: 13.5px; color: var(--body); } .vs > i { font: italic 600 14px var(--en); color: var(--conf); } .vs > div:last-child { text-align: right; } .traps { margin: 0; padding-left: 1.2em; font-size: 15px; } .traps li + li { margin-top: 3px; } .quiz { margin: 0; padding: 0; list-style: none; counter-reset: q; display: grid; gap: 8px; } .qz { counter-increment: q; padding: 10px 12px; border-radius: 10px; background: var(--use-bg); border: 1px solid var(--use-ln); } .qz > p { margin: 0; font-size: 17px; color: var(--ink); } .qz > p::before { content: counter(q) ". "; font: 800 14px var(--ui); color: var(--use); } .blank { color: var(--use); letter-spacing: .05em; } .qz-in { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; } .qz-in input { flex: 1 1 160px; min-width: 0; height: 36px; border-radius: 8px; border: 1px solid var(--use-ln); background: var(--white); padding: 0 10px; font: 16px var(--en); color: var(--ink); } .qz-in button { height: 36px; border-radius: 999px; border: 1px solid var(--use-ln); background: var(--white); padding: 0 14px; font-size: 13.5px; font-weight: 800; color: var(--use); } .qz-in .qz-ck { background: var(--use); color: #fff; border-color: var(--use); } .qz-ans { display: none; margin: 7px 0 0; font-size: 14.5px; color: var(--body); } .qz-ans b { font-size: 17px; color: var(--ink); } .qz.shown .qz-ans { display: block; } .qz.ok input { border-color: var(--known); background: rgba(93,111,69,.08); } .qz.no input { border-color: var(--unknown); background: rgba(154,79,67,.06); } .recap { margin: 14px 0 0; font-size: 16px; font-weight: 750; color: var(--olive-d); } .end { text-align: center; color: var(--muted); font-size: 14px; } /* ---------- focus mode ---------- */ .focusbar { display: none; } .pg[data-mode="focus"] .famsec { display: none; } .pg[data-mode="focus"] .famsec.fshow { display: block; } .pg[data-mode="focus"] .famsec.fshow .card:not(.fcur), .pg[data-mode="focus"] .famsec.fshow .wrap { display: none; } .pg[data-mode="focus"] .famsec.fshow.fwrap .wrap { display: block; } .pg[data-mode="focus"] .famsec.fshow:not(.ffirst) .f-head, .pg[data-mode="focus"] .famsec.fshow:not(.ffirst) .fmap, .pg[data-mode="focus"] .famsec.fshow:not(.ffirst) .f-say, .pg[data-mode="focus"] .famsec.fshow:not(.ffirst) .f-ext { display: none; } .pg[data-mode="focus"] .hero, .pg[data-mode="focus"] .end { display: none; } .pg[data-mode="focus"] .main { padding-bottom: 130px; } .pg[data-mode="focus"] .focusbar { display: flex; position: fixed; z-index: 30; bottom: 16px; left: calc(50% + var(--side) / 2); transform: translateX(-50%); align-items: center; gap: 12px; padding: 6px; border-radius: 999px; background: rgba(39,38,25,.92); color: var(--paper); box-shadow: 0 16px 36px rgba(36,33,21,.28); font-size: 13px; font-weight: 750; } .fb { border: 0; border-radius: 999px; padding: 8px 16px; background: rgba(255,253,248,.12); color: var(--paper); font-weight: 850; font-size: 13.5px; } @media (hover: hover) { .fb:hover { background: rgba(255,253,248,.22); } } .fb:disabled { opacity: .35; cursor: default; } /* ---------- lightbox ---------- */ .lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(20,20,19,.62); display: grid; place-items: center; padding: 20px; } .lightbox[hidden] { display: none; } .lightbox img { max-width: min(1200px, 100%); max-height: calc(100vh - 40px); border-radius: 10px; box-shadow: 0 24px 70px rgba(0,0,0,.35); background: #fff; } .lb-x { position: absolute; top: 14px; right: 16px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--white); font-size: 24px; line-height: 1; color: var(--ink); } /* ---------- responsive ---------- */ @media (max-width: 1180px) { .rr { grid-template-columns: 44px 130px minmax(0, 1fr); } .rr .rn { grid-column: 3; } .rx { grid-column: 3; } .rw { grid-row: 1 / span 2; grid-column: 2; } .rt { grid-row: 1 / span 2; } } @media (max-width: 920px) { :root { --top: 56px; } .menu { display: flex; } .shell { display: block; } .side { position: fixed; z-index: 50; top: 0; left: 0; bottom: 0; height: 100%; width: min(320px, 86vw); background: var(--paper); transform: translateX(-102%); transition: transform .26s cubic-bezier(.2,.8,.2,1); box-shadow: 0 20px 60px rgba(36,33,21,.25); } .side.open { transform: none; } .scrim { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(20,20,19,.34); } .scrim[hidden] { display: none; } .main { padding: 16px 14px 90px; } .prog .pbar { width: 60px; } .jump input { width: 90px; } .pg[data-mode="focus"] .focusbar { left: 50%; } body { background-attachment: scroll; } } @media (max-width: 680px) { .top { gap: 8px; padding: 0 10px; } .b2, .prog .pbar, .brand { display: none; } .top { gap: 6px; } .prog { margin-left: auto; font-size: 12px; } .jump { padding: 0 10px; width: 38px; justify-content: center; } .jump input { position: absolute; opacity: 0; width: 1px; pointer-events: none; } .jump.on { position: absolute; left: 10px; right: 10px; width: auto; z-index: 5; } .jump.on input { position: static; opacity: 1; width: 100%; pointer-events: auto; } .jump-list { left: 0; right: 0; min-width: 0; } .seg button { padding: 5px 10px; } .hero { padding: 18px 16px; } .hero-s { display: none; } .gkx-prod .top > .ui301-learning-home, .gkx-prod .top > .brand.ui301-learning-home { display: inline-flex !important; } .mem-grid { grid-template-columns: 1fr; gap: 14px; } .mo-big { max-width: 220px; } .sense { grid-template-columns: 1fr; } .exm.has-mo { grid-template-columns: 60px minmax(0, 1fr); column-gap: 12px; } .mo-mini { width: 60px; } .fmap { grid-template-columns: 1fr; } .fm-core { border-right: 0; border-bottom: 1px solid var(--fam-ln); flex-direction: row; text-align: left; gap: 14px; padding: 12px; } .mo-core { width: 120px; flex: none; } .fm-core > p, .fm-txt > p { margin: 0; } .fm-txt { min-width: 0; flex: 1; } .fm-txt .fm-gloss { margin-top: 4px; } .fm-col { grid-template-columns: 1fr; gap: 6px; } .fm-cols { padding: 8px 12px; } .card { padding: 16px 14px 12px; border-radius: 10px; } .c-word { font-size: 34px; } .c-orig { margin-left: 0; } .blk { padding: 10px 11px 12px; } .mem-grid { grid-template-columns: 1fr; gap: 10px; } .mo-big { max-width: 240px; } .sense { grid-template-columns: 1fr; gap: 6px; } .exm .en { font-size: 16.5px; } .exm.has-mo { grid-template-columns: 64px minmax(0, 1fr); column-gap: 10px; } .mo-mini { width: 64px; } .unitsel select { height: 32px; padding: 0 24px 0 10px; font-size: 13px; background-position: right 8px center; } .rr { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 10px; padding: 9px 10px; } .rt { grid-row: 1 / span 3; } .rw, .rx, .rr .rn { grid-column: 2; grid-row: auto; } .rw b { display: inline; margin-right: 6px; } .fam { flex-direction: column; align-items: flex-start; } .c-foot p { width: 100%; } .rate { flex: 1; } .rb { flex: 1; padding: 6px 8px; } .nx { flex: 1 0 100%; } .vs { grid-template-columns: 1fr; text-align: left; } .vs > div:last-child { text-align: left; } .wrap { padding: 14px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* 基础篇：同主题、在别的单元学的词 */ .wn-ext { border-style: dashed; background: rgba(255,253,248,.55); } .wn-ext .wn-i { background: transparent; color: var(--olive-d); font-weight: 800; } .wn-u { font-size: 11.5px; color: var(--olive-d); font-weight: 750; padding: 0 0 0 4px; border-left: 1px solid var(--hair); } .wn-beyond { cursor: default; } .f-ext { margin: -8px 4px 20px; border: 1px dashed var(--fam-ln); border-radius: 10px; background: rgba(255,253,248,.5); } .f-ext > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 7px 12px; min-height: 36px; } .f-ext > summary::-webkit-details-marker { display: none; } .f-ext > summary .tag { margin: 0; flex: none; } .tg-ext { background: var(--fam-bg); color: var(--olive-d); border: 1px solid var(--fam-ln); } .fx-sum { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 500 14px/1.3 var(--en); color: var(--body); } .fx-more { flex: none; font-size: 12.5px; font-weight: 750; color: var(--olive-d); } .fx-more::after { content: ' ▾'; } .f-ext[open] .fx-more::after { content: ' ▴'; } .f-ext[open] .fx-sum { visibility: hidden; } .f-ext-h { margin: 0 12px 6px; font-size: 12.5px; color: var(--muted); } .f-ext ul { list-style: none; margin: 0; padding: 0 12px 10px; display: grid; gap: 4px 18px; } @media (min-width: 900px) { .f-ext ul { grid-template-columns: 1fr 1fr 1fr; } } @media (min-width: 600px) and (max-width: 899px) { .f-ext ul { grid-template-columns: 1fr 1fr; } } .f-ext li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; font-size: 13px; line-height: 1.45; padding: 3px 0; border-top: 1px solid var(--hair); } .f-ext li b { font: 600 14.5px/1.3 var(--en); color: var(--ink); } .f-ext li i { font-style: normal; color: var(--body); } .f-ext li a { font-size: 11.5px; font-weight: 750; color: var(--olive-d); text-decoration: none; border-bottom: 1px dotted var(--olive-d); } .f-ext li > span { font-size: 11.5px; color: var(--muted); } .f-ext .fx-n { flex-basis: 100%; color: var(--muted); font-size: 12.5px; } .rlink { font-size: 12px; font-weight: 750; color: var(--olive-d); text-decoration: none; border-bottom: 1px dotted var(--olive-d); margin-left: 2px; white-space: nowrap; } .sense.rew .rwr { padding: 10px 12px; border-radius: 10px; background: var(--white); border: 1px solid var(--hair); margin-bottom: 8px; } .sense.rew .rwr .en { margin: 0; } .sense.rew .eq { margin: 4px 0; font-size: 12px; font-weight: 800; color: var(--olive-d); letter-spacing: .06em; } .sense.rew .eq::before { content: '⇅ '; } .sense.rew .rwz { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); } .sense.rew .nt { margin: 6px 0 0; font-size: 14px; color: var(--body); } /* 派生补充 */ .derv { border: 1px dashed var(--fam-ln); background: rgba(255,253,248,.5); } .dvs { display: grid; gap: 8px; } @media (min-width: 900px) { .dvs { grid-template-columns: 1fr 1fr; } } .dv { padding: 8px 10px; border-radius: 9px; background: var(--white); border: 1px solid var(--hair); } .dv-w { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 14px; color: var(--body); } .dv-w b { font: 600 17px/1.2 var(--en); color: var(--ink); } .dv-p { font-size: 12px; font-weight: 800; color: var(--olive-d); } .dv-w em { font-style: normal; font-size: 12px; color: var(--muted); } .dv .en { margin: 6px 0 0; font-size: 15px; } .dv-z { margin: 4px 0 0; font-size: 13px; color: var(--muted); } .dv-s { margin-left: 8px; font-size: 11.5px; color: var(--olive-d); } .card .c-new { margin-left: 6px; font-size: 11.5px; font-weight: 850; color: #fff; background: var(--terra, #b0603f); border-radius: 999px; padding: 2px 8px; } /* ---------- live site wiring (body.gkx-prod): rating, notebook, usage marks, search, directory ---------- */ .gkx-prod .crumb { font-size: 13px; color: var(--muted); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22vw; } .gkx-prod .top .hb, .gkx-prod .top .gk-notebook-link { display: inline-flex; align-items: center; justify-content: center; height: 34px; min-height: 34px; padding: 0 12px; border: 1px solid var(--hair); border-radius: 999px; background: var(--white); color: var(--olive-d); font: 750 13px/1 var(--ui); text-decoration: none; white-space: nowrap; flex: none; box-shadow: none; width: auto; min-width: 0; margin: 0; } @media (hover: hover) { .gkx-prod .top .hb:hover, .gkx-prod .top .gk-notebook-link:hover { border-color: var(--olive); } } .gkx-prod .top .gk-search-trigger::before, .gkx-prod .top .gk-search-trigger::after { display: none; } .gkx-prod .rate-slot { display: flex; } .gkx-prod .review-mark-group { display: flex; gap: 6px; margin: 0; } .gkx-prod .review-mark-btn { min-height: 38px; padding: 6px 16px; border-radius: 999px; border: 1px solid rgba(98,92,59,.3); background: var(--white); font-size: 14px; font-weight: 850; color: var(--olive-d); transition: transform .16s; } @media (hover: hover) { .gkx-prod .review-mark-btn:hover { transform: translateY(-1px); border-color: var(--olive); } } .gkx-prod .review-mark-btn[data-feedback="known"].active { background: var(--known); border-color: var(--known); color: #fff; } .gkx-prod .review-mark-btn[data-feedback="vague"].active { background: var(--vague); border-color: var(--vague); color: #fff; } .gkx-prod .review-mark-btn[data-feedback="unfamiliar"].active { background: var(--unknown); border-color: var(--unknown); color: #fff; } .gkx-prod .rate-na { font-size: 13.5px !important; } .gkx-prod .card.gk-notebook-card .c-head { padding-right: 30px; } .gkx-prod .gk-notebook-guide { margin: 0 0 18px; border-radius: 0 10px 10px 0; } .gkx-prod .g-anchor { display: block; height: 0; scroll-margin-top: calc(var(--top) + 14px); } /* “此义不熟” bookmark: below the kicker on wide screens, top-right of the kicker on phones */ .gkx-prod .sense-usage-group { position: relative; grid-template-rows: auto 1fr; } .gkx-prod .sense-usage-group > .s-side { grid-column: 1; grid-row: 1; } .gkx-prod .sense-usage-group > .s-main { grid-column: 2; grid-row: 1 / span 2; } .gkx-prod .sense-usage-group > .gk-usage-focus-button { position: static; grid-column: 1; grid-row: 2; align-self: start; justify-self: start; min-height: 34px; min-width: 34px; margin: 0 0 0 -8px; color: var(--muted); } .gkx-prod .sense-usage-group > .gk-usage-focus-button[aria-pressed="true"] { margin: 0; min-height: 34px; } .gkx-prod .sense-usage-group.gk-usage-focused { border-radius: 10px; margin: 6px 0; } .course-dialog { border: 1px solid var(--hair); border-radius: 14px; padding: 22px; background: var(--white); color: var(--body); width: min(720px, calc(100vw - 28px)); max-height: calc(100dvh - 36px); box-shadow: 0 24px 60px rgba(57,49,32,.22); } .course-dialog::backdrop { background: rgba(36,33,21,.34); backdrop-filter: blur(6px); } .course-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; } .course-dialog h2 { font: 900 26px/1.2 var(--display); color: var(--ink); margin: 0; } .course-dialog h3 { font: 900 19px/1.3 var(--display); color: var(--olive-d); margin: 18px 0 8px; } .course-dialog button.close { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--hair); background: var(--paper); font-size: 20px; flex: none; } .course-directory-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .course-directory-list a { display: block; padding: 10px 12px; border: 1px solid var(--hair); border-radius: 9px; text-decoration: none; font-size: 14px; color: var(--ink); } @media (hover: hover) { .course-directory-list a:hover { background: var(--olive-s); } } .course-directory-list small { color: var(--muted); margin-left: 4px; } .course-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); text-decoration: none; } @media (max-width: 1180px) { .gkx-prod .crumb { display: none; } } @media (max-width: 920px) { .gkx-prod .top .course-video-nav { display: none; } } @media (max-width: 680px) { .gkx-prod .sense-usage-group > .s-side { padding-right: 40px; } .gkx-prod .sense-usage-group > .s-main { grid-column: 1; grid-row: 2; } .gkx-prod .sense-usage-group > .gk-usage-focus-button { position: absolute; grid-row: auto; grid-column: auto; right: 0; top: 4px; margin: 0; } .gkx-prod .sense-usage-group > .gk-usage-focus-button[aria-pressed="true"] { position: static; grid-row: 1; justify-self: end; margin-bottom: 4px; } .gkx-prod .sense-usage-group.gk-usage-focused > .s-side { padding-right: 0; grid-row: 2; } .gkx-prod .sense-usage-group.gk-usage-focused > .s-main { grid-row: 3; } .gkx-prod .top .hb, .gkx-prod .top .gk-notebook-link { height: 32px; min-height: 32px; padding: 0 9px; font-size: 12px; } .gkx-prod .top .course-directory-button { display: none; } .gkx-prod .review-mark-group { flex: 1; } .gkx-prod .review-mark-btn { flex: 1; padding: 6px 8px; } .gkx-prod .rate-slot { flex: 1; } .course-directory-list { grid-template-columns: 1fr; } } @media (max-width: 680px) { .gkx-prod .top .gk-search-trigger { display: none; } .gkx-prod .seg button { white-space: nowrap; } } @media (max-width: 359px) { .gkx-prod .prog { display: none; } .gkx-prod .jump { margin-left: auto; } .gkx-prod .seg button { padding: 5px 8px; } .gkx-prod .top .gk-notebook-link { padding: 0 7px; } } .main p, .main li { overflow-wrap: anywhere; } /* ====================================================================== 书卷版（2026-10-25）：与首页 / 单元导览同一套视觉——纸色、细线、衬线、墨色控件。 只改外观，不改结构挂钩；以下规则覆盖上文旧样式。 ====================================================================== */ @font-face { font-family: "Noto Serif SC GK"; src: url("fonts/noto-serif-sc-600-gk.woff2") format("woff2"); font-weight: 600; font-display: swap; } :root { --paper: #F6F2EA; --canvas: #F6F2EA; --white: #FFFDF9; --sheet: #FBF8F2; --tint: #EFE9DD; --ink: #1B1A17; --body: #3F3C35; --sub: #5E5A50; --muted: #6F695C; --faint: #6F695C; --deco: #C9C0AE; --hair: #E4DCCD; --line: #DCD4C5; --uline: #BDB4A3; --accent: #8A9460; --accent-ink: #50563A; --olive: #50563A; --olive-d: #50563A; --olive-s: rgba(138,148,96,.14); --known: #5C6E3E; --vague: #86621F; --unknown: #9A4F43; --mem: #7A5E26; --use: #3D5F62; --syn: #4E6237; --ant: #8F4A3D; --conf: #8C5A22; --rel: #4A5F73; --fam: #50563A; --display: "Noto Serif SC GK", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif; --ease: cubic-bezier(.2,.7,.2,1); } body { background: var(--paper); color: var(--body); -webkit-font-smoothing: antialiased; font-variant-numeric: lining-nums; } ::selection { background: rgba(138,148,96,.28); color: var(--ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } mark { background: linear-gradient(transparent 62%, rgba(196,154,74,.3) 62%); font-weight: 600; } /* top bar */ .top { background: rgba(246,242,234,.94); border-bottom: 1px solid var(--line); gap: 22px; padding: 0 28px; } .menu { border: 0; background: transparent; width: 44px; height: 44px; margin-left: -10px; border-radius: 50%; } .menu span { background: var(--ink); width: 18px; height: 1.5px; } .b1 { font: 600 19px/1 var(--display); letter-spacing: .04em; } .prog { color: var(--muted); font-weight: 500; font-size: 12.5px; letter-spacing: .06em; font-variant-numeric: tabular-nums; } .pbar { width: 96px; height: 2px; border-radius: 0; background: var(--line); } .pbar i { border-radius: 0; background: var(--accent); } .jump { border: 0; border-bottom: 1px solid var(--uline); border-radius: 0; background: transparent; padding: 0 2px; height: 36px; } .jump svg { stroke: var(--sub); stroke-width: 1.6; } .jump-list { border-radius: 2px; border-color: var(--line); box-shadow: 0 18px 40px -18px rgba(27,26,23,.35); } .jump-list a { border-radius: 0; } .jump-list a.on { background: var(--tint); } @media (hover: hover) { .jump-list a:hover { background: var(--tint); } } .seg { border: 0; background: transparent; padding: 0; gap: 18px; border-radius: 0; } .seg button { position: relative; padding: 6px 0; border-radius: 0; font-size: 13.5px; font-weight: 500; color: var(--muted); background: transparent !important; } .seg button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform .35s var(--ease); } .seg button[aria-pressed="true"] { color: var(--ink); } .seg button[aria-pressed="true"]::after { transform: scaleX(1); } .unitsel select { border: 0; border-bottom: 1px solid var(--uline); border-radius: 0; background-color: transparent; font-weight: 600; color: var(--ink); } .gkx-prod .top .hb, .gkx-prod .top .gk-notebook-link { border: 0; border-radius: 0; background: transparent; padding: 0 2px; color: var(--sub); font: 500 13.5px/1 var(--ui); background-image: linear-gradient(var(--ink), var(--ink)); background-repeat: no-repeat; background-position: 0 calc(100% - 8px); background-size: 0 1px; transition: background-size .35s var(--ease), color .2s; } .gkx-prod .top .gk-notebook-link { color: var(--ink); } .gkx-prod .crumb { color: var(--muted); font-weight: 500; letter-spacing: .08em; font-size: 12.5px; } .gkx-prod .top > .ui301-learning-home { display: inline-flex; flex: none; justify-content: flex-start; align-items: center; gap: 10px; min-width: 44px; min-height: 44px; height: 44px; font: 500 14px/1 var(--ui); color: var(--ink); text-decoration: none; white-space: nowrap; } .gkx-prod .ui301-learning-logo { width: 28px; height: 26px; } /* side nav */ .side { background: rgba(246,242,234,.96); border-right: 1px solid var(--line); backdrop-filter: none; } .side-in { padding: 26px 18px 48px; } .side-u { font: 600 19px/1.2 var(--display); letter-spacing: .04em; } .side-m { color: var(--muted); font-variant-numeric: tabular-nums; } .lg { width: 6px; height: 6px; } .nfi { border-radius: 0; padding: 4px 0 8px; margin: 0; border-top: 1px solid var(--hair); } .nfi.cur { background: transparent; box-shadow: inset 2px 0 0 var(--accent); } .nft { padding: 8px 6px 4px 10px; } .nfn { font: 400 13px/1 var(--en, serif); color: var(--faint); font-weight: 400; } .nfi.cur .nfn { color: var(--accent-ink); } .nfl { font-family: "SerifEN", Georgia, serif; font-size: 16px; font-weight: 400; } .nfc { font-weight: 500; font-variant-numeric: tabular-nums; } .nws { gap: 2px 10px; padding-left: 42px; } .nw { border: 0; background: transparent !important; padding: 3px 0; border-radius: 0; font-size: 13.5px; color: var(--sub) !important; box-shadow: none !important; position: relative; } .nw::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 5px; vertical-align: 2px; background: var(--line); } .nw.r-known::before { background: var(--known); } .nw.r-vague::before { background: var(--vague); } .nw.r-unknown::before { background: var(--unknown); } .nw.here { color: var(--ink) !important; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; } .main { max-width: 960px; padding: 44px 40px 110px; } /* hero */ .hero { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 4px 0 30px; margin-bottom: 36px; border-bottom: 1px solid var(--line); } .hero-k { display: flex; align-items: center; gap: 14px; font-size: 12px; letter-spacing: .2em; font-weight: 500; color: var(--muted); } .hero-k::after { content: ""; flex: 1; height: 1px; background: var(--line); } .hero h1 { margin: 22px 0 14px; font: 600 clamp(30px, 3.6vw, 40px)/1.2 var(--display); letter-spacing: .03em; color: var(--ink); } .hero-p { color: var(--sub); line-height: 1.85; max-width: 40em; } .hero-p strong { color: var(--ink); font-weight: 600; } .hk { background: transparent !important; padding: 0; margin: 0 2px 0 8px; font-size: 13.5px; font-weight: 600; border-radius: 0; } .hk::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 5px; vertical-align: 2px; background: currentColor; } .hk-mem { color: var(--mem); } .hk-use { color: var(--use); } .hk-syn { color: var(--syn); } .hk-ant { color: var(--ant); } .hk-conf { color: var(--conf); } .hk-fam { color: var(--fam); } .hero-s { color: var(--muted); } kbd { border-radius: 2px; border-color: var(--line); background: var(--white); } .seg-m { display: none; } .gkx-prod .gk-notebook-guide { margin: 0 0 40px; padding: 2px 0 2px 16px; border: 0; border-left: 2px solid var(--accent); border-radius: 0; background: transparent; color: var(--sub); font-size: 14px; } .gkx-prod .gk-notebook-guide a { color: var(--ink); text-decoration-color: var(--uline); } /* family head + map */ .famsec { margin: 0 0 72px; } .f-head { padding: 0 0 18px; } .f-kick { align-items: center; gap: 8px; font-size: 12px; letter-spacing: .16em; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; } .f-kick::after { content: ""; flex: 1 1 40px; height: 1px; background: var(--line); margin-left: 8px; } .f-head h2 { margin: 16px 0 10px; font: 400 clamp(36px, 4.4vw, 48px)/1.05 "SerifEN", Georgia, serif; letter-spacing: -.01em; } .f-intro { color: var(--sub); line-height: 1.8; } .fmap { background: transparent; border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); border-radius: 0; grid-template-columns: 200px minmax(0, 1fr); } .fm-core { background: transparent; border-right: 1px solid var(--line); padding: 22px 18px 22px 0; } .fm-core .mo-stage { background: var(--sheet); border: 1px solid var(--hair); border-radius: 0; } .fm-label { font: 400 26px/1.1 "SerifEN", Georgia, serif; } .fm-label:not([lang]) { font: 600 22px/1.2 var(--display); } .fm-gloss { color: var(--sub); font-weight: 500; letter-spacing: .1em; } .fm-cols { padding: 6px 0 6px 24px; gap: 0; } .fm-col { border-bottom: 1px solid var(--hair); padding: 14px 0; grid-template-columns: 136px minmax(0, 1fr); } .fm-t b { color: var(--ink); font-weight: 600; font-size: 14.5px; } .fm-t span { color: var(--muted); } .fm-w { gap: 4px 18px; } .wn { background: transparent; border: 0; border-radius: 0; padding: 3px 0; gap: 6px; box-shadow: none !important; transform: none !important; } .wn-i { width: auto; height: auto; background: transparent !important; color: var(--faint) !important; font: 400 12px/1 "SerifEN", Georgia, serif; border-radius: 0; } .wn.r-known .wn-i { color: var(--known) !important; font-weight: 600; } .wn.r-vague .wn-i { color: var(--vague) !important; font-weight: 600; } .wn.r-unknown .wn-i { color: var(--unknown) !important; font-weight: 600; } .wn b { font-weight: 400; font-size: 17px; background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 100% / 0 1px; transition: background-size .35s var(--ease); padding-bottom: 1px; } .wn-c { color: var(--muted); font-size: 12.5px; } .fm-maps { background: transparent; border-top: 1px solid var(--hair); padding: 14px 0; } .mapthumb { border-radius: 0; border-color: var(--line); background: var(--white); color: var(--ink); font-weight: 500; transition: border-color .25s; } .mapthumb img { border-radius: 0; } .f-say { margin: 18px 0 30px; padding-left: 16px; border-left: 2px solid var(--line); color: var(--sub); line-height: 1.85; } .f-ext { border: 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); border-radius: 0; background: transparent; margin: -10px 0 28px; } .f-ext li { border-top-color: var(--hair); } /* word card */ .card { margin: 0 0 32px; padding: 30px 34px 22px; border-radius: 3px; background: var(--white); border: 1px solid #E6DFD2; box-shadow: none; scroll-margin-top: calc(var(--top) + 16px); } .c-path { font-size: 12px; letter-spacing: .1em; font-weight: 500; color: var(--muted); gap: 10px; } .c-no { color: var(--accent-ink); font-weight: 600; font-variant-numeric: tabular-nums; } .c-branch { background: transparent; border: 0; padding: 0; color: var(--sub); } .c-branch::before { content: "/"; color: var(--deco); margin-right: 10px; } .c-orig { color: var(--faint); font-weight: 400; } .c-title { gap: 14px; margin-top: 12px; align-items: baseline; } .c-word { font: 400 50px/1.02 "SerifEN", Georgia, serif; letter-spacing: -.015em; } .au { width: 40px; height: 40px; border-color: var(--line); background: transparent; align-self: center; transition: background-color .25s, border-color .25s, transform .15s; } .au svg { stroke: var(--ink); stroke-width: 1.6; } .au svg path:first-child { fill: var(--ink); } .au.playing { background: var(--ink); border-color: var(--ink); transform: none; } @media (hover: hover) { .au:hover { background: var(--ink); border-color: var(--ink); transform: none; } } .au:active { transform: scale(.96); } .c-ipa { font-size: 17px; color: var(--muted); } .c-pos { border: 0; background: transparent; padding: 0; font: italic 400 16px/1 "SerifEN", Georgia, serif; color: var(--sub); } .c-star { background: transparent; padding: 0; color: #A4523A; font-weight: 500; letter-spacing: .08em; } .c-core { margin: 16px 0 0; font-size: 19px; font-weight: 600; color: var(--ink); line-height: 1.5; } .c-en { margin: 4px 0 0; color: var(--muted); font-size: 16.5px; } .blk { margin-top: 26px; padding: 18px 0 0; border-radius: 0; background: transparent !important; border: 0 !important; border-top: 1px solid var(--hair) !important; } .tag { padding: 0; border-radius: 0; background: transparent !important; color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .22em; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; } .tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; } .mem > .tag { color: var(--mem); } .use > .tag { color: var(--use); } .fam > .tag, .tg-ext { color: var(--fam); } .tg-tip { color: var(--unknown); } .tg-disc { color: var(--accent-ink); } .tg-conf { color: var(--conf); } .tg-quiz { color: var(--use); } .mem-grid { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; } .mo-stage { border-radius: 0; background: var(--sheet); border: 1px solid var(--hair); } .mo figcaption { color: var(--muted); } .mo-big figcaption { color: var(--muted); } .mrow { grid-template-columns: 56px minmax(0, 1fr); padding: 8px 0; } .mrow + .mrow { border-top: 1px solid var(--hair); } .mlab { color: var(--muted); font-weight: 500; letter-spacing: .1em; font-size: 12px; } .seed { font-size: 17px; font-weight: 600; color: var(--ink); } .mp { background: transparent; border: 0; padding: 0; border-radius: 0; gap: 5px; } .mp b { font-size: 19px; font-weight: 400; } .mp i { color: var(--sub); font-weight: 500; } .mp-plus { color: var(--muted); font-weight: 400; } .bdot { width: 5px; height: 5px; border: 0; background: var(--mem); transform: translateY(-2px); } .branches em { color: var(--muted); } .notes { border-top: 1px solid var(--hair); padding-top: 12px; margin-top: 14px; } .notes .kin i { color: var(--sub); } .sense { grid-template-columns: 196px minmax(0, 1fr); gap: 24px; padding: 16px 0; } .sense + .sense { border-top: 1px solid var(--hair); } .s-k { font-weight: 600; } .s-pos { border: 0; background: transparent; padding: 0; font: italic 400 15px/1 "SerifEN", Georgia, serif; color: var(--use); margin-right: 8px; } .s-ex { color: var(--sub); } .ex-lab { color: var(--muted); font-weight: 500; } .ex-lab b { color: var(--ink); font-weight: 600; } .ex-lab .bdot { background: var(--deco); } .pts { gap: 6px 22px; } .pt { background: transparent; border: 0; border-radius: 0; padding: 0; font-size: 16px; color: var(--use); } .pt i { color: var(--muted); } .s-main { gap: 12px; } .exm { background: transparent; border: 0; border-left: 2px solid var(--hair); border-radius: 0; padding: 2px 46px 2px 16px; transition: border-color .3s var(--ease); } .exm .en { font-size: 18.5px; line-height: 1.55; } .mo-mini .mo-stage { background: var(--sheet); } .tr { top: 0; right: 0; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--sub); font-weight: 500; transition: background-color .25s, color .25s, border-color .25s; } .tr[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); } .zh p { color: var(--sub); } .s-note { color: var(--use); } .tip { background: transparent; border: 0; border-left: 2px solid var(--unknown); border-radius: 0; padding: 2px 0 2px 14px; margin-top: 18px; } .tip .tag, .disc .tag { margin: 0; } .rels { padding-top: 18px; } .rels-h { border-bottom: 1px solid var(--hair); padding-bottom: 10px; margin: 0 0 0; } .rels-h h4 { font: 600 12px/1 var(--ui); letter-spacing: .22em; color: var(--muted); } .rels-h .cnt { color: var(--faint); font-variant-numeric: tabular-nums; } .rr { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--hair) !important; border-radius: 0; margin: 0; padding: 14px 0; } .rt { font-weight: 600; letter-spacing: .1em; } .rw b { font-weight: 400; font-size: 19px; } .rw .sup { border-radius: 2px; } .rx p { font-size: 15.5px; } .rx mark { background: linear-gradient(transparent 62%, rgba(138,148,96,.24) 62%); } .rn { color: var(--sub); } .disc { margin: 14px 0 0; padding-left: 14px; border-left: 2px solid var(--accent); } .fam { display: flex; align-items: baseline; gap: 18px; padding-top: 16px; } .fam .tag { margin: 0; } .fcs { gap: 4px 16px; } .fc { background: transparent; border: 0; border-radius: 0; padding: 2px 0; font-size: 16px; gap: 3px; } .fc b { font-weight: 400; font-family: "SerifEN", Georgia, serif; background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 100% / 0 1px; transition: background-size .35s var(--ease); } .fc span { color: var(--faint); font: 400 11px/1 "SerifEN", Georgia, serif; vertical-align: super; } .fc.cur { background: transparent; } .fc.cur b { color: var(--ink); background-size: 100% 2px; } .fc.cur span { color: var(--accent-ink); } .c-foot { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); gap: 12px; } .c-foot p { color: var(--muted); } .rb, .gkx-prod .review-mark-btn { min-height: 42px; border-radius: 2px; border: 1px solid var(--line); background: transparent; color: var(--body); font-weight: 500; transition: border-color .25s, background-color .25s, color .25s, transform .15s; } .rb:active, .gkx-prod .review-mark-btn:active { transform: translateY(1px); } .rb[data-r="known"][aria-pressed="true"], .gkx-prod .review-mark-btn[data-feedback="known"].active { background: var(--known); border-color: var(--known); color: #fff; } .rb[data-r="vague"][aria-pressed="true"], .gkx-prod .review-mark-btn[data-feedback="vague"].active { background: var(--vague); border-color: var(--vague); color: #fff; } .rb[data-r="unknown"][aria-pressed="true"], .gkx-prod .review-mark-btn[data-feedback="unfamiliar"].active { background: var(--unknown); border-color: var(--unknown); color: #fff; } .nx { min-height: 42px; border-radius: 2px; background: var(--ink); color: var(--paper); font-weight: 500; letter-spacing: .06em; transition: background-color .25s, box-shadow .3s; } /* wrap-up */ .wrap { border: 0; border-top: 1px solid var(--ink); border-radius: 0; background: transparent; padding: 26px 0 0; } .wrap-h { font: 600 24px/1.2 var(--display); letter-spacing: .04em; margin-bottom: 18px; } .vs { background: transparent; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; padding: 12px 0; } .vs b { font-weight: 400; font-size: 19px; } .vs > i { color: var(--muted); } .qz { background: transparent; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; padding: 14px 0; } .qz > p::before { color: var(--faint); font: 400 15px "SerifEN", Georgia, serif; } .qz-in input { border: 0; border-bottom: 1px solid var(--uline); border-radius: 0; background: transparent; padding: 0 2px; } .qz-in input:focus { outline: 0; border-bottom-color: var(--ink); } .qz-in button { border-radius: 2px; border-color: var(--line); background: transparent; color: var(--body); font-weight: 500; } .qz-in .qz-ck { background: var(--ink); border-color: var(--ink); color: var(--paper); } .recap { color: var(--accent-ink); font-weight: 600; } .end { color: var(--faint); padding-top: 20px; border-top: 1px solid var(--line); } .derv { border: 0 !important; } .dv { border-radius: 0; background: transparent; border: 0; border-top: 1px solid var(--hair); padding: 12px 0; } /* focus bar, dialogs */ .pg[data-mode="focus"] .focusbar { border-radius: 3px; background: rgba(27,26,23,.94); padding: 6px; gap: 14px; font-weight: 500; font-variant-numeric: tabular-nums; box-shadow: 0 18px 40px -16px rgba(27,26,23,.6); } .fb { border-radius: 2px; font-weight: 500; } .seg-f { display: none; } .course-dialog { border-radius: 3px; border-color: var(--line); } .course-dialog h2 { font: 600 24px/1.2 var(--display); letter-spacing: .04em; } .course-dialog h3 { font: 600 17px/1.3 var(--display); color: var(--ink); } .course-dialog button.close { border-color: var(--line); background: transparent; } .course-directory-list a { border-radius: 0; border-color: var(--hair); font-family: "SerifEN", Georgia, serif; } @media (hover: hover) { .course-directory-list a:hover { background: var(--tint); } } .lightbox img { border-radius: 2px; } .lb-x { background: var(--paper); } /* hover — pointer devices only */ @media (hover: hover) { .menu:hover { background: rgba(27,26,23,.05); } .gkx-prod .top .hb:hover, .gkx-prod .top .gk-notebook-link:hover { background-size: 100% 1px; color: var(--ink); } .seg button:not([aria-pressed="true"]):hover { color: var(--ink); } .seg button:not([aria-pressed="true"]):hover::after { transform: scaleX(.4); } .jump:hover { border-bottom-color: var(--ink); } .nw:hover { color: var(--ink) !important; } .nft:hover .nfl { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; } .wn:hover b, .fc:hover b { background-size: 100% 1px; } .wn:hover .wn-i { color: var(--accent-ink) !important; } .mapthumb:hover { border-color: var(--ink); } .exm:hover { border-left-color: var(--accent); } .tr:hover { border-color: var(--ink); color: var(--ink); } .tr[aria-pressed="true"]:hover { color: var(--paper); } .rb:hover, .gkx-prod .review-mark-btn:hover { border-color: var(--ink); transform: none; } .nx:hover { background: #2E2B26; box-shadow: 0 10px 24px -14px rgba(27,26,23,.55); } .rr:hover .rw b { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; } .qz-in button:hover { border-color: var(--ink); } .gkx-prod .ui301-learning-home:hover { color: var(--accent-ink); opacity: 1; } } /* entrance: cards settle in as they scroll into view (set by page.js; no-JS = visible) */ .card.pre { opacity: 0; transform: translateY(14px); } .card.in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .7s var(--ease); } @media (max-width: 920px) { .main { padding: 28px 22px 100px; } .side { background: var(--paper); } } @media (max-width: 680px) { /* one 56px row: ≡ · 回到主页 · 进度 · 本单元查词 · 生词本；阅读模式移到页首 */ :root { --top: calc(56px + env(safe-area-inset-top, 0px)); } .gkx-prod .top, .top { display: flex !important; grid-template-areas: none; height: var(--top); gap: 4px; padding: env(safe-area-inset-top, 0px) max(8px, env(safe-area-inset-right, 0px)) 0 max(6px, env(safe-area-inset-left, 0px)); } .gkx-prod .top .menu, .top .menu { margin: 0; flex: none; } .gkx-prod .top > .ui301-learning-home { min-width: 44px; height: 44px; font-size: 13.5px; gap: 7px; } .gkx-prod .ui301-learning-logo { width: 24px; height: 22px; } .gkx-prod .top .prog, .top .prog { margin-left: auto; max-width: none; font-size: 12px; letter-spacing: .02em; } .top .prog .pbar, .gkx-prod .top .prog .pbar { display: block; position: absolute; left: 0; right: 0; bottom: -1px; width: auto; height: 2px; background: transparent; } .top .seg, .gkx-prod .top .seg { display: none; } .gkx-prod .top .jump, .top .jump { width: 44px; height: 44px; border: 0; justify-content: center; margin: 0; padding: 0; } .gkx-prod .top .gk-notebook-link { height: 44px; min-height: 44px; padding: 0 6px; font-size: 13px; background-position: 0 calc(100% - 10px); } .seg-m { display: flex; margin-top: 22px; } .seg-m button { min-height: 44px; font-size: 14px; } .seg-f { display: flex; } .seg-f button { min-height: 40px; padding: 0 12px; color: var(--paper) !important; } .seg-f button::after { display: none; } .main, .gkx-prod .main { padding: 22px 18px calc(96px + env(safe-area-inset-bottom, 0px)); } .hero { padding: 6px 0 24px; margin-bottom: 28px; } .hero h1 { font-size: 28px; margin-top: 18px; } .hero-p { font-size: 15px; } .f-head h2 { font-size: 36px; } .gkx-prod .top > .ui301-learning-home, .gkx-prod .top > .brand.ui301-learning-home { display: inline-flex !important; } .mem-grid { grid-template-columns: 1fr; gap: 14px; } .mo-big { max-width: 220px; } .sense { grid-template-columns: 1fr; } .exm.has-mo { grid-template-columns: 60px minmax(0, 1fr); column-gap: 12px; } .mo-mini { width: 60px; } .fmap { grid-template-columns: 1fr; } .fm-core { border-right: 0; border-bottom: 1px solid var(--line); padding: 16px 0; } .fm-cols { padding: 4px 0; } .fm-col { grid-template-columns: 1fr; gap: 8px; } .card { padding: 22px 18px 16px; margin: 0 -4px 22px; } .c-word { font-size: min(40px, 10.4vw); overflow-wrap: anywhere; } .c-title { gap: 10px; } .blk { margin-top: 22px; padding-top: 16px; } .sense { gap: 10px; } .exm { padding-right: 50px; } .exm .en { font-size: 17.5px; } .tr { width: 44px; height: 44px; top: -4px; } .au { width: 44px; height: 44px; } .rr { grid-template-columns: 40px minmax(0, 1fr); padding: 12px 0; } .fam { flex-direction: column; gap: 10px; } .rb, .gkx-prod .review-mark-btn { min-height: 44px; } .nx { min-height: 44px; } .pg[data-mode="focus"] .focusbar { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); } } @media (max-width: 379px) { .gkx-prod .top .prog #progtxt, .top .prog #progtxt { display: none; } .gkx-prod .ui301-learning-home-label { font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .card.pre { opacity: 1; transform: none; } * { animation: none !important; } } .seg-f button { background: rgba(255,253,248,.12) !important; border-radius: 2px; } .focusbar .fb, #focuspos { white-space: nowrap; } @media (max-width: 680px) { .pg[data-mode="focus"] .focusbar, .gkx-prod .pg[data-mode="focus"] .focusbar { left: 10px; right: 10px; transform: none; justify-content: space-between; gap: 6px; padding: 5px; } .focusbar .fb { padding: 0 10px; min-height: 44px; font-size: 13.5px; } #focuspos { font-size: 12.5px; } } @media (max-width: 359px) { .focusbar .fb { padding: 0 7px; font-size: 13px; } } /* ===================================================================== learn303 · 生长图（2026-10-26） 词卡“记忆”改成一张从构词长到用法的小树；词族地图画成树； 去掉行标签和重复的功能文字；专注模式：顶部本族小树、纸色翻页条、左右滑动。 ===================================================================== */ :root { --tree: #BDB4A3; --node: #FFFDF9; } /* ---- card head: family › branch ··· 6 / 13 */ .c-path { gap: 8px; letter-spacing: .04em; } .c-fam { color: var(--sub); } .c-fam[lang] { font: 400 14px/1 "SerifEN", Georgia, serif; letter-spacing: 0; } .c-branch::before { content: "›"; margin-right: 8px; } .c-no { margin-left: auto; color: var(--muted); font-weight: 400; letter-spacing: .02em; font: 400 13px/1 "SerifEN", Georgia, serif; } /* ---- memory = growth diagram */ .mem.grow { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 30px; align-items: start; } .mem.grow > .mo-big { grid-row: 1 / span 4; margin: 2px 0 0; } .mem.grow > :not(.mo-big) { grid-column: 2; min-width: 0; } .mem.grow.no-mo { grid-template-columns: minmax(0, 1fr); } .mem.grow.no-mo > * { grid-column: 1; } .mem.grow .mo-big figcaption { font-size: 12.5px; line-height: 1.6; margin-top: 8px; } .gw { margin: 0; } .gw-roots { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; } .gw-r { display: inline-flex; align-items: baseline; gap: 6px; } .gw-r b { font: 400 22px/1.25 "SerifEN", Georgia, serif; color: var(--ink); } .gw-r i { font-style: normal; font-size: 13.5px; color: var(--sub); } .gw-plus { color: var(--muted); font: 300 18px/1 var(--ui); } .gw-seed { position: relative; margin: 0; } .gw-roots + .gw-seed { padding-top: 30px; } .gw-roots + .gw-seed::before { content: ""; position: absolute; left: 11px; top: 6px; height: 20px; border-left: 1px solid var(--tree); } .gw-roots + .gw-seed::after { content: ""; position: absolute; left: 8px; top: 20px; width: 6px; height: 6px; border: solid var(--tree); border-width: 0 1px 1px 0; transform: rotate(45deg); } .gw-seed > span { display: inline-block; padding: 7px 14px 8px; background: var(--node); border: 1px solid var(--uline); border-radius: 2px; font: 600 17.5px/1.45 var(--ui); color: var(--ink); letter-spacing: .02em; box-shadow: 0 1px 0 var(--hair); } .gw-br { list-style: none; margin: 0 0 0 11px; padding: 6px 0 0; } .gw-br li { position: relative; padding: 6px 0 6px 30px; line-height: 1.55; } .gw-br li::before { content: ""; position: absolute; left: 0; top: 0; width: 20px; height: calc(6px + .78em); border: solid var(--tree); border-width: 0 0 1px 1px; border-bottom-left-radius: 7px; } .gw-br li:not(:last-child)::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1px solid var(--tree); } .gw-br li > :first-child::before { content: ""; position: absolute; left: 16px; top: calc(6px + .78em - 3px); width: 5px; height: 5px; border: solid var(--tree); border-width: 1px 1px 0 0; transform: rotate(45deg); } .gw-scene { color: var(--body); font-size: 15.5px; } .gw-sense { color: var(--accent-ink); font-weight: 600; font-size: 15.5px; } .gw-scene + .gw-sense::before { content: "→"; margin: 0 8px 0 9px; color: var(--deco); font-weight: 400; } .gw-say { margin: 16px 0 0; color: var(--sub); font-size: 15px; line-height: 1.8; } .mem.grow .notes { margin-top: 12px; padding: 10px 0 0; border-top: 1px dashed var(--hair); gap: 6px; font-size: 13.5px; color: var(--sub); } .mem.grow .notes b { min-width: 0; font: 400 15.5px/1.3 "SerifEN", Georgia, serif; } .mem.grow .notes li { gap: 2px 8px; } .mem.grow .notes .kin { font-size: 13px; } /* growth diagram draws itself in once, when the card first scrolls in */ @media (prefers-reduced-motion: no-preference) { .card.pre .gw > * { opacity: 0; transform: translateY(6px); } .card.in .gw > * { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .55s var(--ease); } .card.in .gw > :nth-child(2) { transition-delay: .12s; } .card.in .gw > :nth-child(3) { transition-delay: .24s; } } /* ---- quieter card furniture */ .use > .tag.sr, .rels > .sr { position: absolute; } .blk.use { border-top: 1px solid var(--line); } .rels { padding-top: 6px; } .rr:first-of-type { border-top: 0 !important; } .tr { border-color: transparent; } .tr::before { content: ""; position: absolute; inset: 50% auto auto 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; border: 1px solid var(--line); transition: border-color .25s, background-color .25s; z-index: -1; } .tr { isolation: isolate; background: transparent !important; font-size: 13px; } .tr[aria-pressed="true"] { color: var(--paper); } .tr[aria-pressed="true"]::before { background: var(--ink); border-color: var(--ink); } @media (hover: hover) { .tr:hover { border-color: transparent; } .tr:hover::before { border-color: var(--ink); } } .c-foot { gap: 12px; } .nx { background: transparent; color: var(--ink); border: 1px solid var(--line); } @media (hover: hover) { .nx:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } } /* ---- family map as a tree: root picture on top, branches hang from one trunk */ .fmap { display: block; padding: 22px 0 18px; } .fm-core { display: flex; flex-direction: row; align-items: center; gap: 18px; border: 0 !important; padding: 0 !important; text-align: left; } .fm-core .mo-core { width: 120px; flex: none; } .fm-txt > p { margin: 0; } .fm-cols { position: relative; margin: 0 0 0 59px; padding: 12px 0 0 !important; gap: 0; display: block; } .fm-cols::before { content: ""; position: absolute; left: 0; top: 0; height: 12px; border-left: 1px solid var(--tree); } .fm-col { position: relative; padding: 12px 0 12px 34px !important; border-bottom: 0 !important; grid-template-columns: 128px minmax(0, 1fr); } .fm-col::before { content: ""; position: absolute; left: 0; top: 0; width: 24px; height: calc(12px + .8em); border: solid var(--tree); border-width: 0 0 1px 1px; border-bottom-left-radius: 8px; } .fm-col:not(:last-child)::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1px solid var(--tree); } .fm-t::before { content: ""; position: absolute; left: 20px; top: calc(12px + .8em - 3px); width: 5px; height: 5px; border: solid var(--tree); border-width: 1px 1px 0 0; transform: rotate(45deg); } .fm-t b { font: 600 15px/1.4 var(--ui); color: var(--ink); } .fm-maps { margin: 14px 0 0 59px; } .fmap.pre .fm-col { transform: translateY(6px); } /* ---- focus mode: the family tree rides on top of the card */ .ftree { display: none; } .pg[data-mode="focus"] .card .ftree { display: block; margin: -4px 0 22px; padding: 0 0 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; } .ft-root { margin: 0 0 4px; display: flex; align-items: baseline; gap: 10px; } .ft-root b { font: 400 19px/1.2 "SerifEN", Georgia, serif; color: var(--ink); } .ft-root b:not([lang]) { font: 600 16px/1.3 var(--ui); } .ft-root span { color: var(--sub); } .ft-br { list-style: none; margin: 0 0 0 9px; padding: 2px 0 0; } .ft-br li { position: relative; display: grid; grid-template-columns: 5.6em minmax(0, 1fr); gap: 10px; padding: 4px 0 4px 24px; align-items: baseline; } .ft-br li::before { content: ""; position: absolute; left: 0; top: 0; width: 15px; height: calc(4px + .75em); border: solid var(--tree); border-width: 0 0 1px 1px; border-bottom-left-radius: 6px; } .ft-br li:not(:last-child)::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1px solid var(--tree); } .ft-t { color: var(--muted); } .ft-t[lang] { font-family: "SerifEN", Georgia, serif; } .ft-br li.here .ft-t { color: var(--accent-ink); font-weight: 600; } .ft-w { display: flex; flex-wrap: wrap; gap: 2px 14px; } .tw { position: relative; font: 400 15.5px/1.5 "SerifEN", Georgia, serif; color: var(--sub); text-decoration: none; padding: 0 0 1px; background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 100% / 0 1px; transition: background-size .3s var(--ease), color .2s; } .tw::after { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; margin-left: 3px; vertical-align: 6px; background: transparent; } .tw.r-known::after { background: var(--known); } .tw.r-vague::after { background: var(--vague); } .tw.r-unknown::after { background: var(--unknown); } .tw.cur { color: var(--ink); font-weight: 600; background-size: 100% 2px; } @media (hover: hover) { .tw:not(.cur):hover { color: var(--ink); background-size: 100% 1px; } } .tw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .pg[data-mode="focus"] .famsec.fshow .f-head, .pg[data-mode="focus"] .famsec.fshow .fmap, .pg[data-mode="focus"] .famsec.fshow .f-say, .pg[data-mode="focus"] .famsec.fshow .f-ext, .pg[data-mode="focus"] .gk-notebook-guide, .pg[data-mode="focus"] .card .nx { display: none !important; } .pg[data-mode="focus"] .main { padding-top: 28px; } @keyframes gk-fin-n { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } } @keyframes gk-fin-p { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } } .card.fin-n { animation: gk-fin-n .34s var(--ease); } .card.fin-p { animation: gk-fin-p .34s var(--ease); } /* focus bar: paper, hairline, one solid "next" */ .pg[data-mode="focus"] .focusbar, .gkx-prod .pg[data-mode="focus"] .focusbar { gap: 4px; padding: 5px; border-radius: 3px; background: rgba(251,248,242,.97); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 18px 36px -20px rgba(27,26,23,.45); font-weight: 500; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .focusbar .seg-f { display: flex; } .focusbar .fb, .seg-f button.fb { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 2px; background: transparent !important; color: var(--ink) !important; font: 500 14px/1 var(--ui); cursor: pointer; transition: background-color .2s, color .2s; } .focusbar .fb svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .focusbar .fx { width: 44px; padding: 0; color: var(--sub) !important; } .focusbar .prev:disabled { color: var(--faint) !important; cursor: default; } .focusbar .nextw { background: var(--ink) !important; color: var(--paper) !important; padding: 0 14px 0 18px; } .fpos { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; min-width: 76px; padding: 0 6px; } #focuspos { font: 400 13px/1 "SerifEN", Georgia, serif; color: var(--sub); font-variant-numeric: tabular-nums; } .fpbar { display: block; width: 100%; height: 2px; background: var(--hair); } .fpbar > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s var(--ease); } @media (hover: hover) { .focusbar .fx:hover, .focusbar .prev:not(:disabled):hover { background: var(--tint) !important; color: var(--ink) !important; } .focusbar .nextw:hover { background: #2E2B26 !important; } } .focusbar .fb:active { transform: translateY(1px); } .focusbar .fb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* mobile entry + hero */ .fq { display: none; } .seg-m button span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); font-weight: 400; letter-spacing: 0; } @media (max-width: 680px) { .gkx-prod .top .prog #progtxt, .top .prog #progtxt { display: none; } .fq { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 5px; min-width: 44px; height: 44px; padding: 0 6px; border: 0; background: transparent; color: var(--ink); font: 500 13.5px/1 var(--ui); border-radius: 2px; } .fq svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; } .fq[aria-pressed="true"] { color: var(--accent-ink); box-shadow: inset 0 -2px 0 var(--accent); } .fq:active { background: var(--tint); } .seg-m { display: block; margin-top: 20px; } .seg-m button { display: block; width: 100%; text-align: left; min-height: 56px; padding: 10px 40px 10px 14px; border: 1px solid var(--line); border-radius: 2px; background: var(--white); color: var(--ink); font: 600 15px/1.3 var(--ui); position: relative; } .seg-m button::after { content: ""; position: absolute; left: auto; bottom: auto; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border: solid var(--ink); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); background: none; } .seg-m button:active { background: var(--tint); } .mem.grow { grid-template-columns: 1fr; } .mem.grow > .mo-big { grid-row: auto; display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: center; max-width: none; margin: 0 0 18px; } .mem.grow > .mo-big figcaption { margin: 0; font-size: 13.5px; color: var(--sub); } .mem.grow > :not(.mo-big) { grid-column: 1; } .gw-r b { font-size: 21px; } .fm-cols, .fm-maps { margin-left: 47px; } .fm-core .mo-core { width: 96px; } .fm-col { grid-template-columns: 1fr; gap: 6px; padding-left: 30px !important; } .pg[data-mode="focus"] .focusbar, .gkx-prod .pg[data-mode="focus"] .focusbar { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); transform: none; justify-content: space-between; gap: 2px; padding: 4px; } .focusbar .fb, .seg-f button.fb { padding: 0 10px; font-size: 14px; } .focusbar .nextw { padding: 0 10px 0 14px; } .fpos { min-width: 64px; flex: 1; } .ft-br li { grid-template-columns: 1fr; gap: 0; } .ft-t { font-size: 12.5px; } .ft-w { gap: 0 12px; } .tw { font-size: 14.5px; } .ft-br li.here .tw { font-size: 15.5px; } .pg[data-mode="focus"] .main, .gkx-prod .pg[data-mode="focus"] .main { padding-top: 18px; } } @media (max-width: 359px) { .focusbar .prev span { display: none; } .focusbar .prev { width: 44px; padding: 0; } } .c-foot { position: relative; } .c-foot > .sr, .blk > .sr { left: 0; top: 0; margin: 0; padding: 0; white-space: nowrap; } /* ===================================================================== learn303b · 色块版面（2026-10-26） 版面：卡头 → 记忆（麦色面板）→ 用法（雾青点缀）→ 注意 → 词汇关系（按类型着色的卡片网格）→ 自评。 每个区块一个带色条的小标题；颜色只用来区分词块类型，正文一律深色。 ===================================================================== */ :root { --mem-t: #7A5E26; --mem-b: #F8F2E4; --mem-l: #E9DDC2; --use-t: #3D5F62; --use-b: #EDF3F1; --use-l: #C9DBD6; --syn-t: #4E6237; --syn-b: #EEF2E6; --syn-l: #A7B98C; --ant-t: #8F4A3D; --ant-b: #F7EAE5; --ant-l: #CF9888; --conf-t: #8C5A22; --conf-b: #F7EEDD; --conf-l: #D7AE6C; --rel-t: #4A5F73; --rel-b: #E9EEF2; --rel-l: #9DB0C1; --kin-t: #50563A; --kin-b: #EFF0E7; --kin-l: #B3B795; --tip-t: #8F4A3D; --tip-b: #F8EDE9; --tip-l: #C27D6C; } .card { padding: 32px 40px 26px; } .c-head { padding-bottom: 4px; } .c-core { font-size: 21px; margin-top: 14px; } .c-en { margin-top: 6px; } /* section titles: a short colour bar + the name; one colour per kind of block */ .card .blk { margin-top: 30px; padding-top: 0; border-top: 0 !important; } .card .blk > .tag, .card .rels-tag { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; padding: 0; font: 600 13.5px/1 var(--ui); letter-spacing: .14em; color: var(--ink); background: transparent !important; } .card .blk > .tag::before { content: ""; width: 3px; height: 14px; border-radius: 0; background: currentColor; flex: none; } .card .blk > .tag::after { content: ""; flex: 1; height: 1px; background: var(--hair); margin-left: 6px; } .card .mem > .tag { color: var(--mem-t); } .card .use > .tag { color: var(--use-t); } /* 记忆: one warm panel holding picture + growth tree + the explanation */ .card .mem.grow { background: var(--mem-b) !important; border: 1px solid var(--mem-l) !important; border-radius: 4px; padding: 18px 24px 20px; grid-template-columns: 188px minmax(0, 1fr); column-gap: 28px; } .card .mem.grow > .tag { grid-column: 1 / -1; margin-bottom: 18px; } .card .mem.grow > .tag::after { background: var(--mem-l); } .card .mem.grow > .mo-big { grid-row: 2 / span 4; } .card .mem.grow .mo-stage { background: var(--white); border-color: var(--mem-l); } .card .mem.grow .mo-big figcaption { color: var(--sub); } .mem.grow .gw-seed > span { background: var(--white); border-color: #CDBB93; box-shadow: 0 1px 0 var(--mem-l); } .mem.grow { --tree: #C2AE84; } .mem.grow .gw-sense { color: var(--mem-t); } .mem.grow .gw-say { color: var(--body); max-width: 38em; } .mem.grow .notes { border-top-color: var(--mem-l); } /* 用法: white, teal accents; sense heading on the left, collocations + examples on the right */ .card .use .sense { grid-template-columns: 188px minmax(0, 1fr); column-gap: 28px; padding: 18px 0; } .card .use > .tag + .sense { padding-top: 4px; } .card .use .sense + .sense { border-top: 1px solid var(--hair); } .card .s-k { font-size: 16px; line-height: 1.5; } .card .s-pos { color: var(--use-t); } .card .s-ex { margin-top: 8px !important; font-size: 14px; line-height: 1.7; color: var(--sub); } .card .pts { gap: 8px; } .card .pt { padding: 5px 11px; background: var(--use-b); border-radius: 2px; color: var(--use-t); font-size: 15.5px; line-height: 1.3; } .card .pt i { color: var(--sub); margin-left: 4px; } .card .exm { border-left: 2px solid var(--use-l); padding: 4px 50px 4px 18px; } .card .exm .en { font-size: 18px; line-height: 1.6; } .card .exm mark { background: linear-gradient(transparent 60%, rgba(61,95,98,.16) 60%); color: var(--ink); } .card .ex-lab { margin-bottom: 4px; font-size: 13px; } .card .ex-lab b { color: var(--use-t); } .card .zh p { font-size: 14px; line-height: 1.7; } .card .s-note { font-size: 14px; color: var(--use-t); padding-left: 20px; } /* 注意 */ .card .tip { margin-top: 22px; padding: 12px 16px; background: var(--tip-b); border: 0; border-left: 3px solid var(--tip-l); border-radius: 0 3px 3px 0; color: var(--body); line-height: 1.7; } .card .tip .tag { color: var(--tip-t); letter-spacing: .12em; font-size: 13px; } .card .tip .tag::before { display: none; } /* 词汇关系: section title doubles as the colour key; one tinted card per related word */ .card .blk > .rels-tag::before { display: none; } .card .rels-tag > span { display: inline-flex; align-items: center; gap: 6px; } .card .rels-tag > span + span { margin-left: 8px; } .card .rels-tag > span::before { content: ""; width: 9px; height: 9px; border-radius: 1px; background: currentColor; } .card .rels-tag::after { content: ""; flex: 1; height: 1px; background: var(--hair); margin-left: 6px; } .rh-syn { color: var(--syn-t); } .rh-ant { color: var(--ant-t); } .rh-conf { color: var(--conf-t); } .rh-rel { color: var(--rel-t); } .rh-kin { color: var(--kin-t); } .rh-disc { color: var(--accent-ink); } .rgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .rgrid.one { grid-template-columns: minmax(0, 1fr); } .card .rr { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "rt rw" "rx rx" "rn rn"; column-gap: 10px; row-gap: 10px; align-content: start; margin: 0; padding: 14px 16px 15px 15px; border: 0 !important; border-left: 3px solid var(--l) !important; border-radius: 0 3px 3px 0; background: var(--b) !important; --b: var(--syn-b); --l: var(--syn-l); --t: var(--syn-t); --m: rgba(78,98,55,.18); } .card .rr.r-ant { --b: var(--ant-b); --l: var(--ant-l); --t: var(--ant-t); --m: rgba(143,74,61,.16); } .card .rr.r-conf { --b: var(--conf-b); --l: var(--conf-l); --t: var(--conf-t); --m: rgba(140,90,34,.18); } .card .rr.r-rel { --b: var(--rel-b); --l: var(--rel-l); --t: var(--rel-t); --m: rgba(74,95,115,.16); } .card .rr.r-kin { --b: var(--kin-b); --l: var(--kin-l); --t: var(--kin-t); --m: rgba(80,86,58,.16); } .card .rt { grid-area: rt; align-self: center; padding: 3px 6px; border: 1px solid var(--l); border-radius: 2px; color: var(--t) !important; font: 600 12px/1 var(--ui); letter-spacing: .08em; background: rgba(255,253,249,.7); } .card .rw { grid-area: rw; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; } .card .rw b { display: inline; font: 400 20px/1.25 "SerifEN", Georgia, serif; color: var(--ink); } .card .rw > span { font-size: 14px; color: var(--sub); } .card .rw .sup { color: var(--t) !important; } .card .rw .rlink { font-size: 12.5px; color: var(--t); } .card .rx { grid-area: rx; } .card .rx p { font: 400 16px/1.6 "SerifEN", Georgia, serif; color: var(--ink); } .card .rx mark { background: linear-gradient(transparent 62%, var(--m) 62%); font-weight: 600; } .card .rx .rz { font: 400 13.5px/1.6 var(--ui); color: var(--sub); margin-top: 3px; } .card .rn { grid-area: rn; margin: 0; padding-top: 10px; border-top: 1px dashed var(--l); font-size: 14px; line-height: 1.7; color: var(--body); } .card .disc { margin: 12px 0 0; padding: 11px 16px; background: var(--kin-b); border-left: 3px solid var(--kin-l); border-radius: 0 3px 3px 0; line-height: 1.7; color: var(--body); } .card .disc .tag { color: var(--kin-t); } .card .disc .tag::before { display: none; } /* 派生补充 */ .card .derv { background: var(--kin-b) !important; border: 0 !important; border-left: 3px solid var(--kin-l) !important; border-radius: 0 3px 3px 0; padding: 14px 16px !important; } .card .derv .rels-h { border: 0; padding: 0; margin-bottom: 10px; } .card .derv .rels-h h4 { color: var(--kin-t); letter-spacing: .12em; } .card .dv { background: var(--white); border: 1px solid var(--hair); border-radius: 2px; } /* 自评 */ .card .c-foot { margin-top: 30px; padding-top: 18px; } @media (max-width: 680px) { .card { padding: 24px 18px 18px; } .card .blk { margin-top: 26px; } .card .mem.grow { grid-template-columns: 1fr; padding: 16px 16px 18px; margin-left: -4px; margin-right: -4px; } .card .mem.grow > .mo-big { grid-row: auto; } .card .use .sense { grid-template-columns: 1fr; row-gap: 12px; padding: 16px 0; } .card .exm { padding: 2px 50px 2px 14px; } .card .exm .en { font-size: 17.5px; } .rgrid { grid-template-columns: minmax(0, 1fr); gap: 10px; } .card .rr { padding: 13px 14px 14px 13px; } .card .rw b { font-size: 19px; } } /* learn303b · 细节：整卡译文开关、手机例句加宽、自评按钮带色点 */ .card .use { position: relative; } .tr-all { position: absolute; right: 0; top: -14px; min-height: 44px; padding: 0 2px 0 12px; border: 0; background: var(--white); color: var(--use-t); font: 500 13px/1 var(--ui); cursor: pointer; } .tr-all::before { content: "译"; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border: 1px solid var(--use-l); border-radius: 50%; font-size: 11px; } .tr-all[aria-pressed="true"]::before { background: var(--use-t); border-color: var(--use-t); color: var(--white); } @media (hover: hover) { .tr-all:hover { color: var(--ink); } } .tr-all:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .card .s-ex { font-size: 15px; } .gkx-prod .review-mark-btn::before, .rb::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; background: var(--known); } .gkx-prod .review-mark-btn[data-feedback="vague"]::before, .rb[data-r="vague"]::before { background: var(--vague); } .gkx-prod .review-mark-btn[data-feedback="unfamiliar"]::before, .rb[data-r="unknown"]::before { background: var(--unknown); } .gkx-prod .review-mark-btn.active::before, .rb[aria-pressed="true"]::before { background: currentColor; } @media (max-width: 680px) { /* picture + sense label share the first line; the sentence gets the full width */ .card .exm.has-mo { grid-template-columns: 52px minmax(0, 1fr); column-gap: 10px; row-gap: 6px; align-items: center; } .card .exm.has-mo .mo-mini { width: 52px; grid-row: 1; grid-column: 1; } .card .exm.has-mo > .ex-lab { grid-column: 2; grid-row: 1; margin: 0; } .card .exm.has-mo > .en, .card .exm.has-mo > .zh { grid-column: 1 / -1; } .card .exm.has-mo > .ex-lab ~ .en { grid-row: 2; } .tr-all { top: -15px; } } /* learn303 · Codex 审查修正：本族小树的词是跳转链接，命中高度 ≥44px，行与行不重叠 */ .ft-w { gap: 0 16px; } .tw { display: inline-flex; align-items: center; min-height: 44px; padding: 0; background-position: 0 calc(50% + .78em); } .ft-br li { padding-top: 0; padding-bottom: 0; align-items: center; } .ft-br li::before { height: 22px; } .ft-t { line-height: 44px; } @media (max-width: 680px) { .ft-br li { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; } .ft-t { line-height: 44px; flex: none; } .ft-w { display: contents; } } .tw { min-width: 44px; background: none !important; text-decoration: none; } .tw.cur { text-decoration: underline 2px var(--accent); text-underline-offset: 6px; } @media (hover: hover) { .tw:not(.cur):hover { text-decoration: underline 1px var(--accent); text-underline-offset: 6px; } } /* learn303 · 320 宽顶栏：专注按钮只留图标，收紧间距，给生词本计数留位（所有控件仍 ≥44px） */ @media (max-width: 379px) { .gkx-prod .top, .top { gap: 2px; } .fq { width: 44px; padding: 0; } .fq span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .gkx-prod .top .jump, .top .jump { flex: none; } .gkx-prod .top .gk-notebook-link { padding: 0 4px; font-size: 12.5px; letter-spacing: 0; flex: none; } .gkx-prod .top > .ui301-learning-home { gap: 5px; flex: none; } } /* learn304 · 视频伴学入口：单元开头一张卡、单元末一行、目录抽屉一条链接；全部指向本单元 videos.html */ .vcue { margin: 26px 0 0; max-width: 620px; border: 1px solid var(--line); background: var(--white); border-radius: 2px; } .vcue svg, .vend svg, .side-v svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .vcue svg:not(.vc-ar) path, .vend svg:not(.vc-ar) path, .side-v svg:not(.vc-ar) path { fill: currentColor; stroke: none; } .vc-ar { width: 16px; height: 16px; color: var(--muted); } .vc-head { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--hair); } .vc-head > svg:first-child { width: 24px; height: 24px; color: var(--accent-ink); } .vc-h { font: 600 16px/1.2 var(--display); letter-spacing: .04em; } .vc-s { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vc-all { font-size: 13px; color: var(--sub); } .vc-list { list-style: none; margin: 0; padding: 0; } .vc-list li + li { border-top: 1px solid var(--hair); } .vc-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; min-height: 56px; padding: 10px 14px 10px 48px; text-decoration: none; color: var(--body); } .vc-row::before { content: ""; position: absolute; left: 22px; top: 50%; width: 0; height: 0; margin-top: -5px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--deco); } .vc-tt { grid-column: 1; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.35; } .vc-hk { grid-column: 1; font-size: 13px; color: var(--sub); line-height: 1.5; margin-top: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .vc-mt { grid-column: 1; font-size: 12px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; } .vc-row .vc-ar { grid-column: 2; grid-row: 1 / span 3; } .vc-head:active, .vc-row:active, .vend:active, .side-v:active { background: var(--tint); } @media (hover: hover) { .vc-head:hover .vc-all, .vc-row:hover .vc-tt { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; } .vc-row:hover::before { border-left-color: var(--accent); } .vend:hover b, .side-v:hover span { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; } } .vc-head:focus-visible, .vc-row:focus-visible, .vend:focus-visible, .side-v:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .end { text-align: left; } .end p { margin: 0; text-align: center; } .vend { display: flex; align-items: center; gap: 12px; max-width: 620px; margin: 20px auto 0; min-height: 56px; padding: 10px 14px; border: 1px solid var(--line); background: var(--white); border-radius: 2px; text-decoration: none; color: var(--body); } .vend > svg:first-child { width: 26px; height: 26px; color: var(--accent-ink); } .ve-t { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 13px; color: var(--sub); line-height: 1.5; } .ve-t b { font-size: 15px; font-weight: 600; color: var(--ink); } .side-v { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 4px 0 10px; padding: 0 10px; border: 1px solid var(--line); background: var(--white); border-radius: 2px; text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 500; } .side-v > svg:first-child { width: 19px; height: 19px; color: var(--accent-ink); } .side-v span { flex: 1; } /* focus mode: after the last word, the end panel (with the video link) shows under the card */ .pg[data-mode="focus"].fdone .end { display: block; margin-top: 8px; } @media (min-width: 921px) { .vcue { margin-top: 28px; } } @media (max-width: 680px) { .vcue { margin-top: 12px; max-width: none; } .vc-s { display: none; } .vc-head { justify-content: flex-start; } .vc-h { flex: 1; } .vc-row { padding-left: 40px; } .vc-row::before { left: 17px; } } /* ===================================================================== learn305 · 手机词卡版面：整宽纸面、单栏阅读、字号节奏、搭配成行、关系词收紧 只作用于 ≤680px；桌面不变 ===================================================================== */ @media (max-width: 680px) { /* the card becomes an edge-to-edge sheet: the text gets the whole phone width */ .main .card { margin: 0 -16px 14px; padding: 20px 16px 18px; border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; } .pg[data-mode="focus"] .main .card { margin-top: 0; } .card p, .card li, .card .s-k, .card .c-core, .card .ex-lab, .card .rn, .card .tip, .card .disc { text-wrap: pretty; line-break: strict; } /* head: path / word + sound / meanings / English gloss */ .card .c-path { font-size: 12px; margin-bottom: 6px; } .card .c-title { gap: 4px 10px; row-gap: 2px; } .card .c-word { font-size: 38px; line-height: 1.08; letter-spacing: -.01em; } .card .c-ipa { font-size: 15px; } .card .c-pos { font-size: 13px; } .card .c-core { margin: 12px 0 0; font-size: 19px; line-height: 1.5; font-weight: 600; color: var(--ink); } .card .c-core .cm { display: inline-block; max-width: 100%; } .card .gw-sense { display: inline-block; } .card .c-en { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--sub); } /* blocks: one rhythm — 28px between blocks, small coloured title */ .card .blk { margin-top: 26px; } .card .blk.mem { margin-left: -16px; margin-right: -16px; padding: 16px 16px 18px; border-left: 0; border-right: 0; border-radius: 0; } .card .gw-say { font-size: 14.5px; line-height: 1.75; } .card .notes li { font-size: 13.5px; line-height: 1.7; } /* senses: heading, one-line explanation, collocations as a phrase line, examples full width */ .card .sense { padding: 18px 0 4px; } .card .s-k { font-size: 16.5px; line-height: 1.45; } .card .s-k .s-pos { margin-right: 6px; } .card .s-ex { margin-top: 4px; font-size: 14px; line-height: 1.7; color: var(--sub); } .card .pts { display: block; margin: 10px 0 0; padding: 0; line-height: 1.6; } .card .pt { display: inline-block; vertical-align: baseline; max-width: 100%; margin: 0 18px 4px 0; padding: 0; border: 0; border-radius: 0; background: none !important; box-shadow: none; font: 400 15.5px/1.6 var(--en); color: var(--ink); white-space: normal; } .card .pt > span { font-family: var(--en); } .card .pt i { font: 400 12.5px var(--ui); color: var(--muted); margin-left: 5px; font-style: normal; } .card .pt::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 7px 0 0; vertical-align: .3em; border-radius: 50%; background: var(--use, #3D5F62); opacity: .55; } .card .exm { margin: 14px 0 0; padding: 0; border: 0; } .card .exm::before { display: none; } .card .exm > .en { font-size: 16.5px; line-height: 1.62; } .card .exm > .en:first-child::before { content: ""; float: right; width: 40px; height: 26px; } .card .exm > .ex-lab { padding-right: 46px; min-height: 30px; display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; font-size: 12.5px; margin: 0 0 2px; } .card .exm .tr { top: -7px; right: -6px; } .card .exm.has-mo > .ex-lab { padding-right: 46px; } .card .zh { margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--hair); } .card .zh p { font-size: 14px; line-height: 1.7; } .card .s-note { margin-top: 12px; font-size: 13.5px; line-height: 1.7; } .tr-all { top: -2px; } /* tip / discrimination: a quiet line with a coloured lead, not a box */ .card .tip, .card .disc { margin: 18px 0 0; padding: 2px 0 2px 12px; background: none; border-radius: 0; font-size: 14px; line-height: 1.7; } /* relations: no filled boxes — a coloured rule, word line, one example, one note */ .rgrid { gap: 0; } .card .rr { padding: 14px 0 14px 12px; background: none !important; border-top: 0; border-right: 0; border-bottom: 1px solid var(--hair); border-radius: 0; box-shadow: none; } .card .rr:last-child { border-bottom: 0; } .card .rw b { font-size: 19px; } .card .rx { margin-top: 6px; padding: 0; border: 0; background: none; } .card .rx p { font-size: 15.5px; line-height: 1.6; } .card .rx .rz { font-size: 13.5px; color: var(--sub); } .card .rn { margin-top: 6px; padding-top: 0; border-top: 0 !important; font-size: 13.5px; line-height: 1.7; color: var(--sub); } /* self-rating sits on its own rule */ .card .c-foot, .card .rate { margin-top: 22px; } } /* learn304 · 账号“退出”按钮（登录守卫脚本追加在 body 末尾，原来是浏览器默认灰按钮）：页底一枚安静的描边按钮；专注模式里不出现 */ body > #gk3500SignOutButton { display: block; margin: 8px auto calc(28px + env(safe-area-inset-bottom, 0px)); min-width: 88px; min-height: 44px; padding: 0 18px; -webkit-appearance: none; appearance: none; border: 1px solid var(--line); border-radius: 2px; background: var(--white); color: var(--sub); font: 500 13.5px/1 var(--ui); letter-spacing: .08em; cursor: pointer; } @media (hover: hover) { body > #gk3500SignOutButton:hover { color: var(--ink); border-color: var(--uline); } } body > #gk3500SignOutButton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .pg[data-mode="focus"] ~ #gk3500SignOutButton { display: none; }