style-rtl.css 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913
  1. /*
  2. Theme Name: Spearhead
  3. Theme URI: https://wordpress.com/theme/spearhead
  4. Author: Automattic
  5. Author URI: https://automattic.com/
  6. Description: Share your podcast with the world using Spearhead.
  7. Requires at least: 5.5
  8. Tested up to: 5.5
  9. Requires PHP: 5.6.2
  10. Version: 1.3.3
  11. License: GNU General Public License v2 or later
  12. License URI: LICENSE
  13. Template: seedlet
  14. Text Domain: spearhead
  15. Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, jetpack-global-styles
  16. */
  17. /**
  18. * Required Variables
  19. */
  20. .author-link {
  21. font-size: var(--global--font-size-xs);
  22. position: relative;
  23. }
  24. .author-link:after {
  25. background-image: url("data:image/svg+xml,%3Csvg class='svg-icon' width='24' height='24' aria-hidden='true' role='img' focusable='false' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.96954 10.2804L11.9999 15.3107L17.0302 10.2804L15.9695 9.21973L11.9999 13.1894L8.0302 9.21973L6.96954 10.2804Z' fill='%23DB0042'%3E%3C/path%3E%3C/svg%3E");
  26. background-repeat: no-repeat;
  27. background-position: center center;
  28. background-size: 14px 14px;
  29. content: '';
  30. position: absolute;
  31. bottom: 0;
  32. left: -14px;
  33. width: 14px;
  34. height: 14px;
  35. transform: rotate(90deg);
  36. }
  37. /**
  38. * Required Variables
  39. */
  40. /**
  41. * Repsonsive Styles
  42. */
  43. @media only screen and (min-width: 830px) {
  44. :root {
  45. --global--spacing-horizontal: 60px;
  46. --global--spacing-vertical: 35px;
  47. --responsive--aligndefault-width: min(calc(100vw - 2 * var(--global--spacing-horizontal)), 782px);
  48. --responsive--alignwide-width: min(calc(100vw - 2 * var(--global--spacing-horizontal)), 1247px);
  49. --wpadmin-bar--height: 32px;
  50. }
  51. }
  52. .archive .post .entry-title,
  53. .home .post .entry-title {
  54. font-size: var(--global--font-size-lg);
  55. line-height: var(--global--line-height-heading);
  56. margin-bottom: 0;
  57. }
  58. .archive .post-excerpt:not(.sticky),
  59. .home .post-excerpt:not(.sticky) {
  60. color: var(--global--color-secondary);
  61. }
  62. .archive .post-excerpt:not(.sticky) .more-link,
  63. .home .post-excerpt:not(.sticky) .more-link {
  64. color: var(--global--color-secondary);
  65. }
  66. .archive .post-excerpt:not(.sticky) .more-link:hover,
  67. .home .post-excerpt:not(.sticky) .more-link:hover {
  68. color: var(--global--color-primary-hover);
  69. }
  70. .post .entry-header {
  71. display: flex;
  72. flex-direction: column;
  73. }
  74. .post .entry-header .entry-title {
  75. margin-bottom: 0;
  76. }
  77. .post .entry-header .entry-meta {
  78. margin-bottom: var(--global--spacing-vertical);
  79. order: -1;
  80. }
  81. .post .entry-header .entry-meta .posted-on svg {
  82. display: none;
  83. }
  84. .post .entry-header .entry-meta .posted-on a {
  85. color: var(--global--color-foreground-low-contrast);
  86. font-family: var(--global--font-primary);
  87. font-size: var(--global--font-size-md);
  88. }
  89. .site-main > * {
  90. margin: 0 auto;
  91. padding: var(--global--spacing-vertical) 0;
  92. }
  93. .site-main > *:first-child {
  94. padding-top: 0;
  95. }
  96. .site-main article > * {
  97. margin-top: calc( 0.48 * var(--global--spacing-vertical));
  98. margin-bottom: calc( 0.48 * var(--global--spacing-vertical));
  99. /* This overrides Seedlet's style for this breakpoint */
  100. }
  101. @media only screen and (min-width: 482px) {
  102. .site-main article > * {
  103. margin-top: calc( 0.48 * var(--global--spacing-vertical));
  104. margin-bottom: calc( 0.48 * var(--global--spacing-vertical));
  105. }
  106. }
  107. .has-sticky-post .site-main {
  108. background: var(--sticky-posts--alt-color-background);
  109. }
  110. .has-sticky-post .site-main > *:first-child {
  111. margin-top: calc( 0px - var(--global--spacing-vertical));
  112. padding-top: var(--global--spacing-vertical);
  113. }
  114. .post.sticky {
  115. background: var(--sticky-posts--color-background);
  116. padding-bottom: calc(2 * var(--global--spacing-vertical));
  117. }
  118. .post.sticky .entry-title {
  119. font-size: var(--sticky-posts--entry-title-font-size);
  120. }
  121. .post.sticky .entry-content {
  122. font-size: var(--sticky-posts--entry-content-font-size);
  123. }
  124. .post.sticky + .post.sticky {
  125. padding-top: 0;
  126. }
  127. .post.sticky + article:not(.sticky) {
  128. padding-top: calc(2 * var(--global--spacing-vertical));
  129. }
  130. .sticky-post {
  131. display: none;
  132. }
  133. .entry-content .more-link {
  134. color: var(--global--color-foreground);
  135. display: inline-block;
  136. font-size: var(--entry-meta--font-size);
  137. margin-top: 0;
  138. }
  139. .entry-content .more-link:hover {
  140. color: var(--global--color-primary-hover);
  141. }
  142. .entry-content .more-link:after {
  143. content: none;
  144. }
  145. .entry-content .more-link svg {
  146. height: var(--global--font-size-base);
  147. width: var(--global--font-size-base);
  148. margin-right: -0.25em;
  149. display: inline-block;
  150. vertical-align: middle;
  151. transform: rotate(90deg);
  152. }
  153. .entry-content .excerpt-more-link .more-link {
  154. margin-right: 1rem;
  155. }
  156. .single {
  157. color: var(--global--color-foreground);
  158. }
  159. .has-link-color a, a {
  160. border-bottom: 1px solid;
  161. border-color: transparent;
  162. transition: all 0.1s ease;
  163. }
  164. .has-link-color a:hover, a:hover {
  165. color: var(--global--color-primary-hover);
  166. border-color: var(--global--color-primary-hover);
  167. }
  168. .wp-block a,
  169. .entry-content a {
  170. font-weight: var(--global--link-font-weight);
  171. border-color: var(--global--color-primary);
  172. }
  173. .wp-block a:hover,
  174. .entry-content a:hover {
  175. border-color: transparent;
  176. }
  177. .has-main-navigation .site-header {
  178. padding: var(--global--spacing-vertical) 0;
  179. }
  180. @media only screen and (min-width: 830px) {
  181. .has-main-navigation .site-header {
  182. padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);
  183. }
  184. }
  185. .has-main-navigation .site-header a {
  186. border-bottom: 1px solid transparent;
  187. }
  188. @media only screen and (max-width: 829px) {
  189. .has-main-navigation .site-header .site-title {
  190. margin: 0;
  191. }
  192. .has-main-navigation .site-header .site-description {
  193. display: none;
  194. }
  195. }
  196. .has-sticky-post .site-header {
  197. background: var(--sticky-posts--color-background);
  198. }
  199. .site-header {
  200. display: grid;
  201. grid-template-areas: "site-logo site-logo site-logo" "branding branding primary-navigation";
  202. grid-template-columns: 0.5fr 1fr 0.5fr;
  203. grid-template-rows: auto;
  204. grid-column-gap: 16px;
  205. max-width: var(--responsive--alignfull-width);
  206. padding: var(--global--spacing-vertical) 0;
  207. }
  208. @media only screen and (min-width: 830px) {
  209. .site-header {
  210. grid-template-areas: "site-logo site-logo site-logo" "branding primary-navigation primary-navigation";
  211. padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);
  212. }
  213. }
  214. .site-header .site-branding {
  215. grid-area: branding;
  216. padding: var(--global--spacing-horizontal);
  217. text-align: right;
  218. justify-self: flex-start;
  219. align-self: center;
  220. }
  221. @media only screen and (min-width: 830px) {
  222. .site-header .site-branding {
  223. padding: 0;
  224. }
  225. }
  226. .site-header .site-branding .site-logo {
  227. margin-right: 0;
  228. margin-top: 0;
  229. }
  230. .site-header .site-branding .site-title {
  231. margin-bottom: 4px;
  232. }
  233. .site-header .site-branding .site-title > a {
  234. background: inherit;
  235. text-shadow: none;
  236. }
  237. .site-header .site-logo {
  238. grid-area: site-logo;
  239. margin: 0;
  240. }
  241. .site-header .site-logo a {
  242. display: block;
  243. }
  244. .site-header .site-logo a:hover {
  245. border-color: transparent;
  246. }
  247. .site-header .primary-navigation-wrapper {
  248. margin-bottom: 6px;
  249. }
  250. .site-header .primary-navigation {
  251. margin-top: 0;
  252. }
  253. @media only screen and (max-width: 829px) {
  254. .admin-bar .site-header .primary-navigation .primary-menu-container {
  255. top: 114px;
  256. }
  257. .site-header .primary-navigation .primary-menu-container a {
  258. color: var(--primary-nav--dropdown-color-link);
  259. }
  260. .site-header .primary-navigation .social-navigation a {
  261. color: var(--primary-nav--dropdown-color-link);
  262. }
  263. }
  264. .site-header .primary-navigation button#primary-close-menu {
  265. color: var(--global--color-secondary);
  266. margin: 0;
  267. padding: var(--global--spacing-horizontal);
  268. position: fixed;
  269. top: 0;
  270. left: 0;
  271. }
  272. .admin-bar .site-header .primary-navigation button#primary-close-menu {
  273. top: 46px;
  274. }
  275. .site-header .primary-navigation button#primary-close-menu:hover {
  276. color: var(--global--color-primary);
  277. }
  278. .site-header .primary-navigation .menu-item-has-children > .svg-icon {
  279. margin-top: -2px;
  280. margin-right: -2px;
  281. }
  282. .site-header .primary-navigation > div > ul li, .site-header .woo-navigation > div > ul li {
  283. color: var(--global--color-secondary);
  284. }
  285. .site-header .primary-navigation > div > ul li a:hover, .site-header .woo-navigation > div > ul li a:hover {
  286. border-color: transparent;
  287. color: var(--global--color-primary);
  288. }
  289. .site-header > .site-branding, .site-header > nav {
  290. margin: 0;
  291. }
  292. .site-header .social-navigation {
  293. flex-basis: 100%;
  294. }
  295. .site-header .social-navigation ul {
  296. justify-content: flex-start;
  297. flex-wrap: nowrap;
  298. margin-top: var(--social-nav--padding);
  299. }
  300. .site-header .social-navigation ul li {
  301. margin: 0;
  302. padding: 0 0 0 var(--social-nav--padding);
  303. }
  304. @media only screen and (min-width: 830px) {
  305. .site-header .social-navigation {
  306. flex-basis: auto;
  307. }
  308. .site-header .social-navigation ul {
  309. justify-content: flex-end;
  310. margin-top: 0;
  311. }
  312. .site-header .social-navigation ul li {
  313. padding: 0 var(--social-nav--padding) 0 0;
  314. }
  315. }
  316. .site-header .social-navigation .menu-item {
  317. width: auto;
  318. }
  319. .site-header .social-navigation .menu-item > a {
  320. padding: 0;
  321. }
  322. .site-header .social-navigation .menu-item > a:hover {
  323. border-color: var(--primary-nav--color-border);
  324. color: var(--primary-nav--color-link-hover);
  325. }
  326. .has-title-and-tagline .site-logo {
  327. margin: 0;
  328. }
  329. @media only screen and (min-width: 830px) {
  330. .has-title-and-tagline .site-logo {
  331. padding-bottom: var(--global--spacing-vertical);
  332. }
  333. }
  334. .has-title-and-tagline .site-branding {
  335. align-self: flex-start;
  336. }
  337. .primary-navigation-open .site-header {
  338. padding-top: 0;
  339. }
  340. .primary-navigation-open .has-title-and-tagline .site-logo {
  341. display: none;
  342. }
  343. .site-header div.menu-button-container button#primary-open-menu {
  344. padding: var(--global--spacing-horizontal);
  345. margin-top: 0;
  346. margin-left: 0;
  347. }
  348. .site-header div.menu-button-container button#primary-open-menu:before {
  349. margin: 0;
  350. }
  351. .site-header div.menu-button-container #woo-open-menu {
  352. margin-right: auto;
  353. }
  354. .primary-navigation-open .site-header div.menu-button-container {
  355. margin: 0;
  356. }
  357. .site-footer > .site-info {
  358. font-family: var(--global--font-secondary);
  359. }
  360. .site-footer > .site-info a.site-name {
  361. color: var(--global--color-primary);
  362. font-family: var(--global--font-primary);
  363. }
  364. .site-footer > .site-info a:hover {
  365. color: var(--global--color-primary-hover);
  366. }
  367. .archive .page-header {
  368. line-height: var(--heading--line-height-h1);
  369. margin-bottom: 16px;
  370. }
  371. .archive .page-title {
  372. font-size: var(--heading--font-size-h1);
  373. color: var(--entry-header--color);
  374. }
  375. .archive .site-main > article:first-of-type {
  376. margin-top: 0;
  377. }
  378. ul.wp-block-categories,
  379. .wp-block-categories ul {
  380. list-style-type: none;
  381. margin-top: 0;
  382. padding: 0;
  383. }
  384. .wp-block-categories .cat-item {
  385. margin: calc( 0.3 * var(--global--spacing-vertical)) 0;
  386. }
  387. .wp-block-categories a {
  388. color: var(--entry-header--color);
  389. font-size: var(--global--font-size-lg);
  390. }
  391. .wp-block-categories a:hover {
  392. border-color: transparent;
  393. color: var(--global--color-primary);
  394. }
  395. .wp-block-latest-posts > li:not(.is-grid) {
  396. margin: calc( 0.3 * var(--global--spacing-vertical)) 0;
  397. }
  398. .wp-block-latest-posts > li > a {
  399. color: var(--global--color-foreground-low-contrast);
  400. font-size: var(--global--font-size-lg);
  401. font-weight: 500;
  402. }
  403. .wp-block-latest-posts > li > a:hover {
  404. border-color: transparent;
  405. color: var(--global--color-primary);
  406. }
  407. .podcast-links-list-block {
  408. color: var(--entry-header--color);
  409. }
  410. .podcast-links-list-block a {
  411. margin: 0 7px 0 3px;
  412. }
  413. .podcast-links-list-block a:first-child {
  414. margin-right: 0;
  415. }
  416. .wp-block-navigation .wp-block-navigation__container p {
  417. line-height: 2.5;
  418. }
  419. .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-link .wp-block-navigation-link__content {
  420. color: var(--wp--style--color--link, var(--global--color-primary));
  421. line-height: 1;
  422. margin: calc( var(--primary-nav--padding) - 1px);
  423. padding: 0;
  424. }
  425. .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-link .wp-block-navigation-link__content .wp-block-navigation-link__label {
  426. font-size: var(--global--font-size-root);
  427. font-weight: var(--global--link-font-weight);
  428. }
  429. .jp-relatedposts-i2 .jp-related-posts-i2__post,
  430. .wp-block-jetpack-related-posts .jp-related-posts-i2__post {
  431. margin: 0 0 0 var(--global--spacing-horizontal);
  432. }
  433. .jp-relatedposts-i2 .jp-related-posts-i2__row,
  434. .wp-block-jetpack-related-posts .jp-related-posts-i2__row {
  435. margin: auto;
  436. }
  437. .jp-relatedposts-i2 .jp-related-posts-i2__post-link,
  438. .wp-block-jetpack-related-posts .jp-related-posts-i2__post-link {
  439. font-weight: var(--global--font-weight);
  440. font-size: var(--global--font-size-lg);
  441. line-height: var(--global--line-height-body);
  442. width: fit-content;
  443. }
  444. .jp-relatedposts-i2 .jp-related-posts-i2__post-link a,
  445. .wp-block-jetpack-related-posts .jp-related-posts-i2__post-link a {
  446. color: var(--global--color-foreground);
  447. }
  448. .jp-relatedposts-i2 .jp-related-posts-i2__post-date,
  449. .jp-relatedposts-i2 .jp-related-posts-i2__post-context,
  450. .wp-block-jetpack-related-posts .jp-related-posts-i2__post-date,
  451. .wp-block-jetpack-related-posts .jp-related-posts-i2__post-context {
  452. font-family: var(--global--font-primary);
  453. font-size: var(--global--font-size-xs);
  454. text-transform: uppercase;
  455. color: var(--global--color-foreground-low-contrast);
  456. }
  457. /* The built in Jetpack related posts has different markup */
  458. #jp-relatedposts .jp-relatedposts-items p {
  459. font-size: var(--global--font-size-xs);
  460. }
  461. #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date,
  462. #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-context {
  463. opacity: 1;
  464. line-height: var(--global--line-height-body);
  465. color: var(--global--color-foreground-low-contrast);
  466. }
  467. #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title {
  468. font-size: var(--global--font-size-lg);
  469. line-height: var(--heading--line-height-h2);
  470. margin-bottom: calc(0.3 * var(--global--spacing-vertical));
  471. }
  472. #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a {
  473. color: var(--global--color-foreground);
  474. }
  475. #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a:hover {
  476. text-decoration: none;
  477. }
  478. #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:hover .jp-relatedposts-post-title a {
  479. text-decoration: none;
  480. }
  481. #jp-relatedposts h3.jp-relatedposts-headline {
  482. font-size: var(--global--font-size-base);
  483. margin-bottom: var(--global--spacing-vertical);
  484. }
  485. #jp-relatedposts h3.jp-relatedposts-headline em {
  486. font-weight: var(--global--font-weight);
  487. }
  488. #jp-relatedposts h3.jp-relatedposts-headline em:before {
  489. content: none;
  490. }
  491. .wp-block-newspack-blocks-homepage-articles.wpnbha article,
  492. .wp-block-a8c-blog-posts.wpnbha article {
  493. margin: 0 auto;
  494. padding: var(--global--spacing-vertical) 0;
  495. }
  496. .wp-block-newspack-blocks-homepage-articles article .entry-wrapper,
  497. .wp-block-a8c-blog-posts article .entry-wrapper {
  498. margin: 0;
  499. }
  500. .wp-block-newspack-blocks-homepage-articles article .entry-wrapper p,
  501. .wp-block-a8c-blog-posts article .entry-wrapper p {
  502. margin-top: 0;
  503. margin-bottom: 0;
  504. }
  505. .wp-block-newspack-blocks-homepage-articles article .entry-title,
  506. .wp-block-a8c-blog-posts article .entry-title {
  507. margin-bottom: calc( 0.48 * var(--global--spacing-vertical));
  508. }
  509. .wp-block-newspack-blocks-homepage-articles article .entry-title a,
  510. .wp-block-a8c-blog-posts article .entry-title a {
  511. font-size: var(--global--font-size-lg);
  512. color: var(--entry-header--color-link);
  513. font-weight: var(--heading--font-weight);
  514. }
  515. .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover, .wp-block-newspack-blocks-homepage-articles article .entry-title a:focus,
  516. .wp-block-a8c-blog-posts article .entry-title a:hover,
  517. .wp-block-a8c-blog-posts article .entry-title a:focus {
  518. color: var(--entry-header--color-hover);
  519. }
  520. .wp-block-newspack-blocks-homepage-articles article .entry-title a:active,
  521. .wp-block-a8c-blog-posts article .entry-title a:active {
  522. color: var(--entry-header--color-link);
  523. }
  524. .wp-block-newspack-blocks-homepage-articles article .more-link,
  525. .wp-block-a8c-blog-posts article .more-link {
  526. margin-top: 0;
  527. }
  528. .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
  529. padding: 0;
  530. }
  531. .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
  532. padding: var(--button--padding-vertical) var(--button--padding-horizontal);
  533. border-top-right-radius: 0;
  534. border-bottom-right-radius: 0;
  535. margin: -1px 0 -1px -1px;
  536. }
  537. .wp-block-search.wp-block-search__button-inside:not(.wp-block-search__icon-button) .wp-block-search__inside-wrapper {
  538. border-radius: var(--button--border-radius);
  539. }
  540. .wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__inside-wrapper {
  541. flex-direction: row-reverse;
  542. padding-right: 0;
  543. border: none;
  544. border-bottom: var(--form--border-width) solid var(--form--border-color);
  545. }
  546. .wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__input {
  547. border: none;
  548. padding: 0 10px 0 0;
  549. }
  550. .wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button.has-icon {
  551. margin-right: 0;
  552. background: transparent;
  553. color: var(--form--border-color);
  554. padding: 0;
  555. border: none;
  556. }
  557. .wp-block-search .wp-block-search__inside-wrapper {
  558. color: var(--global--color-secondary);
  559. align-items: center;
  560. }
  561. .wp-block-search .wp-block-search__label {
  562. margin-bottom: 1rem;
  563. }
  564. .wp-block-search .wp-block-search__input {
  565. color: var(--form--color-text);
  566. margin-left: calc( .1 * var(--global--spacing-horizontal));
  567. border: none;
  568. border-bottom: var(--form--border-width) solid var(--form--border-color);
  569. }
  570. body[class*="woocommerce"] #page .site-header .primary-navigation {
  571. flex-basis: 50%;
  572. }
  573. body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs {
  574. padding-right: calc( 0.3 * var(--global--spacing-horizontal));
  575. margin-bottom: calc( 2 * var(--global--spacing-vertical));
  576. }
  577. body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li {
  578. background-color: var(--global--color-foreground-low-contrast);
  579. }
  580. body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li:before {
  581. box-shadow: -2px 2px 0 var(--global--color-foreground-low-contrast);
  582. }
  583. body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li:after {
  584. box-shadow: 2px 2px 0 var(--global--color-foreground-low-contrast);
  585. }
  586. body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li a {
  587. color: var(--button--color-text);
  588. padding: var(--button--padding-vertical) var(--button--padding-horizontal);
  589. }
  590. body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li a:hover {
  591. color: var(--button--color-text-hover);
  592. }
  593. body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li.active a {
  594. color: var(--global--color-foreground);
  595. }
  596. body[class*="woocommerce"] #page .woocommerce-tabs .panel {
  597. margin-bottom: calc( 2 * var(--global--spacing-vertical));
  598. }
  599. body[class*="woocommerce"] #page .woocommerce-tabs .panel h2 {
  600. font-family: var(--global--font-secondary);
  601. }
  602. #content .wc-block-grid .wc-block-grid__product .wc-block-grid__product-onsale {
  603. top: -0.5em;
  604. left: -0.5em;
  605. }
  606. #content .wc-block-grid .wc-block-grid__product .wc-block-grid__product-title {
  607. font-family: var(--global--font-secondary);
  608. }
  609. #content .wc-block-grid .wc-block-grid__product .wc-block-grid__product-price {
  610. color: var(--global--color-foreground);
  611. }
  612. #content .wc-block-featured-product .wc-block-featured-product__price {
  613. font-size: var(--global--font-size-sm);
  614. }
  615. .wc-block-components-review-list-item__author + .wc-block-components-review-list-item__published-date::before {
  616. content: none;
  617. }
  618. .wc-block-components-review-list-item__product + .wc-block-components-review-list-item__author,
  619. .wc-block-components-review-list-item__published-date {
  620. font-size: var(--global--font-size-xs);
  621. }
  622. .single-product #page #woocommerce-wrapper div.product div.summary p.price {
  623. color: var(--global--color-foreground);
  624. font-size: var(--global--font-size-lg);
  625. }
  626. .single-product #page #woocommerce-wrapper div.product form.cart div.quantity input[type=number] {
  627. line-height: var(--global--font-size-xl);
  628. padding: calc(0.5 * var(--button--padding-vertical)) var(--form--spacing-unit);
  629. }
  630. .single-product #page #woocommerce-wrapper div.product form.cart button {
  631. line-height: var(--global--font-size-xl);
  632. padding: calc(0.5 * var(--button--padding-vertical) + 1px) var(--button--padding-horizontal);
  633. }
  634. .product_meta {
  635. color: var(--global--color-foreground-low-contrast);
  636. }
  637. .screen-reader-text, .search-form input[type="submit"] {
  638. /* Text meant only for screen readers. */
  639. border: 0;
  640. clip: rect(1px, 1px, 1px, 1px);
  641. clip-path: inset(50%);
  642. height: 1px;
  643. margin: -1px;
  644. overflow: hidden;
  645. padding: 0;
  646. position: absolute !important;
  647. width: 1px;
  648. word-wrap: normal !important;
  649. /* Many screen reader and browser combinations announce broken words as they would appear visually. */
  650. }
  651. .screen-reader-text:focus, .search-form input:focus[type="submit"] {
  652. background-color: var(--global--color-background);
  653. border-radius: 3px;
  654. box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  655. clip: auto !important;
  656. clip-path: none;
  657. color: var(--global--color-foreground);
  658. display: block;
  659. font-size: var(--global--font-size-md);
  660. font-weight: bold;
  661. height: auto;
  662. right: 5px;
  663. line-height: normal;
  664. padding: 15px 23px 14px;
  665. text-decoration: none;
  666. top: 5px;
  667. width: auto;
  668. z-index: 100000;
  669. /* Above WP toolbar. */
  670. }
  671. /* Do not show the outline on the skip link target. */
  672. #content[tabindex="-1"]:focus {
  673. outline: 0;
  674. }
  675. .search-results .site-main > * {
  676. padding: var(--global--spacing-vertical) 0;
  677. }
  678. .search-results .search-form {
  679. padding-bottom: 0;
  680. margin-bottom: var(--global--spacing-vertical);
  681. }
  682. .search-results .entry-title {
  683. font-size: var(--heading--font-size-h2);
  684. }
  685. .search-results .entry-header {
  686. margin-bottom: 0;
  687. }
  688. .search-form {
  689. border-bottom: var(--form--border-width) solid var(--form--border-color);
  690. flex-direction: row-reverse;
  691. }
  692. .search-form > label {
  693. margin-left: 0;
  694. padding-right: 30px;
  695. position: relative;
  696. }
  697. .search-form > label:before {
  698. content: "";
  699. position: absolute;
  700. top: 0;
  701. right: 0;
  702. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='search-icon' class='search-icon' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z'%3E%3C/path%3E%3C/svg%3E");
  703. background-repeat: no-repeat;
  704. background-position: center center;
  705. width: 24px;
  706. height: 100%;
  707. }
  708. .search-form input[type="search"] {
  709. border: none;
  710. padding-top: var(--button--padding-vertical);
  711. padding-bottom: var(--button--padding-vertical);
  712. font-size: var(--global--font-size-sm);
  713. color: var(--entry-header--color);
  714. }
  715. .search-form input[type="submit"] {
  716. background: none;
  717. color: var(--entry-header--color);
  718. }
  719. .site-main > article > .entry-footer {
  720. margin-top: calc( var(--global--spacing-vertical) / 2);
  721. padding-top: 0;
  722. border: none;
  723. }
  724. .widget ul {
  725. padding: 0;
  726. }
  727. #content .wc-block-grid .wc-block-grid__product-onsale {
  728. font-family: var(--global--font-secondary);
  729. }
  730. body[class*="woocommerce"] #page span.onsale {
  731. background-color: var(--global--color-background);
  732. border: 1px solid var(--global--color-foreground);
  733. border-radius: 0;
  734. font-family: var(--global--font-secondary);
  735. line-height: 1.6;
  736. min-width: 0;
  737. min-height: 0;
  738. padding: 1em;
  739. }
  740. body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget {
  741. max-width: 100%;
  742. }
  743. #woocommerce-wrapper ul.products li.product .price {
  744. color: var(--global--color-foreground);
  745. }
  746. @media only screen and (min-width: 830px) {
  747. .woo-navigation {
  748. padding-top: var(--global--spacing-vertical);
  749. }
  750. }