/* ============================================================ UWE FS-AI Interactive Course — "clean technical docs" Distinctive but calm: Fraunces serif headings, IBM Plex body/mono, warm paper palette, cone blue + yellow accents used sparingly. ============================================================ */ :root { --paper: #f7f5ef; --paper-2: #fffdf8; --ink: #1b1d21; --ink-soft: #4c5158; --ink-faint: #8a8f97; --rule: #e6e0d3; --rule-soft: #efebe1; --blue: #1e49c7; /* cone blue (left) */ --blue-soft: #eaeffb; --yellow: #e8a400; /* cone yellow (right) */ --yellow-soft:#fdf6e3; --green: #1f9d57; --red: #d6453d; /* semantic surfaces (themeable; replace former hardcoded literals) */ --surface: #ffffff; /* solid card/button fills, image bg */ --code-bg: #fbfaf6; /* code blocks, sim output */ --sidebar-1: #fdfbf5; /* sidebar gradient top */ --sidebar-2: #f4f1e8; /* sidebar gradient bottom */ --widget-1: #fffefb; /* widget card gradient top */ --widget-2: #faf8f1; /* widget card gradient bottom */ --topbar-bg: rgba(247,245,239,.86); --inline-code-bg: #f0ede4; --blue-700: #163aa6; /* button hover */ --blue-grad2: #4f74e0; /* progress/blue gradient end */ --code-note-border: #f0e2bb; --btn-soft-border: #c7d6f7; --btn-soft-hover: #d4e1fb; --choice-correct-bg: #e7f7ee; --choice-wrong-bg: #fbeae9; --row-stripe: rgba(255,253,248,.5); --yellow-ink: #a87400; /* callout strong text */ --done-border: #bfe3cd; --grid-line: rgba(30,73,199,.025); /* widget canvas grid */ --shadow: 0 1px 2px rgba(27,29,33,.04), 0 8px 24px rgba(27,29,33,.06); --shadow-lg: 0 4px 12px rgba(27,29,33,.08), 0 24px 60px rgba(27,29,33,.10); --sans: "IBM Plex Sans", system-ui, sans-serif; --serif: "Fraunces", Georgia, serif; --mono: "IBM Plex Mono", ui-monospace, monospace; --sidebar-w: 300px; --maxw: 860px; color-scheme: light; } /* ============================================================ DARK THEME — applied via (set with no flash by an inline script in index.html, toggled in app.js) ============================================================ */ :root[data-theme="dark"] { --paper: #161c24; /* page background */ --paper-2: #1f2730; /* cards / raised surfaces */ --ink: #e8e6e0; --ink-soft: #b4bac3; --ink-faint: #828892; --rule: #2f3741; --rule-soft: #283039; --blue: #6f9bff; /* lifted for contrast on dark */ --blue-soft: #1d2c46; --yellow: #f0b429; --yellow-soft:#2c2410; --green: #3fc77f; --red: #ef6b62; --surface: #232c36; --code-bg: #11161d; --sidebar-1: #1a212a; --sidebar-2: #141a21; --widget-1: #212a33; --widget-2: #1a212a; --topbar-bg: rgba(22,28,36,.86); --inline-code-bg: #2a323c; --blue-700: #5a86f0; --blue-grad2: #4f74e0; --code-note-border: #4a4326; --btn-soft-border: #2f4263; --btn-soft-hover: #243349; --choice-correct-bg: rgba(63,199,127,.15); --choice-wrong-bg: rgba(239,107,98,.16); --row-stripe: rgba(255,255,255,.025); --yellow-ink: #f0b429; --done-border: #2c5a40; --grid-line: rgba(111,155,255,.04); --shadow: 0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.40); --shadow-lg: 0 4px 12px rgba(0,0,0,.35), 0 24px 60px rgba(0,0,0,.55); color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* smooth light<->dark crossfade on the things that change colour */ body, #sidebar, #topbar, .widget, .mod-card, .quiz-q, .sim-controls, .sim-stage, .code-box, .md pre, .nav-item, .tab, .pyo-chip, .theme-toggle { transition: background-color .25s ease, border-color .25s ease, color .25s ease; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* theme toggle button (in the topbar) */ .theme-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--ink-soft); background: var(--paper-2); border: 1px solid var(--rule); border-radius: 99px; padding: 5px 11px; cursor: pointer; user-select: none; } .theme-toggle:hover { border-color: var(--blue); color: var(--ink); } .theme-toggle .ic { font-size: 13px; line-height: 1; } body { font-family: var(--sans); color: var(--ink); background: var(--paper); /* subtle paper grain via layered gradients */ background-image: radial-gradient(circle at 12% 18%, rgba(30,73,199,.025), transparent 40%), radial-gradient(circle at 88% 8%, rgba(232,164,0,.035), transparent 38%); background-attachment: fixed; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; } #app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; } /* ---------- Sidebar ---------- */ #sidebar { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; background: linear-gradient(180deg, var(--sidebar-1), var(--sidebar-2)); border-right: 1px solid var(--rule); padding: 22px 18px; display: flex; flex-direction: column; gap: 18px; } .brand { display: flex; gap: 12px; align-items: center; color: var(--ink); } .brand:hover { text-decoration: none; } .brand-mark { font-family: var(--mono); font-size: 20px; letter-spacing: -2px; color: var(--blue); background: var(--blue-soft); padding: 6px 8px; border-radius: 8px; line-height: 1; } .brand-text { display: flex; flex-direction: column; line-height: 1.15; } .brand-text strong { font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: .2px; } .brand-text em { font-style: normal; font-size: 12px; color: var(--ink-faint); letter-spacing: .12em; text-transform: uppercase; } .progress-summary { display: flex; flex-direction: column; gap: 6px; } .progress-rail { height: 6px; background: var(--rule); border-radius: 99px; overflow: hidden; } #overall-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--blue), var(--blue-grad2)); border-radius: 99px; transition: width .5s cubic-bezier(.2,.8,.2,1); } #overall-progress-label { font-size: 11px; color: var(--ink-faint); } #module-nav { display: flex; flex-direction: column; gap: 2px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--ink-soft); font-size: 13.5px; cursor: pointer; border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s; } .nav-item:hover { background: var(--paper-2); text-decoration: none; color: var(--ink); } .nav-item.active { background: var(--paper-2); border-color: var(--rule); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); } .nav-num { font-family: var(--mono); font-size: 11px; color: var(--blue); min-width: 20px; } .nav-item.active .nav-num { color: var(--blue); } .nav-check { margin-left: auto; font-size: 12px; color: var(--green); opacity: 0; transition: opacity .2s; } .nav-item.done .nav-check { opacity: 1; } .sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--rule); } .sidebar-foot a { font-size: 13px; color: var(--ink-soft); padding: 4px 6px; border-radius: 6px; } .sidebar-foot a:hover { background: var(--paper-2); text-decoration: none; } /* ---------- Topbar ---------- */ #main { display: flex; flex-direction: column; min-width: 0; } #topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 12px 28px; background: var(--topbar-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); } #menu-toggle { display: none; background: none; border: 1px solid var(--rule); border-radius: 8px; font-size: 16px; padding: 4px 10px; cursor: pointer; } #crumb { font-size: 12px; color: var(--ink-faint); letter-spacing: .04em; } .pyo-chip { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; color: var(--ink-soft); background: var(--paper-2); border: 1px solid var(--rule); border-radius: 99px; padding: 5px 12px; } .pyo-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); transition: background .3s; } .pyo-chip.loading .dot { background: var(--yellow); animation: pulse 1s infinite; } .pyo-chip.ready .dot { background: var(--green); } .pyo-chip.running .dot { background: var(--blue); animation: pulse .7s infinite; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} } /* ---------- View / content ---------- */ #view { padding: 40px 28px 120px; } .page { max-width: var(--maxw); margin: 0 auto; animation: fadeup .45s cubic-bezier(.2,.8,.2,1) both; } @keyframes fadeup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* tabs */ .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); margin: 6px 0 28px; position: sticky; top: 49px; background: var(--paper); z-index: 10; } .tab { padding: 10px 16px; font-size: 14px; font-weight: 500; color: var(--ink-soft); cursor: pointer; border: none; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tab:hover { color: var(--ink); } .tab.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; } .tab-panel { animation: fadeup .35s ease both; } /* module header */ .mod-eyebrow { font-family: var(--mono); font-size: 12px; color: var(--blue); letter-spacing: .12em; text-transform: uppercase; } .mod-title { font-family: var(--serif); font-size: 40px; font-weight: 600; line-height: 1.08; margin: 8px 0 10px; letter-spacing: -.5px; } .mod-blurb { font-size: 17px; color: var(--ink-soft); max-width: 60ch; } /* ---------- Markdown content (lessons) ---------- */ .md { font-size: 16px; color: var(--ink); } .md h1 { font-family: var(--serif); font-size: 32px; font-weight: 600; margin: 1.4em 0 .5em; letter-spacing: -.4px; } .md h2 { font-family: var(--serif); font-size: 25px; font-weight: 600; margin: 1.5em 0 .5em; padding-top: .3em; border-top: 1px solid var(--rule-soft); letter-spacing: -.2px; } .md h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; margin: 1.4em 0 .4em; } .md p { margin: .8em 0; } .md ul, .md ol { padding-left: 1.4em; } .md li { margin: .35em 0; } .md a { border-bottom: 1px solid transparent; } .md a:hover { border-bottom-color: var(--blue); text-decoration: none; } .md strong { font-weight: 600; } .md blockquote { margin: 1em 0; padding: .6em 1.1em; border-left: 3px solid var(--blue); background: var(--blue-soft); border-radius: 0 8px 8px 0; color: var(--ink); } .md code { font-family: var(--mono); font-size: .88em; background: var(--inline-code-bg); padding: .12em .4em; border-radius: 5px; border: 1px solid var(--rule); } .md pre { background: var(--code-bg); border: 1px solid var(--rule); border-radius: 12px; padding: 16px 18px; overflow-x: auto; box-shadow: var(--shadow); } .md pre code { background: none; border: none; padding: 0; font-size: 13px; line-height: 1.55; } .md table { border-collapse: collapse; width: 100%; margin: 1.2em 0; font-size: 14.5px; } .md th, .md td { border: 1px solid var(--rule); padding: 8px 12px; text-align: left; vertical-align: top; } .md th { background: var(--paper-2); font-weight: 600; } .md tr:nth-child(even) td { background: var(--row-stripe); } .md img { max-width: 100%; border-radius: 12px; border: 1px solid var(--rule); box-shadow: var(--shadow); } .md details { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 10px; padding: 10px 14px; margin: .8em 0; } .md summary { cursor: pointer; font-weight: 600; color: var(--blue); } .md hr { border: none; border-top: 1px solid var(--rule); margin: 2em 0; } /* ---------- Simulation panel ---------- */ .sim-wrap { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; } .sim-controls { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 14px; padding: 18px; box-shadow: var(--shadow); position: sticky; top: 110px; } .sim-controls h3 { font-family: var(--serif); font-size: 17px; margin: 0 0 4px; } .sim-controls .hint { font-size: 12px; color: var(--ink-faint); margin: 0 0 14px; } .ctrl { margin-bottom: 16px; } .ctrl label { display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; margin-bottom: 6px; } .ctrl label .val { font-family: var(--mono); color: var(--blue); } .ctrl input[type=range] { width: 100%; accent-color: var(--blue); } .ctrl select, .ctrl input[type=number] { width: 100%; font-family: var(--mono); font-size: 13px; padding: 7px 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); } .ctrl.checkbox label { justify-content: flex-start; gap: 8px; cursor: pointer; } .run-btn { width: 100%; padding: 11px; font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--on-accent, #fff); background: var(--blue); border: none; border-radius: 10px; cursor: pointer; transition: transform .08s, background .15s; } .run-btn:hover { background: var(--blue-700); } .run-btn:active { transform: translateY(1px); } .run-btn:disabled { background: var(--ink-faint); cursor: wait; } .run-note { font-size: 11.5px; color: var(--ink-faint); margin-top: 10px; line-height: 1.4; } .sim-stage { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 14px; padding: 16px; box-shadow: var(--shadow); min-height: 360px; display: flex; flex-direction: column; } .sim-stage .stage-img { width: 100%; border-radius: 10px; border: 1px solid var(--rule-soft); background: var(--surface); } .sim-stage .stage-cap { font-size: 12.5px; color: var(--ink-faint); margin-top: 10px; font-family: var(--mono); } .sim-output { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); background: var(--code-bg); border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px; margin-top: 12px; white-space: pre-wrap; max-height: 200px; overflow-y: auto; } .stage-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; flex: 1; color: var(--ink-faint); } .spinner { width: 34px; height: 34px; border: 3px solid var(--rule); border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- Code view ---------- */ .code-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; } .code-tab { font-family: var(--mono); font-size: 12.5px; padding: 7px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper-2); cursor: pointer; color: var(--ink-soft); } .code-tab.active { background: var(--blue); color: var(--on-accent,#fff); border-color: var(--blue); } .code-note { background: var(--yellow-soft); border: 1px solid var(--code-note-border); border-left: 3px solid var(--yellow); border-radius: 0 8px 8px 0; padding: 10px 14px; margin-bottom: 14px; font-size: 14px; } .code-box { background: var(--code-bg); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); } .code-box pre { margin: 0; max-height: 70vh; overflow: auto; } .code-box pre code { font-family: var(--mono); font-size: 12.5px; line-height: 1.55; padding: 16px; display: block; } /* ---------- Quiz ---------- */ .quiz-q { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 14px; padding: 20px 22px; margin-bottom: 16px; box-shadow: var(--shadow); } .quiz-q .q-num { font-family: var(--mono); font-size: 12px; color: var(--blue); } .quiz-q .q-text { font-size: 16.5px; font-weight: 500; margin: 6px 0 14px; } .choice { display: block; padding: 11px 14px; border: 1px solid var(--rule); border-radius: 10px; margin-bottom: 8px; cursor: pointer; font-size: 14.5px; transition: background .12s, border-color .12s; } .choice:hover { background: var(--paper); border-color: var(--blue); } .choice.correct { background: var(--choice-correct-bg); border-color: var(--green); } .choice.wrong { background: var(--choice-wrong-bg); border-color: var(--red); } .choice.locked { cursor: default; pointer-events: none; } .q-explain { margin-top: 12px; padding: 10px 14px; font-size: 14px; background: var(--blue-soft); border-radius: 8px; display: none; } .q-explain.show { display: block; } .quiz-score { text-align: center; font-family: var(--serif); font-size: 22px; padding: 20px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow); } .mark-done { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 10px 18px; font-weight: 600; font-size: 14px; border: 1px solid var(--green); color: var(--green); background: var(--surface); border-radius: 10px; cursor: pointer; } .mark-done.done { background: var(--green); color: var(--on-accent,#fff); } /* ---------- Home ---------- */ .hero { text-align: center; padding: 30px 0 10px; } .hero h1 { font-family: var(--serif); font-size: 52px; font-weight: 600; letter-spacing: -1px; line-height: 1.04; margin: 0 0 14px; } .hero h1 .accent { color: var(--blue); } .hero p { font-size: 19px; color: var(--ink-soft); max-width: 60ch; margin: 0 auto 8px; } .hero-meta { display: flex; gap: 26px; justify-content: center; margin: 26px 0; flex-wrap: wrap; } .hero-meta .stat { text-align: center; } .hero-meta .stat b { font-family: var(--serif); font-size: 30px; display: block; } .hero-meta .stat span { font-size: 12px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .1em; } .mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-top: 26px; } .mod-card { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 14px; padding: 20px; cursor: pointer; transition: transform .12s, box-shadow .15s, border-color .15s; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; } .mod-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--blue); } .mod-card .c-num { font-family: var(--mono); font-size: 12px; color: var(--blue); } .mod-card .c-title { font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.2; } .mod-card .c-blurb { font-size: 13.5px; color: var(--ink-soft); } .mod-card .c-foot { margin-top: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-faint); display: flex; justify-content: space-between; align-items: center; } .mod-card.done { border-color: var(--done-border); } .mod-card.done .c-foot::after { content: "✓ done"; color: var(--green); } .callout { background: var(--yellow-soft); border: 1px solid var(--code-note-border); border-radius: 12px; padding: 16px 20px; margin: 22px 0; font-size: 14.5px; } .callout strong { color: var(--yellow-ink); } /* ---------- Interactive widgets (embedded in lessons) ---------- */ .widget-mount { margin: 26px 0; } .widget { background: linear-gradient(180deg, var(--widget-1), var(--widget-2)); border: 1px solid var(--rule); border-radius: 16px; padding: 18px 18px 14px; box-shadow: var(--shadow-lg); } .widget-title { font-family: var(--serif); font-size: 16.5px; font-weight: 600; color: var(--ink); margin-bottom: 12px; line-height: 1.25; letter-spacing: -.2px; } .widget-canvas-wrap { background: linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 22px 22px, var(--paper-2); border: 1px solid var(--rule-soft); border-radius: 12px; overflow: hidden; } .widget-canvas-wrap canvas { display: block; } .widget-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; } .widget-btn { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--blue); background: var(--blue-soft); border: 1px solid var(--btn-soft-border); border-radius: 8px; padding: 6px 12px; cursor: pointer; transition: background .12s, transform .06s; } .widget-btn:hover { background: var(--btn-soft-hover); } .widget-btn:active { transform: translateY(1px); } .widget-slider { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-soft); } .widget-slider input[type=range] { accent-color: var(--blue); width: 150px; vertical-align: middle; } .widget-slider b { color: var(--blue); font-family: var(--mono); } .widget-caption { font-size: 13px; color: var(--ink-soft); margin-top: 12px; line-height: 1.55; } .widget-caption code { font-family: var(--mono); font-size: .86em; background: var(--inline-code-bg); padding: .1em .35em; border-radius: 4px; } .widget-err { color: var(--red); font-family: var(--mono); font-size: 13px; padding: 14px; border: 1px dashed var(--red); border-radius: 10px; } /* ---------- Responsive ---------- */ @media (max-width: 980px) { #app { grid-template-columns: 1fr; } #sidebar { position: fixed; left: 0; top: 0; z-index: 50; width: 280px; transform: translateX(-100%); transition: transform .25s; } #sidebar.open { transform: none; box-shadow: var(--shadow-lg); } #menu-toggle { display: block; } .sim-wrap { grid-template-columns: 1fr; } .sim-controls { position: static; } } /* ---------- Dark-mode polish for raster figures (matplotlib PNGs are white) ---------- */ :root[data-theme="dark"] .md img, :root[data-theme="dark"] .sim-stage .stage-img { background: #f4f3ee; /* warm matte so white plots sit on a frame, not glare */ padding: 6px; border-color: var(--rule); } :root[data-theme="dark"] .stage-img { box-shadow: 0 0 0 1px var(--rule); }