/*
DonorCard.css contains the styles for the component Template:DonorCard
See detailed documentation in Dev/mediawiki
*/

.donor-card {
	border: 1px solid #ccc;
	width: 200px;
	border-radius: 8px;
	box-shadow: 3px 3px 3px rgb(0 0 0 / 7%);
	padding: 10px 10px 20px;
	background: white;
	display: inline-block;
}

:root {
	--donor-card-gradient-white: #ffffff1a;
	--donor-card-gradient-xs-color: #98aab73d;
	--donor-card-gradient-xs-dark-color: #c1c1c1;
	--donor-card-gradient-s-color: #7aad7b3d;
	--donor-card-gradient-s-dark-color: #9ec5a7;
	--donor-card-gradient-m-color: #569bd53d;
	--donor-card-gradient-m-dark-color: #7caac3;
	--donor-card-gradient-l-color: #f5bf443d;
	--donor-card-gradient-l-dark-color: #cb8b44;
	--donor-card-gradient-xl-color: #9636ff26;
	--donor-card-gradient-xl-dark-color: #b480d1;
}

.donor-card.range-xs {
	background-image:
		linear-gradient(135deg, var(--donor-card-gradient-xs-color) 40%, var(--donor-card-gradient-white) 40%),
		linear-gradient(225deg, var(--donor-card-gradient-xs-color) 40%, var(--donor-card-gradient-white) 40%),
		linear-gradient(to bottom, var(--donor-card-gradient-white) calc( 100% - 10px ), var(--donor-card-gradient-xs-color) calc( 100% - 10px ));
	border-color: var( --donor-card-gradient-xs-dark-color );
}

.donor-card.range-s {
	background-image:
		linear-gradient(135deg, var(--donor-card-gradient-s-color) 40%, var(--donor-card-gradient-white) 40%),
		linear-gradient(225deg, var(--donor-card-gradient-s-color) 40%, var(--donor-card-gradient-white) 40%),
		linear-gradient(to bottom, var(--donor-card-gradient-white) calc( 100% - 10px ), var(--donor-card-gradient-s-color) calc( 100% - 10px ));
	border-color: var( --donor-card-gradient-s-dark-color );
}

.donor-card.range-m {
	background-image:
		linear-gradient(135deg, var(--donor-card-gradient-m-color) 40%, var(--donor-card-gradient-white) 40%),
		linear-gradient(225deg, var(--donor-card-gradient-m-color) 40%, var(--donor-card-gradient-white) 40%),
		linear-gradient(to bottom, var(--donor-card-gradient-white) calc( 100% - 10px ), var(--donor-card-gradient-m-color) calc( 100% - 10px ));
	border-color: var( --donor-card-gradient-m-dark-color );
}

.donor-card.range-l {
	background-image:
		linear-gradient(135deg, var(--donor-card-gradient-l-color) 40%, var(--donor-card-gradient-white) 40%),
		linear-gradient(225deg, var(--donor-card-gradient-l-color) 40%, var(--donor-card-gradient-white) 40%),
		linear-gradient(to bottom, var(--donor-card-gradient-white) calc( 100% - 10px ), var(--donor-card-gradient-l-color) calc( 100% - 10px ));
	border-color: var( --donor-card-gradient-l-dark-color );
}

.donor-card.range-xl {
	background-image:
		linear-gradient(135deg, var(--donor-card-gradient-xl-color) 40%, var(--donor-card-gradient-white) 40%),
		linear-gradient(225deg, var(--donor-card-gradient-xl-color) 40%, var(--donor-card-gradient-white) 40%),
		linear-gradient(to bottom, var(--donor-card-gradient-white) calc( 100% - 10px ), var(--donor-card-gradient-xl-color) calc( 100% - 10px ));
	border-color: var( --donor-card-gradient-xl-dark-color );
}

.donor-card .logo {
	padding-top: 56.25%;
	width: 100%;
	position: relative;
	background-image: linear-gradient(0deg, #bbb, #ebebeb);
	border-radius: 6px;
	box-shadow: 1px 1px 3px 1px rgb(0 0 0 / 15%);
	border: 1px solid #777;
}

.donor-card .logo span.logo-image img {
	position: absolute;
	left: 5%;
	top: 5%;
	width: 90%;
	height: 90% !important;
	object-fit: contain;
}

.donor-card .logo span.external-link-symbol img {
	position: absolute;
	top: 3px;
	right: 3px;
	width: 25px;
	height: 24px;
	background: #333;
	border-radius: 100px;
	padding: 5px 0px 6px;
	filter: brightness(3);
	object-fit: contain;
}

.donor-card .logo span.external-link-symbol img:hover {
	transform: scale(1.2);
    filter: brightness(2) contrast(2);	
}
	
.donor-card .tag-donor {
	text-align: center;
	font-size: .85em;	
	margin-top: 8px;
}

.donor-card .tag-donor > div {
	display: none;
	margin: 15px 0 8px;
	padding: 5px 0;
	text-shadow: 0px 0px 2px white,0px 0px 2px white,0px 0px 2px white;
}

.donor-card.range-xs .tag-donor > div.xs,
.donor-card.range-s .tag-donor > div.s,
.donor-card.range-m .tag-donor > div.m,
.donor-card.range-l .tag-donor > div.l,
.donor-card.range-xl .tag-donor > div.xl
{
	display: block;
}
	
.donor-card.range-s .tag-donor > div.s {
	font-weight: bold;
	letter-spacing: 1px;
}

.donor-card.range-m .tag-donor > div.m,
.donor-card.range-l .tag-donor > div.l,
.donor-card.range-xl .tag-donor > div.xl
{
	letter-spacing: 1px;
    border-radius: 50px;
}

.donor-card.range-m .tag-donor > div.m {
	background: var(--donor-card-gradient-m-color);
	box-shadow: 0 1px 0px #00000029;
}	

.donor-card.range-l .tag-donor > div.l {
	background: var(--donor-card-gradient-l-color);
	box-shadow: 0 1px 0px #00000020;
	font-weight: bold;
}	

.donor-card.range-xl .tag-donor > div.xl {
	background: var(--donor-card-gradient-xl-color);
	box-shadow: 0 1px 0px #00000029;
	font-weight: bold;
}

.donor-card.range-xs .tag-donor i { color: var( --donor-card-gradient-xs-dark-color ); }
.donor-card.range-s .tag-donor i { color: var( --donor-card-gradient-s-dark-color ); }
.donor-card.range-m .tag-donor i { color: var( --donor-card-gradient-m-dark-color ); }
.donor-card.range-l .tag-donor i { color: var( --donor-card-gradient-l-dark-color ); }
.donor-card.range-xl .tag-donor i { color: var( --donor-card-gradient-xl-dark-color ); }

.donor-card .name {
	text-align: center;
	font-weight: 700;
	font-size: 1.5em;
	margin: 1px 0 2px;
	line-height: 1.2;
}

.donor-card .date {
	text-align: center;
	font-size: .85em;	
	letter-spacing: 1px;
}

.donor-card .range {
	text-align: center;
	letter-spacing: 1px;
	font-size: 1.3em;
	margin: 8px 0 2px;	
}

.donor-card .range > div { display: none; }
.donor-card.range-xs .range > div.xs { display: block; }
.donor-card.range-s .range > div.s { display: block; }
.donor-card.range-m .range > div.m { display: block; }
.donor-card.range-l .range > div.l { display: block; }
.donor-card.range-xl .range > div.xl { display: block; }

/*
[[Category:MultiWiki]]
*/