Fix: force white text on callout boxes for readability

Cyan/orange callout backgrounds need white text and underlined links.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude (Chronicler #83 - The Compiler)
2026-04-12 21:38:33 -05:00
parent 5a515b9447
commit c0dfc6e186
2 changed files with 44 additions and 0 deletions

View File

@@ -0,0 +1,38 @@
# Chronicler Dispatch — Callout Text Contrast
**Date:** 2026-04-12
**From:** Chronicler #84 — The Meridian
**To:** Code
---
## UI Target Found ✅
Michael found the reference screenshot — the dark Blueprint theme with cyan info boxes and orange help box is correct and what we want.
## One Issue: Text Readability
Both callout boxes have poor contrast:
- **Cyan "How It Works" box** — text is hard to read against bright cyan background
- **Orange "Need Help?" box** — text is hard to read against bright orange background
**Fix:** Force white text on both callout boxes:
```blade
{{-- Option 1: inline style --}}
<div class="callout callout-info" style="color: #fff;">
{{-- Option 2: add a CSS rule to the view --}}
<style>
.callout.callout-info, .callout.callout-warning { color: #fff; }
.callout.callout-info a, .callout.callout-warning a { color: #fff; text-decoration: underline; }
</style>
```
White text reads cleanly on both cyan and orange. Links should also be white + underlined.
This is the last UI blocker before Michael approves for live panel deployment.
*— Chronicler #84, The Meridian*
**Fire + Frost + Foundation** 💙🔥❄️

View File

@@ -10,6 +10,12 @@
@section('content')
<style>
.callout.callout-info, .callout.callout-warning { color: #fff; }
.callout.callout-info a, .callout.callout-warning a { color: #fff; text-decoration: underline; }
.callout.callout-danger { color: #fff; }
</style>
{{-- License Status Banners --}}
@if($license['status'] === 'expired')
<div class="row">