refresh.scss 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. // Homepage callout box with friendly woman on phone
  2. .page-content {
  3. overflow-x: hidden;
  4. }
  5. .callout-box {
  6. background: url(/assets/woman-on-phone.png) no-repeat;
  7. background-position: left bottom;
  8. background-size: 40% auto;
  9. padding: 4rem 0;
  10. padding-left: 40%;
  11. margin: 2rem 0;
  12. text-align: left;
  13. position: relative;
  14. @media screen and (max-width: 500px) {
  15. background:unset;
  16. padding-left: 0;
  17. }
  18. }
  19. .callout-box__yellow-bar {
  20. position: absolute;
  21. height: 85%;
  22. width: 500vw;
  23. margin-left: -250vw;
  24. background-color: #FFC907;
  25. left: 0;
  26. bottom: 0;
  27. mix-blend-mode: multiply;
  28. }
  29. .callout-box__text {
  30. position: relative;
  31. }
  32. .callout-box__button {
  33. margin: 3rem 0 0;
  34. text-align: left;
  35. }
  36. .button.button--call-out {
  37. background: white url(/assets/elements/icon_do.png) no-repeat calc(100% - 0.5rem) center;
  38. background-size: auto calc(100% - 1rem);
  39. border-radius: 4px;
  40. color: black;
  41. display: inline-block;
  42. font-size: 32px;
  43. font-weight: bold;
  44. float: unset;
  45. padding: 1rem 5rem 1rem 1rem;
  46. text-transform: uppercase;
  47. text-decoration: none;
  48. }