/* ============================================================ AFFILIATE CTA — all three placements Append to bottom of style.css ============================================================ */ /* ── TOP BAR ───────────────────────────────────────────────── */ .affiliate-bar-top { background: #f0fdf4; border-bottom: 1px solid #bbf7d0; padding: 12px 0; } .affiliate-bar-top .container { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .affiliate-bar-label { font-size: 0.82rem; font-weight: 700; color: #166534; white-space: nowrap; flex-shrink: 0; } .affiliate-bar-links { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; } .affiliate-bar-btn { display: inline-block; padding: 6px 14px; background: #16a34a; color: #fff; border-radius: 6px; font-size: 0.8rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .15s; } .affiliate-bar-btn:hover { background: #15803d; color: #fff; } .affiliate-disclosure-inline { font-size: 0.72rem; color: #6b7280; white-space: nowrap; margin-left: auto; } @media(max-width:640px){ .affiliate-bar-top .container { flex-direction: column; align-items: flex-start; } .affiliate-disclosure-inline { margin-left: 0; } } /* ── MID INLINE STRIP ─────────────────────────────────────── */ .affiliate-strip { background: #ecfdf5; border-top: 2px solid #bbf7d0; border-bottom: 2px solid #bbf7d0; padding: 28px 0; margin: 40px 0; } .affiliate-strip-heading { font-size: 1rem; font-weight: 700; color: #166534; margin: 0 0 14px 0; } .affiliate-strip-links { display: flex; gap: 10px; flex-wrap: wrap; } .affiliate-strip-btn { font-size: 0.88rem; padding: 8px 18px; background: #15803d; color: #fff !important; border-color: #15803d; } .affiliate-strip-btn:hover { background: #166534; border-color: #166534; color: #fff !important; } .affiliate-strip .affiliate-disclosure { margin-top: 14px; font-size: 0.78rem; color: #6b7280; } /* ── BOTTOM FULL SECTION ──────────────────────────────────── */ .affiliate-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 32px; } .affiliate-slot { display: flex; flex-direction: column; align-items: center; gap: 10px; } .affiliate-btn { width: 100%; text-align: center; white-space: nowrap; font-size: 0.92rem; padding: 0 14px; } .affiliate-note { margin: 0; font-size: 0.82rem; color: var(--muted); text-align: center; line-height: 1.5; } .affiliate-disclosure { margin-top: 28px; text-align: center; font-size: 0.82rem; color: var(--muted); } @media (max-width: 980px) { .affiliate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .affiliate-btn { white-space: normal; } } @media (max-width: 640px) { .affiliate-grid { grid-template-columns: 1fr; } }