RDM/css/sass/_shortcodes.scss

/*
 * Custom Shortcodes
 */

/* Shortcodes -> Buttons */
.link-button,
.button-link,
.button-dark {
  display: inline-block;
  border-radius: 30px;
  padding: 0.8rem 1.8rem;
  transition: all 0.3s ease;
  border: 4px solid var(--upei-red);
}

a.button,
.button,
button,
[type='button'],
[type='reset'],
[type='submit'] {
  background-color: var(--dark);
  color: #ffffff;
  border: 4px solid var(--upei-red);
  border-radius: 8px;
  -webkit-transition: all 0.4s linear;
  -o-transition: all 0.4s linear;
  transition: all 0.4s linear;
}
.link-button,
.button-link {
  color: #ffffff;
  //background-color: var(--secondary);
  background-color: var(--dark);
  border: 6px solid var(--upei-red);
}
.feature h3 {
  color: var(--upei-green);
}

.footer a {
  color: #fff;
  font-family: var(--body-font);
  font-weight: 100;
  font-size: 1.2rem;
}
.footer-bottom-blocks .button {
  background: var(--upei-green);
  border: 4px solid var(--upei-yello);
}

.link-button:hover,
.button-link:hover {
  color: var(--light);
  background-color: var(--dark);
  border: 4px solid var(--primary);
}
.button-dark {
  background-color: var(--dark);
  color: var(--light);
  border: 6px solid var(--upei-red);
}
.button-dark:hover {
  color: #ffffff;
  border: 6px solid var(--upei-green);
}
/* Elements -> Box */
.box {
  background-color: #ffffff;
  -webkit-box-shadow: 0 0 8px 4px var(--light);
  box-shadow: 0 0 8px 4px var(--light);
}

/* Icon Box */
.icon-box {
  font-family: var(--body-font);
  line-height: 1.7;
  background-color: var(--content-bg);
  box-shadow: 0 3px 6px #bbbbbb;
  display: flex;
}
.icon-box-icon {
  padding-right: 1rem;
  flex: 0 0 auto;
}
.icon-box-text {
  font-family: var(--body-font);
  line-height: 1.7;
}
/* 
 * Features
 */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
}
.feature {
  background-color: #ffffff;
  padding: 1rem;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: all 0.4s linear;
  backface-visibility: hidden;
}
.feature:hover {
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  -webkit-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  transform: translateY(-20px);
}
.feature-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: 2rem;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: var(--primary);
  color: #ffffff;
  transition: all 0.4s ease;
  box-shadow: 0 0 10px 2px #ffffff;
}
.feature:hover .feature-icon {
  background-color: #ffffff;
  -webkit-box-shadow: 0 0 10px 2px var(--secondary);
  box-shadow: 0 0 10px 2px var(--secondary);
}
.feature .link-button {
  display: inline-block;
}

/*
 * Notice 
 */
.notice-block {
  position: relative;
  background-color: var(--primary);
  padding: 2rem;
  width: 100%;
}
.notice-block .views-row {
  padding: 1rem 0;
}
.notice-block .views-field-title {
  font-family: var(--heading-font);
  font-size: 1.4rem;
  font-weight: 700;
}
.notice-block .views-field-title a {
  color: var(--dark);
}
.notice-block .views-field-title a:hover {
  color: #ffffff;
}
.notice-block .views-row {
  border-bottom: 1px solid var(--dark);
}