/* * The public DMT Insights library. * * Plain CSS on purpose, and served straight from public/ rather than compiled. * Both servers deploy with `git reset --hard FETCH_HEAD` and nothing rebuilds * assets, so a Tailwind class this project has never rendered before compiles * to nothing, lands in the HTML and silently does nothing. Dev proves it: the * checkout moved five times on 2026-09-02 while public/build/assets was still * dated 2026-09-01. A page with this much of its own visual identity cannot be * built on classes that may or may not exist, so it brings its own file. * * Every selector is scoped under [data-dmt-insights]. The shell around it owns * the top bar and the footer, and one unscoped rule here would reach them. That * has already happened once on this site: a marketing page carried * `.hidden { display: none !important }` and deleted the words Math Success * from the portal top bar. * * Palette, type and the contrast notes are Jonathan's, from the build book. * The two additions are marked where they appear. */ [data-dmt-insights] { /* Light. The book's nine tokens. */ --ground: #F8F8E6; --surface: #FFFEF6; --ink: #25304D; --ink-soft: #5B657C; --rule: #DFDDC6; /* Teal twice on purpose. #00A99D on cream is 2.73:1 and fails AA, so it rules and marks only, and #00776F at 5.06:1 carries every word. Do not collapse these back into one token. */ --teal: #00A99D; --teal-text: #00776F; /* Amber twice for the same reason, which the book did not do. Its #C9781F measures 3.16:1 on cream, which is large text only, and the one thing it is used for is a small uppercase "In development". #A85D0E is 4.62:1 and is the same colour family. */ --amber: #C9781F; --amber-text: #A85D0E; --shadow: 0 1px 2px rgba(37, 48, 77, .06), 0 8px 24px rgba(37, 48, 77, .05); --shadow-lift: 0 2px 4px rgba(37, 48, 77, .08), 0 14px 32px rgba(37, 48, 77, .09); --sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --label: 'Barlow Condensed', 'Archivo Narrow', ui-sans-serif, system-ui, sans-serif; --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; color: var(--ink); background: var(--ground); font-family: var(--serif); font-size: 16px; line-height: 1.6; } /* * The portal toggles .dark on from localStorage 'color-theme', and its * own script already sets that class from prefers-color-scheme when the visitor * has never chosen. So keying off the class alone covers the system default and * lets an explicit choice win in both directions. A prefers-color-scheme block * here as well would fight the toggle. * * The ground deepens the brand navy rather than going to black, so the identity * survives. Teal and amber move LIGHTER here, the opposite direction to the * light theme, because the ground moved the other way. */ html.dark [data-dmt-insights] { --ground: #1B2338; --surface: #232C45; --ink: #EEEDDD; --ink-soft: #A8B0C4; --rule: #38415C; --teal: #00A99D; --teal-text: #4FD1C5; --amber: #E8A25A; --amber-text: #E8A25A; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .22); --shadow-lift: 0 2px 4px rgba(0, 0, 0, .35), 0 14px 32px rgba(0, 0, 0, .3); } /* 72rem is 1152px, the same reading shell as every other public page here. */ [data-dmt-insights] .dmti-shell { max-width: 72rem; margin: 0 auto; padding: 0 1rem; } @media (min-width: 640px) { [data-dmt-insights] .dmti-shell { padding: 0 1.5rem; } } @media (min-width: 1024px) { [data-dmt-insights] .dmti-shell { padding: 0 2rem; } } [data-dmt-insights] .dmti-section { padding: 3rem 0; border-top: 1px solid var(--rule); } [data-dmt-insights] .dmti-section:first-of-type { border-top: 0; } [data-dmt-insights] .dmti-eyebrow { font-family: var(--label); font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-text); margin: 0 0 .5rem; } [data-dmt-insights] h2.dmti-heading { font-family: var(--sans); font-size: 1.5rem; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; color: var(--ink); margin: 0 0 .375rem; } [data-dmt-insights] .dmti-lede { color: var(--ink-soft); max-width: 34rem; margin: 0 0 1.75rem; } /* * The masthead holds cream in both themes. The lockup is a black serif wordmark * on a transparent ground, so it disappears on a dark field. This is deliberate * and it must not inherit the theme, which is why the colours below are literal * rather than tokens. */ [data-dmt-insights] .dmti-masthead { background: #F8F8E6; border-bottom: 2px solid #00A99D; padding: 2.5rem 0 2.25rem; } [data-dmt-insights] .dmti-masthead .dmti-eyebrow { color: #00776F; } [data-dmt-insights] .dmti-masthead h1 { font-family: var(--sans); font-size: 2rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; color: #25304D; margin: 0; max-width: 24ch; } [data-dmt-insights] .dmti-tagline { color: #5B657C; margin: .75rem 0 0; max-width: 46ch; } /* It wrapped into two crowded lines beside the headline, which says it better. */ @media (max-width: 699px) { [data-dmt-insights] .dmti-tagline { display: none; } } @media (min-width: 768px) { [data-dmt-insights] .dmti-masthead h1 { font-size: 2.5rem; } } /* The three pathways. This is the whole navigation model. */ [data-dmt-insights] .dmti-pathways { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 860px) { [data-dmt-insights] .dmti-pathways { grid-template-columns: repeat(3, 1fr); } } [data-dmt-insights] .dmti-pathway { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--teal); border-radius: 10px; padding: 1.5rem; box-shadow: var(--shadow); text-decoration: none; color: inherit; min-height: 44px; transition: transform .18s ease-out, box-shadow .18s ease-out; } [data-dmt-insights] a.dmti-pathway:hover, [data-dmt-insights] a.dmti-pathway:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-lift); } [data-dmt-insights] .dmti-pathway h3 { font-family: var(--sans); font-size: 1.1875rem; font-weight: 600; color: var(--ink); margin: .25rem 0 .5rem; } [data-dmt-insights] .dmti-pathway p { color: var(--ink-soft); font-size: .9375rem; margin: 0 0 1.25rem; } [data-dmt-insights] .dmti-pathway .dmti-count { font-family: var(--label); font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-text); margin-top: auto; display: flex; align-items: center; gap: .375rem; } [data-dmt-insights] .dmti-pathway svg { flex: none; } /* The topic tiles. One component, used here and on the domain index. */ [data-dmt-insights] .dmti-tiles { display: grid; grid-template-columns: 1fr; gap: .75rem; } @media (min-width: 620px) { [data-dmt-insights] .dmti-tiles { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { [data-dmt-insights] .dmti-tiles { grid-template-columns: repeat(3, 1fr); } } [data-dmt-insights] .dmti-tile { display: block; background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--teal); border-radius: 8px; padding: 1.125rem 1.25rem; text-decoration: none; color: inherit; transition: transform .18s ease-out, box-shadow .18s ease-out; } [data-dmt-insights] a.dmti-tile:hover, [data-dmt-insights] a.dmti-tile:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow); } [data-dmt-insights] .dmti-tile h3 { font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--ink); margin: 0 0 .375rem; } [data-dmt-insights] .dmti-tile p { color: var(--ink-soft); font-size: .875rem; line-height: 1.5; margin: 0 0 .875rem; } [data-dmt-insights] .dmti-tile .dmti-count { font-family: var(--label); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-text); } /* * A topic with nothing in it stays in the list and says so. A tile that * disappears reads as an oversight rather than as a plan. */ [data-dmt-insights] .dmti-tile--empty { border-left-color: var(--amber); background: transparent; } [data-dmt-insights] .dmti-tile--empty .dmti-count { color: var(--amber-text); } /* The Insight cards. */ [data-dmt-insights] .dmti-cards { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 640px) { [data-dmt-insights] .dmti-cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { [data-dmt-insights] .dmti-cards { grid-template-columns: repeat(4, 1fr); } } [data-dmt-insights] .dmti-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow); transition: transform .18s ease-out, box-shadow .18s ease-out; } [data-dmt-insights] a.dmti-card:hover, [data-dmt-insights] a.dmti-card:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-lift); } [data-dmt-insights] .dmti-card-thumb { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--rule); border-bottom: 1px solid var(--rule); } [data-dmt-insights] .dmti-card-body { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.125rem 1.125rem; } [data-dmt-insights] .dmti-card h3 { font-family: var(--sans); font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--ink); margin: 0 0 .5rem; } [data-dmt-insights] .dmti-card p { color: var(--ink-soft); font-size: .875rem; line-height: 1.5; margin: 0 0 1rem; } [data-dmt-insights] .dmti-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .625rem; } /* The number is a label, not a position. The sequence has real gaps. */ [data-dmt-insights] .dmti-chip { font-family: var(--label); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1; padding: .3125rem .5rem; border-radius: 4px; border: 1px solid var(--rule); color: var(--ink-soft); white-space: nowrap; } [data-dmt-insights] .dmti-chip--number { border-color: var(--teal); color: var(--teal-text); } [data-dmt-insights] .dmti-chip--mlp { border-color: var(--ink); color: var(--ink); } /* * The asset strip, in the book's fixed order: Insight, Video, Companion, * Newsletter. Centrality to the work, not file type. A missing item keeps its * slot so the strips stay level across a row of cards. */ [data-dmt-insights] .dmti-assets { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: auto; padding-top: .875rem; border-top: 1px solid var(--rule); } [data-dmt-insights] .dmti-asset { display: inline-flex; align-items: center; gap: .3125rem; font-family: var(--label); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1; padding: .375rem .5rem; border-radius: 4px; background: rgba(0, 169, 157, .1); color: var(--teal-text); } [data-dmt-insights] .dmti-asset svg { flex: none; } /* The gated one. Outlined rather than filled, and it carries an arrow. */ [data-dmt-insights] .dmti-asset--gated { background: transparent; border: 1px dashed var(--teal); color: var(--teal-text); } /* Absent rather than gated, so it reads as nothing rather than as locked. */ [data-dmt-insights] .dmti-asset--absent { background: transparent; border: 1px dashed var(--rule); color: var(--ink-soft); } /* An empty section explains itself rather than leaving a gap. */ [data-dmt-insights] .dmti-empty { background: var(--surface); border: 1px dashed var(--rule); border-radius: 8px; padding: 1.5rem; color: var(--ink-soft); font-size: .9375rem; } [data-dmt-insights] .dmti-empty strong { display: block; font-family: var(--sans); font-weight: 600; color: var(--ink); margin-bottom: .25rem; } [data-dmt-insights] a:focus-visible, [data-dmt-insights] button:focus-visible { outline: 3px solid var(--teal-text); outline-offset: 2px; border-radius: 4px; } [data-dmt-insights] .dmti-skip { position: absolute; left: -9999px; } [data-dmt-insights] .dmti-skip:focus { position: static; display: inline-block; margin: .5rem 0; } @media (prefers-reduced-motion: reduce) { [data-dmt-insights] * { transition-duration: .01ms !important; animation-duration: .01ms !important; } [data-dmt-insights] a.dmti-card:hover, [data-dmt-insights] a.dmti-tile:hover, [data-dmt-insights] a.dmti-pathway:hover { transform: none; } } /* The breadcrumb names the topic, not the tier. */ [data-dmt-insights] .dmti-crumb { display: flex; align-items: center; gap: .5rem; font-family: var(--label); font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #5B657C; margin-bottom: .75rem; } [data-dmt-insights] .dmti-crumb a { color: #00776F; text-decoration: none; } [data-dmt-insights] .dmti-crumb a:hover { text-decoration: underline; } [data-dmt-insights] .dmti-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; } [data-dmt-insights] .dmti-chips { display: flex; flex-wrap: wrap; gap: .5rem; } /* 44px tall so it is a real touch target on a phone. */ [data-dmt-insights] .dmti-filter { display: inline-flex; align-items: center; gap: .4375rem; min-height: 44px; padding: 0 .875rem; font-family: var(--label); font-size: .875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 999px; cursor: pointer; transition: background .15s ease-out, border-color .15s ease-out, color .15s ease-out; } [data-dmt-insights] .dmti-filter:hover { border-color: var(--teal); } /* * The selected chip carries its own colour AND its own weight, and it reports * aria-pressed. Colour alone would leave a colour blind visitor with no way to * tell which filter is on. */ [data-dmt-insights] .dmti-filter--on { background: var(--teal-text); border-color: var(--teal-text); color: #FFFEF6; } html.dark [data-dmt-insights] .dmti-filter--on { color: #1B2338; } [data-dmt-insights] .dmti-filter-count { font-size: .8125rem; opacity: .75; } [data-dmt-insights] .dmti-search input { min-height: 44px; width: 100%; min-width: 15rem; padding: 0 .875rem; font-family: var(--serif); font-size: 1rem; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; } [data-dmt-insights] .dmti-search input::placeholder { color: var(--ink-soft); } [data-dmt-insights] .dmti-search input:focus { outline: 3px solid var(--teal-text); outline-offset: 2px; border-color: var(--teal); } /* * Math Learning Profiles. A different card and a different banner, because it * is a different thing: this is the research under the diagnostic. */ [data-dmt-insights] .dmti-banner { background: #25304D; color: #EEEDDD; border-radius: 12px; padding: 1.75rem; margin-bottom: 2rem; } [data-dmt-insights] .dmti-banner h2 { font-family: var(--sans); font-size: 1.375rem; font-weight: 600; color: #FFFEF6; margin: 0 0 .5rem; } [data-dmt-insights] .dmti-banner p { color: #C3C9D8; margin: 0; max-width: 46ch; } /* The arrow travels with the chip that follows it, so a wrapped line never ends on a dangling arrow. */ [data-dmt-insights] .dmti-steps { display: flex; flex-wrap: wrap; align-items: stretch; gap: .5rem; margin-top: 1.25rem; } [data-dmt-insights] .dmti-step { display: inline-flex; align-items: center; gap: .5rem; } [data-dmt-insights] .dmti-step > svg { color: #5B657C; margin-right: .125rem; } [data-dmt-insights] .dmti-step-chip { display: inline-flex; flex-direction: column; gap: .125rem; padding: .5rem .75rem; min-height: 44px; justify-content: center; background: rgba(255, 254, 246, .08); border: 1px solid rgba(255, 254, 246, .22); border-radius: 8px; text-decoration: none; color: #EEEDDD; } [data-dmt-insights] a.dmti-step-chip:hover, [data-dmt-insights] a.dmti-step-chip:focus-visible { border-color: #00A99D; } [data-dmt-insights] .dmti-step-chip b { font-family: var(--label); font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #7FD9D2; } [data-dmt-insights] .dmti-step-chip span { font-family: var(--sans); font-size: .875rem; font-weight: 600; line-height: 1.2; } [data-dmt-insights] .dmti-step-chip em { font-family: var(--label); font-size: .6875rem; font-style: normal; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #E8A25A; } /* The MLP card is a distinct component, not the standard card with a badge. */ [data-dmt-insights] .dmti-mlp-card { display: block; background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid #25304D; border-radius: 8px; padding: 1.125rem 1.25rem; text-decoration: none; color: inherit; transition: transform .18s ease-out, box-shadow .18s ease-out; } html.dark [data-dmt-insights] .dmti-mlp-card { border-left-color: #7FD9D2; } [data-dmt-insights] a.dmti-mlp-card:hover, [data-dmt-insights] a.dmti-mlp-card:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow); } [data-dmt-insights] .dmti-mlp-card h3 { font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--ink); margin: .5rem 0 .375rem; } /* "Why this matters" sits where the key idea would be on a standard card. */ [data-dmt-insights] .dmti-why { color: var(--ink-soft); font-size: .875rem; line-height: 1.5; margin: 0 0 .75rem; } [data-dmt-insights] .dmti-profile-link { font-family: var(--label); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-text); } @media (prefers-reduced-motion: reduce) { [data-dmt-insights] a.dmti-mlp-card:hover { transform: none; } }