Template:Bannerbox/styles.css: Difference between revisions

/* styles for banner template */

.bannerbox {display:flex; background:#f1f3f9; border-radius:6px}
.bannerbox .floatleft {margin:0;}
.banner-image { flex-grow:0;  flex-basis:auto;}
.banner-content {flex-grow:1; flex-shrink:1; flex-basis:60%}
.bannerbox .banner-title .bannerhd {font-size:1.6rem; font-weight:bold}
.bannerbox  h1.bannerhd  {font-size:1.6rem; font-weight:bold; margin:0; padding:0}
.bannerbox .banner-text {font-size:1.3rem;}
.banner-content {padding:10px;}
.bannerbox.bgicon1, .bannerbox.bgicon2, .bannerbox.bgicon3, .bannerbox.swoosh  {position:relative;overflow:hidden}
.bannerbox.bgicon1::before {color:white; opacity: 0.5; font-size:15em;font-family: "Font Awesome 6 Free";  font-weight: 900;  content: "\f0ac";
 position: absolute; top: -95px;right: 10px;}
.bannerbox.bgicon2::before {color:white; opacity: 0.5; font-size:9.5em; font-family: "bootstrap-icons"; font-weight: 400;  content: "\f1dd"; position: absolute; top: -40px; right: 10px;}
.bannerbox.bgicon3::before {color:white; opacity: 0.5; font-size:9.5em; font-family: "Font Awesome 6 Free"; font-weight: 900;  content: "\e592"; position: absolute; top: -38px; right: 5px;}
.bannerbox.swoosh {border-bottom: 1px solid #a6a6a7;border-radius: 0 0 80% 0%; overflow: hidden;position:relative;}

/*box swoosh*/
.swoosh-subtle-banner {
  background: #ffffff;
  border-radius: 20px;
  padding: 30px;
  position: relative;
  overflow: hidden;
}
/* wavy mist swoosh */
.swoosh-subtle-banner::after {
  content: "";
  position: absolute;
  top: -5%;
  left: 10%;
  width: 120%;
  height: 80%;
  transform: translate(-50%, -50%) rotate(-10deg);

  background:
    radial-gradient(
      ellipse at 30% 50%,
      rgba(200, 200, 200, 0.35) 10%,
      rgba(200, 200, 200, 0.18) 40%,
      transparent 10%
    ),
    radial-gradient(
      ellipse at 70% 60%,
      rgba(180, 180, 180, 0.30) 0%,
      rgba(200, 200, 200, 0.15) 45%,
      transparent 75%
    );

  border-radius: 50%;
}


@media only screen
  and (max-width: 600px) {
.bannerbox {flex-wrap:wrap;}
.banner-image {flex-basis:100%;}
.banner-image img{ width: 100%;}
.banner-content {flex-basis:100%}
}