default.css 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292
  1. /* Base */
  2. body,
  3. body *:not(html):not(style):not(br):not(tr):not(code) {
  4. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
  5. 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  6. box-sizing: border-box;
  7. }
  8. body {
  9. background-color: #f8fafc;
  10. color: #74787e;
  11. height: 100%;
  12. hyphens: auto;
  13. line-height: 1.4;
  14. margin: 0;
  15. -moz-hyphens: auto;
  16. -ms-word-break: break-all;
  17. width: 100% !important;
  18. -webkit-hyphens: auto;
  19. -webkit-text-size-adjust: none;
  20. word-break: break-all;
  21. word-break: break-word;
  22. }
  23. p,
  24. ul,
  25. ol,
  26. blockquote {
  27. line-height: 1.4;
  28. text-align: left;
  29. }
  30. a {
  31. color: #3869d4;
  32. }
  33. a img {
  34. border: none;
  35. }
  36. /* Typography */
  37. h1 {
  38. color: #3d4852;
  39. font-size: 19px;
  40. font-weight: bold;
  41. margin-top: 0;
  42. text-align: left;
  43. }
  44. h2 {
  45. color: #3d4852;
  46. font-size: 16px;
  47. font-weight: bold;
  48. margin-top: 0;
  49. text-align: left;
  50. }
  51. h3 {
  52. color: #3d4852;
  53. font-size: 14px;
  54. font-weight: bold;
  55. margin-top: 0;
  56. text-align: left;
  57. }
  58. p {
  59. color: #3d4852;
  60. font-size: 16px;
  61. line-height: 1.5em;
  62. margin-top: 0;
  63. text-align: left;
  64. }
  65. p.sub {
  66. font-size: 12px;
  67. }
  68. img {
  69. max-width: 100%;
  70. }
  71. /* Layout */
  72. .wrapper {
  73. background-color: #f8fafc;
  74. margin: 0;
  75. padding: 0;
  76. width: 100%;
  77. -premailer-cellpadding: 0;
  78. -premailer-cellspacing: 0;
  79. -premailer-width: 100%;
  80. }
  81. .content {
  82. margin: 0;
  83. padding: 0;
  84. width: 100%;
  85. -premailer-cellpadding: 0;
  86. -premailer-cellspacing: 0;
  87. -premailer-width: 100%;
  88. }
  89. /* Header */
  90. .header {
  91. padding: 25px 0;
  92. text-align: center;
  93. }
  94. .header a {
  95. color: #bbbfc3;
  96. font-size: 19px;
  97. font-weight: bold;
  98. text-decoration: none;
  99. text-shadow: 0 1px 0 white;
  100. }
  101. /* Body */
  102. .body {
  103. background-color: #ffffff;
  104. border-bottom: 1px solid #edeff2;
  105. border-top: 1px solid #edeff2;
  106. margin: 0;
  107. padding: 0;
  108. width: 100%;
  109. -premailer-cellpadding: 0;
  110. -premailer-cellspacing: 0;
  111. -premailer-width: 100%;
  112. }
  113. .inner-body {
  114. background-color: #ffffff;
  115. margin: 0 auto;
  116. padding: 0;
  117. width: 570px;
  118. -premailer-cellpadding: 0;
  119. -premailer-cellspacing: 0;
  120. -premailer-width: 570px;
  121. }
  122. /* Subcopy */
  123. .subcopy {
  124. border-top: 1px solid #edeff2;
  125. margin-top: 25px;
  126. padding-top: 25px;
  127. }
  128. .subcopy p {
  129. font-size: 12px;
  130. }
  131. /* Footer */
  132. .footer {
  133. margin: 0 auto;
  134. padding: 0;
  135. text-align: center;
  136. width: 570px;
  137. -premailer-cellpadding: 0;
  138. -premailer-cellspacing: 0;
  139. -premailer-width: 570px;
  140. }
  141. .footer p {
  142. color: #aeaeae;
  143. font-size: 12px;
  144. text-align: center;
  145. }
  146. /* Tables */
  147. .table table {
  148. margin: 30px auto;
  149. width: 100%;
  150. -premailer-cellpadding: 0;
  151. -premailer-cellspacing: 0;
  152. -premailer-width: 100%;
  153. }
  154. .table th {
  155. border-bottom: 1px solid #edeff2;
  156. padding-bottom: 8px;
  157. margin: 0;
  158. }
  159. .table td {
  160. color: #74787e;
  161. font-size: 15px;
  162. line-height: 18px;
  163. padding: 10px 0;
  164. margin: 0;
  165. }
  166. .content-cell {
  167. padding: 35px;
  168. }
  169. /* Buttons */
  170. .action {
  171. margin: 30px auto;
  172. padding: 0;
  173. text-align: center;
  174. width: 100%;
  175. -premailer-cellpadding: 0;
  176. -premailer-cellspacing: 0;
  177. -premailer-width: 100%;
  178. }
  179. .button {
  180. border-radius: 3px;
  181. box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
  182. color: #fff;
  183. display: inline-block;
  184. text-decoration: none;
  185. -webkit-text-size-adjust: none;
  186. }
  187. .button-blue,
  188. .button-primary {
  189. background-color: #3490dc;
  190. border-top: 10px solid #3490dc;
  191. border-right: 18px solid #3490dc;
  192. border-bottom: 10px solid #3490dc;
  193. border-left: 18px solid #3490dc;
  194. }
  195. .button-green,
  196. .button-success {
  197. background-color: #38c172;
  198. border-top: 10px solid #38c172;
  199. border-right: 18px solid #38c172;
  200. border-bottom: 10px solid #38c172;
  201. border-left: 18px solid #38c172;
  202. }
  203. .button-red,
  204. .button-error {
  205. background-color: #e3342f;
  206. border-top: 10px solid #e3342f;
  207. border-right: 18px solid #e3342f;
  208. border-bottom: 10px solid #e3342f;
  209. border-left: 18px solid #e3342f;
  210. }
  211. /* Panels */
  212. .panel {
  213. margin: 0 0 21px;
  214. }
  215. .panel-content {
  216. background-color: #f1f5f8;
  217. padding: 16px;
  218. }
  219. .panel-item {
  220. padding: 0;
  221. }
  222. .panel-item p:last-of-type {
  223. margin-bottom: 0;
  224. padding-bottom: 0;
  225. }
  226. /* Promotions */
  227. .promotion {
  228. background-color: #ffffff;
  229. border: 2px dashed #9ba2ab;
  230. margin: 0;
  231. margin-bottom: 25px;
  232. margin-top: 25px;
  233. padding: 24px;
  234. width: 100%;
  235. -premailer-cellpadding: 0;
  236. -premailer-cellspacing: 0;
  237. -premailer-width: 100%;
  238. }
  239. .promotion h1 {
  240. text-align: center;
  241. }
  242. .promotion p {
  243. font-size: 15px;
  244. text-align: center;
  245. }