Template:MilkedDry/styles.css: Difference between revisions

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

/* Main Box Structure */
.mdry-container {
	position: relative;
	overflow: hidden;
	background-color: #ffffff; 
	/* Thick brownish-grey border to match screenshot */
	border: 4px solid #7b6b6b; 
	border-radius: 4px;
	/* Inner shadow to create a sunken frame effect */
	box-shadow: inset 0 0 8px rgba(0,0,0,0.4), 0 4px 6px rgba(0,0,0,0.1);
	z-index: 1;
}

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

.mdry-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =========================================
   LOW MILK PUDDLE SIMULATION
========================================= */
.mdry-milk-shadow {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	z-index: 1;
	filter: drop-shadow(0px -2px 3px rgba(0, 0, 0, 0.2));
}

.mdry-milk {
	width: 100%; height: 100%;
	background-color: rgba(255, 255, 255, 0.95); 
	/* Very slow, exhausted slosh */
	animation: mdry-milk-wave 8s ease-in-out infinite alternate;
}

/* Puddle pushed to the very bottom (~85% empty, 15% full) */
@keyframes mdry-milk-wave {
	0% { clip-path: polygon(0% 85%, 16% 87%, 33% 85%, 54% 88%, 70% 86%, 84% 85.2%, 100% 86%, 100% 100%, 0% 100%); }
	100% { clip-path: polygon(0% 88%, 16% 86%, 34% 89.6%, 51% 89.2%, 67% 90.0%, 84% 90.5%, 100% 88.6%, 100% 100%, 0% 100%); }
}

/* =========================================
   LAYOUT & CONTENT
========================================= */
.mdry-inner {
	position: relative;
	z-index: 2; 
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	padding: 15px 20px;
	gap: 20px;
}

.mdry-image {
	flex: 0 0 auto;
	/* Very slow, weak bobbing animation */
	animation: mdry-bob 6s ease-in-out infinite alternate;
}

@keyframes mdry-bob {
	0% { transform: translateY(-1px) rotate(-1deg); }
	100% { transform: translateY(2px) rotate(1deg); }
}

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

/* =========================================
   TYPOGRAPHY
========================================= */

/* The Green Banner Title */
.mdry-banner {
	display: inline-block;
	background-color: #1a8b1a; /* Forest green */
	color: #ffe600; /* Bright yellow */
	padding: 4px 10px;
	margin-bottom: 8px;
	border: 2px solid #004d00;
	font-size: 140%;
	font-weight: bold;
	line-height: 1.25;
	text-transform: uppercase;
	/* Clean black outline with a sharp drop shadow */
	text-shadow: 
		-1px -1px 0 #000,  1px -1px 0 #000, 
		-1px  1px 0 #000,  1px  1px 0 #000, 
		 0   -1px 0 #000,  0    1px 0 #000, 
		-1px  0   0 #000,  1px  0   0 #000, 
		 2px  2px 3px rgba(0,0,0,0.8);
}

/* Standard White Outline for Subtitle */
.outline {
	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.5);
}

.mdry-subtitle {
	font-weight: bold;
	font-size: 110%;
	color: #000000;
}