
/*---------------------------------------------------------------------------*/
/* VdS-Knowledgecenter Discount Card */
/*---------------------------------------------------------------------------*/


/*---------------------------------------------------------------------------*/
/* Variables */

:root {
  --color-white:       #FFFFFE;
  --color-bright-blue: #0074B0;
  --color-dark-blue:   #292D78;
  --color-red:         #E30713;
}


/*---------------------------------------------------------------------------*/
/* Discount Card */

.anniversary-card {
  padding:            1rem;
  display:            grid;
  grid-template-rows: 1fr 3fr;
  align-items:        center;

  height:             40rem;    /* (Maybe) Delete this in real environment. */
  width:              69rem;    /* (Maybe) Delete this in real environment. */

  color:              var(--color-white);
  background-color:   transparent;
  border-radius:      2rem 0;

  font-family:        'din-pro', sans-serif;
}


/*----- Card Header */

.anniversary-card__header {
  position:              relative;

  /*
  display:               grid;
  grid-template-columns: 1fr 3fr;
  */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  height:                12rem;
  width:                 100%;  /* (Maybe) Delete this in real environment. */

  background-color:      var(--color-bright-blue);
  border-radius:         2rem 0 0 0;
  line-height:           1.2;
}

.anniversary-card__header::after {
  content: '';
  position: absolute;
  top: 12rem;
  right: 0;
  width: 11rem;
  height: 3.47rem;
  background-color: var(--color-dark-blue);
  /*background-color: green;*/
  z-index: 5;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}


/* Anniversary Year: */

/*
.anniversary-card-header__year {
  line-height: 1.1;
  text-align:  center;
  font-size:   11rem;
  font-weight: bold;
}
*/

/* Vertical Line: */

/*.anniversary-card-header__text::before {
  position:         absolute;
  left:             25%;
  top:              2rem;
  bottom:           2rem;

  width:            5px;

  content:          '';
  background-color: #FCFDFC;
}
*/

/* Anniversary Text: */

.anniversary-card-header__text {
  z-index: 10000;
  margin:        auto 0;
  /*padding-left:  3.2rem;*/
  text-align:    left;
  font-size:     3.2rem;
}



/*----- Discount Badge */

.anniversary-card__discount-badge {
  position:         absolute;

  display:          flex;
  justify-content:  center;
  align-items:      center;

  height:           20rem;
  width:            20rem;

  background-color: var(--color-red);
  border-radius:    50%;
  font-size:        4.8rem;
  text-align:       center;
  line-height:      1;
  transform:        rotate(352deg) translate(219.5%, 37%);
}

.anniversary-card-discount-badge__rectangle {
  position:         absolute;

  height:           1.8rem;
  width:            12rem;

  background-color: var(--color-bright-blue);
  transform:        rotate(25deg) translate(3%, -510%);
}

.anniversary-card-discount-badge__lose-edge {
  position:         absolute;

  height:           2.2rem;
  width:            11rem;

  background-color: var(--color-white);
  border-radius:    0 0 230% 230%;
  transform:        rotate(25deg) translate(0%, -327%)
}

.anniversary-card-discount-badge-lose-edge__concave-1 {
  position:         absolute;
  top:              0;
  left:             0;
  right:            0;
  bottom:           0;

  height:           2.2rem;
  width:            3.2rem;

  background-color: var(--color-red);
  border-radius:    50% 170% 0 0%;
  transform:        rotate(45deg) translate(173%, -203%);
}

.anniversary-card-discount-badge-lose-edge__convex-1-container {
  position:  absolute;
  overflow:  hidden;
  padding:   20px 0;
  width:     6rem;
  height:    2px;
  transform: rotate(32deg) translate(-35%, -249%);
}

.anniversary-card-discount-badge-lose-edge__convex-1-inner {
  position:         relative;
  background-color: var(--color-red);
  height:           120px;
}

.anniversary-card-discount-badge-lose-edge__convex-1-inner:before,
.anniversary-card-discount-badge-lose-edge__convex-1-inner:after {
  box-shadow:    0 0 0 80px var(--color-red);
  border-radius: 30% 40%;
  position:      absolute;
  height:        150px;
  content:       '';
  right:         -20%;
  left:          -20%;
  top:           100%;
}

.anniversary-card-discount-badge-lose-edge__convex-1-inner:after {
  bottom: 100%;
  top:    auto;
}

.anniversary-card-discount-badge-lose-edge__concave-2 {
  position:         absolute;
  top:              0;
  left:             0;
  right:            0;
  bottom:           0;

  height:           2.2rem;
  width:            3.2rem;

  background-color: var(--color-red);
  border-radius:    170% 50% 0 0;
  transform:        rotate(355deg) translate(468%, 275%);
}

.anniversary-card-discount-badge-lose-edge__convex-2-container {
  position:  absolute;
  overflow:  hidden;
  padding:   20px 0;
  width:     6rem;
  height:    2px;
  transform: rotate(25deg) translate(15%, -259%);
}

.anniversary-card-discount-badge-lose-edge__convex-2-inner {
  position: relative;
  background: var(--color-red);
  height: 120px;
}

.anniversary-card-discount-badge-lose-edge__convex-2-inner:before,
.anniversary-card-discount-badge-lose-edge__convex-2-inner:after {
  box-shadow:    0 0 0 80px var(--color-red);
  border-radius: 40% 0;
  position:      absolute;
  height:        150px;
  content:       '';
  right:         -20%;
  left:          -20%;
  top:           100%;
}

.anniversary-card-discount-badge-lose-edge__convex-2-inner:after {
  bottom: 100%;
  top:    auto;
}

.anniversary-card-discount-badge__text {
  z-index: 9999;
}


/*----- Card Body */

.anniversary-card__body {
  height:           28rem;
  padding:          1.6rem 2rem;
  line-height:      1.4;
  background-color: var(--color-dark-blue);
  border-radius:    0 0 2rem 0;
  font-size:        1.9rem;
}


/*----- Card Footer */

.anniversary-card__footer {
  margin-top:  3rem;
  font-size:   1.5rem;
  line-height: 1.3;
}

.anniversary-card-footer__discount-code {
  background-color: var(--color-red);
  padding:          0.2rem;
}

