main.css 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445
  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. background: url(../images/fondo1.jpg);
  243. background-size: cover;
  244. background-position: center;
  245. height: 1448px;
  246. }
  247. #logo,
  248. #cover-products {
  249. margin: 4rem 0;
  250. }
  251. .chip {
  252. background-color: rgba(27, 61, 108, 0.1);
  253. font-size: 1rem;
  254. }
  255. h1 {
  256. font-family: 'Raleway', sans-serif;
  257. text-align: center;
  258. text-transform: uppercase;
  259. color: #0C2545;
  260. }
  261. #eba-about {
  262. text-align: justify;
  263. }
  264. .responsive-img.circle {
  265. padding: 1rem 0;
  266. }
  267. .pagebreak {
  268. page-break-before: always;
  269. }
  270. h2 {
  271. font-family: 'Raleway', sans-serif;
  272. text-transform: uppercase;
  273. font-weight: 800;
  274. color: #0C2545;
  275. position: relative;
  276. font-size: 2.5rem;
  277. margin: 1.5rem 0;
  278. }
  279. h2::before {
  280. background: #5A91C4;
  281. content: '';
  282. display: block;
  283. height: 5rem;
  284. left: -70px;
  285. position: absolute;
  286. top: -1rem;
  287. width: 4rem;
  288. z-index: -1;
  289. }
  290. h3 {
  291. text-align: center;
  292. }
  293. h3::after {
  294. content: '';
  295. display: block;
  296. width: 100%;
  297. height: 0.5rem;
  298. background-color: #5A91C4;
  299. margin-top: .5rem;
  300. }
  301. h4 {
  302. margin: 1rem 0 .5rem 0;
  303. font-size: 1.5rem;
  304. font-weight: 600;
  305. }
  306. h4.primary-title {
  307. color: #5A91C4;
  308. font-size: 1.8rem;
  309. }
  310. h5 {
  311. font-size: 2rem;
  312. margin: 1rem 0 .5rem 0;
  313. }
  314. p {
  315. margin: .5rem 0 1rem 0;
  316. }
  317. p.product-short-desc {
  318. font-family: 'Raleway', sans-serif;
  319. font-style: italic;
  320. color: #0C2545;
  321. margin-bottom: 0;
  322. }
  323. .product-short-desc,
  324. .section-body {
  325. text-align: justify;
  326. }
  327. .collection {
  328. border: 0;
  329. }
  330. .product-container {
  331. page-break-inside: avoid;
  332. }
  333. .product-container
  334. .row {
  335. margin-bottom: .5rem;
  336. }
  337. .product-price {
  338. display: flex;
  339. align-items: baseline;
  340. font-family: 'Raleway', sans-serif;
  341. color: #0C2545;
  342. font-size: 1.5rem;
  343. }
  344. .price-symbol,
  345. .price-decimal {
  346. font-size: 1.5rem;
  347. padding: 0 .2rem;
  348. }
  349. .price-total {
  350. font-weight: 900;
  351. color: #0C2545;
  352. font-family: 'Roboto', sans-serif;
  353. }
  354. #higiene h2,
  355. #mascaras h2,
  356. #acido-hialuronico h2,
  357. #hombres h2,
  358. #proteccion-intensiva h2,
  359. #monodosis h2,
  360. #proteccion-solar h2 {
  361. page-break-before: always;
  362. }
  363. .collection
  364. .collection-item {
  365. padding: 0;
  366. line-height: 1.8rem;
  367. }
  368. .container {
  369. width: 90%;
  370. }
  371. @page {
  372. margin: 1rem 0;
  373. }
  374. @page :first {
  375. margin: 0;
  376. }