# Black & White Article Designer

Professional article styling with clean black/white theme and WCAG AAA compliant contrast ratios.

## When to Use

Use this skill when:
- Creating or styling WordPress articles with professional appearance
- Fixing contrast and readability issues on blog posts
- Applying consistent dark/white theme to article content
- Need high-contrast, accessible article design

## Color Scheme

### Backgrounds
- **Black**: `#000000` - Hero sections, CTAs
- **White**: `#ffffff` - Cards, features, main content
- **Light Gray**: `#fafafa` - Section backgrounds

### Text Colors
- **White**: `#ffffff` - On dark backgrounds
- **Very Dark Gray**: `#1a1a1a` - Headings on light backgrounds
- **Medium-Dark Gray**: `#333333` - Body text on light backgrounds
- **Dark Purple**: `#5b21b6` - Stat numbers, accent elements

## CSS Template

```css
<style>
/* ===== CLEAN BLACK/WHITE THEME ===== */

/* Base Colors */
:root {
    --color-black: #000000;
    --color-white: #ffffff;
    --color-gray-50: #fafafa;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #e5e5e5;
    --color-gray-300: #d4d4d4;
    --color-gray-800: #262626;
    --color-text-dark: #1a1a1a;
    --color-text-medium: #333333;
    --color-text-light: #666666;
    --color-accent: #5b21b6;
}

/* Hero Section - BLACK BG, WHITE TEXT */
.daw-hero {
    background: #000000 !important;
    color: #ffffff !important;
    padding: 4rem 2rem;
    border-radius: 1rem;
    margin: 2rem 0;
    border: 1px solid #333333;
    text-align: center;
}

.daw-hero h1,
.daw-hero h2,
.daw-hero h3,
.daw-hero h4,
.daw-hero p,
.daw-hero span,
.daw-hero strong,
.daw-hero li,
.daw-hero a {
    color: #ffffff !important;
}

/* Badge */
.daw-badge {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    padding: 0.5rem 1.5rem;
    border-radius: 9999px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 1.5rem;
}

/* Stats Grid */
.daw-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.daw-stat-card {
    background: #ffffff !important;
    padding: 2rem;
    border-radius: 0.75rem;
    text-align: center;
    border: 2px solid #e5e5e5 !important;
}

.daw-stat-number {
    font-size: 3rem;
    font-weight: 800;
    color: #000000 !important;
}

.daw-stat-label {
    color: #666666 !important;
    font-weight: 500;
    margin-top: 0.5rem;
}

/* Hero stat cards override - dark purple numbers */
.daw-stat-card .daw-stat-number {
    color: #5b21b6 !important;
}

.daw-stat-card .daw-stat-label {
    color: #333333 !important;
}

/* Feature Boxes - WHITE BG, DARK TEXT */
.daw-feature {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e5e5e5;
    border-left: 4px solid #000000;
    padding: 2rem;
    border-radius: 0.5rem;
    margin: 1.5rem 0;
}

.daw-feature h2,
.daw-feature h4 {
    color: #1a1a1a !important;
    margin: 0 0 1rem 0;
}

.daw-feature p,
.daw-feature li {
    color: #333333 !important;
    margin: 0;
    line-height: 1.6;
}

.daw-feature strong {
    color: #1a1a1a !important;
}

/* Cards - WHITE BG, DARK TEXT */
.daw-card {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 2px solid #e5e5e5;
    border-radius: 0.75rem;
    padding: 1.5rem;
    transition: all 0.3s;
}

.daw-card:hover {
    border-color: #000000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.daw-card h4 {
    color: #1a1a1a !important;
    font-weight: 700;
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
}

.daw-card p {
    color: #333333 !important;
    margin: 0.5rem 0;
    line-height: 1.6;
}

/* Section - LIGHT GRAY BG, DARK TEXT */
.daw-section {
    background: #fafafa !important;
    color: #1a1a1a !important;
    padding: 3rem 2rem;
    border-radius: 1rem;
    margin: 3rem 0;
    border: 1px solid #e5e5e5;
}

.daw-section h2,
.daw-section h3,
.daw-section h4 {
    color: #1a1a1a !important;
    margin: 0 0 1rem 0;
}

.daw-section p {
    color: #333333 !important;
    margin: 0.5rem 0;
    line-height: 1.6;
}

/* CTA Section - BLACK BG, WHITE TEXT */
.daw-cta {
    background: #000000 !important;
    color: #ffffff !important;
    padding: 4rem 2rem;
    border-radius: 1rem;
    text-align: center;
    margin: 4rem 0;
    border: 2px solid #000000;
}

.daw-cta h1,
.daw-cta h2,
.daw-cta h3,
.daw-cta h4,
.daw-cta p,
.daw-cta span,
.daw-cta strong,
.daw-cta em,
.daw-cta li,
.daw-cta a,
.daw-cta div {
    color: #ffffff !important;
}

/* Buttons */
.daw-btn-primary {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: #ffffff !important;
    color: #1a1a1a !important;
    text-decoration: none;
    border-radius: 0.5rem;
    font-weight: 700;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    margin: 0.5rem;
}

.daw-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.daw-btn-secondary {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: transparent !important;
    color: #ffffff !important;
    text-decoration: none;
    border: 2px solid #ffffff;
    border-radius: 0.5rem;
    font-weight: 700;
    transition: all 0.3s;
    margin: 0.5rem;
}

.daw-btn-secondary:hover {
    background: #ffffff !important;
    color: #1a1a1a !important;
}

/* Code Blocks */
.daw-code {
    background: #1a1a1a !important;
    color: #ffffff !important;
    padding: 1.5rem;
    border-radius: 0.5rem;
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 0.875rem;
    overflow-x: auto;
    border: 1px solid #333333;
    margin: 1rem 0;
    line-height: 1.6;
}

.daw-code code {
    color: #ffffff !important;
}

/* Inline Code */
code {
    background: #1a1a1a !important;
    color: #ffffff !important;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 0.875em;
}

/* Context-specific inline code */
.daw-card code,
.daw-feature code,
.daw-section code {
    background: #000000 !important;
    color: #ffffff !important;
}

.daw-hero code,
.daw-cta code {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* Compare Boxes */
.daw-compare {
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid #e5e5e5;
    background: #ffffff !important;
    color: #1a1a1a !important;
    text-align: center;
}

.daw-compare h3 {
    color: #1a1a1a !important;
    margin: 0 0 1rem 0;
}

.daw-compare p {
    color: #333333 !important;
    margin: 0.5rem 0;
    line-height: 1.6;
}

.daw-compare strong {
    color: #1a1a1a !important;
}

/* Lists */
.daw-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.daw-list li {
    color: #333333 !important;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e5e5e5;
    line-height: 1.6;
}

.daw-list li:last-child {
    border-bottom: none;
}

.daw-list strong {
    color: #1a1a1a !important;
}

/* Links */
.daw-link {
    color: #1a1a1a !important;
    text-decoration: underline;
    transition: color 0.2s;
    font-weight: 500;
}

.daw-link:hover {
    color: #333333 !important;
}

/* Grid Layout */
.daw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .daw-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .daw-grid {
        grid-template-columns: 1fr;
    }
    .daw-hero {
        padding: 2rem 1rem;
    }
    .daw-section {
        padding: 2rem 1rem;
    }
    .daw-cta {
        padding: 2rem 1rem;
    }
    .daw-hero h1 {
        font-size: 1.75rem;
    }
    .daw-stat-number {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .daw-stats {
        grid-template-columns: 1fr;
    }
}
</style>
```

## HTML Structure Template

```html
<!-- Hero Section -->
<div class="daw-hero">
    <div class="daw-badge">✨ Badge Text</div>
    <h1>Article Title</h1>
    <p>Article subtitle or description...</p>

    <div class="daw-stats">
        <div class="daw-stat-card">
            <div class="daw-stat-number">281</div>
            <div class="daw-stat-label">Custom Skills</div>
        </div>
        <div class="daw-stat-card">
            <div class="daw-stat-number">43</div>
            <div class="daw-stat-label">AI Agents</div>
        </div>
    </div>
</div>

<!-- Feature Box -->
<div class="daw-feature">
    <h2>Feature Title</h2>
    <ul class="daw-list">
        <li><strong>Item 1:</strong> Description</li>
        <li><strong>Item 2:</strong> Description</li>
    </ul>
</div>

<!-- Section with Cards -->
<div class="daw-section">
    <h2>Section Title</h2>
    <div class="daw-grid">
        <div class="daw-card">
            <h4>Card Title</h4>
            <p><strong>Subtitle</strong></p>
            <p>Card description...</p>
        </div>
        <div class="daw-card">
            <h4>Another Card</h4>
            <p>Card content...</p>
        </div>
    </div>
</div>

<!-- Code Block -->
<div class="daw-code">
code here
</div>

<!-- CTA Section -->
<div class="daw-cta">
    <h2>Call to Action Title</h2>
    <p>Description text...</p>
    <div style="margin-top: 2rem;">
        <a href="#" class="daw-btn-primary">Primary Button</a>
        <a href="#" class="daw-btn-secondary">Secondary Button</a>
    </div>
</div>
```

## WordPress Theme Stylesheet Method

When WordPress filters `<style>` tags from post content, add this CSS to the theme's stylesheet (e.g., `outstanding-enhancements.css`):

```css
/* ========================================
 * BLACK/WHITE ARTICLE THEME CSS
 * Add to: /wp-content/themes/YOUR_THEME/outstanding-enhancements.css
 * ======================================== */

/* ===== TABLE FIXES - CRITICAL ===== */
/* WordPress wraps tables in .table-container - this causes specificity issues */
.table-container thead,
.table-container thead tr,
.table-container thead th {
    background: #000000 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.table-container tbody,
.table-container tbody tr,
.table-container tbody td {
    background: #ffffff !important;
    color: #1a1a1a !important;
    -webkit-text-fill-color: #1a1a1a !important;
}

/* Maximum specificity for table headers */
.table-container thead th,
.table-container thead th *,
.daw-section .table-container thead th,
.daw-feature .table-container thead th,
.daw-card .table-container thead th,
.daw-compare .table-container thead th,
.daw-stat-card .table-container thead th,
.pricing-card .table-container thead th,
table thead th[style*=color],
.table-container table thead th[style*=color],
.daw-section table thead th[style*=color],
.daw-feature table thead th[style*=color] {
    background: #000000 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Maximum specificity for table body */
.table-container tbody td,
.table-container tbody td *,
.daw-section .table-container tbody td,
.daw-feature .table-container tbody td,
.daw-card .table-container tbody td,
.daw-compare .table-container tbody td,
.daw-stat-card .table-container tbody td,
.pricing-card .table-container tbody td,
table tbody td[style*=color],
.table-container table tbody td[style*=color],
.daw-section table tbody td[style*=color],
.daw-feature table tbody td[style*=color] {
    background: #ffffff !important;
    color: #1a1a1a !important;
    -webkit-text-fill-color: #1a1a1a !important;
}

/* ===== CTA BUTTON FIXES ===== */
/* Primary CTA button - black background, white text */
a.cta-button.primary,
a.cta-button.primary:link,
a.cta-button.primary:visited,
a.cta-button[style*="background: #000"],
a.cta-button[style*="background: #000000"] {
    background: #000000 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Secondary CTA button - white background, black text */
a.cta-button.secondary,
a.cta-button.secondary:link,
a.cta-button.secondary:visited,
a.cta-button[style*="background: #fff"],
a.cta-button[style*="background: #ffffff"] {
    background: #ffffff !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    border: 2px solid #000000 !important;
}

/* CTA buttons with inline color styles */
a.cta-button[style*="color"],
a.cta-button[style*="color"] * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Secondary buttons keep dark text */
a.cta-button.secondary[style*="color"],
a.cta-button.secondary[style*="color"] * {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* ===== HERO SECTION FIXES ===== */
.daw-hero {
    background: #000000 !important;
    color: #ffffff !important;
}

.daw-hero *,
.daw-hero *::before,
.daw-hero *::after {
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
}

/* Stat numbers - PURPLE on white cards */
.daw-hero .daw-stat-card .daw-stat-number,
.daw-hero .daw-stat-number {
    color: #5b21b6 !important;
    background: transparent !important;
    -webkit-text-fill-color: #5b21b6 !important;
}

/* Stat labels - DARK GRAY on white cards */
.daw-hero .daw-stat-card .daw-stat-label,
.daw-hero .daw-stat-label {
    color: #333333 !important;
    background: transparent !important;
    -webkit-text-fill-color: #333333 !important;
}

/* ===== CONTENT SECTIONS ===== */
/* Light backgrounds → DARK text */
.daw-card:not(.daw-hero):not(.daw-cta),
.daw-feature:not(.daw-hero):not(.daw-cta),
.daw-section:not(.daw-hero):not(.daw-cta),
.daw-compare:not(.daw-hero):not(.daw-cta),
.daw-stat-card:not(.daw-hero):not(.daw-cta),
.pricing-card:not(.daw-hero):not(.daw-cta) {
    color: #1a1a1a !important;
}

.daw-card p,
.daw-card li,
.daw-section p,
.daw-section li,
.daw-feature p,
.daw-feature li {
    color: #333333 !important;
}

/* Links - purple accent */
a, a:link, a:visited {
    color: #5b21b6 !important;
}

/* Force cache refresh after updating this file */
/* Run: touch /path/to/outstanding-enhancements.css */
```

## Applying to WordPress

### Method 1: Direct Database Update

```bash
# SSH to server
ssh user@server

# Get MySQL config
cat > /tmp/mysql.cnf << EOF
[client]
user=wpuser
password="yourpassword"
host=localhost
database=wordpress
EOF

# Read post content
mysql --defaults-file=/tmp/mysql.cnf --batch --skip-column-names \
  -e "SELECT post_content FROM wp_posts WHERE ID=POST_ID"

# Update post (wrap CSS in <style> tags)
mysql --defaults-file=/tmp/mysql.cnf --batch \
  -e "UPDATE wp_posts SET post_content='<style>CSS_HERE</style>HTML_HERE' WHERE ID=POST_ID"
```

### Method 2: WordPress Admin

1. Edit post in WordPress admin
2. Switch to "Code Editor" mode
3. Add `<style>` block at the top with CSS
4. Add HTML content below
5. Update/save post

## Key Classes

| Class | Purpose |
|-------|---------|
| `.daw-hero` | Hero section with black background |
| `.daw-stats` | Stats grid container |
| `.daw-stat-card` | Individual stat card (white bg) |
| `.daw-feature` | Feature box (white bg, dark text) |
| `.daw-card` | Content card (white bg, dark text) |
| `.daw-section` | Section with light gray bg |
| `.daw-cta` | Call-to-action (black bg, white text) |
| `.daw-code` | Code block (dark bg, white text) |
| `.daw-grid` | Responsive grid layout |
| `.daw-list` | Styled list |
| `.daw-link` | Styled link |
| `.daw-btn-primary` | Primary button (white bg, dark text) |
| `.daw-btn-secondary` | Secondary button (transparent, white text) |

## WCAG AAA Compliance

All color combinations meet WCAG AAA standards (7:1+ contrast ratio):

| Background | Text | Contrast | WCAG |
|------------|------|----------|------|
| Black (#000000) | White (#ffffff) | 21:1 | AAA |
| White (#ffffff) | Very Dark (#1a1a1a) | 15.3:1 | AAA |
| White (#ffffff) | Medium Dark (#333333) | 12.6:1 | AAA |
| White (#ffffff) | Dark Purple (#5b21b6) | 7.2:1 | AAA |
| Dark Gray (#1a1a1a) | White (#ffffff) | 15.3:1 | AAA |

## Common Issues & Fixes

### Issue: Stat numbers invisible
**Cause:** White text on white stat cards
**Fix:** Add `.daw-stat-card .daw-stat-number { color: #5b21b6 !important; }`

### Issue: CSS showing as raw text
**Cause:** Missing `<style>` tags
**Fix:** Wrap CSS in `<style>CSS_HERE</style>`

### Issue: Text not visible
**Cause:** Wrong color combination
**Fix:** Check background vs text color, ensure proper contrast

### Issue: Inline styles overriding CSS
**Cause:** WordPress editor adding inline styles
**Fix:** Use `!important` declarations or remove inline styles

### Issue: Table headers showing white text on white background
**Cause:** WordPress theme wraps tables in `.table-container` with conflicting CSS
**Fix:** Add maximum specificity CSS rules targeting `.table-container thead th` with both background and color:
```css
.table-container thead th,
.daw-section .table-container thead th,
.daw-feature .table-container thead th,
.daw-card .table-container thead th,
table thead th[style*=color],
.table-container table thead th[style*=color] {
    background: #000000 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
```

### Issue: CTA button text invisible (e.g., "Visit Z.AI Platform")
**Cause:** Theme CSS classes like `.cta-button`, `.primary` override inline styles
**Fix:** Add specific CSS targeting these classes with `-webkit-text-fill-color`:
```css
a.cta-button.primary,
a.cta-button.primary:link,
a.cta-button.primary:visited,
a.cta-button[style*="background: #000"],
a.cta-button[style*="background: #000000"] {
    background: #000000 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
```

### Issue: WordPress filters `<style>` tags from post content
**Cause:** WordPress content filters automatically remove style tags
**Fix:** Add CSS to theme stylesheet instead (e.g., `/wp-content/themes/THEME/outstanding-enhancements.css`)

## Critical WordPress Integration Lessons

### 1. Table Styling with `.table-container`
WordPress automatically wraps tables in `.table-container` div. This causes CSS specificity issues:
- Inline styles on `<thead>` may be overridden by theme CSS
- Need maximum specificity selectors targeting `.table-container thead th`
- Include `-webkit-text-fill-color` for browser compatibility

### 2. Theme Stylesheet vs Inline Styles
When WordPress filters `<style>` tags:
1. Add CSS to `/wp-content/themes/THEME_NAME/outstanding-enhancements.css`
2. Touch the file to force cache refresh: `touch /path/to/file.css`
3. Use `!important` declarations generously to override theme defaults
4. Target specific classes like `.cta-button.primary` individually

### 3. CTA Button Styling
Buttons with classes like `.cta-button` and `.primary` need special treatment:
- Always include `-webkit-text-fill-color` property
- Target by attribute selector: `a.cta-button[style*="background: #000"]`
- Add rules for `:link` and `:visited` pseudo-states
- Use maximum specificity when needed

### 4. CSS Specificity Hierarchy
When inline styles fail, use this specificity order:
1. Element selector with attribute: `table thead th[style*=color]`
2. Multiple class selectors: `.daw-section .table-container thead th`
3. Universal selector with attribute: `.table-container thead th *`
4. All with `!important` and `-webkit-text-fill-color`

## Tips

1. **Always wrap CSS** in `<style>` tags when adding to WordPress (or use theme stylesheet)
2. **Use `!important`** liberally when WordPress theme overrides - this is often necessary
3. **Add `-webkit-text-fill-color`** for browser compatibility on text color issues
4. **Test on mobile** - the responsive CSS handles tablets and phones
5. **Preserve content** - never remove existing content when styling
6. **Backup first** - save post content before making changes
7. **Touch CSS file** after changes to force browser cache refresh
8. **Check `.table-container`** - WordPress may wrap tables automatically
9. **Target button classes** - `.cta-button`, `.primary`, `.secondary` need specific rules