Template:Gegbull/styles.css: Difference between revisions

/* Wrapper for shrink-to-fit centering */
.gegbull-aligner {
	display: table;
	margin: 15px auto;
	width: 80%; 
	max-width: 900px;
}

/* Main Box Structure */
.gegbull-container {
	position: relative;
	overflow: hidden;
	background-color: #ffffff; /* Fallback */
	border: 3px solid #887777;
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.3);
	z-index: 1;
}

/* =========================================
   BACKGROUND (Cow Skin Image)
========================================= */
.gegbull-bg {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 0;
}

/* Forces the 1000px image to perfectly cover the box without squishing */
.gegbull-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =========================================
   MILK LIQUID SIMULATION
========================================= */
.gegbull-milk-shadow {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	z-index: 1;
	/* Applies a dynamic shadow strictly to the waving edge of the milk! */
	filter: drop-shadow(0px -4px 6px rgba(0, 0, 0, 0.4));
}

.gegbull-milk {
	width: 100%; height: 100%;
	background-color: rgba(255, 255, 255, 0.95); /* Mostly solid milk */
	animation: milk-wave 4s ease-in-out infinite alternate;
}

/* Raised the milk level to sit higher up in the box (~35% empty, 65% full) */
@keyframes milk-wave {
	0% { clip-path: polygon(0% 30%, 16% 35%, 33% 30%, 54% 34%, 70% 32%, 84% 31.2%, 100% 32%, 100% 100%, 0% 100%); }
	100% { clip-path: polygon(0% 33%, 16% 32%, 34% 36.6%, 51% 36.2%, 67% 37.0%, 84% 37.5%, 100% 35.6%, 100% 100%, 0% 100%); }
}

/* =========================================
   LAYOUT & CONTENT
========================================= */
.gegbull-inner {
	position: relative;
	z-index: 2; /* Keeps text and image above the milk and background */
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	padding: 15px 20px;
	gap: 20px;
}

.gegbull-image {
	flex: 0 0 auto;
	/* Bobs up and down as if treading in the milk */
	animation: gegbull-bob 3s ease-in-out infinite alternate;
}

@keyframes gegbull-bob {
	0% { transform: translateY(-3px) rotate(-3deg); }
	100% { transform: translateY(5px) rotate(3deg); }
}

.gegbull-text {
	text-align: center;
}

/* Typography & Thick Outline */
.outline {
	/* 8-axis solid white outline + a deep dark shadow to pop off the white milk! */
	text-shadow: 
		-2px -2px 0 #ffffff, 
		 0   -2px 0 #ffffff, 
		 2px -2px 0 #ffffff, 
		 2px  0   0 #ffffff, 
		 2px  2px 0 #ffffff, 
		 0    2px 0 #ffffff, 
		-2px  2px 0 #ffffff, 
		-2px  0   0 #ffffff,
		 0    4px 6px rgba(0,0,0,0.7); /* Added deep shadow here */
}

.gegbull-title {
	font-weight: bold;
	color: #590000;
	font-size: 150%;
	margin-bottom: 5px;
}

.gegbull-subtitle {
	font-weight: bold;
	font-size: 105%;
	color: #000000;
}

.gegbull-link {
	color: #877070;
	text-decoration: underline;
}