main.css 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385
  1. /* body {
  2. font-family: 'Roboto', sans-serif;
  3. background-color: white;
  4. color: #182F40;
  5. }
  6. html {
  7. font-size: 22px;
  8. -webkit-print-color-adjust: exact;
  9. }
  10. @media print {
  11. thead {
  12. display: table-header-group;
  13. }
  14. }
  15. .image {
  16. max-width: 500px;
  17. margin: auto;
  18. }
  19. .cover {
  20. text-align: center;
  21. }
  22. .cover .cover-logo,
  23. .cover .cover-products {
  24. max-width: 30rem;
  25. margin-top: 1rem;
  26. }
  27. .cover h1 {
  28. font-family: 'Raleway', sans-serif;
  29. font-size: 3rem;
  30. padding: 3rem;
  31. text-transform: uppercase;
  32. font-weight: 300;
  33. }
  34. .eba-hero {
  35. background: #182848;
  36. color: white;
  37. text-align: center;
  38. }
  39. .eba-foundations .columns{
  40. text-align: center;
  41. padding: 0 1rem;
  42. }
  43. table {
  44. width: 100%;
  45. }
  46. table tbody tr,
  47. tr * {
  48. page-break-inside: avoid!important;
  49. }
  50. table.table th,
  51. table.table td {
  52. padding: 0;
  53. border: 0;
  54. }
  55. table thead {
  56. display: table-header-group;
  57. }
  58. .toc-goto {
  59. position: relative;
  60. width: 10px;
  61. left: 10px;
  62. }
  63. table.toc-table .toc-section {
  64. padding: .4rem 1rem;
  65. text-align: center;
  66. }
  67. table.toc-table .toc-section a {
  68. font-weight: 600;
  69. text-transform: uppercase;
  70. color: rgba(24, 40, 72, 0.8);
  71. font-size: 1.5rem;
  72. }
  73. table.toc-table .toc-content {
  74. font-family: 'Raleway', sans-serif;
  75. color: hsl(0, 0%, 33%);
  76. letter-spacing: 0.02rem;
  77. font-weight: 400;
  78. font-size: .8rem;
  79. padding-left: 1rem;
  80. line-height: 1rem;
  81. }
  82. .toc-container {
  83. padding: 0 6rem;
  84. margin-bottom: 1rem;
  85. font-size: 1.5rem;
  86. }
  87. .toc-container .columns.is-mobile {
  88. margin-bottom: .75rem;
  89. }
  90. .toc-container .column.is-11,
  91. .toc-container .column.is-1 {
  92. padding: .2rem 1rem;
  93. }
  94. .toc-container .toc-title,
  95. .toc-container .column.is-1 {
  96. font-weight: 600;
  97. text-transform: uppercase;
  98. color: rgba(24, 40, 72, 0.8);
  99. font-size: 1.3rem;
  100. }
  101. .toc-container .toc-content {
  102. font-family: 'Raleway', sans-serif;
  103. color: hsl(0, 0%, 33%);
  104. letter-spacing: 0.02rem;
  105. font-weight: 400;
  106. font-size: .75rem;
  107. padding-left: 1rem;
  108. line-height: 1rem;
  109. }
  110. h2 {
  111. background: rgb(24,40,72);
  112. background: linear-gradient(25deg, rgba(24,40,72,1) 0%, rgba(24,40,72,0.8) 100%);
  113. padding: 3rem 1rem 1rem 1rem;
  114. color: white;
  115. font-family: 'Raleway', sans-serif;
  116. font-size: 1.8rem;
  117. text-transform: uppercase;
  118. font-weight: 300;
  119. letter-spacing: 0.05rem;
  120. margin-bottom: 0.5rem;
  121. }
  122. h3 {
  123. background-color: #435074;
  124. color: white;
  125. padding: 0.5rem 1rem;
  126. font-family: 'Raleway', sans-serif;
  127. font-weight: 300;
  128. font-size: 1.3rem;
  129. }
  130. .us-container,
  131. .product-container,
  132. .contact-container {
  133. margin-bottom: 0.5rem;
  134. }
  135. .us-container,
  136. .foundations-container {
  137. padding: 1rem;
  138. text-align: center;
  139. }
  140. .contact-body,
  141. .product-container {
  142. background-color: #f5f5f5;
  143. }
  144. .us-body,
  145. .product-body,
  146. .contact-body {
  147. padding: 0 1rem;
  148. margin-top: 0px;
  149. }
  150. .sell-product-container p,
  151. .product-body p.product-short-desc {
  152. font-family: 'Raleway', sans-serif;
  153. color: #334875;
  154. font-style: italic;
  155. letter-spacing: 0.02rem;
  156. font-weight: 400;
  157. margin: 0.5rem 0;
  158. }
  159. .section-container {
  160. padding-bottom: 0.5rem;
  161. }
  162. .section-name {
  163. font-weight: 600;
  164. color: #596992;
  165. font-size: 1.2rem;
  166. max-height: 2rem;
  167. }
  168. .tag {
  169. margin: 0 0.2rem;
  170. display: inline-block;
  171. height: 1.3em;
  172. }
  173. .tag.is-ph {
  174. background-color: white;
  175. }
  176. .tag.is-active {
  177. background-color: #004c8c;
  178. color: white;
  179. }
  180. tr:last-child td .sell-product-container {
  181. border: 0;
  182. }
  183. .sell-product-container {
  184. padding: .5rem 1rem;
  185. border-bottom: 1px solid #CCCCCC;
  186. }
  187. .sell-product-container p {
  188. margin-top: 0;
  189. }
  190. .sell-product-container .columns {
  191. align-items: center;
  192. }
  193. .sell-product-container:last-child {
  194. margin-bottom: 1rem;
  195. }
  196. .price-tag {
  197. text-align: center;
  198. color: #aaaaaa;
  199. font-weight: 300;
  200. font-family: 'Raleway', sans-serif;
  201. font-size: .75rem;
  202. }
  203. .price-tag .price-total {
  204. color: #004c8c;
  205. font-weight: 600;
  206. font-family: 'Roboto', sans-serif;
  207. font-size: 1rem;
  208. padding: 0 .2rem;
  209. }
  210. h4 {
  211. color: #004c8c;
  212. font-weight: 600;
  213. letter-spacing: .02rem;
  214. font-size: 1.2rem;
  215. }
  216. .product-size {
  217. color: #334875;
  218. font-weight: 300;
  219. font-family: 'Raleway', sans-serif;
  220. font-size: .75rem;
  221. text-align: center;
  222. }
  223. table.domi-prod:not(:first-child) {
  224. page-break-before: unset;
  225. width: 100%;
  226. }
  227. table.domi-prod {
  228. page-break-inside: avoid;
  229. }
  230. h2.domi-h2 {
  231. padding: 1rem;
  232. margin-bottom: 0;
  233. } */
  234. body {
  235. font-size: 1.5rem;
  236. font-family: 'Roboto', sans-serif;
  237. }
  238. #eba-cover {
  239. background-color: #0C2545;
  240. color: white;
  241. text-align: left;
  242. }
  243. #eba-about {
  244. text-align: justify;
  245. }
  246. .pagebreak {
  247. page-break-before: always;
  248. }
  249. h2 {
  250. font-family: 'Raleway', sans-serif;
  251. text-transform: uppercase;
  252. font-weight: 800;
  253. color: #0C2545;
  254. position: relative;
  255. font-size: 2.5rem;
  256. margin: 1.5rem 0;
  257. }
  258. h2::before {
  259. background: #5A91C4;
  260. content: '';
  261. display: block;
  262. height: 5rem;
  263. left: -70px;
  264. position: absolute;
  265. top: -1rem;
  266. width: 4rem;
  267. z-index: -1;
  268. }
  269. h3 {
  270. text-align: center;
  271. }
  272. h3::after {
  273. content: '';
  274. display: block;
  275. width: 100%;
  276. height: 0.5rem;
  277. background-color: #5A91C4;
  278. margin-top: .5rem;
  279. }
  280. h4 {
  281. margin: 1rem 0 .5rem 0;
  282. font-size: 1.5rem;
  283. font-weight: 600;
  284. }
  285. h4.primary-title {
  286. color: #5A91C4;
  287. font-size: 1.8rem;
  288. }
  289. p {
  290. margin: .5rem 0 1rem 0;
  291. }
  292. p.product-short-desc {
  293. font-family: 'Raleway', sans-serif;
  294. font-style: italic;
  295. color: #0C2545;
  296. margin-bottom: 0;
  297. }
  298. .product-short-desc,
  299. .section-body {
  300. text-align: justify;
  301. }
  302. .collection {
  303. border: 0;
  304. }
  305. .product-container {
  306. page-break-inside: avoid;
  307. }
  308. .product-container
  309. .row {
  310. margin-bottom: .5rem;
  311. }
  312. #higiene h2,
  313. #mascaras h2,
  314. #acido-hialuronico h2 {
  315. page-break-before: always;
  316. }
  317. .collection
  318. .collection-item {
  319. padding: 0;
  320. line-height: 1.8rem;
  321. }
  322. .container {
  323. width: 90%;
  324. }