/* Camera LIVE indicator pulse animation */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .post-pin { position: relative; width: 0; height: 0; pointer-events: none; transform: translate3d(0, 0, 0); } .post-pin * { pointer-events: auto; box-sizing: border-box; } .post-pin--compact .post-pin-bubble { position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 12px)); display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: rgba(6, 40, 80, 0.98); /* transparence intacte */ border: 3px solid #000; /* contour plus épais */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6); /* ombre plus forte */ max-width: 220px; } .post-pin-dot { width:12px; height:12px; border-radius:999px; background:#ff8a00; margin-right:8px; flex-shrink:0; } .post-pin-text { color:#e8f5ff; font-size:13px; font-weight:500; max-width:190px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .post-pin--compact .post-pin-pointer-small { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid rgba(6, 40, 80, 0.98); /* transparence intacte */ filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)); } /* Template mini wrapper - with polaroid tilt effect */ .sw-template-mini-wrap{ --card-tilt: 0deg; position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 12px)) scale(0.52) rotate(var(--card-tilt)); transform-origin: bottom center; will-change: transform; } @media (max-width: 640px){ .sw-template-mini-wrap{ transform: translate(-50%, calc(-100% - 12px)) scale(0.42) rotate(var(--card-tilt)); } } /* FIX: Grosses cartes (expanded/full) - fond opaque + couleurs propres par catégorie */ .sw-centered-modal .post-card.sw-expanded-shell { background: rgba(15, 23, 42, 0.98) !important; /* transparence intacte */ border: 3px solid #000 !important; /* contour plus épais */ box-shadow: 0 12px 30px rgba(0,0,0,0.7), 0 0 16px var(--sw-modal-accent-glow, rgba(56,189,248,0.5)) !important; padding: 12px 14px; color: #e5e7eb !important; /* texte blanc clair */ width: min(94vw, 460px) !important; max-width: 94vw !important; min-width: 0 !important; height: min(90vh, 700px) !important; max-height: 90vh !important; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; -webkit-overflow-scrolling: touch; /* Mobile stability fixes */ -webkit-tap-highlight-color: transparent; touch-action: pan-y; -webkit-touch-callout: none; transform: translateZ(0); backface-visibility: hidden; --sw-modal-accent: #38bdf8; --sw-modal-accent-soft: rgba(56,189,248,0.28); --sw-modal-accent-glow: rgba(56,189,248,0.5); --sw-modal-accent-text: #D7F3FF; --sw-modal-text: #e5e7eb; --sw-modal-meta: #9eb7ff; --sw-modal-pill-text: #c7e3ff; } /* Prevent any tap effects on interactive elements inside modal */ .sw-centered-modal button, .sw-centered-modal a, .sw-centered-modal [data-action] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } /* Couleur principale par catégorie/template pour grosse carte */ .sw-centered-modal [data-template="news"]{ --sw-modal-accent: #38bdf8; --sw-modal-accent-soft: rgba(56,189,248,0.28); --sw-modal-accent-glow: rgba(56,189,248,0.5); --sw-modal-accent-text: #D7F3FF; } .sw-centered-modal [data-template="breaking"]{ --sw-modal-accent: #f43f5e; --sw-modal-accent-soft: rgba(244,63,94,0.26); --sw-modal-accent-glow: rgba(244,63,94,0.5); --sw-modal-accent-text: #FFE4E6; } .sw-centered-modal [data-template="finance"]{ --sw-modal-accent: #14b8a6; --sw-modal-accent-soft: rgba(20,184,166,0.26); --sw-modal-accent-glow: rgba(20,184,166,0.5); --sw-modal-accent-text: #CCFBF1; } .sw-centered-modal [data-template="market"]{ --sw-modal-accent: #facc15; --sw-modal-accent-soft: rgba(250,204,21,0.26); --sw-modal-accent-glow: rgba(250,204,21,0.5); --sw-modal-accent-text: #FEF9C3; } .sw-centered-modal [data-template="friends"]{ --sw-modal-accent: #22c55e; --sw-modal-accent-soft: rgba(34,197,94,0.26); --sw-modal-accent-glow: rgba(34,197,94,0.5); --sw-modal-accent-text: #D1FAE5; } .sw-centered-modal [data-template="events"]{ --sw-modal-accent: #a855f7; --sw-modal-accent-soft: rgba(168,85,247,0.26); --sw-modal-accent-glow: rgba(168,85,247,0.5); --sw-modal-accent-text: #EDE9FE; } /* Hero (image en haut) + titre + stats : lisibles */ .sw-modal-hero { background: radial-gradient(circle at 30% 30%, var(--sw-modal-accent-soft, rgba(56,189,248,0.18)), rgba(3,14,32,0.98)) !important; border: 3px solid #000 !important; /* contour plus épais */ box-shadow: 0 12px 30px rgba(0,0,0,0.7), 0 0 16px var(--sw-modal-accent-glow, rgba(56,189,248,0.5)) !important; } .sw-centered-modal.sw-modal-fullscreen{ width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; border-radius: 0 !important; margin: 0 !important; } .sw-centered-modal.sw-modal-fullscreen .post-card.sw-expanded-shell{ width: 100%; height: 100%; max-width: 100%; max-height: 100%; border-radius: 0 !important; } .sw-modal-title, .sw-modal-summary, .sw-livechat-title, .sw-chat-line, .sw-livechat-input { color: var(--sw-modal-text, #e5e7eb) !important; /* texte blanc partout */ } .sw-modal-meta{ color: var(--sw-modal-meta, #9eb7ff) !important; } .sw-stat-pill { color: var(--sw-modal-pill-text, #c7e3ff) !important; background: rgba(148, 163, 184, 0.25) !important; border: 1px solid rgba(148, 163, 184, 0.5) !important; } .sw-cta-primary { background: var(--sw-modal-accent-soft, rgba(56,189,248,0.35)) !important; color: #ffffff !important; } .sw-livechat-input { background: rgba(255,255,255,0.1) !important; color: #ffffff !important; } /* Expanded layout pieces */ .sw-expanded-shell{ padding: 10px 12px; } .sw-expanded-top{ display:flex; gap:10px; align-items:flex-start; } .sw-expanded-left{ flex: 1; } .sw-expanded-right{ width: 150px; min-width: 140px; display:flex; flex-direction:column; gap:8px; padding-top: 4px; } .sw-watch-title{ font-size: 11px; font-weight: 800; color:#bfdbfe; text-transform: uppercase; letter-spacing: .06em; } .sw-watch-list{ display:flex; flex-direction:column; gap:6px; } .sw-watch-item{ font-size: 11px; color:#e8f5ff; background: rgba(3, 14, 32, 0.75); border: 1px solid rgba(90, 190, 255, 0.35); border-radius: 10px; padding: 6px 8px; } .sw-watch-msg{ opacity:.85; margin-top:2px; font-size: 10px; color:#c7e3ff; } .sw-add-feed-btn{ margin-top: 2px; border: 1px solid rgba(148,163,184,.7); border-radius: 10px; padding: 8px 10px; background: rgba(5, 35, 70, 0.85); color:#e8f5ff; font-weight: 900; font-size: 11px; cursor:pointer; } .sw-news-generated{ margin-top: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(3, 14, 32, 0.75); border: 1px solid rgba(90, 190, 255, 0.35); } .sw-news-title{ font-size: 12px; font-weight: 900; color:#e8f5ff; margin-bottom: 2px; } .sw-news-sub{ font-size: 10px; color:#9eb7ff; } .sw-actions-row{ margin-top: 8px; } .sw-livechat{ margin-top: 8px; } .sw-livechat-title{ font-weight: 800; letter-spacing:.04em; margin-bottom: 6px; } .sw-livechat-body{ display:flex; flex-direction:column; gap:3px; margin-bottom: 8px; opacity:.95; position: relative; padding-left: 12px; } .sw-user-avatar{ width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: rgba(56,189,248,0.18); border: 1px solid rgba(56,189,248,0.35); color: #e5e7eb; font-weight: 800; overflow: hidden; flex-shrink: 0; } .sw-user-avatar img{ width: 100%; height: 100%; object-fit: cover; display: block; } .sw-chat-line{ font-size: 10px; color:#c7e3ff; } .sw-chat-bubble{ position: relative; display:flex; flex-direction:column; gap:2px; padding:6px 8px; border-radius:10px; background: rgba(15,23,42,0.55); border:1px solid rgba(56,189,248,0.18); } .sw-chat-head{ display: flex; align-items: center; gap: 6px; } .sw-chat-avatar{ width: 20px; height: 20px; border-radius: 6px; } .sw-inline-avatar{ width: 18px; height: 18px; border-radius: 6px; } .sw-chat-bubble::before{ content:""; position:absolute; left:-12px; top:12px; width:6px; height:6px; border-radius:999px; background: rgba(56,189,248,0.6); box-shadow: 0 0 0 2px rgba(15,23,42,0.7); } .sw-livechat-body::before{ content:""; position:absolute; left:0; top:4px; bottom:4px; width:2px; background: linear-gradient(180deg, rgba(56,189,248,0.65), rgba(56,189,248,0.08)); border-radius: 999px; } body[data-theme="light"] .sw-chat-bubble{ background: rgba(255,255,255,0.8); border-color: rgba(59,130,246,0.25); } body[data-theme="light"] .sw-chat-meta{ color:#1d4ed8; } body[data-theme="light"] .sw-chat-text{ color:#0b1220; } body[data-theme="light"] .sw-livechat-body::before{ background: linear-gradient(180deg, rgba(59,130,246,0.65), rgba(59,130,246,0.08)); } body[data-theme="light"] .sw-chat-bubble::before{ background: rgba(59,130,246,0.7); box-shadow: 0 0 0 2px rgba(255,255,255,0.95); } .sw-chat-meta{ font-size: 10px; font-weight: 700; color:#bfdbfe; } .sw-chat-text{ font-size: 11px; color:#e2f2ff; line-height: 1.3; } .sw-livechat-inputrow{ display:flex; gap:8px; align-items:center; } .sw-livechat-input{ flex:1; border-radius: 999px; border: 1px solid rgba(90, 190, 255, 0.35); background: rgba(3, 14, 32, 0.75); color:#e8f5ff; padding: 8px 10px; font-size: 11px; outline: none; } .sw-livechat-post{ border:none; border-radius: 10px; padding: 8px 12px; background: rgba(56,189,248,0.22); color:#e8f5ff; font-weight: 900; font-size: 11px; cursor:pointer; } /* Mobile: keep overlay readable */ @media (max-width: 640px){ .sw-expanded-overlay-card{ width: min(94vw, 360px); } .sw-expanded-top{ flex-direction: column; } .sw-expanded-right{ display:none; } .sw-livechat-body{ max-height: 150px; overflow-y: auto; padding-right: 4px; } .sw-chat-line{ font-size: 12px; line-height: 1.35; } .sw-livechat-inputrow{ flex-direction: column; align-items: stretch; gap: 6px; } .sw-livechat-input{ font-size: 13px; padding: 10px 12px; } .sw-livechat-post{ width: 100%; font-size: 13px; padding: 10px 14px; } } /* Fix full wrap collapse */ .post-pin--expanded .post-card.sw-expanded-shell{ width: 440px !important; min-width: 440px !important; max-width: 440px !important; height: 640px !important; max-height: 640px !important; overflow: hidden !important; box-sizing: border-box; } /* Override hidden overflow for centered modal to allow scroll */ .sw-centered-modal .post-card.sw-expanded-shell{ overflow-y: auto !important; width: min(94vw, 460px) !important; max-width: 94vw !important; min-width: 0 !important; height: min(90vh, 700px) !important; max-height: 90vh !important; } .sw-template-full-wrap{ display: block !important; width: 100% !important; max-width: 100% !important; height: 640px !important; box-sizing: border-box; } .sw-template-full-wrap > *{ display: block !important; max-width: 100% !important; box-sizing: border-box; } /* Expanded header */ .sw-expanded-badge{ display:inline-flex; align-items:center; justify-content:center; padding: 6px 10px; border-radius: 999px; font-weight: 900; font-size: 12px; background: rgba(56,189,248,0.18); color: #D7F3FF; width: fit-content; } .sw-expanded-title{ margin-top: 10px; font-size: 26px; font-weight: 900; line-height: 1.05; color: #F0F7FF; } .sw-expanded-snippet{ margin-top: 8px; font-size: 14px; font-weight: 700; color: #B5C7E6; } /* SW_EXPANDED_POLISH */ .post-pin--expanded .post-card{ background: linear-gradient(135deg, rgba(56,189,248,0.16), rgba(7,18,37,0.98) 55%, rgba(2,6,23,0.98)); border: 3px solid #000 !important; /* contour plus épais */ box-shadow: 0 18px 60px rgba(0,0,0,0.55), 0 0 24px rgba(56,189,248,0.22); } .sw-expanded-badge{ display:inline-flex; align-items:center; justify-content:center; padding: 7px 12px; border-radius: 999px; font-weight: 900; font-size: 12px; letter-spacing: .04em; color: var(--sw-modal-accent-text, #d7f3ff); background: var(--sw-modal-accent-soft, rgba(56,189,248,0.16)); border: 3px solid #000 !important; /* contour plus épais */ margin-bottom: 10px; } .sw-expanded-title{ font-size: 28px; font-weight: 950; line-height: 1.05; color: #f0f7ff; margin-bottom: 8px; } .sw-expanded-meta{ font-size: 12px; font-weight: 700; color: rgba(181,199,230,0.95); margin-bottom: 10px; } .sw-expanded-snippet{ font-size: 14px; line-height: 1.35; color: rgba(215,233,255,0.95); background: rgba(3,14,32,0.45); border: 1px solid rgba(90,190,255,0.22); border-radius: 14px; padding: 10px 12px; } .post-card-btn{ background: var(--sw-modal-accent-soft, rgba(56,189,248,0.14)); border: 1px solid var(--sw-modal-accent, rgba(56,189,248,0.35)); color: #e8f5ff; font-weight: 900; padding: 6px 12px; border-radius: 8px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; -webkit-tap-highlight-color: transparent; user-select: none; } .post-card-btn:hover{ background: var(--sw-modal-accent-soft, rgba(56,189,248,0.25)); border-color: var(--sw-modal-accent, rgba(56,189,248,0.5)); } .post-card-btn:active{ opacity: 0.8; } .post-card-btn:disabled{ opacity: 0.5; cursor: not-allowed; } /* Center modal content */ .sw-modal{ padding: 12px 14px; } .sw-modal-toprow{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom: 10px; } .sw-modal-badge{ display:inline-flex; align-items:center; justify-content:center; padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: .06em; background: var(--sw-modal-accent-soft, rgba(56,189,248,0.16)); border: 3px solid #000 !important; /* contour plus épais */ color: var(--sw-modal-accent-text, #D7F3FF); text-transform: uppercase; } .sw-modal-meta{ margin-top: 6px; font-size: 11px; color:#9eb7ff; opacity:.95; display:flex; gap:6px; flex-wrap:wrap; } .sw-modal-author-avatar{ width: 20px; height: 20px; border-radius: 6px; border: 1px solid rgba(56,189,248,0.35); background: rgba(56,189,248,0.18); display: grid; place-items: center; overflow: hidden; color: #e5e7eb; font-weight: 800; } .sw-modal-x{ border:none; border-radius:999px; width:34px; height:34px; background: rgba(3,14,32,0.55); color:#e8f5ff; font-weight:900; cursor:pointer; border:1px solid rgba(90,190,255,0.25); flex-shrink:0; } .sw-modal-hero{ width:auto; height: 180px; min-height: 180px; flex: 1 1 auto; min-width: 0; box-sizing: border-box; border-radius: 16px; overflow:hidden; border: 3px solid #000 !important; /* contour plus épais */ background: radial-gradient(circle at 30% 30%, var(--sw-modal-accent-soft, rgba(56,189,248,0.18)), rgba(3,14,32,0.98)); box-shadow: 0 10px 24px rgba(0,0,0,0.35), 0 0 18px var(--sw-modal-accent-glow, rgba(56,189,248,0.45)); margin-bottom: 10px; } body[data-theme="light"] .sw-centered-modal .post-card.sw-expanded-shell{ --sw-modal-text: #0f172a; --sw-modal-meta: #64748b; --sw-modal-pill-text: #0f172a; --sw-modal-accent-text: #0f172a; background: rgba(248, 250, 252, 0.98) !important; border-color: rgba(148, 163, 184, 0.8) !important; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12), 0 0 14px rgba(148, 163, 184, 0.5) !important; } body[data-theme="light"] .sw-modal-title{ color:#0f172a; } body[data-theme="light"] .sw-modal-summary{ color:#334155; } body[data-theme="light"] .sw-modal-meta{ color:#64748b; } body[data-theme="light"] .sw-modal-hero-fallback{ color:#0f172a; } body[data-theme="light"] .sw-modal-hero-fallback-inner{ border-color: rgba(148, 163, 184, 0.5); color:#0f172a; } body[data-theme="light"] .sw-centered-modal .post-card.sw-expanded-shell .sw-stat-pill{ background: rgba(148, 163, 184, 0.18) !important; border-color: rgba(148, 163, 184, 0.4) !important; } body[data-theme="blue"] .sw-centered-modal .post-card.sw-expanded-shell{ --sw-modal-meta: #b3ccff; } .sw-modal-hero-row{ display:flex; gap:16px; align-items: stretch; min-width: 0; width: 100%; padding-left: 0; } .sw-truth-rail{ width: 32px; min-width: 32px; height: 180px; min-height: 180px; margin-right: 10px; position: relative; z-index: 2; display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap: 4px; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color:#e2e8f0; pointer-events: auto; touch-action: manipulation; } .sw-truth-rail-bar{ flex: 1 1 auto; width: 12px; border-radius: 999px; background: linear-gradient(180deg, #22c55e 0%, #facc15 50%, #ef4444 100%); border: 2px solid rgba(0,0,0,0.45); position: relative; box-shadow: inset 0 0 10px rgba(0,0,0,0.35); margin: 0 auto; } .sw-truth-rail-marker{ position:absolute; left:50%; transform: translate(-50%, -50%); width: 20px; height: 6px; border-radius: 999px; background:#0b1220; border:2px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.35); top: 35%; } .sw-truth-rail-score{ font-size: 11px; font-weight: 900; color:#fff; background:#0b1220; padding: 4px 6px; border-radius: 999px; box-shadow: 0 6px 12px rgba(0,0,0,0.35); transition: opacity 0.2s ease-out; } .sw-truth-rail-btn{ width: 28px; height: 28px; border: 0; background: rgba(34,197,94,0.25); color:#22c55e; font-size: 16px; font-weight: 900; padding: 0; border-radius: 50%; cursor: pointer; text-align: center; line-height: 28px; pointer-events: auto; touch-action: manipulation; transition: all 0.15s ease; flex-shrink: 0; } .sw-truth-rail-btn:active{ transform: scale(0.92); } .sw-truth-rail-btn-down{ background: rgba(239,68,68,0.25); color: #ef4444; } .sw-truth-rail-btn.is-active{ background: rgba(34,197,94,0.5); color: #fff; box-shadow: 0 0 12px rgba(34,197,94,0.5); } .sw-truth-rail-btn-down.is-active{ background: rgba(239,68,68,0.5); color: #fff; box-shadow: 0 0 12px rgba(239,68,68,0.5); } .sw-truth-vote-disabled{ opacity: 0.5; pointer-events: none; } .sw-truth-vote-disabled .sw-truth-rail-btn{ pointer-events: none !important; cursor: not-allowed; } .sw-modal-hero-row{ display:flex; gap:12px; align-items: stretch; min-width: 0; width: 100%; } .sw-truth-vote-row{ display:flex; gap:12px; align-items:center; justify-content:space-between; background: rgba(3, 14, 32, 0.55); border: 1px solid rgba(90, 190, 255, 0.22); border-radius: 14px; padding: 10px 12px; margin: 6px 0 10px; } .sw-truth-vote-meta{ display:flex; flex-direction:column; gap:4px; min-width:0; } .sw-truth-vote-title{ font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #c7e3ff; } .sw-truth-vote-scores{ display:flex; gap:10px; font-size: 12px; color:#e8f5ff; font-weight: 700; } .sw-truth-vote-count{ font-size: 11px; color: rgba(215,233,255,0.7); } .sw-truth-vote-actions{ display:flex; gap:8px; } .sw-truth-vote-btn{ background: rgba(56,189,248,0.14); border: 1px solid rgba(56,189,248,0.35); color: #e8f5ff; font-weight: 900; padding: 6px 10px; border-radius: 10px; cursor:pointer; } .sw-truth-vote-btn.is-active{ background: rgba(34,197,94,0.25); border-color: rgba(34,197,94,0.6); color:#eafff3; } .sw-truth-vote-btn[data-truth-vote="false"].is-active{ background: rgba(239,68,68,0.25); border-color: rgba(239,68,68,0.6); color:#ffecec; } .sw-card-wrap{ position: relative; } .sw-truth-mini-bar{ position:absolute; left:0; top:0; bottom:0; width: 8px; background: linear-gradient(180deg, #22c55e 0%, #facc15 50%, #ef4444 100%); border-top-left-radius: 18px; border-bottom-left-radius: 18px; box-shadow: inset 0 0 6px rgba(0,0,0,0.35); pointer-events:none; } .sw-truth-mini-marker{ position:absolute; left:50%; transform: translate(-50%, -50%); width: 14px; height: 4px; border-radius: 999px; background:#0b1220; border:1px solid #fff; box-shadow: 0 3px 6px rgba(0,0,0,0.35); } .sw-truth-mini-score{ position:absolute; right:6px; bottom:6px; padding: 3px 6px; border-radius: 999px; font-size: 10px; font-weight: 900; color:#fff; letter-spacing: .03em; pointer-events:none; } .sw-modal-hero, .sw-cluster-hero-media{ position:relative; overflow:hidden; } .sw-modal-hero img{ width:100%; height:100%; object-fit: cover; object-position: center center; display:block; } .sw-modal-hero-media{ position:relative; } .sw-modal-hero-arrow{ position:absolute; top:50%; transform:translateY(-50%) scale(1); width:68px; height:68px; border-radius:50%; border:1px solid rgba(255,255,255,0.35); background: rgba(0,0,0,0.55); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:10; transition:transform 0.2s ease; } .sw-modal-hero-arrow:hover{ transform:translateY(-50%) scale(1); } .sw-modal-hero-arrow.left{ left:-12px; } .sw-modal-hero-arrow.right{ right:-12px; } .sw-modal-gallery-indicator{ position:absolute; top:0.75rem; right:14px; padding:0.2rem 0.65rem; border-radius:999px; background:rgba(0,0,0,0.6); color:#fff; font-size:0.78rem; font-weight:700; letter-spacing:0.05em; display:flex; align-items:center; gap:0.2rem; pointer-events:none; z-index:12; box-shadow:0 8px 18px rgba(0,0,0,0.45); } .sw-modal-gallery-separator{ opacity:0.7; } .sw-modal-hero-arrow, .sw-cluster-hero-media .sw-modal-hero-arrow{ box-shadow:0 2px 12px rgba(0,0,0,0.45); } @media (max-width: 768px) { .sw-modal-hero-arrow{ width:62px; height:62px; border-width:0; background:rgba(15,23,42,0.7); } } .sw-modal-hero-fallback{ width:100%; height:100%; background: radial-gradient(circle at 35% 35%, rgba(56,189,248,0.22), rgba(3,14,32,0.98)); display:flex; align-items:center; justify-content:center; color:#93c5fd; } .sw-modal-hero-fallback-inner{ display:flex; flex-direction:column; align-items:center; gap:8px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; font-size: .75rem; } .sw-modal-hero-fallback-inner i{ font-size: 46px; opacity: 0.95; } body[data-theme="light"] .sw-modal-hero-fallback{ background: radial-gradient(circle at 35% 35%, rgba(59,130,246,0.18), rgba(255,255,255,0.95)); color:#1d4ed8; } .sw-modal-title{ font-size: 22px; font-weight: 900; line-height: 26px; color:#F0F7FF; margin: 6px 0 8px; } .sw-modal-summary{ font-size: 13px; line-height: 17px; color:#D7E9FF; opacity:.95; margin-bottom: 8px; flex: 0 0 auto; } .sw-stat-row{ display:flex; gap:8px; flex-wrap:wrap; margin: 6px 0 10px; } .sw-stat-pill{ font-size: 11px; color: var(--sw-modal-pill-text, #c7e3ff); background: rgba(3, 14, 32, 0.58); border: 1px solid var(--sw-modal-accent, rgba(90, 190, 255, 0.22)); padding: 6px 10px; border-radius: 999px; min-width: 52px; text-align: center; white-space: nowrap; } .sw-stat-pill .sw-stat-num{ display: inline-block; min-width: 1.2em; transition: opacity 0.15s ease; } .sw-modal-cta-row{ display:flex; flex-direction:column; gap:10px; margin-bottom: 10px; } .sw-cta-primary{ width:100%; border:none; border-radius: 14px; padding: 14px 12px; font-weight: 900; font-size: 14px; color:#e8f5ff; cursor:pointer; background: var(--sw-modal-accent-soft, rgba(56,189,248,0.22)); box-shadow: 0 10px 18px rgba(0,0,0,0.35); } .sw-cta-primary:disabled{ opacity:.55; cursor:default; } .sw-cta-actions{ display:flex; gap:8px; flex-wrap:wrap; } /* Mobile tighten */ @media (max-width: 640px){ .sw-modal-hero{ height: 150px; } .sw-modal-title{ font-size: 20px; line-height: 24px; } .sw-centered-modal .post-card.sw-expanded-shell{ width: min(96vw, 420px); height: min(92vh, 700px); } .sw-modal-hero-row{ align-items: stretch; } .sw-truth-rail{ width: 22px; min-width: 22px; height: 140px; min-height: 140px; margin: 0 8px 0 0; align-self: flex-start; } .sw-cluster-hero{ grid-template-columns: 28px 1fr; } } /* SW_CENTERED_MODAL_ANIM */ .sw-centered-backdrop{ position: fixed; inset: 0; z-index: 9999; /* Centered modal - above most content but below auth */ background: rgba(0,0,0,0.08); backdrop-filter: blur(1px); display: flex; align-items: center; justify-content: center; padding: 12px; pointer-events: auto; opacity: 0; transition: opacity 300ms ease; /* Mobile stability */ -webkit-tap-highlight-color: transparent; touch-action: none; overscroll-behavior: contain; } .sw-centered-backdrop.sw-modal-fullscreen{ padding: 0; } .sw-centered-modal{ transform: scale(0.96); opacity: 0; transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease; will-change: transform, opacity; /* Prevent any bouncing/jumping */ -webkit-tap-highlight-color: transparent; backface-visibility: hidden; perspective: 1000px; } .sw-centered-backdrop.sw-open{ opacity: 1; } .sw-centered-modal.sw-open{ transform: scale(1) translateZ(0); opacity: 1; /* Once open, disable ALL transitions to prevent flash/jump */ transition: none !important; will-change: auto; } /* Prevent layout shifts during interactions */ .sw-centered-modal.sw-open .post-card.sw-expanded-shell{ contain: layout style paint; transform: translateZ(0); isolation: isolate; } /* Smooth stat updates without layout shift */ .sw-stat-num{ display: inline-block; min-width: 1.5em; text-align: center; } /* Mobile: prevent any visual feedback that causes "jumping" */ @media (hover: none) and (pointer: coarse) { .sw-centered-modal * { -webkit-tap-highlight-color: transparent !important; } .sw-centered-modal button:active, .sw-centered-modal [data-action]:active { transform: none !important; opacity: 0.85; } } body[data-theme="blue"] .sw-centered-backdrop{ background: rgba(6, 16, 46, 0.45); } body[data-theme="light"] .sw-centered-backdrop{ background: rgba(226, 232, 240, 0.75); } body[data-theme="light"] .sw-modal-x{ background: rgba(226, 232, 240, 0.9); color:#0f172a; border-color: rgba(148, 163, 184, 0.5); } /* SW_MINI_SMOOTH_MOVE */ .post-pin{ will-change: transform; transform: translate3d(0,0,0); } .post-pin, .post-pin *{ transition: none !important; } .sw-template-mini-wrap{ backface-visibility: hidden; transform: translate3d(-50%, calc(-100% - 12px), 0) scale(0.52) rotate(var(--card-tilt, 0deg)); transform-origin: bottom center; } @media (max-width: 640px){ .sw-template-mini-wrap{ transform: translate3d(-50%, calc(-100% - 12px), 0) scale(0.42) rotate(var(--card-tilt, 0deg)); } } .post-pin--compact .post-pin-pointer-small{ filter: none; } @media (prefers-reduced-motion: reduce){ .sw-centered-backdrop, .sw-centered-modal{ transition: none !important; } } .post-pin.sw-appear{ opacity: 0; transition: opacity 640ms ease; } .post-pin.sw-appear.sw-appear-in{ opacity: 1; } .post-pin.sw-disappear{ opacity: 0; transition: opacity 640ms ease; } .post-pin--simple.sw-appear{ opacity: 0; transition: opacity 520ms ease; } .post-pin--simple.sw-appear.sw-appear-in{ opacity: 1; } .post-pin--simple.sw-disappear{ opacity: 0; transition: opacity 520ms ease; } /* Cluster main news layout */ .sw-cluster-modal .sw-modal-toprow{ margin-bottom: 6px; } .sw-cluster-title{ font-size: 22px; font-weight: 800; margin: 4px 0 14px; color: var(--sw-modal-text, #e5e7eb); } .sw-modal-tags{ display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 14px; } .sw-modal-tag{ font-size: 11px; text-transform: lowercase; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,0.12); color: var(--sw-modal-text, #e5e7eb); letter-spacing: 0.2px; } .sw-cluster-body{ display: grid; grid-template-columns: minmax(220px, 44%) minmax(240px, 56%); gap: 16px; align-items: start; } .sw-cluster-hero{ display: grid; grid-template-columns: 22px minmax(0,1fr); grid-auto-flow: column; gap: 10px; align-items: stretch; } .sw-cluster-hero .sw-truth-rail{ grid-row: 1; align-self: flex-start; } .sw-cluster-hero-media{ border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 30% 30%, var(--sw-modal-accent-soft, rgba(56,189,248,0.18)), rgba(3,14,32,0.98)); box-shadow: 0 10px 24px rgba(0,0,0,0.35), 0 0 18px var(--sw-modal-accent-glow, rgba(56,189,248,0.45)); min-height: 200px; display: flex; align-items: center; justify-content: center; } .sw-cluster-hero-media img{ width: 100%; height: 100%; object-fit: cover; } .sw-cluster-actions{ margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; } .sw-cluster-related-title{ font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sw-modal-meta, #9eb7ff); margin-bottom: 8px; } .sw-cluster-related-list{ display: grid; gap: 8px; margin-bottom: 12px; } .sw-cluster-source-item{ padding: 8px 10px; border-radius: 12px; background: rgba(15,23,42,0.5); border: 1px solid rgba(148,163,184,0.2); cursor: pointer; } .sw-cluster-source-item:hover{ border-color: var(--sw-modal-accent, rgba(56,189,248,0.6)); box-shadow: 0 0 0 1px var(--sw-modal-accent-soft, rgba(56,189,248,0.2)); } .sw-cluster-source-title{ font-size: 14px; font-weight: 600; color: var(--sw-modal-text, #e5e7eb); } .sw-cluster-source{ font-size: 12px; color: var(--sw-modal-meta, #9eb7ff); } .sw-cluster-source-empty{ font-size: 13px; color: var(--sw-modal-meta, #9eb7ff); } .sw-cluster-generated{ font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sw-modal-meta, #9eb7ff); margin: 6px 0 6px; } .sw-cluster-summary{ font-size: 15px; line-height: 1.5; color: var(--sw-modal-text, #e5e7eb); } @media (max-width: 860px){ .sw-cluster-body{ grid-template-columns: 1fr; } .sw-cluster-hero{ grid-template-columns: 28px 1fr; } } /* Weather Markers */ .weather-marker { position: relative; cursor: pointer; transition: transform 0.15s ease; transform-origin: bottom center; z-index: 100; pointer-events: auto; } .weather-marker-content { display: flex; align-items: center; gap: 8px; padding: 12px 18px; background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%); border-radius: 28px; border: 3px solid rgba(255, 255, 255, 0.5); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); white-space: nowrap; } .weather-marker-icon { font-size: 32px; line-height: 1; } .weather-marker-temp { font-size: 22px; font-weight: 800; color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); } .weather-marker-city { position: absolute; left: 50%; transform: translateX(-50%); bottom: -24px; font-size: 13px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, 0.85); padding: 4px 10px; border-radius: 6px; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; } .weather-marker:hover .weather-marker-content { background: linear-gradient(135deg, #38bdf8 0%, #60a5fa 100%); } .weather-marker::after { content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #3b82f6; } /* ═══════════════════════════════════════════════════════════════════════════ ENHANCED MARKER ANIMATIONS (v2 - Framer Motion style) ═══════════════════════════════════════════════════════════════════════════ */ /* Smooth entry animations */ @keyframes markerBounceIn { 0% { opacity: 0; transform: scale(0) translateY(20px); } 50% { transform: scale(1.15) translateY(-5px); } 70% { transform: scale(0.95) translateY(2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } @keyframes markerFadeSlide { 0% { opacity: 0; transform: translateY(16px) scale(0.9); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes markerPulseRing { 0% { transform: scale(0.8); opacity: 0.8; } 50% { transform: scale(1.4); opacity: 0; } 100% { transform: scale(0.8); opacity: 0; } } @keyframes glowPulse { 0%, 100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 rgba(96, 165, 250, 0); } 50% { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 20px rgba(96, 165, 250, 0.4); } } /* Simple marker enhancements */ .sw-simple-marker { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, border-color 0.2s ease; will-change: transform; } .post-pin--simple:hover .sw-simple-marker { transform: scale(1.2) translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(96, 165, 250, 0.35); border-color: rgba(96, 165, 250, 0.8); } /* Live marker pulsing glow */ .sw-live-marker { animation: glowPulse 2s ease-in-out infinite; } .sw-live-marker::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: rgba(239, 68, 68, 0.3); animation: markerPulseRing 2s ease-out infinite; pointer-events: none; } /* Hover card smooth animation */ .sw-simple-hover-card { transform: translateX(-50%) translateY(-8px) scale(0.95); opacity: 0; pointer-events: none; transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } .post-pin--simple:hover .sw-simple-hover-card { opacity: 1; transform: translateX(-50%) translateY(-12px) scale(1); pointer-events: auto; } /* Note: .sw-appear and .sw-appear-in are defined earlier in this file for .post-pin and .post-pin--simple elements. Don't override here. */ /* Cluster marker styles */ .sw-cluster-marker { position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .sw-cluster-marker:hover { transform: scale(1.1); } .sw-cluster-bubble { min-width: 44px; height: 44px; padding: 0 12px; border-radius: 22px; background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(139, 92, 246, 0.9)); border: 3px solid rgba(255, 255, 255, 0.95); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 20px rgba(96, 165, 250, 0.25); display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.25s ease; } .sw-cluster-marker:hover .sw-cluster-bubble { background: linear-gradient(135deg, rgba(96, 165, 250, 0.98), rgba(167, 139, 250, 0.95)); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), 0 0 30px rgba(96, 165, 250, 0.4); } .sw-cluster-count { font-size: 16px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .sw-cluster-icon { font-size: 14px; color: rgba(255, 255, 255, 0.9); } .sw-cluster-pointer { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 14px solid rgba(59, 130, 246, 0.95); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); } /* Category badges on markers */ .sw-marker-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: linear-gradient(135deg, #ef4444, #dc2626); border: 2px solid #fff; font-size: 10px; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } /* Modal overlay improvements */ .sw-centered-modal { animation: modalFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes modalFadeIn { 0% { opacity: 0; transform: scale(0.95) translateY(10px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } /* Modal backdrop blur */ .sw-modal-backdrop { position: fixed; inset: 0; background: rgba(5, 8, 22, 0.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: backdropFadeIn 0.3s ease; } @keyframes backdropFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* Improved hero section with gradient overlay */ .sw-modal-hero { position: relative; overflow: hidden; border-radius: 12px; } .sw-modal-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, transparent 0%, transparent 50%, rgba(15, 23, 42, 0.8) 100% ); pointer-events: none; } .sw-modal-hero img { transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .sw-modal-hero:hover img { transform: scale(1.05); } /* Stats bar with micro-interactions */ .sw-stat-pill { transition: all 0.2s ease; cursor: pointer; } .sw-stat-pill:hover { transform: translateY(-2px); background: rgba(96, 165, 250, 0.25) !important; border-color: rgba(96, 165, 250, 0.5) !important; } .sw-stat-pill:active { transform: scale(0.95); } /* Truth score rail animation */ .sw-truth-rail-marker { transition: top 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } /* CTA button hover effect */ .sw-cta-primary { position: relative; overflow: hidden; transition: all 0.25s ease; } .sw-cta-primary::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent); transform: translateX(-100%); transition: transform 0.5s ease; } .sw-cta-primary:hover::before { transform: translateX(100%); } .sw-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(96, 165, 250, 0.3); }