action network css

action-network-style-fixes.css

/*
Modify as needed and insert after the </div>
in the "Page wrapper foot HTML" section. This
will ensure that your modifications here will
be applied last. If you put it at the top,
there's a chance that they will be overridden,
which is annoying to diagnose.

The comments are there for readability, but don't
affect the page.

You can copy and paste this whole file.

Happy hunting.
*/
<style>
:root {
  --brand-primary: #008037;
  --brand-primary-light: #75ba92;
  --brand-secondary: #ffde59;
  --brand-secondary-light: #ffeda7;
  --gray-fix: #353535;
}

/* A11Y FIXES */
#can_embed_form .graytext {
  /* fixes contrast issue with the "Target: You person" text at top */
  color: var(--gray-fix);
}
#can_embed_form .action_status_tracker .action_status_goal {
  /* This is the "Only 770 more until our goal of 1,600" text */
  color: var(--gray-fix);
  font-weight: 400;
}
#can_embed_form #d_sharing #edit_d_sharing_opts,
#can_embed_form #d_sharing #edit_d_sharing_opts-close {
  color: var(--gray-fix);
}
#can_embed_form .action_status_running_total {
  font-weight: 400;
}
#can_embed_form #action_info {
  font-weight: 400;
}
#can_embed_form .control-label {
  /* This may or may not be needed for your use-case,
  but if you have a long form help text/label,
  then uppercase is very difficult for people to
  read. */
  text-transform: none;
  letter-spacing: 0;
}

/* GENERAL FIXES */
#gen_header > .gen_wrapper {
  /* our brand image is 400x400 and the height
  of the hero image ends up being overwhelming
  so this removes the top/bottom padding */
  padding: 0 2rem;
}
#gen_header img {
  max-width: 15rem;
}
#can_embed_form blockquote::before,
#can_embed_form q::before {
  background-color: var(--brand-primary-light);
}
#can_embed_form h3,
.event_campaign #can_embed_form > h2,
.letter #can_embed_form h2.line {
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--brand-primary-light);
}
#can_embed_form .action_letter::before {
  width: 0.2rem;
  background-color: var(--brand-primary-light);
}

/* PROGRESS BARS */
/* Primary brand color becomes the indicator and
secondary brand color becomes the background of
the status bar. You may want to reverse these depending
on your branding colors to make sense. */
#can_embed_form
  .action-widget--toggle
  .action_status_status_bar
  span.action_status_status_bar-grow,
#can_embed_form
  .action_status_tracker
  .action_status_status_bar
  span.action_status_status_bar-grow
  .grow-dot {
  background-color: var(--brand-primary);
}
#can_embed_form .action_status_tracker .action_status_status_bar {
  background-color: var(--brand-secondary-light);
}

/* PAGE STRUCTURE */
/* For pages like "Forms" we want to emphasize the form
and not the text, so we make it bigger -- in this
case, we're going from "main_col" @ 65% down to 40%. */
#can_embed_form.can_768 #can_main_col {
  width: 40%;
}
#can_embed_form.can_768 #can_sidebar {
  width: 50%;
}

/* PAGE STRUCTURE */
/* overrides the action boxes at the bottom. the 250% is
calculated by 100% divided by the width of the
#can_main_col element (40% in this case), i.e.,
1 / 0.4 = 2.5 */
#can_embed_form.can_768 #can_main_col #action_info {
  width: 250%;
}
@media only screen and (min-width: 809px) {
  /* I *think* this is the correct media query,
  but it's damn near impossible to tell */
  #can_embed_form .action_letter {
    width: 250%;
  }
}
</style>