/* kh-stack.css — "Bốn tầng kỹ năng" isometric stack (Khoá học hero, right column). Markup:
… (see lab/_kh-stack-test.html); art is drawn by kh-stack.js. Label colour follows the surrounding text colour (white on the dark hero, navy on a light one). */ .kh-stack { --kh-royal: #1d4ed8; --kh-royal-2: #133c9f; --kh-gold: #c9a227; --kh-floor: rgba(6, 20, 64, 0.5); --kh-floor-core: rgba(8, 26, 80, 0.42); --kh-ghost: rgba(255, 255, 255, 0.42); position: relative; width: 100%; max-width: 600px; margin-inline: auto; container-type: inline-size; color: inherit; -webkit-tap-highlight-color: transparent; } .kh-stack--on-light, .kh-on-light .kh-stack { --kh-floor: rgba(19, 60, 159, 0.2); --kh-floor-core: rgba(19, 60, 159, 0.22); --kh-ghost: rgba(29, 78, 216, 0.4); } .kh-stack__stage { --kh-u: calc(100cqw / 600); position: relative; width: 100%; aspect-ratio: 600 / 490; perspective: 1500px; perspective-origin: 40% 50%; } .kh-stack__scene { position: absolute; inset: 0; transform-origin: 34% 55%; } .kh-stack__floor, .kh-stack__ghosts, .kh-stack__tier, .kh-stack__hit { position: absolute; inset: 0; pointer-events: none; } .kh-ghost { stroke: var(--kh-ghost); opacity: 0; } .kh-stack__svg { display: block; width: 100%; height: 100%; overflow: visible; } .kh-floor-soft { fill: var(--kh-floor); } .kh-floor-core { fill: var(--kh-floor-core); } .kh-hit { fill: transparent; pointer-events: all; } /* overlays: gold = newest / focused tier, pulse = end-of-intro sweep */ .kh-gold, .kh-pulse { opacity: 0; } .kh-gold { transition: opacity .3s ease; } .kh-stack__tier.is-on .kh-gold { opacity: 1; } /* ---- labels ---- */ .kh-stack__labels { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; } .kh-stack__label { position: absolute; left: 52.13%; right: 0; height: 0; display: flex; align-items: center; pointer-events: none; } .kh-stack__label[data-tier="1"] { top: 78.21%; } .kh-stack__label[data-tier="2"] { top: 60.07%; } .kh-stack__label[data-tier="3"] { top: 41.92%; } .kh-stack__label[data-tier="4"] { top: 23.77%; } .kh-stack__lead { position: relative; flex: none; width: calc(26 * var(--kh-u)); height: 1px; background: linear-gradient(90deg, currentColor, transparent 140%); opacity: .42; transition: opacity .25s ease; } .kh-stack__lead::before { content: ""; position: absolute; left: -2px; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; transition: background-color .25s ease, transform .25s ease; } .kh-stack__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-left: calc(4 * var(--kh-u)); padding: .38em .7em .42em; border-radius: 10px; font-size: clamp(12.5px, 2.72cqw, 16.5px); line-height: 1.22; pointer-events: auto; cursor: default; transition: background-color .25s ease, box-shadow .25s ease; } .kh-stack__txt b { font-weight: 700; letter-spacing: -.01em; text-wrap: balance; } .kh-stack__txt > span { font-size: .8em; font-weight: 600; opacity: .7; font-variant-numeric: tabular-nums; } .kh-stack__label.is-on .kh-stack__txt { background: color-mix(in srgb, currentColor 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 26%, transparent); } .kh-stack__label.is-on .kh-stack__lead { opacity: .9; } .kh-stack__label.is-on .kh-stack__lead::before { background: var(--kh-gold); transform: scale(1.35); } /* focus ring must out-rank the .is-on chip above (focus always sets .is-on) */ .kh-stack__label .kh-stack__txt:focus-visible { outline: none; border-radius: 10px; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 26%, transparent), 0 0 0 2px currentColor; } /* before the script runs (html.js is set in ) keep the labels back; failsafe after 3 s */ .js .kh-stack:not(.is-ready) .kh-stack__labels { opacity: 0; animation: khFailsafe .01s 3s forwards; } @keyframes khFailsafe { to { opacity: 1; } } /* ---- intro (plays once; the default styles are the final frame) ---- */ .kh-stack__tier[data-tier="1"] { --kh-d: .05s; --kh-land: .40s; --kh-sh: .90s; --kh-p: 2.95s; } .kh-stack__tier[data-tier="2"] { --kh-d: .70s; --kh-land: 1.12s; --kh-sh: 1.60s; --kh-p: 3.10s; } .kh-stack__tier[data-tier="3"] { --kh-d: 1.40s; --kh-land: 1.82s; --kh-sh: 2.30s; --kh-p: 3.25s; } .kh-stack__tier[data-tier="4"] { --kh-d: 2.10s; --kh-land: 2.52s; --kh-p: 3.40s; } .kh-stack__label[data-tier="1"] { --kh-l: .30s; } .kh-stack__label[data-tier="2"] { --kh-l: 1.02s; } .kh-stack__label[data-tier="3"] { --kh-l: 1.72s; } .kh-stack__label[data-tier="4"] { --kh-l: 2.42s; } .kh-ghost[data-tier="2"] { --kh-g: 1.25s; } .kh-ghost[data-tier="3"] { --kh-g: 1.95s; } .kh-ghost[data-tier="4"] { --kh-g: 2.65s; } .kh-stack.is-intro .kh-stack__floor { animation: khFloor .9s .05s both ease-out; } .kh-stack.is-intro .kh-ghost { animation: khGhost var(--kh-g) 0s both linear; } .kh-stack.is-intro .kh-stack__tier { animation: khDrop .8s var(--kh-d) both; } .kh-stack.is-intro .kh-stack__tier[data-tier="1"] { animation: khSettle .72s var(--kh-d) both; } .kh-stack.is-intro .kh-shade { animation: khFade .5s var(--kh-sh) both ease-out; } .kh-stack.is-intro .kh-gold { animation: khGold 1.15s var(--kh-land) both; } .kh-stack.is-intro .kh-pulse { animation: khPulse .62s var(--kh-p) both ease-in-out; } .kh-stack.is-intro .kh-stack__label { animation: khLabel .55s var(--kh-l) both cubic-bezier(.2, .7, .2, 1); } .kh-stack.is-paused, .kh-stack.is-paused * { animation-play-state: paused !important; } @keyframes khFloor { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } } @keyframes khSettle { 0% { opacity: 0; translate: 0 calc(-14 * var(--kh-u)); animation-timing-function: cubic-bezier(.3, 0, .6, 1); } 30% { opacity: 1; } 58% { translate: 0 calc(1.6 * var(--kh-u)); animation-timing-function: cubic-bezier(.3, 0, .3, 1); } 80% { translate: 0 calc(-.6 * var(--kh-u)); } 100% { opacity: 1; translate: 0 0; } } @keyframes khDrop { 0% { opacity: 0; translate: 0 calc(-56 * var(--kh-u)); animation-timing-function: cubic-bezier(.5, 0, .9, .55); } 12% { opacity: 1; } 52% { translate: 0 calc(2.6 * var(--kh-u)); animation-timing-function: cubic-bezier(.25, 0, .35, 1); } 74% { translate: 0 calc(-1.1 * var(--kh-u)); animation-timing-function: cubic-bezier(.4, 0, .4, 1); } 100% { opacity: 1; translate: 0 0; } } @keyframes khFade { from { opacity: 0; } to { opacity: 1; } } @keyframes khGhost { 0% { opacity: 0; } 16% { opacity: 1; } 86% { opacity: 1; } 100% { opacity: 0; } } @keyframes khGold { 0% { opacity: 0; } 12% { opacity: 1; } 68% { opacity: 1; } 100% { opacity: 0; } } @keyframes khPulse { 0% { opacity: 0; } 38% { opacity: 1; } 100% { opacity: 0; } } @keyframes khLabel { from { opacity: 0; translate: calc(-10 * var(--kh-u)) 0; } to { opacity: 1; translate: 0 0; } } /* ---- small containers: compact labels ---- */ @container (max-width: 460px) { .kh-stack__lead { width: calc(12 * var(--kh-u)); } .kh-stack__txt { margin-left: 0; padding: .28em .45em .32em; font-size: clamp(11.5px, 3.3cqw, 13.5px); line-height: 1.18; border-radius: 8px; } .kh-stack__txt > span { font-size: .86em; } } /* ---- on the shared "sky" hero (navy → blue → white fade; theme-fluent-glass.css .sky) ---- Desktop: the bottom label sits on the brighter blue → a soft navy shadow under the glyphs and a firmer sub-line. ≤ 960 px the stack sits under the copy, where the sky runs from mid-blue into white: no single text colour reads on both, so each label becomes a porcelain chip with navy text (the same on any background). */ .sky .kh-stack__txt { text-shadow: 0 1px 2px rgba(6, 22, 70, .42), 0 0 12px rgba(6, 22, 70, .26); } .sky .kh-stack__txt > span { opacity: .88; } @media (max-width: 960px) { .sky .kh-stack__label { color: #133c9f; } .sky .kh-stack__lead { opacity: .7; } .sky .kh-stack__txt { color: #0f2a6b; text-shadow: none; background: rgba(255, 255, 255, .84); box-shadow: 0 0 0 1px rgba(29, 78, 216, .16), 0 8px 18px -12px rgba(19, 60, 159, .55); -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2); } .sky .kh-stack__txt > span { opacity: .78; } .sky .kh-stack__label.is-on .kh-stack__txt { background: #ffffff; box-shadow: 0 0 0 1.5px #1d4ed8, 0 10px 22px -12px rgba(19, 60, 159, .6); } .sky .kh-stack__label .kh-stack__txt:focus-visible { box-shadow: 0 0 0 1.5px #1d4ed8, 0 0 0 4px rgba(29, 78, 216, .28); } } @media (prefers-reduced-motion: reduce) { .kh-stack *, .kh-stack { animation: none !important; transition: none !important; } } /* ---------- Round 108 ---------- Desktop sky: the session range under each label is full white (it sat at ~3.7:1 on the mid-blue at .88). Phones: a floor for the label text (was 11.5px title / 9.9px range at 360px). */ .sky .kh-stack__txt > span { opacity: 1; } @media (max-width: 960px) { .sky .kh-stack__txt > span { opacity: .82; } } @container (max-width: 460px) { .kh-stack__txt { font-size: clamp(12px, 3.3cqw, 13.5px); } .kh-stack__txt > span { font-size: max(11px, .86em); } } /* EN labels are longer (two lines each at 360px): a tighter line box keeps the three upper labels apart */ @container (max-width: 460px) { html[lang="en"] .kh-stack__txt { line-height: 1.08; padding-block: .22em .26em; } }