update stories to impliment badge

docs/brand.md

@@ -83,6 +83,12 @@ Logo should not appear smaller than 40px in height for digital or 15mm for print
 - May be reversed to light color on dark charcoal backgrounds
 - Avoid busy or patterned backgrounds
 
+### Badge Style (for colored backgrounds)
+When the logo appears on olive green or other colored backgrounds (e.g., navigation, footer), apply badge styling to make the logo's beige background look intentional:
+- Border: 2px solid Deep Black (#1A1A1A)
+- Shadow: 4px 4px 6px rgba(26, 26, 26, 0.5)
+- This creates a "seal/stamp" effect that frames the logo professionally
+
 ### Do Not
 - Stretch or distort the logo
 - Change the logo colors outside the defined palette

docs/stories/story-12.2-core-css-theme-update.md

@@ -37,6 +37,18 @@
 | `--color-accent` | `#A5C87A` | Secondary light olive |
 | `--color-accent-light` | `#C5D9A5` | Pale olive for subtle backgrounds |
 
+### AC2.1: Logo Badge Styling
+
+**Given** the logo has a beige background that contrasts with olive green headers/footers
+**When** I add the logo badge styling
+**Then** the following CSS class is defined:
+
+| Class | Properties |
+|-------|------------|
+| `.logo-badge` | `border: 2px solid #1A1A1A; box-shadow: 4px 4px 6px rgba(26, 26, 26, 0.5);` |
+
+This creates a "seal/stamp" effect for the logo on olive green backgrounds, making the beige background look intentional rather than mismatched.
+
 ### AC3: Maintain Backward Compatibility Aliases
 
 **Given** existing components may use old color names
@@ -134,6 +146,16 @@ Use WebAIM Contrast Checker to verify:
 
 **Note:** If Off-White on Olive Green doesn't meet 4.5:1, use Deep Black text on olive backgrounds instead.
 
+### Logo Badge Styling
+
+```css
+/* Badge styling for logo on olive backgrounds */
+.logo-badge {
+  border: 2px solid var(--color-text);
+  box-shadow: 4px 4px 6px rgba(26, 26, 26, 0.5);
+}
+```
+
 ### CSS Theme Block Example
 
 ```css
@@ -170,6 +192,7 @@ Use WebAIM Contrast Checker to verify:
 
 - [ ] Update `@theme` block with new olive green values
 - [ ] Add olive green variants (hover, dark, light)
+- [ ] Add `.logo-badge` class with border and shadow
 - [ ] Update backward-compatible aliases
 - [ ] Update `.btn-primary` styles
 - [ ] Update `.btn-secondary` styles

docs/stories/story-12.3-blade-component-color-migration.md

@@ -18,6 +18,7 @@
 - Hover states: Use darker olive (`hover:bg-primary-hover`)
 - Mobile menu uses new olive colors
 - Active states updated accordingly
+- Logo: Apply `.logo-badge` class for badge/seal effect on olive background
 
 ### AC2: Footer Component Updated
 
@@ -28,6 +29,7 @@
 - Text: Off-White for contrast
 - Links: Light Olive with hover states
 - Social icons: Appropriate contrast colors
+- Logo: Apply `.logo-badge` class for badge/seal effect on olive background
 
 ### AC3: Card Components Updated
 
@@ -126,7 +128,7 @@
 **Components:**
 - `resources/views/components/navigation.blade.php`
 - `resources/views/components/footer.blade.php`
-- `resources/views/components/logo.blade.php`
+- `resources/views/components/logo.blade.php` - Add `logo-badge` class for badge/seal effect
 - `resources/views/components/language-toggle.blade.php`
 - `resources/views/components/spinner.blade.php`
 - `resources/views/components/toast.blade.php`
@@ -182,6 +184,8 @@
 
 - [ ] Update `navigation.blade.php`
 - [ ] Update `footer.blade.php`
+- [ ] Apply `.logo-badge` class to logo in navigation
+- [ ] Apply `.logo-badge` class to logo in footer
 - [ ] Update `language-toggle.blade.php`
 - [ ] Update `spinner.blade.php`
 - [ ] Update `toast.blade.php`