From 719f4efad3d69c58ef7a2815be262364684f8de7 Mon Sep 17 00:00:00 2001
From: itsrubberduck <frappes_remoter.2e@icloud.com>
Date: Sat, 21 Feb 2026 00:10:37 +0100
Subject: [PATCH] style(pfd): align core instrument visuals with Airbus
 reference

---
 .../flightlab/pfd/PfdAltitudeTape.vue         | 41 ++++++++++++-------
 .../flightlab/pfd/PfdAttitudeIndicator.vue    | 20 ++++-----
 .../flightlab/pfd/PfdHeadingIndicator.vue     | 23 +++++++----
 app/components/flightlab/pfd/PfdSpeedTape.vue | 41 ++++++++++++-------
 .../flightlab/pfd/PfdVerticalSpeed.vue        | 16 ++++----
 5 files changed, 88 insertions(+), 53 deletions(-)

diff --git a/app/components/flightlab/pfd/PfdAltitudeTape.vue b/app/components/flightlab/pfd/PfdAltitudeTape.vue
index ab9bda7..d1f767f 100644
--- a/app/components/flightlab/pfd/PfdAltitudeTape.vue
+++ b/app/components/flightlab/pfd/PfdAltitudeTape.vue
@@ -40,6 +40,10 @@ const readoutText = computed(() => Math.round(props.altitude).toString())
 
 const readoutBoxHeight = 24
 const readoutBoxWidth = computed(() => props.width - 8)
+const tapeInnerX = 2
+const tapeInnerY = 2
+const tapeInnerWidth = computed(() => props.width - 4)
+const tapeInnerHeight = computed(() => props.height - 4)
 </script>
 
 <template>
@@ -55,14 +59,23 @@ const readoutBoxWidth = computed(() => props.width - 8)
       </clipPath>
     </defs>
 
-    <!-- Background -->
+    <!-- Airbus-style tape body -->
     <rect
       x="0"
       y="0"
       :width="width"
       :height="height"
-      fill="rgba(10,10,30,0.95)"
-      rx="2"
+      fill="#8f9198"
+      rx="1"
+    />
+    <rect
+      :x="tapeInnerX"
+      :y="tapeInnerY"
+      :width="tapeInnerWidth"
+      :height="tapeInnerHeight"
+      fill="#93959c"
+      stroke="#d2d4da"
+      stroke-width="0.8"
     />
 
     <!-- Scrolling tape (clipped) -->
@@ -70,24 +83,24 @@ const readoutBoxWidth = computed(() => props.width - 8)
       <g v-for="mark in marks" :key="mark.alt">
         <!-- Tick mark -->
         <line
-          x1="0"
+          :x1="width - 10"
           :y1="mark.y"
-          x2="8"
+          :x2="width - 1"
           :y2="mark.y"
-          stroke="white"
+          stroke="#f4f6fb"
           stroke-width="1"
         />
         <!-- Label -->
         <text
           v-if="mark.isLabel"
-          x="12"
+          x="4"
           :y="mark.y + 4"
-          fill="white"
+          fill="#f4f6fb"
           font-size="12"
           text-anchor="start"
           font-family="monospace"
         >
-          {{ mark.alt }}
+          {{ Math.round(mark.alt / 100) }}
         </text>
       </g>
     </g>
@@ -98,15 +111,15 @@ const readoutBoxWidth = computed(() => props.width - 8)
       :y="centerY - readoutBoxHeight / 2"
       :width="readoutBoxWidth"
       :height="readoutBoxHeight"
-      fill="rgba(10,10,30,0.95)"
-      stroke="#22d3ee"
-      stroke-width="1.5"
-      rx="2"
+      fill="#02040b"
+      stroke="#2fe5ff"
+      stroke-width="1.4"
+      rx="1.5"
     />
     <text
       :x="width / 2"
       :y="centerY + 5"
-      fill="#22d3ee"
+      fill="#2fe5ff"
       font-size="14"
       font-weight="bold"
       text-anchor="middle"
diff --git a/app/components/flightlab/pfd/PfdAttitudeIndicator.vue b/app/components/flightlab/pfd/PfdAttitudeIndicator.vue
index aeda8ae..19dab78 100644
--- a/app/components/flightlab/pfd/PfdAttitudeIndicator.vue
+++ b/app/components/flightlab/pfd/PfdAttitudeIndicator.vue
@@ -82,12 +82,12 @@ const dotRadius = computed(() => 4)
         <circle :cx="cx" :cy="cy" :r="size * 0.46" />
       </clipPath>
       <linearGradient :id="skyGradId" x1="0" y1="0" x2="0" y2="1">
-        <stop offset="0%" stop-color="#1a5fb4" />
-        <stop offset="100%" stop-color="#62a0ea" />
+        <stop offset="0%" stop-color="#26aef0" />
+        <stop offset="100%" stop-color="#1e9ddf" />
       </linearGradient>
       <linearGradient :id="groundGradId" x1="0" y1="0" x2="0" y2="1">
-        <stop offset="0%" stop-color="#8b6914" />
-        <stop offset="100%" stop-color="#5e4108" />
+        <stop offset="0%" stop-color="#b56517" />
+        <stop offset="100%" stop-color="#9b5312" />
       </linearGradient>
     </defs>
 
@@ -118,7 +118,7 @@ const dotRadius = computed(() => 4)
           :x2="size * 2"
           :y2="0"
           stroke="white"
-          stroke-width="1.5"
+          stroke-width="2"
         />
 
         <!-- Pitch ladder -->
@@ -135,7 +135,7 @@ const dotRadius = computed(() => 4)
             <text
               :x="-mark.width / 2 - 6"
               :y="mark.y + 4"
-              fill="white"
+              fill="#f4f6fb"
               font-size="11"
               text-anchor="end"
               font-family="monospace"
@@ -145,7 +145,7 @@ const dotRadius = computed(() => 4)
             <text
               :x="mark.width / 2 + 6"
               :y="mark.y + 4"
-              fill="white"
+              fill="#f4f6fb"
               font-size="11"
               text-anchor="start"
               font-family="monospace"
@@ -165,21 +165,21 @@ const dotRadius = computed(() => 4)
       :y1="tick.y1"
       :x2="tick.x2"
       :y2="tick.y2"
-      stroke="white"
+      stroke="#f4f6fb"
       stroke-width="1.5"
     />
 
     <!-- Zero-bank reference triangle (fixed, top center) -->
     <polygon
       :points="`${cx},${cy - size * 0.42} ${cx - 6},${cy - size * 0.42 - 10} ${cx + 6},${cy - size * 0.42 - 10}`"
-      fill="white"
+      fill="#f4f6fb"
     />
 
     <!-- Bank pointer (rotates with bank) -->
     <polygon
       :points="bankPointer"
       :transform="bankPointerTransform"
-      fill="#22d3ee"
+      fill="#facc15"
     />
 
     <!-- Fixed aircraft reference symbol -->
diff --git a/app/components/flightlab/pfd/PfdHeadingIndicator.vue b/app/components/flightlab/pfd/PfdHeadingIndicator.vue
index 69f78e1..086a937 100644
--- a/app/components/flightlab/pfd/PfdHeadingIndicator.vue
+++ b/app/components/flightlab/pfd/PfdHeadingIndicator.vue
@@ -66,7 +66,7 @@ const readoutText = computed(() => {
   return normalized.toString().padStart(3, '0')
 })
 
-const readoutBoxWidth = 36
+const readoutBoxWidth = 40
 const readoutBoxHeight = 18
 </script>
 
@@ -83,14 +83,23 @@ const readoutBoxHeight = 18
       </clipPath>
     </defs>
 
-    <!-- Background -->
+    <!-- Airbus-style heading tape -->
     <rect
       x="0"
       y="0"
       :width="width"
       :height="height"
-      fill="rgba(10,10,30,0.95)"
-      rx="2"
+      fill="#8f9198"
+      rx="1"
+    />
+    <rect
+      x="1.5"
+      y="1.5"
+      :width="width - 3"
+      :height="height - 3"
+      fill="#94969d"
+      stroke="#d4d6dc"
+      stroke-width="0.8"
     />
 
     <!-- Readout box at top center (yellow heading value) -->
@@ -99,7 +108,7 @@ const readoutBoxHeight = 18
       y="2"
       :width="readoutBoxWidth"
       :height="readoutBoxHeight"
-      fill="rgba(10,10,30,0.95)"
+      fill="#02040b"
       stroke="#facc15"
       stroke-width="1"
       rx="2"
@@ -131,7 +140,7 @@ const readoutBoxHeight = 18
           :y1="height"
           :x2="mark.x"
           :y2="mark.isMajor ? height - 12 : height - 7"
-          stroke="white"
+          stroke="#f4f6fb"
           :stroke-width="mark.isMajor ? 1.5 : 1"
         />
         <!-- Label (above tick) -->
@@ -139,7 +148,7 @@ const readoutBoxHeight = 18
           v-if="mark.isMajor"
           :x="mark.x"
           :y="height - 15"
-          fill="white"
+          fill="#f4f6fb"
           font-size="11"
           text-anchor="middle"
           font-family="monospace"
diff --git a/app/components/flightlab/pfd/PfdSpeedTape.vue b/app/components/flightlab/pfd/PfdSpeedTape.vue
index 21cb5b7..9a0dcb5 100644
--- a/app/components/flightlab/pfd/PfdSpeedTape.vue
+++ b/app/components/flightlab/pfd/PfdSpeedTape.vue
@@ -71,6 +71,10 @@ const trendLineEndY = computed(() => {
 
 const readoutBoxHeight = 24
 const readoutBoxWidth = computed(() => props.width - 8)
+const tapeInnerX = 2
+const tapeInnerY = 2
+const tapeInnerWidth = computed(() => props.width - 4)
+const tapeInnerHeight = computed(() => props.height - 4)
 </script>
 
 <template>
@@ -86,14 +90,23 @@ const readoutBoxWidth = computed(() => props.width - 8)
       </clipPath>
     </defs>
 
-    <!-- Background -->
+    <!-- Airbus-style tape body -->
     <rect
       x="0"
       y="0"
       :width="width"
       :height="height"
-      fill="rgba(10,10,30,0.95)"
-      rx="2"
+      fill="#8f9198"
+      rx="1"
+    />
+    <rect
+      :x="tapeInnerX"
+      :y="tapeInnerY"
+      :width="tapeInnerWidth"
+      :height="tapeInnerHeight"
+      fill="#93959c"
+      stroke="#d2d4da"
+      stroke-width="0.8"
     />
 
     <!-- Scrolling tape (clipped) -->
@@ -130,19 +143,19 @@ const readoutBoxWidth = computed(() => props.width - 8)
       <g v-for="mark in marks" :key="mark.spd">
         <!-- Tick mark -->
         <line
-          :x1="width - 8"
+          :x1="width - 10"
           :y1="mark.y"
-          :x2="width"
+          :x2="width - 1"
           :y2="mark.y"
-          stroke="white"
+          stroke="#f4f6fb"
           stroke-width="1"
         />
         <!-- Label -->
         <text
           v-if="mark.isLabel"
-          :x="width - 12"
+          :x="width - 14"
           :y="mark.y + 4"
-          fill="white"
+          fill="#f4f6fb"
           font-size="12"
           text-anchor="end"
           font-family="monospace"
@@ -158,7 +171,7 @@ const readoutBoxWidth = computed(() => props.width - 8)
         :y1="centerY"
         :x2="width / 2"
         :y2="trendLineEndY"
-        stroke="#22d3ee"
+        stroke="#30e3ff"
         stroke-width="2"
         opacity="0.8"
       />
@@ -170,15 +183,15 @@ const readoutBoxWidth = computed(() => props.width - 8)
       :y="centerY - readoutBoxHeight / 2"
       :width="readoutBoxWidth"
       :height="readoutBoxHeight"
-      fill="rgba(10,10,30,0.95)"
-      stroke="#22d3ee"
-      stroke-width="1.5"
-      rx="2"
+      fill="#02040b"
+      stroke="#2fe5ff"
+      stroke-width="1.4"
+      rx="1.5"
     />
     <text
       :x="width / 2"
       :y="centerY + 5"
-      fill="#22d3ee"
+      fill="#2fe5ff"
       font-size="15"
       font-weight="bold"
       text-anchor="middle"
diff --git a/app/components/flightlab/pfd/PfdVerticalSpeed.vue b/app/components/flightlab/pfd/PfdVerticalSpeed.vue
index 1b37269..faa86ce 100644
--- a/app/components/flightlab/pfd/PfdVerticalSpeed.vue
+++ b/app/components/flightlab/pfd/PfdVerticalSpeed.vue
@@ -57,14 +57,14 @@ const bandHeight = computed(() => Math.abs(needleY.value - centerY.value))
       </clipPath>
     </defs>
 
-    <!-- Background -->
+    <!-- Airbus-like VS channel -->
     <rect
       x="0"
       y="0"
       :width="width"
       :height="height"
-      fill="rgba(10,10,30,0.95)"
-      rx="2"
+      fill="#0b1126"
+      rx="1"
     />
 
     <g :clip-path="`url(#${clipId})`">
@@ -86,14 +86,14 @@ const bandHeight = computed(() => Math.abs(needleY.value - centerY.value))
           :y1="mark.y"
           :x2="width * 0.45"
           :y2="mark.y"
-          stroke="white"
+          stroke="#f4f6fb"
           :stroke-width="mark.fpm === 0 ? 1.5 : 1"
         />
         <text
           v-if="mark.fpm !== 0"
           :x="width * 0.55"
           :y="mark.y + 4"
-          fill="white"
+          fill="#f4f6fb"
           font-size="9"
           text-anchor="start"
           font-family="monospace"
@@ -109,14 +109,14 @@ const bandHeight = computed(() => Math.abs(needleY.value - centerY.value))
         :y="bandY"
         :width="width * 0.3"
         :height="Math.max(bandHeight, 1)"
-        fill="#22d3ee"
+        fill="#2fe5ff"
         opacity="0.7"
       />
 
       <!-- Needle indicator -->
       <polygon
         :points="`${width * 0.05},${needleY} ${width * 0.3},${needleY - 4} ${width * 0.3},${needleY + 4}`"
-        fill="#22d3ee"
+        fill="#2fe5ff"
       />
     </g>
 
@@ -125,7 +125,7 @@ const bandHeight = computed(() => Math.abs(needleY.value - centerY.value))
       v-if="Math.abs(verticalSpeed) > 50"
       :x="width / 2"
       :y="height - 6"
-      fill="#22d3ee"
+      fill="#2fe5ff"
       font-size="9"
       font-weight="bold"
       text-anchor="middle"