_subscription_plans.css.scss 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. section.subscription_plans {
  2. ul {
  3. border: 0px;
  4. }
  5. p.promohead {
  6. align: center;
  7. text-align: center;
  8. color: #888888;
  9. font-size: 2em;
  10. padding-bottom: 20px;
  11. }
  12. .title {
  13. font-size: 1.7em;
  14. text-transform: uppercase;
  15. line-height: 24px;
  16. padding: 38px;
  17. #mostPopular {
  18. padding: 0px;
  19. margin:0px;
  20. position: absolute;
  21. top: 0px;
  22. right: 15px;
  23. width: 80px;
  24. height: 80px;
  25. background: image-url("global/mostpopular_promoflag.png") no-repeat center;
  26. }
  27. }
  28. .title.option1 {
  29. background: #d36062;
  30. background: -webkit-linear-gradient(top,#d36062 0,#F58284 100%);
  31. background: -moz-linear-gradient(top,#d36062 0,#F58284 100%);
  32. background: -ms-linear-gradient(top,#d36062 0,#F58284 100%);
  33. background: -o-linear-gradient(top,#d36062 0,#F58284 100%);
  34. -webkit-border-radius: 4px 4px 0 0;
  35. -moz-border-radius: 4px 4px 0 0;
  36. -ms-border-radius: 4px 4px 0 0;
  37. -o-border-radius: 4px 4px 0 0;
  38. border-radius: 4px 4px 0 0;
  39. }
  40. .title.option2 {
  41. background: #43b6cf;
  42. background: -webkit-linear-gradient(top,#65D8EF 0,#43b6cf 100%);
  43. background: -moz-linear-gradient(top,#65D8EF 0,#43b6cf 100%);
  44. background: -ms-linear-gradient(top,#65D8EF 0,#43b6cf 100%);
  45. background: -o-linear-gradient(top,#65D8EF 0,#43b6cf 100%);
  46. -webkit-border-radius: 4px 4px 0 0;
  47. -moz-border-radius: 4px 4px 0 0;
  48. -ms-border-radius: 4px 4px 0 0;
  49. -o-border-radius: 4px 4px 0 0;
  50. border-radius: 4px 4px 0 0;
  51. }
  52. .title.option3 {
  53. background: #86c79e;
  54. background: -webkit-linear-gradient(top,#86c79e 0,#A8E9BF 100%);
  55. background: -moz-linear-gradient(top,#86c79e 0,#A8E9BF 100%);
  56. background: -ms-linear-gradient(top,#86c79e 0,#A8E9BF 100%);
  57. background: -o-linear-gradient(top,#86c79e 0,#A8E9BF 100%);
  58. -webkit-border-radius: 4px 4px 0 0;
  59. -moz-border-radius: 4px 4px 0 0;
  60. -ms-border-radius: 4px 4px 0 0;
  61. -o-border-radius: 4px 4px 0 0;
  62. border-radius: 4px 4px 0 0;
  63. }
  64. .promo {
  65. align: center;
  66. text-align: center;
  67. background: #F6F6F6;
  68. .tag {
  69. background: #F6F6F6 image-url("global/promo_ribbon.png") no-repeat center;
  70. min-height: 40px;
  71. color: white;
  72. font-size: 16px;
  73. font-weight: bold;
  74. line-height: 40px;
  75. }
  76. .strike {
  77. text-decoration: line-through;
  78. font-size: 18px;
  79. font-weight: bold;
  80. color: gray;
  81. }
  82. }
  83. .price {
  84. padding-top: 0px;
  85. font-size: 3em;
  86. font-weight: bold;
  87. }
  88. .description {
  89. font-size: 12px;
  90. padding-top: 0px;
  91. padding-bottom: 10px;
  92. span {
  93. font-weight: bold;
  94. }
  95. }
  96. small {
  97. display: block;
  98. font-size: 12px;
  99. }
  100. }
  101. .featured {
  102. top: -30px;
  103. .pricing-table {
  104. .title {
  105. padding-top: 52px;
  106. padding-bottom: 52px;
  107. }
  108. }
  109. }
  110. a.featuredButton {
  111. background-color: #81BA00;
  112. }
  113. a.featuredButton:hover {
  114. background-color: #5e9800;
  115. }
  116. .fine {
  117. padding-bottom: 20px;
  118. }