.oneupheart-contact {
--contact-bg: var(--color-panel, #241116);
--contact-bg-strong: var(--color-panel-strong, #2d151c);
--contact-border: var(--color-border, #5b303a);
--contact-border-strong: var(--color-border-strong, #8a3b4d);
--contact-text: var(--color-text, #fff5ed);
--contact-muted: var(--color-muted, #d8bbb5);
--contact-faint: var(--color-faint, #a9827e);
--contact-red: var(--color-heart, #ff355f);
--contact-green: var(--color-green, #00d47f);
display: grid;
grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
width: 100%;
max-width: 1120px;
margin: 0 auto;
color: var(--contact-text);
background: var(--contact-bg);
border: 1px solid var(--contact-border);
border-radius: var(--radius, 8px);
overflow: hidden;
}
.oneupheart-contact *,
.oneupheart-contact *::before,
.oneupheart-contact *::after {
box-sizing: border-box;
}
.oneupheart-contact-intro {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
padding: clamp(26px, 4vw, 48px);
background: var(--contact-bg-strong);
border-right: 1px solid var(--contact-border);
}
.oneupheart-contact-kicker {
display: block;
margin-bottom: 10px;
color: var(--contact-green);
font-size: 0.78rem;
font-weight: 800;
line-height: 1.25;
text-transform: uppercase;
}
.oneupheart-contact-intro h2,
.oneupheart-contact-success h3 {
margin: 0;
color: var(--contact-text);
font-size: clamp(1.45rem, 3vw, 2rem);
line-height: 1.12;
letter-spacing: 0;
}
.oneupheart-contact-intro p {
margin: 14px 0 0;
color: var(--contact-muted);
line-height: 1.65;
}
.oneupheart-contact-response-time {
display: flex;
gap: 7px;
margin-top: 26px;
}
.oneupheart-contact-response-time span {
width: 7px;
height: 7px;
background: var(--contact-green);
border-radius: 50%;
opacity: 0.35;
}
.oneupheart-contact-response-time span:nth-child(2) {
opacity: 0.65;
}
.oneupheart-contact-response-time span:nth-child(3) {
opacity: 1;
}
.oneupheart-contact-form-panel {
min-width: 0;
padding: clamp(22px, 4vw, 42px);
}
.oneupheart-contact-fallback-notice,
.oneupheart-contact-status,
.oneupheart-contact-config-error {
margin: 0 0 18px;
padding: 10px 12px;
border-left: 3px solid var(--contact-red);
color: var(--contact-red);
background: color-mix(in srgb, var(--contact-red) 8%, transparent);
font-size: 0.9rem;
line-height: 1.45;
}
.oneupheart-contact-fallback-notice.is-success,
.oneupheart-contact-status.is-success {
border-color: var(--contact-green);
color: var(--contact-green);
background: color-mix(in srgb, var(--contact-green) 8%, transparent);
}
.oneupheart-contact-fallback-notice strong,
.oneupheart-contact-fallback-notice span {
display: block;
}
.oneupheart-contact-fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.oneupheart-contact-field {
min-width: 0;
}
.oneupheart-contact-field.is-message {
grid-column: 1 / -1;
}
.oneupheart-contact-field > label {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin: 0 0 7px;
color: var(--contact-text);
font-size: 0.84rem;
font-weight: 800;
}
.oneupheart-contact-field > label small {
color: var(--contact-faint);
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
}
.oneupheart-contact-field input,
.oneupheart-contact-field textarea {
display: block;
width: 100%;
max-width: 100%;
margin: 0;
padding: 12px 13px;
color: var(--contact-text);
background: var(--color-bg, #160a0e);
border: 1px solid var(--contact-border);
border-radius: 6px;
box-shadow: none;
font: inherit;
font-size: 0.95rem;
line-height: 1.4;
outline: none;
transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.oneupheart-contact-field textarea {
min-height: 178px;
resize: vertical;
}
.oneupheart-contact-field input::placeholder,
.oneupheart-contact-field textarea::placeholder {
color: var(--contact-faint);
opacity: 0.78;
}
.oneupheart-contact-field input:focus,
.oneupheart-contact-field textarea:focus {
border-color: var(--contact-green);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--contact-green) 20%, transparent);
}
.oneupheart-contact-field.is-invalid input,
.oneupheart-contact-field.is-invalid textarea {
border-color: var(--contact-red);
}
.oneupheart-contact-field.is-valid input,
.oneupheart-contact-field.is-valid textarea {
border-color: color-mix(in srgb, var(--contact-green) 65%, var(--contact-border));
}
.oneupheart-contact-field-error {
display: block;
min-height: 18px;
margin-top: 5px;
color: var(--contact-red);
font-size: 0.75rem;
line-height: 1.35;
}
.oneupheart-contact-message-meta {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
color: var(--contact-faint);
font-size: 0.75rem;
}
.oneupheart-contact-message-meta .oneupheart-contact-field-error {
flex: 1 1 auto;
}
.oneupheart-contact-message-meta [data-contact-counter] {
flex: 0 0 auto;
padding-top: 5px;
}
.oneupheart-contact-turnstile {
width: 100%;
max-width: 100%;
min-height: 66px;
margin: 14px 0 18px;
overflow: hidden;
}
.oneupheart-contact-turnstile iframe {
max-width: 100% !important;
}
.oneupheart-contact-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding-top: 18px;
border-top: 1px solid var(--contact-border);
}
.oneupheart-contact-actions p {
max-width: 430px;
margin: 0;
color: var(--contact-faint);
font-size: 0.76rem;
line-height: 1.5;
}
.oneupheart-contact-actions a {
color: var(--contact-muted);
text-decoration: underline;
text-underline-offset: 2px;
}
.oneupheart-contact-submit,
.oneupheart-contact-success button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-width: 148px;
min-height: 44px;
padding: 10px 18px;
color: #fff;
background: var(--contact-red);
border: 1px solid var(--contact-red);
border-radius: 6px;
box-shadow: none;
font: inherit;
font-size: 0.9rem;
font-weight: 800;
line-height: 1.2;
cursor: pointer;
transition: filter 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
.oneupheart-contact-submit:hover,
.oneupheart-contact-submit:focus-visible,
.oneupheart-contact-success button:hover,
.oneupheart-contact-success button:focus-visible {
filter: brightness(1.12);
outline: none;
}
.oneupheart-contact-submit:disabled {
cursor: not-allowed;
opacity: 0.55;
}
.oneupheart-contact-submit-indicator {
display: none;
width: 16px;
height: 16px;
margin-left: 9px;
border: 2px solid rgba(255, 255, 255, 0.4);
border-top-color: #fff;
border-radius: 50%;
animation: oneupheart-contact-spin 700ms linear infinite;
}
.oneupheart-contact-form.is-submitting .oneupheart-contact-submit-indicator {
display: block;
}
.oneupheart-contact-status:empty {
display: none;
}
.oneupheart-contact-status {
margin-top: 16px;
margin-bottom: 0;
}
.oneupheart-contact-success {
min-height: 340px;
padding: clamp(18px, 5vw, 44px) 0;
text-align: center;
}
.oneupheart-contact-success[hidden] {
display: none;
}
.oneupheart-contact-success-mark {
position: relative;
display: block;
width: 58px;
height: 58px;
margin: 0 auto 20px;
background: color-mix(in srgb, var(--contact-green) 12%, transparent);
border: 1px solid var(--contact-green);
border-radius: 50%;
}
.oneupheart-contact-success-mark::after {
position: absolute;
top: 14px;
left: 20px;
width: 14px;
height: 24px;
border-right: 4px solid var(--contact-green);
border-bottom: 4px solid var(--contact-green);
content: '';
transform: rotate(45deg);
}
.oneupheart-contact-success p {
max-width: 520px;
margin: 14px auto 0;
color: var(--contact-muted);
line-height: 1.6;
}
.oneupheart-contact-success strong {
display: block;
margin: 12px 0 22px;
color: var(--contact-green);
font-size: 0.88rem;
}
.oneupheart-contact-trap {
position: absolute !important;
left: -10000px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
@keyframes oneupheart-contact-spin {
to { transform: rotate(360deg); }
}
@media (max-width: 760px) {
.oneupheart-contact {
grid-template-columns: minmax(0, 1fr);
}
.oneupheart-contact-intro {
padding: 24px 20px;
border-right: 0;
border-bottom: 1px solid var(--contact-border);
}
.oneupheart-contact-response-time {
margin-top: 18px;
}
.oneupheart-contact-form-panel {
padding: 22px 18px;
}
}
@media (max-width: 480px) {
.oneupheart-contact-fields {
grid-template-columns: minmax(0, 1fr);
gap: 14px;
}
.oneupheart-contact-field.is-message {
grid-column: auto;
}
.oneupheart-contact-actions {
align-items: stretch;
flex-direction: column;
}
.oneupheart-contact-submit,
.oneupheart-contact-success button {
width: 100%;
}
.oneupheart-contact-turnstile {
margin-inline: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.oneupheart-contact *,
.oneupheart-contact *::before,
.oneupheart-contact *::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}