Unreadable card titles in dark hero

[Qard]

Checklist

• This is about Bulma the CSS framework and not about the Bulma website
• I'm using Bulma version [0.1.2]
• My browser is: Chrome 52
• This is a Sass issue: I'm using version [x.x.x]
• I am sure this issue is not a duplicate?

Description

It seems putting a .card element inside the .hero-body of a .hero.is-dark element results in the title and subtitle being white on white, and thus unreadable.

Steps to Reproduce

1. Make a dark hero element
2. Put a card in it
3. Fail...

Expected behavior: The hero title/subtitle style should not take priority over the card title/subtitle style.

Actual behavior: The hero title/subtitle style clobbers the card title/subtitle style, making them unreadable.

[kelle62819]

Ran into this as well. Any timeline on a fix?
I tried adding "is-dark" to card, but that doesn't work either.

[jgthms]

You can fix it with:

.hero.is-dark .card .title {
  color: #363636;
}

[Come2Daddy]

Is fixed, to be closed.

[softhouse-anthonkendel]

Any plans on fixing this problem? We recently had encounter the same or similar problem.

We use the following template:

<section class="hero is-fullheight is-black">
  <section class="section">
    <div class="box">
      <p lass="title is-spaced is-4 has-text-dark">Title</p>
    </div>
  </section>
</section>

Due to the .box using a white background the .title disappears due to the .hero styles. To fix this we use the text utilities, i.e. .has-text-dark.

The hero seems to change all .title elements without regard on parents. See:

.hero.is-black .title, .hero.navbar.is-gaim-navbar .title {
  color: hsl(0, 0%, 100%);
}

Maybe make the .hero style more strict, i.e. only direct children? 😃