style-rtl.css 24 KB

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