:root { --btn-bg: #000; /* black */ --btn-text: #fff; /* white */ --btn-outline: #fff; /* white outline */ --input-bg: #fff; --input-text: #111; --input-border: #ddd; --focus: #000; --maxw: 720px; /* adjust if you want a narrower center */ } .sage-subscribe { width: 100%; max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; } .sage-subscribe input[type=email] { width: 100%; padding: 14px 16px; font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: var(--input-text); background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 8px; outline: none; } .sage-subscribe input[type=email]::placeholder { color: #777; } .sage-subscribe input[type=email]:focus { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(0,0,0,0.08); } .sage-subscribe button { padding: 14px 22px; font: 16px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: var(--btn-text); background: var(--btn-bg); border: 2px solid var(--btn-outline); border-radius: 8px; cursor: pointer; white-space: nowrap; transition: transform 0.1s ease, opacity 0.2s ease; } .sage-subscribe button:hover { opacity: 0.9; } .sage-subscribe button:active { transform: translateY(1px); } .sage-subscribe .msg { grid-column: 1 / -1; margin: 4px 2px 0; font: 14px/1.4 system-ui; color: #111; } /* Mobile: stack */ @media (max-width: 640px) { .sage-subscribe { grid-template-columns: 1fr; } .sage-subscribe button { width: 100%; } } /* Accessibility helper */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }