Template:Cobwatch/styles.css - Revision history

SomebodyRum at 19:33, 21 April 2026

2026-04-21T19:33:42Z

← Older revision		Revision as of 19:33, 21 April 2026
Line 8:		Line 8:
	/*		/*
	Container shapes the cigar.		Container shapes the cigar.
	~~RESTORED~~ overflow:hidden ~~to ensure~~ the left cap/band corners are perfectly smooth!		overflow:hidden ensures the left cap/band corners are perfectly smooth.
	*/		*/
	.cobwatch-cigar {		.cobwatch-cigar {
Line 74:		Line 74:
	.cobwatch-audio { margin: 2px 0; }		.cobwatch-audio { margin: 2px 0; }
	.cobwatch-subtitle { font-size: 1em; font-style: italic; color: #ffca28; }		.cobwatch-subtitle { font-size: 1em; font-style: italic; color: #ffca28; }


	/*		/*

SomebodyRum at 19:31, 21 April 2026

2026-04-21T19:31:52Z

← Older revision		Revision as of 19:31, 21 April 2026
Line 1:		Line 1:
	/* Wrapper */		/* Wrapper provides positioning for the absolute layers */
	.cobwatch-wrapper {		.cobwatch-wrapper {
	position: relative;		position: relative;
Line 6:		Line 6:
	}		}

	/* Container shapes the cigar. */		/*
			Container shapes the cigar.
			RESTORED overflow:hidden to ensure the left cap/band corners are perfectly smooth!
			*/
	.cobwatch-cigar {		.cobwatch-cigar {
	display: flex;		display: flex;
Line 18:		Line 21:
	color: #ffdf00;		color: #ffdf00;
	font-family: "Times New Roman", serif;		font-family: "Times New Roman", serif;
			overflow: hidden;
	}		}

Line 28:		Line 32:
	width: 25px;		width: 25px;
	background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, transparent 100%);		background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, transparent 100%);
	~~border-radius: 39px 0 0 39px;~~
	}		}

Line 71:		Line 74:
	.cobwatch-audio { margin: 2px 0; }		.cobwatch-audio { margin: 2px 0; }
	.cobwatch-subtitle { font-size: 1em; font-style: italic; color: #ffca28; }		.cobwatch-subtitle { font-size: 1em; font-style: italic; color: #ffca28; }


	/*		/*
	==========================================		==========================================
	THE ASH TIP (~~Trigger Area~~)		THE ASH TIP (Visuals only)
	==========================================		==========================================
	*/		*/
Line 81:		Line 85:
	width: 50px;		width: 50px;
	position: relative;		position: relative;
	~~cursor: pointer;~~
	~~outline: none;~~
	~~border-radius: 0 7px 7px 0;~~
	background:		background:
	radial-gradient(circle at 30% 35%, rgba(255, 50, 0, 0.9) 1.5px, transparent 3px),		radial-gradient(circle at 30% 35%, rgba(255, 50, 0, 0.9) 1.5px, transparent 3px),
Line 94:		Line 95:
	}		}

	~~/* The wrapper that hides the magma initially */~~
	.cobwatch-burn-layer {		.cobwatch-burn-layer {
	position: absolute;		position: absolute;
	top: 0; left: 0; bottom: 0;		top: 0; left: 0; bottom: 0;
	width: 100%;		width: 100%;
	~~border-radius: 0 7px 7px 0;~~
	background:		background:
	repeating-linear-gradient(25deg, transparent, transparent 35px, rgba(0,0,0,0.15) 37px, transparent 38px),		repeating-linear-gradient(25deg, transparent, transparent 35px, rgba(0,0,0,0.15) 37px, transparent 38px),
Line 106:		Line 105:
	}		}

	/* ~~Trigger Burn on Click (~~:~~focus)~~ */		/*
	.cobwatch-~~foot~~:focus .cobwatch-burn-layer,		==========================================
	.cobwatch-~~foot~~:active .cobwatch-burn-layer {		THE INVISIBLE TRIGGER & ANIMATIONS
			==========================================
			*/

			/* An invisible button overlaying the right tip */
			.cobwatch-trigger {
			position: absolute;
			top: 0; right: 0;
			width: 50px;
			height: 100%;
			cursor: pointer;
			outline: none;
			z-index: 20;
			}

			/* Animate the internal burn layer when the trigger is clicked */
			.cobwatch-trigger:focus ~ .cobwatch-cigar .cobwatch-burn-layer,
			.cobwatch-trigger:active ~ .cobwatch-cigar .cobwatch-burn-layer {
	animation: cobwatch-ignite-burn 2.5s ease-in forwards;		animation: cobwatch-ignite-burn 2.5s ease-in forwards;
	}		}
Line 120:		Line 136:
	/*		/*
	==========================================		==========================================
	PARTICLES (~~Triggered on Click~~)		PARTICLES (Outside the cigar)
	==========================================		==========================================
	*/		*/
Line 127:		Line 143:
	position: absolute;		position: absolute;
	right: 0; top: 0;		right: 0; top: 0;
	width: ~~100%~~; height: 100%;		width: 50px;
			height: 100%;
	z-index: 10;		z-index: 10;
	}		}
Line 142:		Line 159:
	}		}

	.cobwatch-~~foot~~:focus .cobwatch-spark-1, .cobwatch-~~foot~~:active .cobwatch-spark-1 { animation: cobwatch-spark-fly-1 1.8s 2 ease-out forwards; animation-delay: 0.1s; }		.cobwatch-trigger:focus ~ .cobwatch-particle-system .cobwatch-spark-1, .cobwatch-trigger:active ~ .cobwatch-particle-system .cobwatch-spark-1 { animation: cobwatch-spark-fly-1 1.8s 2 ease-out forwards; animation-delay: 0.1s; }
	.cobwatch-~~foot~~:focus .cobwatch-spark-2, .cobwatch-~~foot~~:active .cobwatch-spark-2 { animation: cobwatch-spark-fly-2 2.2s 2 ease-out forwards; animation-delay: 0.3s; }		.cobwatch-trigger:focus ~ .cobwatch-particle-system .cobwatch-spark-2, .cobwatch-trigger:active ~ .cobwatch-particle-system .cobwatch-spark-2 { animation: cobwatch-spark-fly-2 2.2s 2 ease-out forwards; animation-delay: 0.3s; }
	.cobwatch-~~foot~~:focus .cobwatch-spark-3, .cobwatch-~~foot~~:active .cobwatch-spark-3 { animation: cobwatch-spark-fly-3 1.5s 2 ease-out forwards; animation-delay: 0.6s; }		.cobwatch-trigger:focus ~ .cobwatch-particle-system .cobwatch-spark-3, .cobwatch-trigger:active ~ .cobwatch-particle-system .cobwatch-spark-3 { animation: cobwatch-spark-fly-3 1.5s 2 ease-out forwards; animation-delay: 0.6s; }
	.cobwatch-~~foot~~:focus .cobwatch-spark-4, .cobwatch-~~foot~~:active .cobwatch-spark-4 { animation: cobwatch-spark-fly-4 2.5s 2 ease-out forwards; animation-delay: 0.9s; }		.cobwatch-trigger:focus ~ .cobwatch-particle-system .cobwatch-spark-4, .cobwatch-trigger:active ~ .cobwatch-particle-system .cobwatch-spark-4 { animation: cobwatch-spark-fly-4 2.5s 2 ease-out forwards; animation-delay: 0.9s; }
	.cobwatch-~~foot~~:focus .cobwatch-spark-5, .cobwatch-~~foot~~:active .cobwatch-spark-5 { animation: cobwatch-spark-fly-5 2.0s 2 ease-out forwards; animation-delay: 1.2s; }		.cobwatch-trigger:focus ~ .cobwatch-particle-system .cobwatch-spark-5, .cobwatch-trigger:active ~ .cobwatch-particle-system .cobwatch-spark-5 { animation: cobwatch-spark-fly-5 2.0s 2 ease-out forwards; animation-delay: 1.2s; }

	@keyframes cobwatch-spark-fly-1 { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(35px, -45px) scale(0); opacity: 0; } }		@keyframes cobwatch-spark-fly-1 { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(35px, -45px) scale(0); opacity: 0; } }
Line 165:		Line 182:
	}		}

	.cobwatch-~~foot~~:focus .cobwatch-smoke-1, .cobwatch-~~foot~~:active .cobwatch-smoke-1 { animation: cobwatch-smoke-rise-1 3.5s 1 ease-in forwards; animation-delay: 0.2s; }		.cobwatch-trigger:focus ~ .cobwatch-particle-system .cobwatch-smoke-1, .cobwatch-trigger:active ~ .cobwatch-particle-system .cobwatch-smoke-1 { animation: cobwatch-smoke-rise-1 3.5s 1 ease-in forwards; animation-delay: 0.2s; }
	.cobwatch-~~foot~~:focus .cobwatch-smoke-2, .cobwatch-~~foot~~:active .cobwatch-smoke-2 { animation: cobwatch-smoke-rise-2 4.2s 1 ease-in forwards; animation-delay: 0.8s; }		.cobwatch-trigger:focus ~ .cobwatch-particle-system .cobwatch-smoke-2, .cobwatch-trigger:active ~ .cobwatch-particle-system .cobwatch-smoke-2 { animation: cobwatch-smoke-rise-2 4.2s 1 ease-in forwards; animation-delay: 0.8s; }
	.cobwatch-~~foot~~:focus .cobwatch-smoke-3, .cobwatch-~~foot~~:active .cobwatch-smoke-3 { animation: cobwatch-smoke-rise-3 3.8s 1 ease-in forwards; animation-delay: 1.5s; }		.cobwatch-trigger:focus ~ .cobwatch-particle-system .cobwatch-smoke-3, .cobwatch-trigger:active ~ .cobwatch-particle-system .cobwatch-smoke-3 { animation: cobwatch-smoke-rise-3 3.8s 1 ease-in forwards; animation-delay: 1.5s; }

	@keyframes cobwatch-smoke-rise-1 {		@keyframes cobwatch-smoke-rise-1 {
Line 188:		Line 205:
	@media (max-width: 600px) {		@media (max-width: 600px) {
	.cobwatch-cigar { flex-direction: column; border-radius: 20px 20px 10px 10px; }		.cobwatch-cigar { flex-direction: column; border-radius: 20px 20px 10px 10px; }
	.cobwatch-cap, .cobwatch-foot { display: none !important; }		.cobwatch-cap, .cobwatch-foot, .cobwatch-trigger, .cobwatch-particle-system { display: none !important; }
	.cobwatch-band {		.cobwatch-band {
	border-left: none; border-right: none;		border-left: none; border-right: none;

SomebodyRum at 19:27, 21 April 2026

2026-04-21T19:27:59Z

Show changes

SomebodyRum at 19:23, 21 April 2026

2026-04-21T19:23:59Z

← Older revision		Revision as of 19:23, 21 April 2026
Line 18:		Line 18:
	color: #ffdf00;		color: #ffdf00;
	font-family: "Times New Roman", serif;		font-family: "Times New Roman", serif;
	overflow: hidden; ~~/* Keeps the band and cap clipped */~~		overflow: hidden;
	}		}

Line 24:		Line 24:
	.cobwatch-cigar p, .cobwatch-wrapper p { display: contents; margin: 0; }		.cobwatch-cigar p, .cobwatch-wrapper p { display: contents; margin: 0; }
	.cobwatch-cigar br, .cobwatch-wrapper br { display: none; }		.cobwatch-cigar br, .cobwatch-wrapper br { display: none; }

			/* Hide MW auto-generated toggle links in case parser injects them */
			.cobwatch-burn-layer .mw-collapsible-toggle,
			.cobwatch-particle-system .mw-collapsible-toggle {
			display: none !important;
			}

	/* The rounded mouth-piece (Cap) */		/* The rounded mouth-piece (Cap) */
Line 78:		Line 84:
	*/		*/

			/* Ash tip */
	.cobwatch-foot {		.cobwatch-foot {
	width: 50px;		width: 50px;
	position: relative;		position: relative;
	cursor: pointer; ~~/* Indicates to users it can be clicked */~~		cursor: pointer;
	background:		background:
	radial-gradient(circle at 30% 35%, rgba(255, 50, 0, 0.9) 1.5px, transparent 3px),		radial-gradient(circle at 30% 35%, rgba(255, 50, 0, 0.9) 1.5px, transparent 3px),
Line 92:		Line 99:
	}		}

	/* The Burn Layer */		/* The Burn Layer (Starts hidden) */
	.cobwatch-burn-layer {		.cobwatch-burn-layer {
	position: absolute;		position: absolute;
Line 100:		Line 107:
	repeating-linear-gradient(25deg, transparent, transparent 35px, rgba(0,0,0,0.15) 37px, transparent 38px),		repeating-linear-gradient(25deg, transparent, transparent 35px, rgba(0,0,0,0.15) 37px, transparent 38px),
	linear-gradient(to bottom, #2b160a 0%, #4a2613 25%, #593019 50%, #30170a 80%, #1a0c05 100%);		linear-gradient(to bottom, #2b160a 0%, #4a2613 25%, #593019 50%, #30170a 80%, #1a0c05 100%);
	animation: cobwatch-ignite-burn 3s ease-in forwards;		animation: cobwatch-ignite-burn 2.5s ease-in forwards;
	animation-delay: 0.8s;		animation-delay: 0.1s;
	z-index: 2;		z-index: 2;
	}		}
Line 113:		Line 120:
	/*		/*
	==========================================		==========================================
	PARTICLE SYSTEM ~~(Intro Only + Easter Egg)~~		PARTICLE SYSTEM
	==========================================		==========================================
	*/		*/
Line 126:		Line 133:
	}		}

	/* ~~--- Tiny Spawning Fire Particles (~~Embers~~) ---~~ */		/* Embers */
	.cobwatch-spark {		.cobwatch-spark {
	position: absolute;		position: absolute;
Line 139:		Line 146:
	}		}

	/* ~~Removed infinite loop.~~ Plays 2 iterations timed with the ~~intro burn.~~ */		/* Plays 2 iterations timed with the click */
	.cobwatch-spark-1 { animation: cobwatch-spark-fly-1 1.8s 2 ease-out forwards; animation-delay: 0.8s; }		.cobwatch-spark-1 { animation: cobwatch-spark-fly-1 1.8s 2 ease-out forwards; animation-delay: 0.1s; }
	.cobwatch-spark-2 { animation: cobwatch-spark-fly-2 2.2s 2 ease-out forwards; animation-delay: 1.2s; }		.cobwatch-spark-2 { animation: cobwatch-spark-fly-2 2.2s 2 ease-out forwards; animation-delay: 0.3s; }
	.cobwatch-spark-3 { animation: cobwatch-spark-fly-3 1.5s 2 ease-out forwards; animation-delay: 1.7s; }		.cobwatch-spark-3 { animation: cobwatch-spark-fly-3 1.5s 2 ease-out forwards; animation-delay: 0.6s; }
	.cobwatch-spark-4 { animation: cobwatch-spark-fly-4 2.5s 2 ease-out forwards; animation-delay: 2.1s; }		.cobwatch-spark-4 { animation: cobwatch-spark-fly-4 2.5s 2 ease-out forwards; animation-delay: 0.9s; }
	.cobwatch-spark-5 { animation: cobwatch-spark-fly-5 2.0s 2 ease-out forwards; animation-delay: 2.6s; }		.cobwatch-spark-5 { animation: cobwatch-spark-fly-5 2.0s 2 ease-out forwards; animation-delay: 1.2s; }

	@keyframes cobwatch-spark-fly-1 { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(25px, -35px) scale(0); opacity: 0; } }		@keyframes cobwatch-spark-fly-1 { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(25px, -35px) scale(0); opacity: 0; } }
Line 152:		Line 159:
	@keyframes cobwatch-spark-fly-5 { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(15px, 25px) scale(0); opacity: 0; } }		@keyframes cobwatch-spark-fly-5 { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(15px, 25px) scale(0); opacity: 0; } }

	/* ~~---~~ Smoke Plumes ~~(Made thicker and more visible) ---~~ */		/* Smoke Plumes */
	.cobwatch-smoke {		.cobwatch-smoke {
	position: absolute;		position: absolute;
Line 165:		Line 172:
	}		}

	/* Plays once ~~alongside the intro burn~~ */		/* Plays once per click */
	.cobwatch-smoke-1 { animation: cobwatch-smoke-rise-1 3.5s 1 ease-in forwards; animation-delay: 1.0s; }		.cobwatch-smoke-1 { animation: cobwatch-smoke-rise-1 3.5s 1 ease-in forwards; animation-delay: 0.2s; }
	.cobwatch-smoke-2 { animation: cobwatch-smoke-rise-2 4.2s 1 ease-in forwards; animation-delay: 2.0s; }		.cobwatch-smoke-2 { animation: cobwatch-smoke-rise-2 4.2s 1 ease-in forwards; animation-delay: 0.8s; }
	.cobwatch-smoke-3 { animation: cobwatch-smoke-rise-3 3.8s 1 ease-in forwards; animation-delay: 3.0s; }		.cobwatch-smoke-3 { animation: cobwatch-smoke-rise-3 3.8s 1 ease-in forwards; animation-delay: 1.5s; }

	@keyframes cobwatch-smoke-rise-1 {		@keyframes cobwatch-smoke-rise-1 {
Line 189:		Line 196:
	@media (max-width: 600px) {		@media (max-width: 600px) {
	.cobwatch-cigar { flex-direction: column; border-radius: 20px 20px 10px 10px; }		.cobwatch-cigar { flex-direction: column; border-radius: 20px 20px 10px 10px; }
	.cobwatch-cap, .cobwatch-foot, .cobwatch-particle-system { display: none; }		.cobwatch-cap, .cobwatch-foot, .cobwatch-particle-system { display: none !important; }
	.cobwatch-band {		.cobwatch-band {
	border-left: none; border-right: none;		border-left: none; border-right: none;

SomebodyRum at 19:19, 21 April 2026

2026-04-21T19:19:07Z

← Older revision		Revision as of 19:19, 21 April 2026
Line 18:		Line 18:
	color: #ffdf00;		color: #ffdf00;
	font-family: "Times New Roman", serif;		font-family: "Times New Roman", serif;
	overflow: hidden; /* Keeps the band and cap clipped ~~to the rounded corners~~ */		overflow: hidden; /* Keeps the band and cap clipped */
	}		}

Line 81:		Line 81:
	width: 50px;		width: 50px;
	position: relative;		position: relative;
			cursor: pointer; /* Indicates to users it can be clicked */
	background:		background:
	~~/* Deep magma cracks */~~
	radial-gradient(circle at 30% 35%, rgba(255, 50, 0, 0.9) 1.5px, transparent 3px),		radial-gradient(circle at 30% 35%, rgba(255, 50, 0, 0.9) 1.5px, transparent 3px),
	radial-gradient(circle at 65% 55%, rgba(255, 80, 0, 0.8) 2px, transparent 5px),		radial-gradient(circle at 65% 55%, rgba(255, 80, 0, 0.8) 2px, transparent 5px),
	radial-gradient(circle at 45% 75%, rgba(255, 40, 0, 0.9) 1.5px, transparent 4px),		radial-gradient(circle at 45% 75%, rgba(255, 40, 0, 0.9) 1.5px, transparent 4px),
	radial-gradient(circle at 75% 25%, rgba(255, 100, 0, 0.7) 1px, transparent 3px),		radial-gradient(circle at 75% 25%, rgba(255, 100, 0, 0.7) 1px, transparent 3px),
	~~/* Dark charred ash base */~~
	linear-gradient(to right, #111 0%, #2a2a2a 40%, #1a1a1a 80%, #050505 100%);		linear-gradient(to right, #111 0%, #2a2a2a 40%, #1a1a1a 80%, #050505 100%);
	box-shadow: inset 5px 0 12px rgba(0,0,0,0.9);		box-shadow: inset 5px 0 12px rgba(0,0,0,0.9);
Line 93:		Line 92:
	}		}

	/* The Burn Layer~~: Replaced the ugly solid line with an inset glowing shadow~~ */		/* The Burn Layer */
	.cobwatch-burn-layer {		.cobwatch-burn-layer {
	position: absolute;		position: absolute;
Line 114:		Line 113:
	/*		/*
	==========================================		==========================================
	PARTICLE SYSTEM (~~Outside the frame!~~)		PARTICLE SYSTEM (Intro Only + Easter Egg)
	==========================================		==========================================
	*/		*/
Line 122:		Line 121:
	right: 0;		right: 0;
	top: 0;		top: 0;
	width: 50px; ~~/* Covers the lit end exactly */~~		width: 50px;
	height: 100%;		height: 100%;
	z-index: 10;		z-index: 10;
Line 134:		Line 133:
	width: 3px;		width: 3px;
	height: 3px;		height: 3px;
	background: #fff; ~~/* White hot core */~~		background: #fff;
	border-radius: 50%;		border-radius: 50%;
	box-shadow: 0 0 6px 3px #ff4500, 0 0 2px 1px #ffcc00;		box-shadow: 0 0 6px 3px #ff4500, 0 0 2px 1px #ffcc00;
Line 140:		Line 139:
	}		}

	/* ~~Distinct randomized paths & delays for~~ the ~~sparks~~ */		/* Removed infinite loop. Plays 2 iterations timed with the intro burn. */
	.cobwatch-spark-1 { animation: cobwatch-spark-fly-1 1.8s ~~infinite~~ ease-out; animation-delay: 1.5s; }		.cobwatch-spark-1 { animation: cobwatch-spark-fly-1 1.8s 2 ease-out forwards; animation-delay: 0.8s; }
	.cobwatch-spark-2 { animation: cobwatch-spark-fly-2 2.2s ~~infinite~~ ease-out; animation-delay: 2.1s; }		.cobwatch-spark-2 { animation: cobwatch-spark-fly-2 2.2s 2 ease-out forwards; animation-delay: 1.2s; }
	.cobwatch-spark-3 { animation: cobwatch-spark-fly-3 1.5s ~~infinite~~ ease-out; animation-delay: 2.8s; }		.cobwatch-spark-3 { animation: cobwatch-spark-fly-3 1.5s 2 ease-out forwards; animation-delay: 1.7s; }
	.cobwatch-spark-4 { animation: cobwatch-spark-fly-4 2.5s ~~infinite~~ ease-out; animation-delay: 3.4s; }		.cobwatch-spark-4 { animation: cobwatch-spark-fly-4 2.5s 2 ease-out forwards; animation-delay: 2.1s; }
	.cobwatch-spark-5 { animation: cobwatch-spark-fly-5 2.0s ~~infinite~~ ease-out; animation-delay: 4.2s; }		.cobwatch-spark-5 { animation: cobwatch-spark-fly-5 2.0s 2 ease-out forwards; animation-delay: 2.6s; }

	@keyframes cobwatch-spark-fly-1 { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(25px, -35px) scale(0); opacity: 0; } }		@keyframes cobwatch-spark-fly-1 { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(25px, -35px) scale(0); opacity: 0; } }
Line 153:		Line 152:
	@keyframes cobwatch-spark-fly-5 { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(15px, 25px) scale(0); opacity: 0; } }		@keyframes cobwatch-spark-fly-5 { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(15px, 25px) scale(0); opacity: 0; } }

	/* --- Smoke Plumes --- */		/* --- Smoke Plumes (Made thicker and more visible) --- */
	.cobwatch-smoke {		.cobwatch-smoke {
	position: absolute;		position: absolute;
	top: 40%;		top: 40%;
	right: -5px; ~~/* Starts slightly off the ash */~~		right: -5px;
	width: 10px;		width: 10px;
	height: 10px;		height: 10px;
	background: rgba(~~200~~, ~~200~~, ~~210~~, 0.4);		background: rgba(220, 220, 230, 0.6);
	border-radius: 50%;		border-radius: 50%;
	box-shadow: 0 0 ~~15px 12px~~ rgba(~~200~~, ~~200~~, ~~210~~, 0.3);		box-shadow: 0 0 18px 14px rgba(220, 220, 230, 0.5);
	opacity: 0;		opacity: 0;
	}		}

	.cobwatch-smoke-1 { animation: cobwatch-smoke-rise-1 3.5s ~~infinite~~ ease-in; animation-delay: 3.5s; }		/* Plays once alongside the intro burn */
	.cobwatch-smoke-2 { animation: cobwatch-smoke-rise-2 4.2s ~~infinite~~ ease-in; animation-delay: 4.8s; }		.cobwatch-smoke-1 { animation: cobwatch-smoke-rise-1 3.5s 1 ease-in forwards; animation-delay: 1.0s; }
	.cobwatch-smoke-3 { animation: cobwatch-smoke-rise-3 3.8s ~~infinite~~ ease-in; animation-delay: 5.5s; }		.cobwatch-smoke-2 { animation: cobwatch-smoke-rise-2 4.2s 1 ease-in forwards; animation-delay: 2.0s; }
			.cobwatch-smoke-3 { animation: cobwatch-smoke-rise-3 3.8s 1 ease-in forwards; animation-delay: 3.0s; }

	@keyframes cobwatch-smoke-rise-1 {		@keyframes cobwatch-smoke-rise-1 {
	0% { transform: translate(0, 0) scale(1); opacity: 0; }		0% { transform: translate(0, 0) scale(1); opacity: 0; }
	20% { opacity: 0.6; }		30% { opacity: 0.9; }
	100% { transform: translate(30px, -60px) scale(4); opacity: 0; }		100% { transform: translate(30px, -60px) scale(5); opacity: 0; }
	}		}
	@keyframes cobwatch-smoke-rise-2 {		@keyframes cobwatch-smoke-rise-2 {
	0% { transform: translate(0, 0) scale(1); opacity: 0; }		0% { transform: translate(0, 0) scale(1); opacity: 0; }
	20% { opacity: 0.5; }		30% { opacity: 0.8; }
	100% { transform: translate(15px, -80px) scale(5); opacity: 0; }		100% { transform: translate(15px, -80px) scale(6); opacity: 0; }
	}		}
	@keyframes cobwatch-smoke-rise-3 {		@keyframes cobwatch-smoke-rise-3 {
	0% { transform: translate(0, 0) scale(1); opacity: 0; }		0% { transform: translate(0, 0) scale(1); opacity: 0; }
	20% { opacity: ~~0.7~~; }		30% { opacity: 1; }
	100% { transform: translate(40px, -50px) scale(3.5); opacity: 0; }		100% { transform: translate(40px, -50px) scale(4.5); opacity: 0; }
	}		}

SomebodyRum at 19:10, 21 April 2026

2026-04-21T19:10:28Z

Show changes

SomebodyRum at 19:06, 21 April 2026

2026-04-21T19:06:24Z

← Older revision		Revision as of 19:06, 21 April 2026
Line 69:		Line 69:
	/*		/*
	==========================================		==========================================
	BURN ANIMATION ~~& ASH~~		3D CRACKED ASH & BURN ANIMATION
	==========================================		==========================================
	*/		*/

	~~/* 1. The Base: Pure Ash (Revealed as the wrapper burns) */~~
	.cobwatch-foot {		.cobwatch-foot {
	width: ~~45px~~;		width: 50px; /* Slightly wider to show off the cracks */
	position: relative;		position: relative;
	background:		background:
	radial-gradient(circle at 60% 25%, ~~rgba(200~~,~~200~~,~~200~~,~~0.7)~~ 2px, transparent ~~6px~~),		/* Magma cracks (bright orange/red dots layered underneath) */
	radial-gradient(circle at 75~~% 65~~%, ~~rgba(180~~,~~180~~,~~180~~,~~0.8) 3px~~, transparent ~~8px~~),		radial-gradient(circle at 20% 30%, #ff2a00 1.5px, transparent 3px),
	radial-gradient(circle at 55% 80%, ~~rgba(150~~,~~150~~,~~150~~,~~0.9) 2px~~, transparent 5px),		radial-gradient(circle at 75% 45%, #ff4500 2px, transparent 4px),
	linear-gradient(to right, #~~222~~ 0%, #~~777 30~~%, #~~aaa 70~~%, #~~555~~ 100%);		radial-gradient(circle at 45% 75%, #ffaa00 1px, transparent 2px),
	box-shadow: inset ~~4px~~ 0 ~~8px~~ rgba(0,0,0,0.9);		radial-gradient(circle at 60% 25%, #ff3300 2px, transparent 4px),
			radial-gradient(circle at 80% 80%, #ff2a00 1.5px, transparent 3px),
			radial-gradient(circle at 35% 60%, #ff5500 1px, transparent 2.5px),
			/* Dark charred ash texture */
			linear-gradient(to right, #111 0%, #2a2a2a 40%, #1a1a1a 80%, #050505 100%);
			box-shadow: inset 5px 0 12px rgba(0,0,0,0.9);
			border-left: 1px solid #000;
	}		}

	/* 2. The ~~Unburnt Wrapper (Shrinks to 0~~% ~~width to simulate burning leftward)~~ */		/* The Burn Layer: Fixes the 100%+2px overspill bug with box-sizing */
	.cobwatch-~~foot::before~~ {		.cobwatch-burn-layer {
	~~content: "";~~
	position: absolute;		position: absolute;
	top: 0; left: 0; bottom: 0;		top: 0; left: 0; bottom: 0;
	width: 100%;		width: 100%;
			box-sizing: border-box;
	background:		background:
	repeating-linear-gradient(25deg, transparent, transparent 35px, rgba(0,0,0,0.15) 37px, transparent 38px),		repeating-linear-gradient(25deg, transparent, transparent 35px, rgba(0,0,0,0.15) 37px, transparent 38px),
	linear-gradient(to bottom, #2b160a 0%, #4a2613 25%, #593019 50%, #30170a 80%, #1a0c05 100%);		linear-gradient(to bottom, #2b160a 0%, #4a2613 25%, #593019 50%, #30170a 80%, #1a0c05 100%);
	border-right: ~~2px~~ solid transparent;		border-right: 0px solid transparent;
	animation: cobwatch-ignite-burn 3s ease-in forwards;		animation: cobwatch-ignite-burn 3s ease-in forwards;
	animation-delay: 0.8s; ~~/* Pauses for a moment so you see the unlit cigar first */~~		animation-delay: 0.8s;
	z-index: 2;		z-index: 2;
	}		}

	~~/* 3. The Keyframes: Light the tip, move left, leave ember */~~
	@keyframes cobwatch-ignite-burn {		@keyframes cobwatch-ignite-burn {
	0% {		0% {
	width: 100%;		width: 100%;
			border-right: 2px solid transparent;
	box-shadow: none;		box-shadow: none;
	~~border-right-color: transparent;~~
	}		}
	10% {		10% {
	~~/* Catches fire at the tip */~~
	width: 100%;		width: 100%;
			border-right: 2px solid #ffcc00;
	box-shadow: inset -6px 0 8px #ff2a00, 4px 0 12px rgba(255, 42, 0, 0.9);		box-shadow: inset -6px 0 8px #ff2a00, 4px 0 12px rgba(255, 42, 0, 0.9);
	~~border-right-color: #ffcc00;~~
	}		}
	100% {		100% {
	~~/* Wrapper burns away, cherry stops at the ash line */~~
	width: 0%;		width: 0%;
			border-right: 2px solid #ffcc00;
	box-shadow: inset -6px 0 8px #ff2a00, 4px 0 12px rgba(255, 42, 0, 0.9);		box-shadow: inset -6px 0 8px #ff2a00, 4px 0 12px rgba(255, 42, 0, 0.9);
	~~border-right-color: #ffcc00;~~
	}		}
			}

			/*
			==========================================
			SMOKE PARTICLES
			==========================================
			*/

			.cobwatch-smoke {
			position: absolute;
			top: 40%;
			right: 10px;
			width: 6px;
			height: 6px;
			background: rgba(220, 220, 230, 0.4);
			border-radius: 50%;
			box-shadow: 0 0 12px 10px rgba(220, 220, 230, 0.3);
			opacity: 0;
			z-index: 5;
			}

			.cobwatch-smoke-1 {
			animation: cobwatch-rise 3.5s infinite ease-in;
			animation-delay: 3.5s; /* Starts right after burn finishes */
			}
			.cobwatch-smoke-2 {
			animation: cobwatch-rise 4.2s infinite ease-in;
			animation-delay: 4.8s;
			}
			.cobwatch-smoke-3 {
			animation: cobwatch-rise 3.8s infinite ease-in;
			animation-delay: 5.5s;
			}

			@keyframes cobwatch-rise {
			0% { transform: translate(0, 0) scale(1); opacity: 0; }
			20% { opacity: 0.6; }
			100% { transform: translate(-30px, -70px) scale(4); opacity: 0; }
	}		}

SomebodyRum at 19:01, 21 April 2026

2026-04-21T19:01:47Z

Show changes

SomebodyRum at 18:58, 21 April 2026

2026-04-21T18:58:53Z

← Older revision		Revision as of 18:58, 21 April 2026
Line 3:		Line 3:
	display: flex;		display: flex;
	align-items: stretch;		align-items: stretch;
	max-width: ~~750px~~;		max-width: 650px; /* Reduced max-width to maintain a thinner aspect ratio */
	margin: 1em auto;		margin: 1em auto;
	background:		background:
	repeating-linear-gradient(25deg, transparent, transparent ~~40px~~, rgba(0,0,0,0.2) ~~42px~~, transparent ~~43px~~),		repeating-linear-gradient(25deg, transparent, transparent 35px, rgba(0,0,0,0.15) 37px, transparent 38px),
	linear-gradient(to bottom, #2b160a 0%, #4a2613 25%, #593019 50%, #30170a 80%, #1a0c05 100%);		linear-gradient(to bottom, #2b160a 0%, #4a2613 25%, #593019 50%, #30170a 80%, #1a0c05 100%);
	border-radius: ~~60px~~ 8px 8px ~~60px~~;		border-radius: 40px 8px 8px 40px; /* Adjusted radius for a thinner height */
	border: 1px solid #111;		border: 1px solid #111;
	box-shadow: 0 ~~10px 20px~~ rgba(0,0,0,0.4), inset 0 3px 6px rgba(255,255,255,0.05);		box-shadow: 0 8px 15px rgba(0,0,0,0.4), inset 0 3px 6px rgba(255,255,255,0.05);
	color: #ffdf00; /* Gold text */		color: #ffdf00; /* Gold text */
	font-family: "Times New Roman", serif;		font-family: "Times New Roman", serif;
Line 27:		Line 27:
	/* The rounded mouth-piece (Cap) */		/* The rounded mouth-piece (Cap) */
	.cobwatch-cap {		.cobwatch-cap {
	width: ~~30px~~;		width: 25px; /* Thinner cap */
	background: linear-gradient(to right, rgba(0,0,0,0.6) 0%, transparent 100%);		background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, transparent 100%);
	}		}

Line 36:		Line 36:
	border-left: 2px solid #6b5400;		border-left: 2px solid #6b5400;
	border-right: 2px solid #6b5400;		border-right: 2px solid #6b5400;
	padding: ~~10px 15px~~;		padding: 6px 12px; /* Reduced padding to squeeze height */
	display: flex;		display: flex;
	flex-direction: column;		flex-direction: column;
	justify-content: center;		justify-content: center;
	align-items: center;		align-items: center;
	box-shadow: 5px 0 ~~15px~~ rgba(0,0,0,0.5), -5px 0 ~~15px~~ rgba(0,0,0,0.5);		box-shadow: 5px 0 12px rgba(0,0,0,0.5), -5px 0 12px rgba(0,0,0,0.5);
	z-index: 2;		z-index: 2;
	}		}
Line 47:		Line 47:
	/* Strip native borders off the image wrapper */		/* Strip native borders off the image wrapper */
	.cobwatch-band a.image {		.cobwatch-band a.image {
	border: 2px solid #~~111~~;		border: 2px solid #000;
	border-radius: ~~4px~~;		border-radius: 3px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.5);		box-shadow: 0 2px 5px rgba(0,0,0,0.6);
	display: block;		display: block;
	line-height: 0;		line-height: 0;
Line 57:		Line 57:
	.cobwatch-body {		.cobwatch-body {
	flex: 1;		flex: 1;
	padding: 15px ~~20px~~;		padding: 8px 15px; /* Reduced padding to squeeze height */
	display: flex;		display: flex;
	flex-direction: column;		flex-direction: column;
Line 65:		Line 65:

	.cobwatch-title {		.cobwatch-title {
	font-size: 1.~~8em~~;		font-size: 1.5em; /* Slightly smaller text */
	font-weight: bold;		font-weight: bold;
	text-shadow: 2px 2px ~~4px~~ rgba(0,0,0,0.8);		text-shadow: 2px 2px 3px rgba(0,0,0,0.8);
	margin-bottom: ~~5px~~;		margin-bottom: 2px;
	}		}

	.cobwatch-audio {		.cobwatch-audio {
	margin: ~~5px~~ 0;		margin: 2px 0;
	}		}

	.cobwatch-subtitle {		.cobwatch-subtitle {
	font-size: 1.1em;		font-size: 1em; /* Slightly smaller text */
	font-style: italic;		font-style: italic;
	color: #ffca28;		color: #ffca28;
	}		}

	/* ~~The~~ lit end / ash */		/* Realistic lit end / ash */
	.cobwatch-foot {		.cobwatch-foot {
	width: ~~15px~~;		width: 45px; /* Wider to show off the ash detail */
	background: linear-gradient(to right, #~~ff4500~~ 0%, #~~888 40~~%, #~~333~~ 100%);		background:
	box-shadow: -~~4px~~ 0 ~~12px~~ rgba(255, 69, 0, 0.8);		/* Gray ash spots / texture overlay */
			radial-gradient(circle at 60% 25%, rgba(200,200,200,0.7) 2px, transparent 6px),
			radial-gradient(circle at 75% 65%, rgba(180,180,180,0.8) 3px, transparent 8px),
			radial-gradient(circle at 55% 80%, rgba(150,150,150,0.9) 2px, transparent 5px),
			/* Ember cracks (bright orange/red dots layered underneath the ash) */
			radial-gradient(circle at 35% 45%, #ffaa00 1px, transparent 3px),
			radial-gradient(circle at 38% 65%, #ff3300 2px, transparent 4px),
			radial-gradient(circle at 25% 30%, #ff5500 1.5px, transparent 3px),
			/* Base burn gradient: Dark wrapper edge -> glowing cherry -> gray ash -> dark tip */
			linear-gradient(to right,
			#111 0%,
			#ff2a00 12%,
			#ffcc00 16%,
			#666 35%,
			#aaa 60%,
			#444 100%
			);
			box-shadow:
			-5px 0 15px rgba(255, 50, 0, 0.8), /* Outer orange glow */
			inset 4px 0 8px rgba(0,0,0,0.9); /* Inner shadow where leaf meets burn */
			border-left: 1px solid #111;
	}		}

SomebodyRum: Created page with "/* Container shapes the cigar and provides cylindrical shading and leaf texture */ .cobwatch-cigar { display: flex; align-items: stretch; max-width: 750px; margin: 1em auto; background: repeating-linear-gradient(25deg, transparent, transparent 40px, rgba(0,0,0,0.2) 42px, transparent 43px), linear-gradient(to bottom, #2b160a 0%, #4a2613 25%, #593019 50%, #30170a 80%, #1a0c05 100%); border-radius: 60px 8px 8px 60px; border: 1px solid #111; box-shadow: 0 10px 2..."

2026-04-21T18:53:50Z

Created page with "Container shapes the cigar and provides cylindrical shading and leaf texture: .cobwatch-cigar { display: flex; align-items: stretch; max-width: 750px; margin: 1em auto; background: repeating-linear-gradient(25deg, transparent, transparent 40px, rgba(0,0,0,0.2) 42px, transparent 43px), linear-gradient(to bottom, #2b160a 0%, #4a2613 25%, #593019 50%, #30170a 80%, #1a0c05 100%); border-radius: 60px 8px 8px 60px; border: 1px solid #111; box-shadow: 0 10px 2..."

New page

/* Container shapes the cigar and provides cylindrical shading and leaf texture */
.cobwatch-cigar {
display: flex;
align-items: stretch;
max-width: 750px;
margin: 1em auto;
background:
repeating-linear-gradient(25deg, transparent, transparent 40px, rgba(0,0,0,0.2) 42px, transparent 43px),
linear-gradient(to bottom, #2b160a 0%, #4a2613 25%, #593019 50%, #30170a 80%, #1a0c05 100%);
border-radius: 60px 8px 8px 60px;
border: 1px solid #111;
box-shadow: 0 10px 20px rgba(0,0,0,0.4), inset 0 3px 6px rgba(255,255,255,0.05);
color: #ffdf00; /* Gold text */
font-family: "Times New Roman", serif;
overflow: hidden; /* Clips the band and inner elements to the rounded border */
}

/* Neutralize MediaWiki's automatic paragraph and break tags inside flexbox */
.cobwatch-cigar p {
display: contents;
margin: 0;
}
.cobwatch-cigar br {
display: none;
}

/* The rounded mouth-piece (Cap) */
.cobwatch-cap {
width: 30px;
background: linear-gradient(to right, rgba(0,0,0,0.6) 0%, transparent 100%);
}

/* The Cigar Band (Holds the Image) */
.cobwatch-band {
background: linear-gradient(to bottom, #111 0%, #222 15%, #000 20%, #d4af37 20%, #fff080 50%, #aa8000 80%, #000 80%, #222 85%, #111 100%);
border-left: 2px solid #6b5400;
border-right: 2px solid #6b5400;
padding: 10px 15px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 5px 0 15px rgba(0,0,0,0.5), -5px 0 15px rgba(0,0,0,0.5);
z-index: 2;
}

/* Strip native borders off the image wrapper */
.cobwatch-band a.image {
border: 2px solid #111;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0,0,0,0.5);
display: block;
line-height: 0;
}

/* Main content area */
.cobwatch-body {
flex: 1;
padding: 15px 20px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}

.cobwatch-title {
font-size: 1.8em;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
margin-bottom: 5px;
}

.cobwatch-audio {
margin: 5px 0;
}

.cobwatch-subtitle {
font-size: 1.1em;
font-style: italic;
color: #ffca28;
}

/* The lit end / ash */
.cobwatch-foot {
width: 15px;
background: linear-gradient(to right, #ff4500 0%, #888 40%, #333 100%);
box-shadow: -4px 0 12px rgba(255, 69, 0, 0.8);
}

/* Mobile adjustments */
@media (max-width: 600px) {
.cobwatch-cigar {
flex-direction: column;
border-radius: 20px 20px 10px 10px;
}
.cobwatch-cap, .cobwatch-foot {
display: none;
}
.cobwatch-band {
border-left: none; border-right: none;
border-top: 2px solid #6b5400; border-bottom: 2px solid #6b5400;
background: linear-gradient(to right, #111 0%, #000 20%, #d4af37 20%, #fff080 50%, #aa8000 80%, #000 80%, #111 100%);
}
}