style-editor.css (79555B)
1 @charset "UTF-8"; 2 3 /** 4 * These styles should be loaded by the Block Editor only 5 */ 6 7 /* Variables */ 8 :root { 9 10 /* Font Family */ 11 --global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif); 12 --global--font-secondary: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif); 13 14 /* Font Size */ 15 --global--font-size-base: 1.25rem; 16 --global--font-size-xs: 1rem; 17 --global--font-size-sm: 1.125rem; 18 --global--font-size-md: 1.25rem; 19 --global--font-size-lg: 1.5rem; 20 --global--font-size-xl: 2.25rem; 21 --global--font-size-xxl: 4rem; 22 --global--font-size-xxxl: 5rem; 23 --global--font-size-page-title: var(--global--font-size-xxl); 24 --global--letter-spacing: normal; 25 26 /* Line Height */ 27 --global--line-height-body: 1.7; 28 --global--line-height-heading: 1.3; 29 --global--line-height-page-title: 1.1; 30 31 /* Headings */ 32 --heading--font-family: var(--global--font-primary); 33 --heading--font-size-h6: var(--global--font-size-xs); 34 --heading--font-size-h5: var(--global--font-size-sm); 35 --heading--font-size-h4: var(--global--font-size-lg); 36 --heading--font-size-h3: calc(1.25 * var(--global--font-size-lg)); 37 --heading--font-size-h2: var(--global--font-size-xl); 38 --heading--font-size-h1: var(--global--font-size-page-title); 39 --heading--letter-spacing-h6: 0.05em; 40 --heading--letter-spacing-h5: 0.05em; 41 --heading--letter-spacing-h4: var(--global--letter-spacing); 42 --heading--letter-spacing-h3: var(--global--letter-spacing); 43 --heading--letter-spacing-h2: var(--global--letter-spacing); 44 --heading--letter-spacing-h1: var(--global--letter-spacing); 45 --heading--line-height-h6: var(--global--line-height-heading); 46 --heading--line-height-h5: var(--global--line-height-heading); 47 --heading--line-height-h4: var(--global--line-height-heading); 48 --heading--line-height-h3: var(--global--line-height-heading); 49 --heading--line-height-h2: var(--global--line-height-heading); 50 --heading--line-height-h1: var(--global--line-height-page-title); 51 --heading--font-weight: normal; 52 --heading--font-weight-page-title: 300; 53 --heading--font-weight-strong: 600; 54 55 /* Block: Latest posts */ 56 --latest-posts--title-font-family: var(--heading--font-family); 57 --latest-posts--title-font-size: var(--heading--font-size-h3); 58 --latest-posts--description-font-family: var(--global--font-secondary); 59 --latest-posts--description-font-size: var(--global--font-size-sm); 60 --list--font-family: var(--global--font-secondary); 61 --definition-term--font-family: var(--global--font-primary); 62 63 /* Colors */ 64 --global--color-black: #000; 65 --global--color-dark-gray: #28303d; 66 --global--color-gray: #39414d; 67 --global--color-light-gray: #f0f0f0; 68 --global--color-green: #d1e4dd; 69 --global--color-blue: #d1dfe4; 70 --global--color-purple: #d1d1e4; 71 --global--color-red: #e4d1d1; 72 --global--color-orange: #e4dad1; 73 --global--color-yellow: #eeeadd; 74 --global--color-white: #fff; 75 --global--color-white-50: rgba(255, 255, 255, 0.5); 76 --global--color-white-90: rgba(255, 255, 255, 0.9); 77 --global--color-primary: var(--global--color-dark-gray); 78 79 /* Body text color, site title, footer text color. */ 80 --global--color-secondary: var(--global--color-gray); 81 82 /* Headings */ 83 --global--color-primary-hover: var(--global--color-primary); 84 --global--color-background: var(--global--color-green); 85 86 /* Mint, default body background */ 87 --global--color-border: var(--global--color-primary); 88 89 /* Used for borders (separators) */ 90 91 /* Spacing */ 92 --global--spacing-unit: 20px; 93 --global--spacing-measure: unset; 94 --global--spacing-horizontal: 25px; 95 --global--spacing-vertical: 30px; 96 97 /* Elevation */ 98 --global--elevation: 1px 1px 3px 0 rgba(0, 0, 0, 0.2); 99 100 /* Forms */ 101 --form--font-family: var(--global--font-secondary); 102 --form--font-size: var(--global--font-size-sm); 103 --form--line-height: var(--global--line-height-body); 104 --form--color-text: var(--global--color-dark-gray); 105 --form--color-ranged: var(--global--color-secondary); 106 --form--label-weight: 500; 107 --form--border-color: var(--global--color-secondary); 108 --form--border-width: 3px; 109 --form--border-radius: 0; 110 --form--spacing-unit: calc(0.5 * var(--global--spacing-unit)); 111 112 /* Cover block */ 113 --cover--height: calc(15 * var(--global--spacing-vertical)); 114 --cover--color-foreground: var(--global--color-white); 115 --cover--color-background: var(--global--color-black); 116 117 /* Buttons */ 118 --button--color-text: var(--global--color-background); 119 --button--color-text-hover: var(--global--color-secondary); 120 --button--color-text-active: var(--global--color-secondary); 121 --button--color-background: var(--global--color-secondary); 122 --button--color-background-active: var(--global--color-background); 123 --button--font-family: var(--global--font-primary); 124 --button--font-size: var(--global--font-size-base); 125 --button--font-weight: 500; 126 --button--line-height: 1.5; 127 --button--border-width: 3px; 128 --button--border-radius: 0; 129 --button--padding-vertical: 15px; 130 --button--padding-horizontal: calc(2 * var(--button--padding-vertical)); 131 132 /* entry */ 133 --entry-header--color: var(--global--color-primary); 134 --entry-header--color-link: currentColor; 135 --entry-header--color-hover: var(--global--color-primary-hover); 136 --entry-header--color-focus: var(--global--color-secondary); 137 --entry-header--font-size: var(--heading--font-size-h2); 138 --entry-content--font-family: var(--global--font-secondary); 139 --entry-author-bio--font-family: var(--heading--font-family); 140 --entry-author-bio--font-size: var(--heading--font-size-h4); 141 142 /* Header */ 143 --branding--color-text: var(--global--color-primary); 144 --branding--color-link: var(--global--color-primary); 145 --branding--color-link-hover: var(--global--color-secondary); 146 --branding--title--font-family: var(--global--font-primary); 147 --branding--title--font-size: var(--global--font-size-lg); 148 --branding--title--font-size-mobile: var(--heading--font-size-h4); 149 --branding--title--font-weight: normal; 150 --branding--title--text-transform: uppercase; 151 --branding--description--font-family: var(--global--font-secondary); 152 --branding--description--font-size: var(--global--font-size-sm); 153 --branding--description--font-family: var(--global--font-secondary); 154 --branding--logo--max-width: 300px; 155 --branding--logo--max-height: 100px; 156 --branding--logo--max-width-mobile: 96px; 157 --branding--logo--max-height-mobile: 96px; 158 159 /* Main navigation */ 160 --primary-nav--font-family: var(--global--font-secondary); 161 --primary-nav--font-family-mobile: var(--global--font-primary); 162 --primary-nav--font-size: var(--global--font-size-md); 163 --primary-nav--font-size-sub-menu: var(--global--font-size-xs); 164 --primary-nav--font-size-mobile: var(--global--font-size-sm); 165 --primary-nav--font-size-sub-menu-mobile: var(--global--font-size-sm); 166 --primary-nav--font-size-button: var(--global--font-size-xs); 167 --primary-nav--font-style: normal; 168 --primary-nav--font-style-sub-menu-mobile: normal; 169 --primary-nav--font-weight: normal; 170 --primary-nav--font-weight-button: 500; 171 --primary-nav--color-link: var(--global--color-primary); 172 --primary-nav--color-link-hover: var(--global--color-primary-hover); 173 --primary-nav--color-text: var(--global--color-primary); 174 --primary-nav--padding: calc(0.66 * var(--global--spacing-unit)); 175 --primary-nav--border-color: var(--global--color-primary); 176 177 /* Pagination */ 178 --pagination--color-text: var(--global--color-primary); 179 --pagination--color-link-hover: var(--global--color-primary-hover); 180 --pagination--font-family: var(--global--font-secondary); 181 --pagination--font-size: var(--global--font-size-lg); 182 --pagination--font-weight: normal; 183 --pagination--font-weight-strong: 600; 184 185 /* Footer */ 186 --footer--color-text: var(--global--color-primary); 187 --footer--color-link: var(--global--color-primary); 188 --footer--color-link-hover: var(--global--color-primary-hover); 189 --footer--font-family: var(--global--font-primary); 190 --footer--font-size: var(--global--font-size-sm); 191 192 /* Block: Pull quote */ 193 --pullquote--font-family: var(--global--font-primary); 194 --pullquote--font-size: var(--heading--font-size-h3); 195 --pullquote--font-style: normal; 196 --pullquote--letter-spacing: var(--heading--letter-spacing-h4); 197 --pullquote--line-height: var(--global--line-height-heading); 198 --pullquote--border-width: 3px; 199 --pullquote--border-color: var(--global--color-primary); 200 --pullquote--color-foreground: var(--global--color-primary); 201 --pullquote--color-background: var(--global--color-background); 202 --quote--font-family: var(--global--font-secondary); 203 --quote--font-size: var(--global--font-size-md); 204 --quote--font-size-large: var(--global--font-size-xl); 205 --quote--font-style: normal; 206 --quote--font-weight: 700; 207 --quote--font-weight-strong: bolder; 208 --quote--font-style-large: normal; 209 --quote--font-style-cite: normal; 210 --quote--line-height: var(--global--line-height-body); 211 --quote--line-height-large: 1.35; 212 --separator--border-color: var(--global--color-border); 213 --separator--height: 1px; 214 215 /* Block: Table */ 216 --table--stripes-border-color: var(--global--color-light-gray); 217 --table--stripes-background-color: var(--global--color-light-gray); 218 --table--has-background-text-color: var(--global--color-dark-gray); 219 220 /* Widgets */ 221 --widget--line-height-list: 1.9; 222 --widget--line-height-title: 1.4; 223 --widget--font-weight-title: 700; 224 --widget--spacing-menu: calc(0.66 * var(--global--spacing-unit)); 225 226 /* Admin-bar height */ 227 --global--admin-bar--height: 0px; 228 } 229 230 .admin-bar { 231 --global--admin-bar--height: 32px; 232 } 233 @media only screen and (max-width: 782px) { 234 235 .admin-bar { 236 --global--admin-bar--height: 46px; 237 } 238 } 239 240 @media only screen and (min-width: 652px) { 241 242 :root { 243 --global--font-size-xl: 2.5rem; 244 --global--font-size-xxl: 6rem; 245 --global--font-size-xxxl: 9rem; 246 --heading--font-size-h3: 2rem; 247 --heading--font-size-h2: 3rem; 248 } 249 } 250 251 /** 252 * Responsive Styles 253 */ 254 255 /** 256 * Required Variables 257 */ 258 259 /** 260 * Root Media Query Variables 261 */ 262 :root { 263 --responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal) * 0.6); 264 --responsive--aligndefault-width: calc(100vw - var(--responsive--spacing-horizontal)); 265 --responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal)); 266 --responsive--alignfull-width: 100%; 267 --responsive--alignright-margin: var(--global--spacing-horizontal); 268 --responsive--alignleft-margin: var(--global--spacing-horizontal); 269 } 270 271 @media only screen and (min-width: 482px) { 272 273 :root { 274 --responsive--aligndefault-width: min(calc(100vw - 4 * var(--global--spacing-horizontal)), 610px); 275 --responsive--alignwide-width: calc(100vw - 4 * var(--global--spacing-horizontal)); 276 --responsive--alignright-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width))); 277 --responsive--alignleft-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width))); 278 } 279 } 280 @media only screen and (min-width: 822px) { 281 282 :root { 283 --responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 610px); 284 --responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px); 285 } 286 } 287 288 /** 289 * Extends 290 */ 291 .default-max-width { 292 max-width: var(--responsive--aligndefault-width); 293 margin-left: auto; 294 margin-right: auto; 295 } 296 297 .wide-max-width { 298 max-width: var(--responsive--alignwide-width); 299 margin-left: auto; 300 margin-right: auto; 301 } 302 303 @media only screen and (min-width: 482px) { 304 305 .full-max-width { 306 max-width: var(--responsive--alignfull-width); 307 width: auto; 308 margin-left: auto; 309 margin-right: auto; 310 } 311 } 312 313 blockquote { 314 padding: 0; 315 position: relative; 316 margin: var(--global--spacing-vertical) 0 var(--global--spacing-vertical) var(--global--spacing-horizontal); 317 } 318 319 blockquote > * { 320 margin-top: var(--global--spacing-unit); 321 margin-bottom: var(--global--spacing-unit); 322 } 323 324 blockquote > *:first-child { 325 margin-top: 0; 326 } 327 328 blockquote > *:last-child { 329 margin-bottom: 0; 330 } 331 332 blockquote p { 333 letter-spacing: var(--heading--letter-spacing-h4); 334 font-family: var(--quote--font-family); 335 font-size: var(--quote--font-size); 336 font-style: var(--quote--font-style); 337 font-weight: var(--quote--font-weight); 338 line-height: var(--quote--line-height); 339 } 340 341 blockquote cite, 342 blockquote footer { 343 font-weight: normal; 344 color: var(--global--color-primary); 345 font-size: var(--global--font-size-xs); 346 letter-spacing: var(--global--letter-spacing); 347 } 348 349 blockquote.alignleft, 350 blockquote.alignright { 351 padding-left: inherit; 352 } 353 354 blockquote.alignleft p, 355 blockquote.alignright p { 356 font-size: var(--heading--font-size-h5); 357 max-width: inherit; 358 width: inherit; 359 } 360 361 blockquote.alignleft cite, 362 blockquote.alignleft footer, 363 blockquote.alignright cite, 364 blockquote.alignright footer { 365 font-size: var(--global--font-size-xs); 366 letter-spacing: var(--global--letter-spacing); 367 } 368 369 blockquote strong { 370 font-weight: var(--quote--font-weight-strong); 371 } 372 373 blockquote:before { 374 content: "“"; 375 font-size: var(--quote--font-size); 376 line-height: var(--quote--line-height); 377 position: absolute; 378 left: calc(-0.5 * var(--global--spacing-horizontal)); 379 } 380 381 blockquote .wp-block-quote__citation, 382 blockquote cite, 383 blockquote footer { 384 color: var(--global--color-primary); 385 font-size: var(--global--font-size-xs); 386 font-style: var(--quote--font-style-cite); 387 } 388 @media only screen and (max-width: 481px) { 389 390 blockquote { 391 padding-left: calc(0.5 * var(--global--spacing-horizontal)); 392 } 393 394 blockquote:before { 395 left: 0; 396 } 397 } 398 399 img { 400 height: auto; 401 max-width: 100%; 402 vertical-align: middle; 403 } 404 405 /* Classic editor images */ 406 .entry-content img { 407 max-width: 100%; 408 } 409 410 /* Make sure embeds and iframes fit their containers. */ 411 embed, 412 iframe, 413 object, 414 video { 415 max-width: 100%; 416 } 417 418 /* Media captions */ 419 figcaption, 420 .wp-caption, 421 .wp-caption-text, 422 .wp-block-embed figcaption { 423 color: currentColor; 424 font-size: var(--global--font-size-xs); 425 line-height: var(--global--line-height-body); 426 margin-top: calc(0.5 * var(--global--spacing-unit)); 427 margin-bottom: var(--global--spacing-unit); 428 text-align: center; 429 } 430 431 .alignleft figcaption, 432 .alignright figcaption, 433 .alignleft .wp-caption, 434 .alignright .wp-caption, 435 .alignleft .wp-caption-text, 436 .alignright .wp-caption-text, 437 .alignleft .wp-block-embed figcaption, 438 .alignright .wp-block-embed figcaption { 439 margin-bottom: 0; 440 } 441 442 /* WP Smiley */ 443 .page-content .wp-smiley, 444 .entry-content .wp-smiley, 445 .comment-content .wp-smiley { 446 border: none; 447 margin-bottom: 0; 448 margin-top: 0; 449 padding: 0; 450 } 451 452 select, 453 select:focus { 454 border: var(--form--border-width) solid var(--form--border-color); 455 border-radius: var(--form--border-radius); 456 color: var(--form--color-text); 457 font-size: var(--form--font-size); 458 -moz-appearance: none; 459 -webkit-appearance: none; 460 appearance: none; 461 padding: var(--form--spacing-unit) calc(3 * var(--form--spacing-unit)) var(--form--spacing-unit) var(--form--spacing-unit); 462 background: var(--global--color-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat; 463 background-position: right var(--form--spacing-unit) top 60%; 464 } 465 466 /* 467 * text-underline-offset doesn't work in Chrome at all 👎 468 * But looks nice in Safari/Firefox, so let's keep it and 469 * maybe Chrome will support it soon. 470 */ 471 a { 472 cursor: pointer; 473 color: var(--wp--style--color--link, var(--global--color-primary)); 474 text-underline-offset: 3px; 475 text-decoration-skip-ink: all; 476 } 477 478 a:hover { 479 text-decoration-style: dotted; 480 text-decoration-skip-ink: none; 481 } 482 483 .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { 484 485 /* Only visible in Windows High Contrast mode */ 486 outline: 2px solid transparent; 487 text-decoration: underline 1px dotted currentColor; 488 text-decoration-skip-ink: none; 489 background: rgba(255, 255, 255, 0.9); 490 } 491 492 .is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { 493 background: var(--global--color-black); 494 color: var(--global--color-white); 495 text-decoration: none; 496 } 497 498 .is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav { 499 color: var(--wp--style--color--link, var(--global--color-white)); 500 } 501 502 .has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { 503 background: rgba(0, 0, 0, 0.9); 504 color: var(--wp--style--color--link, var(--global--color-white)); 505 } 506 507 .has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav { 508 color: var(--wp--style--color--link, var(--global--color-white)); 509 } 510 511 .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link { 512 513 /* Only visible in Windows High Contrast mode */ 514 outline: 2px solid transparent; 515 outline-offset: -2px; 516 } 517 518 .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link:focus { 519 color: #21759b; 520 background-color: #f1f1f1; 521 } 522 523 .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).custom-logo-link { 524 background: none; 525 } 526 527 .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img { 528 outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary)); 529 } 530 531 .has-background .has-link-color a, 532 .has-background.has-link-color a { 533 color: var(--wp--style--color--link, var(--global--color-primary)); 534 } 535 536 .wp-block-button__link { 537 border: var(--button--border-width) solid transparent; 538 border-radius: var(--button--border-radius); 539 cursor: pointer; 540 font-weight: var(--button--font-weight); 541 font-family: var(--button--font-family); 542 font-size: var(--button--font-size); 543 line-height: var(--button--line-height); 544 padding: var(--button--padding-vertical) var(--button--padding-horizontal); 545 text-decoration: none; 546 } 547 548 .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) { 549 color: var(--global--color-background); 550 } 551 552 .has-background .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) { 553 color: var(--local--color-background, var(--global--color-primary)); 554 } 555 556 .has-background .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background { 557 color: var(--global--color-primary); 558 } 559 560 .wp-block-button__link:not(:hover):not(:active):not(.has-background) { 561 background-color: var(--global--color-primary); 562 } 563 564 .has-background .wp-block-button__link:not(:hover):not(:active):not(.has-background) { 565 background-color: var(--local--color-primary, var(--global--color-primary)); 566 } 567 568 .wp-block-button__link:hover, 569 .wp-block-button__link:active { 570 background-color: transparent; 571 border-color: currentColor; 572 color: inherit; 573 } 574 575 .wp-block-button__link:focus { 576 outline-offset: -6px; 577 outline: 2px dotted currentColor; 578 } 579 580 .wp-block-button__link:disabled { 581 background-color: var(--global--color-white-50); 582 border-color: var(--global--color-white-50); 583 color: var(--button--color-text-active); 584 } 585 586 /** 587 * Block Options 588 */ 589 [data-block].wp-block-buttons { 590 margin-top: 0; 591 margin-bottom: 0; 592 } 593 594 [data-block].wp-block-buttons .wp-block-button:first-child { 595 margin-top: var(--global--spacing-vertical); 596 } 597 598 [data-block].wp-block-buttons .wp-block-button:last-child { 599 margin-bottom: var(--global--spacing-vertical); 600 } 601 602 .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) { 603 color: var(--global--color-background); 604 } 605 606 .has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) { 607 color: var(--local--color-background, var(--global--color-background)); 608 } 609 610 .has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background { 611 color: var(--global--color-primary); 612 } 613 614 .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) { 615 background-color: var(--global--color-primary); 616 } 617 618 .has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) { 619 background-color: var(--local--color-primary, var(--global--color-primary)); 620 } 621 622 .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover, 623 .wp-block-button:not(.is-style-outline) .wp-block-button__link:active { 624 border-color: currentColor !important; 625 background-color: transparent !important; 626 color: inherit !important; 627 } 628 629 .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus { 630 outline-offset: inherit; 631 outline: inherit; 632 } 633 634 .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color), 635 .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background), 636 .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background { 637 border-color: currentColor; 638 } 639 640 .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) { 641 color: var(--global--color-primary); 642 } 643 644 .has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) { 645 color: var(--local--color-primary, var(--global--color-primary)); 646 } 647 648 .has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background:not(.has-text-color) { 649 color: inherit; 650 } 651 652 .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background) { 653 background-color: transparent; 654 } 655 656 .wp-block-button.is-style-outline .wp-block-button__link:hover, 657 .wp-block-button.is-style-outline .wp-block-button__link:active { 658 background-color: var(--global--color-primary) !important; 659 border-color: transparent !important; 660 color: var(--global--color-background) !important; 661 } 662 663 .has-background .wp-block-button.is-style-outline .wp-block-button__link:hover, 664 .has-background .wp-block-button.is-style-outline .wp-block-button__link:active { 665 background-color: var(--local--color-primary, var(--global--color-primary)) !important; 666 color: var(--local--color-background, var(--global--color-background)) !important; 667 } 668 669 .has-text-color .wp-block-button.is-style-outline .wp-block-button__link:hover, 670 .has-text-color .wp-block-button.is-style-outline .wp-block-button__link:active { 671 color: var(--local--color-background, var(--global--color-background)) !important; 672 } 673 674 .wp-block-button.is-style-outline .wp-block-button__link:focus { 675 outline-offset: inherit; 676 outline: inherit; 677 } 678 679 .wp-block-button.is-style-squared { 680 border-radius: 0; 681 } 682 683 .is-style-outline .wp-block-button__link[style*=radius], 684 .wp-block-button__link[style*=radius] { 685 outline-offset: 2px; 686 } 687 688 .wp-block-code code { 689 white-space: pre !important; 690 overflow-x: auto; 691 } 692 693 .wp-block-code { 694 border-color: var(--global--color-border); 695 border-radius: 0; 696 border-style: solid; 697 border-width: 0.1rem; 698 padding: var(--global--spacing-unit); 699 color: currentColor; 700 } 701 702 .wp-block-cover, 703 .wp-block-cover-image { 704 background-color: var(--cover--color-background); 705 min-height: var(--cover--height); 706 margin-top: inherit; 707 margin-bottom: inherit; 708 } 709 710 .wp-block-cover:not(.alignwide):not(.alignfull), 711 .wp-block-cover-image:not(.alignwide):not(.alignfull) { 712 clear: both; 713 } 714 715 [data-align=full] .wp-block-cover, 716 [data-align=full] .wp-block-cover-image { 717 margin-top: 0; 718 margin-bottom: 0; 719 } 720 721 .wp-block-cover > .wp-block-cover__inner-container > *:first-child, 722 .wp-block-cover-image > .wp-block-cover__inner-container > *:first-child { 723 margin-top: 0; 724 } 725 726 .wp-block-cover > .wp-block-cover__inner-container > *:last-child:not(.block-list-appender), 727 .wp-block-cover-image > .wp-block-cover__inner-container > *:last-child:not(.block-list-appender) { 728 margin-bottom: 0; 729 } 730 731 .wp-block-cover.has-child-selected > .wp-block-cover__inner-container > *:nth-last-child(2), 732 .wp-block-cover.is-selected > .wp-block-cover__inner-container > *:nth-last-child(2), 733 .wp-block-cover-image.has-child-selected > .wp-block-cover__inner-container > *:nth-last-child(2), 734 .wp-block-cover-image.is-selected > .wp-block-cover__inner-container > *:nth-last-child(2) { 735 margin-bottom: 0; 736 } 737 738 .wp-block-cover .wp-block-cover__inner-container, 739 .wp-block-cover .wp-block-cover-image-text, 740 .wp-block-cover .wp-block-cover-text, 741 .wp-block-cover .block-editor-block-list__block, 742 .wp-block-cover-image .wp-block-cover__inner-container, 743 .wp-block-cover-image .wp-block-cover-image-text, 744 .wp-block-cover-image .wp-block-cover-text, 745 .wp-block-cover-image .block-editor-block-list__block { 746 color: currentColor; 747 } 748 749 .wp-block-cover .wp-block-cover__inner-container a, 750 .wp-block-cover .wp-block-cover-image-text a, 751 .wp-block-cover .wp-block-cover-text a, 752 .wp-block-cover .block-editor-block-list__block a, 753 .wp-block-cover-image .wp-block-cover__inner-container a, 754 .wp-block-cover-image .wp-block-cover-image-text a, 755 .wp-block-cover-image .wp-block-cover-text a, 756 .wp-block-cover-image .block-editor-block-list__block a { 757 color: currentColor; 758 } 759 760 .wp-block-cover .wp-block-cover__inner-container .has-link-color a, 761 .wp-block-cover .wp-block-cover-image-text .has-link-color a, 762 .wp-block-cover .wp-block-cover-text .has-link-color a, 763 .wp-block-cover .block-editor-block-list__block .has-link-color a, 764 .wp-block-cover-image .wp-block-cover__inner-container .has-link-color a, 765 .wp-block-cover-image .wp-block-cover-image-text .has-link-color a, 766 .wp-block-cover-image .wp-block-cover-text .has-link-color a, 767 .wp-block-cover-image .block-editor-block-list__block .has-link-color a { 768 color: var(--wp--style--color--link, var(--global--color-primary)); 769 } 770 771 .wp-block-cover:not([class*=background-color]) .wp-block-cover__inner-container, 772 .wp-block-cover:not([class*=background-color]) .wp-block-cover-image-text, 773 .wp-block-cover:not([class*=background-color]) .wp-block-cover-text, 774 .wp-block-cover:not([class*=background-color]) .block-editor-block-list__block, 775 .wp-block-cover-image:not([class*=background-color]) .wp-block-cover__inner-container, 776 .wp-block-cover-image:not([class*=background-color]) .wp-block-cover-image-text, 777 .wp-block-cover-image:not([class*=background-color]) .wp-block-cover-text, 778 .wp-block-cover-image:not([class*=background-color]) .block-editor-block-list__block { 779 color: var(--cover--color-foreground); 780 } 781 782 .wp-block-cover h2, 783 .wp-block-cover-image h2 { 784 font-size: var(--heading--font-size-h2); 785 letter-spacing: var(--heading--letter-spacing-h2); 786 line-height: var(--heading--line-height-h2); 787 padding: 0; 788 max-width: inherit; 789 text-align: inherit; 790 } 791 792 .wp-block-cover h2.has-text-align-left, 793 .wp-block-cover-image h2.has-text-align-left { 794 text-align: left; 795 } 796 797 .wp-block-cover h2.has-text-align-center, 798 .wp-block-cover-image h2.has-text-align-center { 799 text-align: center; 800 } 801 802 .wp-block-cover h2.has-text-align-right, 803 .wp-block-cover-image h2.has-text-align-right { 804 text-align: right; 805 } 806 807 .wp-block-cover.is-style-twentytwentyone-border, 808 .wp-block-cover-image.is-style-twentytwentyone-border { 809 border: calc(3 * var(--separator--height)) solid var(--global--color-border); 810 } 811 812 .wp-block-cover[class*=-background-color][class] .wp-block-cover__inner-container, 813 .wp-block-cover-image[class*=-background-color][class] .wp-block-cover__inner-container { 814 background-color: unset; 815 } 816 817 .wp-block-columns:not(.alignwide):not(.alignfull) { 818 clear: both; 819 } 820 821 .wp-block-columns .wp-block, 822 .wp-block-columns .wp-block-column { 823 max-width: inherit; 824 } 825 826 .wp-block-columns > .wp-block-column > *:first-child { 827 margin-top: 0; 828 } 829 830 .wp-block-columns > .wp-block-column > *:last-child:not(.block-list-appender) { 831 margin-bottom: 0; 832 } 833 834 .wp-block-columns.has-child-selected > .wp-block-column > *:nth-last-child(2), 835 .wp-block-columns.is-selected > .wp-block-column > *:nth-last-child(2) { 836 margin-bottom: 0; 837 } 838 @media only screen and (min-width: 652px) { 839 840 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) { 841 margin-left: calc(-2 * var(--global--spacing-horizontal)); 842 margin-top: calc(2.5 * var(--global--spacing-horizontal)); 843 z-index: 2; 844 } 845 846 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > p:not(.has-background), 847 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h1:not(.has-background), 848 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h2:not(.has-background), 849 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h3:not(.has-background), 850 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h4:not(.has-background), 851 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h5:not(.has-background), 852 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h6:not(.has-background), 853 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background), 854 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ol:not(.has-background), 855 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > pre:not(.has-background) { 856 background-color: var(--global--color-background); 857 padding: var(--global--spacing-unit); 858 } 859 860 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background), 861 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ol:not(.has-background) { 862 padding-left: calc(2 * var(--global--spacing-horizontal)); 863 } 864 865 .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n).is-vertically-aligned-center { 866 margin-top: 0; 867 } 868 } 869 870 .wp-block[data-align=full] > .wp-block-columns p:not(.has-background), 871 .wp-block[data-align=full] > .wp-block-columns h1:not(.has-background), 872 .wp-block[data-align=full] > .wp-block-columns h2:not(.has-background), 873 .wp-block[data-align=full] > .wp-block-columns h3:not(.has-background), 874 .wp-block[data-align=full] > .wp-block-columns h4:not(.has-background), 875 .wp-block[data-align=full] > .wp-block-columns h5:not(.has-background), 876 .wp-block[data-align=full] > .wp-block-columns h6:not(.has-background) { 877 padding-left: var(--global--spacing-unit); 878 padding-right: var(--global--spacing-unit); 879 } 880 881 .wp-block-file .wp-block-file__textlink { 882 text-decoration: underline; 883 text-decoration-style: solid; 884 text-decoration-thickness: 1px; 885 } 886 887 .wp-block-file .wp-block-file__textlink:hover { 888 text-decoration: underline; 889 text-decoration-style: dotted; 890 } 891 892 .wp-block-file .wp-block-file__button { 893 border: var(--button--border-width) solid transparent; 894 border-radius: var(--button--border-radius); 895 cursor: pointer; 896 font-weight: var(--button--font-weight); 897 font-family: var(--button--font-family); 898 font-size: var(--button--font-size); 899 line-height: var(--button--line-height); 900 padding: var(--button--padding-vertical) var(--button--padding-horizontal); 901 text-decoration: none; 902 display: inline-block; 903 } 904 905 .wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-text-color) { 906 color: var(--global--color-background); 907 } 908 909 .has-background .wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-text-color) { 910 color: var(--local--color-background, var(--global--color-primary)); 911 } 912 913 .has-background .wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-text-color).has-background { 914 color: var(--global--color-primary); 915 } 916 917 .wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-background) { 918 background-color: var(--global--color-primary); 919 } 920 921 .has-background .wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-background) { 922 background-color: var(--local--color-primary, var(--global--color-primary)); 923 } 924 925 .wp-block-file .wp-block-file__button:hover, 926 .wp-block-file .wp-block-file__button:active { 927 background-color: transparent; 928 border-color: currentColor; 929 color: inherit; 930 } 931 932 .wp-block-file .wp-block-file__button:focus { 933 outline-offset: -6px; 934 outline: 2px dotted currentColor; 935 } 936 937 .wp-block-file .wp-block-file__button:disabled { 938 background-color: var(--global--color-white-50); 939 border-color: var(--global--color-white-50); 940 color: var(--button--color-text-active); 941 } 942 943 .wp-block-file .wp-block-file__button:focus { 944 outline-offset: inherit; 945 outline: inherit; 946 } 947 948 .wp-block-gallery figcaption { 949 margin-bottom: 0; 950 } 951 952 .wp-block-gallery figcaption a { 953 color: var(--global--color-white); 954 } 955 956 .wp-block-group { 957 display: block; 958 clear: both; 959 display: flow-root; 960 } 961 962 .wp-block-group:before, 963 .wp-block-group:after { 964 content: ""; 965 display: block; 966 clear: both; 967 } 968 969 .wp-block-group.has-background { 970 padding: var(--global--spacing-vertical); 971 } 972 973 [data-align=full] .wp-block-group.has-background { 974 margin-top: 0; 975 margin-bottom: 0; 976 } 977 978 .wp-block-group.is-style-twentytwentyone-border { 979 border: calc(3 * var(--separator--height)) solid var(--global--color-border); 980 padding: var(--global--spacing-vertical); 981 } 982 983 .wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > [data-align=full] { 984 max-width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical))); 985 width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical))); 986 margin-left: calc(-1 * var(--global--spacing-vertical)); 987 } 988 989 .wp-block-group > .wp-block-group__inner-container > *:first-child { 990 margin-top: 0; 991 } 992 993 .wp-block-group > .wp-block-group__inner-container > *:last-child:not(.block-list-appender) { 994 margin-bottom: 0; 995 } 996 997 .wp-block-group.has-child-selected > .wp-block-group__inner-container > *:nth-last-child(2), 998 .wp-block-group.is-selected > .wp-block-group__inner-container > *:nth-last-child(2) { 999 margin-bottom: 0; 1000 } 1001 1002 .wp-block-group .wp-block-group.has-background > .block-editor-block-list__layout > [data-align=full] { 1003 margin: 0; 1004 width: 100%; 1005 } 1006 1007 .wp-block-heading h1, 1008 h1, 1009 .h1, 1010 .wp-block-heading h2, 1011 h2, 1012 .h2, 1013 .wp-block-heading h3, 1014 h3, 1015 .h3, 1016 .wp-block-heading h4, 1017 h4, 1018 .h4, 1019 .wp-block-heading h5, 1020 h5, 1021 .h5, 1022 .wp-block-heading h6, 1023 h6, 1024 .h6 { 1025 clear: both; 1026 font-family: var(--heading--font-family); 1027 font-weight: var(--heading--font-weight); 1028 } 1029 1030 .wp-block-heading h1 strong, 1031 h1 strong, 1032 .h1 strong, 1033 .wp-block-heading h2 strong, 1034 h2 strong, 1035 .h2 strong, 1036 .wp-block-heading h3 strong, 1037 h3 strong, 1038 .h3 strong, 1039 .wp-block-heading h4 strong, 1040 h4 strong, 1041 .h4 strong, 1042 .wp-block-heading h5 strong, 1043 h5 strong, 1044 .h5 strong, 1045 .wp-block-heading h6 strong, 1046 h6 strong, 1047 .h6 strong { 1048 font-weight: var(--heading--font-weight-strong); 1049 } 1050 1051 .wp-block-heading h1[style*="--wp--typography--line-height"], 1052 h1[style*="--wp--typography--line-height"], 1053 .h1[style*="--wp--typography--line-height"], 1054 .wp-block-heading h2[style*="--wp--typography--line-height"], 1055 h2[style*="--wp--typography--line-height"], 1056 .h2[style*="--wp--typography--line-height"], 1057 .wp-block-heading h3[style*="--wp--typography--line-height"], 1058 h3[style*="--wp--typography--line-height"], 1059 .h3[style*="--wp--typography--line-height"], 1060 .wp-block-heading h4[style*="--wp--typography--line-height"], 1061 h4[style*="--wp--typography--line-height"], 1062 .h4[style*="--wp--typography--line-height"], 1063 .wp-block-heading h5[style*="--wp--typography--line-height"], 1064 h5[style*="--wp--typography--line-height"], 1065 .h5[style*="--wp--typography--line-height"], 1066 .wp-block-heading h6[style*="--wp--typography--line-height"], 1067 h6[style*="--wp--typography--line-height"], 1068 .h6[style*="--wp--typography--line-height"] { 1069 line-height: var(--wp--typography--line-height, var(--global--line-height-body)); 1070 } 1071 1072 .wp-block-heading h1, 1073 h1, 1074 .h1 { 1075 font-size: var(--heading--font-size-h1); 1076 letter-spacing: var(--heading--letter-spacing-h1); 1077 line-height: var(--heading--line-height-h1); 1078 } 1079 1080 .wp-block-heading h2, 1081 h2, 1082 .h2 { 1083 font-size: var(--heading--font-size-h2); 1084 letter-spacing: var(--heading--letter-spacing-h2); 1085 line-height: var(--heading--line-height-h2); 1086 } 1087 1088 .wp-block-heading h3, 1089 h3, 1090 .h3 { 1091 font-size: var(--heading--font-size-h3); 1092 letter-spacing: var(--heading--letter-spacing-h3); 1093 line-height: var(--heading--line-height-h3); 1094 } 1095 1096 .wp-block-heading h4, 1097 h4, 1098 .h4 { 1099 font-size: var(--heading--font-size-h4); 1100 font-weight: var(--heading--font-weight-strong); 1101 letter-spacing: var(--heading--letter-spacing-h4); 1102 line-height: var(--heading--line-height-h4); 1103 } 1104 1105 .wp-block-heading h5, 1106 h5, 1107 .h5 { 1108 font-size: var(--heading--font-size-h5); 1109 font-weight: var(--heading--font-weight-strong); 1110 letter-spacing: var(--heading--letter-spacing-h5); 1111 line-height: var(--heading--line-height-h5); 1112 } 1113 1114 .wp-block-heading h6, 1115 h6, 1116 .h6 { 1117 font-size: var(--heading--font-size-h6); 1118 font-weight: var(--heading--font-weight-strong); 1119 letter-spacing: var(--heading--letter-spacing-h6); 1120 line-height: var(--heading--line-height-h6); 1121 } 1122 1123 [data-type="core/html"] textarea { 1124 color: var(--global--color-dark-gray); 1125 border-radius: 0; 1126 padding: var(--global--spacing-unit); 1127 } 1128 1129 /* Center image block by default in the editor */ 1130 .wp-block-image > div { 1131 text-align: center; 1132 } 1133 1134 [data-type="core/image"] .block-editor-block-list__block-edit figure.is-resized { 1135 margin: 0 auto; 1136 } 1137 1138 /* Block Styles */ 1139 .wp-block-image.is-style-twentytwentyone-border img, 1140 .wp-block-image.is-style-twentytwentyone-image-frame img { 1141 border: calc(3 * var(--separator--height)) solid var(--global--color-border); 1142 } 1143 1144 .wp-block-image.is-style-twentytwentyone-image-frame img { 1145 padding: var(--global--spacing-unit); 1146 } 1147 1148 .wp-block-latest-comments { 1149 padding-left: 0; 1150 } 1151 1152 .wp-block-latest-posts { 1153 padding-left: 0; 1154 } 1155 1156 .wp-block-latest-posts:not(.is-grid) > li { 1157 margin-top: calc(1.666 * var(--global--spacing-vertical)); 1158 margin-bottom: calc(1.666 * var(--global--spacing-vertical)); 1159 } 1160 1161 .wp-block-latest-posts:not(.is-grid) > li:first-child { 1162 margin-top: 0; 1163 } 1164 1165 .wp-block-latest-posts:not(.is-grid) > li:last-child { 1166 margin-bottom: 0; 1167 } 1168 1169 .wp-block-latest-posts.is-grid { 1170 word-wrap: break-word; 1171 word-break: break-word; 1172 } 1173 1174 .wp-block-latest-posts.is-grid > li { 1175 margin-bottom: var(--global--spacing-vertical); 1176 } 1177 1178 .wp-block-latest-posts.is-grid > li:last-child { 1179 margin-bottom: 0; 1180 } 1181 1182 .wp-block-latest-posts > li > * { 1183 margin-top: calc(0.333 * var(--global--spacing-vertical)); 1184 margin-bottom: calc(0.333 * var(--global--spacing-vertical)); 1185 } 1186 1187 .wp-block-latest-posts > li > *:first-child { 1188 margin-top: 0; 1189 } 1190 1191 .wp-block-latest-posts > li > *:last-child { 1192 margin-bottom: 0; 1193 } 1194 1195 .wp-block-latest-posts > li > a { 1196 display: inline-block; 1197 font-family: var(--latest-posts--title-font-family); 1198 font-size: var(--latest-posts--title-font-size); 1199 font-weight: var(--heading--font-weight); 1200 line-height: var(--global--line-height-heading); 1201 margin-bottom: calc(0.333 * var(--global--spacing-vertical)); 1202 } 1203 1204 .wp-block-latest-posts .wp-block-latest-posts__post-author { 1205 color: var(--global--color-primary); 1206 font-size: var(--global--font-size-md); 1207 line-height: var(--global--line-height-body); 1208 } 1209 1210 .wp-block-latest-posts .wp-block-latest-posts__post-date { 1211 color: var(--global--color-primary); 1212 font-size: var(--global--font-size-xs); 1213 line-height: var(--global--line-height-body); 1214 } 1215 1216 [class*=inner-container] .wp-block-latest-posts .wp-block-latest-posts__post-date, 1217 .has-background .wp-block-latest-posts .wp-block-latest-posts__post-date { 1218 color: currentColor; 1219 } 1220 1221 .wp-block-latest-posts .wp-block-latest-posts__post-excerpt, 1222 .wp-block-latest-posts .wp-block-latest-posts__post-full-content { 1223 font-family: var(--latest-posts--description-font-family); 1224 font-size: var(--latest-posts--description-font-size); 1225 line-height: var(--global--line-height-body); 1226 margin-top: calc(0.666 * var(--global--spacing-vertical)); 1227 } 1228 1229 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers { 1230 border-top: calc(3 * var(--separator--height)) solid var(--global--color-border); 1231 border-bottom: calc(3 * var(--separator--height)) solid var(--global--color-border); 1232 } 1233 1234 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li, 1235 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers > li { 1236 padding-bottom: var(--global--spacing-vertical); 1237 border-bottom: var(--separator--height) solid var(--global--color-border); 1238 margin-top: var(--global--spacing-vertical); 1239 margin-bottom: var(--global--spacing-vertical); 1240 } 1241 1242 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li:last-child, 1243 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers > li:last-child { 1244 padding-bottom: 0; 1245 border-bottom: none; 1246 } 1247 1248 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid { 1249 box-shadow: inset 0 -1px 0 0 var(--global--color-border); 1250 border-bottom: calc(2 * var(--separator--height)) solid var(--global--color-border); 1251 } 1252 1253 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li { 1254 margin: 0; 1255 padding-top: var(--global--spacing-vertical); 1256 padding-right: var(--global--spacing-horizontal); 1257 } 1258 1259 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li:last-child { 1260 padding-bottom: var(--global--spacing-vertical); 1261 } 1262 @media screen and (min-width: 600px) { 1263 1264 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-2 li { 1265 width: calc((100% / 2)); 1266 } 1267 1268 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-3 li { 1269 width: calc((100% / 3)); 1270 } 1271 1272 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-4 li { 1273 width: calc((100% / 4)); 1274 } 1275 1276 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-5 li { 1277 width: calc((100% / 5)); 1278 } 1279 1280 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-6 li { 1281 width: calc((100% / 6)); 1282 } 1283 } 1284 1285 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li { 1286 border: calc(3 * var(--separator--height)) solid var(--global--color-border); 1287 padding: var(--global--spacing-vertical) var(--global--spacing-horizontal); 1288 } 1289 1290 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li:last-child { 1291 padding-bottom: var(--global--spacing-vertical); 1292 margin-bottom: var(--global--spacing-vertical); 1293 } 1294 1295 .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders:not(.is-grid) li { 1296 margin-top: var(--global--spacing-horizontal); 1297 margin-bottom: var(--global--spacing-horizontal); 1298 } 1299 1300 .gallery-item { 1301 display: inline-block; 1302 text-align: center; 1303 vertical-align: top; 1304 width: 100%; 1305 } 1306 1307 .gallery-columns-2 .gallery-item { 1308 max-width: 50%; 1309 } 1310 1311 .gallery-columns-3 .gallery-item { 1312 max-width: 33.33%; 1313 } 1314 1315 .gallery-columns-4 .gallery-item { 1316 max-width: 25%; 1317 } 1318 1319 .gallery-columns-5 .gallery-item { 1320 max-width: 20%; 1321 } 1322 1323 .gallery-columns-6 .gallery-item { 1324 max-width: 16.66%; 1325 } 1326 1327 .gallery-columns-7 .gallery-item { 1328 max-width: 14.28%; 1329 } 1330 1331 .gallery-columns-8 .gallery-item { 1332 max-width: 12.5%; 1333 } 1334 1335 .gallery-columns-9 .gallery-item { 1336 max-width: 11.11%; 1337 } 1338 1339 .gallery-caption { 1340 display: block; 1341 } 1342 1343 ul, 1344 ol { 1345 font-family: var(--list--font-family); 1346 margin: var(--global--spacing-vertical) 0; 1347 padding-left: calc(2 * var(--global--spacing-horizontal)); 1348 } 1349 1350 ul.aligncenter, 1351 ol.aligncenter { 1352 list-style-position: inside; 1353 padding: 0; 1354 text-align: center; 1355 } 1356 1357 ul.alignright, 1358 ol.alignright { 1359 list-style-position: inside; 1360 padding: 0; 1361 text-align: right; 1362 } 1363 1364 li > ul, 1365 li > ol { 1366 margin: 0; 1367 } 1368 1369 dt { 1370 font-family: var(--definition-term--font-family); 1371 font-weight: bold; 1372 } 1373 1374 [data-align=full] .wp-block-media-text { 1375 margin-top: 0; 1376 margin-bottom: 0; 1377 } 1378 1379 .wp-block-media-text > .wp-block-media-text__content > *:first-child { 1380 margin-top: 0; 1381 } 1382 1383 .wp-block-media-text > .wp-block-media-text__content > *:last-child:not(.block-list-appender) { 1384 margin-bottom: 0; 1385 } 1386 1387 .wp-block-media-text.has-child-selected > .wp-block-media-text__content > *:nth-last-child(2), 1388 .wp-block-media-text.is-selected > .wp-block-media-text__content > *:nth-last-child(2) { 1389 margin-bottom: 0; 1390 } 1391 1392 .wp-block-media-text .wp-block-media-text__content { 1393 padding: var(--global--spacing-horizontal); 1394 } 1395 1396 .wp-block-media-text.is-style-twentytwentyone-border { 1397 border: calc(3 * var(--separator--height)) solid var(--global--color-border); 1398 } 1399 1400 .wp-block-navigation .wp-block-navigation__container { 1401 background: var(--global--color-background); 1402 padding: 0; 1403 } 1404 1405 .wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__content { 1406 padding: var(--primary-nav--padding); 1407 } 1408 1409 .wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__label { 1410 font-family: var(--primary-nav--font-family); 1411 font-size: var(--primary-nav--font-size); 1412 font-weight: var(--primary-nav--font-weight); 1413 } 1414 1415 .wp-block-navigation .has-child .wp-block-navigation__container { 1416 box-shadow: var(--global--elevation); 1417 } 1418 1419 .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover, 1420 .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:focus { 1421 color: var(--primary-nav--color-link-hover); 1422 } 1423 1424 .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link__content { 1425 color: currentColor; 1426 } 1427 1428 p { 1429 line-height: var(--wp--typography--line-height, var(--global--line-height-body)); 1430 } 1431 1432 p.has-background { 1433 padding: var(--global--spacing-unit); 1434 } 1435 1436 pre.wp-block-preformatted { 1437 overflow-x: auto; 1438 white-space: pre !important; 1439 font-size: var(--global--font-size-xs); 1440 } 1441 1442 .wp-block-pullquote { 1443 padding: calc(2 * var(--global--spacing-unit)) 0; 1444 text-align: center; 1445 border-width: var(--pullquote--border-width); 1446 border-bottom-style: solid; 1447 border-top-style: solid; 1448 color: currentColor; 1449 border-color: currentColor; 1450 position: relative; 1451 } 1452 1453 .wp-block-pullquote blockquote::before { 1454 color: currentColor; 1455 content: "“"; 1456 display: block; 1457 position: relative; 1458 left: 0; 1459 font-size: 3rem; 1460 font-weight: 500; 1461 line-height: 1; 1462 } 1463 1464 .wp-block-pullquote p { 1465 font-family: var(--pullquote--font-family); 1466 font-size: var(--pullquote--font-size); 1467 font-style: var(--pullquote--font-style); 1468 font-weight: 700; 1469 letter-spacing: var(--pullquote--letter-spacing); 1470 line-height: var(--pullquote--line-height); 1471 margin: 0; 1472 } 1473 1474 .wp-block-pullquote a { 1475 color: currentColor; 1476 } 1477 1478 .wp-block-pullquote .wp-block-pullquote__citation, 1479 .wp-block-pullquote cite, 1480 .wp-block-pullquote footer { 1481 font-size: var(--global--font-size-xs); 1482 font-style: var(--pullquote--font-style); 1483 text-transform: none; 1484 } 1485 1486 .wp-block-pullquote:not(.is-style-solid-color) { 1487 background: none; 1488 } 1489 1490 .wp-block-pullquote.is-style-solid-color { 1491 margin-left: auto; 1492 margin-right: auto; 1493 padding: calc(2.5 * var(--global--spacing-unit)); 1494 border-width: var(--pullquote--border-width); 1495 border-style: solid; 1496 border-color: var(--pullquote--border-color); 1497 } 1498 @media (min-width: 600px) { 1499 1500 .wp-block-pullquote.is-style-solid-color { 1501 padding: calc(5 * var(--global--spacing-unit)); 1502 } 1503 } 1504 1505 .wp-block-pullquote.is-style-solid-color blockquote::before { 1506 text-align: left; 1507 } 1508 1509 .wp-block-pullquote.is-style-solid-color.alignleft blockquote, 1510 .wp-block-pullquote.is-style-solid-color.alignright blockquote { 1511 padding-left: var(--global--spacing-unit); 1512 padding-right: var(--global--spacing-unit); 1513 max-width: inherit; 1514 } 1515 1516 .wp-block-pullquote.is-style-solid-color blockquote { 1517 margin: 0; 1518 max-width: 100%; 1519 } 1520 1521 .wp-block-pullquote.is-style-solid-color blockquote p { 1522 font-size: var(--pullquote--font-size); 1523 } 1524 1525 .wp-block-pullquote.is-style-solid-color .wp-block-pullquote__citation, 1526 .wp-block-pullquote.is-style-solid-color cite, 1527 .wp-block-pullquote.is-style-solid-color footer { 1528 color: currentColor; 1529 } 1530 1531 .wp-block[data-align=full] .wp-block-pullquote:not(.is-style-solid-color) blockquote { 1532 padding: 0 calc(2 * var(--global--spacing-unit)); 1533 } 1534 1535 .wp-block[data-align=left] .wp-block-pullquote.is-style-solid-color, 1536 .wp-block[data-align=right] .wp-block-pullquote.is-style-solid-color { 1537 padding: var(--global--spacing-unit); 1538 } 1539 1540 .wp-block-query.has-background { 1541 padding: calc(0.666 * var(--global--spacing-vertical)); 1542 } 1543 @media only screen and (min-width: 482px) { 1544 1545 .wp-block-query.has-background { 1546 padding: var(--global--spacing-vertical); 1547 } 1548 } 1549 1550 .wp-block-quote { 1551 position: relative; 1552 border-left: none; 1553 margin: var(--global--spacing-vertical) auto var(--global--spacing-vertical) var(--global--spacing-horizontal); 1554 } 1555 1556 .wp-block-quote p { 1557 font-family: var(--quote--font-family); 1558 font-size: var(--quote--font-size); 1559 font-style: var(--quote--font-style); 1560 font-weight: var(--quote--font-weight); 1561 line-height: var(--quote--line-height); 1562 } 1563 1564 .wp-block-quote strong { 1565 font-weight: var(--quote--font-weight-strong); 1566 } 1567 1568 .wp-block-quote:before { 1569 content: "“"; 1570 font-size: var(--quote--font-size); 1571 line-height: var(--quote--line-height); 1572 left: calc(-0.5 * var(--global--spacing-horizontal)); 1573 } 1574 1575 .wp-block-quote .wp-block-quote__citation { 1576 color: var(--global--color-primary); 1577 font-size: var(--global--font-size-xs); 1578 font-style: var(--quote--font-style-cite); 1579 } 1580 1581 .has-background .wp-block-quote .wp-block-quote__citation, 1582 [class*=background-color] .wp-block-quote .wp-block-quote__citation, 1583 [style*=background-color] .wp-block-quote .wp-block-quote__citation, 1584 .wp-block-cover[style*=background-image] .wp-block-quote .wp-block-quote__citation { 1585 color: currentColor; 1586 } 1587 1588 .wp-block-quote.has-text-align-right { 1589 margin: var(--global--spacing-vertical) var(--global--spacing-horizontal) var(--global--spacing-vertical) auto; 1590 padding-right: 0; 1591 border-right: none; 1592 } 1593 1594 .wp-block-quote.has-text-align-right:before { 1595 display: none; 1596 } 1597 1598 .wp-block-quote.has-text-align-right p:before { 1599 content: "”"; 1600 font-size: var(--quote--font-size); 1601 font-weight: normal; 1602 line-height: var(--quote--line-height); 1603 margin-right: 5px; 1604 } 1605 1606 .wp-block-quote.has-text-align-center { 1607 margin: var(--global--spacing-vertical) auto; 1608 } 1609 1610 .wp-block-quote.has-text-align-center:before { 1611 display: none; 1612 } 1613 1614 .wp-block-quote.is-large, 1615 .wp-block-quote.is-style-large { 1616 padding-left: 0; 1617 1618 /* Resetting margins to match _block-container.scss */ 1619 margin-top: var(--global--spacing-vertical); 1620 margin-bottom: var(--global--spacing-vertical); 1621 } 1622 1623 .wp-block-quote.is-large p, 1624 .wp-block-quote.is-style-large p { 1625 font-size: var(--quote--font-size-large); 1626 font-style: var(--quote--font-style-large); 1627 line-height: var(--quote--line-height-large); 1628 } 1629 1630 .wp-block-quote.is-large:before, 1631 .wp-block-quote.is-style-large:before { 1632 font-size: var(--quote--font-size-large); 1633 line-height: var(--quote--line-height-large); 1634 left: calc(-1 * var(--global--spacing-horizontal)); 1635 } 1636 1637 .wp-block-quote.is-large.has-text-align-right:before, 1638 .wp-block-quote.is-style-large.has-text-align-right:before { 1639 display: none; 1640 } 1641 1642 .wp-block-quote.is-large.has-text-align-right p:before, 1643 .wp-block-quote.is-style-large.has-text-align-right p:before { 1644 content: "”"; 1645 font-size: var(--quote--font-size-large); 1646 font-weight: normal; 1647 line-height: var(--quote--line-height-large); 1648 margin-right: 10px; 1649 } 1650 @media only screen and (max-width: 481px) { 1651 1652 .wp-block-quote.is-large, 1653 .wp-block-quote.is-style-large { 1654 padding-left: var(--global--spacing-horizontal); 1655 } 1656 1657 .wp-block-quote.is-large:before, 1658 .wp-block-quote.is-style-large:before { 1659 left: 0; 1660 } 1661 1662 .wp-block-quote.is-large.has-text-align-right, 1663 .wp-block-quote.is-style-large.has-text-align-right { 1664 padding-left: 0; 1665 padding-right: var(--global--spacing-horizontal); 1666 } 1667 1668 .wp-block-quote.is-large.has-text-align-right:before, 1669 .wp-block-quote.is-style-large.has-text-align-right:before { 1670 right: 0; 1671 } 1672 } 1673 @media only screen and (max-width: 481px) { 1674 1675 .wp-block-quote { 1676 padding-left: calc(0.5 * var(--global--spacing-horizontal)); 1677 } 1678 1679 .wp-block-quote:before { 1680 left: 0; 1681 } 1682 1683 .wp-block-quote.has-text-align-right { 1684 padding-left: 0; 1685 padding-right: calc(0.5 * var(--global--spacing-horizontal)); 1686 } 1687 1688 .wp-block-quote.has-text-align-right:before { 1689 right: 0; 1690 } 1691 1692 .wp-block-quote.has-text-align-center { 1693 padding-left: 0; 1694 padding-right: 0; 1695 } 1696 } 1697 @media only screen and (min-width: 482px) { 1698 1699 .wp-block-quote { 1700 margin-left: auto; 1701 } 1702 1703 .wp-block-quote.has-text-align-right { 1704 margin-right: auto; 1705 } 1706 } 1707 1708 .wp-block-rss { 1709 padding-left: 0; 1710 } 1711 1712 .wp-block-rss > li { 1713 list-style: none; 1714 } 1715 1716 .wp-block-rss:not(.is-grid) > li { 1717 margin-top: calc(1.666 * var(--global--spacing-vertical)); 1718 margin-bottom: calc(1.666 * var(--global--spacing-vertical)); 1719 } 1720 1721 .wp-block-rss:not(.is-grid) > li:first-child { 1722 margin-top: 0; 1723 } 1724 1725 .wp-block-rss:not(.is-grid) > li:last-child { 1726 margin-bottom: 0; 1727 } 1728 1729 .wp-block-rss.is-grid > li { 1730 margin-bottom: var(--global--spacing-vertical); 1731 } 1732 1733 .wp-block-rss.is-grid > li:last-child { 1734 margin-bottom: 0; 1735 } 1736 1737 .wp-block-rss.is-grid.columns-2 > li:nth-last-child(-n+2):nth-child(2n+1), 1738 .wp-block-rss.is-grid.columns-2 > li:nth-last-child(-n+2):nth-child(2n+1) ~ li, 1739 .wp-block-rss.is-grid.columns-3 > li:nth-last-child(-n+3):nth-child(3n+1), 1740 .wp-block-rss.is-grid.columns-3 > li:nth-last-child(-n+3):nth-child(3n+1) ~ li, 1741 .wp-block-rss.is-grid.columns-4 > li:nth-last-child(-n+4):nth-child(4n+1), 1742 .wp-block-rss.is-grid.columns-4 > li:nth-last-child(-n+4):nth-child(4n+1) ~ li, 1743 .wp-block-rss.is-grid.columns-5 > li:nth-last-child(-n+5):nth-child(5n+1), 1744 .wp-block-rss.is-grid.columns-5 > li:nth-last-child(-n+5):nth-child(5n+1) ~ li, 1745 .wp-block-rss.is-grid.columns-6 > li:nth-last-child(-n+6):nth-child(6n+1), 1746 .wp-block-rss.is-grid.columns-6 > li:nth-last-child(-n+6):nth-child(6n+1) ~ li { 1747 margin-bottom: 0; 1748 } 1749 1750 .wp-block-rss > li > * { 1751 margin-top: calc(0.333 * var(--global--spacing-vertical)); 1752 margin-bottom: calc(0.333 * var(--global--spacing-vertical)); 1753 } 1754 1755 .wp-block-rss > li > *:first-child { 1756 margin-top: 0; 1757 } 1758 1759 .wp-block-rss > li > *:last-child { 1760 margin-bottom: 0; 1761 } 1762 1763 .wp-block-rss .wp-block-rss__item-title > a { 1764 display: inline-block; 1765 font-family: var(--latest-posts--title-font-family); 1766 font-size: var(--latest-posts--title-font-size); 1767 font-weight: var(--heading--font-weight); 1768 line-height: var(--global--line-height-heading); 1769 margin-bottom: calc(0.333 * var(--global--spacing-vertical)); 1770 } 1771 1772 .wp-block-rss .wp-block-rss__item-author { 1773 color: var(--global--color-primary); 1774 font-size: var(--global--font-size-md); 1775 line-height: var(--global--line-height-body); 1776 } 1777 1778 .wp-block-rss .wp-block-rss__item-publish-date { 1779 color: var(--global--color-primary); 1780 font-size: var(--global--font-size-xs); 1781 line-height: var(--global--line-height-body); 1782 } 1783 1784 [class*=inner-container] .wp-block-rss .wp-block-rss__item-publish-date, 1785 .has-background .wp-block-rss .wp-block-rss__item-publish-date { 1786 color: currentColor; 1787 } 1788 1789 .wp-block-rss .wp-block-rss__item-excerpt, 1790 .wp-block-rss .wp-block-rss__item-full-content { 1791 font-family: var(--latest-posts--description-font-family); 1792 font-size: var(--latest-posts--description-font-size); 1793 line-height: var(--global--line-height-body); 1794 margin-top: calc(0.666 * var(--global--spacing-vertical)); 1795 } 1796 1797 .wp-block-rss.alignfull { 1798 padding-left: var(--global--spacing-unit); 1799 padding-right: var(--global--spacing-unit); 1800 } 1801 1802 .entry-content [class*=inner-container] .wp-block-rss.alignfull, 1803 .entry-content .has-background .wp-block-rss.alignfull { 1804 padding-left: 0; 1805 padding-right: 0; 1806 } 1807 1808 .wp-block-search { 1809 max-width: var(--responsive--aligndefault-width); 1810 } 1811 1812 .wp-block-search .wp-block-search__label { 1813 font-size: var(--form--font-size); 1814 font-weight: var(--form--label-weight); 1815 margin-bottom: calc(var(--global--spacing-vertical) / 3); 1816 } 1817 1818 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper, 1819 .wp-block-search .wp-block-search__input { 1820 border: var(--form--border-width) solid var(--form--border-color); 1821 border-radius: var(--form--border-radius); 1822 font-family: var(--form--font-family); 1823 font-size: var(--form--font-size); 1824 line-height: var(--form--line-height); 1825 max-width: inherit; 1826 margin-right: calc(-1 * var(--button--border-width)); 1827 padding: var(--form--spacing-unit); 1828 } 1829 1830 .is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper, 1831 .is-dark-theme .wp-block-search .wp-block-search__input { 1832 background: var(--global--color-white-90); 1833 } 1834 1835 .has-background .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper, 1836 .has-background .wp-block-search .wp-block-search__input { 1837 border-color: var(--local--color-primary, var(--global--color-primary)) !important; 1838 } 1839 1840 .wp-block-search .wp-block-search__button.wp-block-search__button { 1841 border: var(--button--border-width) solid transparent; 1842 border-radius: var(--button--border-radius); 1843 cursor: pointer; 1844 font-weight: var(--button--font-weight); 1845 font-family: var(--button--font-family); 1846 font-size: var(--button--font-size); 1847 line-height: var(--button--line-height); 1848 padding: var(--button--padding-vertical) var(--button--padding-horizontal); 1849 text-decoration: none; 1850 box-shadow: none; 1851 margin-left: 0; 1852 } 1853 1854 .wp-block-search .wp-block-search__button.wp-block-search__button:not(:hover):not(:active):not(.has-text-color) { 1855 color: var(--global--color-background); 1856 } 1857 1858 .has-background .wp-block-search .wp-block-search__button.wp-block-search__button:not(:hover):not(:active):not(.has-text-color) { 1859 color: var(--local--color-background, var(--global--color-primary)); 1860 } 1861 1862 .has-background .wp-block-search .wp-block-search__button.wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background { 1863 color: var(--global--color-primary); 1864 } 1865 1866 .wp-block-search .wp-block-search__button.wp-block-search__button:not(:hover):not(:active):not(.has-background) { 1867 background-color: var(--global--color-primary); 1868 } 1869 1870 .has-background .wp-block-search .wp-block-search__button.wp-block-search__button:not(:hover):not(:active):not(.has-background) { 1871 background-color: var(--local--color-primary, var(--global--color-primary)); 1872 } 1873 1874 .wp-block-search .wp-block-search__button.wp-block-search__button:hover, 1875 .wp-block-search .wp-block-search__button.wp-block-search__button:active { 1876 background-color: transparent; 1877 border-color: currentColor; 1878 color: inherit; 1879 } 1880 1881 .wp-block-search .wp-block-search__button.wp-block-search__button:focus { 1882 outline-offset: -6px; 1883 outline: 2px dotted currentColor; 1884 } 1885 1886 .wp-block-search .wp-block-search__button.wp-block-search__button:disabled { 1887 background-color: var(--global--color-white-50); 1888 border-color: var(--global--color-white-50); 1889 color: var(--button--color-text-active); 1890 } 1891 1892 .wp-block-search .wp-block-search__button.wp-block-search__button.has-icon { 1893 padding: 6px calc(0.5 * var(--button--padding-horizontal)); 1894 display: inherit; 1895 } 1896 1897 .wp-block-search .wp-block-search__button.wp-block-search__button.has-icon svg { 1898 width: 40px; 1899 height: 40px; 1900 } 1901 1902 .has-background .wp-block-search .wp-block-search__button.wp-block-search__button:hover, 1903 .has-background .wp-block-search .wp-block-search__button.wp-block-search__button:active { 1904 background-color: var(--local--color-background, var(--global--color-background)) !important; 1905 color: var(--local--color-primary, var(--global--color-primary)) !important; 1906 } 1907 1908 .has-text-color .wp-block-search .wp-block-search__button.wp-block-search__button:hover, 1909 .has-text-color .wp-block-search .wp-block-search__button.wp-block-search__button:active { 1910 color: var(--local--color-primary, var(--global--color-primary)) !important; 1911 } 1912 1913 .wp-block-search .wp-block-search__button.wp-block-search__button:focus { 1914 outline-offset: inherit; 1915 outline: inherit; 1916 } 1917 1918 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper { 1919 padding: var(--form--border-width); 1920 } 1921 1922 .wp-block-search.wp-block-search__button-inside .wp-block-search__input { 1923 border: none; 1924 } 1925 1926 .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button:hover, 1927 .wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button:hover { 1928 color: var(--global--color-dark-gray); 1929 } 1930 1931 .is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button, 1932 .is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button { 1933 color: var(--global--color-dark-gray); 1934 } 1935 1936 .is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button:hover, 1937 .is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button:hover { 1938 background-color: var(--global--color-dark-gray); 1939 color: var(--global--color-white); 1940 } 1941 1942 .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button { 1943 padding: var(--button--padding-vertical) var(--button--padding-horizontal); 1944 } 1945 1946 .wp-block[data-align=center] > * { 1947 text-align: center; 1948 } 1949 1950 .wp-block[data-align=center] .wp-block-search__button-only .wp-block-search__inside-wrapper { 1951 justify-content: center; 1952 } 1953 1954 .wp-block-separator, 1955 hr { 1956 border-bottom: var(--separator--height) solid var(--separator--border-color); 1957 clear: both; 1958 opacity: 1; 1959 } 1960 1961 .wp-block-separator[style*="text-align:right"], 1962 .wp-block-separator[style*="text-align: right"], 1963 hr[style*="text-align:right"], 1964 hr[style*="text-align: right"] { 1965 border-right-color: var(--separator--border-color); 1966 } 1967 1968 .wp-block-separator:not(.is-style-dots), 1969 hr:not(.is-style-dots) { 1970 max-width: var(--responsive--aligndefault-width); 1971 } 1972 1973 [data-align=full] > .wp-block-separator, 1974 [data-align=wide] > .wp-block-separator, 1975 [data-align=full] > hr, 1976 [data-align=wide] > hr { 1977 max-width: inherit; 1978 } 1979 1980 .wp-block-separator.is-style-twentytwentyone-separator-thick, 1981 hr.is-style-twentytwentyone-separator-thick { 1982 border-bottom-width: calc(3 * var(--separator--height)); 1983 } 1984 1985 .wp-block-separator.is-style-dots, 1986 hr.is-style-dots { 1987 border-bottom: none; 1988 } 1989 1990 .wp-block-separator.is-style-dots.has-background, 1991 .wp-block-separator.is-style-dots.has-text-color, 1992 hr.is-style-dots.has-background, 1993 hr.is-style-dots.has-text-color { 1994 background-color: transparent !important; 1995 } 1996 1997 .wp-block-separator.is-style-dots.has-background:before, 1998 .wp-block-separator.is-style-dots.has-text-color:before, 1999 hr.is-style-dots.has-background:before, 2000 hr.is-style-dots.has-text-color:before { 2001 color: currentColor !important; 2002 } 2003 2004 .wp-block-separator.is-style-dots:before, 2005 hr.is-style-dots:before { 2006 color: var(--separator--border-color); 2007 } 2008 2009 .has-background .wp-block-separator, 2010 [class*=background-color] .wp-block-separator, 2011 [style*=background-color] .wp-block-separator, 2012 .wp-block-cover[style*=background-image] .wp-block-separator, 2013 .has-background hr, 2014 [class*=background-color] hr, 2015 [style*=background-color] hr, 2016 .wp-block-cover[style*=background-image] hr { 2017 border-color: currentColor; 2018 } 2019 2020 .wp-block-social-links [data-block] { 2021 margin-top: 0; 2022 margin-bottom: 0; 2023 } 2024 2025 .wp-block-social-links.is-style-twentytwentyone-social-icons-color button { 2026 color: var(--global--color-primary); 2027 } 2028 2029 .wp-block-social-links.is-style-twentytwentyone-social-icons-color .wp-social-link { 2030 background: none; 2031 } 2032 2033 table thead, 2034 table tfoot, 2035 .wp-block-table thead, 2036 .wp-block-table tfoot { 2037 text-align: center; 2038 } 2039 2040 table th, 2041 .wp-block-table th { 2042 font-family: var(--heading--font-family); 2043 } 2044 2045 table td, 2046 table th, 2047 .wp-block-table td, 2048 .wp-block-table th { 2049 padding: calc(0.5 * var(--global--spacing-unit)); 2050 } 2051 2052 table.is-style-regular .has-background, 2053 table.is-style-stripes .has-background, 2054 table.is-style-stripes .has-background thead tr, 2055 table.is-style-stripes .has-background tfoot tr, 2056 table.is-style-stripes .has-background tbody tr, 2057 .wp-block-table.is-style-regular .has-background, 2058 .wp-block-table.is-style-stripes .has-background, 2059 .wp-block-table.is-style-stripes .has-background thead tr, 2060 .wp-block-table.is-style-stripes .has-background tfoot tr, 2061 .wp-block-table.is-style-stripes .has-background tbody tr { 2062 color: var(--table--has-background-text-color); 2063 } 2064 2065 table.is-style-stripes, 2066 .wp-block-table.is-style-stripes { 2067 border-color: var(--table--stripes-border-color); 2068 } 2069 2070 table.is-style-stripes th, 2071 table.is-style-stripes td, 2072 .wp-block-table.is-style-stripes th, 2073 .wp-block-table.is-style-stripes td { 2074 border-width: 0; 2075 } 2076 2077 table.is-style-stripes tbody tr:nth-child(odd), 2078 .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { 2079 background-color: var(--table--stripes-background-color); 2080 } 2081 2082 table.is-style-stripes .has-background tbody tr:nth-child(odd), 2083 .wp-block-table.is-style-stripes .has-background tbody tr:nth-child(odd) { 2084 background-color: var(--global--color-white-90); 2085 } 2086 2087 table.wp-calendar-table td, 2088 table.wp-calendar-table th { 2089 background: transparent; 2090 border: 0; 2091 text-align: center; 2092 line-height: 2; 2093 vertical-align: middle; 2094 } 2095 2096 table.wp-calendar-table th { 2097 font-weight: bold; 2098 } 2099 2100 table.wp-calendar-table thead, 2101 table.wp-calendar-table tbody { 2102 color: currentColor; 2103 border: 1px solid; 2104 } 2105 2106 table.wp-calendar-table caption { 2107 font-weight: bold; 2108 text-align: left; 2109 margin-bottom: var(--global--spacing-unit); 2110 color: currentColor; 2111 } 2112 2113 .wp-calendar-nav { 2114 text-align: left; 2115 margin-top: calc(var(--global--spacing-unit) / 2); 2116 } 2117 2118 .wp-calendar-nav svg { 2119 height: 1em; 2120 vertical-align: middle; 2121 } 2122 2123 .wp-calendar-nav svg path { 2124 fill: currentColor; 2125 } 2126 2127 .wp-calendar-nav .wp-calendar-nav-next { 2128 float: right; 2129 } 2130 2131 .wp-block-tag-cloud.aligncenter { 2132 text-align: center; 2133 } 2134 2135 pre.wp-block-verse { 2136 padding: 0; 2137 color: currentColor; 2138 } 2139 2140 :root .is-extra-small-text, 2141 :root .has-extra-small-font-size { 2142 font-size: var(--global--font-size-xs); 2143 } 2144 2145 :root .is-small-text, 2146 :root .has-small-font-size { 2147 font-size: var(--global--font-size-sm); 2148 } 2149 2150 :root .is-regular-text, 2151 :root .has-regular-font-size, 2152 :root .is-normal-font-size, 2153 :root .has-normal-font-size, 2154 :root .has-medium-font-size { 2155 font-size: var(--global--font-size-base); 2156 } 2157 2158 :root .is-large-text, 2159 :root .has-large-font-size { 2160 font-size: var(--global--font-size-lg); 2161 line-height: var(--global--line-height-heading); 2162 } 2163 2164 :root .is-larger-text, 2165 :root .has-larger-font-size, 2166 :root .is-extra-large-text, 2167 :root .has-extra-large-font-size { 2168 font-size: var(--global--font-size-xl); 2169 line-height: var(--global--line-height-heading); 2170 } 2171 2172 :root .is-huge-text, 2173 :root .has-huge-font-size { 2174 font-size: var(--global--font-size-xxl); 2175 line-height: var(--global--line-height-heading); 2176 font-weight: var(--heading--font-weight-page-title); 2177 } 2178 2179 :root .is-gigantic-text, 2180 :root .has-gigantic-font-size { 2181 font-size: var(--global--font-size-xxxl); 2182 line-height: var(--global--line-height-heading); 2183 font-weight: var(--heading--font-weight-page-title); 2184 } 2185 2186 /** 2187 * Editor Post Title 2188 * - Needs a special styles 2189 */ 2190 .wp-block.editor-post-title__block { 2191 border-bottom: 3px solid var(--global--color-border); 2192 padding-bottom: calc(2 * var(--global--spacing-vertical)); 2193 margin-bottom: calc(3 * var(--global--spacing-vertical)); 2194 max-width: var(--responsive--alignwide-width); 2195 } 2196 2197 .wp-block.editor-post-title__block .editor-post-title__input { 2198 color: var(--global--color-secondary); 2199 font-family: var(--heading--font-family); 2200 font-size: var(--global--font-size-page-title); 2201 font-weight: var(--heading--font-weight-page-title); 2202 line-height: var(--heading--line-height-h1); 2203 } 2204 2205 .wp-block.block-editor-default-block-appender > textarea { 2206 font-family: var(--global--font-secondary); 2207 font-size: var(--global--font-size-md); 2208 } 2209 2210 .has-primary-color[class] { 2211 color: var(--global--color-primary); 2212 } 2213 2214 .has-secondary-color[class] { 2215 color: var(--global--color-secondary); 2216 } 2217 2218 .has-background a, 2219 .has-background p, 2220 .has-background h1, 2221 .has-background h2, 2222 .has-background h3, 2223 .has-background h4, 2224 .has-background h5, 2225 .has-background h6 { 2226 color: currentColor; 2227 } 2228 2229 .has-primary-background-color[class] { 2230 background-color: var(--global--color-primary); 2231 color: var(--global--color-background); 2232 } 2233 2234 .has-secondary-background-color[class] { 2235 background-color: var(--global--color-secondary); 2236 color: var(--global--color-background); 2237 } 2238 2239 .has-white-background-color[class] { 2240 background-color: var(--global--color-white); 2241 color: var(--global--color-secondary); 2242 } 2243 2244 .has-black-background-color[class] { 2245 background-color: var(--global--color-black); 2246 color: var(--global--color-primary); 2247 } 2248 2249 [data-block] { 2250 margin-top: var(--global--spacing-vertical); 2251 margin-bottom: var(--global--spacing-vertical); 2252 } 2253 2254 .wp-block { 2255 max-width: var(--responsive--aligndefault-width); 2256 } 2257 2258 .wp-block[data-align=wide], 2259 .wp-block.alignwide { 2260 max-width: var(--responsive--alignwide-width); 2261 } 2262 2263 .wp-block[data-align=full], 2264 .wp-block.alignfull { 2265 max-width: none; 2266 } 2267 2268 .alignleft { 2269 margin: 0; 2270 margin-right: var(--global--spacing-horizontal); 2271 } 2272 2273 .alignright { 2274 margin: 0; 2275 margin-left: var(--global--spacing-horizontal); 2276 } 2277 2278 .has-drop-cap:not(:focus)::first-letter { 2279 font-family: var(--heading--font-family); 2280 font-weight: var(--heading--font-weight); 2281 line-height: 0.66; 2282 text-transform: uppercase; 2283 font-style: normal; 2284 float: left; 2285 margin: 0.1em 0.1em 0 0; 2286 font-size: calc(1.2 * var(--heading--font-size-h1)); 2287 } 2288 2289 @media only screen and (min-width: 482px) { 2290 2291 .wp-block[data-align=left] > * { 2292 max-width: 290px; 2293 margin-right: var(--global--spacing-horizontal); 2294 } 2295 2296 .wp-block[data-align=right] > * { 2297 max-width: 290px; 2298 margin-left: var(--global--spacing-horizontal); 2299 } 2300 } 2301 2302 .wp-block-freeform.block-library-rich-text__tinymce blockquote { 2303 border: none; 2304 } 2305 2306 .wp-block-freeform.block-library-rich-text__tinymce blockquote:before { 2307 left: 5px; 2308 } 2309 2310 html { 2311 font-family: var(--global--font-secondary); 2312 line-height: var(--global--line-height-body); 2313 } 2314 2315 body { 2316 --wp--typography--line-height: var(--global--line-height-body); 2317 color: var(--global--color-primary); 2318 background-color: var(--global--color-background); 2319 font-family: var(--global--font-secondary); 2320 font-size: var(--global--font-size-base); 2321 font-weight: normal; 2322 -moz-osx-font-smoothing: grayscale; 2323 -webkit-font-smoothing: antialiased; 2324 } 2325 2326 .wp-block a { 2327 color: var(--wp--style--color--link, var(--global--color-primary)); 2328 } 2329 2330 .wp-block a:hover { 2331 text-decoration-style: dotted; 2332 } 2333 2334 .wp-block a:focus { 2335 outline: 2px solid var(--wp--style--color--link, var(--global--color-primary)); 2336 text-decoration: none; 2337 } 2338 2339 .has-background .has-link-color a, 2340 .has-background.has-link-color a { 2341 color: var(--wp--style--color--link, var(--global--color-primary)); 2342 } 2343 2344 button, 2345 a { 2346 cursor: pointer; 2347 } 2348 2349 .has-black-color[class] { 2350 color: var(--global--color-black); 2351 } 2352 2353 .has-black-color[class] > [class*=__inner-container] { 2354 --local--color-primary: var(--global--color-black, #000); 2355 color: var(--local--color-primary); 2356 } 2357 2358 .has-gray-color[class] { 2359 color: var(--global--color-gray); 2360 } 2361 2362 .has-gray-color[class] > [class*=__inner-container] { 2363 --local--color-primary: var(--global--color-gray, #000); 2364 color: var(--local--color-primary); 2365 } 2366 2367 .has-dark-gray-color[class] { 2368 color: var(--global--color-dark-gray); 2369 } 2370 2371 .has-dark-gray-color[class] > [class*=__inner-container] { 2372 --local--color-primary: var(--global--color-dark-gray, #000); 2373 color: var(--local--color-primary); 2374 } 2375 2376 .has-green-color[class] { 2377 color: var(--global--color-green); 2378 } 2379 2380 .has-green-color[class] > [class*=__inner-container] { 2381 --local--color-primary: var(--global--color-green, #fff); 2382 color: var(--local--color-primary); 2383 } 2384 2385 .has-blue-color[class] { 2386 color: var(--global--color-blue); 2387 } 2388 2389 .has-blue-color[class] > [class*=__inner-container] { 2390 --local--color-primary: var(--global--color-blue, #fff); 2391 color: var(--local--color-primary); 2392 } 2393 2394 .has-purple-color[class] { 2395 color: var(--global--color-purple); 2396 } 2397 2398 .has-purple-color[class] > [class*=__inner-container] { 2399 --local--color-primary: var(--global--color-purple, #fff); 2400 color: var(--local--color-primary); 2401 } 2402 2403 .has-red-color[class] { 2404 color: var(--global--color-red); 2405 } 2406 2407 .has-red-color[class] > [class*=__inner-container] { 2408 --local--color-primary: var(--global--color-red, #fff); 2409 color: var(--local--color-primary); 2410 } 2411 2412 .has-orange-color[class] { 2413 color: var(--global--color-orange); 2414 } 2415 2416 .has-orange-color[class] > [class*=__inner-container] { 2417 --local--color-primary: var(--global--color-orange, #fff); 2418 color: var(--local--color-primary); 2419 } 2420 2421 .has-yellow-color[class] { 2422 color: var(--global--color-yellow); 2423 } 2424 2425 .has-yellow-color[class] > [class*=__inner-container] { 2426 --local--color-primary: var(--global--color-yellow, #fff); 2427 color: var(--local--color-primary); 2428 } 2429 2430 .has-white-color[class] { 2431 color: var(--global--color-white); 2432 } 2433 2434 .has-white-color[class] > [class*=__inner-container] { 2435 --local--color-primary: var(--global--color-white, #fff); 2436 color: var(--local--color-primary); 2437 } 2438 2439 .has-background a, 2440 .has-background p, 2441 .has-background h1, 2442 .has-background h2, 2443 .has-background h3, 2444 .has-background h4, 2445 .has-background h5, 2446 .has-background h6 { 2447 color: currentColor; 2448 } 2449 2450 .has-black-background-color[class] { 2451 background-color: var(--global--color-black); 2452 } 2453 2454 .has-black-background-color[class] > [class*=__inner-container] { 2455 --local--color-background: var(--global--color-black, #000); 2456 background-color: var(--local--color-background); 2457 } 2458 2459 .has-dark-gray-background-color[class] { 2460 background-color: var(--global--color-dark-gray); 2461 } 2462 2463 .has-dark-gray-background-color[class] > [class*=__inner-container] { 2464 --local--color-background: var(--global--color-dark-gray, #000); 2465 background-color: var(--local--color-background); 2466 } 2467 2468 .has-gray-background-color[class] { 2469 background-color: var(--global--color-gray); 2470 } 2471 2472 .has-gray-background-color[class] > [class*=__inner-container] { 2473 --local--color-background: var(--global--color-gray, #000); 2474 background-color: var(--local--color-background); 2475 } 2476 2477 .has-light-gray-background-color[class] { 2478 background-color: var(--global--color-light-gray); 2479 } 2480 2481 .has-light-gray-background-color[class] > [class*=__inner-container] { 2482 --local--color-background: var(--global--color-light-gray, #fff); 2483 background-color: var(--local--color-background); 2484 } 2485 2486 .has-green-background-color[class] { 2487 background-color: var(--global--color-green); 2488 } 2489 2490 .has-green-background-color[class] > [class*=__inner-container] { 2491 --local--color-background: var(--global--color-green, #fff); 2492 background-color: var(--local--color-background); 2493 } 2494 2495 .has-blue-background-color[class] { 2496 background-color: var(--global--color-blue); 2497 } 2498 2499 .has-blue-background-color[class] > [class*=__inner-container] { 2500 --local--color-background: var(--global--color-blue, #fff); 2501 background-color: var(--local--color-background); 2502 } 2503 2504 .has-purple-background-color[class] { 2505 background-color: var(--global--color-purple); 2506 } 2507 2508 .has-purple-background-color[class] > [class*=__inner-container] { 2509 --local--color-background: var(--global--color-purple, #fff); 2510 background-color: var(--local--color-background); 2511 } 2512 2513 .has-red-background-color[class] { 2514 background-color: var(--global--color-red); 2515 } 2516 2517 .has-red-background-color[class] > [class*=__inner-container] { 2518 --local--color-background: var(--global--color-red, #fff); 2519 background-color: var(--local--color-background); 2520 } 2521 2522 .has-orange-background-color[class] { 2523 background-color: var(--global--color-orange); 2524 } 2525 2526 .has-orange-background-color[class] > [class*=__inner-container] { 2527 --local--color-background: var(--global--color-orange, #fff); 2528 background-color: var(--local--color-background); 2529 } 2530 2531 .has-yellow-background-color[class] { 2532 background-color: var(--global--color-yellow); 2533 } 2534 2535 .has-yellow-background-color[class] > [class*=__inner-container] { 2536 --local--color-background: var(--global--color-yellow, #fff); 2537 background-color: var(--local--color-background); 2538 } 2539 2540 .has-white-background-color[class] { 2541 background-color: var(--global--color-white); 2542 } 2543 2544 .has-white-background-color[class] > [class*=__inner-container] { 2545 --local--color-background: var(--global--color-white, #fff); 2546 background-color: var(--local--color-background); 2547 } 2548 2549 .has-background:not(.has-text-color).has-black-background-color[class], 2550 .has-background:not(.has-text-color).has-gray-background-color[class], 2551 .has-background:not(.has-text-color).has-dark-gray-background-color[class] { 2552 color: var(--global--color-white); 2553 } 2554 2555 .has-background:not(.has-text-color).has-black-background-color[class] > [class*=__inner-container], 2556 .has-background:not(.has-text-color).has-gray-background-color[class] > [class*=__inner-container], 2557 .has-background:not(.has-text-color).has-dark-gray-background-color[class] > [class*=__inner-container] { 2558 --local--color-primary: var(--global--color-background, #fff); 2559 color: var(--local--color-primary, var(--global--color-primary)); 2560 } 2561 2562 .is-dark-theme .has-background:not(.has-text-color).has-black-background-color[class] > [class*=__inner-container], 2563 .is-dark-theme .has-background:not(.has-text-color).has-gray-background-color[class] > [class*=__inner-container], 2564 .is-dark-theme .has-background:not(.has-text-color).has-dark-gray-background-color[class] > [class*=__inner-container] { 2565 --local--color-primary: var(--global--color-primary, #000); 2566 } 2567 2568 .has-background:not(.has-text-color).has-green-background-color[class], 2569 .has-background:not(.has-text-color).has-blue-background-color[class], 2570 .has-background:not(.has-text-color).has-purple-background-color[class], 2571 .has-background:not(.has-text-color).has-red-background-color[class], 2572 .has-background:not(.has-text-color).has-orange-background-color[class], 2573 .has-background:not(.has-text-color).has-yellow-background-color[class], 2574 .has-background:not(.has-text-color).has-white-background-color[class] { 2575 color: var(--global--color-dark-gray); 2576 } 2577 2578 .has-background:not(.has-text-color).has-green-background-color[class] > [class*=__inner-container], 2579 .has-background:not(.has-text-color).has-blue-background-color[class] > [class*=__inner-container], 2580 .has-background:not(.has-text-color).has-purple-background-color[class] > [class*=__inner-container], 2581 .has-background:not(.has-text-color).has-red-background-color[class] > [class*=__inner-container], 2582 .has-background:not(.has-text-color).has-orange-background-color[class] > [class*=__inner-container], 2583 .has-background:not(.has-text-color).has-yellow-background-color[class] > [class*=__inner-container], 2584 .has-background:not(.has-text-color).has-white-background-color[class] > [class*=__inner-container] { 2585 --local--color-primary: var(--global--color-primary, #000); 2586 color: var(--local--color-primary, var(--global--color-primary)); 2587 } 2588 2589 .is-dark-theme .has-background:not(.has-text-color).has-green-background-color[class] > [class*=__inner-container], 2590 .is-dark-theme .has-background:not(.has-text-color).has-blue-background-color[class] > [class*=__inner-container], 2591 .is-dark-theme .has-background:not(.has-text-color).has-purple-background-color[class] > [class*=__inner-container], 2592 .is-dark-theme .has-background:not(.has-text-color).has-red-background-color[class] > [class*=__inner-container], 2593 .is-dark-theme .has-background:not(.has-text-color).has-orange-background-color[class] > [class*=__inner-container], 2594 .is-dark-theme .has-background:not(.has-text-color).has-yellow-background-color[class] > [class*=__inner-container], 2595 .is-dark-theme .has-background:not(.has-text-color).has-white-background-color[class] > [class*=__inner-container] { 2596 --local--color-primary: var(--global--color-background, #fff); 2597 } 2598 2599 .has-purple-to-yellow-gradient-background { 2600 background: linear-gradient(160deg, var(--global--color-purple), var(--global--color-yellow)); 2601 } 2602 2603 .has-yellow-to-purple-gradient-background { 2604 background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-purple)); 2605 } 2606 2607 .has-green-to-yellow-gradient-background { 2608 background: linear-gradient(160deg, var(--global--color-green), var(--global--color-yellow)); 2609 } 2610 2611 .has-yellow-to-green-gradient-background { 2612 background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-green)); 2613 } 2614 2615 .has-red-to-yellow-gradient-background { 2616 background: linear-gradient(160deg, var(--global--color-red), var(--global--color-yellow)); 2617 } 2618 2619 .has-yellow-to-red-gradient-background { 2620 background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-red)); 2621 } 2622 2623 .has-purple-to-red-gradient-background { 2624 background: linear-gradient(160deg, var(--global--color-purple), var(--global--color-red)); 2625 } 2626 2627 .has-red-to-purple-gradient-background { 2628 background: linear-gradient(160deg, var(--global--color-red), var(--global--color-purple)); 2629 }