/* ============================================================ ESPADAWORLD DISCORD INVITE - V3 VISUAL OVERRIDES Keeps the popup native to the website (no screenshot/banner image). ============================================================ */ /* Use the exact EW asset supplied by the owner and visually center it inside the existing circular holder. The source art is top-heavy, so a small downward translation centers the visible EW glyph. */ .discord-invite-mark{ overflow:hidden; } .discord-invite-mark img{ display:block; width:64px; height:64px; max-width:none; object-fit:contain; object-position:center; transform:translateY(5px); filter: drop-shadow(0 0 4px rgba(170,225,255,.55)) drop-shadow(0 0 10px rgba(0,191,255,.28)); } /* Match the EspadaWorld icy/metallic identity using the site's own AceRecords face plus layered steel-blue highlights and glow. */ .discord-invite-card h2, #discord-invite-title{ margin:0 0 10px; font-family:'AceRecords',Tahoma,Arial,sans-serif; font-size:29px; font-weight:400; line-height:1.08; letter-spacing:.45px; color:#dff5ff; text-shadow: 0 1px 0 rgba(255,255,255,.72), 0 -1px 0 rgba(9,45,82,.95), 0 0 4px rgba(175,229,255,.92), 0 0 9px rgba(0,191,255,.72), 0 0 18px rgba(0,80,160,.55); } /* Chromium / modern browsers: metallic ice fill while remaining real website text (selectable/accessibility-friendly), not a bitmap title. */ @supports ((-webkit-background-clip:text) or (background-clip:text)){ .discord-invite-card h2, #discord-invite-title{ background-image:linear-gradient( 180deg, #ffffff 0%, #dff7ff 9%, #7fc7f3 23%, #173d69 37%, #e8f8ff 50%, #73c8ff 62%, #164f82 76%, #d5f4ff 91%, #76bfe9 100% ); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; -webkit-text-stroke:.35px rgba(195,232,255,.92); filter: drop-shadow(0 1px 0 rgba(255,255,255,.26)) drop-shadow(0 0 4px rgba(174,229,255,.70)) drop-shadow(0 0 9px rgba(0,191,255,.45)); } } @media (max-width:600px){ .discord-invite-mark img{ width:54px; height:54px; transform:translateY(4px); } .discord-invite-card h2, #discord-invite-title{ font-size:24px; } } /* ============================================================ V5 - PERMANENT DISCORD FLOATING WIDGET Replaces the Discord item in the navbar and opens the existing EspadaWorld Discord community popup on demand. ============================================================ */ .discord-community-fab{ position:fixed; right:32px; bottom:205px; width:58px; height:58px; display:flex; align-items:center; justify-content:center; padding:0; border:1px solid rgba(126,214,255,.78); border-radius:50%; color:#fff; background: radial-gradient(circle at 34% 27%,rgba(134,145,255,.96) 0%,#5865F2 42%,#3f4bc0 72%,#182451 100%); box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 13px rgba(88,101,242,.62), 0 0 24px rgba(0,191,255,.28), 0 9px 26px rgba(0,0,0,.42); cursor:pointer; z-index:2147482500; animation:discordFabBreathe 3.8s ease-in-out infinite; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,filter .18s ease; } .discord-community-fab::before{ content:""; position:absolute; inset:4px; border-radius:50%; border:1px solid rgba(205,241,255,.16); pointer-events:none; } .discord-community-fab:hover, .discord-community-fab:focus-visible{ transform:translateY(-2px) scale(1.055); border-color:rgba(185,237,255,.98); filter:brightness(1.08); box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset, 0 0 18px rgba(88,101,242,.86), 0 0 34px rgba(0,191,255,.44), 0 12px 30px rgba(0,0,0,.48); outline:none; } .discord-community-fab-icon{ position:relative; z-index:1; width:38px; height:38px; display:flex; align-items:center; justify-content:center; filter:drop-shadow(0 0 5px rgba(255,255,255,.25)); } .discord-community-fab-icon svg{ display:block; width:38px; height:38px; overflow:visible; } .discord-community-fab-tooltip{ position:absolute; right:72px; top:50%; transform:translateY(-50%) translateX(7px); min-width:166px; padding:8px 11px; border:1px solid rgba(0,191,255,.36); border-radius:8px; color:#dff4ff; background:rgba(4,13,27,.96); box-shadow:0 0 16px rgba(0,191,255,.14),0 8px 24px rgba(0,0,0,.34); font:600 10px/1.2 Tahoma,Arial,sans-serif; letter-spacing:.15px; white-space:nowrap; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .16s ease,visibility .16s ease,transform .16s ease; } .discord-community-fab-tooltip::after{ content:""; position:absolute; right:-6px; top:50%; width:10px; height:10px; transform:translateY(-50%) rotate(45deg); border-top:1px solid rgba(0,191,255,.36); border-right:1px solid rgba(0,191,255,.36); background:rgba(4,13,27,.96); } .discord-community-fab:hover .discord-community-fab-tooltip, .discord-community-fab:focus-visible .discord-community-fab-tooltip{ opacity:1; visibility:visible; transform:translateY(-50%) translateX(0); } @keyframes discordFabBreathe{ 0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 0 13px rgba(88,101,242,.55),0 0 21px rgba(0,191,255,.22),0 9px 26px rgba(0,0,0,.42)} 50%{box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 0 20px rgba(88,101,242,.78),0 0 31px rgba(0,191,255,.34),0 9px 26px rgba(0,0,0,.42)} } /* While the modal is open the launcher sits behind the overlay. */ .discord-invite-open .discord-community-fab{pointer-events:none} @media (max-width:700px){ .discord-community-fab{ right:18px; bottom:172px; width:52px; height:52px; } .discord-community-fab-icon, .discord-community-fab-icon svg{width:34px;height:34px} .discord-community-fab-tooltip{display:none} }