Color hero Mac accent pink

Author: offyotto

docs/index.html

@@ -48,7 +48,7 @@ <h1 class="hero-title">
                 <span class="hero-word">Monitor</span>
               </span>
             </span>
-            <span class="hero-title-fixed">your Mac.</span>
+            <span class="hero-title-fixed">your <span class="hero-title-accent">Mac.</span></span>
             <span class="sr-only">Monitor and track your Mac.</span>
           </h1>
         </div>
@@ -130,22 +130,22 @@ <h2>Read your hardware at a glance.</h2>
         </div>
       </section>
 
-      <section class="video-section" aria-labelledby="ui-video-title">
+      <section class="video-section" aria-labelledby="touchbar-video-title">
         <div class="section-heading">
           <p class="eyebrow">Tour</p>
-          <h2 id="ui-video-title">Core-Monitor in motion.</h2>
+          <h2 id="touchbar-video-title">Touch Bar widgets in action.</h2>
         </div>
         <div class="video-layout">
           <div class="video-copy">
             <p>
-              A quick pass through the dashboard, menu bar panel, and system monitoring views.
+              A short walkthrough of the Touch Bar widgets, layout switching, and customization flow.
             </p>
             <div class="video-actions">
-              <a class="button secondary" href="videos/ui-showcase.mp4">Open UI Video</a>
+              <a class="button secondary" href="videos/touchbar-showcase.mp4">Open Touch Bar Video</a>
             </div>
           </div>
           <video class="install-video" controls preload="metadata">
-            <source src="videos/ui-showcase.mp4" type="video/mp4">
+            <source src="videos/touchbar-showcase.mp4" type="video/mp4">
             Your browser does not support this video. Use the direct file link instead.
           </video>
         </div>
@@ -241,11 +241,11 @@ <h2>Watch the install flow before you click anything.</h2>
               If you want the shortest path from download to running app, the recorded install walkthrough shows the expected first-run flow and what macOS is going to ask you.
             </p>
             <div class="video-actions">
-              <a class="button secondary" href="videos/install-walkthrough.mov">Open Install Video</a>
+              <a class="button secondary" href="videos/install-walkthrough.mp4">Open Install Video</a>
             </div>
           </div>
           <video class="install-video" controls preload="metadata">
-            <source src="videos/install-walkthrough.mov" type="video/quicktime">
+            <source src="videos/install-walkthrough.mp4" type="video/mp4">
             Your browser does not support the install video. Use the direct file link instead.
           </video>
         </div>

docs/styles.css

@@ -244,6 +244,10 @@ section {
   text-shadow: 0 14px 34px rgba(4, 6, 14, 0.34);
 }
 
+.hero-title-fixed .hero-title-accent {
+  color: #ff73b8;
+}
+
 .sr-only {
   position: absolute;
   width: 1px;

index.html

@@ -48,7 +48,7 @@ <h1 class="hero-title">
                 <span class="hero-word">Monitor</span>
               </span>
             </span>
-            <span class="hero-title-fixed">your Mac.</span>
+            <span class="hero-title-fixed">your <span class="hero-title-accent">Mac.</span></span>
             <span class="sr-only">Monitor and track your Mac.</span>
           </h1>
         </div>
@@ -130,22 +130,22 @@ <h2>Read your hardware at a glance.</h2>
         </div>
       </section>
 
-      <section class="video-section" aria-labelledby="ui-video-title">
+      <section class="video-section" aria-labelledby="touchbar-video-title">
         <div class="section-heading">
           <p class="eyebrow">Tour</p>
-          <h2 id="ui-video-title">Core-Monitor in motion.</h2>
+          <h2 id="touchbar-video-title">Touch Bar widgets in action.</h2>
         </div>
         <div class="video-layout">
           <div class="video-copy">
             <p>
-              A quick pass through the dashboard, menu bar panel, and system monitoring views.
+              A short walkthrough of the Touch Bar widgets, layout switching, and customization flow.
             </p>
             <div class="video-actions">
-              <a class="button secondary" href="docs/videos/ui-showcase.mp4">Open UI Video</a>
+              <a class="button secondary" href="docs/videos/touchbar-showcase.mp4">Open Touch Bar Video</a>
             </div>
           </div>
           <video class="install-video" controls preload="metadata">
-            <source src="docs/videos/ui-showcase.mp4" type="video/mp4">
+            <source src="docs/videos/touchbar-showcase.mp4" type="video/mp4">
             Your browser does not support this video. Use the direct file link instead.
           </video>
         </div>
@@ -241,11 +241,11 @@ <h2>Watch the install flow before you click anything.</h2>
               If you want the shortest path from download to running app, the recorded install walkthrough shows the expected first-run flow and what macOS is going to ask you.
             </p>
             <div class="video-actions">
-              <a class="button secondary" href="docs/videos/install-walkthrough.mov">Open Install Video</a>
+              <a class="button secondary" href="docs/videos/install-walkthrough.mp4">Open Install Video</a>
             </div>
           </div>
           <video class="install-video" controls preload="metadata">
-            <source src="docs/videos/install-walkthrough.mov" type="video/quicktime">
+            <source src="docs/videos/install-walkthrough.mp4" type="video/mp4">
             Your browser does not support the install video. Use the direct file link instead.
           </video>
         </div>

styles.css

@@ -244,6 +244,10 @@ section {
   text-shadow: 0 14px 34px rgba(4, 6, 14, 0.4);
 }
 
+.hero-title-fixed .hero-title-accent {
+  color: #ff73b8;
+}
+
 .sr-only {
   position: absolute;
   width: 1px;