style.css

/**
 * Theme Name: Scouting TC4 - Verbeterd
 * Description: Verbeteringen voor het Scouting TC4 thema.
 * Author: Melvin Snijders
 * Author URI: https://github.com/ScoutingScherpenzeel/ScoutingTC4-WordpressImprovements
 * Version: 1.6.0
 * Template: hansrochat-scouting-2020-7696afcbde3b
 */

/* Fixes banner text width on mobile devices */
#banner h1 {
  max-width: 100% !important;
  word-break: break-word !important;
}

@media only screen and (max-width: 650px) {
  #banner h1 {
    font-size: 2rem !important;
  }
}

@media only screen and (max-width: 1024px) {
  #banner h1 {
    font-size: 2.5rem !important;
  }
}

/* Fixes form inputs not being styled properly */
.wpcf7 form input[type="number"],
.wpcf7 form input[type="date"],
.wpcf7 form input[type="time"] {
  border: 1px solid #eee;
  padding: 0.5rem;
  width: 100%;
}

.wpcf7 form select {
  border: 1px solid #eee;
  padding: 0.8rem 0.5rem;
  width: 100%;
  background-color: white;
}

/* Makes the sidebar sticky and scroll with the page */
#sidebar {
  position: sticky;
  top: 100px;
}

/* Fixes the width of the 404 page */
.niet-gevonden > h1 {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

@media (min-width: 576px) {
  .niet-gevonden > h1 {
    max-width: 540px;
    padding: 0;
  }
}
@media (min-width: 768px) {
  .niet-gevonden > h1 {
    max-width: 720px;
    padding: 0;
  }
}

@media (min-width: 992px) {
  .niet-gevonden > h1 {
    max-width: 960px;
    padding: 0;
  }
}

@media (min-width: 1200px) {
  .niet-gevonden > h1 {
    max-width: 1140px;
    padding: 0;
  }
}

@media only screen and (max-width: 1024px) {
  .niet-gevonden > h1 {
    padding: 0 1rem;
  }
}

/* Fix image center alignment */
.wp-block-image.aligncenter {
  display: block !important;
}

/* New gutenberg buttons */
.gb-btn,
.wp-block-file__button {
  align-items: center;
  border-radius: 50px;
  color: white !important;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
  font-weight: 600;
  line-height: 1.2em;
  margin: 0;
  padding: 12px 30px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.2s ease-in-out;
  font-size: 1rem;
  user-select: none;
  display: inline-flex;
  border: 1px solid transparent;
}

.gb-btn:hover,
.wp-block-file__button:hover {
  text-decoration: none !important;
}

.gb-btn::after,
.wp-block-file__button::after {
  border-style: solid;
  border-width: 2px 2px 0 0;
  content: "";
  display: inline-block;
  height: 0.8em;
  margin-left: 20px;
  position: relative;
  transform: rotate(45deg);
  transition: all 0.3s ease;
  vertical-align: top;
  width: 0.8em;
}

.gb-btn:hover::after,
.wp-block-file__button:hover::after {
  color: white !important;
  margin-left: 30px;
  margin-right: -10px;
}

.gb-btn-blauw,
.wp-block-file__button {
  background: #0066b2;
}

.gb-btn-zwart {
  background: #000000;
}

.gb-btn-groen {
  background: #00a551;
}

/* Fix button arrow alignment */
.btn {
  display: inline-flex !important;
}

.meer-nieuws {
  display: inline-flex !important;
}

/* Hide reCAPTCHA badge */

.grecaptcha-badge {
  visibility: hidden;
}

/* Animations! */
.news-item,
.gb-callout,
.item-archive,
.featured-item {
  opacity: 0;
  transition: all 1.5s;
  transform: translateY(20px);
}

.appear {
  opacity: 1;
  transform: translateY(0);
}

/* Better breadcrumbs */
#breadcrumbs {
  color: #696966;
  margin: 0 0 3rem !important;
}

#breadcrumbs a {
  color: #696966 !important;
}

.breadcrumb_last,
#breadcrumbs a {
  font-size: 0.875rem !important;
}

#breadcrumbs > span {
  display: flex;
  gap: 10px;
}