Style Guide

Brand palette and utility classes for quick theming in your WordPress block theme.

:root{
  --brand-1: #BA1CFF; /* purple */
  --brand-2: #03aaff; /* blue */
  --brand-3: #ff017e; /* pink */
}
.wp-site-blocks h1, .wp-site-blocks h2 { letter-spacing: -0.02em; }
.cta-button { display:inline-block; padding:12px 20px; border-radius:12px; text-decoration:none; }
.cta-primary { background: var(--brand-1); color:#fff; }
.cta-secondary { background: var(--brand-2); color:#000; }
.badge { padding:6px 10px; border-radius:999px; background:var(--brand-3); color:#fff; font-size:12px; }
.card { padding:24px; border:1px solid rgba(0,0,0,0.06); border-radius:16px; box-shadow: 0 4px 12px rgba(0,0,0,0.04);}
.grid { display:grid; gap:20px; grid-template-columns: repeat(12, 1fr); }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-8 { grid-column: span 8; }
.hero { padding:60px 0;}
.small { font-size: 0.95rem; opacity: 0.9;}