Template:Taro/taroeffect.css - Revision history

SomeBois at 19:09, 11 October 2026

2026-10-11T19:09:30Z

← Older revision		Revision as of 19:09, 11 October 2026
Line 6:		Line 6:
	.taro-wrap {		.taro-wrap {
	position: relative;		position: relative;
	width: ~~300px~~;		width: 440px;
	max-width: 100%;		max-width: 100%;
	margin: ~~10em~~ auto 1.5em; /* room for the apex above the box */		margin: 5em auto 1.5em; /* room for the apex above the box */
	}		}

Line 14:		Line 14:
	position: absolute;		position: absolute;
	z-index: 0;		z-index: 0;
	left: ~~-85px~~; /* centers the triangle on the ~~300px~~ box */		left: 77px; /* centers the triangle on the 440px box */
	bottom: -~~49px~~; /* puts the triangle's base just under the box */		bottom: -32px; /* puts the triangle's base just under the box */
	width: ~~487px~~;		width: 297px;
	height: ~~422px~~; /* keep width ÷ height at about 1.155 */		height: 257px; /* keep width ÷ height at about 1.155 */
	}		}

SomeBois at 19:07, 11 October 2026

2026-10-11T19:07:03Z

← Older revision		Revision as of 19:07, 11 October 2026
Line 3:		Line 3:
	}		}

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

Line 14:		Line 14:
	position: absolute;		position: absolute;
	z-index: 0;		z-index: 0;
	left: -~~23.3%~~; /* centers the triangle on the box */		left: -85px; /* centers the triangle on the 300px box */
	bottom: -~~34px~~; /* puts the triangle's base just under the box */		bottom: -49px; /* puts the triangle's base just under the box */
	width: ~~151.7%~~; ~~/* triangle base = about 40px wider than the box on each side */~~		width: 487px;
	height: ~~257px~~; /* ~~apex sticks out~~ about ~~60px above the box~~ */		height: 422px; /* keep width ÷ height at about 1.155 */
	}		}

SomeBois at 19:04, 11 October 2026

2026-10-11T19:04:22Z

← Older revision		Revision as of 19:04, 11 October 2026
Line 3:		Line 3:
	}		}

	/* ---------- Layout: triangle sized ~~relative~~ to the box ---------- */		/* ---------- Layout: triangle sized to the box ---------- */
	.taro-wrap {		.taro-wrap {
	position: relative;		position: relative;
	width: 440px;		width: 440px;
	max-width: 100%;		max-width: 100%;
	~~/* 458px = 1.2 (triangle ratio) x 440px x 0.867, minus 9em for the box height */~~		margin: 5em auto 1.5em; /* top margin leaves room for the apex */
	margin: ~~calc(458px - 9em)~~ auto 1.5em;
	}		}

Line 15:		Line 14:
	position: absolute;		position: absolute;
	z-index: 0;		z-index: 0;
	left: 50%;		left: -23.3%; /* centers the triangle on the box */
	~~top~~: ~~100%~~;		bottom: -34px; /* puts the triangle's base just under the box */
	width: ~~154~~.2%; /* ~~1.2 x 128.5%~~ */		width: 151.7%; /* triangle base = about 40px wider than the box on each side */
	~~aspect-ratio~~: ~~1640~~ / ~~1420;~~		height: 257px; /* apex sticks out about 60px above the box */
	~~transform: translate(-48.2%, -87%);~~
	}		}

SomeBois at 19:01, 11 October 2026

2026-10-11T19:01:55Z

← Older revision		Revision as of 19:01, 11 October 2026
Line 3:		Line 3:
	}		}

	/* ---------- Layout: triangle ~~behind~~ the box ---------- */		/* ---------- Layout: triangle sized relative to the box ---------- */
	.taro-wrap {		.taro-wrap {
	position: relative;		position: relative;
	width: ~~min(100%, 900px)~~;		width: 440px;
	~~aspect~~-~~ratio~~: ~~1640 / 1420~~; /* ~~matches~~ the ~~triangle image~~ */		max-width: 100%;
	margin: ~~1em~~ auto;		/* 458px = 1.2 (triangle ratio) x 440px x 0.867, minus 9em for the box height */
			margin: calc(458px - 9em) auto 1.5em;
	}		}

	.taro-triangle {		.taro-triangle {
	position: absolute;		position: absolute;
	~~inset: 0;~~
	z-index: 0;		z-index: 0;
	~~animation~~: ~~taro~~-~~triangle-pulse 4s ease~~-in-~~out infinite~~;		left: 50%;
			top: 100%;
			width: 154.2%; /* 1.2 x 128.5% */
			aspect-ratio: 1640 / 1420;
			transform: translate(-48.2%, -87%);
	}		}

Line 22:		Line 26:
	height: 100%;		height: 100%;
	display: block;		display: block;
			animation: taro-triangle-pulse 4s ease-in-out infinite;
	}		}

	~~/* Box sits over the lower middle so the apex and both base corners poke out */~~
	.taro-glow {		.taro-glow {
	position: ~~absolute~~;		position: relative;
	z-index: 1;		z-index: 1;
	~~left: 48.5%;~~
	~~bottom: 11%;~~
	~~width: 62%;~~
	~~transform: translateX(-50%);~~
	animation: taro-glow-pulse 4s ease-in-out infinite;		animation: taro-glow-pulse 4s ease-in-out infinite;
	}		}
Line 47:		Line 47:
	border: 2px solid #00FF66;		border: 2px solid #00FF66;
	border-radius: 12px;		border-radius: 12px;
	box-shadow: inset 0 0 12px #003300; ~~/* inner shadow only; outer glow is on .taro-glow */~~		box-shadow: inset 0 0 12px #003300;
	text-shadow: 0 0 8px #00FF66;		text-shadow: 0 0 8px #00FF66;
	animation: taroanimate 4s ease-in-out infinite,		animation: taroanimate 4s ease-in-out infinite,
Line 63:		Line 63:
	}		}

	~~/* drop-shadow is applied AFTER the child's clip-path, so the glow follows the wavy edge */~~
	@keyframes taro-glow-pulse {		@keyframes taro-glow-pulse {
	0%, 100% {		0%, 100% {
Line 91:		Line 90:
	/* ---------- Small screens / accessibility ---------- */		/* ---------- Small screens / accessibility ---------- */
	@media (max-width: 600px) {		@media (max-width: 600px) {
	~~.taro-glow { width: 76%; bottom: 9%; }~~
	.effect { font-size: 80%; }		.effect { font-size: 80%; }
	}		}

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

SomeBois at 18:53, 11 October 2026

2026-10-11T18:53:46Z

@@ Line 3: / Line 3: @@
+}
-.effect h2 {
+/* ---------- Layout: triangle behind the box ---------- */
-   color: #FFFFFF;
+.taro-wrap {
-   font-size: 8em;
+   position: relative;
    position: absolute;
-   transform: translate(-50%, -50%);
+   inset: 0;
+}
-.effect {
+/* Box sits over the lower middle so the apex and both base corners poke out */
-   color: transparent;
+.taro-glow {
+}
 .effect {
-   color: #008CFF;
+  width: 100%;
    text-shadow: 0 0 8px #00FF66;
-   animation: taroanimate 4s ease-in-out infinite;
+   animation: taroanimate 4s ease-in-out infinite,
+}
 @keyframes taroanimate {
 %, 100% {
-     clip-path: polygon(
+     clip-path: polygon(0% 5%, 16% 10%, 33% 5%, 54% 9%, 70% 7%, 84% 6.2%, 100% 7%, 100% 100%, 0% 100%);
-% 5%, 16% 10%, 33% 5%, 54% 9%,
-% 7%, 84% 6.2%, 100% 7%,
+% {
-% 100%, 0% 100%
+     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%);
+   }
 % {
-     clip-path: polygon(
+     filter: drop-shadow(0 0 8px #00FF88) drop-shadow(0 0 22px #00FF66) drop-shadow(0 0 44px rgba(0,255,102,.55));
+   }
+}

SomeBois: Created page with ".content { position: relative; } .effect h2 { color: #FFFFFF; font-size: 8em; position: absolute; transform: translate(-50%, -50%); } .effect { color: transparent; } .effect { color: #008CFF; text-shadow: 0 0 8px #00FF66; animation: taroanimate 4s ease-in-out infinite; } @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% {..."

2026-10-11T18:22:15Z

Created page with ".content { position: relative; } .effect h2 { color: #FFFFFF; font-size: 8em; position: absolute; transform: translate(-50%, -50%); } .effect { color: transparent; } .effect { color: #008CFF; text-shadow: 0 0 8px #00FF66; animation: taroanimate 4s ease-in-out infinite; } @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% {..."

New page

.content {
position: relative;
}

.effect h2 {
color: #FFFFFF;
font-size: 8em;
position: absolute;
transform: translate(-50%, -50%);
}

.effect {
color: transparent;
}

.effect {
color: #008CFF;
text-shadow: 0 0 8px #00FF66;
animation: taroanimate 4s ease-in-out infinite;
}

@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%
);
}
}