engineering/www.makepostsell.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Epic corner ribbon: larger band, fixed position, shimmer + glow animations

Browse source 
300px container, 380px band width, 16px font, letter-spacing 0.08em.
Triple-layer green glow pulses at 2.5s. Hover adds quad-layer glow
reaching 140px, green shimmer gradient sweep, 1.08x scale-up, green
text-shadow bloom. Fixed position stays visible on scroll.
This commit is contained in:
russell@unturf.com 2026-03-04 15:56:07 -05:00
parent 10b8ad27f8
commit c55164ef41
1 changed files with 30 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

49
common.css
View file

@ -781,50 +781,61 @@ textarea.markup-editor-textarea {
============================================ */
@keyframes ribbon-glow {
0% { box-shadow: 0 3px 8px rgba(163, 199, 101, 0.3), 0 0 15px rgba(163, 199, 101, 0.15); }
50% { box-shadow: 0 3px 12px rgba(163, 199, 101, 0.6), 0 0 30px rgba(163, 199, 101, 0.3); }
100% { box-shadow: 0 3px 8px rgba(163, 199, 101, 0.3), 0 0 15px rgba(163, 199, 101, 0.15); }
0% { box-shadow: 0 3px 10px rgba(163, 199, 101, 0.4), 0 0 20px rgba(163, 199, 101, 0.2), 0 0 40px rgba(163, 199, 101, 0.1); }
50% { box-shadow: 0 3px 16px rgba(163, 199, 101, 0.7), 0 0 35px rgba(163, 199, 101, 0.4), 0 0 60px rgba(163, 199, 101, 0.15); }
100% { box-shadow: 0 3px 10px rgba(163, 199, 101, 0.4), 0 0 20px rgba(163, 199, 101, 0.2), 0 0 40px rgba(163, 199, 101, 0.1); }
}
@keyframes ribbon-glow-hover {
0% { box-shadow: 0 3px 12px rgba(163, 199, 101, 0.6), 0 0 35px rgba(163, 199, 101, 0.4), 0 0 60px rgba(163, 199, 101, 0.15); }
50% { box-shadow: 0 3px 18px rgba(163, 199, 101, 0.9), 0 0 50px rgba(163, 199, 101, 0.6), 0 0 80px rgba(163, 199, 101, 0.25); }
100% { box-shadow: 0 3px 12px rgba(163, 199, 101, 0.6), 0 0 35px rgba(163, 199, 101, 0.4), 0 0 60px rgba(163, 199, 101, 0.15); }
0% { box-shadow: 0 3px 16px rgba(163, 199, 101, 0.8), 0 0 40px rgba(163, 199, 101, 0.5), 0 0 80px rgba(163, 199, 101, 0.2), 0 0 120px rgba(163, 199, 101, 0.1); }
50% { box-shadow: 0 3px 24px rgba(163, 199, 101, 1.0), 0 0 60px rgba(163, 199, 101, 0.7), 0 0 100px rgba(163, 199, 101, 0.3), 0 0 140px rgba(163, 199, 101, 0.15); }
100% { box-shadow: 0 3px 16px rgba(163, 199, 101, 0.8), 0 0 40px rgba(163, 199, 101, 0.5), 0 0 80px rgba(163, 199, 101, 0.2), 0 0 120px rgba(163, 199, 101, 0.1); }
}
@keyframes ribbon-shimmer {
0% { background-position: 200% center; }
100% { background-position: -200% center; }
}
.corner-ribbon {
position: sticky;
position: fixed;
top: 0;
right: 0;
z-index: 99;
height: 0;
overflow: visible;
width: 300px;
height: 300px;
overflow: hidden;
pointer-events: none;
}
.corner-ribbon a {
display: block !important;
position: absolute !important;
right: -45px;
top: 40px;
width: 250px;
padding: 10px 0;
right: -60px;
top: 60px;
width: 380px;
padding: 14px 0;
text-align: center;
font-size: 14px;
font-size: 16px;
font-weight: bold !important;
color: #ffffff !important;
background: linear-gradient(135deg, #7B2D8E, #9B59B6, #7B2D8E) !important;
background-size: 200% auto !important;
text-decoration: none !important;
transform: rotate(45deg);
pointer-events: auto;
letter-spacing: 0.03em;
animation: ribbon-glow 2.5s ease-in-out infinite;
letter-spacing: 0.08em;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 10px rgba(163, 199, 101, 0.4);
animation: ribbon-glow 2.5s ease-in-out infinite, ribbon-shimmer 4s linear infinite;
transition: all 300ms ease;
}
.corner-ribbon a:hover {
background: linear-gradient(135deg, #6A1B7A, #8E44AD, #6A1B7A) !important;
animation: ribbon-glow-hover 1.5s ease-in-out infinite;
transform: rotate(45deg) scale(1.05);
background: linear-gradient(135deg, #6A1B7A, #a3c765, #6A1B7A) !important;
background-size: 200% auto !important;
animation: ribbon-glow-hover 1.5s ease-in-out infinite, ribbon-shimmer 2s linear infinite;
transform: rotate(45deg) scale(1.08);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 20px rgba(163, 199, 101, 0.8);
}
@media (min-width: 800px) {