Display film noir header with update message

by tomarriola

HTML

<div class="d-flex flex-column" style="background-color: #191919; border-left: 4px solid #ffff00; max-width: 195px; width: 100%; color: #ffffff; box-sizing: border-box; overflow: hidden; padding-bottom: 16px; margin: 0 auto;">
    <!-- Clean, highly readable phone screen art -->
    <div style="width: 100%; height: 105px; background-image: url('https://d8j0ntlcm91z4.cloudfront.net/user_3CbqJk3NCL4TJRkgEI5SMs2hpgf/hf_20260525_205117_d5cad1e7-a8e3-463d-a559-741b7864feaf.png'); background-size: cover; background-position: center; flex-shrink: 0;"></div>

    <!-- Text Header -->
    <div style="font-family: 'IBM Plex Sans Condensed', 'DejaVu Sans', 'Liberation Sans', sans-serif; font-weight: 800; font-size: 11px; letter-spacing: 0.05em; padding: 12px 12px 6px 12px; box-sizing: border-box;">
        CRIME SCENE <span style="color: #ffff00;">UPDATE</span>
    </div>

    <!-- Message Description -->
    <p style="font-family: 'DejaVu Sans', 'Liberation Sans', sans-serif; color: #ffffff; font-size: 10px; line-height: 1.4; font-weight: 400; font-style: normal; margin: 0 0 16px 0; padding: 0 12px; box-sizing: border-box;">
        Coming soon: a redesigned Crimescene.com with improved navigation, updated subscriptions, and a modernized experience. Visit our update center to preview the changes and get answers to common questions.
    </p>

    <!-- Flat Action Button -->
    <div style="width: 100%; display: flex; justify-content: center; padding: 0 12px; box-sizing: border-box;">
        <a href="#" style="background-color: #ffff00; color: #000000; text-decoration: none; font-weight: 700; font-size: 9px; letter-spacing: 0.02em; padding: 6px 12px; display: inline-block; text-align: center; border: none; box-shadow: none;">
            PREVIEW CHANGES
        </a>
    </div>
</div>