โฆ
) */ .reader-main #content > p { font-size: 15.5px; margin: 18px 0; } .reader-main #content > p:first-of-type em { color: var(--ink); font-style: italic; } /* section headers inside cards get a strong bottom rule */ .reader-main #content .card > h3:first-child { margin-top: 0; } .reader-main #content h3 { font-size: 19px; margin: 38px 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--line2); } .reader-main #content h4 { font-size: 15px; color: var(--ink); margin-top: 26px; } .reader-main #content p { font-size: 15.5px; line-height: 2; margin: 17px 0; } .reader-main #content li { font-size: 15.5px; line-height: 1.95; margin: 9px 0; } .reader-main #content ul, .reader-main #content ol { margin: 6px 0 6px 4px; } .reader-main #content .card { padding: 26px 28px; margin-bottom: 22px; } .reader-main #content a { color: var(--blue); } /* Force the lessons' hardcoded dark-theme inline text colors to readable ink on light paper. All lesson callout backgrounds are faint light tints, so none of these sit on a dark box. */ .reader-main #content [style*="c4ccdb"], .reader-main #content [style*="e8edf5"] { color: var(--body) !important; } .reader-main #content [style*="8a95ad"] { color: var(--dim) !important; } /* ============ data table ============ */ table.data { width: 100%; border-collapse: collapse; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r); overflow: hidden; margin: 14px 0; } table.data th { background: var(--ink); color: var(--paper); text-align: left; padding: 9px 12px; font-size: 12.5px; font-weight: 700; } table.data td { padding: 9px 12px; border-bottom: 2px solid var(--line2); font-size: 13.5px; color: var(--body); vertical-align: top; } table.data tr:last-child td { border-bottom: none; } table.data td strong { color: var(--ink); } /* ============ reusable component classes (for Phase F lessons) ============ */ /* ink objectives band */ .objectives { background: var(--ink); border-radius: var(--r); padding: 17px 19px; margin: 18px 0; color: #eceae2; } .objectives .lab { font-weight: 700; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #7ad48a; margin-bottom: 8px; } .objectives ul { list-style: none; display: grid; gap: 7px; } .objectives li { padding-left: 22px; position: relative; font-size: 14px; color: #eceae2; } .objectives li::before { content: ""; position: absolute; left: 0; top: 8px; width: 10px; height: 10px; background: #7ad48a; border-radius: 2px; } /* numbered section chip + rule */ .sec { display: flex; align-items: center; gap: 12px; margin: 30px 0 6px; } .sec .num { font-weight: 700; font-size: 14px; color: var(--paper); width: 36px; height: 36px; border-radius: var(--r); display: grid; place-items: center; flex-shrink: 0; background: var(--ink); } .sec h2, .sec h3 { font-size: 20px; border: none; padding: 0; margin: 0; } .rule { height: 2px; background: var(--ink); margin: 5px 0 4px; } /* at-a-glance stat strip */ .glance { display: grid; grid-auto-flow: column; gap: 12px; margin: 16px 0; } .glance .g { background: var(--card); border: 2px solid var(--ink); border-radius: var(--r); padding: 12px 14px; text-align: center; } .glance .g b { font-size: 22px; color: var(--ink); display: block; } .glance .g s { font-size: 11px; color: var(--dim); text-decoration: none; } /* comparison cards */ .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin: 16px 0; } .compare .c { background: var(--card); border: 2px solid var(--ink); border-radius: var(--r); padding: 14px 16px; } .compare .c h4 { font-size: 14px; margin-bottom: 6px; } /* timeline */ .timeline { position: relative; margin: 22px 0 4px; } .timeline .bar { position: absolute; left: 22px; right: 22px; top: 19px; height: 8px; background: var(--ink); border-radius: 4px; } .timeline .row { position: relative; display: flex; justify-content: space-between; } .timeline .s { width: 23%; text-align: center; } .timeline .s .d { width: 44px; height: 44px; margin: 0 auto 6px; border-radius: var(--r); display: grid; place-items: center; color: var(--paper); font-weight: 700; font-size: 11.5px; background: var(--green); border: 2px solid var(--ink); } .timeline .s .w { font-size: 11.5px; font-weight: 700; color: var(--ink); } .timeline .s .x { font-size: 10px; color: var(--dim); } /* decision-flow */ .flow { display: grid; gap: 8px; margin: 16px 0; } .flow .step { background: var(--card); border: 2px solid var(--ink); border-radius: var(--r); padding: 11px 14px; font-size: 13.5px; position: relative; } .flow .step::after { content: "\2193"; display: block; text-align: center; color: var(--dim); font-weight: 700; margin: 2px 0 -4px; } .flow .step:last-child::after { content: ""; } /* callouts: key / warn / practice / regulation */ .call { border-radius: var(--r); padding: 12px 14px 12px 42px; margin: 15px 0; position: relative; font-size: 14px; color: var(--body); background: var(--card); border: 2px solid var(--ink); border-left-width: 7px; } .call .h { font-weight: 700; font-size: 10.5px; letter-spacing: 0.4px; text-transform: uppercase; display: block; margin-bottom: 2px; } .call::before { position: absolute; left: 12px; top: 12px; font-size: 15px; } .call.key { border-left-color: var(--blue); } .call.key .h { color: var(--blue); } .call.key::before { content: "\1F4A1"; } .call.practice { border-left-color: var(--green); } .call.practice .h { color: var(--green); } .call.practice::before { content: "\2705"; } .call.warn { border-left-color: var(--amber); } .call.warn .h { color: var(--amber); } .call.warn::before { content: "\26A0\FE0F"; } .call.reg { border-left-color: var(--purple); } .call.reg .h { color: var(--purple); } .call.reg code { color: var(--purple); font-weight: 700; } .call.reg::before { content: "\00A7"; color: var(--purple); font-weight: 700; font-size: 17px; } /* inline-SVG diagram blocks (Phase F flagship lessons) โ self-contained, captioned figures inserted directly into a handful of lesson fragments */ .reader-main #content figure.diagram, figure.diagram { margin: 22px 0; padding: 16px 16px 6px; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r); overflow-x: auto; } figure.diagram svg { display: block; width: 100%; height: auto; max-width: 100%; } figure.diagram figcaption { margin: 10px 0 6px; font-size: 12px; color: var(--dim); text-align: center; line-height: 1.5; } /* pull-quote */ .pullquote { border-left: 7px solid var(--ink); padding: 6px 0 6px 18px; margin: 20px 0; font-size: 18px; color: var(--ink); font-weight: 700; line-height: 1.5; } /* key-takeaways */ .takeaways { background: var(--card); border: 2px solid var(--ink); border-radius: var(--r); padding: 16px 18px; margin: 20px 0; } .takeaways h3 { border: none; padding: 0; } .takeaways ul { list-style: none; display: grid; gap: 8px; margin-top: 8px; } .takeaways li { padding-left: 24px; position: relative; font-size: 14px; } .takeaways li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--green); font-weight: 700; } /* ============ case study scenario (JS renderCaseCard) ============ */ .case { background: var(--card); border: 2px solid var(--ink); border-top-width: 6px; border-top-color: var(--purple); border-radius: var(--r); padding: 16px 18px; margin: 22px 0; } .case-h { font-family: var(--f); font-size: 10.5px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--purple); font-weight: 700; } .case > p { font-size: 14px; margin: 6px 0 11px; color: var(--body); } .opt { display: block; width: 100%; text-align: left; font-family: var(--f); background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r); padding: 10px 13px; margin-bottom: 7px; font-size: 13.5px; font-weight: 400; color: var(--body); cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; } .opt:hover { border-color: var(--purple); box-shadow: 3px 3px 0 var(--purple); transform: translate(-1px, -1px); color: var(--ink); } /* preserved interaction classes toggled by JS */ .opt.right { border-color: var(--green); background: #eaf3ec; color: var(--ink); box-shadow: none; transform: none; } .opt.wrong { border-color: var(--red); background: #faeaea; color: var(--ink); box-shadow: none; transform: none; } .opt:disabled, .opt[disabled] { cursor: not-allowed; } .case-fb { margin-top: 10px; padding: 10px 14px; border-radius: var(--r); font-size: 13.5px; font-weight: 700; } .case-fb.ok { background: #eaf3ec; border: 2px solid var(--green); color: #1a5028; } .case-fb.no { background: #faeaea; border: 2px solid var(--red); color: #7a1616; } /* ============ track / module list (rail) ============ */ .track-list { margin-top: 8px; } .modrow { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12.5px; font-weight: 700; color: var(--body); } .modrow .dot { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; background: var(--card); border: 2px solid var(--line2); } .modrow .dot.cur { background: var(--amber); border-color: var(--ink); } .modrow .dot.done { background: var(--green); border-color: var(--ink); } .modrow .dot.lock { background: var(--card); border-color: var(--line2); } /* ============ loading skeleton ============ */ .loading { color: transparent; border-radius: var(--r); background: linear-gradient(90deg, #ecebe6 25%, #f5f4f0 37%, #ecebe6 63%); background-size: 400% 100%; animation: loading-pulse 1.4s ease infinite; min-height: 60px; } @keyframes loading-pulse { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* ============ preview banner (SME-gate) ============ */ .preview-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--purple); color: #fff; text-align: center; font-family: var(--f); font-size: 13px; font-weight: 700; padding: 8px 16px; border-bottom: 2px solid var(--ink); } /* ============ legacy v1 markup compatibility ============ */ .progress-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; background: var(--card); border-radius: var(--r); margin-bottom: 8px; border: 2px solid var(--ink); } .progress-row.locked { opacity: 0.55; } .error { color: var(--red); font-weight: 700; } .ok { color: var(--green); font-weight: 700; } /* ========================================================= Course model (Phase B) โ selection screen + single-course home Markup + classes mirror design/redesign-prototype.html (#choose and #home). Light palette vars reused as-is. ========================================================= */ .crumb { font-size: 12.5px; color: var(--dim); margin-bottom: 8px; } .crumb a, .crumb button { color: var(--blue); cursor: pointer; text-decoration: none; } .crumb a:hover, .crumb button:hover { text-decoration: underline; } .crumb button { font: inherit; font-size: 12.5px; background: none; border: none; padding: 0; } /* ---- per-track accent (identity, not status) ---- One accent per track, drawn from the legend palette. Set on the course home section and inherited by everything inside it, so the header, the progress bar and the document cards all carry the same colour. --accent-on-ink is the tint that stays legible on the ink header. */ .acc-g { --accent: var(--green); --accent-tint: #eaf3ec; --accent-on-ink: #7ad48a; } .acc-a { --accent: var(--amber); --accent-tint: #f6efdd; --accent-on-ink: #e8b93a; } .acc-r { --accent: var(--red); --accent-tint: #fae9e9; --accent-on-ink: #f08a8a; } .acc-b { --accent: var(--blue); --accent-tint: #e6eefa; --accent-on-ink: #85b3f2; } .acc-p { --accent: var(--purple); --accent-tint: #ece7fa; --accent-on-ink: #b6a0f5; } /* ---- course selection (#choose) ---- */ .head { text-align: center; max-width: 640px; margin: 0 auto 8px; } .kick { font-weight: 700; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--blue); } .head h1 { font-size: 32px; margin: 8px 0 6px; } .head p { font-size: 14.5px; } .foundation { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 20px auto 26px; max-width: 560px; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r); padding: 11px 15px; } .foundation .bx { width: 32px; height: 32px; flex-shrink: 0; background: var(--ink); border-radius: var(--r); display: grid; place-items: center; } .foundation .t { font-weight: 700; color: var(--ink); font-size: 13px; } .foundation .s { font-size: 11.5px; color: var(--dim); } .cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .course { background: var(--card); border: 2px solid var(--ink); border-radius: var(--r); overflow: hidden; cursor: pointer; transition: transform .14s, box-shadow .14s; display: flex; flex-direction: column; text-align: left; text-decoration: none; font: inherit; color: var(--body); width: 100%; padding: 0; } .course:hover { box-shadow: 7px 7px 0 var(--ink); transform: translate(-3px, -3px); } .art { height: 146px; border-bottom: 2px solid var(--ink); display: grid; place-items: center; } .art.g { background: #eaf3ec; } .art.a { background: #f6efdd; } .art.b { background: #e6eefa; } .art.p { background: #ece7fa; } .art svg { width: 126px; height: 126px; } .cbody { padding: 15px 17px 16px; display: flex; flex-direction: column; flex: 1; } .ct { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; } .ct.g { color: var(--green); } .ct.a { color: var(--amber); } .ct.b { color: var(--blue); } .ct.p { color: var(--purple); } .course h3 { font-size: 18px; margin: 3px 0 5px; } .course p { font-size: 12.5px; color: var(--dim); margin-bottom: 11px; flex: 1; } .crow { display: flex; align-items: center; justify-content: space-between; border-top: 2px solid var(--line2); padding-top: 11px; } .crow .m { font-size: 12px; color: var(--dim); } .crow .m b { color: var(--ink); } .start { font-weight: 700; font-size: 12.5px; color: var(--paper); background: var(--ink); border: 2px solid var(--ink); border-radius: var(--r); padding: 7px 12px; } .course:hover .start { background: var(--blue); border-color: var(--blue); } /* ---- single-course home (#home) ---- */ .homehead { display: flex; align-items: center; gap: 16px; background: var(--ink); border-left: 7px solid var(--accent, var(--paper)); border-radius: var(--r); padding: 18px 20px; margin-bottom: 9px; } .homehead .emb { width: 70px; height: 70px; background: var(--accent-tint, var(--paper)); border: 2px solid var(--accent-tint, var(--paper)); border-radius: var(--r); display: grid; place-items: center; flex-shrink: 0; } .homehead .emb svg { width: 56px; height: 56px; } .homehead h1 { color: var(--paper); font-size: 23px; } .homehead .sub { color: #b9c2b1; font-size: 12.5px; } .homehead .prog { margin-left: auto; text-align: right; flex-shrink: 0; } .homehead .prog b { color: var(--accent-on-ink, #7ad48a); font-size: 26px; display: block; line-height: 1.15; } .homehead .prog s { color: #c3c9d0; font-size: 11px; display: block; } /* ---- course progress bar (#coursebar) ---- The one-glance answer to "how much is left?". The segment meter is a picture of the same numbers the text above it states, so colour is never the only carrier. */ .coursebar { background: var(--card); border: 2px solid var(--ink); border-left: 7px solid var(--accent, var(--ink)); border-radius: var(--r); padding: 13px 15px 14px; } .cb-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 3px 14px; } .cb-count { font-size: 13.5px; font-weight: 700; color: var(--ink); } .cb-count s { font-weight: 400; color: var(--dim); } .cb-split { font-size: 12px; color: var(--dim); } .meter { display: flex; gap: 3px; margin-top: 10px; } .meter i { flex: 1; min-width: 0; height: 14px; border: 2px solid var(--ink); border-radius: 2px; background: var(--card); } /* Fill level, not just hue, separates the three states: solid / part-filled / empty stays readable without colour vision. */ .meter i.done { background: var(--green); } .meter i.cur { background: var(--amber); box-shadow: inset 0 -5px 0 var(--card); } .meter i.lock { background: var(--paper); border-color: var(--line2); } .cb-key { margin-top: 8px; font-size: 11px; color: var(--dim); } .cb-next { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--line2); text-decoration: none; color: var(--body); } .cb-next .k { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--dim); } .cb-next .t { font-size: 14px; font-weight: 700; color: var(--ink); flex: 1; } .cb-next .go { font-weight: 700; font-size: 12.5px; color: var(--paper); background: var(--ink); border: 2px solid var(--ink); border-radius: var(--r); padding: 6px 12px; } a.cb-next:hover .go { background: var(--blue); border-color: var(--blue); } .cb-next.finished .t { color: var(--green); } .secttl { font-weight: 700; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--dim); margin: 22px 0 10px; } .dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; } .doc { position: relative; background: var(--card); border: 2px solid var(--ink); border-radius: var(--r); padding: 15px 15px 13px 20px; cursor: pointer; transition: transform .12s, box-shadow .12s; overflow: hidden; display: block; text-decoration: none; color: var(--body); } /* the track accent, repeated as a spine on every document card */ .doc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--accent, var(--ink)); } .doc:hover { box-shadow: 5px 5px 0 var(--ink); transform: translate(-2px, -2px); } .doc.cur { border-color: var(--amber); } .doc .corner { position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 22px 22px 0; border-color: transparent var(--paper) transparent transparent; } .doc .corner::after { content: ""; position: absolute; top: 0; right: -22px; width: 22px; height: 22px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); } /* padding-right keeps the status pill clear of the folded corner */ .rowtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; padding-right: 18px; } .no { font-weight: 700; font-size: 11.5px; color: var(--paper); background: var(--ink); border-radius: var(--r); padding: 2px 9px; } .st { font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; border: 2px solid var(--ink); border-radius: var(--r); padding: 2px 7px; white-space: nowrap; } .st.done { background: var(--green); color: #fff; border-color: var(--green); } .st.cur { background: var(--amber); color: var(--ink); border-color: var(--amber); } .st.lock { background: var(--card); color: var(--dim); border-color: var(--line2); } .doc h4 { font-size: 14px; margin-bottom: 3px; line-height: 1.2; } .doc .dmeta { font-size: 11px; color: var(--dim); border-top: 2px solid var(--line2); padding-top: 8px; margin-top: 8px; } /* Locked cards are muted with a flat paper fill rather than opacity: at .55 the --dim label text fell to ~1.9:1 against the page. On paper it is 4.8:1, which clears WCAG AA. */ .doc.locked { background: var(--paper); border-color: var(--line2); cursor: default; } .doc.locked::before { background: var(--line2); } .doc.locked .no { background: #57534d; } .doc.locked .corner { border-right-color: var(--card); } .doc.locked .corner::after { border-color: var(--line2); } .doc.locked:hover { box-shadow: none; transform: none; } /* ---- keyboard focus (dashboard surfaces) ---- */ .course:focus-visible, .doc:focus-visible, .cb-next:focus-visible, .crumb button:focus-visible, #home .btn:focus-visible, #choose .btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; } /* ============ responsive ============ */ @media (max-width: 820px) { .reader { grid-template-columns: 1fr; } .reader-main { max-width: none; order: 1; } .reader-rail { order: 2; } .reader-rail .rail-sticky { position: static; } .compare, .glance { grid-template-columns: 1fr; grid-auto-flow: row; } .cgrid, .dgrid { grid-template-columns: 1fr; } /* the progress read-out drops under the title instead of overflowing */ .homehead { flex-wrap: wrap; } .homehead .prog { margin-left: 0; width: 100%; text-align: left; border-top: 2px solid #3d3d3d; padding-top: 9px; } .homehead .prog b { display: inline; margin-right: 9px; } .homehead .prog s { display: inline; } } /* ============ reduced motion ============ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .course, .doc { transition: none; } .course:hover, .doc:hover { transform: none; } } /* redesign: