style-rtl.css 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919
  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.5
  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. text-decoration: 1px solid underline var(--global--color-primary);
  139. }
  140. .entry-content .more-link:hover {
  141. color: var(--global--color-primary-hover);
  142. }
  143. .entry-content .more-link:after {
  144. content: none;
  145. }
  146. .entry-content .more-link svg {
  147. height: var(--global--font-size-base);
  148. width: var(--global--font-size-base);
  149. margin-right: -0.25em;
  150. display: inline-block;
  151. vertical-align: middle;
  152. transform: rotate(90deg);
  153. }
  154. .entry-content .excerpt-more-link .more-link {
  155. margin-right: 1rem;
  156. }
  157. .single {
  158. color: var(--global--color-foreground);
  159. }
  160. .has-link-color a, a {
  161. border-color: transparent;
  162. transition: all 0.1s ease;
  163. text-decoration: none;
  164. }
  165. .has-link-color a:hover, a:hover {
  166. color: var(--global--color-primary-hover);
  167. text-decoration: 1px solid underline;
  168. }
  169. .wp-block a,
  170. .entry-content a {
  171. font-weight: var(--global--link-font-weight);
  172. border-color: var(--global--color-primary);
  173. }
  174. .wp-block a:hover,
  175. .entry-content a:hover {
  176. border-color: transparent;
  177. }
  178. .has-main-navigation .site-header {
  179. padding: var(--global--spacing-vertical) 0;
  180. }
  181. @media only screen and (min-width: 830px) {
  182. .has-main-navigation .site-header {
  183. padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);
  184. }
  185. }
  186. .has-main-navigation .site-header a {
  187. text-decoration: none;
  188. }
  189. @media only screen and (max-width: 829px) {
  190. .has-main-navigation .site-header .site-title {
  191. margin: 0;
  192. }
  193. .has-main-navigation .site-header .site-description {
  194. display: none;
  195. }
  196. }
  197. .has-sticky-post .site-header {
  198. background: var(--sticky-posts--color-background);
  199. }
  200. .site-header {
  201. display: grid;
  202. grid-template-areas: "site-logo site-logo site-logo" "branding branding primary-navigation";
  203. grid-template-columns: 0.5fr 1fr 0.5fr;
  204. grid-template-rows: auto;
  205. grid-column-gap: 16px;
  206. max-width: var(--responsive--alignfull-width);
  207. padding: var(--global--spacing-vertical) 0;
  208. }
  209. @media only screen and (min-width: 830px) {
  210. .site-header {
  211. grid-template-areas: "site-logo site-logo site-logo" "branding primary-navigation primary-navigation";
  212. padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);
  213. }
  214. }
  215. .site-header .site-branding {
  216. grid-area: branding;
  217. padding: var(--global--spacing-horizontal);
  218. text-align: right;
  219. justify-self: flex-start;
  220. align-self: center;
  221. }
  222. @media only screen and (min-width: 830px) {
  223. .site-header .site-branding {
  224. padding: 0;
  225. }
  226. }
  227. .site-header .site-branding .site-logo {
  228. margin-right: 0;
  229. margin-top: 0;
  230. }
  231. .site-header .site-branding .site-title {
  232. margin-bottom: 4px;
  233. }
  234. .site-header .site-branding .site-title > a {
  235. background: inherit;
  236. text-decoration: none;
  237. text-shadow: none;
  238. }
  239. .site-header .site-logo {
  240. grid-area: site-logo;
  241. margin: 0;
  242. }
  243. .site-header .site-logo a {
  244. display: block;
  245. }
  246. .site-header .site-logo a:hover {
  247. border-color: transparent;
  248. }
  249. .site-header .primary-navigation-wrapper {
  250. margin-bottom: 6px;
  251. }
  252. .site-header .primary-navigation {
  253. margin-top: 0;
  254. }
  255. @media only screen and (max-width: 829px) {
  256. .admin-bar .site-header .primary-navigation .primary-menu-container {
  257. top: 114px;
  258. }
  259. .site-header .primary-navigation .primary-menu-container a {
  260. color: var(--primary-nav--dropdown-color-link);
  261. }
  262. .site-header .primary-navigation .social-navigation a {
  263. color: var(--primary-nav--dropdown-color-link);
  264. }
  265. }
  266. .site-header .primary-navigation button#primary-close-menu {
  267. color: var(--global--color-secondary);
  268. margin: 0;
  269. padding: var(--global--spacing-horizontal);
  270. position: fixed;
  271. top: 0;
  272. left: 0;
  273. }
  274. .admin-bar .site-header .primary-navigation button#primary-close-menu {
  275. top: 46px;
  276. }
  277. .site-header .primary-navigation button#primary-close-menu:hover {
  278. color: var(--global--color-primary);
  279. }
  280. .site-header .primary-navigation .menu-item-has-children > .svg-icon {
  281. margin-top: -2px;
  282. margin-right: -2px;
  283. }
  284. .site-header .primary-navigation > div > ul li, .site-header .woo-navigation > div > ul li {
  285. color: var(--global--color-secondary);
  286. }
  287. .site-header .primary-navigation > div > ul li a:hover, .site-header .woo-navigation > div > ul li a:hover {
  288. border-color: transparent;
  289. color: var(--global--color-primary);
  290. }
  291. .site-header > .site-branding, .site-header > nav {
  292. margin: 0;
  293. }
  294. .site-header .social-navigation {
  295. flex-basis: 100%;
  296. }
  297. .site-header .social-navigation ul {
  298. justify-content: flex-start;
  299. flex-wrap: nowrap;
  300. margin-top: var(--social-nav--padding);
  301. }
  302. .site-header .social-navigation ul li {
  303. margin: 0;
  304. padding: 0 0 0 var(--social-nav--padding);
  305. }
  306. @media only screen and (min-width: 830px) {
  307. .site-header .social-navigation {
  308. flex-basis: auto;
  309. }
  310. .site-header .social-navigation ul {
  311. justify-content: flex-end;
  312. margin-top: 0;
  313. }
  314. .site-header .social-navigation ul li {
  315. padding: 0 var(--social-nav--padding) 0 0;
  316. }
  317. }
  318. .site-header .social-navigation .menu-item {
  319. width: auto;
  320. }
  321. .site-header .social-navigation .menu-item > a {
  322. padding: 0;
  323. }
  324. .site-header .social-navigation .menu-item > a:hover {
  325. border-color: var(--primary-nav--color-border);
  326. color: var(--primary-nav--color-link-hover);
  327. }
  328. .has-title-and-tagline .site-logo {
  329. margin: 0;
  330. }
  331. @media only screen and (min-width: 830px) {
  332. .has-title-and-tagline .site-logo {
  333. padding-bottom: var(--global--spacing-vertical);
  334. }
  335. }
  336. .has-title-and-tagline .site-branding {
  337. align-self: flex-start;
  338. }
  339. .primary-navigation-open .site-header {
  340. padding-top: 0;
  341. }
  342. .primary-navigation-open .has-title-and-tagline .site-logo {
  343. display: none;
  344. }
  345. .site-header div.menu-button-container button#primary-open-menu {
  346. padding: var(--global--spacing-horizontal);
  347. margin-top: 0;
  348. margin-left: 0;
  349. }
  350. .site-header div.menu-button-container button#primary-open-menu:before {
  351. margin: 0;
  352. }
  353. .site-header div.menu-button-container #woo-open-menu {
  354. margin-right: auto;
  355. }
  356. .primary-navigation-open .site-header div.menu-button-container {
  357. margin: 0;
  358. }
  359. .site-footer .menu-item a {
  360. border-bottom: none;
  361. }
  362. .site-footer > .site-info {
  363. font-family: var(--global--font-secondary);
  364. }
  365. .site-footer > .site-info a.site-name {
  366. color: var(--global--color-primary);
  367. font-family: var(--global--font-primary);
  368. }
  369. .site-footer > .site-info a:hover {
  370. color: var(--global--color-primary-hover);
  371. }
  372. .archive .page-header {
  373. line-height: var(--heading--line-height-h1);
  374. margin-bottom: 16px;
  375. }
  376. .archive .page-title {
  377. font-size: var(--heading--font-size-h1);
  378. color: var(--entry-header--color);
  379. }
  380. .archive .site-main > article:first-of-type {
  381. margin-top: 0;
  382. }
  383. ul.wp-block-categories,
  384. .wp-block-categories ul {
  385. list-style-type: none;
  386. margin-top: 0;
  387. padding: 0;
  388. }
  389. .wp-block-categories .cat-item {
  390. margin: calc( 0.3 * var(--global--spacing-vertical)) 0;
  391. }
  392. .wp-block-categories a {
  393. color: var(--entry-header--color);
  394. font-size: var(--global--font-size-lg);
  395. }
  396. .wp-block-categories a:hover {
  397. border-color: transparent;
  398. color: var(--global--color-primary);
  399. }
  400. .wp-block-latest-posts > li:not(.is-grid) {
  401. margin: calc( 0.3 * var(--global--spacing-vertical)) 0;
  402. }
  403. .wp-block-latest-posts > li > a {
  404. color: var(--global--color-foreground-low-contrast);
  405. font-size: var(--global--font-size-lg);
  406. font-weight: 500;
  407. }
  408. .wp-block-latest-posts > li > a:hover {
  409. border-color: transparent;
  410. color: var(--global--color-primary);
  411. }
  412. .podcast-links-list-block {
  413. color: var(--entry-header--color);
  414. }
  415. .podcast-links-list-block a {
  416. margin: 0 7px 0 3px;
  417. }
  418. .podcast-links-list-block a:first-child {
  419. margin-right: 0;
  420. }
  421. .wp-block-navigation .wp-block-navigation__container p {
  422. line-height: 2.5;
  423. }
  424. .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-link .wp-block-navigation-link__content {
  425. color: var(--wp--style--color--link, var(--global--color-primary));
  426. line-height: 1;
  427. margin: calc( var(--primary-nav--padding) - 1px);
  428. padding: 0;
  429. }
  430. .wp-block-navigation .wp-block-navigation__container .wp-block-navigation-link .wp-block-navigation-link__content .wp-block-navigation-link__label {
  431. font-size: var(--global--font-size-root);
  432. font-weight: var(--global--link-font-weight);
  433. }
  434. .jp-relatedposts-i2 .jp-related-posts-i2__post,
  435. .wp-block-jetpack-related-posts .jp-related-posts-i2__post {
  436. margin: 0 0 0 var(--global--spacing-horizontal);
  437. }
  438. .jp-relatedposts-i2 .jp-related-posts-i2__row,
  439. .wp-block-jetpack-related-posts .jp-related-posts-i2__row {
  440. margin: auto;
  441. }
  442. .jp-relatedposts-i2 .jp-related-posts-i2__post-link,
  443. .wp-block-jetpack-related-posts .jp-related-posts-i2__post-link {
  444. font-weight: var(--global--font-weight);
  445. font-size: var(--global--font-size-lg);
  446. line-height: var(--global--line-height-body);
  447. width: fit-content;
  448. }
  449. .jp-relatedposts-i2 .jp-related-posts-i2__post-link a,
  450. .wp-block-jetpack-related-posts .jp-related-posts-i2__post-link a {
  451. color: var(--global--color-foreground);
  452. }
  453. .jp-relatedposts-i2 .jp-related-posts-i2__post-date,
  454. .jp-relatedposts-i2 .jp-related-posts-i2__post-context,
  455. .wp-block-jetpack-related-posts .jp-related-posts-i2__post-date,
  456. .wp-block-jetpack-related-posts .jp-related-posts-i2__post-context {
  457. font-family: var(--global--font-primary);
  458. font-size: var(--global--font-size-xs);
  459. text-transform: uppercase;
  460. color: var(--global--color-foreground-low-contrast);
  461. }
  462. /* The built in Jetpack related posts has different markup */
  463. #jp-relatedposts .jp-relatedposts-items p {
  464. font-size: var(--global--font-size-xs);
  465. }
  466. #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date,
  467. #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-context {
  468. opacity: 1;
  469. line-height: var(--global--line-height-body);
  470. color: var(--global--color-foreground-low-contrast);
  471. }
  472. #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title {
  473. font-size: var(--global--font-size-lg);
  474. line-height: var(--heading--line-height-h2);
  475. margin-bottom: calc(0.3 * var(--global--spacing-vertical));
  476. }
  477. #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a {
  478. color: var(--global--color-foreground);
  479. }
  480. #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a:hover {
  481. text-decoration: none;
  482. }
  483. #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:hover .jp-relatedposts-post-title a {
  484. text-decoration: none;
  485. }
  486. #jp-relatedposts h3.jp-relatedposts-headline {
  487. font-size: var(--global--font-size-base);
  488. margin-bottom: var(--global--spacing-vertical);
  489. }
  490. #jp-relatedposts h3.jp-relatedposts-headline em {
  491. font-weight: var(--global--font-weight);
  492. }
  493. #jp-relatedposts h3.jp-relatedposts-headline em:before {
  494. content: none;
  495. }
  496. .wp-block-newspack-blocks-homepage-articles.wpnbha article,
  497. .wp-block-a8c-blog-posts.wpnbha article {
  498. margin: 0 auto;
  499. padding: var(--global--spacing-vertical) 0;
  500. }
  501. .wp-block-newspack-blocks-homepage-articles article .entry-wrapper,
  502. .wp-block-a8c-blog-posts article .entry-wrapper {
  503. margin: 0;
  504. }
  505. .wp-block-newspack-blocks-homepage-articles article .entry-wrapper p,
  506. .wp-block-a8c-blog-posts article .entry-wrapper p {
  507. margin-top: 0;
  508. margin-bottom: 0;
  509. }
  510. .wp-block-newspack-blocks-homepage-articles article .entry-title,
  511. .wp-block-a8c-blog-posts article .entry-title {
  512. margin-bottom: calc( 0.48 * var(--global--spacing-vertical));
  513. }
  514. .wp-block-newspack-blocks-homepage-articles article .entry-title a,
  515. .wp-block-a8c-blog-posts article .entry-title a {
  516. font-size: var(--global--font-size-lg);
  517. color: var(--entry-header--color-link);
  518. font-weight: var(--heading--font-weight);
  519. }
  520. .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover, .wp-block-newspack-blocks-homepage-articles article .entry-title a:focus,
  521. .wp-block-a8c-blog-posts article .entry-title a:hover,
  522. .wp-block-a8c-blog-posts article .entry-title a:focus {
  523. color: var(--entry-header--color-hover);
  524. }
  525. .wp-block-newspack-blocks-homepage-articles article .entry-title a:active,
  526. .wp-block-a8c-blog-posts article .entry-title a:active {
  527. color: var(--entry-header--color-link);
  528. }
  529. .wp-block-newspack-blocks-homepage-articles article .more-link,
  530. .wp-block-a8c-blog-posts article .more-link {
  531. margin-top: 0;
  532. }
  533. .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
  534. padding: 0;
  535. }
  536. .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
  537. padding: var(--button--padding-vertical) var(--button--padding-horizontal);
  538. border-top-right-radius: 0;
  539. border-bottom-right-radius: 0;
  540. margin: -1px 0 -1px -1px;
  541. }
  542. .wp-block-search.wp-block-search__button-inside:not(.wp-block-search__icon-button) .wp-block-search__inside-wrapper {
  543. border-radius: var(--button--border-radius);
  544. }
  545. .wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__inside-wrapper {
  546. flex-direction: row-reverse;
  547. padding-right: 0;
  548. border: none;
  549. border-bottom: var(--form--border-width) solid var(--form--border-color);
  550. }
  551. .wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__input {
  552. border: none;
  553. padding: 0 10px 0 0;
  554. }
  555. .wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button.has-icon {
  556. margin-right: 0;
  557. background: transparent;
  558. color: var(--form--border-color);
  559. padding: 0;
  560. border: none;
  561. }
  562. .wp-block-search .wp-block-search__inside-wrapper {
  563. color: var(--global--color-secondary);
  564. align-items: center;
  565. }
  566. .wp-block-search .wp-block-search__label {
  567. margin-bottom: 1rem;
  568. }
  569. .wp-block-search .wp-block-search__input {
  570. color: var(--form--color-text);
  571. margin-left: calc( .1 * var(--global--spacing-horizontal));
  572. border: none;
  573. border-bottom: var(--form--border-width) solid var(--form--border-color);
  574. }
  575. body[class*="woocommerce"] #page .site-header .primary-navigation {
  576. flex-basis: 50%;
  577. }
  578. body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs {
  579. padding-right: calc( 0.3 * var(--global--spacing-horizontal));
  580. margin-bottom: calc( 2 * var(--global--spacing-vertical));
  581. }
  582. body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li {
  583. background-color: var(--global--color-foreground-low-contrast);
  584. }
  585. body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li:before {
  586. box-shadow: -2px 2px 0 var(--global--color-foreground-low-contrast);
  587. }
  588. body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li:after {
  589. box-shadow: 2px 2px 0 var(--global--color-foreground-low-contrast);
  590. }
  591. body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li a {
  592. color: var(--button--color-text);
  593. padding: var(--button--padding-vertical) var(--button--padding-horizontal);
  594. }
  595. body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li a:hover {
  596. color: var(--button--color-text-hover);
  597. }
  598. body[class*="woocommerce"] #page .woocommerce-tabs ul.tabs li.active a {
  599. color: var(--global--color-foreground);
  600. }
  601. body[class*="woocommerce"] #page .woocommerce-tabs .panel {
  602. margin-bottom: calc( 2 * var(--global--spacing-vertical));
  603. }
  604. body[class*="woocommerce"] #page .woocommerce-tabs .panel h2 {
  605. font-family: var(--global--font-secondary);
  606. }
  607. #content .wc-block-grid .wc-block-grid__product .wc-block-grid__product-onsale {
  608. top: -0.5em;
  609. left: -0.5em;
  610. }
  611. #content .wc-block-grid .wc-block-grid__product .wc-block-grid__product-title {
  612. font-family: var(--global--font-secondary);
  613. }
  614. #content .wc-block-grid .wc-block-grid__product .wc-block-grid__product-price {
  615. color: var(--global--color-foreground);
  616. }
  617. #content .wc-block-featured-product .wc-block-featured-product__price {
  618. font-size: var(--global--font-size-sm);
  619. }
  620. .wc-block-components-review-list-item__author + .wc-block-components-review-list-item__published-date::before {
  621. content: none;
  622. }
  623. .wc-block-components-review-list-item__product + .wc-block-components-review-list-item__author,
  624. .wc-block-components-review-list-item__published-date {
  625. font-size: var(--global--font-size-xs);
  626. }
  627. .single-product #page #woocommerce-wrapper div.product div.summary p.price {
  628. color: var(--global--color-foreground);
  629. font-size: var(--global--font-size-lg);
  630. }
  631. .single-product #page #woocommerce-wrapper div.product form.cart div.quantity input[type=number] {
  632. line-height: var(--global--font-size-xl);
  633. padding: calc(0.5 * var(--button--padding-vertical)) var(--form--spacing-unit);
  634. }
  635. .single-product #page #woocommerce-wrapper div.product form.cart button {
  636. line-height: var(--global--font-size-xl);
  637. padding: calc(0.5 * var(--button--padding-vertical) + 1px) var(--button--padding-horizontal);
  638. }
  639. .product_meta {
  640. color: var(--global--color-foreground-low-contrast);
  641. }
  642. .screen-reader-text, .search-form input[type="submit"] {
  643. /* Text meant only for screen readers. */
  644. border: 0;
  645. clip: rect(1px, 1px, 1px, 1px);
  646. clip-path: inset(50%);
  647. height: 1px;
  648. margin: -1px;
  649. overflow: hidden;
  650. padding: 0;
  651. position: absolute !important;
  652. width: 1px;
  653. word-wrap: normal !important;
  654. /* Many screen reader and browser combinations announce broken words as they would appear visually. */
  655. }
  656. .screen-reader-text:focus, .search-form input:focus[type="submit"] {
  657. background-color: var(--global--color-background);
  658. border-radius: 3px;
  659. box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  660. clip: auto !important;
  661. clip-path: none;
  662. color: var(--global--color-foreground);
  663. display: block;
  664. font-size: var(--global--font-size-md);
  665. font-weight: bold;
  666. height: auto;
  667. right: 5px;
  668. line-height: normal;
  669. padding: 15px 23px 14px;
  670. text-decoration: none;
  671. top: 5px;
  672. width: auto;
  673. z-index: 100000;
  674. /* Above WP toolbar. */
  675. }
  676. /* Do not show the outline on the skip link target. */
  677. #content[tabindex="-1"]:focus {
  678. outline: 0;
  679. }
  680. .search-results .site-main > * {
  681. padding: var(--global--spacing-vertical) 0;
  682. }
  683. .search-results .search-form {
  684. padding-bottom: 0;
  685. margin-bottom: var(--global--spacing-vertical);
  686. }
  687. .search-results .entry-title {
  688. font-size: var(--heading--font-size-h2);
  689. }
  690. .search-results .entry-header {
  691. margin-bottom: 0;
  692. }
  693. .search-form {
  694. border-bottom: var(--form--border-width) solid var(--form--border-color);
  695. flex-direction: row-reverse;
  696. }
  697. .search-form > label {
  698. margin-left: 0;
  699. padding-right: 30px;
  700. position: relative;
  701. }
  702. .search-form > label:before {
  703. content: "";
  704. position: absolute;
  705. top: 0;
  706. right: 0;
  707. 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");
  708. background-repeat: no-repeat;
  709. background-position: center center;
  710. width: 24px;
  711. height: 100%;
  712. }
  713. .search-form input[type="search"] {
  714. border: none;
  715. padding-top: var(--button--padding-vertical);
  716. padding-bottom: var(--button--padding-vertical);
  717. font-size: var(--global--font-size-sm);
  718. color: var(--entry-header--color);
  719. }
  720. .search-form input[type="submit"] {
  721. background: none;
  722. color: var(--entry-header--color);
  723. }
  724. .site-main > article > .entry-footer {
  725. margin-top: calc( var(--global--spacing-vertical) / 2);
  726. padding-top: 0;
  727. border: none;
  728. }
  729. .widget ul {
  730. padding: 0;
  731. }
  732. #content .wc-block-grid .wc-block-grid__product-onsale {
  733. font-family: var(--global--font-secondary);
  734. }
  735. body[class*="woocommerce"] #page span.onsale {
  736. background-color: var(--global--color-background);
  737. border: 1px solid var(--global--color-foreground);
  738. border-radius: 0;
  739. font-family: var(--global--font-secondary);
  740. line-height: 1.6;
  741. min-width: 0;
  742. min-height: 0;
  743. padding: 1em;
  744. }
  745. body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget {
  746. max-width: 100%;
  747. }
  748. #woocommerce-wrapper ul.products li.product .price {
  749. color: var(--global--color-foreground);
  750. }
  751. @media only screen and (min-width: 830px) {
  752. .woo-navigation {
  753. padding-top: var(--global--spacing-vertical);
  754. }
  755. }