colorful.css 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498
  1. /**
  2. * Colorful Style Pack
  3. *
  4. */
  5. /**
  6. * Fonts
  7. */
  8. body,
  9. button,
  10. input,
  11. select,
  12. textarea,
  13. .post-navigation a,
  14. .site-description,
  15. .header-search .s,
  16. .entry-meta,
  17. .site-footer,
  18. .main-navigation a,
  19. .entry-footer,
  20. .post-navigation a span,
  21. .comment-actions,
  22. .comment-navigation,
  23. #wp-calendar tfoot a,
  24. form,
  25. input,
  26. button,
  27. .button,
  28. input[type="button"],
  29. input[type="reset"],
  30. input[type="submit"],
  31. .wp-block-button .wp-block-button__link,
  32. #infinite-handle span {
  33. font-family: Inconsolata, monospace;
  34. }
  35. .main-navigation a,
  36. .entry-meta,
  37. .entry-meta a,
  38. .archive .page-title,
  39. .search .page-title,
  40. .error404 .page-title,
  41. .posts-navigation a,
  42. .comments-title,
  43. .comment-reply-title,
  44. .site-info {
  45. font-weight: 400;
  46. }
  47. /* Headers */
  48. h1,
  49. h2,
  50. h3,
  51. h4,
  52. h5,
  53. h6,
  54. .widget-title,
  55. .archive .page-title,
  56. .comment-header,
  57. .site-title,
  58. .entry-title {
  59. font-family: 'Karla', 'Helvetica Neue', Helvetica, arial, sans-serif;
  60. text-transform: none;
  61. }
  62. /**
  63. * Colours
  64. */
  65. body {
  66. background-color: #fff;
  67. }
  68. .hero-area .button,
  69. .hero-area .button:focus,
  70. .hero-area .button:hover {
  71. background-color: #d97059;
  72. color: #fff;
  73. }
  74. .hero-area {
  75. background-color: #888;
  76. }
  77. blockquote:before,
  78. blockquote:after {
  79. background-color: #f1f1f1;
  80. }
  81. h1,
  82. h2,
  83. h3,
  84. h4,
  85. h5,
  86. h6,
  87. .archive .page-title,
  88. .comment-header,
  89. .site-title,
  90. .jetpack-social-navigation a:hover,
  91. .jetpack-social-navigation a:focus,
  92. .jetpack-social-navigation a:visited:hover {
  93. color: #71db9d;
  94. }
  95. a,
  96. a:visited,
  97. .entry-title a:hover,
  98. .entry-meta a,
  99. .entry-footer a,
  100. .posts-navigation a,
  101. .post-navigation a,
  102. .comment-navigation a:hover,
  103. .site-title a:hover,
  104. .site-info a,
  105. .site-info a:hover,
  106. #wp-calendar tfoot a:hover,
  107. .entry-title a:hover,
  108. .menu-toggle {
  109. color: #d97059;
  110. }
  111. .archive .entry-title a:hover,
  112. .blog .entry-title a:hover,
  113. .search .entry-title a:hover {
  114. color: #ffed78;
  115. }
  116. .single .entry-header,
  117. .page .entry-header {
  118. position: relative;
  119. }
  120. .posts-navigation a:hover,
  121. .post-navigation a:hover,
  122. .entry-meta a:hover,
  123. .entry-footer a:hover {
  124. color: #222;
  125. }
  126. .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-text-color) {
  127. color: #fff;
  128. }
  129. button:hover,
  130. .button:hover,
  131. input[type="button"]:hover,
  132. input[type="reset"]:hover,
  133. input[type="submit"]:hover,
  134. .entry-content .wp-block-button .wp-block-button__link:hover,
  135. button:focus,
  136. .button:focus,
  137. input[type="button"]:focus,
  138. input[type="reset"]:focus,
  139. input[type="submit"]:focus,
  140. .entry-content .wp-block-button .wp-block-button__link:focus,
  141. button:active,
  142. .button:active,
  143. input[type="button"]:active,
  144. input[type="reset"]:active,
  145. input[type="submit"]:active,
  146. .entry-content .wp-block-button .wp-block-button__link:active,
  147. .bypostauthor .by-post-author {
  148. background-color: #d97059;
  149. }
  150. .archive article:nth-of-type(3n+1) .entry-header,
  151. .blog article:nth-of-type(3n+1) .entry-header,
  152. .search-results article:nth-of-type(3n+1) .entry-header {
  153. background-color: rgba(39,140,176,0.7);
  154. }
  155. .archive article:nth-of-type(3n+1) .entry-header:hover,
  156. .blog article:nth-of-type(3n+1) .entry-header:hover,
  157. .search-results article:nth-of-type(3n+1) .entry-header:hover {
  158. background-color: rgba(39,140,176,0.9);
  159. }
  160. .archive article:nth-of-type(3n+2) .entry-header,
  161. .blog article:nth-of-type(3n+2) .entry-header,
  162. .search-results article:nth-of-type(3n+2) .entry-header {
  163. background-color: rgba(217,112,89,0.7);
  164. }
  165. .archive article:nth-of-type(3n+2) .entry-header:hover,
  166. .blog article:nth-of-type(3n+2) .entry-header:hover,
  167. .search-results article:nth-of-type(3n+2) .entry-header:hover {
  168. background-color: rgba(217,112,89,0.9);
  169. }
  170. .archive article:nth-of-type(3n+3) .entry-header,
  171. .blog article:nth-of-type(3n+3) .entry-header,
  172. .search-results article:nth-of-type(3n+3) .entry-header {
  173. background-color: rgba(59,159,100,0.7);
  174. }
  175. .archive article:nth-of-type(3n+3) .entry-header:hover,
  176. .blog article:nth-of-type(3n+3) .entry-header:hover,
  177. .search-results article:nth-of-type(3n+3) .entry-header:hover {
  178. background-color: rgba(59,159,100,0.9);
  179. }
  180. .entry-title a {
  181. color: #fff;
  182. }
  183. .comments-title,
  184. .comment-reply-title {
  185. color: #222;
  186. font-weight: 400;
  187. }
  188. .widget-title,
  189. .archive .page-title {
  190. text-transform: uppercase;
  191. }
  192. .single .entry-title,
  193. .page-template-default .entry-title,
  194. .widget-title {
  195. color: #4ba3c3;
  196. }
  197. .hero-area-title {
  198. color: #fff;
  199. }
  200. .post-nav-wrapper,
  201. .site-footer,
  202. .widget-area,
  203. .entry-author,
  204. .entry-links,
  205. .page-header,
  206. .comments-area,
  207. .respond {
  208. border-top-color: #e5e5e5;
  209. }
  210. .comments-area,
  211. .comments-title,
  212. .respond {
  213. border-color: #60cd8e;
  214. }
  215. .menu-toggle:hover,
  216. .comments-area,
  217. .respond {
  218. background-color: #71db9d;
  219. }
  220. .comment-navigation a {
  221. color: #222;
  222. }
  223. .single.no-featured-image .site-header,
  224. .page.no-featured-image .site-header,
  225. .error-404 .page-header,
  226. .no-results .page-header,
  227. .search-no-results .page-header {
  228. border-bottom-color: #e5e5e5;
  229. }
  230. .contact-info-area {
  231. background-color: #ffed78;
  232. border-color: #f4d35e;
  233. }
  234. .cat-links .icon,
  235. .tags-links .icon,
  236. .edit-link .icon {
  237. fill: #d97059;
  238. }
  239. .site-title a,
  240. .contact-info-area,
  241. .contact-info-area a,
  242. .contact-info-area a:hover {
  243. color: #222;
  244. }
  245. .contact-info-area .icon {
  246. fill: #d97059;
  247. }
  248. .main-navigation a,
  249. .jetpack-social-navigation a,
  250. .jetpack-social-navigation a:visited {
  251. color: #d97059;
  252. }
  253. .widget-area {
  254. background-color: #fafafa;
  255. }
  256. /**
  257. * Layout-y stuff
  258. */
  259. .hero-area-button .button {
  260. border-radius: 5px;
  261. box-shadow: 0px 5px 0px 0px #bd5842;
  262. position: relative;
  263. top: 0;
  264. transition: all 0.2s;
  265. }
  266. .hero-area-button .button:hover {
  267. box-shadow: 0px 10px 0px 0px #bd5842;
  268. top: -5px;
  269. }
  270. .hero-area-button .button:focus,
  271. .hero-area-button .button:active {
  272. box-shadow: 0px 0px 0px 0px #bd5842;
  273. top: 5px;
  274. }
  275. .menu-toggle .icon {
  276. height: 0.9em;
  277. width: 0.9em;
  278. }
  279. /* Hero area */
  280. .hero-area .button:focus,
  281. .hero-area .button:hover {
  282. opacity: 1.0;
  283. }
  284. /* Posts */
  285. #infinite-handle span {
  286. font-size: 22px;
  287. font-size: 2.2rem;
  288. padding: 75px 0;
  289. }
  290. #infinite-handle span:hover {
  291. background-color: #ffed78;
  292. color: #666;
  293. }
  294. .site-footer {
  295. background-color: #d97059;
  296. color: #fff;
  297. }
  298. .site-footer a {
  299. color: #fff;
  300. }
  301. @media all and (max-width: 768px) {
  302. .main-navigation.toggled ul {
  303. border-top-color: #e5e5e5;
  304. }
  305. .main-navigation.toggled li a:hover,
  306. .main-navigation.toggled li a:focus,
  307. .main-navigation.toggled li a:active {
  308. background-color: #4ba3c3;
  309. }
  310. }
  311. @media all and (min-width: 768px) {
  312. .main-navigation li:hover > a,
  313. .main-navigation li.focus > a,
  314. .main-navigation li.current-menu-item > a {
  315. background-color: #60cd8e;
  316. }
  317. .main-navigation li li:hover > a,
  318. .main-navigation li li.focus > a,
  319. .main-navigation li.current-menu-item ~ li.current-menu-item > a:hover {
  320. background-color: #4ba3c3;
  321. }
  322. .main-navigation ul ul > li.current-menu-item:first-child:after {
  323. border-bottom-color: #60cd8e;
  324. }
  325. .main-navigation ul ul ul > li.current-menu-item:first-child:after {
  326. border-bottom-color: transparent;
  327. border-right-color: #60cd8e;
  328. }
  329. .main-navigation ul ul > li:first-child:hover:after,
  330. .main-navigation ul ul > li.current-menu-item:first-child:hover:after {
  331. border-bottom-color: #4ba3c3;
  332. }
  333. .main-navigation ul ul ul > li:first-child:hover:after,
  334. .main-navigation ul ul ul > li.current-menu-item:first-child:hover:after {
  335. border-bottom-color: transparent;
  336. border-right-color: #4ba3c3;
  337. }
  338. }
  339. /* Woocommerce */
  340. .woocommerce-tabs ul.tabs li.active a,
  341. .site-header-cart .cart-contents,
  342. .site-header-cart .count {
  343. color: #d97059;
  344. }
  345. ul.products li.product .woocommerce-loop-product__title {
  346. color: #4ba3c3;
  347. }
  348. .site-header-cart .widget_shopping_cart_content .woocommerce-mini-cart__buttons a,
  349. .site-header-cart:hover>li>a,
  350. .site-header-cart.focus>li>a,
  351. .site-header-cart>li:hover>a,
  352. .site-header-cart>li.focus>a {
  353. background: #60cd8e;
  354. }
  355. .star-rating span:before,
  356. p.stars:hover a:before {
  357. color: #d97059;
  358. }
  359. .woocommerce-MyAccount-navigation li:hover > a,
  360. .woocommerce-MyAccount-navigation li.focus > a,
  361. .woocommerce-tabs ul.tabs li:hover a {
  362. background-color: #60cd8e;
  363. }
  364. .woocommerce-MyAccount-navigation a {
  365. font-size: 15px;
  366. font-size: 1.5rem;
  367. font-weight: 400;
  368. }
  369. .site-header-cart .cart-contents,
  370. .site-header-cart .widget_shopping_cart_content .mini_cart_item .quantity,
  371. .single-product div.product .commentlist .comment-text .meta,
  372. .single-product div.product .commentlist .comment-text .description,
  373. .single-product div.product .product_meta,
  374. .single-product div.product .comment-reply-title,
  375. .single-product div.product .entry-summary .price,
  376. .woocommerce-MyAccount-content address,
  377. .woocommerce-MyAccount-navigation a,
  378. .woocommerce-tabs ul.tabs li a,
  379. .woocommerce.widget .amount,
  380. .woocommerce.widget .reviewer,
  381. .woocommerce.widget .total,
  382. .woocommerce.widget .quantity,
  383. .woocommerce-breadcrumb,
  384. .woocommerce-result-count,
  385. .woocommerce-ordering,
  386. .woocommerce-ordering select,
  387. .onsale {
  388. font-family: Inconsolata, monospace;
  389. }
  390. .single-product div.product .woocommerce-Reviews-title,
  391. ul.products li.product .woocommerce-loop-product__title,
  392. .woocommerce-tabs .panel h2:first-of-type,
  393. .woocommerce-tabs ul.tabs li a,
  394. .upsells.products>h2:first-of-type,
  395. .related.products>h2:first-of-type {
  396. text-transform: none;
  397. }
  398. .a8c-posts-list-item__title {
  399. font-family: 'Karla', 'Helvetica Neue', Helvetica, arial, sans-serif;
  400. text-transform: none;
  401. }
  402. .a8c-posts-list-item__title a {
  403. color: #4ba3c3;
  404. }
  405. .a8c-posts-list-item__featured,
  406. .a8c-posts-list-item__meta {
  407. font-family: Inconsolata, monospace;
  408. font-weight: 400;
  409. }
  410. .a8c-posts-list-item__meta a {
  411. color: #666;
  412. }
  413. .a8c-posts-list-item__title a:hover,
  414. .a8c-posts-list-item__meta a:hover {
  415. color: #222;
  416. }
  417. .a8c-posts-list .a8c-posts-list__view-all {
  418. font-family: Inconsolata, monospace;
  419. }
  420. .a8c-posts-list .a8c-posts-list__view-all:hover {
  421. background-color: #d97059;
  422. }