Enhance comic site content and structure

- Updated content.yaml to improve site-wide text, chapter details, and bubble dialogues for clarity and engagement.
- Modified index.html to reflect new titles and subtitles, ensuring consistency with updated content.
- Introduced content.schema.json to define a JSON schema for validating the structure of the content file, ensuring data integrity and ease of future modifications.

Author: DanWahlin

visual-quickstart/assets/css/style.css

@@ -4,8 +4,9 @@
   edits here will be overwritten on the next build.
   
   How to make changes:
-    - WORDS (titles, subtitle, CTA, footer, captions, character dialogue,
-      terminal commands, chapter list): edit visual-quickstart/content.yaml
+    - WORDS (page/tab titles, nav labels, site chrome, subtitle, CTA, footer,
+      captions, character dialogue, terminal commands, chapter list): edit
+      visual-quickstart/content.yaml (see its top-level `site:` section)
     - STYLES (CSS): edit the CSS block in build_site.py
     - HTML STRUCTURE / layout: edit the page templates in build_site.py
       (index_page / chapter_page / banner / nav / panel)
@@ -73,12 +74,20 @@ a{color:var(--teal)}
 .cell{position:relative;margin:0;background:var(--card);border-radius:22px;
   padding:14px;box-shadow:var(--shadow)}
 .cell .panel{display:block;width:100%;height:auto;border-radius:12px}
-.cap{font-weight:700;font-size:1.06rem;color:var(--ink);margin:2px 4px 12px;
+.cap{font-weight:700;font-size:1.325rem;color:var(--ink);margin:2px 4px 12px;
   padding-left:24px;line-height:1.25}
 .badge{position:absolute;top:-14px;left:-14px;z-index:2;width:46px;height:46px;
   display:grid;place-items:center;border-radius:50%;background:var(--orange);
   color:#fff;font-weight:800;font-size:1.25rem;border:4px solid #fff;
   box-shadow:0 6px 14px rgba(232,112,42,.4)}
+/* book-icon link to the matching course section, top-right of each frame */
+.frame-link{position:absolute;top:-14px;right:-14px;z-index:2;width:46px;height:46px;
+  display:grid;place-items:center;border-radius:50%;background:var(--teal);
+  color:#fff;border:4px solid #fff;box-shadow:0 6px 14px rgba(15,138,138,.4);
+  text-decoration:none;transition:transform .15s ease,filter .15s ease}
+.frame-link:hover{transform:translateY(-2px) scale(1.05);filter:brightness(1.08)}
+.frame-link:focus-visible{outline:3px solid #58a6ff;outline-offset:2px}
+.frame-link svg{width:24px;height:24px}
 .foot{text-align:center;color:#6c6657;font-size:.92rem;padding:26px 18px 46px}
 /* home */
 body.home{display:flex;flex-direction:column;min-height:100vh}
@@ -98,7 +107,7 @@ body.home{display:flex;flex-direction:column;min-height:100vh}
 .home-main{flex:1;width:100%;max-width:920px;margin:0 auto;padding:20px 20px 40px;
   display:flex;flex-direction:column}
 .home-intro{margin:6px 0 0}
-.home-intro .cap{text-align:center;padding-left:0;font-size:1.12rem}
+.home-intro .cap{text-align:center;padding-left:0;font-size:1.40rem}
 .intro-cta{text-align:center;margin:24px auto 0}
 .intro-cta .cta{border:3px solid #fff;box-shadow:0 10px 24px rgba(0,0,0,.40)}
 .intro-cta .cta:hover{transform:translateY(-2px)}
@@ -131,7 +140,68 @@ body.home{display:flex;flex-direction:column;min-height:100vh}
 @media(max-width:600px){
   .strip{padding:4px 8px 28px;gap:20px}
   .cell{padding:8px;border-radius:16px}
-  .cap{font-size:.98rem;padding-left:28px;margin:2px 4px 8px}
+  .cap{font-size:1.225rem;padding-left:28px;margin:2px 4px 8px}
   .home-main{padding:14px 8px 32px}
   .badge{width:38px;height:38px;font-size:1.05rem;top:-12px;left:-8px}
+  .frame-link{width:38px;height:38px;top:-12px;right:-8px}
+  .frame-link svg{width:20px;height:20px}
+}
+/* ===== starter engagement layer: scroll reveal - typewriter - copy ===== */
+/* Hidden initial state is only armed once JS adds .anim-ready, so no-JS and
+   reduced-motion users still see every frame fully rendered. */
+.anim-ready main.strip .cell{opacity:0;transform:translateY(26px);
+  will-change:opacity,transform;
+  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
+.anim-ready main.strip .cell.in-view{opacity:1;transform:none}
+.anim-ready main.strip .cell .badge{transform:scale(.2);opacity:0;
+  transition:transform .5s cubic-bezier(.34,1.56,.64,1) .14s,opacity .3s ease .14s}
+.anim-ready main.strip .cell.in-view .badge{transform:scale(1);opacity:1}
+/* per-command copy buttons: real HTML <button>s overlaid on the terminal bar
+   (kept OUTSIDE the role="img" panel SVG so they stay keyboard/AT accessible).
+   Positioned by % over .panel-wrap, which exactly bounds the fixed-ratio SVG. */
+.panel-wrap{position:relative;display:block}
+.term-copy{position:absolute;margin:0;padding:0 1.2% 0 0;border:0;background:transparent;
+  display:flex;align-items:center;justify-content:flex-end;cursor:pointer;
+  -webkit-tap-highlight-color:transparent}
+.term-copy .tc-box{position:relative;height:74%;aspect-ratio:1;display:grid;
+  place-items:center;border-radius:22%;border:1px solid #30363d;background:#21262d;
+  opacity:0;transition:opacity .15s ease,background .15s ease}
+.term-copy:hover .tc-box,.term-copy:focus-visible .tc-box{opacity:1}
+.term-copy:hover .tc-box{background:#30363d}
+.term-copy:focus{outline:none}
+.term-copy:focus-visible .tc-box{outline:2px solid #58a6ff;outline-offset:2px}
+.term-copy .tc-box svg{position:absolute;width:62%;height:62%;transition:opacity .15s ease}
+.term-copy .tc-ico{color:#8b949e}
+.term-copy:hover .tc-ico{color:#c9d1d9}
+.term-copy .tc-chk{color:#3fb950;opacity:0}
+.term-copy.copied .tc-ico{opacity:0}
+.term-copy.copied .tc-chk{opacity:1}
+.term-copy.copied .tc-box{border-color:#3fb950}
+/* touch devices have no hover: keep the copy icons visible there */
+@media(hover:none){.term-copy .tc-box{opacity:1}}
+/* ===== homepage entrance: the opening panel comes alive on load ===== */
+/* Pure CSS (runs on first paint, no JS). Fill-mode 'both' supplies the hidden
+   start state, so removing the animation (reduced motion) leaves things visible. */
+@keyframes home-rise{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
+@keyframes home-fade-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
+@keyframes home-panel-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
+@keyframes home-bubble-pop{0%{opacity:0;transform:scale(.5)}70%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
+@keyframes home-av-wave{0%{opacity:0;transform:scale(.6) rotate(-12deg)}55%{opacity:1;transform:scale(1.05) rotate(9deg)}72%{transform:rotate(-5deg)}86%{transform:rotate(3deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
+body.home .banner-wrap{animation:home-rise .6s ease both}
+body.home .home-av{transform-origin:62% 88%;animation:home-av-wave 1s cubic-bezier(.34,1.56,.64,1) .1s both}
+body.home .home-intro{animation:home-panel-in .6s ease .15s both}
+body.home .home-intro .cap{animation:home-fade-up .55s ease .3s both}
+body.home .home-intro .panel > g{transform-box:fill-box;transform-origin:center;
+  animation:home-bubble-pop .55s cubic-bezier(.34,1.56,.64,1) both}
+body.home .home-intro .panel > g:nth-of-type(1){animation-delay:.6s}
+body.home .home-intro .panel > g:nth-of-type(2){animation-delay:2.6s}
+body.home .home-intro .panel > g:nth-of-type(3){animation-delay:4.6s}
+/* CTA and chapter selector are NOT animated: they must be clickable immediately. */
+@media(prefers-reduced-motion:reduce){
+  .anim-ready main.strip .cell,
+  .anim-ready main.strip .cell .badge{opacity:1;transform:none;transition:none}
+  .term-copy .tc-box,.term-copy .tc-box svg{transition:none}
+  .frame-link{transition:none}
+  body.home .banner-wrap,body.home .home-av,body.home .home-intro,
+  body.home .home-intro .cap,body.home .home-intro .panel > g{animation:none}
 }