Template:Taro/taroeffect.css: Difference between revisions

Revision as of 19:04, 11 October 2026

.content {
  position: relative;
}

/* ---------- Layout: triangle sized to the box ---------- */
.taro-wrap {
  position: relative;
  width: 440px;
  max-width: 100%;
  margin: 5em auto 1.5em;       /* top margin leaves room for the apex */
}

.taro-triangle {
  position: absolute;
  z-index: 0;
  left: -23.3%;                 /* centers the triangle on the box */
  bottom: -34px;                /* puts the triangle's base just under the box */
  width: 151.7%;                /* triangle base = about 40px wider than the box on each side */
  height: 257px;                /* apex sticks out about 60px above the box */
}

.taro-triangle img {
  width: 100%;
  height: 100%;
  display: block;
  animation: taro-triangle-pulse 4s ease-in-out infinite;
}

.taro-glow {
  position: relative;
  z-index: 1;
  animation: taro-glow-pulse 4s ease-in-out infinite;
}

/* ---------- The box itself ---------- */
.effect {
  width: 100%;
  margin: 0;
  color: #fff;
  background: linear-gradient(135deg, #0066FF, #00008B);
  font-size: 95%;
  text-align: center;
  padding: .5em;
  overflow: hidden;
  border: 2px solid #00FF66;
  border-radius: 12px;
  box-shadow: inset 0 0 12px #003300;
  text-shadow: 0 0 8px #00FF66;
  animation: taroanimate 4s ease-in-out infinite,
             taro-text-pulse 4s ease-in-out infinite;
}

/* ---------- Animations ---------- */
@keyframes taroanimate {
  0%, 100% {
    clip-path: polygon(0% 5%, 16% 10%, 33% 5%, 54% 9%, 70% 7%, 84% 6.2%, 100% 7%, 100% 100%, 0% 100%);
  }
  50% {
    clip-path: polygon(0% 8%, 16% 7%, 34% 11.6%, 51% 11.2%, 67% 12%, 84% 12.5%, 100% 10.6%, 100% 100%, 0% 100%);
  }
}

@keyframes taro-glow-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 4px #00FF66) drop-shadow(0 0 12px #00CC55);
  }
  50% {
    filter: drop-shadow(0 0 8px #00FF88) drop-shadow(0 0 22px #00FF66) drop-shadow(0 0 44px rgba(0,255,102,.55));
  }
}

@keyframes taro-text-pulse {
  0%, 100% { text-shadow: 0 0 6px #00FF66; }
  50%      { text-shadow: 0 0 10px #00FF88, 0 0 22px #00FF66; }
}

@keyframes taro-triangle-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 10px rgba(255,215,0,.5)) brightness(1);
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 28px rgba(255,215,0,.9)) brightness(1.12);
    transform: scale(1.015);
  }
}

/* ---------- Small screens / accessibility ---------- */
@media (max-width: 600px) {
  .effect { font-size: 80%; }
}

@media (prefers-reduced-motion: reduce) {
  .taro-triangle img, .taro-glow, .effect { animation: none; }
}