/*
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-dis,
.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-dis .tag-donor > div.dis,
.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: 2px;
}

.donor-card .message {
  text-align: center;
  font-size: .85em;
  line-height: 1.4;
  margin-top: 4px;
}

.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-dis .range > div.dis { display: block; }
.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]]
*/