/* LexiGlobal UI prototype — screen layouts (Home, Dictionary, Saved, Settings). */ /* ============================================================ HOME */ .shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: var(--gap); } .shortcut { display: grid; justify-items: center; gap: 4px; min-height: 92px; padding: 12px 6px; text-align: center; text-decoration: none; color: var(--text); border: 1px solid var(--hairline); border-radius: var(--radius-card); background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 55%, color-mix(in srgb, var(--btn-b) 45%, var(--surface)) 100%); box-shadow: var(--shadow-card); transition: transform var(--dur); } .shortcut:active { transform: translateY(1px); } .shortcut > .ic { width: 28px; height: 28px; color: var(--icon); } .shortcut .t { display: inline-flex; align-items: center; gap: 2px; font: 700 1rem/1.2 var(--serif); letter-spacing: -.005em; color: var(--head); } .shortcut .t .ic { width: 15px; height: 15px; color: var(--text-2); } .shortcut .s { font-size: .8125rem; line-height: 1.3; color: var(--text-2); } .continue-wrap { container: cont / inline-size; } .continue { display: grid; grid-template-columns: 84px minmax(0, 1fr); padding: 0; overflow: hidden; } @container cont (max-width: 19rem) { .continue-wrap .continue { grid-template-columns: 1fr; } .continue-wrap .continue .thumb { min-height: 0; height: 84px; object-position: center 72%; } } .continue .thumb { width: 100%; height: 100%; min-height: 150px; object-fit: cover; display: block; } .continue .body { display: grid; gap: 6px; align-content: center; padding: var(--pad); } .continue .eyebrow { font-size: .8125rem; color: var(--text-2); } .continue .title-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 44px; margin: -6px 0; padding: 0; border: 0; background: none; text-align: left; font: 700 1rem/1.2 var(--serif); color: var(--head); border-radius: 8px; } .continue .title-btn .ic { width: 16px; height: 16px; color: var(--text-2); } .progress { display: flex; align-items: center; gap: 10px; } .progress .bar { position: relative; flex: 1; height: 6px; border-radius: 99px; background: var(--progress-track); overflow: hidden; } .progress .bar span { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--progress-fill); } .progress .count { font-size: .8125rem; color: var(--text); font-variant-numeric: tabular-nums; } .continue .sample { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--text-2); } .saved-card .head { display: flex; align-items: center; gap: 8px; } .saved-card .head > .ic { width: 22px; height: 22px; color: var(--head); } .saved-card .head h2 { flex: 1; } .see-all { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 2px 0 8px; font: 600 .875rem/1.2 var(--sans); color: var(--head); text-decoration: none; border-radius: 10px; } .see-all .ic { width: 15px; height: 15px; } .pill-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; } .pill-group .cap { flex-basis: 100%; font-size: .75rem; color: var(--text-2); } .pill { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 999px; font: 500 .9375rem/1.2 var(--sans); color: var(--text); background: var(--chip-bg); border: 1px solid var(--hairline); text-decoration: none; } .pill.example { border-style: dashed; border-color: var(--track); } .pill.mine { background: var(--learner-bg); border-color: var(--hairline); color: var(--text); } .pill .ic { width: 14px; height: 14px; color: var(--head); } .myspace { padding: 0; overflow: hidden; } .ms-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 72px; padding: 10px 12px; border: 0; background: none; text-align: left; color: inherit; border-radius: var(--radius-card); } .ms-head .avatar-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--head); background: var(--chip-bg); } .ms-head .avatar-ic .ic { width: 20px; height: 20px; } .ms-head .txt { display: grid; } .ms-head .txt .h-card { font-size: 1.125rem; } .ms-head .end { display: flex; align-items: center; gap: 8px; color: var(--icon); } .ms-head .end .ic { width: 20px; height: 20px; } .ms-head .ms-thumb { width: 64px; height: 40px; border-radius: 8px; object-fit: cover; border: 1px solid var(--hairline); } .ms-head .chev { width: 18px; height: 18px; color: var(--text-2); transition: transform var(--dur); } .ms-head[aria-expanded="true"] .chev { transform: rotate(180deg); } .ms-body { display: grid; gap: 10px; padding: 0 12px 12px; } .cover { position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--btn-b); } .cover img { display: block; width: 100%; height: 100%; object-fit: cover; } .cover-btn { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--icon); border: 1px solid var(--hairline); background: radial-gradient(circle at 40% 30%, var(--btn-a) 0%, var(--btn-a) 45%, var(--btn-b) 100%); box-shadow: 0 3px 8px rgba(20, 28, 40, .28); } .player { display: grid; gap: 4px; padding: 8px 10px 4px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--surface); } .prow { display: flex; align-items: center; gap: 10px; min-width: 0; } .prow .upload { flex: none; } .sep { flex: none; width: 1px; height: 28px; background: var(--hairline); } .fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; color: var(--head); } .fname.empty { color: var(--text-2); } .pmain { display: flex; align-items: center; gap: 10px; } .play { flex: none; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: var(--nav-ink); border: 0; background: radial-gradient(circle at 42% 32%, var(--nav-a) 0%, var(--nav-b) 78%); box-shadow: 0 0 0 2px var(--hi), 0 0 0 4px var(--metal), 0 0 0 5px var(--metal-deep), 0 4px 10px rgba(20, 28, 40, .3); } .play .ic { width: 22px; height: 22px; margin-left: 3px; } .play.playing .ic { margin-left: 0; } .play:disabled { cursor: default; opacity: .8; } .tracks { flex: 1; min-width: 0; } .trow { display: flex; align-items: center; gap: 8px; } .t { flex: none; min-width: 2.4em; font-size: .75rem; color: var(--head); font-variant-numeric: tabular-nums; } .t:last-child { text-align: right; } .vi { width: 18px; height: 18px; color: var(--icon); flex: none; } .ms-actions { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; } .crop-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #10161F; touch-action: none; cursor: grab; } .crop-frame img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; } .zoom { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: .875rem; color: var(--text-2); } /* ============================================================ DICTIONARY */ .word-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px; } .word-head h1 { margin: 0; font: 700 2.375rem/1.05 var(--serif); color: var(--head); letter-spacing: -.01em; overflow-wrap: break-word; min-width: 0; } .word-head .gloss { font: 600 1.25rem/1.6 var(--khmer); color: var(--head); text-align: right; } .word-meta { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 2px; } .word-meta .pos { font-size: .9375rem; color: var(--text-2); } .word-meta .ipa { font: 400 .9375rem/1.4 var(--ipa); color: var(--text); } .accent-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 8px; border-radius: 999px; font: 600 .875rem/1 var(--sans); color: var(--btn-ink); border: 1px solid var(--hairline); background: linear-gradient(180deg, var(--btn-a), var(--btn-a) 35%, var(--btn-b)); box-shadow: var(--shadow-btn); transition: transform var(--dur); } .accent-btn .flag { width: 20px; height: 20px; } .accent-btn .ic { width: 17px; height: 17px; color: var(--icon); } .accent-btn:active { transform: translateY(1px); box-shadow: var(--shadow-btn-pressed); } .accent-btn.speaking { outline: 2px solid var(--metal); outline-offset: 1px; } .accent-group { display: inline-flex; gap: 8px; } .section-nav { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--hairline); } .section-nav button { position: relative; flex: 1 1 auto; min-height: 44px; padding: 6px 2px 8px; border: 0; background: none; font: 600 .8125rem/1.25 var(--sans); color: var(--text-2); border-radius: 10px 10px 0 0; } .section-nav button[aria-current="true"] { color: var(--head); } .section-nav button[aria-current="true"]::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -1px; height: 3px; border-radius: 3px; background: var(--metal); } .entry-card { display: grid; gap: var(--gap); } .entry-card.def { background: var(--surface-warm); } .entry-card.struct { background: var(--structure-bg); } .ecard-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: -6px -4px -6px 0; } .ecard-head h2 { flex: 1 1 auto; min-width: 0; margin: 0; } .ecard-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; border: 0; background: none; text-align: left; color: var(--head); border-radius: 8px; } .ecard-toggle .ic { width: 16px; height: 16px; color: var(--text-2); transition: transform var(--dur); } .ecard-toggle[aria-expanded="true"] .ic { transform: rotate(180deg); } .ecard-toggle .sense { font: 700 .8125rem/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); } .ecard-toggle .h-card { font: 700 1rem/1.3 var(--sans); } .ecard-toggle .reg { font: 600 .9375rem/1.3 var(--sans); color: var(--text); } .gram { min-height: 44px; min-width: 44px; padding: 0 6px; border: 0; background: none; font: 700 .8125rem/1 var(--sans); color: var(--learner-label); text-decoration: underline dotted; text-underline-offset: 3px; border-radius: 8px; } .tr-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; margin-left: auto; border-radius: 999px; font: 600 .8125rem/1 var(--sans); color: var(--btn-ink); border: 1px solid var(--hairline); background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); box-shadow: var(--shadow-btn); } .tr-btn .ic { width: 14px; height: 14px; transition: transform var(--dur); } .tr-btn[aria-expanded="true"] .ic { transform: rotate(180deg); } .tr-box { padding: 8px 12px; border-radius: 10px; border: 1px dashed var(--track); background: var(--surface); font-size: .9375rem; } .tr-box .km { font: 600 1.0625rem/1.6 var(--khmer); color: var(--head); } .note-pop { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--hairline); font-size: .875rem; } .def-text { margin: 0; font-size: 1rem; line-height: var(--lh); } .ex { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; padding: 8px 4px 8px 12px; border-radius: 10px; } .ex .lab { display: block; margin-bottom: 1px; font: 700 .75rem/1.3 var(--sans); letter-spacing: .04em; } .ex p { margin: 0; line-height: var(--lh); } .ex b { font-weight: 700; color: var(--head); } .ex.learner { background: var(--learner-bg); } .ex.learner .lab { color: var(--learner-label); } .def-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; } .link-btn { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 2px; border: 0; background: none; font: 600 .875rem/1.2 var(--sans); color: var(--head); border-radius: 8px; } .link-btn .ic { width: 15px; height: 15px; } .reg-rows { display: grid; gap: 8px; } .reg-row { display: flex; flex-wrap: wrap; align-items: stretch; border-radius: 10px; overflow: hidden; } .reg-row .k { flex: 0 0 6.2rem; display: flex; align-items: center; padding: 8px 10px; font: 700 .875rem/1.2 var(--sans); border-right: 1px solid var(--hairline); } .reg-row .v { flex: 1 1 8rem; min-width: 0; align-self: center; margin: 0; padding: 8px 4px 8px 12px; line-height: var(--lh); } .reg-row .v b { font-weight: 700; color: var(--head); } .reg-row .icon-btn { align-self: center; } .reg-row.everyday { background: var(--everyday-bg); } .reg-row.everyday .k { color: var(--everyday-label); } .reg-row.formal { background: var(--formal-bg); } .reg-row.formal .k { color: var(--formal-label); } .reg-note { margin: 0; font-size: .875rem; line-height: 1.45; color: var(--text-2); } .pattern-list { margin: 0; padding-left: 20px; display: grid; gap: 2px; } .pattern-list li { line-height: var(--lh); } .prow-d { border-top: 1px solid var(--hairline); } .prow-d:first-child { border-top: 0; } .prow-d > button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 4px 0; border: 0; background: none; text-align: left; font: 600 .9375rem/1.3 var(--sans); color: var(--text); border-radius: 8px; } .prow-d > button .ic { width: 16px; height: 16px; color: var(--text-2); transition: transform var(--dur); } .prow-d > button[aria-expanded="true"] .ic { transform: rotate(90deg); } .prow-d .pb { display: grid; gap: 6px; padding: 0 0 10px; } .prow-d .pb p { margin: 0; font-size: .9375rem; color: var(--text-2); } .prow-d .sx { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; padding: 6px 4px 6px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--hairline); } .prow-d .sx p { font-style: italic; color: var(--text); } .prow-d .sx b { font-style: normal; color: var(--head); } .entry-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .audio-note { margin: 0 4px; font-size: .8125rem; line-height: 1.4; color: var(--text-2); text-align: center; } .cite-out { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface-warm); border: 1px solid var(--hairline); font-size: .9375rem; } /* ============================================================ SAVED */ .saved-list { list-style: none; margin: 0; padding: 0; } .saved-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; border-top: 1px solid var(--hairline); } .saved-list li:first-child { border-top: 0; } .saved-list a { display: inline-flex; align-items: center; min-height: 44px; font: 700 1.375rem/1.1 var(--serif); color: var(--head); text-decoration: none; border-radius: 8px; } /* ============================================================ SETTINGS (full-screen tab) */ .settings-head { position: relative; display: grid; justify-items: center; gap: 2px; padding-top: 8px; text-align: center; } .settings-head .mini-brand { display: grid; justify-items: center; gap: 0; color: inherit; text-decoration: none; border-radius: 10px; } .settings-head .mini-brand img { width: 46px; height: 39px; } .settings-head .mini-brand span { font: 600 1.125rem/1.1 var(--serif); color: var(--head); } .settings-head .h-page { margin-top: 4px; } .settings-head .sub { margin: 0; font-size: .8125rem; color: var(--text-2); } .overflow { position: absolute; top: 4px; right: -6px; } .menu { position: absolute; z-index: 15; top: 52px; right: 0; display: grid; min-width: 210px; padding: 6px; border-radius: 12px; background: var(--surface); border: 1px solid var(--hairline); box-shadow: 0 12px 30px rgba(20, 28, 40, .22); } .menu button { min-height: 44px; padding: 0 12px; border: 0; background: none; text-align: left; font: 500 .9375rem/1.2 var(--sans); color: var(--text); border-radius: 8px; } .menu button:hover, .menu button:focus-visible { background: var(--chip-bg); } .sgroup { padding: 0; overflow: hidden; container: sgroup / inline-size; } .group-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title chev" "sum sum"; align-items: center; gap: 2px 10px; width: 100%; min-height: 52px; padding: 8px 14px; border: 0; background: none; text-align: left; color: inherit; } .group-head .h-card { grid-area: title; min-width: 0; overflow-wrap: normal; } .group-head .summary { grid-area: sum; min-width: 0; font-size: .8125rem; line-height: 1.35; color: var(--text-2); overflow-wrap: normal; } .group-head .chev { grid-area: chev; width: 18px; height: 18px; color: var(--text); transition: transform var(--dur); } @container sgroup (min-width: 21rem) { .group-head { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "title sum chev"; } .group-head .summary { text-align: right; } } .group-head[aria-expanded="true"] .chev { transform: rotate(180deg); } .group-head[aria-expanded="true"] .summary { display: none; } .group-head[aria-expanded="true"] { border-bottom: 1px solid var(--hairline); } .group-body > * + * { border-top: 1px solid var(--hairline); } .row-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 14px; border: 0; background: none; text-align: left; color: var(--text); font: 500 .9375rem/1.35 var(--sans); } .row-btn .lbl { flex: 1 1 auto; min-width: 0; } .row-btn .val { flex: 0 1 auto; min-width: 0; font-size: .875rem; color: var(--text-2); text-align: right; } .row-btn .chev { width: 16px; height: 16px; color: var(--text-2); transition: transform var(--dur); } .row-btn[aria-expanded="true"] .chev { transform: rotate(90deg); } .row-static { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; font: 500 .9375rem/1.35 var(--sans); } .row-static .lbl { flex: 1; } .row-static .val { font-size: .875rem; color: var(--text-2); text-align: right; } .editor { display: grid; gap: 10px; padding: 4px 14px 14px; border-top: 0 !important; background: color-mix(in srgb, var(--chip-bg) 35%, transparent); } .editor .hint { margin: 0; font-size: .8125rem; line-height: 1.4; color: var(--text-2); } .editor-actions { display: flex; flex-wrap: wrap; gap: 8px; } .profile { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; border: 0; background: none; text-align: left; color: inherit; } .avatar { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; font: 700 1.125rem/1 var(--serif); color: #2A1F05; background: radial-gradient(circle at 35% 30%, var(--avatar-a), var(--avatar-b)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 5px rgba(20, 28, 40, .2); } .profile .who { flex: 1; display: grid; gap: 3px; justify-items: start; } .profile .name { font: 700 1.125rem/1.2 var(--serif); color: var(--head); } .profile .chev { width: 16px; height: 16px; color: var(--text-2); } .upgrade-wrap { padding: 10px 14px; } .upgrade { width: 100%; justify-content: space-between; border-radius: 12px; min-height: 48px; } .upgrade .ic:first-child { color: var(--hi); } .upgrade .grow { flex: 1; text-align: left; } .ext-note { font-size: .8125rem; color: var(--text-2); } .settings-foot { display: flex; justify-content: center; } /* ============================================================ translation language: header button + 65-language picker (as in academic/) */ .lang-pick { gap: 6px; padding: 0 12px 0 14px; font-size: .8125rem; margin-left: auto; } .lang-pick .ic { width: 15px; height: 15px; } .lp-dialog { width: min(420px, calc(100vw - 20px)); } .lp { display: grid; gap: 8px; } .lp-sub { margin: -4px 0 0; font-size: .8125rem; color: var(--text-2); } .lp-search { position: relative; display: flex; align-items: center; } .lp-search .ic { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--text-2); pointer-events: none; } .lp-search input { width: 100%; min-height: 44px; padding: 0 12px 0 38px; border-radius: 12px; border: 1px solid var(--track); background: var(--surface); color: var(--text); font: 500 1rem var(--sans); } .lp-list { max-height: min(52dvh, 440px); overflow: auto; margin: 0; padding: 0 2px; border: 0; min-width: 0; overscroll-behavior: contain; } .lp-region { position: sticky; top: 0; z-index: 1; margin: 0; padding: 8px 2px 4px; background: var(--surface); font: 700 max(11px, .75rem)/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--metal-text); border-bottom: 1px solid var(--hairline); } .lp-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 10px; min-height: 44px; padding: 2px 4px; border-bottom: 1px solid color-mix(in srgb, var(--hairline) 60%, transparent); cursor: pointer; } .lp-row input { width: 18px; height: 18px; margin: 0; accent-color: var(--nav-b); } .lp-native { font-weight: 600; color: var(--head); } .lp-text { min-width: 0; line-height: 1.3; } .lp-name { font-size: .8125rem; color: var(--text-2); white-space: nowrap; } .lp-state { font: 600 max(11px, .75rem)/1.2 var(--sans); color: var(--text-2); white-space: nowrap; } .lp-state .ic { width: 16px; height: 16px; color: var(--everyday-label); } .lp-row.soon { cursor: default; } .lp-row.soon .lp-native { color: var(--text); font-weight: 500; } .lp-row:has(input:checked) { background: color-mix(in srgb, var(--learner-bg) 70%, transparent); border-radius: 8px; } .lp-row:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: -2px; border-radius: 8px; } /* "Show Khmer" stays on the card's title row: on narrow cards the word "Show" drops (accessible name unchanged) */ .entry-card { container: entry / inline-size; } @container entry (max-width: 24rem) { .tr-show { display: none; } .tr-btn { padding: 0 10px; } } .ecard-head .tr-btn { flex: none; } /* ============================================================ Basic → Advanced levels, related words, Structure levels */ .reg-row.learner { background: var(--everyday-bg); } .reg-row.learner .k { color: var(--everyday-label); } .reg-row.c1 { background: var(--learner-bg); } .reg-row.c1 .k { color: var(--learner-label); } .reg-row.c2 { background: var(--formal-bg); } .reg-row.c2 .k { color: var(--formal-label); } .reg-full { display: grid; gap: var(--gap); } .rel-groups { display: grid; border-top: 1px solid var(--hairline); } .rel-group + .rel-group { border-top: 1px solid var(--hairline); } .rel-head { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 2px; border: 0; background: none; text-align: left; font: 600 .9375rem/1.3 var(--sans); color: var(--head); border-radius: 8px; } .rel-head .ic { width: 16px; height: 16px; margin-left: auto; color: var(--text-2); transition: transform var(--dur); } .rel-head[aria-expanded="true"] .ic { transform: rotate(180deg); } .rel-count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--chip-bg); border: 1px solid var(--hairline); font: 600 .75rem/1.4 var(--sans); color: var(--text-2); text-align: center; } .rel-list { list-style: none; display: grid; gap: 6px; margin: 0 0 8px; padding: 0; } .rel-list li { display: grid; gap: 1px; padding: 6px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--hairline); } .rel-phrase { font-weight: 700; color: var(--head); } .rel-ex { font-size: .9375rem; color: var(--text); line-height: var(--lh); } .rel-ex b { font-weight: 700; } .src-line { margin: 0; font-size: .75rem; line-height: 1.35; color: var(--text-2); } .lvl-list { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; } .lvl-ex { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 6px 4px 6px 8px; border-radius: 10px; background: var(--surface); border: 1px solid var(--hairline); } .lvl-ex p { margin: 0; font-style: normal; color: var(--text); line-height: var(--lh); } .lvl-ex b { font-weight: 700; color: var(--head); } .lvl { min-width: 3.6rem; padding: 2px 8px; border-radius: 999px; font: 700 .75rem/1.4 var(--sans); text-align: center; } .lvl-learner .lvl { background: var(--everyday-bg); color: var(--everyday-label); } .lvl-c1 .lvl { background: var(--learner-bg); color: var(--learner-label); } .lvl-academic .lvl { background: var(--surface-warm); color: var(--metal-text); } .lvl-c2 .lvl { background: var(--formal-bg); color: var(--formal-label); } @container entry (max-width: 19rem) { .lvl-ex { grid-template-columns: minmax(0, 1fr) auto; } .lvl-ex .lvl { grid-column: 1 / -1; justify-self: start; } } /* level rows: a small level pill above a full-width sentence (saves the 6rem label column) */ .reg-row.learner, .reg-row.c1, .reg-row.c2 { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; padding: 6px 4px 8px 12px; } .reg-row.learner .k, .reg-row.c1 .k, .reg-row.c2 .k { grid-column: 1; grid-row: 1; justify-self: start; padding: 1px 8px; border: 0; border-radius: 999px; background: var(--surface); font: 700 .75rem/1.4 var(--sans); } .reg-row.learner .v, .reg-row.c1 .v, .reg-row.c2 .v { grid-column: 1; grid-row: 2; padding: 2px 0 0; } .reg-row.learner .say, .reg-row.c1 .say, .reg-row.c2 .say { grid-column: 2; grid-row: 1 / span 2; } /* Structure level examples: pill above a full-width sentence, same as Basic → Advanced */ .lvl-ex { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; padding: 6px 4px 8px 10px; } .lvl-ex .lvl { grid-column: 1; grid-row: 1; justify-self: start; min-width: 0; padding: 1px 8px; } .lvl-ex p { grid-column: 1; grid-row: 2; padding-top: 2px; } .lvl-ex .say { grid-column: 2; grid-row: 1 / span 2; } /* synonym / antonym word chips inside the related-word disclosures */ .rel-words { display: grid; gap: 6px; margin: 0 0 8px; } .rel-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; } .rel-chips li { padding: 4px 12px; border-radius: 999px; background: var(--chip-bg); border: 1px solid var(--hairline); font-size: .9375rem; color: var(--text); } /* related words are tappable: 44 px target, same pill look */ .rel-chips li { padding: 0; border: 0; background: none; } .rel-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; border-radius: 999px; color: var(--text); } .rel-chip > span { padding: 4px 12px; border-radius: 999px; background: var(--chip-bg); border: 1px solid var(--hairline); font-size: .9375rem; line-height: 1.3; } .rel-chips { row-gap: 0; } @media (hover: hover) { .rel-chip:hover > span { border-color: var(--metal); } } .rel-chip:active > span { transform: translateY(1px); } /* ============================================================ owner: full-screen feel — more room for words, same text size (Dictionary, Saved, Settings: 8 px edge. Compact density only; Comfortable keeps its own spacing from tokens.css.) */ :root { --page-x: 8px; } :root:not([data-density="comfortable"]) { --pad: 10px; --gap: 6px; --section: 6px; } .view { padding-top: 4px; } .search input { min-height: 48px; } .card { border-radius: 12px; } /* ============================================================ APPROVED HOME REFERENCE (2026-10-15) — ui/review/reference-home-approved.png Owner-approved full Home image; measurements taken from it at 390 px (1 CSS px ≈ 2.167 image px). Implemented by Claude Code; reviewed independently by OpenAI Codex (ui/docs/home/, round 1 findings R1–R7 applied). One authoritative rule set per component below. */ :root { --nav-h: 66px; --nav-float: 6px; --serif-display: "EB Garamond", var(--serif); /* wordmark + Home titles (wider, heavier, as in the image) */ --card-edge: color-mix(in srgb, var(--metal) 34%, transparent); /* thin champagne card outline */ --title-warm: color-mix(in srgb, var(--metal-text) 62%, var(--text)); /* dark bronze accent titles */ --name-bronze: color-mix(in srgb, var(--metal-text) 86%, var(--text)); /* founder name: solid dark bronze */ --ambient-top: rgba(255, 255, 255, .8); /* upper light (light themes) */ --pill-ink: var(--head); /* icon on the light champagne nav pill */ --pill-a: color-mix(in srgb, var(--hi) 78%, var(--surface)); --pill-b: color-mix(in srgb, var(--metal) 48%, var(--surface)); } [data-theme="royal-navy"], [data-theme="emerald-gold"], [data-theme="burgundy-rose"], [data-theme="graphite-copper"] { --ambient-top: var(--ambient-1); --pill-ink: var(--nav-ink); --pill-a: var(--hi); --pill-b: color-mix(in srgb, var(--metal) 75%, var(--hi)); } /* dark themes: dark ink on a solid gold pill (R5) */ [data-theme="silver-platinum"], :root:not([data-theme]) { --page-bg: #EFEFF0; --ambient-1: rgba(255, 255, 255, .75); --ambient-2: rgba(236, 222, 196, .28); } /* the ambient light must sit above the page background (html and body both paint it) and below the content: Codex round 2 R4 */ .ambient { z-index: 0; } .ambient::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 95% 32% at 50% 0%, var(--ambient-top), transparent 75%); } /* bright upper light as in the image (Codex round 3 R4) */ .app { z-index: 1; } .ambient::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 42%, transparent 45%, rgba(20, 28, 40, .045) 100%); } /* soft vignette as in the image: lighter centre, ≈ #EA–EF edges (R4) */ /* page frame: Home has a 14 px edge; the space under the founder panel reserves the floating navigation + 11 px */ .app:has(#v-home:not([hidden])) { --page-x: 14px; --section: 9px; --pad: 12px; } [data-density="comfortable"] .app:has(#v-home:not([hidden])) { --section: 14px; --pad: 16px; } /* R6 */ .app { padding-bottom: calc(var(--nav-h) + var(--nav-float) + var(--safe-b) + 11px); } html { scroll-padding-bottom: calc(var(--nav-h) + var(--nav-float) + var(--safe-b) + 12px); } .toast { bottom: calc(var(--nav-h) + var(--nav-float) + var(--safe-b) + 10px); } #v-home { padding-top: 3px; } /* header: 80 × 55 open-dictionary logo, two-tone wordmark, serif tagline, silver pills */ .brand-header { padding-top: 12px; } .brand { gap: 12px; } .brand img { width: 80px; height: 59px; margin: -2px 0 -2px 0; } /* viewBox trimmed to the painted book: ≈ 80 px of painted logo, as in the image */ .wm-name { font: 600 2rem/1 var(--serif-display); letter-spacing: -.01em; font-variant-numeric: lining-nums; } .wm-lexi { color: var(--metal-text); text-shadow: 0 1px 0 color-mix(in srgb, var(--hi) 45%, transparent); } .wm-global { color: var(--head); } .wm-tag { margin-top: 5px; font: 600 max(10px, .6875rem)/1.2 var(--serif-display); letter-spacing: .1em; color: var(--head); } /* as wide as the wordmark */ .theme-btn { padding: 0 13px; gap: 7px; } .lang-row { margin-top: 0; } .brand-header .btn-silver { border-color: color-mix(in srgb, var(--track) 42%, transparent); } /* search: champagne-edged field, navy round button with a gold ring */ #v-home .search input { min-height: 48px; border-color: var(--metal-text); } .search .s-go { border: 1.5px solid var(--metal); box-shadow: 0 0 0 1px color-mix(in srgb, var(--hi) 55%, transparent), var(--shadow-btn); } /* Home cards: luminous white surface, thin champagne outline, soft lift + top highlight (R4) */ #v-home .card, #v-home .shortcut { border-radius: 15px; border-color: var(--card-edge); background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 50%, color-mix(in srgb, var(--surface-warm) 40%, var(--surface)) 100%); box-shadow: 0 6px 18px rgba(32, 41, 54, .08), 0 1px 2px rgba(32, 41, 54, .05), inset 0 1px 0 rgba(255, 255, 255, .85); } #v-home .h-card { font-family: var(--serif-display); font-weight: 600; } /* two equal shortcut cards, 96 px: icon above a serif title + chevron, one-line subtitle; two columns down to 320 px */ #v-home .shortcuts { grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr)); gap: calc(var(--gap) + 1px); } #v-home .shortcut { min-height: 96px; align-content: center; gap: 3px; padding: 11px 4px 10px; } #v-home .shortcut > .ic { width: 27px; height: 27px; } #v-home .shortcut .t { font: 600 1.0625rem/1.2 var(--serif-display); } #v-home .shortcut .s { font-size: .75rem; } .shortcut.warm .t, .t-warm { color: var(--title-warm); } /* Continue learning: approved book artwork ≈ 25 % beside the text (stacks only with very large text), lining "01", gold-edged Resume */ @container cont (min-width: 17.5rem) { .continue-wrap .continue { grid-template-columns: 25% minmax(0, 1fr); } .continue-wrap .continue .thumb { height: 100%; min-height: 150px; object-position: 50% 50%; } } #v-home .continue .body { gap: calc(var(--gap) - 1px); padding: calc(var(--pad) - 2px) var(--pad) calc(var(--pad) - 1px) calc(var(--pad) - 1px); } #v-home .continue .title-btn { font: 600 1rem/1.2 var(--serif-display); font-variant-numeric: lining-nums; } /* a font shorthand resets lining-nums: keep it after */ #resume { border: 1.5px solid var(--metal); background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, var(--nav-a), var(--nav-b)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px color-mix(in srgb, var(--hi) 45%, transparent), var(--shadow-btn); } /* Saved words ≈ 127 px (pills keep their 44 px touch height) */ #v-home .saved-card { padding-top: calc(var(--pad) - 6px); padding-bottom: calc(var(--pad) - 2px); } #v-home .saved-card .pill-group { margin-top: 0; row-gap: 6px; } /* My Space: on very narrow cards the decorative photo / music icons drop so the title keeps one line */ .myspace { container: ms / inline-size; } @container ms (max-width: 21rem) { .ms-head .end > .ic:not(.chev) { display: none; } } /* founder signature — low-profile ivory panel ≈ 54 px joined after My Space; metallic gold frame, inner champagne ring, soft sheen, corner gilt dots, engraved name, double hairline rules with glowing gems (owner 2026-10-15: "same or a bit smaller, attractive"). Exact text in the markup: FOUNDED BY / DANH SOPHAL. Not a button. */ :root { --engrave: 0 1px 0 rgba(255, 255, 255, .7); --sheen: rgba(255, 255, 255, .55); } [data-theme="royal-navy"], [data-theme="emerald-gold"], [data-theme="burgundy-rose"], [data-theme="graphite-copper"] { --engrave: 0 1px 1px rgba(0, 0, 0, .45); --sheen: color-mix(in srgb, var(--hi) 9%, transparent); } .credit { position: relative; isolation: isolate; display: grid; justify-items: center; align-content: center; gap: 1px; min-height: 54px; margin: 9px 0 0; padding: 7px 12px; text-align: center; letter-spacing: 0; border-radius: 13px; border: 1px solid color-mix(in srgb, var(--metal) 50%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--surface-warm) 55%, var(--surface)) 0%, var(--surface-warm) 100%); box-shadow: 0 4px 14px rgba(32, 41, 54, .08), 0 1px 2px rgba(32, 41, 54, .05), inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -1px 0 color-mix(in srgb, var(--metal) 20%, transparent), inset 0 0 0 3px var(--surface), inset 0 0 0 4px color-mix(in srgb, var(--metal) 38%, transparent); } .credit::before, .credit::after { height: auto; width: auto; flex: none; } /* base.css gave these 1 px divider lines */ /* metallic gold frame drawn over the border (light → gold → deep gold), masked to a 1 px ring */ .credit::before { content: ""; position: absolute; inset: -1px; z-index: -1; padding: 1px; border-radius: inherit; pointer-events: none; background: linear-gradient(120deg, var(--hi) 0%, var(--metal) 28%, var(--metal-deep) 50%, var(--metal) 72%, var(--hi) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } /* soft diagonal sheen + four gilt dots in the inner corners */ .credit::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 9px 9px, var(--metal) 0 1.4px, transparent 1.9px), radial-gradient(circle at calc(100% - 9px) 9px, var(--metal) 0 1.4px, transparent 1.9px), radial-gradient(circle at 9px calc(100% - 9px), var(--metal) 0 1.4px, transparent 1.9px), radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), var(--metal) 0 1.4px, transparent 1.9px), linear-gradient(105deg, transparent 30%, var(--sheen) 46%, transparent 62%); } .credit-by { font: 600 max(11px, .6875rem)/1.25 var(--sans); letter-spacing: .18em; color: var(--head); } .credit-row { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; } .credit-line { flex: 1 1 0; min-width: 0; max-width: 84px; height: 3px; background: linear-gradient(90deg, transparent, var(--metal) 70%, var(--hi)) top / 100% 1px no-repeat, linear-gradient(90deg, transparent, color-mix(in srgb, var(--metal) 45%, transparent)) bottom / 100% 1px no-repeat; } .credit-line.r { background: linear-gradient(90deg, var(--hi), var(--metal) 30%, transparent) top / 100% 1px no-repeat, linear-gradient(90deg, color-mix(in srgb, var(--metal) 45%, transparent), transparent) bottom / 100% 1px no-repeat; } .credit .gem { flex: none; width: 7px; height: 7px; transform: rotate(45deg); background: linear-gradient(135deg, var(--hi) 0%, var(--hi) 22%, var(--metal) 55%, var(--metal-deep)); box-shadow: 0 0 6px color-mix(in srgb, var(--hi) 70%, transparent), inset 0 0 0 .5px color-mix(in srgb, var(--metal-deep) 60%, transparent); } .credit-name { min-width: 0; overflow-wrap: break-word; font: 600 1.1875rem/1.15 var(--serif); letter-spacing: .08em; color: var(--name-bronze); text-shadow: var(--engrave); } @media (max-width: 340px) { .credit-line { display: none; } } /* bottom navigation — raised near-white floating bar (66 px + safe area), metallic top edge, champagne pill on the current tab */ .bottom-nav { bottom: calc(var(--nav-float) + var(--safe-b)); width: calc(100% - 2 * var(--nav-float)); max-width: calc(var(--app-max) - 12px); min-height: var(--nav-h); padding: 0 6px; border-radius: 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, var(--hi)) 0%, var(--footer-bg) 100%); box-shadow: 0 8px 24px rgba(32, 41, 54, .16), 0 1px 3px rgba(32, 41, 54, .08), inset 0 1px 0 rgba(255, 255, 255, .75); } .bottom-nav::before { left: 26px; right: 26px; height: 2px; border-radius: 2px; opacity: 1; } .bottom-nav a { gap: 3px; font-size: .75rem; font-weight: 600; letter-spacing: .02em; } .bottom-nav a .ic { position: relative; z-index: 1; transition: transform var(--dur); } .bottom-nav a::before { content: ""; position: absolute; top: 7px; left: 50%; width: 60px; height: 32px; margin-left: -30px; border-radius: 16px; background: transparent; transition: background var(--dur), box-shadow var(--dur); } .bottom-nav a[aria-current="page"]::before { background: linear-gradient(180deg, var(--pill-a), var(--pill-b)); box-shadow: inset 0 0 0 1px var(--metal), inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 6px rgba(32, 41, 54, .18); } .bottom-nav a[aria-current="page"]::after { display: none; } .bottom-nav a[aria-current="page"] .ic { transform: translateY(-1px); color: var(--pill-ink); } .bottom-nav a[aria-current="page"] span { font-weight: 700; } /* ============================================================ owner (2026-10-15): Settings — luxury title, no subtitle / mini logo, no visible group summaries (they stay in each group button's accessible name) */ .settings-head { gap: 0; padding: 14px 0 4px; } .settings-title { margin: 0; font: 600 2.125rem/1.05 var(--serif-display); letter-spacing: .03em; color: var(--head); text-shadow: 0 1px 0 color-mix(in srgb, var(--hi) 50%, transparent), 0 2px 10px color-mix(in srgb, var(--metal) 18%, transparent); } .title-orn { display: flex; align-items: center; justify-content: center; gap: 8px; width: min(180px, 60%); margin-top: 6px; } .title-orn .orn-line { flex: 1 1 0; height: 1px; background: linear-gradient(90deg, transparent, var(--metal)); } .title-orn .orn-line.r { background: linear-gradient(90deg, var(--metal), transparent); } .title-orn .gem { flex: none; width: 7px; height: 7px; transform: rotate(45deg); background: linear-gradient(135deg, var(--hi), var(--metal) 55%, var(--metal-deep)); box-shadow: 0 1px 2px rgba(32, 41, 54, .2); } .group-head .summary { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .group-head, .group-head[aria-expanded] { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title chev"; } /* ============================================================ full "agree" set (2026-10-15): all meanings, forms, word family */ .def #defPreview[hidden] { display: none; } .mean-list { display: grid; gap: 10px; margin: 2px 0 0; padding: 0; list-style: none; } .mean { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--hairline); } .mean:first-child { padding-top: 0; border-top: 0; } .mean-def { display: flex; gap: 8px; margin: 0; font-size: 1rem; line-height: var(--lh); color: var(--text); } .mean-n { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; font: 700 .75rem/1 var(--sans); color: var(--nav-ink); background: linear-gradient(180deg, var(--nav-a), var(--nav-b)); } .mean-ex { display: grid; gap: 2px; margin: 0; padding: 0 0 0 30px; list-style: none; } .ex-row { display: flex; align-items: center; gap: 6px; padding: 4px 0 4px 10px; border-left: 2px solid color-mix(in srgb, var(--metal) 55%, transparent); } .ex-row p { flex: 1; min-width: 0; margin: 0; font-size: .9375rem; line-height: var(--lh); color: var(--text); } .mean-gap { display: flex; align-items: center; gap: 6px; margin: 0 0 0 30px; font-size: .8125rem; color: var(--text-2); } .mean-gap .ic { width: 15px; height: 15px; } .mean-count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: 999px; font: 700 .75rem/1 var(--sans); color: var(--head); background: var(--chip-bg); border: 1px solid var(--hairline); vertical-align: 2px; } .pattern-list li.more { list-style: none; margin-left: -20px; font-size: .8125rem; color: var(--text-2); } /* ---- the word's story: Forms · Word family · Word root · Origin (owner 2026-10-17 “more attention and attractive”) each one is its own small panel with an icon title; the root reads as an equation and the origin as a path to English */ .word-story { display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline); } .word-forms { display: grid; gap: 10px; } @media (min-width: 560px) { .word-forms:has(> .ws-block + .ws-block) { grid-template-columns: 1fr 1fr; } } .ws-block { display: grid; gap: 8px; padding: 12px 12px 12px 14px; border-radius: 12px; border: 1px solid var(--hairline); background: color-mix(in srgb, var(--structure-bg) 70%, var(--surface)); position: relative; overflow: hidden; } .ws-block::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--ws-accent, var(--metal)); } .ws-forms { --ws-accent: var(--learner-label); } .ws-family { --ws-accent: var(--everyday-label); } .ws-root { --ws-accent: var(--formal-label); } .ws-origin { --ws-accent: var(--metal); } .ws-h { display: flex; align-items: center; gap: 8px; margin: 0; font: 800 .8125rem/1.2 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--head); } .ws-h .ic { width: 26px; height: 26px; padding: 5px; border-radius: 8px; color: var(--ws-accent); background: color-mix(in srgb, var(--ws-accent) 14%, transparent); } /* forms: a tile per form */ .ws-tiles { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .ws-tile { display: grid; gap: 1px; min-width: 88px; padding: 7px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--hairline); } .ws-tile b { font: 700 1rem/1.25 var(--sans); color: var(--head); } .ws-tile span { font: 600 .6875rem/1.3 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); } /* family: the search chips */ .ws-chips { display: flex; flex-wrap: wrap; gap: 4px 8px; } .word-story .rel-chip > span { background: var(--surface); } .word-story .rel-chip > span { font-weight: 600; } .word-story .rel-chip i { font-style: normal; font-weight: 500; font-size: .75rem; color: var(--text-2); } /* root: base + affix = word */ .ws-eq { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; } .ws-part { padding: 6px 12px; border-radius: 10px; font: 700 1.0625rem/1.2 var(--sans); } .ws-part.base { color: var(--learner-label); background: var(--learner-bg); border: 1px solid color-mix(in srgb, var(--learner-label) 35%, transparent); } .ws-part.affix { color: var(--formal-label); background: var(--formal-bg); border: 1px dashed color-mix(in srgb, var(--formal-label) 60%, transparent); } .ws-part.result { color: var(--nav-ink); background: linear-gradient(180deg, var(--nav-a), var(--nav-b)); box-shadow: var(--shadow-btn); } .ws-op { font: 700 1.125rem/1 var(--sans); color: var(--text-2); } .ws-seed { margin: 0; font-size: .9375rem; line-height: var(--lh); color: var(--text); overflow-wrap: anywhere; } .ws-seed-k { font: 700 .6875rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); margin-right: 2px; } .ws-gl { font-style: italic; color: var(--text-2); } /* origin: oldest language → English, a dot on a line for each step */ .ws-path { display: grid; gap: 0; margin: 2px 0 0; padding: 0; list-style: none; } .ws-path li { position: relative; display: grid; gap: 1px; padding: 0 0 12px 24px; } .ws-path li::before { content: ""; position: absolute; left: 5px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--metal); } .ws-path li:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 16px; bottom: 0; width: 2px; background: color-mix(in srgb, var(--metal) 45%, transparent); } .ws-path li.now { padding-bottom: 0; } .ws-path li.now::before { background: var(--metal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--metal) 25%, transparent); } .ws-lang { font: 700 .6875rem/1.4 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--metal-text); } .ws-w { font-size: .9688rem; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; } .ws-path li.now .ws-w b { font: 700 1.0625rem/1.3 var(--sans); color: var(--head); } .ws-more summary { display: inline-flex; align-items: center; min-height: 44px; font: 600 .8125rem/1.3 var(--sans); color: var(--metal-text); cursor: pointer; } .ws-more p, .ws-text { margin: 4px 0 0; font-size: .9063rem; line-height: var(--lh); color: var(--text); overflow-wrap: anywhere; } .ws-src { margin: 0; font-size: .75rem; color: var(--text-2); } /* word root + origin (Wiktionary etymology) — same label style as Forms / Word family */ /* ============================================================ LexiVox voices + MP3 voice test (#/voice) */ .vt-card { display: grid; gap: 10px; } .vt-voices { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .vt-voice { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--hairline); background: var(--surface); } .vt-voice.current { border-color: var(--metal); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--metal) 40%, transparent); background: linear-gradient(180deg, var(--surface), var(--surface-warm)); } .vt-vhead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; } .vt-ok { width: 18px; height: 18px; color: var(--everyday-label); } .vt-vname { font: 700 .9375rem/1.3 var(--sans); color: var(--head); } .vt-badge { padding: 2px 8px; border-radius: 999px; font: 700 .6875rem/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; border: 1px solid; } .vt-badge.use { color: var(--everyday-label); background: var(--everyday-bg); border-color: color-mix(in srgb, var(--everyday-label) 40%, transparent); } .vt-badge.avail { color: var(--learner-label); background: var(--learner-bg); border-color: color-mix(in srgb, var(--learner-label) 40%, transparent); } .vt-prev { margin-left: auto; } .vt-note { margin: 0; font-size: .8125rem; line-height: 1.4; color: var(--text-2); } .vt-now { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 44px; margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--structure-bg); border: 1px solid var(--hairline); font-size: .9375rem; color: var(--text); } .vt-now .vt-text { font-weight: 600; } .vt-seek { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; font: 500 .8125rem/1 var(--sans); color: var(--text-2); font-variant-numeric: tabular-nums; } .vt-seek input { width: 100%; min-height: 44px; accent-color: var(--metal); } .vt-ctrls { display: flex; align-items: center; justify-content: center; gap: 22px; } .vt-play { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; color: var(--nav-ink); border: 1.5px solid var(--metal); background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, var(--nav-a), var(--nav-b)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--hi) 45%, transparent), var(--shadow-btn); } .vt-play .ic { width: 26px; height: 26px; } .vt-play:disabled { opacity: .45; } .vt-skip .ic { width: 22px; height: 22px; } .vt-speed { justify-content: center; } .vt-sum { margin: 0; font-size: .9375rem; color: var(--text); } .vt-est { display: flex; gap: 6px; margin: 0; font-size: .8125rem; line-height: 1.4; color: var(--text-2); } .vt-est .ic { flex: none; width: 16px; height: 16px; margin-top: 1px; } .vt-list { display: grid; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; } .vt-item { display: grid; gap: 2px; width: 100%; min-height: 44px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--hairline); background: var(--surface); text-align: left; color: var(--text); font-size: .9375rem; line-height: 1.35; } button.vt-item[aria-current] { border-color: var(--metal); background: var(--surface-warm); } .vt-item.off { color: var(--text-2); background: transparent; border-style: dashed; } .vt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .75rem; color: var(--text-2); } .vt-chip { padding: 1px 7px; border-radius: 999px; font: 700 .6875rem/1.5 var(--sans); background: var(--chip-bg); border: 1px solid var(--hairline); color: var(--text-2); } .vt-chip.ok { color: var(--everyday-label); background: var(--everyday-bg); border-color: color-mix(in srgb, var(--everyday-label) 35%, transparent); } .vt-acc { font-weight: 700; color: var(--head); } .vt-voice { grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; } .vt-voice > .vt-vhead, .vt-voice > .vt-note { grid-column: 1; } .vt-voice > .vt-prev { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; } .vt-card .h-card { font-variant-numeric: lining-nums; } /* ============================================================ UK + US LexiVox speaker pair beside each example (owner 2026-10-15) */ .say-pair { display: inline-flex; flex: none; align-items: center; gap: 4px; } .say-pair[hidden] { display: none; } .say-acc { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 44px; padding: 0 8px; border-radius: 999px; font: 700 .75rem/1 var(--sans); color: var(--btn-ink); border: 1px solid var(--metal-line); background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); box-shadow: var(--shadow-btn); } .say-acc .flag { width: 16px; height: 12px; border-radius: 2px; } .say-acc .ic { width: 14px; height: 14px; } .say-acc.speaking { border-color: var(--metal); box-shadow: 0 0 0 2px color-mix(in srgb, var(--metal) 45%, transparent); } .say-acc:active { transform: translateY(1px); } .vt-prov { display: grid; gap: 2px; margin: 0; font-size: .8125rem; color: var(--text-2); } .vt-prov div { display: flex; gap: 8px; } .vt-prov dt { min-width: 3.5rem; font-weight: 700; color: var(--head); } .vt-prov dd { margin: 0; overflow-wrap: anywhere; } /* ============================================================ Dictionary: sticky jump pills over one scrolling page (owner 2026-10-15) */ .section-nav.jump-pills { position: sticky; top: 0; z-index: 12; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 calc(-1 * var(--page-x)); padding: 6px var(--page-x); border-bottom: 0; background: color-mix(in srgb, var(--page-bg) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .jump-pills .jump-pill { flex: 0 1 auto; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 14px; border-radius: 999px; font: 600 .8125rem/1.2 var(--sans); color: var(--btn-ink); border: 1px solid var(--metal-line); background: linear-gradient(180deg, var(--btn-a), var(--btn-b)); box-shadow: var(--shadow-btn); } .jump-pills .jump-pill .hash { color: inherit; font-weight: 800; } /* same ink as the label: readable in every theme */ .jump-pills .jump-pill[aria-current="true"] { color: var(--nav-ink); border-color: var(--metal); background: linear-gradient(180deg, var(--nav-a), var(--nav-b)); } .jump-pills .jump-pill[aria-current="true"] .hash { color: inherit; opacity: .8; } .jump-pills .jump-pill[aria-current="true"]::after { content: none; } #v-dict .entry-card { scroll-margin-top: 64px; } /* the UK + US pair wraps under the sentence when space is short (large text, narrow screens) */ .ex-row, .reg-row, .lvl-ex { flex-wrap: wrap; } .ex-row > p, .lvl-ex > p { flex: 1 1 12rem; min-width: 0; } .say-pair { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; } /* ============================================================ one small round play button per example (owner 2026-10-15) */ .say-one { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -6px -8px -6px 0; padding: 0; border: 0; background: none; border-radius: 50%; } .say-one .say-dot { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--nav-ink); background: linear-gradient(180deg, var(--nav-a), var(--nav-b)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--metal) 55%, transparent), var(--shadow-btn); } .say-one .say-dot .ic { width: 12px; height: 12px; margin-left: 2px; } .say-one.speaking .say-dot { box-shadow: 0 0 0 2px var(--metal), var(--shadow-btn); } .say-one:active .say-dot { transform: translateY(1px); } .ex-row, .reg-row, .lvl-ex { flex-wrap: nowrap; } .say-pair { margin-left: 4px; align-self: flex-start; } /* ============================================================ AGREE translated audio (owner prompt §12): ខ្មែរ / Tiếng Việt + speaker, inline and compact */ .say-tr { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; margin: -9px 0 -9px 2px; padding: 0 2px; border: 0; background: none; vertical-align: middle; cursor: pointer; } .say-tr[hidden] { display: none; } .say-tr-pill { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px 0 10px; border-radius: 999px; white-space: nowrap; font: 700 .8125rem/1 var(--sans); color: var(--head); background: var(--surface); border: 1px solid color-mix(in srgb, var(--metal) 60%, transparent); } .say-tr-pill .ic { width: 14px; height: 14px; flex: none; } .say-tr-l[lang="km"] { font-family: var(--khmer, var(--sans)); font-weight: 600; line-height: 1.2; } .say-tr.speaking .say-tr-pill { color: var(--nav-ink); background: linear-gradient(180deg, var(--nav-a), var(--nav-b)); border-color: var(--metal); } .say-tr:focus-visible { outline: none; } .say-tr:focus-visible .say-tr-pill { outline: 2px solid var(--focus, var(--metal)); outline-offset: 2px; } /* example sentence / idiom example: text flows, the language pill follows the last word, ▶ sits top-right */ .ex-row, .rel-ex.ex-line { display: block; position: relative; padding-right: 40px; } .ex-row > p { display: inline; } .ex-row > .say-pair, .ex-line > .say-pair { position: absolute; top: 1px; right: 0; margin: 0; } .rel-ex.ex-line { margin-top: 2px; } /* a meaning: number badge left, definition text, then the pill; ▶ top-right */ .mean-row { position: relative; padding: 0 40px 0 30px; } .mean-row > .mean-def { display: inline; } .mean-row .mean-n { position: absolute; left: 0; top: 1px; } .mean-row > .say-pair { position: absolute; top: -1px; right: 0; margin: 0; } /* Levels / Structure rows: the pill shares the level label's line (no extra row) */ .lvl-ex > .say-tr, .reg-row > .say-tr { grid-column: 1; grid-row: 1; justify-self: end; margin: -9px 0; } /* voice page: AGREE transcripts & clips (listening-review list, closed by default) */ .vt-alist { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; } .vt-aseg { padding: 8px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--hairline); } .vt-a-en { margin: 0; color: var(--text); line-height: var(--lh); } .vt-a-en .lvl { margin-right: 4px; background: var(--surface-warm); color: var(--metal-text); } .vt-a-tr { margin: 2px 0 0; color: var(--muted, var(--text)); line-height: 1.55; font-size: .9375rem; } .vt-a-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; } .vt-seg { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; border-radius: 999px; font: 700 .8125rem/1 var(--sans); color: var(--head); background: var(--bg, var(--surface)); border: 1px solid color-mix(in srgb, var(--metal) 60%, transparent); cursor: pointer; } .vt-seg .ic { width: 14px; height: 14px; } .vt-seg.speaking { color: var(--nav-ink); background: linear-gradient(180deg, var(--nav-a), var(--nav-b)); border-color: var(--metal); } /* ============================================================ owner 2026-10-16: the English button is a pill like “ខ្មែរ 🔊”, placed beside it after the text (no round ▶ column on the right). Label = the accent it plays (UK / US). */ .say-pair { position: static; display: inline-flex; vertical-align: middle; margin: 0 0 0 2px; align-self: auto; } .say-one { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 44px; height: 44px; margin: -9px 0; padding: 0 2px; border-radius: 999px; } .say-en-l { font: 700 .8125rem/1 var(--sans); letter-spacing: .02em; } .say-one.speaking .say-tr-pill { color: var(--nav-ink); background: linear-gradient(180deg, var(--nav-a), var(--nav-b)); border-color: var(--metal); } .say-one:active .say-tr-pill, .say-tr:active .say-tr-pill { transform: translateY(1px); } .say-one:focus-visible { outline: none; } .say-one:focus-visible .say-tr-pill { outline: 2px solid var(--focus, var(--metal)); outline-offset: 2px; } .ex-row > .say-pair, .ex-line > .say-pair, .mean-row > .say-pair { position: static; margin: 0 0 0 2px; } .ex-row, .rel-ex.ex-line { padding-right: 0; } .mean-row { padding-right: 0; } .say-pair + .say-tr { margin-left: 0; } /* Levels / Structure: label · · · [UK 🔊] [ខ្មែរ 🔊] on the first line, the sentence below */ .lvl-ex, .reg-row.learner, .reg-row.c1, .reg-row.c2 { grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: 4px; } .lvl-ex > .lvl, .reg-row > .k { grid-column: 1; grid-row: 1; } .lvl-ex > .say-pair, .reg-row > .say-pair { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; } .lvl-ex > .say-tr, .reg-row > .say-tr { grid-column: 4; grid-row: 1; justify-self: end; margin: -9px 0; } .lvl-ex > p, .reg-row.learner > .v, .reg-row.c1 > .v, .reg-row.c2 > .v { grid-column: 1 / -1; grid-row: 2; } /* the English + language pills travel together (never split across lines) */ .say-pair { white-space: nowrap; gap: 2px; } .say-pair > .say-tr { margin: -9px 0; } .lvl-ex > .say-pair, .reg-row > .say-pair { grid-column: 3 / -1; } /* ============================================================ owner mockup 2026-10-16: Translate switch + translation lines (text + sound) */ .hw-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .tr-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px 0 6px; border: 0; background: none; color: var(--text); font: 600 .9375rem/1 var(--sans); cursor: pointer; white-space: nowrap; } .tr-knob { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--surface-warm, var(--surface)); border: 1px solid color-mix(in srgb, var(--metal) 60%, transparent); transition: background .2s; } .tr-knob::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .2s; } .tr-switch[aria-checked="true"] .tr-knob { background: linear-gradient(180deg, var(--nav-a), var(--nav-b)); border-color: var(--metal); } .tr-switch[aria-checked="true"] .tr-knob::after { transform: translateX(18px); } .tr-switch:focus-visible { outline: none; } .tr-switch:focus-visible .tr-knob { outline: 2px solid var(--focus, var(--metal)); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .tr-knob, .tr-knob::after { transition: none; } } /* the translation line: muted, in brackets, its own speaker at the end */ .tr-line { display: block; margin-top: 2px; color: var(--muted, var(--text)); font-size: .9375rem; line-height: 1.5; } .tr-line[hidden] { display: none; } .tr-text::before { content: '('; } .tr-text::after { content: ')'; } .tr-text[lang="vi"] { font-style: italic; } .tr-text[lang="km"] { line-height: 1.6; } .tr-line > .say-tr { margin: -9px 0 -9px 4px; } .mean-row > .tr-line { padding-left: 0; } .lvl-ex > .tr-line, .reg-row > .tr-line { grid-column: 1 / -1; grid-row: 3; } .lvl-ex > .say-pair, .reg-row > .say-pair { grid-column: 3 / -1; } .hw-row { flex: 1 1 100%; } .hw-l { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; min-width: 0; } .hw-l .gloss { font-size: 1.125rem; text-align: left; } .hw-row { flex-wrap: wrap; min-width: 0; } .hw-l { flex: 1 1 auto; } .tr-switch { margin-left: auto; } .tr-text[lang="km"] { font-family: var(--khmer); } .hw-l .gloss[lang="vi"] { font-family: var(--sans); font-weight: 600; } /* owner 2026-10-16: Structure examples use the same three level backgrounds as Learner → C1 → C2 (Academic takes the middle, C1 colour) */ .lvl-ex { border: 0; } .lvl-ex.lvl-learner { background: var(--everyday-bg); } .lvl-ex.lvl-c1, .lvl-ex.lvl-academic { background: var(--learner-bg); } .lvl-ex.lvl-c2 { background: var(--formal-bg); } .lvl-ex .lvl { background: var(--surface); } .lvl-learner .lvl { color: var(--everyday-label); } .lvl-c1 .lvl, .lvl-academic .lvl { color: var(--learner-label); } .lvl-c2 .lvl { color: var(--formal-label); } #sec-structure .lvl-ex > p { color: var(--text); } /* same dark text as the Levels card */ /* ============================================================ owner 2026-10-16: each meaning has its own colour — a luxury jewel palette (gold · sapphire · emerald · burgundy · amethyst · copper). The tint is mixed into the theme's own surface, so it works in light and dark themes. */ .mean-list { gap: 10px; } .mean { --m: #8A6A28; position: relative; padding: 10px 10px 10px 12px; border: 1px solid color-mix(in srgb, var(--m) 28%, transparent); border-top: 1px solid color-mix(in srgb, var(--m) 28%, transparent); border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--m) 11%, var(--surface)), color-mix(in srgb, var(--m) 4%, var(--surface))); } .mean:first-child { padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--m) 28%, transparent); } .mean:nth-child(6n+2) { --m: #2F5B94; } /* sapphire */ .mean:nth-child(6n+3) { --m: #24664A; } /* emerald */ .mean:nth-child(6n+4) { --m: #7E2F44; } /* burgundy */ .mean:nth-child(6n+5) { --m: #5B3F8C; } /* amethyst */ .mean:nth-child(6n+6) { --m: #8A4B26; } /* copper */ .mean .mean-n { color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--m) 82%, #fff), var(--m)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--m) 40%, transparent), 0 1px 2px rgb(0 0 0 / .18); } .mean .ex-row { border-left-color: color-mix(in srgb, var(--m) 55%, transparent); } .mean .mean-def { color: var(--head); } /* ============================================================ owner 2026-10-16 (photo): quiet speaker icons — visible, never loud English: top-right on the first line of an example; after the text of a meaning. Translation: at the end of its line. */ .say-one, .say-tr { display: inline-grid; place-items: center; width: 44px; min-width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: color-mix(in srgb, var(--text) 42%, transparent); cursor: pointer; transition: color .15s, background-color .15s; } .say-ic { display: grid; place-items: center; } .say-ic .ic { width: 18px; height: 18px; } .say-one:hover, .say-tr:hover, .say-one:focus-visible, .say-tr:focus-visible { color: var(--head); background: color-mix(in srgb, var(--text) 6%, transparent); } .say-one:focus-visible, .say-tr:focus-visible { outline: 2px solid var(--focus, var(--metal)); outline-offset: -6px; } .say-one.speaking, .say-tr.speaking { color: var(--metal-text, var(--head)); } .say-one.speaking .say-ic, .say-tr.speaking .say-ic { animation: say-pulse 1.1s ease-in-out infinite; } @keyframes say-pulse { 50% { opacity: .45; } } @media (prefers-reduced-motion: reduce) { .say-one.speaking .say-ic, .say-tr.speaking .say-ic { animation: none; } } /* examples / idiom examples: the English icon floats top-right, level with the first line */ .ex-row, .rel-ex.ex-line { position: relative; padding-right: 30px; } .ex-row > .say-pair, .ex-line > .say-pair { position: absolute; top: -9px; right: -10px; margin: 0; } /* meanings: the icon follows the definition text (inline, no extra height) */ .mean-row { padding-right: 0; } .mean-row > .say-pair { position: static; display: inline-flex; vertical-align: middle; margin: -12px -6px -12px -4px; } /* translation line: the icon follows the transcript */ .tr-line > .say-tr { vertical-align: middle; margin: -12px -6px -12px -4px; } /* Levels / Structure: icon at the right of the label line */ .lvl-ex > .say-pair, .reg-row > .say-pair { margin: -10px -8px -10px 0; } .ex-row > .say-pair, .ex-line > .say-pair { display: block; line-height: 0; height: 44px; top: calc(4px + .5lh - 22px); } /* icon centre = first-line centre */ .ex-row > .say-pair .say-one, .ex-line > .say-pair .say-one { font-size: .9375rem; } .ex-row > .say-pair, .ex-line > .say-pair { font-size: .9375rem; top: calc(4px + .675em - 22px); } /* sentence line-height = 1.35em → first-line centre */ .ex-line > .say-pair { top: calc(.675em - 22px); } .ex-row > .say-pair { top: calc(.675em - 8px); } /* measured: icon centre on the first-line centre */ /* owner 2026-10-16 “text font size — make it perfect”: one size per role meaning 16 px (heading of its examples) · every example sentence 15 px (definitions, Levels, Structure, idioms) · translation 15 px, softer colour */ #v-dict .reg-row > .v { font-size: .9375rem; } .tr-line { color: var(--text-2); } .tr-text[lang="km"] { line-height: 1.6; } /* ASEAN scripts (owner 2026-10-16): proper fonts and taller lines so tone marks / stacked vowels are never clipped; system fonts as offline fallback */ :root { --thai: "Noto Sans Thai", "Leelawadee UI", Thonburi, sans-serif; --lao: "Noto Sans Lao", "Leelawadee UI", "Lao Sangam MN", sans-serif; --myanmar: "Noto Sans Myanmar", "Myanmar Text", "Myanmar Sangam MN", sans-serif; } [lang="th"] { font-family: var(--thai); line-height: 1.7; } [lang="lo"] { font-family: var(--lao); line-height: 1.7; } [lang="my"] { font-family: var(--myanmar); line-height: 1.9; } .tr-text[lang="th"], .tr-text[lang="lo"] { line-height: 1.7; } .tr-text[lang="my"] { line-height: 1.9; } .hw-l .gloss[lang="th"], .hw-l .gloss[lang="lo"], .hw-l .gloss[lang="my"] { font-weight: 600; } .hw-l .gloss[lang="ms"], .hw-l .gloss[lang="id"], .hw-l .gloss[lang="tl"] { font-family: var(--sans); font-weight: 600; } .tr-text[lang="ms"], .tr-text[lang="id"], .tr-text[lang="tl"] { font-style: italic; } /* owner 2026-10-16 (IKEA effect): the plaque shows the learner's own name — the whole plaque is the edit button */ .credit { position: relative; } .credit-name { text-transform: uppercase; overflow-wrap: anywhere; } .credit-name.is-placeholder { opacity: .62; } .credit-edit { position: absolute; inset: 0; z-index: 1; width: 100%; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; } .credit-edit:hover { background: color-mix(in srgb, var(--metal) 6%, transparent); } .credit-edit:focus-visible { outline: 2px solid var(--focus, var(--metal)); outline-offset: 2px; } .name-dialog .field-label { display: block; margin: 0 0 6px; font: 600 .875rem/1.3 var(--sans); color: var(--head); } .name-dialog .text-input { box-sizing: border-box; width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; font: 500 1rem/1.3 var(--sans); color: var(--text); background: var(--surface); border: 1px solid color-mix(in srgb, var(--metal) 55%, transparent); } .name-dialog .text-input:focus-visible { outline: 2px solid var(--focus, var(--metal)); outline-offset: 1px; } .name-dialog .muted { margin: 8px 0 0; } /* contrast fix: the meaning badge starts at the jewel colour itself (white text ≥ 4.5:1 on every badge) */ .mean .mean-n { background: linear-gradient(180deg, var(--m), color-mix(in srgb, var(--m) 80%, #000)); } .mean:nth-child(6n+3) { --m: #1F5B41; } /* emerald, a touch deeper */ .mean:nth-child(6n+6) { --m: #7D4220; } /* copper, a touch deeper */ .mean:nth-child(6n+1) { --m: #7A5A1C; } /* gold, a touch deeper */ /* Levels rows: let the translation speaker's 44 px target show (it was clipped by overflow: hidden) */ .reg-row { overflow: visible; } /* owner 2026-10-16: UK / US pronunciation in the same quiet modern style as the other speakers — round flag + label + soft speaker, no pill outline or gradient; 44 px target; light tint on hover / focus; accent colour (and a soft pulse) while playing */ .accent-btn { min-height: 44px; padding: 0 10px 0 6px; gap: 6px; border: 0 !important; border-radius: 999px; background: none !important; box-shadow: none !important; color: var(--head); font-weight: 600; letter-spacing: .02em; transition: background-color .15s, color .15s; } .accent-btn .flag { width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 14%, transparent); } .accent-btn .ic { width: 17px; height: 17px; color: color-mix(in srgb, var(--text) 42%, transparent); transition: color .15s; } .accent-btn:hover, .accent-btn:focus-visible { background: color-mix(in srgb, var(--text) 6%, transparent) !important; } .accent-btn:hover .ic, .accent-btn:focus-visible .ic { color: var(--head); } .accent-btn:focus-visible { outline: 2px solid var(--focus, var(--metal)); outline-offset: 0; } .accent-btn:active { transform: translateY(1px); box-shadow: none !important; } .accent-btn.speaking { outline: 0; } .accent-btn.speaking .ic { color: var(--metal-text, var(--head)); animation: say-pulse 1.1s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .accent-btn.speaking .ic { animation: none; } } /* the translated-headword (gloss) speaker: same quiet icon as every other speaker */ .say-gloss { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -10px -6px -10px -4px; padding: 0; vertical-align: middle; border: 0 !important; border-radius: 50%; background: none !important; box-shadow: none !important; color: color-mix(in srgb, var(--text) 42%, transparent); cursor: pointer; } .say-gloss .ic { width: 18px; height: 18px; } .say-gloss:hover:not(:disabled), .say-gloss:focus-visible { color: var(--head); background: color-mix(in srgb, var(--text) 6%, transparent) !important; } .say-gloss:disabled { opacity: .45; cursor: default; } .say-gloss.speaking { color: var(--metal-text, var(--head)); } /* a speaker whose recording does not exist yet looks faded (still announced as “audio unavailable”) */ .say-one:disabled, .say-tr:disabled, .accent-btn:disabled { opacity: .35; cursor: default; } .say-one:disabled:hover, .say-tr:disabled:hover { background: none; color: color-mix(in srgb, var(--text) 42%, transparent); } /* ============================================================ owner 2026-10-16: Definition / Levels / Structure as swipe pages (iPhone-like) */ .pager { display: flex; align-items: flex-start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; transition: height .25s ease; margin: 0 -2px; padding: 0 2px; } .pager::-webkit-scrollbar { display: none; } .page { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; padding: 0 2px 4px; box-sizing: border-box; } .page > .entry-card { margin: 0; } @media (prefers-reduced-motion: reduce) { .pager { transition: none; scroll-behavior: auto; } } .jump-pill[aria-selected="true"] { /* same look as the old current pill */ } .pager { margin: 0; padding: 0; } .page { padding: 0 0 4px; } /* no sliver of the next page */ .page > .entry-card { box-sizing: border-box; width: 100%; } .pager, .page { position: relative; } /* keep absolutely-positioned screen-reader text inside its page (it widened the document) */ .page { contain: paint; } /* owner 2026-10-16: Theme and the language picker in the same quiet modern style as the speaker buttons — no pill outline, gradient or shadow; label in the heading ink, soft grey icon; light tint on hover / focus; 44 px target */ .theme-btn, .lang-pick { min-height: 44px; padding: 0 8px; gap: 6px; border: 0 !important; border-radius: 999px; background: none !important; box-shadow: none !important; color: var(--head); font-weight: 600; letter-spacing: .01em; transition: background-color .15s; } .theme-btn .ic, .lang-pick .ic { width: 17px; height: 17px; color: color-mix(in srgb, var(--text) 42%, transparent); transition: color .15s; } .lang-pick .ic { width: 14px; height: 14px; } .theme-btn:hover, .theme-btn:focus-visible, .lang-pick:hover, .lang-pick:focus-visible { background: color-mix(in srgb, var(--text) 6%, transparent) !important; } .theme-btn:hover .ic, .theme-btn:focus-visible .ic, .lang-pick:hover .ic, .lang-pick:focus-visible .ic { color: var(--head); } .theme-btn:focus-visible, .lang-pick:focus-visible { outline: 2px solid var(--focus, var(--metal)); outline-offset: 0; } .theme-btn:active, .lang-pick:active { transform: translateY(1px); box-shadow: none !important; } /* owner 2026-10-16 (follow-up): keep the quiet style but draw a thin line colour around Theme and the language picker */ .theme-btn, .lang-pick { border: 1px solid color-mix(in srgb, var(--metal) 55%, var(--border)) !important; padding: 0 12px; } .theme-btn:hover, .theme-btn:focus-visible, .lang-pick:hover, .lang-pick:focus-visible { border-color: var(--metal) !important; } /* owner 2026-10-16: Save word and Citation in the same quiet style as the speaker buttons, keeping a thin line around — no gradient, fill or shadow; label in the heading ink, soft grey icon; saved = the theme's metal icon (filled) + stronger line */ .entry-actions .btn { min-height: 44px; border: 1px solid color-mix(in srgb, var(--metal) 55%, var(--border)) !important; background: none !important; box-shadow: none !important; color: var(--head) !important; font-weight: 600; letter-spacing: .01em; transition: background-color .15s, border-color .15s; } .entry-actions .btn .ic { color: color-mix(in srgb, var(--text) 42%, transparent); transition: color .15s; } .entry-actions .btn[aria-pressed="true"] { border-color: var(--metal) !important; } .entry-actions .btn[aria-pressed="true"] .ic { color: var(--metal-text, var(--head)); } .entry-actions .btn:hover, .entry-actions .btn:focus-visible { background: color-mix(in srgb, var(--text) 6%, transparent) !important; border-color: var(--metal) !important; } .entry-actions .btn:hover .ic, .entry-actions .btn:focus-visible .ic { color: var(--head); } .entry-actions .btn[aria-pressed="true"]:hover .ic { color: var(--metal-text, var(--head)); } .entry-actions .btn:focus-visible { outline: 2px solid var(--focus, var(--metal)); outline-offset: 1px; } .entry-actions .btn:active { transform: translateY(1px); } /* owner 2026-10-16: no corner dots on the name plaque — keep only the soft sheen */ .credit::after { background: linear-gradient(105deg, transparent 30%, var(--sheen) 46%, transparent 62%); } /* owner 2026-10-16: Saved words shows 3 pills; the rest open with this quiet “Show N more” toggle (same style as the speaker buttons, thin line) */ #v-home .pills .pill-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 6px; padding: 0 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--metal) 55%, var(--border)); background: none; color: var(--head); font: 600 .8125rem/1 var(--sans); } #v-home .pills .pill-more .ic { width: 14px; height: 14px; color: color-mix(in srgb, var(--text) 42%, transparent); transition: transform .2s; } #v-home .pills .pill-more[aria-expanded="true"] .ic { transform: rotate(180deg); } #v-home .pills .pill-more:hover, #v-home .pills .pill-more:focus-visible { background: color-mix(in srgb, var(--text) 6%, transparent); border-color: var(--metal); } #v-home .pills .pill-more:focus-visible { outline: 2px solid var(--focus, var(--metal)); outline-offset: 1px; } /* owner 2026-10-16: when an idiom has several examples, each example (with its translation) sits on its own background — alternating the Levels tints (Learner, then C2) so neighbouring examples are clearly separate */ .rel-list li > .rel-ex.ex-line { margin-top: 6px; padding: 6px 36px 7px 10px; border-radius: 10px; border: 1px solid var(--hairline); background: var(--learner-bg); } .rel-list li > .rel-ex.ex-line:nth-of-type(even) { background: var(--formal-bg); } .rel-list li > .rel-ex.ex-line > .say-pair { top: calc(6px + .675em - 22px); right: -4px; } /* owner 2026-10-16 (follow-up): Saved words collapsed = one row, max 3 pills + expand key at the end; expanded = grouped + collapse key */ #v-home .pills .pill-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; margin-top: 2px; } #v-home .pills .pill-row .pill { flex: 0 1 auto; min-width: 0; padding: 0 12px; } #v-home .pills .pill .pill-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #v-home .pills .pill-row .pill-more { margin: 0 0 0 auto; flex: none; } #v-home .pills .pill-more { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 44px; min-height: 44px; padding: 0 10px; margin-top: 0; } #v-home .pills .pill-more .pm-n { font: 600 .75rem/1 var(--sans); color: var(--head); } #v-home .pills .pill-foot { display: flex; justify-content: flex-end; margin-top: 4px; } /* ===== owner 2026-10-16: “alive, attractive reader … extreme luxury” — Continue learning card motion ===== Calm and slow on purpose (a leather-bound library, not a game). All of it is off under prefers-reduced-motion. */ .continue .thumb-box { position: relative; display: block; min-width: 0; overflow: hidden; } .continue .thumb-box .thumb { height: 100%; } .thumb-sheen, .btn-sheen { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 38%, rgba(255, 244, 214, .0) 40%, rgba(255, 244, 214, .55) 50%, rgba(255, 244, 214, 0) 60%, transparent 62%) no-repeat; background-size: 250% 100%; background-position: 130% 0; } .thumb-sheen { mix-blend-mode: soft-light; } #resume { position: relative; overflow: hidden; isolation: isolate; } #resume .btn-sheen { z-index: -1; border-radius: inherit; mix-blend-mode: screen; background-image: linear-gradient(115deg, transparent 40%, rgba(255, 236, 190, .28) 50%, transparent 60%); } @media (prefers-reduced-motion: no-preference) { /* 1 · the books breathe: a very slow 2.5 % zoom (no gaps at the edges, unlike a float) */ .continue.alive .thumb { animation: books-breathe 7s ease-in-out infinite; transform-origin: 50% 60%; } /* 2 · a soft gold light sweeps across the gilt spines, then across Resume, every 7 s */ .continue.alive .thumb-sheen { animation: gold-sweep 7s ease-in-out 1.2s infinite; } .continue.alive #resume .btn-sheen { animation: gold-sweep 7s ease-in-out 1.75s infinite; } /* 3 · the progress bar surges in (ease-out cubic) with a glowing tip that fades once it settles */ .continue .bar > span.surge { transition: width .9s cubic-bezier(.22, 1, .36, 1) .25s; } .continue .bar > span.surge::after { content: ""; position: absolute; right: -3px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 238, 196, .95) 0 25%, color-mix(in srgb, var(--metal) 70%, transparent) 45%, transparent 72%); transition: opacity .6s ease .1s; } .continue .bar > span.surge.settled::after { opacity: 0; } /* 4 · Resume presses like a real control and leaves a soft ripple; the book swings open before Academic opens */ #resume { transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s; } #resume:active { transform: scale(.97); } #resume .ripple { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 236, 190, .35), transparent 65%); transform: scale(0); animation: ripple .55s ease-out forwards; } .continue .thumb-box { perspective: 520px; } .continue.opening .thumb { animation: none; transform-origin: 0 50%; transform: rotateY(-28deg) scale(1.04); filter: brightness(1.08); transition: transform .34s cubic-bezier(.4, 0, .2, 1), filter .34s; } .continue.opening { box-shadow: 0 10px 30px rgba(32, 41, 54, .16), 0 0 0 1px color-mix(in srgb, var(--metal) 50%, transparent); transition: box-shadow .3s; } } @keyframes books-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } } @keyframes gold-sweep { 0% { background-position: 130% 0; opacity: 0; } 4% { opacity: 1; } 22% { background-position: -30% 0; opacity: 1; } 26%, 100% { background-position: -30% 0; opacity: 0; } } @keyframes ripple { to { transform: scale(1); opacity: 0; } } /* sweep strength tuned after viewing: visible on the gilt spines, still soft */ .thumb-sheen { mix-blend-mode: overlay; background-image: linear-gradient(115deg, transparent 36%, rgba(255, 246, 220, .15) 42%, rgba(255, 246, 220, .85) 50%, rgba(255, 246, 220, .15) 58%, transparent 64%); } #resume .btn-sheen { background-image: linear-gradient(115deg, transparent 38%, rgba(255, 236, 190, .38) 50%, transparent 62%); } /* stacked Continue card (narrow / large text): the picture box keeps the compact 84 px band */ @container cont (max-width: 19rem) { .continue-wrap .continue .thumb-box { height: 84px; } .continue-wrap .continue .thumb-box .thumb { height: 100%; min-height: 0; } } /* owner 2026-10-16: the tagline “Open a wider world” in the same gold as “Lexi” */ .wm-tag { color: var(--metal-text); text-shadow: 0 1px 0 color-mix(in srgb, var(--hi) 45%, transparent); } /* whole words in the one-row Saved words: pills keep their natural width (fitRow drops the ones that do not fit) */ #v-home .pills .pill-row .pill { flex: none; } #v-home .pills .pill-row { overflow: hidden; } /* ===== owner 2026-10-16: the two shortcuts become the raised “4D” keys (what Resume was) so the Academic Vocabulary and Dictionary doors are noticed first; Resume becomes a quiet key like the speakers, with a thin gold line ===== */ #v-home .shortcut { position: relative; overflow: hidden; isolation: isolate; color: var(--nav-ink); border: 1.5px solid var(--metal) !important; background-image: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 52%), linear-gradient(160deg, var(--nav-a), var(--nav-b)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 0 0 1px color-mix(in srgb, var(--hi) 40%, transparent), 0 6px 14px rgba(20, 28, 40, .18), 0 2px 3px rgba(20, 28, 40, .14); transform: perspective(600px) translateZ(0); transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s; } #v-home .shortcut .t, #v-home .shortcut.warm .t { color: var(--nav-ink); text-shadow: 0 1px 1px rgba(0, 0, 0, .18); } #v-home .shortcut .s { color: color-mix(in srgb, var(--nav-ink) 88%, transparent); } #v-home .shortcut > .ic { color: color-mix(in srgb, var(--hi) 65%, var(--nav-ink)); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); } #v-home .shortcut .t .ic { color: color-mix(in srgb, var(--nav-ink) 80%, transparent); } #v-home .shortcut .btn-sheen { z-index: -1; border-radius: inherit; mix-blend-mode: screen; background-image: linear-gradient(115deg, transparent 38%, rgba(255, 236, 190, .34) 50%, transparent 62%); } #v-home .shortcut:focus-visible { outline: 2px solid var(--focus, var(--metal)); outline-offset: 2px; } @media (prefers-reduced-motion: no-preference) { #v-home .shortcut .btn-sheen { animation: gold-sweep 7s ease-in-out 2.4s infinite; } #v-home #goDictionary .btn-sheen { animation-delay: 2.9s; } #v-home .shortcut:hover { transform: perspective(600px) translateY(-2px) rotateX(4deg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 0 0 1px color-mix(in srgb, var(--hi) 50%, transparent), 0 10px 20px rgba(20, 28, 40, .22), 0 3px 5px rgba(20, 28, 40, .14); } #v-home .shortcut:active { transform: perspective(600px) translateY(1px) rotateX(-3deg) scale(.98); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px color-mix(in srgb, var(--hi) 40%, transparent), 0 2px 5px rgba(20, 28, 40, .18); } } /* Resume: quiet key — no fill or shadow, heading ink, soft icon, thin gold line; the press + ripple stay */ #resume { border: 1px solid color-mix(in srgb, var(--metal) 55%, var(--border)) !important; background: none !important; box-shadow: none !important; color: var(--head) !important; text-shadow: none; } #resume .ic { color: color-mix(in srgb, var(--text) 42%, transparent); } #resume:hover, #resume:focus-visible { background: color-mix(in srgb, var(--text) 6%, transparent) !important; border-color: var(--metal) !important; } #resume:hover .ic, #resume:focus-visible .ic { color: var(--head); } #resume .ripple { background: radial-gradient(circle, color-mix(in srgb, var(--metal) 30%, transparent), transparent 65%); } /* subtitle on the raised keys at full ink (contrast ≥ 4.5 in every theme); the sheen layer sits behind the content */ #v-home .shortcut .s { color: var(--nav-ink); opacity: .92; } #v-home .shortcut .btn-sheen { position: absolute; inset: 0; } /* owner 2026-10-16: no contrasting finishes — both keys keep the same theme finish; icons at full strength (were faded) */ #v-home .shortcut > .ic { color: var(--nav-ink); opacity: .95; } /* owner 2026-10-16 “check size, fit, text position — first class”: with the eyebrow and sample line gone the card is tightened to its content — 132 px picture band, even 8 px rhythm, title / bar / Resume on one left edge */ #v-home .continue .thumb-box .thumb { min-height: 132px; } #v-home .continue .body { gap: 8px; padding: 12px 14px 12px 13px; align-content: center; } #v-home .continue .progress .count { font-variant-numeric: tabular-nums lining-nums; letter-spacing: .02em; } @container cont (max-width: 19rem) { #v-home .continue-wrap .continue .thumb-box .thumb { min-height: 0; } } /* owner 2026-10-16: in the four dark themes only (Royal Navy, Emerald Gold, Burgundy Rose, Graphite Copper) the two Home keys were pale gold / copper slabs; they become the same deep raised key as in the light themes — a jewel lacquer in the theme's own colour, gold (copper) edge, ivory-gold text. Both keys stay identical; the other five themes are unchanged. */ [data-theme="royal-navy"] { --key-a: #2C4E84; --key-b: #0E1F3D; --key-ink: #F6E7BF; } [data-theme="emerald-gold"] { --key-a: #23664A; --key-b: #0B2C1F; --key-ink: #F4E6BC; } [data-theme="burgundy-rose"] { --key-a: #7A2A40; --key-b: #300C18; --key-ink: #F9E4CC; } [data-theme="graphite-copper"] { --key-a: #45454D; --key-b: #17171B; --key-ink: #F6DCC6; } :is([data-theme="royal-navy"], [data-theme="emerald-gold"], [data-theme="burgundy-rose"], [data-theme="graphite-copper"]) #v-home .shortcut { background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 50%), linear-gradient(160deg, var(--key-a), var(--key-b)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20), inset 0 -2px 0 rgba(0, 0, 0, .30), 0 0 0 1px color-mix(in srgb, var(--hi) 30%, transparent), 0 8px 18px rgba(0, 0, 0, .35), 0 2px 4px rgba(0, 0, 0, .25); } :is([data-theme="royal-navy"], [data-theme="emerald-gold"], [data-theme="burgundy-rose"], [data-theme="graphite-copper"]) #v-home .shortcut :is(.t, .s, .t .ic) { color: var(--key-ink); text-shadow: 0 1px 1px rgba(0, 0, 0, .35); } :is([data-theme="royal-navy"], [data-theme="emerald-gold"], [data-theme="burgundy-rose"], [data-theme="graphite-copper"]) #v-home .shortcut > .ic { color: var(--metal); opacity: 1; } /* owner 2026-10-16 (chosen from the swatches): Silver Platinum = A · brushed platinum; Champagne Ivory = C · ivory pearl, gold edge. Both Home keys identical within each theme; raised depth + light sweep kept. */ :root:not([data-theme]), [data-theme="silver-platinum"] { --key-a: #E7EBF0; --key-b: #C3CAD4; --key-edge: #8A94A3; --key-ink: #1E2C4A; --key-sub: #2E3B57; --key-ic: #3A4A6A; } [data-theme="champagne-ivory"] { --key-a: #FFFDF8; --key-b: #F3EADA; --key-edge: #C9A256; --key-ink: #2A2416; --key-sub: #4A3D22; --key-ic: #9C7631; } :is(:root:not([data-theme]), [data-theme="silver-platinum"], [data-theme="champagne-ivory"]) #v-home .shortcut { border-color: var(--key-edge) !important; background-image: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 55%), linear-gradient(160deg, var(--key-a), var(--key-b)); box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(30, 44, 74, .10), 0 0 0 1px color-mix(in srgb, var(--key-edge) 30%, transparent), 0 8px 16px rgba(30, 44, 74, .12), 0 2px 4px rgba(30, 44, 74, .10); } :is(:root:not([data-theme]), [data-theme="silver-platinum"], [data-theme="champagne-ivory"]) #v-home .shortcut .t { color: var(--key-ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .7); } :is(:root:not([data-theme]), [data-theme="silver-platinum"], [data-theme="champagne-ivory"]) #v-home .shortcut :is(.s, .t .ic) { color: var(--key-sub); text-shadow: none; opacity: 1; } :is(:root:not([data-theme]), [data-theme="silver-platinum"], [data-theme="champagne-ivory"]) #v-home .shortcut > .ic { color: var(--key-ic); opacity: 1; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .8)); } :is(:root:not([data-theme]), [data-theme="silver-platinum"], [data-theme="champagne-ivory"]) #v-home .shortcut .btn-sheen { mix-blend-mode: soft-light; background-image: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .9) 50%, transparent 62%); } /* owner 2026-10-16 (chosen): Pearl Gold = B · pearl white, gold edge — same raised key recipe as Silver Platinum / Champagne Ivory */ [data-theme="pearl-gold"] { --key-a: #FFFDF8; --key-b: #F1E6CF; --key-edge: #B0832F; --key-ink: #3A2A0E; --key-sub: #5A4416; --key-ic: #8E6824; } [data-theme="pearl-gold"] #v-home .shortcut { border-color: var(--key-edge) !important; background-image: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 55%), linear-gradient(160deg, var(--key-a), var(--key-b)); box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(90, 60, 15, .10), 0 0 0 1px color-mix(in srgb, var(--key-edge) 30%, transparent), 0 8px 16px rgba(90, 60, 15, .12), 0 2px 4px rgba(90, 60, 15, .10); } [data-theme="pearl-gold"] #v-home .shortcut .t { color: var(--key-ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .7); } [data-theme="pearl-gold"] #v-home .shortcut :is(.s, .t .ic) { color: var(--key-sub); text-shadow: none; opacity: 1; } [data-theme="pearl-gold"] #v-home .shortcut > .ic { color: var(--key-ic); opacity: 1; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .8)); } [data-theme="pearl-gold"] #v-home .shortcut .btn-sheen { mix-blend-mode: soft-light; background-image: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .9) 50%, transparent 62%); } /* ===== owner 2026-10-16: “compact version to full screen iPhone” — Home sized to the phone's height ===== Short screens (iPhone SE 375×667, ≤ 740 px tall): everything fits on one screen above the bottom bar — smaller logo, tighter gaps and cards, one-line shortcut subtitles. Touch targets stay ≥ 44 px. */ @media (max-height: 690px) { .brand img { width: 64px; height: 47px; } .wm-tag { margin-top: 3px; } .lang-row .langs, .lang-row .lang-pick, .theme-btn { min-height: 44px; } #v-home { gap: 6px; padding-top: 0; } #v-home .shortcut { min-height: 78px; padding: 7px 4px 7px; gap: 1px; } #v-home .shortcut > .ic { width: 22px; height: 22px; } #v-home .shortcut .t { font-size: 1rem; } #v-home .shortcut .s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding: 0 6px; font-size: .6875rem; } #v-home .continue .thumb-box .thumb { min-height: 112px; } #v-home .continue .body { gap: 6px; padding: 9px 12px 9px 11px; } #v-home .saved-card { padding-top: 8px; padding-bottom: 8px; } #v-home .myspace { min-height: 0; } .credit { min-height: 48px; margin-top: 6px; padding-top: 5px; padding-bottom: 5px; } } /* the photo no longer sets the card height by its own aspect ratio: it fills the box, and the box sizes with the content */ #v-home .continue .thumb-box { min-height: 132px; } #v-home .continue .thumb-box .thumb { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; } @media (max-height: 690px) { #v-home .continue .thumb-box { min-height: 112px; } #v-home .ms-head { min-height: 0; padding-top: 6px; padding-bottom: 6px; } } @container cont (max-width: 19rem) { #v-home .continue-wrap .continue .thumb-box { min-height: 0; height: 84px; } } @media (max-height: 690px) { .app { padding-bottom: calc(var(--nav-h) + var(--nav-float) + var(--safe-b) + 6px); } #v-home { gap: 5px; } } /* owner 2026-10-16 (“cut the unused part to fit the screen”): no stretching — keys and the Continue card hug their content */ #v-home .shortcut { min-height: 84px; padding-top: 9px; padding-bottom: 9px; } #v-home .continue .thumb-box { min-height: 120px; } @media (max-height: 690px) { .credit { margin-top: 3px; } #v-home .saved-card { padding-top: 6px; padding-bottom: 6px; } } @media (max-height: 690px) { #v-home { gap: 4px; } } /* owner 2026-10-16: no name plaque on Home (it felt repeated there); every other screen keeps it */ main:has(#v-home:not([hidden])) > .credit { display: none; } /* ===== owner 2026-10-16: “different colour background to separate each example — cover all, audit” ===== Every example sits on its own tinted card; neighbours alternate a lighter / deeper shade so no two touching examples share a background. Meanings use their own jewel colour (--m); Levels / Structure keep their Learner · C1 / Academic · C2 tints (never two of one level together); collocations, phrasal verbs and idioms alternate the Learner / C2 tints. */ .mean .mean-ex { gap: 6px; margin-top: 4px; } .mean .ex-row { padding: 6px 32px 7px 10px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--m) 22%, transparent); border-left: 3px solid color-mix(in srgb, var(--m) 60%, transparent); background: color-mix(in srgb, var(--m) 6%, var(--surface)); } .mean .ex-row:nth-child(even) { background: color-mix(in srgb, var(--m) 14%, var(--surface)); } .mean .ex-row > .say-pair { top: calc(6px + .675em - 22px); right: -4px; } .rel-list > li { background: var(--learner-bg); } .rel-list > li:nth-child(even) { background: var(--formal-bg); } .rel-list li > .rel-ex.ex-line { background: color-mix(in srgb, var(--surface) 55%, transparent); } .rel-list li > .rel-ex.ex-line:nth-of-type(even) { background: color-mix(in srgb, var(--surface) 20%, transparent); } /* example cards: speaker level with the first line (measured: +10 px vs the bare-row formula) and near the card's right edge */ .mean .ex-row > .say-pair { top: calc(16px + .675em - 22px); right: -6px; } /* owner 2026-10-16: expand / collapse for every meaning — a quiet ⌄ key with the example count, like the reference key */ .mean .mean-more { display: flex; justify-content: flex-end; margin: 2px 0 0; } .mean .mean-toggle { display: inline-flex; align-items: center; gap: 4px; min-width: 44px; min-height: 44px; margin: -4px -6px -6px 0; padding: 0 10px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--m, var(--metal)) 35%, var(--border)); background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--head); font: 600 .75rem/1 var(--sans); transition: background-color .15s, border-color .15s; } .mean .mean-toggle .mm-n { color: color-mix(in srgb, var(--text) 55%, transparent); } .mean .mean-toggle .ic { width: 15px; height: 15px; color: color-mix(in srgb, var(--text) 50%, transparent); transition: transform .2s; } .mean .mean-toggle[aria-expanded="true"] .ic { transform: rotate(180deg); } .mean .mean-toggle:hover, .mean .mean-toggle:focus-visible { border-color: var(--m, var(--metal)); background: color-mix(in srgb, var(--m, var(--metal)) 8%, var(--surface)); } .mean .mean-toggle:focus-visible { outline: 2px solid var(--focus, var(--metal)); outline-offset: 1px; } .mean .mean-ex[hidden] { display: none; } .mean .mean-toggle .mm-n { color: var(--text-2); } /* owner 2026-10-16: one quiet ⌄ key in the top-right corner of every meaning card (no number) */ .mean { position: relative; } .mean .mean-more { position: absolute; top: 4px; right: 4px; margin: 0; z-index: 1; } .mean .mean-toggle { width: 44px; height: 44px; min-width: 0; margin: 0; padding: 0; justify-content: center; border-color: transparent; background: none; } .mean .mean-toggle::before { content: ""; position: absolute; inset: 7px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--m, var(--metal)) 35%, var(--border)); background: color-mix(in srgb, var(--surface) 85%, transparent); z-index: -1; } .mean .mean-toggle { position: relative; isolation: isolate; } .mean .mean-row { padding-right: 40px; } /* ===================================================================================================================== owner 2026-10-17 — “LexiGlobal First Class Signature” homepage: the saved photo fills Home behind navy glass cards. Structure is shared; colours are done one theme at a time — this block is the Blue (Royal Navy) theme. Palette: fallback #06162D · card #1B3155 · gold #F3D58A · gold gradient #B88636 → #FFE5A3 → #C59645 · text #FFFDF7 · secondary #D8DEE9 · muted #AEB9C8 · overlay darkness 20–80 % (default 45 %). ===================================================================================================================== */ .photo-layer { position: relative; overflow: hidden; background: #06162D; isolation: isolate; } .photo-layer > .photo-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; } .photo-layer::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(6, 22, 45, var(--photo-dark, .45)); } .home-bg { position: fixed; inset: 0; z-index: 0; display: none; pointer-events: none; } .home-bg::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(6, 22, 45, .78) 0%, rgba(6, 22, 45, .35) 22%, rgba(6, 22, 45, 0) 38%, rgba(6, 22, 45, 0) 74%, rgba(6, 22, 45, .55) 100%); } .app { position: relative; z-index: 1; } :root[data-theme="royal-navy"] body[data-route="home"] { background: #06162D; } :root[data-theme="royal-navy"] body[data-route="home"] .home-bg { display: block; } :root[data-theme="royal-navy"] body[data-route="home"] .app { background: none; } :root[data-theme="royal-navy"] body[data-route="home"] { --sig-card: rgba(27, 49, 85, .84); --sig-line: rgba(243, 213, 138, .55); --sig-gold: #F3D58A; --sig-text: #FFFDF7; --sig-text-2: #D8DEE9; --sig-muted: #AEB9C8; } /* header over the photo */ :root[data-theme="royal-navy"] body[data-route="home"] .langs { color: var(--sig-text); } :root[data-theme="royal-navy"] body[data-route="home"] .langs .ic, :root[data-theme="royal-navy"] body[data-route="home"] .langs .chev { color: var(--sig-text-2); } :root[data-theme="royal-navy"] body[data-route="home"] :is(.theme-btn, .lang-pick) { min-height: 44px; padding: 0 10px; font-size: .8125rem; color: var(--sig-text) !important; background: rgba(10, 26, 52, .62) !important; border-color: var(--sig-line) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } :root[data-theme="royal-navy"] body[data-route="home"] :is(.theme-btn, .lang-pick) .ic { color: var(--sig-gold); } /* navy glass cards */ :root[data-theme="royal-navy"] body[data-route="home"] #v-home :is(.card, .shortcut, .home-search .search) { background: var(--sig-card) !important; background-image: none !important; border: 1px solid var(--sig-line) !important; -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15); box-shadow: 0 8px 22px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06) !important; color: var(--sig-text); } :root[data-theme="royal-navy"] body[data-route="home"] #v-home :is(.h-card, .shortcut .t, .continue .title-btn, .see-all, .pill, .ms-head .h-card) { color: var(--sig-text) !important; text-shadow: none; } :root[data-theme="royal-navy"] body[data-route="home"] #v-home :is(.small, .muted, .shortcut .s, .ms-head .muted, .continue .count, .cap) { color: var(--sig-text-2) !important; } :root[data-theme="royal-navy"] body[data-route="home"] #v-home :is(.shortcut > .ic, .saved-card .head > .ic, .avatar-ic .ic, .ms-head .end .ic) { color: var(--sig-gold) !important; filter: none; } :root[data-theme="royal-navy"] body[data-route="home"] #v-home :is(.shortcut .t .ic, .continue .title-btn .ic, .see-all .ic) { color: var(--sig-text-2) !important; } :root[data-theme="royal-navy"] body[data-route="home"] #v-home .home-search .search input { color: var(--sig-text); } :root[data-theme="royal-navy"] body[data-route="home"] #v-home .home-search .search input::placeholder { color: var(--sig-text-2); } :root[data-theme="royal-navy"] body[data-route="home"] #v-home .pill { background: rgba(255, 253, 247, .06) !important; border-color: rgba(255, 253, 247, .45) !important; } :root[data-theme="royal-navy"] body[data-route="home"] #v-home .pill.mine { background: rgba(243, 213, 138, .14) !important; border-color: var(--sig-line) !important; } :root[data-theme="royal-navy"] body[data-route="home"] #v-home .pill .ic { color: var(--sig-gold); } :root[data-theme="royal-navy"] body[data-route="home"] #v-home .pills .pill-more { color: var(--sig-text); border-color: var(--sig-line); } :root[data-theme="royal-navy"] body[data-route="home"] #v-home .avatar-ic { background: rgba(243, 213, 138, .14); } /* Resume: compact quiet key with the gold line; ivory label */ :root[data-theme="royal-navy"] body[data-route="home"] #v-home #resume { color: var(--sig-text) !important; border-color: var(--sig-line) !important; } :root[data-theme="royal-navy"] body[data-route="home"] #v-home #resume .ic { color: var(--sig-text-2); } /* bottom navigation: navy glass, softer glow */ :root[data-theme="royal-navy"] body[data-route="home"] .bottom-nav { background: rgba(12, 28, 56, .82) !important; background-image: none !important; -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); border: 1px solid rgba(243, 213, 138, .35); box-shadow: 0 6px 18px rgba(0, 0, 0, .3) !important; } :root[data-theme="royal-navy"] body[data-route="home"] .bottom-nav::before { opacity: .45; } /* shared: Resume Learning more compact (book picture −12 %, 44 px Resume), My Space row 66 px */ #v-home .continue { grid-template-columns: 74px minmax(0, 1fr); } #v-home .continue .thumb-box { min-height: 108px; } #v-home #resume { min-height: 44px; height: 44px; } #v-home .myspace .ms-head { min-height: 66px; } /* ---------- My Space full-screen page (all themes; Royal Navy matches the reference) ---------- */ body[data-route="myspace"] .bottom-nav { display: none; } body[data-route="myspace"] .app { padding-bottom: calc(16px + var(--safe-b)); } body[data-route="myspace"] .credit { display: none; } .ms-screen { display: grid; gap: 12px; padding-top: 4px; } .ms-top { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 6px; } .ms-top .h-page { margin: 0; text-align: center; font: 600 1.375rem/1.2 var(--serif-display); color: var(--head); } .ms-back, .ms-adj-back { width: 44px; height: 44px; border: 0; background: none; color: var(--head); border-radius: 50%; } .ms-back .ic, .ms-adj-back .ic { width: 22px; height: 22px; } .btn-gold { color: #2A1E08; border: 1px solid #A67C2E; background: linear-gradient(135deg, #B88636 0%, #FFE5A3 50%, #C59645 100%); box-shadow: 0 2px 8px rgba(166, 124, 46, .25); font-weight: 700; } .btn-gold .ic { color: #2A1E08; } .btn-glass { color: var(--head); border: 1px solid color-mix(in srgb, var(--metal) 55%, var(--border)); background: color-mix(in srgb, var(--surface) 70%, transparent); } .btn-danger-outline { color: #B3261E; border: 1px solid color-mix(in srgb, #B3261E 70%, transparent); background: none; justify-self: center; padding: 0 22px; } .btn-danger-outline:disabled { opacity: .45; } .ms-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--metal) 40%, var(--border)); background: var(--surface); } .ms-tabs [role=tab] { min-height: 44px; border: 0; border-radius: 999px; background: none; color: var(--head); font: 600 .9375rem/1 var(--sans); } .ms-tabs [role=tab][aria-selected="true"] { color: #2A1E08; background: linear-gradient(135deg, #B88636 0%, #FFE5A3 50%, #C59645 100%); } .ms-panel { display: grid; gap: 12px; padding: 12px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--metal) 35%, var(--border)); background: var(--surface); } .ms-panel[hidden] { display: none; } .ms-preview { width: 100%; aspect-ratio: 4 / 3; border-radius: 14px; margin: 0; border: 1px solid color-mix(in srgb, var(--metal) 45%, transparent); } .ms-change { justify-self: center; margin-top: -32px; z-index: 2; padding: 0 18px; background: color-mix(in srgb, var(--surface) 92%, transparent); } .ms-h { font: 600 1rem/1.3 var(--serif-display); color: var(--head); } .ms-display { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; } .ms-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .ms-seg label { position: relative; } .ms-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .ms-seg span { display: grid; place-items: center; gap: 4px; min-height: 64px; padding: 8px 4px; border-radius: 12px; text-align: center; border: 1px solid color-mix(in srgb, var(--metal) 30%, var(--border)); color: var(--text-2); font: 500 .75rem/1.2 var(--sans); } .ms-seg span .ic { width: 22px; height: 22px; color: var(--head); } .ms-seg input:checked + span { border: 1.5px solid var(--metal); color: var(--head); background: color-mix(in srgb, var(--metal) 10%, transparent); } .ms-seg input:focus-visible + span { outline: 2px solid var(--focus, var(--metal)); outline-offset: 2px; } .ms-dark { display: grid; gap: 6px; } .ms-dark-h { display: flex; justify-content: space-between; align-items: baseline; } .ms-dark-v { font: 600 .9375rem/1 var(--sans); color: var(--head); } .ms-dark-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; } .ms-dark-row .ic { width: 18px; height: 18px; color: var(--metal-text, var(--head)); } .ms-dark-row .sun-lo { width: 15px; height: 15px; } .ms-dark-r { width: 100%; } .ms-apply { min-height: 50px; font-size: 1rem; } .ms-foot { display: grid; justify-items: center; gap: 2px; text-align: center; } .ms-adjust { position: fixed; inset: 0; z-index: 30; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px calc(16px + var(--safe-b)); background: var(--page-bg); max-width: var(--app-max); margin: 0 auto; } .ms-adjust[hidden] { display: none; } .ms-adj-tt { text-align: center; } .ms-adj-tt .small { margin: 2px 0 0; } .ms-frame { justify-self: center; height: 100%; max-height: 62vh; aspect-ratio: 9 / 19.5; border-radius: 18px; border: 1.5px solid var(--metal); touch-action: none; cursor: grab; } .ms-frame:focus-visible { outline: 3px solid var(--focus, var(--metal)); outline-offset: 3px; } .ms-zoom { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; color: var(--head); font: 600 .875rem/1 var(--sans); } .ms-zoom span { display: inline-flex; align-items: center; gap: 6px; } .ms-zoom .ic { width: 18px; height: 18px; } .ms-adj-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; } /* Royal Navy: the My Space page in the reference colours */ :root[data-theme="royal-navy"] body[data-route="myspace"] { background: #06162D; } :root[data-theme="royal-navy"] .ms-screen, :root[data-theme="royal-navy"] .ms-adjust { --head: #FFFDF7; --text-2: #D8DEE9; } :root[data-theme="royal-navy"] .ms-panel, :root[data-theme="royal-navy"] .ms-tabs { background: rgba(27, 49, 85, .88); border-color: rgba(243, 213, 138, .45); } :root[data-theme="royal-navy"] .ms-adjust { background: #06162D; } :root[data-theme="royal-navy"] .btn-danger-outline { color: #FF8A80; border-color: rgba(255, 138, 128, .7); } :root[data-theme="royal-navy"] body[data-route="home"] .ambient { display: none; } /* the photo replaces the ambient gradient on Home */ .ms-screen .ms-change.cover-btn { position: relative; inset: auto; top: auto; right: auto; bottom: auto; left: auto; width: auto; height: auto; min-height: 44px; border-radius: 999px; transform: none; justify-self: center; margin-top: -34px; z-index: 2; padding: 0 18px; gap: 8px; color: var(--head); background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid color-mix(in srgb, var(--metal) 55%, var(--border)); box-shadow: 0 4px 12px rgba(0,0,0,.25); } :root[data-theme="royal-navy"] .ms-screen .ms-change.cover-btn { background: rgba(12, 28, 56, .9); border-color: rgba(243, 213, 138, .6); } .ms-screen .ms-change.cover-btn { display: inline-flex; align-items: center; } .ms-screen .ms-change.cover-btn .ic { width: 18px; height: 18px; color: var(--metal-text, var(--head)); } :root[data-theme="royal-navy"] .ms-screen .ms-change.cover-btn .ic { color: #F3D58A; } /* ---- letter-A draft entries (owner 2026-10-17): AI-written content is marked; a meaning without an example shows its note ---- */ .ai-tag { display: inline-block; margin-inline-start: .45em; padding: 0 .45em; border: 1px solid currentColor; border-radius: 999px; font: 700 .66em/1.5 var(--font-ui, system-ui), sans-serif; letter-spacing: .06em; vertical-align: .15em; opacity: .72; white-space: nowrap; } .prow-d > button .ai-tag { margin-inline-end: .4em; } .mean-note { margin: .35em 0 0; font-size: .9em; font-style: italic; opacity: .8; } .reg-ai { margin: .5em 0 0; font-size: .82em; opacity: .75; } .reg-ai .ai-tag { margin-inline: 0 .4em; } /* ---- structure rows (owner 2026-10-17, like the Academic module): number · pattern · type label · level badge ---- */ .prow-d > button:has(.st-name) { display: flex; align-items: center; gap: .55em; text-align: start; } .prow-d .st-n { font: 700 .78em/1 ui-monospace, Consolas, monospace; opacity: .6; min-width: 1.7em; } .prow-d .st-name { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .55em; } .prow-d .st-type { font-size: .78em; font-weight: 500; opacity: .62; } .lvl-badge { flex: none; padding: .12em .6em; border-radius: 7px; border: 1px solid currentColor; font: 700 .72em/1.5 var(--font-ui, system-ui), sans-serif; letter-spacing: .02em; } .lvl-badge.lvl-essential { color: #1f8a5b; background: rgba(31, 138, 91, .1); } .lvl-badge.lvl-academic { color: #2d6cdf; background: rgba(45, 108, 223, .1); } .lvl-badge.lvl-advanced { color: #5a4fcf; background: rgba(90, 79, 207, .1); } .lvl-badge.lvl-c1 { color: #9a3fb5; background: rgba(154, 63, 181, .1); } .lvl-badge.lvl-c2 { color: #b0413e; background: rgba(176, 65, 62, .1); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lvl-badge { filter: brightness(1.45); } } :root[data-theme="dark"] .lvl-badge, [data-theme$="navy"] .lvl-badge, [data-theme$="emerald"] .lvl-badge { filter: brightness(1.45); } .st-mean { margin: .2em 0 .6em; font-size: .9em; opacity: .85; } .st-mean .st-expl { display: block; margin-top: .2em; font-size: .92em; opacity: .8; } /* ============================================================ Royal Navy: light cards on the navy page owner 2026-10-17 (“For only Royal Navy i like this background”, reference: “C1–C2 Writing Structures”): in Royal Navy only, the page, header, search and navigation stay navy and the cards turn pale blue-grey with dark navy text and royal-blue accents. Card-level tokens are redefined on the card, so everything inside it follows; derived tokens are restated here because a custom property built from other tokens is resolved where it is declared. Other themes are unchanged. */ :root[data-theme="royal-navy"] body:not([data-route="home"]):not([data-route="myspace"]) .card { color-scheme: light; --surface: #E6EDF6; --surface-warm: #E9EFF7; --structure-bg: #EEF2F8; --learner-bg: #DCE6F7; --learner-label: #1E40AF; --everyday-bg: #DCEFEA; --everyday-label: #145C4A; --formal-bg: #E6E1F6; --formal-label: #4C2F9E; --text: #1E293B; --text-2: #475569; --head: #0F1E3D; --icon: #1E3A8A; --metal: #1D4ED8; --metal-text: #1E40AF; --metal-line: rgba(30, 64, 175, .35); --metal-deep: #1E3A8A; --hi: #EEF2F8; --border: #C3CFE2; --hairline: #CBD5E4; --btn-a: #FFFFFF; --btn-b: #DCE4F0; --btn-ink: #0F1E3D; --nav-a: #2F5BD3; --nav-b: #1D3F9E; --nav-ink: #FFFFFF; --focus: #1D4ED8; --error: #8A2C2C; --track: #6F82A0; --thumb: #475569; --knob-edge: var(--metal-deep); --shadow-btn: 0 3px 7px rgba(15, 30, 61, .14), inset 0 1px 0 rgba(255, 255, 255, .85); --shadow-btn-pressed: 0 1px 3px rgba(15, 30, 61, .18), inset 0 1px 0 rgba(255, 255, 255, .6); --engrave: 0 1px 0 rgba(255, 255, 255, .7); --sheen: rgba(255, 255, 255, .55); --pill-ink: var(--head); --ambient-top: rgba(255, 255, 255, .8); --chip-bg: color-mix(in srgb, var(--btn-b) 45%, var(--surface)); --progress-track: color-mix(in srgb, var(--track) 35%, var(--surface)); --progress-fill: var(--learner-label); --switch-on: var(--nav-b); --switch-ink: var(--nav-ink); --avatar-a: #F6E5B3; --avatar-b: #E2BE72; /* the gold avatar keeps its dark initials readable */ --card-edge: color-mix(in srgb, var(--metal) 34%, transparent); --title-warm: color-mix(in srgb, var(--metal-text) 62%, var(--text)); --name-bronze: color-mix(in srgb, var(--metal-text) 86%, var(--text)); --pill-a: color-mix(in srgb, var(--hi) 78%, var(--surface)); --pill-b: color-mix(in srgb, var(--metal) 48%, var(--surface)); background: var(--surface); color: var(--text); border: 1px solid #C9D4E5; border-top: 2px solid #6D6FC0; box-shadow: 0 6px 18px rgba(0, 0, 0, .32); } :root[data-theme="royal-navy"] body:not([data-route="home"]):not([data-route="myspace"]) .card .lvl-badge { filter: none; } /* the level badges' fixed colours, a step darker so they keep 4.5:1 on the pale card */ :root[data-theme="royal-navy"] body:not([data-route="home"]):not([data-route="myspace"]) .card .lvl-badge.lvl-essential { color: #13603F; } :root[data-theme="royal-navy"] body:not([data-route="home"]):not([data-route="myspace"]) .card .lvl-badge.lvl-academic { color: #1E4FB0; } /* ============================================================ Structure grouped by grammar (owner 2026-10-18) */ .st-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; } .st-tabs [role=tab] { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--chip-bg); color: var(--text); font: 600 .875rem/1.2 var(--sans); } .st-tabs [role=tab][aria-selected="true"] { color: var(--nav-ink); background: linear-gradient(180deg, var(--nav-a), var(--nav-b)); border-color: transparent; } .st-tabs [role=tab][aria-selected="true"] .rel-count { background: rgba(255, 255, 255, .22); color: inherit; border-color: transparent; } .st-group { margin: 0 0 12px; } .st-group + .st-group { padding-top: 10px; border-top: 1px solid var(--hairline); } .st-ghead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 6px; } .st-ghead h3 { display: flex; align-items: center; gap: 6px; margin: 0; font: 800 .8125rem/1.3 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--head); } .st-learn, .st-all a, .st-gram a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font: 600 .8125rem/1.2 var(--sans); color: var(--metal-text); text-decoration: none; } .st-learn .ic, .st-all .ic, .st-gram .ic { width: 16px; height: 16px; } .st-gram { margin: 2px 0 0; } .st-all { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--hairline); } /* ============================================================ Grammar lessons (#/grammar) */ #v-grammar { display: grid; gap: 12px; } #v-grammar .h-page { margin-bottom: 0; } .gr-ai { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: .8125rem; line-height: 1.4; color: var(--text-2); } .gr-ai .ai-tag { flex: none; } .gr-head { display: flex; align-items: center; gap: 10px; } .gr-head .h-page { margin-bottom: 0; } .gr-head .gr-ai { flex: none; cursor: help; } .gr-back, .gr-crumbs a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font: 600 .875rem/1.2 var(--sans); color: var(--metal-text); text-decoration: none; } .gr-crumbs { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; } .gr-sum { margin: 0; font-size: 1rem; line-height: var(--lh); color: var(--text); } .gr-part .h-card, .gr-sec .h-card, .gr-rel .h-card { margin: 0 0 8px; } .gr-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } .gr-list li + li { border-top: 1px solid var(--hairline); } .gr-list a { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; min-height: 44px; padding: 8px 0; color: var(--text); text-decoration: none; } .gr-list .gr-t { font: 700 .9688rem/1.3 var(--sans); color: var(--head); } .gr-list .gr-s { grid-column: 1; font-size: .8125rem; line-height: 1.35; color: var(--text-2); } .gr-list .ic { grid-row: 1 / span 2; grid-column: 2; color: var(--text-2); } .gr-list.gr-compact .ic { grid-row: 1; } /* owner 2026-10-18: a word’s grammar list shows lesson names only, for more space */ .gr-list.gr-compact a { padding: 4px 0; } .gr-sec p { margin: 0 0 8px; line-height: var(--lh); color: var(--text); } .gr-forms { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .gr-f { margin: 0 0 4px !important; padding: 6px 10px; border-radius: 10px; font: 700 .9375rem/1.35 var(--sans); color: var(--learner-label); background: var(--learner-bg); } .gr-ex { display: grid; gap: 4px; margin: 0; padding: 0 0 0 12px; list-style: none; border-left: 2px solid color-mix(in srgb, var(--metal) 55%, transparent); } .gr-ex li { font-size: .9375rem; line-height: var(--lh); color: var(--text); } /* the word's own Learner → C1 → C2 examples: the same level backgrounds as the CEFR Levels card (owner 2026-10-19 "i like background CEFR level") */ .gr-ex.gr-levels { gap: 8px; padding: 0; border-left: 0; } .gr-levels li { padding: 6px 12px 8px; border-radius: 10px; background: var(--surface); } .gr-levels li.lvl-learner { background: var(--everyday-bg); } .gr-levels li.lvl-c1 { background: var(--learner-bg); } .gr-levels li.lvl-c2 { background: var(--formal-bg); } .gr-levels li.lvl-academic { background: var(--surface-warm); } .gr-levels li .lvl { display: block; width: fit-content; min-width: 0; margin: 0 0 2px; padding: 1px 8px; background: var(--surface); text-transform: none; letter-spacing: 0; } .gr-levels li.lvl-learner .lvl { color: var(--everyday-label); } .gr-levels li.lvl-c1 .lvl { color: var(--learner-label); } .gr-levels li.lvl-c2 .lvl { color: var(--formal-label); } .gr-levels li.lvl-academic .lvl { color: var(--metal-text); } .gr-levels li b { font-weight: 700; color: var(--head); } .gr-chips { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; } .gr-chips .rel-chip { text-decoration: none; } /* grammar for one searched word: part-of-speech chips, the word's own patterns first */ .gr-pos { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; } .gr-pos .rel-chip { text-decoration: none; } .gr-pos .rel-chip[aria-current="page"] > span { color: var(--nav-ink); background: linear-gradient(180deg, var(--nav-a), var(--nav-b)); border-color: transparent; } .gr-word { border-left: 4px solid var(--metal); } .gr-word .lvl { display: inline-block; min-width: 3.4em; font: 700 .6875rem/1.4 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); } .gr-list .gr-t .rel-count { margin-left: 6px; vertical-align: 1px; } /* header line (owner 2026-10-18): CEFR badge · part of speech + grammar label · IPA · UK / US */ .word-meta .cefr { font-size: .8125rem; padding: .1em .55em; border-radius: 6px; } .word-meta .gram-label { font: 600 .875rem/1 var(--sans); color: var(--text-2); } /* the CEFR badge sits on the page background in every theme: a solid band colour with white text (≥ 4.5:1 everywhere) */ .word-meta .cefr { border: 0; color: #fff !important; font-weight: 800; letter-spacing: .02em; } .word-meta .cefr.lvl-essential { background: #17633F !important; } .word-meta .cefr.lvl-academic { background: #1E4FB0 !important; } .word-meta .cefr.lvl-c1 { background: #7A2E95 !important; } .word-meta .cefr.lvl-c2 { background: #9A2F2B !important; } .word-meta .cefr { filter: none !important; } /* no dark-theme brightening: the white-on-colour badge is already readable */ /* owner 2026-10-18 “compact it” (Grammar list on the word page): one-line rows, tighter group headings; every row stays a 44 px tap target */ #sec-structure .st-group { margin: 0 0 4px; } #sec-structure .st-group + .st-group { padding-top: 4px; } #sec-structure .st-ghead { margin: 0; } #sec-structure .st-ghead h3 { font-size: .75rem; } #sec-structure .st-learn { font-size: .75rem; } #sec-structure .prow-d > button { padding: 2px 0; font: 600 .875rem/1.25 var(--sans); } #sec-structure .prow-d > button .ic { width: 14px; height: 14px; } #sec-structure .st-all { margin: 4px 0 0; } /* owner 2026-10-18 “hide Ai too keep it in citation”: AI badges and AI notes are not drawn on screen; they stay in the page for screen readers, and the Citation dialog lists what in the entry is AI-written (CitationDialog.js). */ .ai-tag, .reg-ai, .gr-ai { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .cite-ai { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hairline); font-size: .8125rem; line-height: 1.45; color: var(--text-2); } .cite-ai h3 { margin: 0 0 4px; font: 700 .8125rem/1.3 var(--sans); color: var(--head); } .cite-ai ul { margin: 0 0 6px; padding-inline-start: 1.1em; } .cite-ai p { margin: 0; }