genie-component-library/dist/collection/components/genie-card/genie-card.css

Genie Component Library

/**
	 * @prop --color-primary: The main color
	 * @prop --color-accent: The accent color
	 * @prop --color-background: The background color
	 * @prop --heading-font-size: Heading font size
	 * @prop --text-font-size: Text font size
	 * @prop --border-radius: Border radius of the card
	 * @prop --a-border-radius: Border radius of the anchor
	 * @prop --text-color-override: Manually set text color when not hovered
	 * @prop --heading-color-override: Manually set the heading color when not hovered
	 * @prop --text-color-override-hover: Manually set text color when hovered
	 * @prop --heading-color-override-hover: Manually set the heading color when hovered
	 */
:host {
  font-size: 100%;
  line-height: 1.6;
  box-sizing: border-box;
  display: block;
  background: var(--color-background, #fff);
  padding: 0;
  border-radius: var(--border-radius, 25px);
  box-shadow: 0 7px 20px rgba(100, 28, 2, 0.135);
  transition: background-color 300ms ease, color 300ms ease;
  position: relative;
  z-index: 1;
}
:host h3 {
  color: var(--heading-color-override, var(--color-primary, #503f9d));
  line-height: 1.2;
  font-size: var(--heading-font-size, 30px);
}
:host a {
  text-decoration: none;
}
:host .card-native {
  display: block;
  border: none;
  margin: 0;
  padding: 2em;
  width: auto;
  overflow: visible;
  background: transparent;
  /* inherit font & color from ancestor */
  color: inherit;
  font: inherit;
  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
  line-height: normal;
  /* Corrects font smoothing for webkit */
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  /* Corrects inability to style clickable `input` types in iOS */
  -webkit-appearance: none;
  text-align: inherit;
  outline: none;
  /* Remove excess padding and border in Firefox 4+ */
}
:host .card-native::-moz-focus-inner {
  border: 0;
  padding: 0;
}
:host a.card-link {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 50px;
  border-radius: var(--a-border-radius, 0 25px);
  cursor: pointer;
  transition: inherit;
  background-color: var(--color-accent, #fb6f3c);
  text-align: center;
}
:host a.card-link svg {
  stroke: var(--color-background, #fff);
  width: 30px;
  height: 30px;
  padding-top: 10px;
}
:host p {
  font-size: var(--text-font-size, 16px);
  color: var(--text-color-override, var(--color-primary, #503f9d));
  text-decoration: none;
}

:host(.card-is-link) {
  cursor: pointer;
}

:host(:hover:not(.no-hover)) {
  background-color: var(--color-accent, #fb6f3c);
}
:host(:hover:not(.no-hover)) h3 {
  color: var(--heading-color-override-hover, var(--color-background, #fff));
}
:host(:hover:not(.no-hover)) p {
  color: var(--text-color-override-hover, var(--color-background, #fff));
}
:host(:hover:not(.no-hover)) a.card-link {
  background-color: var(--color-background, #fff);
}
:host(:hover:not(.no-hover)) a.card-link svg {
  stroke: var(--color-accent, #fb6f3c);
}