/** * Webflow HubSpot Preference Center - Base Styles * Add to Webflow via Custom Code (in ) or embed in your page * Customize classes to match your Webflow design system */ .preference-center { max-width: 480px; margin: 0 auto; padding: 2rem; font-family: system-ui, -apple-system, sans-serif; } .preference-center h2 { margin-top: 0; margin-bottom: 0.5rem; } .preference-center p { margin-top: 0; margin-bottom: 1rem; color: #6b7280; } .preference-center input[type="email"] { display: block; width: 100%; max-width: 320px; padding: 0.5rem 0.75rem; margin-bottom: 1rem; font-size: 1rem; border: 1px solid #d1d5db; border-radius: 6px; } /* Spam honeypot: off-screen, not display:none (some autofill still hits visible-ish fields). */ .preference-center .preference-honeypot-wrap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .preference-center .preference-honeypot-wrap label { position: absolute; left: -10000px; } .preference-center button { padding: 0.5rem 1rem; font-size: 1rem; font-weight: 500; color: white; background-color: #3b82f6; border: none; border-radius: 6px; cursor: pointer; } .preference-center button:hover:not(:disabled) { background-color: #2563eb; } .preference-center button:disabled { opacity: 0.6; cursor: not-allowed; } .preference-center .preference-label { display: block; margin-bottom: 0.5rem; font-weight: 500; } .preference-center .preference-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid #e5e7eb; } .preference-center .preference-toggle-row:last-child { border-bottom: none; } /* Toggle switch - neutral styling */ .preference-center .preference-toggle-wrap { position: relative; display: inline-flex; align-items: center; } .preference-center .preference-toggle { position: absolute; opacity: 0; width: 0; height: 0; } .preference-center .preference-switch { display: inline-block; width: 48px; height: 26px; background-color: #d1d5db; border-radius: 26px; cursor: pointer; transition: background-color 0.2s; } .preference-center .preference-switch::after { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 50%; transform: translateY(-50%); background-color: white; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.2s; } .preference-center .preference-toggle:checked + .preference-switch { background-color: #10b981; } .preference-center .preference-toggle:checked + .preference-switch::after { transform: translate(22px, -50%); } .preference-center #preference-loading { display: none; width: 20px; height: 20px; margin-left: 8px; vertical-align: middle; border: 2px solid #e5e7eb; border-top-color: #3b82f6; border-radius: 50%; animation: preference-spin 0.8s linear infinite; } @keyframes preference-spin { to { transform: rotate(360deg); } } .preference-center #preference-error, .preference-center #preference-success { margin-top: 1rem; padding: 0.75rem; border-radius: 6px; } .preference-center #preference-error { background-color: #fef2f2; color: #b91c1c; } .preference-center #preference-success { background-color: #f0fdf4; color: #15803d; }