/* =========================================== PERSUASIAN — CTA SYSTEM Sticky bar, exit-intent popup, lead magnet gate NOTE: Link this file separately in : Do NOT use @import in global.css for this file. =========================================== */ /* =========================================== A) STICKY CTA BAR =========================================== */ .cta-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9990; background: var(--ink); border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 0.875rem var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 1rem; /* Slide-up on appear */ transform: translateY(100%); transition: transform 0.35s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)); will-change: transform; } .cta-bar.cta-bar--visible { transform: translateY(0); } .cta-bar__left { display: flex; align-items: center; gap: 0.625rem; flex: 1; min-width: 0; } .cta-bar__indicator { width: 6px; height: 6px; background: var(--oxblood, #6E1F1F); border-radius: 50%; flex-shrink: 0; animation: cta-pulse 2.4s ease-in-out infinite; } @keyframes cta-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } } .cta-bar__text { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(245, 242, 236, 0.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cta-bar__right { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; } .cta-bar__btn { display: inline-flex; align-items: center; gap: 0.4rem; background: transparent; border: 1px solid var(--neon, #00F0FF); color: var(--neon, #00F0FF); font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.5rem 1rem; border-radius: 2px; cursor: pointer; text-decoration: none; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; white-space: nowrap; } .cta-bar__btn:hover, .cta-bar__btn:focus-visible { background: var(--neon, #00F0FF); color: var(--ink, #0E0E0F); transform: translateY(-1px); outline: none; } .cta-bar__close { background: none; border: none; color: rgba(245, 242, 236, 0.35); cursor: pointer; padding: 0.25rem; line-height: 1; font-size: 1.1rem; transition: color 0.2s ease; border-radius: 2px; display: flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; } .cta-bar__close:hover, .cta-bar__close:focus-visible { color: rgba(245, 242, 236, 0.8); outline: none; } /* =========================================== B) EXIT-INTENT POPUP =========================================== */ .cta-popup-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(14, 14, 15, 0.72); display: flex; align-items: center; justify-content: center; padding: var(--pad, 1.5rem); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; backdrop-filter: blur(4px); } .cta-popup-overlay.cta-popup--visible { opacity: 1; visibility: visible; } .cta-popup { background: var(--ink, #0E0E0F); border: 1px solid rgba(245, 242, 236, 0.1); max-width: 500px; width: 100%; padding: 3rem 2.5rem 2.5rem; position: relative; transform: translateY(24px) scale(0.97); transition: transform 0.35s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)); /* Subtle top accent line */ border-top: 2px solid var(--oxblood, #6E1F1F); } .cta-popup-overlay.cta-popup--visible .cta-popup { transform: translateY(0) scale(1); } .cta-popup__close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: rgba(245, 242, 236, 0.3); cursor: pointer; font-size: 1.25rem; line-height: 1; padding: 0.25rem 0.5rem; transition: color 0.2s ease; border-radius: 2px; } .cta-popup__close:hover, .cta-popup__close:focus-visible { color: rgba(245, 242, 236, 0.8); outline: none; } .cta-popup__eyebrow { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--oxblood-light, #C97A7A); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem; } .cta-popup__eyebrow::before { content: ""; width: 20px; height: 1px; background: var(--oxblood, #6E1F1F); flex-shrink: 0; } .cta-popup__headline { font-family: var(--display, 'Fraunces', serif); font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; color: var(--bone, #F5F2EC); margin-bottom: 1rem; font-variation-settings: "opsz" 72, "SOFT" 80; } .cta-popup__subhead { font-family: var(--sans, 'Instrument Sans', system-ui, sans-serif); font-size: 0.95rem; line-height: 1.6; color: rgba(245, 242, 236, 0.55); margin-bottom: 2rem; } .cta-popup__form { display: flex; flex-direction: column; gap: 0.75rem; } .cta-popup__input { width: 100%; background: rgba(245, 242, 236, 0.06); border: 1px solid rgba(245, 242, 236, 0.15); color: var(--bone, #F5F2EC); font-family: var(--sans, 'Instrument Sans', system-ui, sans-serif); font-size: 0.95rem; padding: 0.875rem 1rem; border-radius: 2px; outline: none; transition: border-color 0.2s ease, background 0.2s ease; } .cta-popup__input::placeholder { color: rgba(245, 242, 236, 0.3); } .cta-popup__input:focus { border-color: rgba(245, 242, 236, 0.4); background: rgba(245, 242, 236, 0.09); } .cta-popup__submit { width: 100%; background: var(--oxblood, #6E1F1F); border: 1px solid var(--oxblood, #6E1F1F); color: var(--bone, #F5F2EC); font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; padding: 0.875rem 1.5rem; border-radius: 2px; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; margin-top: 0.25rem; } .cta-popup__submit:hover, .cta-popup__submit:focus-visible { background: #8B2626; border-color: #8B2626; transform: translateY(-1px); outline: none; } .cta-popup__submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .cta-popup__dismiss { display: block; text-align: center; margin-top: 1.25rem; font-family: var(--sans, system-ui, sans-serif); font-size: 0.8rem; color: rgba(245, 242, 236, 0.3); cursor: pointer; background: none; border: none; padding: 0.25rem; transition: color 0.2s ease; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent; } .cta-popup__dismiss:hover { color: rgba(245, 242, 236, 0.55); text-decoration-color: rgba(245, 242, 236, 0.3); } .cta-popup__success { display: none; text-align: center; padding: 1.5rem 0; } .cta-popup__success.visible { display: block; } .cta-popup__success-icon { font-size: 2rem; margin-bottom: 1rem; display: block; color: var(--neon, #00F0FF); } .cta-popup__success-text { font-family: var(--display, 'Fraunces', serif); font-size: 1.4rem; color: var(--bone, #F5F2EC); margin-bottom: 0.5rem; font-variation-settings: "opsz" 72, "SOFT" 60; } .cta-popup__success-sub { font-size: 0.9rem; color: rgba(245, 242, 236, 0.5); line-height: 1.5; } /* =========================================== C) LEAD MAGNET GATE MODAL Shares popup styles, with minor overrides =========================================== */ .cta-gate-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(14, 14, 15, 0.72); display: flex; align-items: center; justify-content: center; padding: var(--pad, 1.5rem); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; backdrop-filter: blur(4px); } .cta-gate-overlay.cta-gate--visible { opacity: 1; visibility: visible; } .cta-gate { background: var(--ink, #0E0E0F); border: 1px solid rgba(245, 242, 236, 0.1); border-top: 2px solid var(--neon, #00F0FF); max-width: 460px; width: 100%; padding: 2.75rem 2.5rem 2.5rem; position: relative; transform: translateY(24px) scale(0.97); transition: transform 0.35s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)); } .cta-gate-overlay.cta-gate--visible .cta-gate { transform: translateY(0) scale(1); } .cta-gate__close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: rgba(245, 242, 236, 0.3); cursor: pointer; font-size: 1.25rem; line-height: 1; padding: 0.25rem 0.5rem; transition: color 0.2s ease; border-radius: 2px; } .cta-gate__close:hover, .cta-gate__close:focus-visible { color: rgba(245, 242, 236, 0.8); outline: none; } .cta-gate__icon { width: 40px; height: 40px; border: 1px solid rgba(0, 240, 255, 0.25); border-radius: 4px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; color: var(--neon, #00F0FF); font-size: 1.25rem; } .cta-gate__headline { font-family: var(--display, 'Fraunces', serif); font-size: 1.6rem; font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; color: var(--bone, #F5F2EC); margin-bottom: 0.75rem; font-variation-settings: "opsz" 72, "SOFT" 60; } .cta-gate__sub { font-size: 0.9rem; line-height: 1.6; color: rgba(245, 242, 236, 0.5); margin-bottom: 1.75rem; } .cta-gate__form { display: flex; flex-direction: column; gap: 0.75rem; } .cta-gate__input { width: 100%; background: rgba(245, 242, 236, 0.06); border: 1px solid rgba(245, 242, 236, 0.15); color: var(--bone, #F5F2EC); font-family: var(--sans, system-ui, sans-serif); font-size: 0.95rem; padding: 0.875rem 1rem; border-radius: 2px; outline: none; transition: border-color 0.2s ease; } .cta-gate__input::placeholder { color: rgba(245, 242, 236, 0.3); } .cta-gate__input:focus { border-color: rgba(0, 240, 255, 0.4); } .cta-gate__submit { width: 100%; background: var(--neon, #00F0FF); border: none; color: var(--ink, #0E0E0F); font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; padding: 0.875rem 1.5rem; border-radius: 2px; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; margin-top: 0.25rem; } .cta-gate__submit:hover, .cta-gate__submit:focus-visible { background: #33F4FF; transform: translateY(-1px); outline: none; } .cta-gate__submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .cta-gate__privacy { font-size: 0.75rem; color: rgba(245, 242, 236, 0.25); text-align: center; margin-top: 0.75rem; font-family: var(--mono, monospace); letter-spacing: 0.04em; } /* =========================================== RESPONSIVE — MOBILE =========================================== */ @media (max-width: 640px) { .cta-bar { flex-wrap: wrap; gap: 0.75rem; padding: 1rem var(--pad); } .cta-bar__text { font-size: 0.7rem; } .cta-bar__btn { font-size: 0.7rem; padding: 0.5rem 0.875rem; } .cta-popup { padding: 2.5rem 1.5rem 2rem; } .cta-gate { padding: 2.25rem 1.5rem 2rem; } /* Touch target compliance: 44x44px min */ .cta-bar__close, .cta-popup__close, .cta-gate__close { min-width: 44px; min-height: 44px; } } /* =========================================== REDUCED MOTION =========================================== */ @media (prefers-reduced-motion: reduce) { .cta-bar, .cta-popup-overlay, .cta-popup, .cta-gate-overlay, .cta-gate { transition: none !important; animation: none !important; } .cta-bar__indicator { animation: none !important; } }