/** * TelccFree — Platform share button (critical first-paint styles). * Must be linked from on any page that renders #platform-share-btn. * Keep in sync with the visual rules formerly injected by telc-platform-share.js. */ .portal-action-ctas { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 32px; margin-bottom: 16px; } .portal-action-ctas .portal-telegram-cta { margin-top: 0; margin-bottom: 0; } .portal-action-ctas .platform-share-wrap { margin: 0; } @media (min-width: 640px) { .portal-action-ctas { flex-direction: row; justify-content: center; flex-wrap: wrap; } } .platform-share-wrap { width: 100%; display: flex; justify-content: center; align-items: center; margin-top: 16px; margin-bottom: 8px; } @keyframes platform-share-glow { 0%, 100% { box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35), 0 0 0 0 rgba(37, 99, 235, 0.18); } 50% { box-shadow: 0 8px 28px rgba(37, 99, 235, 0.5), 0 0 22px rgba(37, 99, 235, 0.28); } } #platform-share-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 0.95rem; font-weight: 600; border: none; cursor: pointer; color: #fff; border-radius: 50px; padding: 14px 28px; font-family: Inter, system-ui, sans-serif; line-height: 1.3; text-align: center; background: linear-gradient(135deg, #2563eb, #1d4ed8); animation: platform-share-glow 2.8s ease-in-out infinite; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), filter 0.25s ease; } #platform-share-btn:hover { transform: translateY(-2px); filter: brightness(1.06); animation: none; box-shadow: 0 10px 32px rgba(37, 99, 235, 0.45), 0 0 24px rgba(37, 99, 235, 0.22); } #platform-share-btn:active { transform: translateY(0); filter: brightness(0.98); } #platform-share-btn:focus-visible { outline: 2px solid #93c5fd; outline-offset: 3px; } html.dark #platform-share-btn { background: linear-gradient(135deg, #3b82f6, #2563eb); animation-name: platform-share-glow-dark; } @keyframes platform-share-glow-dark { 0%, 100% { box-shadow: 0 4px 18px rgba(59, 130, 246, 0.4), 0 0 0 0 rgba(96, 165, 250, 0.15); } 50% { box-shadow: 0 8px 30px rgba(59, 130, 246, 0.55), 0 0 24px rgba(96, 165, 250, 0.3); } } html.dark #platform-share-btn:hover { box-shadow: 0 10px 34px rgba(59, 130, 246, 0.5), 0 0 26px rgba(96, 165, 250, 0.28); } #platform-share-btn .platform-share-btn__icon { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; } #platform-share-btn .platform-share-btn__label { white-space: nowrap; } @media (max-width: 480px) { #platform-share-btn { font-size: 0.88rem; padding: 12px 20px; max-width: calc(100% - 24px); } #platform-share-btn .platform-share-btn__label { white-space: normal; } } .hero .platform-share-wrap { margin-top: 0; margin-bottom: 20px; justify-content: flex-start; } @media (max-width: 768px) { .hero .platform-share-wrap { justify-content: center; } }