:root { --accent: #ff8800; } @keyframes spin3 { 0%, 100% { box-shadow: 10px 10px rgba(255, 136, 0, 1), -10px 10px rgba(255, 136, 0, 0.2), -10px -10px rgba(255, 136, 0, 1), 10px -10px rgba(255, 136, 0, 0.2); } 25% { box-shadow: -10px 10px rgba(255, 136, 0, 0.2), -10px -10px rgba(255, 136, 0, 1), 10px -10px rgba(255, 136, 0, 0.2), 10px 10px rgba(255, 136, 0, 1); } 50% { box-shadow: -10px -10px rgba(255, 136, 0, 1), 10px -10px rgba(255, 136, 0, 0.2), 10px 10px rgba(255, 136, 0, 1), -10px 10px rgba(255, 136, 0, 0.2); } 75% { box-shadow: 10px -10px rgba(255, 136, 0, 0.2), 10px 10px rgba(255, 136, 0, 1), -10px 10px rgba(255, 136, 0, 0.2), -10px -10px rgba(255, 136, 0, 1); } } #wpadminbar { top: 0 !important; } #c27-site-wrapper { background-color: #ffffff }/*credit /* --- Outer Wrapper (to ensure it sits inline with other copyright text) --- */ .enspirefx-copyright-wrapper { line-height: 1; /* Keep line height tight around the content */ display: inline-block; /* Allows the entire block to sit on one line */ vertical-align: middle; /* Align this whole block with any surrounding text */ } /* --- The Link Container (Flexbox for internal alignment) --- */ .enspirefx-design-link { text-decoration: none; /* Removes underline */ display: inline-flex !important; /* Force as inline-flex container */ align-items: center !important; /* Main vertical alignment for flex items */ flex-wrap: nowrap !important; /* Crucial: Prevents items from wrapping to next line */ white-space: nowrap; /* Prevents the text from wrapping */ color: inherit; /* Ensure link color matches surrounding text if not set by theme */ /* You might want to adjust text color if it's currently blue from default link styles */ } /* --- The Image Styling (Fine-tuning vertical alignment) --- */ .enspirefx-design-link img { margin-left: 5px !important; /* Space between text and image */ /* Add this specifically for fine-tuning vertical alignment of the image itself */ vertical-align: bottom !important; /* Forces the image's middle to align */ /* If still slightly off, you can use a small relative position adjustment */ /* position: relative; */ /* top: 1px; Adjust this value (e.g., 0.5px, 1px, -1px) as needed */ } /* --- Optional: If the overall copyright area is breaking, use this --- */ /* This targets a common Kadence copyright container class */ /* Only add this if the entire line (including this snippet and other copyright text) breaks */ .site-footer-copyright-inner { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; justify-content: center; /* Or flex-start, space-between depending on desired layout */ } /* Custom Tooltip Styling */ .enspirefx-custom-tooltip { position: absolute; /* Position relative to the image */ background-color: #333; /* Dark background */ color: #fff; /* White text */ padding: 8px 12px; border-radius: 4px; font-size: 14px; white-space: nowrap; /* Keep tooltip text on one line if short */ z-index: 10000; /* Ensure it's on top of other content */ opacity: 0; /* Start hidden */ visibility: hidden; /* Hide until hovered */ transition: opacity 0.2s ease, visibility 0.2s ease; /* Smooth transition */ pointer-events: none; /* Allows clicks to pass through if not covering other elements */ transform: translateX(-50%); /* Center horizontally relative to its left edge */ } /*Tooltip /* Custom Tooltip Styling */ .enspirefx-custom-tooltip { position: absolute; /* Position relative to the image */ background-color: #333; /* Dark background */ color: #fff; /* White text */ padding: 8px 12px; border-radius: 4px; font-size: 14px; /* CHANGE 1: Allow text to wrap within the defined width */ white-space: normal; /* Changed from nowrap to normal */ z-index: 10000; /* Ensure it's on top of other content */ opacity: 0; /* Start hidden */ visibility: hidden; /* Hide until hovered */ transition: opacity 0.2s ease, visibility 0.2s ease; /* Smooth transition */ pointer-events: none; /* Allows clicks to pass through if not covering other elements */ transform: translateX(-50%); /* Center horizontally relative to its left edge */ /* CHANGE 2: Set the maximum width for the tooltip */ max-width: 200px; /* The tooltip will be at most 200px wide */ /* Optional: Add a minimum width if you want to ensure it's not too narrow for short text */ /* min-width: 80px; */ } /* Optional: Arrow pointing to the image */ .enspirefx-custom-tooltip::after { content: ''; position: absolute; top: 100%; /* Position at the bottom of the tooltip */ left: 50%; margin-left: -5px; /* Half of arrow width */ border-width: 5px; border-style: solid; border-color: #333 transparent transparent transparent; /* Arrow color */ }