/* ---------- hub-dash: the landing page's mood, ported to the skill grid ---------- Loaded after style.css (see hub.html / index.html ), same convention about.css uses: reuse style.css's tokens (--ink-950, --crimson, --font-mono, --radius, ...), add only the new rules here. Every selector below targets classes hub.js already builds via createElement/textContent — this file adds no new elements and requires no hub.js change, so the untrusted-string / no-innerHTML rule in hub.js stays intact. Linked by FIVE pages, not one: hub.html, index.html, account.html, history.html, upgrade.html. index.html's #taskChooser reuses .hub-head/.hub-grid/.hub-card/.dash-head/.dash-skill/.dash-meta verbatim, so the Task 1/Task 2 picker cards pick up the same sticker treatment for free. The other three link it for .chip .label and .gauge-fill below — which, since v1.4.32 stripped the score readouts off the hub cards, no longer touch the hub at all: they now style /writing's summary card and /history's chips only. The filename is older than the truth; read the selectors, not the name. */ /* Eyebrow label: from a plain heavy Archivo label to the mono "technical register" /about and the login card use for every label on screen. */ .hub-eyebrow { font-family: var(--font-mono); font-weight: 600; letter-spacing: var(--tracking-label); color: var(--slate-500); } /* The sticker card: same graphic language as .login-card (style.css) and .about-letter (about.css) — hard ink border + flat offset shadow, no blur. Thinner offset than the login card's 9px since these are smaller, denser grid cards and a full 9px would out-compete the hero card above them. */ .hub-card { border: var(--border-hair) solid var(--line-crisp); border-radius: var(--radius-card); background: var(--surface-card); box-shadow: var(--shadow-card); transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease; } /* Not built yet: same card shape, but the shadow drops to neutral grey so a locked skill never reads as an available action. */ /* Locked: the card must not read as an available action. With the offset shadow gone there is no coloured slab left to grey out, so the signal moves to the surface itself — it recedes rather than shouting. */ .hub-card.is-locked { background: var(--slate-50); box-shadow: var(--shadow-none); } /* Tactile lift, pointer devices only — gated by hover capability, never by prefers-reduced-motion (every dev machine here reports that on, so a reduced-motion query would just delete the effect for everyone). */ @media (hover: hover) { .hub-card:not(.is-locked):hover { transform: translateY(-2px); border-color: var(--line-ink); box-shadow: var(--shadow-lift); } } /* The narrow-screen block that used to shrink the offset shadow here is gone: a soft shadow does not need to be scaled down to fit a phone. */ /* Skill name: heavier Archivo weight, closer to how .about-headline commits to the display face rather than sharing weight with the meta text below it. */ .dash-skill { font-weight: var(--weight-black); text-transform: uppercase; letter-spacing: 0.01em; } /* Criteria chip labels (TR/CC/LR/GRA...) switch to mono, same register as the eyebrow; the numeric value stays Archivo/tabular so it still reads as data. */ .chip .label { font-family: var(--font-mono); font-size: var(--text-micro); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } /* Gauge fill: flat grey becomes an ink-to-crimson gradient, a restrained accent-color touch on a component that already exists rather than new decoration. Track stays --slate-200 so the "empty" portion is unchanged. */ .gauge-fill { background: linear-gradient(90deg, var(--ink-700), var(--crimson)); } /* In-progress draft note: a left accent bar instead of plain text, the same "flagged" signal .about-mark gives a phrase, without needing the SVG turbulence-filter machinery for one persistent status line. hub.js still writes this as a single textContent node — no script change needed. */ .hub-draft-note { border-left: 3px solid var(--amber-300); padding-left: 10px; } /* The 64px technical-grid texture that sat behind the whole dashboard is gone. Both mockups rule it out in the same words — "không dùng nền lưới" — and the reason is specific rather than stylistic: the grid is the LANDING page's device, where it has one job for twenty seconds. Behind a dashboard of bordered cards it competes with every one of their 1px rules, and this screen now carries four stat tiles, two Task cards and a panel of progress bars where it carried two cards before. #hubView keeps position: relative — the stat and panel blocks below are positioned against it. */ #hubView { position: relative; } /* ---------- the Writing dashboard (hub only) ---------- Everything below is scoped under #hubView because this file is shared by five pages (see the header): index.html's #taskChooser reuses .hub-head / .hub-grid / .hub-card verbatim, so an unscoped rule here would reach it. Scoping also means no new stylesheet — and therefore no new entry in main.py's cache-stamp tuple for "/", which test_mechanics.py checks. */ /* The greeting. Sized for the LONGEST string it ever holds — ", nhớ ngủ sớm nhen", not a bare name — so --text-2xl rather than the --text-display the band readout uses; at 2.6rem that sentence eats two lines on a laptop and three on a phone. max-width keeps it breaking at a sane measure instead of running the full container width. */ #hubView .hub-name { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-display); line-height: 1.15; letter-spacing: -0.01em; color: var(--navy); max-width: 20ch; margin: 4px 0 0; } /* The eyebrow is absent in the two late-night/early-morning windows (the greeting carries the name itself there), so the name must not depend on it for its top offset. */ #hubView #hubGreetLine.hidden { display: none; } /* "Nạp thêm", inline at the end of the credit line — underlined rather than button-shaped: it is a way out of a dead end, not the action this page is asking for. */ #hubView .hub-topup { color: var(--crimson); font-weight: var(--weight-strong); text-decoration: underline; } /* The in-progress draft, full width above the two Task cards. Amber left rail like .hub-draft-note above, on the whole strip: while this is on screen both Task cards are locked, so it is the only live thing in the middle of the page and has to read that way. */ #hubView #hubDraft { border: var(--border-hair) solid var(--line-crisp); /* The amber rail STAYS heavy, and it is the only thing here that does. With both Task cards locked behind it this strip is the only live control on the page; the rail is what says so, and it now carries that job alone instead of sharing it with a 2.5px frame. */ border-left: 4px solid var(--amber-300); border-radius: var(--radius-card); background: var(--surface-card); padding: 18px 22px; margin-bottom: 24px; } /* Recent lessons. Deliberately NOT a sticker card: no ink border, no offset shadow. Two of those already sit directly above it, and a third competing for the same weight would make the page read as three equal choices when only the Task cards are choices at all — this one is a rear-view mirror. */ #hubView .hub-recent { padding-top: 16px; } #hubView .hub-recent-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; } #hubView .hub-recent-all { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--navy); } #hubView .hub-recent-all:hover { color: var(--crimson); } /* One row per lesson: date, task, topic, band move. A