.lefeed-newsletter-wrapper {
width: 100%;
max-width: 1200px;
margin: 0rem auto 2rem;
padding: 0 1rem;
}
.lefeed-newsletter-container {
background: #093b48;
border-radius: 40px;
padding: 1.3rem 2rem;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
border: 1px solid #05232b;
}
.lefeed-newsletter-content {
display: flex;
flex-direction: column;
gap: 2rem;
align-items: stretch;
}
.lefeed-newsletter-header {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.lefeed-newsletter-form-wrapper {
width: 100%;
}
.lefeed-newsletter-title {
font-size: 1.95rem;
font-weight: 900;
color: #fff;
margin: 0;
line-height: 1;
}
.lefeed-newsletter-description {
font-size: 1rem;
color: #fff;
margin: 0;
line-height: 1.5;
}
.lefeed-newsletter-form {
width: 100%;
}
.lefeed-newsletter-form-group {
display: flex;
flex-direction: column;
gap: 1rem;
}
.lefeed-newsletter-input {
flex: 1;
padding: 0.875rem 1rem;
font-size: 1rem;
border: 2px solid #d1d5db;
border-radius: 8px;
outline: none;
transition: all 0.3s ease;
font-family: inherit;
}
input.lefeed-newsletter-input {
border-radius: 25px !important;
}
.lefeed-newsletter-input:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.lefeed-newsletter-input::placeholder {
color: #9ca3af;
}
.lefeed-newsletter-submit {
padding: 0.875rem 2rem;
font-size: 1rem;
font-weight: 600;
color: #ffffff;
background: #fed218;
border: none;
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 48px;
}
.lefeed-newsletter-submit:hover {
background: #e2bc15;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.lefeed-newsletter-submit:active {
transform: translateY(0);
}
.lefeed-newsletter-submit:disabled {
background: #9ca3af;
cursor: not-allowed;
transform: none;
box-shadow: none;
} .lefeed-newsletter-spinner {
display: inline-block;
width: 20px;
height: 20px;
}
.lefeed-spinner-icon {
animation: rotate 2s linear infinite;
width: 20px;
height: 20px;
}
.lefeed-spinner-icon .path {
stroke: #ffffff;
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
} .lefeed-newsletter-message {
margin-top: 1rem;
padding: 1rem;
border-radius: 8px;
font-size: 0.95rem;
line-height: 1.5;
text-align: center;
}
.lefeed-newsletter-message.success {
background: #8ae5af;
color: #065f46;
border: 1px solid #10b981;
padding: 10px;
border-radius: 25px;
}
.lefeed-newsletter-message.error {
background: #fee2e2;
color: #991b1b;
border: 1px solid #ef4444;
} .lefeed-newsletter-stacked .lefeed-newsletter-content {
flex-direction: column !important;
align-items: stretch !important;
gap: 1.5rem !important;
}
.lefeed-newsletter-stacked .lefeed-newsletter-header {
flex: unset !important;
text-align: center;
}
.lefeed-newsletter-stacked .lefeed-newsletter-form-wrapper {
flex: unset !important;
width: 100%;
} @media (min-width: 768px) {
.lefeed-newsletter-columns .lefeed-newsletter-content {
flex-direction: row;
align-items: center;
gap: 3rem;
}
.lefeed-newsletter-columns .lefeed-newsletter-header {
flex: 0 0 calc(33.333% - 1.5rem);
}
.lefeed-newsletter-columns .lefeed-newsletter-form-wrapper {
flex: 0 0 calc(66.667% - 1.5rem);
}
.lefeed-newsletter-form-group {
flex-direction: row;
align-items: stretch;
}
.lefeed-newsletter-submit {
flex-shrink: 0;
width: auto;
}
} @media (min-width: 640px) and (max-width: 767px) {
.lefeed-newsletter-form-group {
flex-direction: row;
align-items: stretch;
}
.lefeed-newsletter-submit {
flex-shrink: 0;
width: auto;
}
} @media (max-width: 639px) {
.lefeed-newsletter-container {
padding: 1.5rem;
}
.lefeed-newsletter-title {
font-size: 1.5rem;
}
.lefeed-newsletter-description {
font-size: 0.95rem;
}
.lefeed-newsletter-input,
.lefeed-newsletter-submit {
font-size: 0.95rem;
}
} @keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.lefeed-newsletter-message {
animation: fadeIn 0.3s ease-out;
}