You are here

social_landing_page.section.hero.css in Open Social 8.6

@media (min-width: 1200px) {
  .paragraph--section .paragraph--hero {
    margin-left: calc(-100vw / 2 + 1200px / 2);
    margin-right: calc(-100vw / 2 + 1200px / 2); } }
.paragraph--hero .hero__bgimage-overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(34, 34, 34, 0.7) 100%); }
.paragraph--hero .cover-wrap {
  justify-content: center; }
  @media (min-width: 600px) {
    .paragraph--hero .cover-wrap {
      min-height: 350px; } }
.paragraph--hero .cover-small {
  max-width: 620px;
  width: 100%;
  padding: 0 7px;
  margin: 0 auto;
  text-align: left; }
  @media (min-width: 600px) {
    .paragraph--hero .cover-small {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%); } }
  .paragraph--hero .cover-small .page-title {
    width: 100%;
    text-align: left;
    padding: 30px 0 10px; }
  .paragraph--hero .cover-small .page-subtitle {
    margin: 0 0 5px;
    font-weight: normal;
    font-size: 20px; }
  .paragraph--hero .cover-small .hero-footer .field--name-field-hero-buttons {
    margin: 0 -10px; }
  .paragraph--hero .cover-small .hero-footer .field--item {
    display: inline-block; }
    .paragraph--hero .cover-small .hero-footer .field--item .paragraph--button {
      padding: 0 10px; }
  .paragraph--hero .cover-small .hero-footer .card__actionbar {
    padding: 20px 0; }
    .paragraph--hero .cover-small .hero-footer .card__actionbar .btn {
      min-width: 130px; }

/*# sourceMappingURL=social_landing_page.section.hero.css.map */

File

modules/social_features/social_landing_page/css/social_landing_page.section.hero.css
View source
  1. @media (min-width: 1200px) {
  2. .paragraph--section .paragraph--hero {
  3. margin-left: calc(-100vw / 2 + 1200px / 2);
  4. margin-right: calc(-100vw / 2 + 1200px / 2); } }
  5. .paragraph--hero .hero__bgimage-overlay {
  6. position: absolute;
  7. top: 0;
  8. left: 0;
  9. bottom: 0;
  10. right: 0;
  11. background: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(34, 34, 34, 0.7) 100%); }
  12. .paragraph--hero .cover-wrap {
  13. justify-content: center; }
  14. @media (min-width: 600px) {
  15. .paragraph--hero .cover-wrap {
  16. min-height: 350px; } }
  17. .paragraph--hero .cover-small {
  18. max-width: 620px;
  19. width: 100%;
  20. padding: 0 7px;
  21. margin: 0 auto;
  22. text-align: left; }
  23. @media (min-width: 600px) {
  24. .paragraph--hero .cover-small {
  25. position: absolute;
  26. bottom: 10px;
  27. left: 50%;
  28. transform: translateX(-50%); } }
  29. .paragraph--hero .cover-small .page-title {
  30. width: 100%;
  31. text-align: left;
  32. padding: 30px 0 10px; }
  33. .paragraph--hero .cover-small .page-subtitle {
  34. margin: 0 0 5px;
  35. font-weight: normal;
  36. font-size: 20px; }
  37. .paragraph--hero .cover-small .hero-footer .field--name-field-hero-buttons {
  38. margin: 0 -10px; }
  39. .paragraph--hero .cover-small .hero-footer .field--item {
  40. display: inline-block; }
  41. .paragraph--hero .cover-small .hero-footer .field--item .paragraph--button {
  42. padding: 0 10px; }
  43. .paragraph--hero .cover-small .hero-footer .card__actionbar {
  44. padding: 20px 0; }
  45. .paragraph--hero .cover-small .hero-footer .card__actionbar .btn {
  46. min-width: 130px; }
  47. /*# sourceMappingURL=social_landing_page.section.hero.css.map */