, which is already a size container. */ /* The lilac field the cards stand on is the page's own: home-profile-strip.css paints with --chrome-canvas for both halves of Home, so the map has no background to declare. Painting one here would only be a centred 1120px band of the same colour — invisible while the body agrees with it, and a stripe if the body ever stopped. */ /* The gutter is Home's, not the map's: home-profile-strip.css states it for both halves so the cards' edges and the strip's agree. Both files load on Home and nowhere else. */ .home-task-map { box-sizing: border-box; width: min(100%, 1120px); margin: 0 auto; padding: 26px var(--home-gutter) 40px; } /* Two per column, in the order of the test: Speaking and Writing — what a learner produces — down the first, Reading and Listening down the second. Each column is its own stack rather than a track of one shared grid, so a card is as tall as its own Tasks: Writing has two of them and must not be stretched to the height of Speaking's eight. */ .home-task-map-groups { display: grid; align-items: start; gap: clamp(14px, 2.1cqi, 22px); grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; } .home-task-map-column { display: grid; align-content: start; gap: clamp(14px, 2.1cqi, 22px); min-width: 0; } /* A Skill is a card: white on the tint, the chrome's card corner, and the first of its three steps of depth — the same recipe a Task Surface is drawn with, which is the whole point of the section. */ .home-task-map-group { box-sizing: border-box; min-width: 0; border: 1px solid var(--border); border-radius: var(--chrome-radius-card); background: var(--surface); box-shadow: var(--chrome-shadow-card); } /* Speaking wears the brand purple, so it declares no accent of its own and the chrome fallbacks below stand in for it. */ .home-task-map-group[data-skill="speaking"] { --home-map-skill: var(--skill-dot-speaking); --home-map-skill-ink: var(--skill-label-speaking); } .home-task-map-group[data-skill="writing"] { --home-map-skill: var(--skill-dot-writing); --home-map-skill-ink: var(--skill-label-writing); --home-map-accent: var(--skill-accent-writing); --home-map-accent-deep: var(--skill-accent-deep-writing); --home-map-accent-tint: var(--skill-accent-tint-writing); } .home-task-map-group[data-skill="reading"] { --home-map-skill: var(--skill-dot-reading); --home-map-skill-ink: var(--skill-label-reading); --home-map-accent: var(--skill-accent-reading); --home-map-accent-deep: var(--skill-accent-deep-reading); --home-map-accent-tint: var(--skill-accent-tint-reading); } .home-task-map-group[data-skill="listening"] { --home-map-skill: var(--skill-dot-listening); --home-map-skill-ink: var(--skill-label-listening); --home-map-accent: var(--skill-accent-listening); --home-map-accent-deep: var(--skill-accent-deep-listening); --home-map-accent-tint: var(--skill-accent-tint-listening); } /* The card's header: the Skill's name at the leading edge, how many Tasks it holds at the trailing one, and a hairline in the Skill's colour under both. The rule is inset to the card's own padding rather than run to its edges — the accent is spent on a line the width of the content, never on a tinted band across the card. */ .home-task-map-group-head { display: flex; align-items: baseline; padding: 14px 0 11px; border-bottom: 1px solid var(--home-map-skill, var(--chrome-line-muted)); gap: 10px; margin-inline: clamp(14px, 1.8cqi, 18px); } .home-task-map-group-name { display: flex; min-width: 0; align-items: center; margin: 0; color: var(--home-map-skill-ink, var(--chrome-ink)); font-size: 12.5px; font-weight: 800; gap: 8px; letter-spacing: 0.09em; text-transform: uppercase; } .home-task-map-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--home-map-skill, var(--chrome-line-muted)); } .home-task-map-group-count { margin-left: auto; color: var(--chrome-ink-muted); font-size: 11.5px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; } .home-task-map-tasks { padding: 6px 0 9px; margin: 0; list-style: none; } /* A Task is a full-width row of the card, not a chip: name at the leading edge, bank size at the trailing one, so a column reads as one list of Tasks with one column of numbers beside it. */ .home-task-map-task { display: flex; align-items: center; padding: 9px clamp(14px, 1.8cqi, 18px); color: var(--chrome-ink-soft); font-size: 15px; font-weight: 600; gap: 12px; text-decoration: none; } .home-task-map-tasks li + li .home-task-map-task { border-top: 1px solid var(--chrome-line-soft); } /* A row warms to its own Skill on hover — the same ramp the Task's page wears once opened — with the brand purple standing in for Speaking. The wash runs the full width of the card, which is what makes the row a row. */ .home-task-map-task:hover { background: var(--home-map-accent-tint, var(--chrome-accent-tint)); color: var(--home-map-accent-deep, var(--chrome-accent-deep)); } .home-task-map-task:focus-visible { outline: 2px solid var(--home-map-accent, var(--chrome-accent)); outline-offset: -2px; } .home-task-map-task-name { min-width: 0; } .home-task-map-task-count { flex: none; margin-left: auto; padding: 2px 8px; border-radius: var(--pill); background: var(--chrome-canvas); color: var(--chrome-ink-muted); font-size: 12px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; } /* One tier, at the width the two columns stop fitting: they become one, and the pairing survives as reading order — Speaking, Writing, Reading, Listening, which is the order of the test anyway. The measured width was a few pixels under this; it is stated as 768 because that is the breakpoint the STYLE_GUIDE contracts for and a novel one buys nothing. */ @media (max-width: 768px) { .home-task-map-groups { grid-auto-flow: row; } } @media (max-width: 520px) { .home-task-map { padding-inline: 18px; } }