.stowly-newsletter {
margin: 0;
padding: 28px 32px;
border-radius: var(--stowly-radius-lg);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.stowly-newsletter__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
gap: 28px;
align-items: center;
}
.stowly-newsletter__copy {
max-width: 380px;
}
.stowly-newsletter__title {
margin: 0 0 6px;
font-size: 20px;
font-weight: 700;
letter-spacing: -0.01em;
color: #fff;
}
.stowly-newsletter__lede {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.7);
}
.stowly-newsletter__form {
min-width: 0;
}
.stowly-newsletter__label {
display: block;
margin-bottom: 8px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
}
.stowly-newsletter__row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
}
.stowly-newsletter__input {
min-width: 0;
padding: 12px 14px;
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.06);
color: #fff;
border-radius: var(--stowly-radius-md);
font-size: 14px;
-webkit-appearance: none;
appearance: none;
}
.stowly-newsletter__input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.stowly-newsletter__input:focus {
outline: none;
border-color: rgba(31, 111, 235, 0.6);
box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.18);
}
.stowly-newsletter__submit {
padding: 12px 20px;
border: 0;
border-radius: var(--stowly-radius-md);
background: var(--stowly-color-primary);
color: #fff;
font-weight: 700;
font-size: 14px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(var(--stowly-color-primary-rgb), 0.3);
transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.stowly-newsletter__submit:hover,
.stowly-newsletter__submit:focus-visible {
background: var(--stowly-color-primary-hover);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(var(--stowly-color-primary-rgb), 0.4);
outline: none;
}
.stowly-newsletter__submit[disabled] {
opacity: 0.65;
cursor: progress;
transform: none;
}
.stowly-newsletter__feedback {
margin: 8px 0 0;
min-height: 18px;
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
}
.stowly-newsletter__feedback[data-state="success"] {
color: #5eead4;
}
.stowly-newsletter__feedback[data-state="error"] {
color: #fca5a5;
}
.stowly-newsletter__legal {
margin: 8px 0 0;
font-size: 12px;
color: rgba(255, 255, 255, 0.55);
line-height: 1.5;
}
.stowly-newsletter__legal a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
.stowly-newsletter__legal a:hover {
color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 720px) {
.stowly-newsletter {
padding: 22px 20px;
}
.stowly-newsletter__inner {
grid-template-columns: 1fr;
gap: 16px;
}
.stowly-newsletter__row {
grid-template-columns: 1fr;
}
}