/* ============================================================ Form Sonic - Footer Opt-In Bar styles (1.10.12) Three templates (wide / centered / boldbar) driven by the same markup + CSS custom properties set inline by PHP: --fsf-bg, --fsf-headline, --fsf-subtext, --fsf-caption, --fsf-accent Desktop: full-width band, content row capped at 1100px. Under 700px: everything stacks and centers. ============================================================ */ .fsonic-footer-root { background: var(--fsf-bg, #1e3a5f); border-top: 4px solid var(--fsf-accent, #c8102e); width: 100%; box-sizing: border-box; /* The bar arrives at the very end of and is then moved above the theme footer by JS; either way it must never inherit odd theme spacing. */ margin: 0; padding: 34px 22px; overflow: hidden; } .fsonic-fbar-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 34px; } /* ── Image + caption column ── */ .fsonic-fbar-imgcol { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; } .fsonic-fbar-img { width: 120px; height: 120px; max-width: 120px; border-radius: 50%; object-fit: cover; display: block; border: 3px solid rgba(255, 255, 255, 0.85); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); } .fsonic-fbar-caption { color: var(--fsf-caption, #ffd34d); font-weight: 700; font-size: 14px; text-align: center; margin-top: 7px; } /* ── Text column ── */ .fsonic-fbar-text { flex: 1; min-width: 0; } .fsonic-fbar-headline { color: var(--fsf-headline, #ffd34d); font-size: 27px; font-weight: 800; line-height: 1.15; margin: 0 0 8px; } .fsonic-fbar-subtext { color: var(--fsf-subtext, #ffffff); font-size: 16px; font-weight: 600; line-height: 1.4; margin: 0; } /* ── Form column ── */ .fsonic-fbar-formcol { flex: 0 1 380px; min-width: 260px; } .fsonic-fbar-formcol .formsonic-form { margin: 0; } /* ── Template: Centered (stacked, everything centered) ── */ .fsonic-ftpl-centered { padding: 40px 22px 38px; } .fsonic-ftpl-centered .fsonic-fbar-inner { flex-direction: column; gap: 16px; max-width: 640px; text-align: center; } .fsonic-ftpl-centered .fsonic-fbar-headline, .fsonic-ftpl-centered .fsonic-fbar-subtext { text-align: center; } .fsonic-ftpl-centered .fsonic-fbar-formcol { flex: 0 0 auto; width: 100%; max-width: 420px; min-width: 0; } .fsonic-ftpl-centered .fsonic-fbar-img { width: 104px; height: 104px; max-width: 104px; } /* ── Template: Bold Bar (accent band, punchy, no image) ── */ .fsonic-ftpl-boldbar { background: var(--fsf-accent, #c8102e); border-top: none; padding: 26px 22px; } .fsonic-ftpl-boldbar .fsonic-fbar-imgcol { display: none; } .fsonic-ftpl-boldbar .fsonic-fbar-headline { font-size: 23px; margin-bottom: 5px; } .fsonic-ftpl-boldbar .fsonic-fbar-subtext { font-size: 14.5px; } /* ══════════════════════════════════════════════════════════ Mobile (under 700px): stack and center every template so the bar reads headline → subtext → image → form, thumb-friendly. ══════════════════════════════════════════════════════════ */ @media (max-width: 699px) { .fsonic-footer-root { padding: 28px 18px 26px; } .fsonic-fbar-inner { flex-direction: column; gap: 14px; text-align: center; } .fsonic-fbar-headline { font-size: 21px; text-align: center; margin-bottom: 6px; } .fsonic-fbar-subtext { font-size: 14px; text-align: center; } .fsonic-fbar-img, .fsonic-ftpl-centered .fsonic-fbar-img { width: 92px; height: 92px; max-width: 92px; } .fsonic-fbar-caption { font-size: 13px; margin-top: 5px; } /* Image drops BELOW the text on phones (text first sells the pitch). */ .fsonic-fbar-imgcol { order: 2; } .fsonic-fbar-text { order: 1; } .fsonic-fbar-formcol { order: 3; flex: 0 0 auto; width: 100%; max-width: 420px; min-width: 0; } }