style: match hero section background color with version spans (#eee); add bg-version class

Author: rogeriopradoj

assets/stylesheets/index.css

@@ -18,6 +18,10 @@ body {
   padding-bottom: 70px;
 }
 
+.bg-version {
+  background-color: #eee;
+}
+
 .version {
   font-family: monospace;
   padding: 0.5rem 1rem;

dev/index.html

@@ -64,7 +64,7 @@
       </div>
     </nav>
 
-    <div class="py-5 px-4 my-5 text-center bg-body-tertiary rounded-3">
+    <div class="py-5 px-4 my-5 text-center bg-version rounded-3">
       <h1>
         <span class="cadeoleo-baby-1"></span>
         Cadê o Léo!

dev/index_en.html

@@ -64,7 +64,7 @@
       </div>
     </nav>
 
-    <div class="py-5 px-4 my-5 text-center bg-body-tertiary rounded-3">
+    <div class="py-5 px-4 my-5 text-center bg-version rounded-3">
       <h1>
         <span class="cadeoleo-baby-1"></span>
         Where's Leo!

test/e2e/version-style.spec.js

@@ -15,10 +15,10 @@ test.describe('Version span style', () => {
     expect(bgColor).toBe('rgb(238, 238, 238)'); // #eee
   });
 
-  test('hero section should have gray background via Bootstrap bg-body-tertiary', async ({ page, baseURL }) => {
+  test('hero section should have same gray background as version spans', async ({ page, baseURL }) => {
     await page.goto(baseURL + '/');
-    const hero = await page.locator('.bg-body-tertiary').first();
-    await expect(hero).toBeVisible();
-    // Just verify the class exists and element is visible
+    const hero = await page.locator('.bg-version').first();
+    const bgColor = await hero.evaluate(el => getComputedStyle(el).backgroundColor);
+    expect(bgColor).toBe('rgb(238, 238, 238)'); // #eee - same as .version
   });
 });