EventBuilder__injection.css

/* 
  With SF the best and sometimes only way to get these styles is to use !important because SF / React will create unique, scoped classes for items. 
  
*/

:root {
  --um-blue: #00274c;
  --um-maize: #ffcb05;
  --um-maize--50: #fffbeb;

  /* gray */
  --um-gray--200: #d6d6d6;

  /* Bright blue/800 */
  --mo-blue--link: #193a9f;
}

/* Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=DM+Serif+Display:ital@0;1&display=swap");

/* Event Builder Class Specific targets */
body,
.content {
  font-family: "Atkinson Hyperlegible", "DM Sans", sans-serif !important;
  font-size: 17px !important;
}

h1,
h2,
h3,
h4,
h5,
h6 .event-name,
.title,
[class*="speaker-profile-overlay"] .speaker-name {
  font-family: "DM Serif Display", Georgia, serif !important;
  letter-spacing: 0px !important;
}

h1 {
  font-size: 3rem !important;
}

h2 {
  font-size: 2.125 rem !important;
}

/* Linkable things */

.nav-item,
.full-profile-link,
.mat-expansion-panel-header-title h4 {
  color: var(--mo-blue--link) !important;
}

.nav-item {
  font-weight: 800 !important;
}

.content p {
  font-size: 1rem !important;
  line-height: 1.6 !important;
}

/* Speaker Profiles Overlay */

[class*="speaker-profile-overlay"] {
  background: var(--um-maize--50) !important;
}

/* [class*="speaker-profile-overlay"] .content p, 
[class*="speaker-profile-overlay"] .details,
[class*="speaker-profile-overlay"] .speaker-name,
[class*="speaker-profile-overlay"] .bio-section,
[class*="speaker-profile-overlay"] .mat-icon,
[class*="speaker-profile-overlay"] .speaker-company-title
 {
} */

[class*="speaker-profile-overlay"] .mat-icon {
  transition: 300ms ease-in-out;
}

[class*="speaker-profile-overlay"] .mat-icon:hover {
  transform: scale(1.5);
  transition: transform 300ms ease-in-out;
}

.speaker-bio {
  border-bottom-color: white !important;
}

.speaker-title {
  font-weight: 900 !important;
  letter-spacing: 0.1 !important;
  font-size: 1.25rem !important;
}

.venue {
  font-weight: 700 !important;
  line-height: 1 !important;
}

.event-date-container {
  font-weight: 500 !important;
  font-size: 1.5rem !important;
  line-height: 1 !important;
}

.speaker-image.custom-text,
.speakers-wrapper .speaker-image.custom-text {
  font-size: 8rem !important;
  font-weight: 900 !important;
  padding-bottom: 28px !important;
  max-height: 240px !important;
  width: 270px !important;
  color: black !important;
  line-height: 12rem !important;
  align-items: flex-start !important;
}

.speaker-image {
  position: relative !important;
}

.speaker-details .speaker-image {
  border-radius: 0 !important;
  background: var(--um-gray--200) !important;
  clip-path: path(
    "M240 26.26C240 11.15 229.387 -0.92 215.759 0.22L21.463 14.80C9.367 15.72 0 26.18 0 39.05V214.67C0 231.89 13.927 244.09 28.390 239.68L222.889 187.92C233.636 185.04 240 174.56 240 162.37V26.26Z"
  );
}
.speaker-details .speaker-image img.rounded {
  clip-path: path(
    "M240 26.26C240 11.15 229.387 -0.92 215.759 0.22L21.463 14.80C9.367 15.72 0 26.18 0 39.05V214.67C0 231.89 13.927 244.09 28.390 239.68L222.889 187.92C233.636 185.04 240 174.56 240 162.37V26.26Z"
  );
  border-radius: 0 !important;
  /*until we can modify the templates themselves to not include the .rounded class, this it what we must do. */
}

/* VARIATION 1 */
.speaker-details {
  position: relative;
}

.speaker-details:after {
  content: " ";
  background: var(--um-maize);
  position: absolute;
  width: 290px;
  height: 280px;
  left: -50px;
  top: 5px;
  z-index: -1;
  transform: scaleX(-0.7) scaleY(-0.7) translateX(60px) translateY(-60px)
    skewY(6deg);
  clip-path: path(
    "M240 20.471 C240 8.66 229.387 -0.77 215.759 0.13L21.463 11.40C9.367 12.49 0 21.39 0 32.12V178.03C0 187.98 7.281 196.69 17.001 199.88L211.103 238.81C225.158 241.87 240 231.13 240 217.92V20.471Z"
  );
}

/* VARIATION 2 
.speaker-details:nth-child(2) > .speaker-image:after {
  content: " ";
  background: var(--um-maize);
  position: absolute;
  width: 290px;
  height: 280px;
  left: 36px;
  top: 0px;
  z-index: -1;
  transform: skewX(5deg) skewY(10deg) rotate(12deg) scaleX(1.1) scaleY(1.2);
  clip-path: path(
    "M240 26.26C240 11.15 229.387 -0.92 215.759 0.22L21.463 14.80C9.367 15.72 0 26.18 0 39.05V214.67C0 231.89 13.927 244.09 28.390 239.68L222.889 187.92C233.636 185.04 240 174.56 240 162.37V26.26Z"
  
  );
}


.speaker-details:nth-child(3) > .speaker-image:after {
  content: " ";
  background: var(--um-maize);
  position: absolute;
  width: 290px;
  height: 280px;
  left: 16px;
  top: -30px;
  z-index: -1;
  transform: skewX(5deg) skewY(10deg) scaleX(1.3) rotateZ(-70deg);
  clip-path: path(
    "M240 68.16C240 56.56 231.243 46.71 220.920 43.82L54.458 1.016C40.300 -2.647 26.104 7.033 24.246 21.600L0.561 212.448C-1.348 228.734 11.401 241.106 26.834 239.925L220.179 223.06C232.291 221.731 240 210.968 240 198.731V68.16Z"
  );
}


.speaker-details:nth-child(4) > .speaker-image:after {
  content: " ";
  background: var(--um-maize);
  position: absolute;
  width: 290px;
  height: 280px;
  left: 0px;
  top: 0px;
  z-index: -1;
  transform: skewX(5deg) skewY(10deg) rotate(5deg);
  clip-path: path(
    "M233.88 30.155C233.434 16.983 223.777 6.011 211.552 5.661L50.396 0.306C38.824 -0.110 28.575 8.781 26.546 21.170L0.646 180.777C-1.601 194.988 7.384 208.252 20.606 210.082L223.028 228.355C238.849 229.880 252.909 217.264 252.034 202.534L233.88 30.155Z"
  );
}


.speaker-details:nth-child(5) > .speaker-image:after {
  content: " ";
  background: var(--um-maize);
  position: absolute;
  width: 290px;
  height: 280px;
  left: 0px;
  top: 0px;
  z-index: -1;
  transform: skewX(5deg) skewY(10deg) rotate(-4deg);
  clip-path: path(
    "M128 171.80C128 166.48 134.98 161.54 140.39 160.15L224.08 136.90C231.82 134.59 240 140.78 240 148.68V213.68C240 219.01 233.02 223.95 227.61 225.34L143.92 248.59C136.18 250.90 128 244.71 128 236.81V171.80Z"
  );
}


.speaker-details:nth-child(6) > .speaker-image:after {
  content: " ";
  background: var(--um-maize);
  position: absolute;
  width: 290px;
  height: 280px;
  left: 0px;
  top: 0px;
  z-index: -1;
  transform: skewX(5deg) skewY(10deg) rotate(18deg);
  clip-path: path(
    "M0.426 161.455C0.426 174.110 8.521 185.480 20.073 188.776L207.020 240.333C223.910 245.863 240 232.177 240 214.037V77.984C240 65.329 231.905 53.960 220.353 50.664L33.406 0.107C16.515 -5.423 0.426 8.263 0.426 26.404V161.455Z"
  );
}
*/

/* 

Buttons  

*/

.content-download-button,
.content-row .content-download-button {
  text-align: center !important;
  /* for some reason the button text isn't centered? */
}

.button-wrapper .mat-icon {
  fill: white !important;
}

.button-wrapper button {
  background-color: var(--mo-blue--link) !important;
  color: white !important;
  background-color: #193a9f;
  color: white;
  fill: white;
  letter-spacing: 0;
  font-weight: 900;
  font-family: "DM Sans";

  color: white !important;
  fill: white !important;
  letter-spacing: 0 !important;
  font-weight: 900 !important;
  font-family: "DM Sans" !important;
}

.button-wrapper .mat-icon {
  fill: white !important;
}

/* FAQ, Mat Expansion Panels */

.mat-expansion-panel + .faq-category-title {
  margin-top: 3rem;
}

.mat-content {
  align-items: center;
}

/* Left align text rather than center */

.event-where-when,
.event-name,
.title {
  text-align: left !important;
}

.event-where-when {
  align-items: flex-start !important;
}