/* ══════════════════════════════════════════════════ KIRF Floating Widget — Al-Azhar Training College Loads via in header.php → appears on ALL pages Position: fixed, top-right, below header ══════════════════════════════════════════════════ */ #kirf-widget { /* ── Layout ─────────────────────────────────── */ position: fixed !important; top: 126px; /* topbar 36px + header 68px + 22px gap */ right: 0 !important; left: auto !important; bottom: auto !important; z-index: 9500 !important; display: flex !important; flex-direction: column; align-items: center; gap: 4px; /* ── Shape: pill hugging right edge ─────────── */ background: #ffffff; border: 2px solid #E2DDD8; border-right: none; border-radius: 12px 0 0 12px; padding: 11px 13px 11px 12px; box-shadow: -4px 6px 24px rgba(0,0,0,.16); cursor: pointer; text-decoration: none !important; /* ── Slide-in from right on load ─────────────── */ transform: translateX(110%); opacity: 0; animation: kw-in .65s .7s cubic-bezier(.22,1,.36,1) forwards; /* ── Hover transition ────────────────────────── */ transition: box-shadow .22s, background .22s, border-color .22s; } @keyframes kw-in { to { transform: translateX(0); opacity: 1; } } #kirf-widget:hover { background: #fffbf4; border-color: #F5A623; box-shadow: -8px 8px 32px rgba(0,0,0,.22); } /* Gold top-accent line */ #kirf-widget::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #F5A623; border-radius: 12px 0 0 0; pointer-events: none; } /* Tooltip arrow on hover */ #kirf-widget::after { content: 'View KIRF Award ›'; position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: #1e0e18; color: #F5A623; font-family: 'DM Sans', system-ui, sans-serif; font-size: .68rem; font-weight: 700; white-space: nowrap; padding: 5px 10px; border-radius: 6px; pointer-events: none; opacity: 0; transition: opacity .18s; letter-spacing: .04em; } #kirf-widget:hover::after { opacity: 1; } /* ── Inner elements ─────────────────────────── */ .kw-label { font-family: 'DM Sans', system-ui, sans-serif; font-size: .6rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: #7B1C4E; text-align: center; white-space: nowrap; line-height: 1; } .kw-logo { width: 68px; height: auto; display: block; object-fit: contain; } .kw-tag { font-family: 'DM Sans', system-ui, sans-serif; font-size: .58rem; font-weight: 700; color: #ffffff; background: #7B1C4E; border-radius: 20px; padding: 3px 8px; white-space: nowrap; letter-spacing: .04em; text-align: center; } /* Pulse dot */ .kw-pulse { position: absolute; top: 9px; left: 9px; width: 7px; height: 7px; border-radius: 50%; background: #F5A623; animation: kw-pulse 2.6s ease-in-out 1.6s infinite; pointer-events: none; } @keyframes kw-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.7); opacity: .35; } } /* ── Minimise when scrolling down ─────────────── */ #kirf-widget.kw-min .kw-label, #kirf-widget.kw-min .kw-tag { display: none; } #kirf-widget.kw-min { padding: 8px 10px 8px 9px; gap: 0; } #kirf-widget.kw-min .kw-logo { width: 50px; } /* ── Responsive ─────────────────────────────── */ @media (max-width: 1024px) { #kirf-widget { top: 110px; } } @media (max-width: 768px) { #kirf-widget { top: auto !important; bottom: 72px !important; padding: 8px 10px 8px 9px; gap: 3px; } .kw-logo { width: 56px; } .kw-label { font-size: .55rem; } .kw-tag { font-size: .55rem; padding: 2px 6px; } #kirf-widget::after { display: none; } } @media (max-width: 480px) { #kirf-widget { bottom: 60px !important; } .kw-logo { width: 48px; } }