/** * Doctoriofy — emphasis for the shared email-capture card. * * shared/email-capture.js renders the card with inline styles and a set of * dfy-capture-* class names that carry no styling of their own. Those class * names exist precisely so a stylesheet can restyle the card without touching * the JS. This is that stylesheet. * * It shipped first as page-scoped CSS inside the neurológico pilot, with a note * saying it was scoped on purpose because styling the shared component would * change the other tools untested. Albert lifted that constraint on 2026-08-05: * every tool is meant to look like this now. Lifted verbatim, so the pilot * remains the reference for anything that looks odd. * * Load AFTER dfy-tool.css. Served with a 1-YEAR cache — bump every consumer's * ?v= when this changes. */ /* ---- Email capture emphasis ------------------------------------------ Scoped to this page on purpose: email-capture.js is shared with the psych and human tools, so styling it there would change them untested. The card ships as the palest box on a screen of white cards, which is backwards — it is the one thing here we want acted on, so it gets the hero treatment. */ #email-capture.dfy-capture { position: relative; background: linear-gradient(150deg, #16305E 0%, #0F1F3D 100%) !important; /* Width and style stay !important to beat the shared component's inline border, but the COLOUR is left to the animation: an !important colour here would freeze the pulse, because animations lose to !important and an !important inside a keyframe is ignored outright. */ border-width: 1.5px !important; border-style: solid !important; border-radius: 18px !important; padding: 26px 22px !important; text-align: left !important; animation: capture-in .5s ease both, capture-glow 3.6s ease-in-out infinite .5s; } /* The glow is layered box-shadow, deliberately NOT a blurred pseudo-element: a pseudo at z-index:-1 paints above its own parent's background, so the gradient washed straight over the card and drowned the text. Shadow spreads outward only — it can never touch the content. */ @keyframes capture-glow { 0%, 100% { border-color: #33589A; box-shadow: 0 14px 40px rgba(15,31,61,.20), 0 0 0 0 rgba(127,227,192,.30), 0 0 26px 2px rgba(18,168,122,.34), 0 0 52px 6px rgba(35,80,184,.22); } 50% { border-color: #7FE3C0; box-shadow: 0 14px 46px rgba(15,31,61,.28), 0 0 0 7px rgba(127,227,192,.20), 0 0 40px 8px rgba(18,168,122,.62), 0 0 80px 18px rgba(35,80,184,.36); } } /* A slow sheen across the face of the card. The gradient moves, not the box — so nothing can escape the card and no overflow clip is needed, which would have cut off the aura above. */ #email-capture.dfy-capture::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; background: linear-gradient(100deg, transparent 36%, rgba(255,255,255,.11) 50%, transparent 64%); background-size: 250% 100%; animation: capture-sheen 5.5s ease-in-out infinite; } #email-capture.dfy-capture > * { position: relative; z-index: 2; } @keyframes capture-sheen { 0% { background-position: 130% 0; } 55%, 100% { background-position: -70% 0; } } #email-capture .dfy-capture-title { color: #fff !important; font: 700 18px/1.3 'Poppins', sans-serif !important; margin-bottom: 12px !important; } /* The scarcity is real — the result lives in memory and nothing persists it — so it gets read as a warning instead of 12px of grey nobody sees. */ #email-capture .dfy-capture-desc { color: #FFD9A0 !important; font: 600 14px/1.45 'DM Sans', sans-serif !important; background: rgba(242,112,91,.15); border-left: 3px solid #F2705B; border-radius: 8px; padding: 10px 13px; margin-bottom: 14px !important; } #email-capture .dfy-capture-promises { max-width: none !important; } #email-capture .dfy-capture-promises li { color: #C6D4EA !important; } #email-capture .dfy-capture-promises li span { color: #7FE3C0 !important; } #email-capture .dfy-capture-row { max-width: none !important; } #email-capture .dfy-capture-input { border-color: #2B4A85 !important; } #email-capture .dfy-capture-btn { background: #12A87A !important; } #email-capture .dfy-capture-fine { color: #7C90B4 !important; } @keyframes capture-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* Two beats when the card first scrolls into view. The previous version — a 1.4% scale in faint blue, three cycles — was live and nobody noticed it. */ @keyframes capture-beat { 0%, 100% { transform: scale(1); box-shadow: 0 14px 40px rgba(15,31,61,.20), 0 0 0 0px rgba(127,227,192,0); } 30% { transform: scale(1.035); box-shadow: 0 14px 40px rgba(15,31,61,.26), 0 0 0 14px rgba(127,227,192,.18); } 65% { transform: scale(1); box-shadow: 0 14px 40px rgba(15,31,61,.20), 0 0 0 26px rgba(127,227,192,0); } } #email-capture.is-seen { animation: capture-beat 1.6s ease-in-out 2; } /* A hard flash when someone asks for the PDF and lands back here. */ @keyframes capture-flash { 0%, 100% { border-color: #2B4A85; } 50% { border-color: #7FE3C0; box-shadow: 0 0 0 5px rgba(127,227,192,.28); } } #email-capture.is-wanted { animation: capture-flash .55s ease-in-out 3; } /* The button keeps a slow halo after the card settles — moving the whole card forever is obnoxious; the button is the thing to press. */ @keyframes capture-btn-glow { 0%, 100% { box-shadow: 0 0 0 0px rgba(18,168,122,.55); } 55% { box-shadow: 0 0 0 9px rgba(18,168,122,0); } } #email-capture .dfy-capture-btn { animation: capture-btn-glow 2.4s ease-out infinite; } /* Once they are typing, everything stops — including the glow. A card that pulses while you fill it in is worse than no animation at all. The aura settles to a steady tint rather than vanishing, so the card does not suddenly look switched off mid-task. */ #email-capture.is-engaged, #email-capture.is-engaged .dfy-capture-btn, #email-capture.is-engaged::after { animation: none !important; } /* With the animation stopped, the colour would fall back to the shared component's inline light blue — so it has to be pinned here. */ #email-capture.is-engaged { border-color: #33589A !important; box-shadow: 0 14px 40px rgba(15,31,61,.20), 0 0 22px 2px rgba(18,168,122,.24); } #email-capture.is-engaged::after { opacity: 0; } /* Motion is decoration. A pulsing card is bad enough when you asked for it; never inflict it on someone who has asked the OS not to animate. */ @media (prefers-reduced-motion: reduce) { #email-capture.dfy-capture, #email-capture.dfy-capture::after, #email-capture.is-seen, #email-capture.is-wanted, #email-capture .dfy-capture-btn { animation: none !important; } }